From cfa2eadec945659cb2e868b4475625a0ce16c804 Mon Sep 17 00:00:00 2001
From: Kerboul <ethan.puyaubreau@gmail.com>
Date: Sun, 31 May 2026 23:57:00 +0200
Subject: [PATCH] feat: conformite enonce - explorer, favoris, stats perso,
 tests, slots

Fonctionnel
- Backend messages : GET /api/messages/:id (detail) + recherche (q),
  pagination par curseur (before/limit) avec enveloppe { items, nextCursor,
  hasMore } ; le flux temps reel garde l'ancien format quand aucun parametre.
- Explorer (/explorer) : catalogue distant, recherche debouncee + annulable
  (AbortController), filtre, defilement infini, etat garde (keep-alive).
- Details par id : /message/:id et /shop/p/:id (consomment route.params).
- Favoris (/favoris) : liste perso persistee en localStorage, notation
  (note/rating/statut) via modale, refletee partout (bouton favori).
- Mes stats (/mes-stats) : agregats derives des favoris (note moyenne, top
  pays/auteurs, statuts), auto-mis a jour, route gardee si liste vide.
- Routeur : pages secondaires en lazy-load + repli, garde beforeEnter.

Technique
- Slots : PrefSection (slot defaut + slot nomme) enveloppe les 5 sections
  "Mes Persos" ; Modal (Teleport + slots).
- v-model custom : SearchBox (defineModel + debounce).
- Directive custom : v-click-outside.
- Tests Vitest : 25 tests (etat, fonctions, composants), ~86% du code metier.
- Retrait d'Ionic (inutilise). Script typecheck backend ; tsconfig @types/bun.
- Correctif type : garde stockLimit nullable dans l'achat (catalog.ts).
- README complet (URL, stack, run, tests, secrets, deploiement, mention IA).
---
 .env.prod.example                             |  28 +-
 .gitattributes                                |   6 +-
 .gitea/workflows/deploy.yml                   |  70 +-
 .gitignore                                    |  16 +-
 DEPLOY.md                                     | 128 +--
 LICENSE                                       |  22 +-
 README.md                                     | 125 ++-
 backend/.env.example                          |   8 +-
 backend/.gitignore                            |   2 +-
 backend/Dockerfile                            |  44 +-
 backend/package.json                          |  41 +-
 .../20260529094703_init/migration.sql         |  26 +-
 .../migration.sql                             | 224 +++---
 backend/prisma/schema.prisma                  | 260 +++----
 backend/prisma/seed.ts                        | 564 +++++++-------
 backend/src/index.ts                          | 114 +--
 backend/src/lib/ads.ts                        | 142 ++--
 backend/src/lib/catalog.ts                    | 628 +++++++--------
 backend/src/lib/geo.ts                        | 190 ++---
 backend/src/lib/ip.ts                         |  96 +--
 backend/src/lib/perks.ts                      | 260 +++----
 backend/src/lib/prisma.ts                     |  20 +-
 backend/src/lib/stats.ts                      | 414 +++++-----
 backend/src/lib/storage.ts                    |  96 +--
 backend/src/lib/wallet.ts                     | 254 +++---
 backend/src/realtime.ts                       | 294 +++----
 backend/src/routes/ads.ts                     |  80 +-
 backend/src/routes/alert.ts                   | 134 ++--
 backend/src/routes/messages.ts                | 330 ++++----
 backend/src/routes/perks.ts                   |  28 +-
 backend/src/routes/shop.ts                    | 172 ++--
 backend/src/routes/uploads.ts                 | 186 ++---
 backend/src/routes/wallet.ts                  |  44 +-
 backend/tsconfig.json                         |  24 +-
 bun.lock                                      | 263 +++++--
 deploy/nginx.conf                             |  84 +-
 docker-compose.prod.yml                       | 134 ++--
 docker-compose.yml                            |  70 +-
 frontend/Dockerfile                           |  34 +-
 frontend/index.html                           |  24 +-
 frontend/package.json                         |  13 +-
 frontend/src/App.vue                          |  74 +-
 frontend/src/components/AdBand.vue            | 326 ++++----
 frontend/src/components/AnimatedNumber.vue    | 100 +--
 frontend/src/components/ChatHeader.vue        | 266 +++----
 frontend/src/components/FavButton.vue         |  41 +
 frontend/src/components/InlineCasinoAd.vue    | 304 ++++----
 .../src/components/MessageAttachments.vue     | 160 ++--
 frontend/src/components/MessageItem.vue       | 478 ++++++------
 frontend/src/components/MessageItemBubble.vue | 313 ++++----
 .../src/components/MessageItemCompact.vue     |   2 +
 frontend/src/components/MessageList.vue       | 196 ++---
 frontend/src/components/Modal.vue             |  64 ++
 frontend/src/components/RichContent.vue       | 216 ++---
 frontend/src/components/SearchBox.spec.ts     |  34 +
 frontend/src/components/SearchBox.vue         |  83 ++
 frontend/src/components/SendButton.vue        | 194 ++---
 frontend/src/components/StatsTicker.vue       | 432 +++++-----
 frontend/src/components/StyleContextMenu.vue  | 276 +++----
 frontend/src/components/ThemePicker.spec.ts   |  27 +
 frontend/src/components/ThemePicker.vue       |  82 +-
 frontend/src/components/shop/PrefSection.vue  |  16 +
 frontend/src/components/shop/ProductCard.vue  | 661 ++++++++--------
 .../components/shop/persos/BgPrefsSection.vue |   6 +-
 .../shop/persos/IpColorPrefsSection.vue       |  12 +-
 .../shop/persos/PetsPrefsSection.vue          |  12 +-
 .../shop/persos/SendButtonPrefsSection.vue    |  12 +-
 .../shop/persos/SendSkinPrefsSection.vue      |  12 +-
 frontend/src/composables/ipColor.spec.ts      |  18 +
 frontend/src/composables/ipColor.ts           |  66 +-
 frontend/src/composables/useAds.ts            | 134 ++--
 frontend/src/composables/useAlert.ts          | 172 ++--
 frontend/src/composables/useAttachments.ts    |  86 +-
 frontend/src/composables/useContextMenu.ts    | 120 +--
 frontend/src/composables/useCustomStyles.ts   | 160 ++--
 frontend/src/composables/useDebounce.spec.ts  |  26 +
 frontend/src/composables/useDebounce.ts       |  33 +
 frontend/src/composables/useFavorites.spec.ts |  71 ++
 frontend/src/composables/useFavorites.ts      | 124 +++
 frontend/src/composables/useMessageItem.ts    | 124 +--
 frontend/src/composables/useMessages.ts       | 424 +++++-----
 frontend/src/composables/useMeta.spec.ts      |  20 +
 frontend/src/composables/usePerks.spec.ts     |  25 +
 frontend/src/composables/usePerks.ts          |  86 +-
 frontend/src/composables/useRealtime.ts       | 250 +++---
 frontend/src/composables/useShop.ts           | 266 +++----
 frontend/src/composables/useWallet.spec.ts    |  26 +
 frontend/src/composables/useWallet.ts         | 144 ++--
 frontend/src/directives/clickOutside.ts       |  28 +
 frontend/src/main.ts                          |  26 +-
 frontend/src/style.css                        | 232 +++---
 frontend/src/views/ExplorerPage.vue           | 192 +++++
 frontend/src/views/FavorisPage.vue            | 162 ++++
 frontend/src/views/HomePage.vue               |   4 +-
 frontend/src/views/MesStatsPage.vue           | 169 ++++
 frontend/src/views/MessageDetailPage.vue      | 125 +++
 frontend/src/views/ProductDetailPage.vue      |  78 ++
 frontend/src/views/ShopPage.vue               | 456 +++++------
 frontend/src/vite-env.d.ts                    |   2 +-
 frontend/tsconfig.json                        |  48 +-
 frontend/tsconfig.node.json                   |  22 +-
 frontend/vitest.config.ts                     |  27 +
 maquettes/chat/v1.svg                         | 736 +++++++++---------
 maquettes/chat/v2.svg                         | 374 ++++-----
 maquettes/chat/v3.svg                         | 478 ++++++------
 maquettes/shop/shop1.svg                      | 494 ++++++------
 maquettes/shop/shop2.svg                      | 394 +++++-----
 maquettes/shop/shop3-.svg                     | 322 ++++----
 maquettes/shop/shop4.svg                      | 478 ++++++------
 package.json                                  |  20 +-
 scripts/dev-stack.ts                          | 176 ++---
 111 files changed, 9634 insertions(+), 7875 deletions(-)
 create mode 100644 frontend/src/components/FavButton.vue
 create mode 100644 frontend/src/components/Modal.vue
 create mode 100644 frontend/src/components/SearchBox.spec.ts
 create mode 100644 frontend/src/components/SearchBox.vue
 create mode 100644 frontend/src/components/ThemePicker.spec.ts
 create mode 100644 frontend/src/components/shop/PrefSection.vue
 create mode 100644 frontend/src/composables/ipColor.spec.ts
 create mode 100644 frontend/src/composables/useDebounce.spec.ts
 create mode 100644 frontend/src/composables/useDebounce.ts
 create mode 100644 frontend/src/composables/useFavorites.spec.ts
 create mode 100644 frontend/src/composables/useFavorites.ts
 create mode 100644 frontend/src/composables/useMeta.spec.ts
 create mode 100644 frontend/src/composables/usePerks.spec.ts
 create mode 100644 frontend/src/composables/useWallet.spec.ts
 create mode 100644 frontend/src/directives/clickOutside.ts
 create mode 100644 frontend/src/views/ExplorerPage.vue
 create mode 100644 frontend/src/views/FavorisPage.vue
 create mode 100644 frontend/src/views/MesStatsPage.vue
 create mode 100644 frontend/src/views/MessageDetailPage.vue
 create mode 100644 frontend/src/views/ProductDetailPage.vue
 create mode 100644 frontend/vitest.config.ts

diff --git a/.env.prod.example b/.env.prod.example
index 8ea6bbb..8463c89 100644
--- a/.env.prod.example
+++ b/.env.prod.example
@@ -1,14 +1,14 @@
-# Copy to `.env.prod` on the deploy host (CT502) and fill with real secrets.
-# `.env.prod` is gitignored — never commit real credentials.
-
-# Database
-POSTGRES_DB=xip
-POSTGRES_USER=xip
-POSTGRES_PASSWORD=change-me-to-a-strong-secret
-
-# Public origin (baked into the frontend build + used by the WS URL)
-PUBLIC_URL=https://xip.kerboul.me
-
-# Paywall: "true" = open bar (everything free for everyone), "false" = paywall on
-# (free only on localhost, per the README).
-XIP_OPEN_BAR=true
+# Copy to `.env.prod` on the deploy host (CT502) and fill with real secrets.
+# `.env.prod` is gitignored — never commit real credentials.
+
+# Database
+POSTGRES_DB=xip
+POSTGRES_USER=xip
+POSTGRES_PASSWORD=change-me-to-a-strong-secret
+
+# Public origin (baked into the frontend build + used by the WS URL)
+PUBLIC_URL=https://xip.kerboul.me
+
+# Paywall: "true" = open bar (everything free for everyone), "false" = paywall on
+# (free only on localhost, per the README).
+XIP_OPEN_BAR=true
diff --git a/.gitattributes b/.gitattributes
index 23ef490..252ee15 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,3 +1,3 @@
-# Shell scripts must keep LF endings or they break with "bad interpreter" on Linux.
-*.sh text eol=lf
-docker-entrypoint.sh text eol=lf
+# Shell scripts must keep LF endings or they break with "bad interpreter" on Linux.
+*.sh text eol=lf
+docker-entrypoint.sh text eol=lf
diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml
index 0183fc2..1c41fe5 100644
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -1,35 +1,35 @@
-name: Deploy XIP
-
-# Auto-deploy on every push to main. The runner SSHes into the xip-app CT
-# (Echelon CT502) and runs scripts/deploy.sh, which pulls + rebuilds the stack.
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-# Serialize deploys: never run two deploys against the CT at the same time
-# (concurrent `docker compose up --build` on the same project races and fails).
-concurrency:
-  group: deploy-xip-prod
-  cancel-in-progress: false
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Deploy over SSH to xip-app
-        env:
-          # Secrets via env (not inlined in the script) so the multi-line key
-          # keeps its newlines and never breaks shell quoting.
-          DEPLOY_HOST: ${{ secrets.XIP_DEPLOY_HOST }}
-          DEPLOY_USER: ${{ secrets.XIP_DEPLOY_USER }}
-          DEPLOY_KEY: ${{ secrets.XIP_DEPLOY_KEY }}
-        run: |
-          set -e
-          command -v ssh >/dev/null 2>&1 || (apt-get update && apt-get install -y --no-install-recommends openssh-client)
-          mkdir -p ~/.ssh
-          printf '%s\n' "$DEPLOY_KEY" > ~/.ssh/id_ed25519
-          chmod 600 ~/.ssh/id_ed25519
-          ssh -i ~/.ssh/id_ed25519 \
-            -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null \
-            "$DEPLOY_USER@$DEPLOY_HOST" 'bash /opt/xip/scripts/deploy.sh'
+name: Deploy XIP
+
+# Auto-deploy on every push to main. The runner SSHes into the xip-app CT
+# (Echelon CT502) and runs scripts/deploy.sh, which pulls + rebuilds the stack.
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+# Serialize deploys: never run two deploys against the CT at the same time
+# (concurrent `docker compose up --build` on the same project races and fails).
+concurrency:
+  group: deploy-xip-prod
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy over SSH to xip-app
+        env:
+          # Secrets via env (not inlined in the script) so the multi-line key
+          # keeps its newlines and never breaks shell quoting.
+          DEPLOY_HOST: ${{ secrets.XIP_DEPLOY_HOST }}
+          DEPLOY_USER: ${{ secrets.XIP_DEPLOY_USER }}
+          DEPLOY_KEY: ${{ secrets.XIP_DEPLOY_KEY }}
+        run: |
+          set -e
+          command -v ssh >/dev/null 2>&1 || (apt-get update && apt-get install -y --no-install-recommends openssh-client)
+          mkdir -p ~/.ssh
+          printf '%s\n' "$DEPLOY_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh -i ~/.ssh/id_ed25519 \
+            -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null \
+            "$DEPLOY_USER@$DEPLOY_HOST" 'bash /opt/xip/scripts/deploy.sh'
diff --git a/.gitignore b/.gitignore
index 5dc5fe9..5aef152 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,8 @@
-node_modules/
-dist/
-.env
-.env.local
-.env.prod
-*.log
-.DS_Store
-Thumbs.db
+node_modules/
+dist/
+.env
+.env.local
+.env.prod
+*.log
+.DS_Store
+Thumbs.db
diff --git a/DEPLOY.md b/DEPLOY.md
index 65433eb..1cad01a 100644
--- a/DEPLOY.md
+++ b/DEPLOY.md
@@ -1,64 +1,64 @@
-# Déploiement XIP
-
-Production : **https://xip.kerboul.me** — déploiement continu sur push `main`.
-
-## Architecture (pattern Vireli, cluster SENTINEL)
-
-```
-Cloudflare (*.kerboul.me) ─► VPS WireGuard ─► Traefik (CT102, Cerberus)
-                                                  │ Host(`xip.kerboul.me`) → http://192.168.1.242:80
-                                                  ▼
-                                   CT502 « xip-app » (Echelon, Docker host)
-                                   ┌───────────────────────────────────────┐
-                                   │ web (nginx:80)                        │
-                                   │   ├── /          → SPA Vue (statique)  │
-                                   │   ├── /api/      → backend:3000        │
-                                   │   └── /ws        → backend:3000 (WS)   │
-                                   │ backend (bun:3000, Hono + Prisma)      │
-                                   │ postgres:16   redis:7                  │
-                                   └───────────────────────────────────────┘
-```
-
-Origine unique : le front (buildé avec `VITE_API_URL=https://xip.kerboul.me`)
-appelle `/api` et `wss://xip.kerboul.me/ws`, nginx proxifie vers le backend.
-Traefik termine le TLS (Let's Encrypt, DNS challenge Cloudflare).
-
-## CI/CD (Gitea Actions)
-
-`.gitea/workflows/deploy.yml` se déclenche sur push `main` (+ `workflow_dispatch`).
-Le runner (CT121) se connecte en SSH au CT502 et exécute `scripts/deploy.sh`
-(`git reset --hard origin/main` + `docker compose up -d --build`).
-
-Migrations Prisma + seed (idempotent) tournent au démarrage du conteneur backend
-(`backend/docker-entrypoint.sh`).
-
-### Secrets du repo (Gitea → Settings → Actions → Secrets)
-| Secret | Rôle |
-|--------|------|
-| `XIP_DEPLOY_HOST` | IP du CT502 (192.168.1.242) |
-| `XIP_DEPLOY_USER` | utilisateur de déploiement (`deploy`) |
-| `XIP_DEPLOY_KEY`  | clé privée SSH autorisée sur le CT502 |
-
-## Fichiers
-
-| Fichier | Rôle |
-|---------|------|
-| `docker-compose.prod.yml` | stack prod (postgres, redis, backend, web) |
-| `backend/Dockerfile` + `docker-entrypoint.sh` | image backend, migrate+seed au boot |
-| `frontend/Dockerfile` | build Vite → nginx |
-| `deploy/nginx.conf` | reverse proxy single-origin |
-| `scripts/deploy.sh` | script de (re)déploiement sur le CT |
-| `.env.prod` (non commité) | secrets : voir `.env.prod.example` |
-
-## Paywall
-
-`XIP_OPEN_BAR=true` (dans `.env.prod`) = **open bar** : toutes les fonctionnalités
-payantes gratuites pour tout le monde. Mettre `false` pour réactiver le paywall
-(gratuit uniquement en localhost). Logique centralisée dans `backend/src/lib/ip.ts`
-(`isFree()`).
-
-## Redéploiement manuel
-
-```bash
-ssh deploy@192.168.1.242 'bash /opt/xip/scripts/deploy.sh'
-```
+# Déploiement XIP
+
+Production : **https://xip.kerboul.me** — déploiement continu sur push `main`.
+
+## Architecture (pattern Vireli, cluster SENTINEL)
+
+```
+Cloudflare (*.kerboul.me) ─► VPS WireGuard ─► Traefik (CT102, Cerberus)
+                                                  │ Host(`xip.kerboul.me`) → http://192.168.1.242:80
+                                                  ▼
+                                   CT502 « xip-app » (Echelon, Docker host)
+                                   ┌───────────────────────────────────────┐
+                                   │ web (nginx:80)                        │
+                                   │   ├── /          → SPA Vue (statique)  │
+                                   │   ├── /api/      → backend:3000        │
+                                   │   └── /ws        → backend:3000 (WS)   │
+                                   │ backend (bun:3000, Hono + Prisma)      │
+                                   │ postgres:16   redis:7                  │
+                                   └───────────────────────────────────────┘
+```
+
+Origine unique : le front (buildé avec `VITE_API_URL=https://xip.kerboul.me`)
+appelle `/api` et `wss://xip.kerboul.me/ws`, nginx proxifie vers le backend.
+Traefik termine le TLS (Let's Encrypt, DNS challenge Cloudflare).
+
+## CI/CD (Gitea Actions)
+
+`.gitea/workflows/deploy.yml` se déclenche sur push `main` (+ `workflow_dispatch`).
+Le runner (CT121) se connecte en SSH au CT502 et exécute `scripts/deploy.sh`
+(`git reset --hard origin/main` + `docker compose up -d --build`).
+
+Migrations Prisma + seed (idempotent) tournent au démarrage du conteneur backend
+(`backend/docker-entrypoint.sh`).
+
+### Secrets du repo (Gitea → Settings → Actions → Secrets)
+| Secret | Rôle |
+|--------|------|
+| `XIP_DEPLOY_HOST` | IP du CT502 (192.168.1.242) |
+| `XIP_DEPLOY_USER` | utilisateur de déploiement (`deploy`) |
+| `XIP_DEPLOY_KEY`  | clé privée SSH autorisée sur le CT502 |
+
+## Fichiers
+
+| Fichier | Rôle |
+|---------|------|
+| `docker-compose.prod.yml` | stack prod (postgres, redis, backend, web) |
+| `backend/Dockerfile` + `docker-entrypoint.sh` | image backend, migrate+seed au boot |
+| `frontend/Dockerfile` | build Vite → nginx |
+| `deploy/nginx.conf` | reverse proxy single-origin |
+| `scripts/deploy.sh` | script de (re)déploiement sur le CT |
+| `.env.prod` (non commité) | secrets : voir `.env.prod.example` |
+
+## Paywall
+
+`XIP_OPEN_BAR=true` (dans `.env.prod`) = **open bar** : toutes les fonctionnalités
+payantes gratuites pour tout le monde. Mettre `false` pour réactiver le paywall
+(gratuit uniquement en localhost). Logique centralisée dans `backend/src/lib/ip.ts`
+(`isFree()`).
+
+## Redéploiement manuel
+
+```bash
+ssh deploy@192.168.1.242 'bash /opt/xip/scripts/deploy.sh'
+```
diff --git a/LICENSE b/LICENSE
index 7a3094a..e007a57 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,11 +1,11 @@
-DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-Version 2, December 2004
-
-Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
-
-Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.
-
-DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
-  0. You just DO WHAT THE FUCK YOU WANT TO.
+DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+Version 2, December 2004
+
+Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.
+
+DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
diff --git a/README.md b/README.md
index c8b0394..9cc52ac 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,110 @@
-# XIP
+# XIP — Réseau social « sans modération »
 
-Réseau social à consommer sans modération
+SPA satirique : un chat public en temps réel où **ton pseudo = ton adresse IP**,
+noyé sous les pubs et le merchandising. Catalogue de messages distant, liste
+perso de favoris, statistiques dérivées, marketplace à crédits fictifs, thèmes
+(dont WhatsApp).
 
-## Concept
+🌐 **Application déployée : https://xip.kerboul.me**
 
-Faire un réseau social open sans contrôles ni modération.
-Pas de compte, Pseudo = IP.
-Merchandising à fond.
-Envahit par des Pubs.
+---
+
+## Stack
+
+| Couche | Technologies |
+|--------|--------------|
+| Frontend | Vue 3 (`<script setup>`, Composition API), Vite, TypeScript, vue-router |
+| Backend | Bun, Hono, Prisma, PostgreSQL, Redis (WebSocket temps réel) |
+| Tests | Vitest, @vue/test-utils, happy-dom |
+| Déploiement | Docker, nginx, Traefik, CI Gitea Actions (auto-deploy sur push `main`) |
+
+Pas de framework de composants prêts-à-l'emploi : tout le découpage et le CSS
+sont faits à la main.
+
+---
 
 ## Fonctionnalités
 
-**Gratuit :**
-- Envoyer des messages
-    - contenant du texte (267 charactères)
-    - contenant des fichiers (JPEG, .exe, ...) 1 Mo max
-- Répondre à un message (sous forme de sous-thread)
-- Récupérer mes messages
+- **Chat temps réel** (WebSocket) : messages, réponses en thread, présence,
+  stats live qui défilent.
+- **Explorer** (`/explorer`) : catalogue distant paginé (défilement infini),
+  **recherche debouncée et annulable** (AbortController), filtre.
+- **Détail** d'un message (`/message/:id`) et d'un produit (`/shop/p/:id`) par
+  identifiant d'URL.
+- **Favoris** (`/favoris`) : liste personnelle persistée en localStorage,
+  notation (note + statut + commentaire), reflétée partout (★).
+- **Mes stats** (`/mes-stats`) : synthèse dérivée des favoris (note moyenne,
+  répartition par pays, top auteurs…), mise à jour automatique ; page gardée
+  (inaccessible si aucun favori).
+- **Marketplace** à crédits fictifs : cosmétiques (couleur d'IP, pets, skin du
+  bouton d'envoi), abonnement NoAds, messages riches (HTML/CSS, et JS en iframe
+  sandbox), pièces jointes.
+- **Thèmes** dynamiques (Classique, Bulles, Compact, **WhatsApp**), persistés.
+- **Géolocalisation** des IP (drapeau + ville) sur chaque message.
 
-**Payant :**
-- Acheter des fonctionnalités (Marketplace)
-    - mettre du CSS & HTML dans les messages (taille fixe), pas de script
-    - pas de limite de taille de fichiers
-    - mettre du javascript (très très cher)
-    - "Skins" de ton IP
-    - "Skins" des éléments (boutons, text area, encadré pub, ...)
-    - Choisir sa pub
-    - Retirer les pubs
-    - payer alerte audio générale (consommable, cooldown, durée max mais volume à fond, possibilité de fournir le mp3)
+---
 
-**Si localhost :**
-- Pas de paywall (tout gratuit)
+## Lancer en local
 
+Prérequis : [Bun](https://bun.sh) + Docker (pour Postgres/Redis).
 
+```bash
+bun install
+bun run dev:stack
+```
+
+`dev:stack` lève Postgres + Redis (docker compose), applique les migrations
+Prisma, seede la base, puis démarre le backend (http://localhost:3000) et le
+frontend (http://localhost:5173).
+
+En local, le **paywall est désactivé** (tout gratuit).
+
+---
+
+## Tests
+
+```bash
+bun run --cwd frontend test       # exécution
+bun run --cwd frontend test:cov   # avec couverture
+```
+
+Couvre la logique d'état (favoris, wallet, perks), des fonctions réutilisables
+(parseMeta, debounce, couleur d'IP) et l'interaction de composants (ThemePicker,
+SearchBox). **Couverture ≈ 86 %** sur le code métier ciblé.
+
+## Vérifications
+
+```bash
+bun run --cwd frontend typecheck  # vue-tsc, 0 erreur
+bun run --cwd frontend build      # build de production
+bun run --cwd backend typecheck   # tsc, 0 erreur
+```
+
+---
+
+## Configuration / secrets
+
+Aucun secret dans le code. Copier les exemples committés et renseigner les vraies
+valeurs (les `.env` réels sont gitignorés) :
+
+- `backend/.env.example` → `backend/.env` (dév local)
+- `.env.prod.example` → `.env.prod` (production)
+
+---
+
+## Déploiement
+
+Déploiement continu : tout push sur `main` déclenche la CI Gitea qui rebuild et
+redéploie la stack Docker derrière Traefik. Détails dans **[DEPLOY.md](DEPLOY.md)**.
+
+---
+
+## Mention IA
+
+Ce projet a été développé avec une assistance IA importante (génération et
+refactorisation de code comprises). Le code a été relu, corrigé et intégré par
+l'équipe.
+
+## Auteurs
+
+<!-- à compléter : noms du groupe -->
diff --git a/backend/.env.example b/backend/.env.example
index 263ccac..aa05cc5 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -1,4 +1,4 @@
-DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/xip"
-REDIS_URL="redis://localhost:6379"
-PORT=3000
-NODE_ENV=development
+DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/xip"
+REDIS_URL="redis://localhost:6379"
+PORT=3000
+NODE_ENV=development
diff --git a/backend/.gitignore b/backend/.gitignore
index 8fc0d80..4344a49 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -1 +1 @@
-uploads/
+uploads/
diff --git a/backend/Dockerfile b/backend/Dockerfile
index 369cad0..7ad4ae4 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -1,22 +1,22 @@
-# XIP backend — Bun + Hono + Prisma.
-# Build context is the repo ROOT (see docker-compose.prod.yml) so we can copy backend/.
-FROM oven/bun:1-debian AS deps
-WORKDIR /app
-COPY backend/package.json ./
-RUN bun install
-
-FROM oven/bun:1-debian AS runtime
-WORKDIR /app
-ENV NODE_ENV=production
-# Prisma's query engine needs openssl + CA certs (generate downloads it over HTTPS).
-RUN apt-get update \
- && apt-get install -y --no-install-recommends openssl ca-certificates \
- && rm -rf /var/lib/apt/lists/*
-COPY --from=deps /app/node_modules ./node_modules
-COPY backend/ ./
-# Generate the Prisma client from the schema (no DB connection required).
-RUN bunx prisma generate \
- && chmod +x docker-entrypoint.sh
-EXPOSE 3000
-# Entrypoint applies migrations + seeds (idempotent) then starts the server.
-ENTRYPOINT ["/app/docker-entrypoint.sh"]
+# XIP backend — Bun + Hono + Prisma.
+# Build context is the repo ROOT (see docker-compose.prod.yml) so we can copy backend/.
+FROM oven/bun:1-debian AS deps
+WORKDIR /app
+COPY backend/package.json ./
+RUN bun install
+
+FROM oven/bun:1-debian AS runtime
+WORKDIR /app
+ENV NODE_ENV=production
+# Prisma's query engine needs openssl + CA certs (generate downloads it over HTTPS).
+RUN apt-get update \
+ && apt-get install -y --no-install-recommends openssl ca-certificates \
+ && rm -rf /var/lib/apt/lists/*
+COPY --from=deps /app/node_modules ./node_modules
+COPY backend/ ./
+# Generate the Prisma client from the schema (no DB connection required).
+RUN bunx prisma generate \
+ && chmod +x docker-entrypoint.sh
+EXPOSE 3000
+# Entrypoint applies migrations + seeds (idempotent) then starts the server.
+ENTRYPOINT ["/app/docker-entrypoint.sh"]
diff --git a/backend/package.json b/backend/package.json
index e89e06d..610a823 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,20 +1,21 @@
-{
-  "name": "xip-backend",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "bun --hot run src/index.ts",
-    "start": "bun run src/index.ts",
-    "build": "bun build src/index.ts --outdir dist --target bun"
-  },
-  "dependencies": {
-    "@prisma/client": "^5.22.0",
-    "hono": "^4.6.0",
-    "ioredis": "^5.4.0"
-  },
-  "devDependencies": {
-    "@types/bun": "latest",
-    "prisma": "^5.22.0",
-    "typescript": "^5.6.0"
-  }
-}
+{
+  "name": "xip-backend",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "bun --hot run src/index.ts",
+    "start": "bun run src/index.ts",
+    "build": "bun build src/index.ts --outdir dist --target bun",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@prisma/client": "^5.22.0",
+    "hono": "^4.6.0",
+    "ioredis": "^5.4.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "prisma": "^5.22.0",
+    "typescript": "^5.6.0"
+  }
+}
diff --git a/backend/prisma/migrations/20260529094703_init/migration.sql b/backend/prisma/migrations/20260529094703_init/migration.sql
index e342b9a..51eff4d 100644
--- a/backend/prisma/migrations/20260529094703_init/migration.sql
+++ b/backend/prisma/migrations/20260529094703_init/migration.sql
@@ -1,13 +1,13 @@
--- CreateTable
-CREATE TABLE "messages" (
-    "id" TEXT NOT NULL,
-    "content" VARCHAR(267) NOT NULL,
-    "authorIp" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "parentId" TEXT,
-
-    CONSTRAINT "messages_pkey" PRIMARY KEY ("id")
-);
-
--- AddForeignKey
-ALTER TABLE "messages" ADD CONSTRAINT "messages_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "messages"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+-- CreateTable
+CREATE TABLE "messages" (
+    "id" TEXT NOT NULL,
+    "content" VARCHAR(267) NOT NULL,
+    "authorIp" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "parentId" TEXT,
+
+    CONSTRAINT "messages_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "messages" ADD CONSTRAINT "messages_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "messages"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20260530194607_economy_ads_attachments_rich/migration.sql b/backend/prisma/migrations/20260530194607_economy_ads_attachments_rich/migration.sql
index 76ed1c5..2bb827f 100644
--- a/backend/prisma/migrations/20260530194607_economy_ads_attachments_rich/migration.sql
+++ b/backend/prisma/migrations/20260530194607_economy_ads_attachments_rich/migration.sql
@@ -1,112 +1,112 @@
--- AlterTable
-ALTER TABLE "messages" ADD COLUMN     "richContent" TEXT,
-ADD COLUMN     "richMode" TEXT NOT NULL DEFAULT 'none';
-
--- CreateTable
-CREATE TABLE "wallets" (
-    "ip" TEXT NOT NULL,
-    "balance" INTEGER NOT NULL DEFAULT 0,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-
-    CONSTRAINT "wallets_pkey" PRIMARY KEY ("ip")
-);
-
--- CreateTable
-CREATE TABLE "products" (
-    "id" TEXT NOT NULL,
-    "category" TEXT NOT NULL,
-    "name" TEXT NOT NULL,
-    "subtitle" TEXT,
-    "kind" TEXT NOT NULL,
-    "basePrice" INTEGER NOT NULL,
-    "promoPrice" INTEGER,
-    "badge" TEXT,
-    "stockLimit" INTEGER,
-    "stockSold" INTEGER NOT NULL DEFAULT 0,
-    "active" BOOLEAN NOT NULL DEFAULT true,
-    "sortOrder" INTEGER NOT NULL DEFAULT 0,
-    "metaJson" TEXT,
-
-    CONSTRAINT "products_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "purchases" (
-    "id" TEXT NOT NULL,
-    "ip" TEXT NOT NULL,
-    "productId" TEXT,
-    "type" TEXT NOT NULL,
-    "amount" INTEGER NOT NULL,
-    "metaJson" TEXT,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "purchases_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "entitlements" (
-    "id" TEXT NOT NULL,
-    "ip" TEXT NOT NULL,
-    "kind" TEXT NOT NULL,
-    "active" BOOLEAN NOT NULL DEFAULT true,
-    "expiresAt" TIMESTAMP(3),
-    "metaJson" TEXT,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "entitlements_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "ads" (
-    "id" TEXT NOT NULL,
-    "brand" TEXT NOT NULL,
-    "subtitle" TEXT,
-    "url" TEXT,
-    "cta" TEXT,
-    "icon" TEXT,
-    "tone" TEXT NOT NULL,
-    "kind" TEXT NOT NULL,
-    "weight" INTEGER NOT NULL DEFAULT 1,
-    "active" BOOLEAN NOT NULL DEFAULT true,
-    "ownerIp" TEXT,
-    "format" TEXT,
-    "imageUrl" TEXT,
-    "expiresAt" TIMESTAMP(3),
-    "impressions" INTEGER NOT NULL DEFAULT 0,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "ads_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "attachments" (
-    "id" TEXT NOT NULL,
-    "messageId" TEXT,
-    "ip" TEXT NOT NULL,
-    "filename" TEXT NOT NULL,
-    "mimeType" TEXT NOT NULL,
-    "size" INTEGER NOT NULL,
-    "storagePath" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "attachments_pkey" PRIMARY KEY ("id")
-);
-
--- CreateIndex
-CREATE INDEX "purchases_ip_idx" ON "purchases"("ip");
-
--- CreateIndex
-CREATE INDEX "entitlements_ip_idx" ON "entitlements"("ip");
-
--- CreateIndex
-CREATE INDEX "entitlements_ip_kind_idx" ON "entitlements"("ip", "kind");
-
--- CreateIndex
-CREATE INDEX "ads_kind_active_idx" ON "ads"("kind", "active");
-
--- CreateIndex
-CREATE INDEX "attachments_messageId_idx" ON "attachments"("messageId");
-
--- AddForeignKey
-ALTER TABLE "attachments" ADD CONSTRAINT "attachments_messageId_fkey" FOREIGN KEY ("messageId") REFERENCES "messages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+-- AlterTable
+ALTER TABLE "messages" ADD COLUMN     "richContent" TEXT,
+ADD COLUMN     "richMode" TEXT NOT NULL DEFAULT 'none';
+
+-- CreateTable
+CREATE TABLE "wallets" (
+    "ip" TEXT NOT NULL,
+    "balance" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "wallets_pkey" PRIMARY KEY ("ip")
+);
+
+-- CreateTable
+CREATE TABLE "products" (
+    "id" TEXT NOT NULL,
+    "category" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "subtitle" TEXT,
+    "kind" TEXT NOT NULL,
+    "basePrice" INTEGER NOT NULL,
+    "promoPrice" INTEGER,
+    "badge" TEXT,
+    "stockLimit" INTEGER,
+    "stockSold" INTEGER NOT NULL DEFAULT 0,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "sortOrder" INTEGER NOT NULL DEFAULT 0,
+    "metaJson" TEXT,
+
+    CONSTRAINT "products_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "purchases" (
+    "id" TEXT NOT NULL,
+    "ip" TEXT NOT NULL,
+    "productId" TEXT,
+    "type" TEXT NOT NULL,
+    "amount" INTEGER NOT NULL,
+    "metaJson" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "purchases_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "entitlements" (
+    "id" TEXT NOT NULL,
+    "ip" TEXT NOT NULL,
+    "kind" TEXT NOT NULL,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "expiresAt" TIMESTAMP(3),
+    "metaJson" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "entitlements_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ads" (
+    "id" TEXT NOT NULL,
+    "brand" TEXT NOT NULL,
+    "subtitle" TEXT,
+    "url" TEXT,
+    "cta" TEXT,
+    "icon" TEXT,
+    "tone" TEXT NOT NULL,
+    "kind" TEXT NOT NULL,
+    "weight" INTEGER NOT NULL DEFAULT 1,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "ownerIp" TEXT,
+    "format" TEXT,
+    "imageUrl" TEXT,
+    "expiresAt" TIMESTAMP(3),
+    "impressions" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ads_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "attachments" (
+    "id" TEXT NOT NULL,
+    "messageId" TEXT,
+    "ip" TEXT NOT NULL,
+    "filename" TEXT NOT NULL,
+    "mimeType" TEXT NOT NULL,
+    "size" INTEGER NOT NULL,
+    "storagePath" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "attachments_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "purchases_ip_idx" ON "purchases"("ip");
+
+-- CreateIndex
+CREATE INDEX "entitlements_ip_idx" ON "entitlements"("ip");
+
+-- CreateIndex
+CREATE INDEX "entitlements_ip_kind_idx" ON "entitlements"("ip", "kind");
+
+-- CreateIndex
+CREATE INDEX "ads_kind_active_idx" ON "ads"("kind", "active");
+
+-- CreateIndex
+CREATE INDEX "attachments_messageId_idx" ON "attachments"("messageId");
+
+-- AddForeignKey
+ALTER TABLE "attachments" ADD CONSTRAINT "attachments_messageId_fkey" FOREIGN KEY ("messageId") REFERENCES "messages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index 1977d7b..1ba7b34 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -1,130 +1,130 @@
-// This is your Prisma schema file
-// Learn more: https://pris.ly/d/prisma-schema
-
-generator client {
-  provider = "prisma-client-js"
-}
-
-datasource db {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
-}
-
-model Message {
-  id          String       @id @default(uuid())
-  content     String       @db.VarChar(267)
-  authorIp    String
-  createdAt   DateTime     @default(now())
-  parentId    String?
-  // Rich-message tiers (paid): "none" | "htmlcss" | "js". richContent holds the raw
-  // markup/script, rendered ONLY inside a sandboxed iframe on the client.
-  richMode    String       @default("none")
-  richContent String?      @db.Text
-
-  parent      Message?     @relation("ThreadReplies", fields: [parentId], references: [id])
-  replies     Message[]    @relation("ThreadReplies")
-  attachments Attachment[]
-
-  @@map("messages")
-}
-
-// ── Economy: fictional "crédits XIP", keyed on IP (no accounts) ──────────────
-
-model Wallet {
-  ip        String   @id
-  balance   Int      @default(0) // centi-credits (9.99 "€" => 999)
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  @@map("wallets")
-}
-
-// Seeded catalogue of purchasable features (faithful to the shop mockups).
-model Product {
-  id         String  @id // slug: "cadre-pub","noads","style-dore","pet","bundle-cosmetic","rich-htmlcss","rich-js","no-file-limit","audio-alert"
-  category   String // "publicite" | "abonnements" | "cosmetiques" | "promotions" | "premium"
-  name       String
-  subtitle   String?
-  kind       String // "ad-frame" | "subscription" | "ip-skin" | "pet" | "bundle" | "rich" | "unlock" | "consumable"
-  basePrice  Int // centi-credits
-  promoPrice Int?
-  badge      String?
-  stockLimit Int? // e.g. 50 for style-dore; null = unlimited
-  stockSold  Int     @default(0)
-  active     Boolean @default(true)
-  sortOrder  Int     @default(0)
-  metaJson   String? @db.Text // options config (durations, formats, pet designs, plans…)
-
-  @@map("products")
-}
-
-// Append-only ledger: every credit movement (top-up, purchase, grant).
-model Purchase {
-  id        String   @id @default(uuid())
-  ip        String
-  productId String?
-  type      String // "topup" | "purchase" | "grant"
-  amount    Int // signed centi-credits: negative = spend, positive = grant
-  metaJson  String?  @db.Text
-  createdAt DateTime @default(now())
-
-  @@index([ip])
-  @@map("purchases")
-}
-
-// What an IP owns. Drives perks (skin/pets/noads), rich unlocks, ad frames, etc.
-model Entitlement {
-  id        String    @id @default(uuid())
-  ip        String
-  kind      String // "noads" | "style-dore" | "pet" | "rich-htmlcss" | "rich-js" | "no-file-limit" | "ad-frame" | "audio-alert" | "element-skin"
-  active    Boolean   @default(true)
-  expiresAt DateTime? // subscriptions / ad-frame duration; null = permanent
-  metaJson  String?   @db.Text // pet: {design,position}; ad-frame: {format,url,days}; etc.
-  createdAt DateTime  @default(now())
-
-  @@index([ip])
-  @@index([ip, kind])
-  @@map("entitlements")
-}
-
-// ── Real ad inventory (replaces the hardcoded AdBand / InlineCasinoAd) ───────
-
-model Ad {
-  id          String    @id @default(uuid())
-  brand       String
-  subtitle    String?
-  url         String?
-  cta         String?
-  icon        String?
-  tone        String // "blue" | "green" | "purple" | "casino" | "user"
-  kind        String // "band" | "casino"
-  weight      Int       @default(1)
-  active      Boolean   @default(true)
-  ownerIp     String? // set when bought via "Cadre de Pub"
-  format      String? // "static" | "gif"
-  imageUrl    String?
-  expiresAt   DateTime?
-  impressions Int       @default(0)
-  createdAt   DateTime  @default(now())
-
-  @@index([kind, active])
-  @@map("ads")
-}
-
-// ── File attachments (free <=1 Mo; paid "no-file-limit" lifts the cap) ───────
-
-model Attachment {
-  id          String   @id @default(uuid())
-  messageId   String?
-  ip          String
-  filename    String
-  mimeType    String
-  size        Int
-  storagePath String
-  createdAt   DateTime @default(now())
-
-  message Message? @relation(fields: [messageId], references: [id], onDelete: Cascade)
-
-  @@index([messageId])
-  @@map("attachments")
-}
+// This is your Prisma schema file
+// Learn more: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Message {
+  id          String       @id @default(uuid())
+  content     String       @db.VarChar(267)
+  authorIp    String
+  createdAt   DateTime     @default(now())
+  parentId    String?
+  // Rich-message tiers (paid): "none" | "htmlcss" | "js". richContent holds the raw
+  // markup/script, rendered ONLY inside a sandboxed iframe on the client.
+  richMode    String       @default("none")
+  richContent String?      @db.Text
+
+  parent      Message?     @relation("ThreadReplies", fields: [parentId], references: [id])
+  replies     Message[]    @relation("ThreadReplies")
+  attachments Attachment[]
+
+  @@map("messages")
+}
+
+// ── Economy: fictional "crédits XIP", keyed on IP (no accounts) ──────────────
+
+model Wallet {
+  ip        String   @id
+  balance   Int      @default(0) // centi-credits (9.99 "€" => 999)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("wallets")
+}
+
+// Seeded catalogue of purchasable features (faithful to the shop mockups).
+model Product {
+  id         String  @id // slug: "cadre-pub","noads","style-dore","pet","bundle-cosmetic","rich-htmlcss","rich-js","no-file-limit","audio-alert"
+  category   String // "publicite" | "abonnements" | "cosmetiques" | "promotions" | "premium"
+  name       String
+  subtitle   String?
+  kind       String // "ad-frame" | "subscription" | "ip-skin" | "pet" | "bundle" | "rich" | "unlock" | "consumable"
+  basePrice  Int // centi-credits
+  promoPrice Int?
+  badge      String?
+  stockLimit Int? // e.g. 50 for style-dore; null = unlimited
+  stockSold  Int     @default(0)
+  active     Boolean @default(true)
+  sortOrder  Int     @default(0)
+  metaJson   String? @db.Text // options config (durations, formats, pet designs, plans…)
+
+  @@map("products")
+}
+
+// Append-only ledger: every credit movement (top-up, purchase, grant).
+model Purchase {
+  id        String   @id @default(uuid())
+  ip        String
+  productId String?
+  type      String // "topup" | "purchase" | "grant"
+  amount    Int // signed centi-credits: negative = spend, positive = grant
+  metaJson  String?  @db.Text
+  createdAt DateTime @default(now())
+
+  @@index([ip])
+  @@map("purchases")
+}
+
+// What an IP owns. Drives perks (skin/pets/noads), rich unlocks, ad frames, etc.
+model Entitlement {
+  id        String    @id @default(uuid())
+  ip        String
+  kind      String // "noads" | "style-dore" | "pet" | "rich-htmlcss" | "rich-js" | "no-file-limit" | "ad-frame" | "audio-alert" | "element-skin"
+  active    Boolean   @default(true)
+  expiresAt DateTime? // subscriptions / ad-frame duration; null = permanent
+  metaJson  String?   @db.Text // pet: {design,position}; ad-frame: {format,url,days}; etc.
+  createdAt DateTime  @default(now())
+
+  @@index([ip])
+  @@index([ip, kind])
+  @@map("entitlements")
+}
+
+// ── Real ad inventory (replaces the hardcoded AdBand / InlineCasinoAd) ───────
+
+model Ad {
+  id          String    @id @default(uuid())
+  brand       String
+  subtitle    String?
+  url         String?
+  cta         String?
+  icon        String?
+  tone        String // "blue" | "green" | "purple" | "casino" | "user"
+  kind        String // "band" | "casino"
+  weight      Int       @default(1)
+  active      Boolean   @default(true)
+  ownerIp     String? // set when bought via "Cadre de Pub"
+  format      String? // "static" | "gif"
+  imageUrl    String?
+  expiresAt   DateTime?
+  impressions Int       @default(0)
+  createdAt   DateTime  @default(now())
+
+  @@index([kind, active])
+  @@map("ads")
+}
+
+// ── File attachments (free <=1 Mo; paid "no-file-limit" lifts the cap) ───────
+
+model Attachment {
+  id          String   @id @default(uuid())
+  messageId   String?
+  ip          String
+  filename    String
+  mimeType    String
+  size        Int
+  storagePath String
+  createdAt   DateTime @default(now())
+
+  message Message? @relation(fields: [messageId], references: [id], onDelete: Cascade)
+
+  @@index([messageId])
+  @@map("attachments")
+}
diff --git a/backend/prisma/seed.ts b/backend/prisma/seed.ts
index 0fd9c02..31a39dd 100644
--- a/backend/prisma/seed.ts
+++ b/backend/prisma/seed.ts
@@ -1,282 +1,282 @@
-import { PrismaClient } from "@prisma/client";
-
-const prisma = new PrismaClient();
-
-// ── Marketplace catalogue (faithful to the shop mockups) ────────────────────
-// Prices are centi-credits (mockup € → credits): 9.99 → 999.
-const PRODUCTS = [
-  {
-    id: "cadre-pub",
-    category: "publicite",
-    name: "Cadre de Pub",
-    subtitle: "1 000 impressions garanties · 130×180 px · lien cliquable",
-    kind: "ad-frame",
-    basePrice: 1500,
-    promoPrice: 999,
-    badge: "-33% FLASH PROMO",
-    sortOrder: 10,
-    metaJson: JSON.stringify({
-      durations: [
-        { days: 7, extra: 0 },
-        { days: 14, extra: 800 },
-        { days: 30, extra: 2000 },
-      ],
-      formats: [
-        { id: "static", label: "Image statique", extra: 0 },
-        { id: "gif", label: "GIF animé", extra: 300 },
-      ],
-    }),
-  },
-  {
-    id: "noads",
-    category: "abonnements",
-    name: "Abonnement NoAds",
-    subtitle: "Supprime toutes les pubs du chat",
-    kind: "subscription",
-    basePrice: 499,
-    badge: "POPULAIRE",
-    sortOrder: 20,
-    metaJson: JSON.stringify({
-      plans: [
-        { id: "monthly", label: "Mensuel", price: 499 },
-        { id: "annual", label: "Annuel", price: 3999 },
-      ],
-    }),
-  },
-  {
-    id: "style-dore",
-    category: "cosmetiques",
-    name: "Style Doré",
-    subtitle: "Ton IP en or brillant, visible de tous",
-    kind: "ip-skin",
-    basePrice: 999,
-    badge: "LIMITÉ 50 ex.",
-    stockLimit: 50,
-    sortOrder: 30,
-    metaJson: JSON.stringify({ variant: "gold" }),
-  },
-  {
-    id: "pet",
-    category: "cosmetiques",
-    name: "Pet de Nom",
-    subtitle: "Un petit élément décoratif autour de ton IP",
-    kind: "pet",
-    basePrice: 799,
-    badge: "NOUVEAU",
-    sortOrder: 40,
-    metaJson: JSON.stringify({
-      designs: [
-        { id: "coeur", char: "♥" },
-        { id: "etoile", char: "★" },
-        { id: "diamant", char: "♦" },
-        { id: "trefle", char: "♣" },
-        { id: "couronne", char: "♚" },
-        { id: "crane", char: "☠" },
-        { id: "eclair", char: "⚡" },
-        { id: "fleur", char: "✿" },
-        { id: "note", char: "♫" },
-        { id: "feu", char: "🔥" },
-      ],
-      positions: ["left", "right", "both"],
-    }),
-  },
-  {
-    id: "bundle-cosmetic",
-    category: "promotions",
-    name: "Pack Cosmétique",
-    subtitle: "Style Doré + 1 Pet au choix",
-    kind: "bundle",
-    basePrice: 1798,
-    promoPrice: 1499,
-    badge: "-3 CR",
-    sortOrder: 50,
-    metaJson: JSON.stringify({ includes: ["style-dore", "pet"] }),
-  },
-  {
-    // id == entitlement kind, so the "unlock" branch grants "element-skin".
-    id: "element-skin",
-    category: "cosmetiques",
-    name: "Skin d'éléments",
-    subtitle: "Relooke ta barre de saisie et ton bouton d'envoi",
-    kind: "unlock",
-    basePrice: 599,
-    sortOrder: 45,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "rich-htmlcss",
-    category: "premium",
-    name: "Messages HTML / CSS",
-    subtitle: "Mets en forme tes messages (sans script)",
-    kind: "rich",
-    basePrice: 2999,
-    sortOrder: 60,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "rich-js",
-    category: "premium",
-    name: "Messages JavaScript",
-    subtitle: "Scripts interactifs (isolés). TRÈS cher.",
-    kind: "rich",
-    basePrice: 19999,
-    badge: "TRÈS TRÈS CHER",
-    sortOrder: 70,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "no-file-limit",
-    category: "premium",
-    name: "Fichiers illimités",
-    subtitle: "Plus de limite de 1 Mo sur tes pièces jointes",
-    kind: "unlock",
-    basePrice: 1499,
-    sortOrder: 80,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "audio-alert",
-    category: "premium",
-    name: "Alerte audio générale",
-    subtitle: "Fais hurler un son chez tout le monde (cooldown)",
-    kind: "consumable",
-    basePrice: 999,
-    badge: "CONSOMMABLE",
-    sortOrder: 90,
-    metaJson: JSON.stringify({ cooldownMs: 60000, maxDurationMs: 5000 }),
-  },
-  // ── Cosmetics: IP color + send button skins ──────────────────────────────
-  {
-    id: "ip-colors",
-    category: "cosmetiques",
-    name: "Palette IP",
-    subtitle: "Personnalise la couleur de ton adresse IP dans le chat",
-    kind: "unlock",
-    basePrice: 299,
-    sortOrder: 46,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "send-skin-honker",
-    category: "cosmetiques",
-    name: "Doigt d'honneur",
-    subtitle: "Bouton d'envoi qui exprime tout",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 47,
-    metaJson: JSON.stringify({ char: "🖕", label: "Doigt d'honneur" }),
-  },
-  {
-    id: "send-skin-skull",
-    category: "cosmetiques",
-    name: "Crâne",
-    subtitle: "Envoyer avec style... macabre",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 48,
-    metaJson: JSON.stringify({ char: "💀", label: "Crâne" }),
-  },
-  {
-    id: "send-skin-rocket",
-    category: "cosmetiques",
-    name: "Fusée",
-    subtitle: "Tes messages décollent",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 49,
-    metaJson: JSON.stringify({ char: "🚀", label: "Fusée" }),
-  },
-  {
-    id: "send-skin-ghost",
-    category: "cosmetiques",
-    name: "Fantôme",
-    subtitle: "Boo !",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 50,
-    metaJson: JSON.stringify({ char: "👻", label: "Fantôme" }),
-  },
-  {
-    id: "send-skin-bomb",
-    category: "cosmetiques",
-    name: "Bombe",
-    subtitle: "Message explosif",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 51,
-    metaJson: JSON.stringify({ char: "💣", label: "Bombe" }),
-  },
-  {
-    id: "send-skin-sword",
-    category: "cosmetiques",
-    name: "Épée",
-    subtitle: "Tranche le silence",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 52,
-    metaJson: JSON.stringify({ char: "⚔️", label: "Épée" }),
-  },
-] as const;
-
-// ── Ad inventory (the 4 hardcoded joke ads, now real data) ──────────────────
-const ADS = [
-  { brand: "NOVA", subtitle: "STORE 2026", url: "https://nova-store.io", cta: "DÉCOUVRIR", icon: "🛒", tone: "blue", kind: "band", weight: 1 },
-  { brand: "APEX GEAR", subtitle: "Gaming Setup", url: "https://apex-gear.com", cta: "ACHETER", icon: "🎮", tone: "green", kind: "band", weight: 1 },
-  { brand: "SHIELDVPN", subtitle: "Sécurité totale", url: "https://shieldvpn.net", cta: "ESSAI GRATUIT", icon: "🔒", tone: "purple", kind: "band", weight: 1 },
-  { brand: "CASINO LUCKY", subtitle: "OFFRE EXCLUSIVE · +200% · 500€ max", url: "https://casino-lucky.bet", cta: "JOUER MAINTENANT", icon: "♠", tone: "casino", kind: "casino", weight: 1 },
-] as const;
-
-async function seedProducts() {
-  for (const p of PRODUCTS) {
-    await prisma.product.upsert({
-      where: { id: p.id },
-      create: p as any,
-      update: p as any,
-    });
-  }
-  console.log(`✅  ${PRODUCTS.length} produits upsertés.`);
-}
-
-async function seedAds() {
-  for (const a of ADS) {
-    // Idempotent on brand: only seed the canonical (non-user) ads once.
-    const existing = await prisma.ad.findFirst({ where: { brand: a.brand, ownerIp: null } });
-    if (existing) {
-      await prisma.ad.update({ where: { id: existing.id }, data: a as any });
-    } else {
-      await prisma.ad.create({ data: a as any });
-    }
-  }
-  console.log(`✅  ${ADS.length} pubs upsertées.`);
-}
-
-async function seedMessages() {
-  const count = await prisma.message.count();
-  if (count > 0) {
-    console.log("⏭️  Messages déjà présents, seed messages ignoré.");
-    return;
-  }
-  const root1 = await prisma.message.create({
-    data: {
-      content: "Bienvenue sur XIP — le réseau social sans filtre ni compte.",
-      authorIp: "1.2.3.4",
-    },
-  });
-  await prisma.message.create({
-    data: { content: "Pas de compte, ton IP c'est toi.", authorIp: "5.6.7.8" },
-  });
-  await prisma.message.create({
-    data: { content: "Réponse au premier message !", authorIp: "9.10.11.12", parentId: root1.id },
-  });
-  console.log("✅  3 messages de démo créés.");
-}
-
-async function main() {
-  await seedProducts();
-  await seedAds();
-  await seedMessages();
-}
-
-main()
-  .catch(console.error)
-  .finally(() => prisma.$disconnect());
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+// ── Marketplace catalogue (faithful to the shop mockups) ────────────────────
+// Prices are centi-credits (mockup € → credits): 9.99 → 999.
+const PRODUCTS = [
+  {
+    id: "cadre-pub",
+    category: "publicite",
+    name: "Cadre de Pub",
+    subtitle: "1 000 impressions garanties · 130×180 px · lien cliquable",
+    kind: "ad-frame",
+    basePrice: 1500,
+    promoPrice: 999,
+    badge: "-33% FLASH PROMO",
+    sortOrder: 10,
+    metaJson: JSON.stringify({
+      durations: [
+        { days: 7, extra: 0 },
+        { days: 14, extra: 800 },
+        { days: 30, extra: 2000 },
+      ],
+      formats: [
+        { id: "static", label: "Image statique", extra: 0 },
+        { id: "gif", label: "GIF animé", extra: 300 },
+      ],
+    }),
+  },
+  {
+    id: "noads",
+    category: "abonnements",
+    name: "Abonnement NoAds",
+    subtitle: "Supprime toutes les pubs du chat",
+    kind: "subscription",
+    basePrice: 499,
+    badge: "POPULAIRE",
+    sortOrder: 20,
+    metaJson: JSON.stringify({
+      plans: [
+        { id: "monthly", label: "Mensuel", price: 499 },
+        { id: "annual", label: "Annuel", price: 3999 },
+      ],
+    }),
+  },
+  {
+    id: "style-dore",
+    category: "cosmetiques",
+    name: "Style Doré",
+    subtitle: "Ton IP en or brillant, visible de tous",
+    kind: "ip-skin",
+    basePrice: 999,
+    badge: "LIMITÉ 50 ex.",
+    stockLimit: 50,
+    sortOrder: 30,
+    metaJson: JSON.stringify({ variant: "gold" }),
+  },
+  {
+    id: "pet",
+    category: "cosmetiques",
+    name: "Pet de Nom",
+    subtitle: "Un petit élément décoratif autour de ton IP",
+    kind: "pet",
+    basePrice: 799,
+    badge: "NOUVEAU",
+    sortOrder: 40,
+    metaJson: JSON.stringify({
+      designs: [
+        { id: "coeur", char: "♥" },
+        { id: "etoile", char: "★" },
+        { id: "diamant", char: "♦" },
+        { id: "trefle", char: "♣" },
+        { id: "couronne", char: "♚" },
+        { id: "crane", char: "☠" },
+        { id: "eclair", char: "⚡" },
+        { id: "fleur", char: "✿" },
+        { id: "note", char: "♫" },
+        { id: "feu", char: "🔥" },
+      ],
+      positions: ["left", "right", "both"],
+    }),
+  },
+  {
+    id: "bundle-cosmetic",
+    category: "promotions",
+    name: "Pack Cosmétique",
+    subtitle: "Style Doré + 1 Pet au choix",
+    kind: "bundle",
+    basePrice: 1798,
+    promoPrice: 1499,
+    badge: "-3 CR",
+    sortOrder: 50,
+    metaJson: JSON.stringify({ includes: ["style-dore", "pet"] }),
+  },
+  {
+    // id == entitlement kind, so the "unlock" branch grants "element-skin".
+    id: "element-skin",
+    category: "cosmetiques",
+    name: "Skin d'éléments",
+    subtitle: "Relooke ta barre de saisie et ton bouton d'envoi",
+    kind: "unlock",
+    basePrice: 599,
+    sortOrder: 45,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "rich-htmlcss",
+    category: "premium",
+    name: "Messages HTML / CSS",
+    subtitle: "Mets en forme tes messages (sans script)",
+    kind: "rich",
+    basePrice: 2999,
+    sortOrder: 60,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "rich-js",
+    category: "premium",
+    name: "Messages JavaScript",
+    subtitle: "Scripts interactifs (isolés). TRÈS cher.",
+    kind: "rich",
+    basePrice: 19999,
+    badge: "TRÈS TRÈS CHER",
+    sortOrder: 70,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "no-file-limit",
+    category: "premium",
+    name: "Fichiers illimités",
+    subtitle: "Plus de limite de 1 Mo sur tes pièces jointes",
+    kind: "unlock",
+    basePrice: 1499,
+    sortOrder: 80,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "audio-alert",
+    category: "premium",
+    name: "Alerte audio générale",
+    subtitle: "Fais hurler un son chez tout le monde (cooldown)",
+    kind: "consumable",
+    basePrice: 999,
+    badge: "CONSOMMABLE",
+    sortOrder: 90,
+    metaJson: JSON.stringify({ cooldownMs: 60000, maxDurationMs: 5000 }),
+  },
+  // ── Cosmetics: IP color + send button skins ──────────────────────────────
+  {
+    id: "ip-colors",
+    category: "cosmetiques",
+    name: "Palette IP",
+    subtitle: "Personnalise la couleur de ton adresse IP dans le chat",
+    kind: "unlock",
+    basePrice: 299,
+    sortOrder: 46,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "send-skin-honker",
+    category: "cosmetiques",
+    name: "Doigt d'honneur",
+    subtitle: "Bouton d'envoi qui exprime tout",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 47,
+    metaJson: JSON.stringify({ char: "🖕", label: "Doigt d'honneur" }),
+  },
+  {
+    id: "send-skin-skull",
+    category: "cosmetiques",
+    name: "Crâne",
+    subtitle: "Envoyer avec style... macabre",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 48,
+    metaJson: JSON.stringify({ char: "💀", label: "Crâne" }),
+  },
+  {
+    id: "send-skin-rocket",
+    category: "cosmetiques",
+    name: "Fusée",
+    subtitle: "Tes messages décollent",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 49,
+    metaJson: JSON.stringify({ char: "🚀", label: "Fusée" }),
+  },
+  {
+    id: "send-skin-ghost",
+    category: "cosmetiques",
+    name: "Fantôme",
+    subtitle: "Boo !",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 50,
+    metaJson: JSON.stringify({ char: "👻", label: "Fantôme" }),
+  },
+  {
+    id: "send-skin-bomb",
+    category: "cosmetiques",
+    name: "Bombe",
+    subtitle: "Message explosif",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 51,
+    metaJson: JSON.stringify({ char: "💣", label: "Bombe" }),
+  },
+  {
+    id: "send-skin-sword",
+    category: "cosmetiques",
+    name: "Épée",
+    subtitle: "Tranche le silence",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 52,
+    metaJson: JSON.stringify({ char: "⚔️", label: "Épée" }),
+  },
+] as const;
+
+// ── Ad inventory (the 4 hardcoded joke ads, now real data) ──────────────────
+const ADS = [
+  { brand: "NOVA", subtitle: "STORE 2026", url: "https://nova-store.io", cta: "DÉCOUVRIR", icon: "🛒", tone: "blue", kind: "band", weight: 1 },
+  { brand: "APEX GEAR", subtitle: "Gaming Setup", url: "https://apex-gear.com", cta: "ACHETER", icon: "🎮", tone: "green", kind: "band", weight: 1 },
+  { brand: "SHIELDVPN", subtitle: "Sécurité totale", url: "https://shieldvpn.net", cta: "ESSAI GRATUIT", icon: "🔒", tone: "purple", kind: "band", weight: 1 },
+  { brand: "CASINO LUCKY", subtitle: "OFFRE EXCLUSIVE · +200% · 500€ max", url: "https://casino-lucky.bet", cta: "JOUER MAINTENANT", icon: "♠", tone: "casino", kind: "casino", weight: 1 },
+] as const;
+
+async function seedProducts() {
+  for (const p of PRODUCTS) {
+    await prisma.product.upsert({
+      where: { id: p.id },
+      create: p as any,
+      update: p as any,
+    });
+  }
+  console.log(`✅  ${PRODUCTS.length} produits upsertés.`);
+}
+
+async function seedAds() {
+  for (const a of ADS) {
+    // Idempotent on brand: only seed the canonical (non-user) ads once.
+    const existing = await prisma.ad.findFirst({ where: { brand: a.brand, ownerIp: null } });
+    if (existing) {
+      await prisma.ad.update({ where: { id: existing.id }, data: a as any });
+    } else {
+      await prisma.ad.create({ data: a as any });
+    }
+  }
+  console.log(`✅  ${ADS.length} pubs upsertées.`);
+}
+
+async function seedMessages() {
+  const count = await prisma.message.count();
+  if (count > 0) {
+    console.log("⏭️  Messages déjà présents, seed messages ignoré.");
+    return;
+  }
+  const root1 = await prisma.message.create({
+    data: {
+      content: "Bienvenue sur XIP — le réseau social sans filtre ni compte.",
+      authorIp: "1.2.3.4",
+    },
+  });
+  await prisma.message.create({
+    data: { content: "Pas de compte, ton IP c'est toi.", authorIp: "5.6.7.8" },
+  });
+  await prisma.message.create({
+    data: { content: "Réponse au premier message !", authorIp: "9.10.11.12", parentId: root1.id },
+  });
+  console.log("✅  3 messages de démo créés.");
+}
+
+async function main() {
+  await seedProducts();
+  await seedAds();
+  await seedMessages();
+}
+
+main()
+  .catch(console.error)
+  .finally(() => prisma.$disconnect());
diff --git a/backend/src/index.ts b/backend/src/index.ts
index 82e52e7..3e5e30b 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -1,57 +1,57 @@
-import { Hono } from "hono";
-import { cors } from "hono/cors";
-import { logger } from "hono/logger";
-import messagesRoute from "./routes/messages";
-import walletRoute from "./routes/wallet";
-import shopRoute from "./routes/shop";
-import perksRoute from "./routes/perks";
-import uploadsRoute from "./routes/uploads";
-import adsRoute from "./routes/ads";
-import alertRoute from "./routes/alert";
-import { wsHandler, websocket } from "./realtime";
-import { recordIp, initStats } from "./lib/stats";
-import { initImpressionTotal, reconcileImpressions } from "./lib/ads";
-import { getClientIp } from "./lib/ip";
-
-const app = new Hono();
-
-// Backfill persistent counters from the DB on first boot (idempotent).
-void initStats();
-void initImpressionTotal();
-// Periodically fold Redis impression counters into the DB.
-setInterval(() => void reconcileImpressions(), 30_000);
-
-app.use("*", logger());
-app.use(
-  "*",
-  cors({
-    origin: (origin) => origin ?? "*",
-    allowMethods: ["GET", "POST", "OPTIONS"],
-    allowHeaders: ["Content-Type"],
-  })
-);
-
-// Count every IP that passes through the server (HyperLogLog, approximate).
-app.use("*", async (c, next) => {
-  void recordIp(getClientIp(c));
-  await next();
-});
-
-app.get("/health", (c) => c.json({ status: "ok" }));
-
-// Realtime stats + live message feed.
-app.get("/ws", wsHandler);
-
-app.route("/api/messages", messagesRoute);
-app.route("/api/wallet", walletRoute);
-app.route("/api/shop", shopRoute);
-app.route("/api/perks", perksRoute);
-app.route("/api/uploads", uploadsRoute);
-app.route("/api/ads", adsRoute);
-app.route("/api/alert", alertRoute);
-
-export default {
-  port: Number(process.env.PORT) || 3000,
-  fetch: app.fetch,
-  websocket,
-};
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import messagesRoute from "./routes/messages";
+import walletRoute from "./routes/wallet";
+import shopRoute from "./routes/shop";
+import perksRoute from "./routes/perks";
+import uploadsRoute from "./routes/uploads";
+import adsRoute from "./routes/ads";
+import alertRoute from "./routes/alert";
+import { wsHandler, websocket } from "./realtime";
+import { recordIp, initStats } from "./lib/stats";
+import { initImpressionTotal, reconcileImpressions } from "./lib/ads";
+import { getClientIp } from "./lib/ip";
+
+const app = new Hono();
+
+// Backfill persistent counters from the DB on first boot (idempotent).
+void initStats();
+void initImpressionTotal();
+// Periodically fold Redis impression counters into the DB.
+setInterval(() => void reconcileImpressions(), 30_000);
+
+app.use("*", logger());
+app.use(
+  "*",
+  cors({
+    origin: (origin) => origin ?? "*",
+    allowMethods: ["GET", "POST", "OPTIONS"],
+    allowHeaders: ["Content-Type"],
+  })
+);
+
+// Count every IP that passes through the server (HyperLogLog, approximate).
+app.use("*", async (c, next) => {
+  void recordIp(getClientIp(c));
+  await next();
+});
+
+app.get("/health", (c) => c.json({ status: "ok" }));
+
+// Realtime stats + live message feed.
+app.get("/ws", wsHandler);
+
+app.route("/api/messages", messagesRoute);
+app.route("/api/wallet", walletRoute);
+app.route("/api/shop", shopRoute);
+app.route("/api/perks", perksRoute);
+app.route("/api/uploads", uploadsRoute);
+app.route("/api/ads", adsRoute);
+app.route("/api/alert", alertRoute);
+
+export default {
+  port: Number(process.env.PORT) || 3000,
+  fetch: app.fetch,
+  websocket,
+};
diff --git a/backend/src/lib/ads.ts b/backend/src/lib/ads.ts
index 899dcc2..a5bf4f7 100644
--- a/backend/src/lib/ads.ts
+++ b/backend/src/lib/ads.ts
@@ -1,71 +1,71 @@
-import { prisma } from "./prisma";
-import { redis } from "./redis";
-
-/**
- * Ad inventory access + impression counting.
- *
- * Active, non-expired ads are served by kind ("band" | "casino"). Impressions
- * are counted cheaply in Redis (xip:ad:impressions:<id> + a global total) and
- * periodically reconciled into Ad.impressions for durability.
- */
-
-const IMP_PREFIX = "xip:ad:impressions:";
-const IMP_TOTAL = "xip:money:impressions_total";
-
-export async function listActiveAds(kind: "band" | "casino") {
-  const now = new Date();
-  const ads = await prisma.ad.findMany({
-    where: { kind, active: true },
-    orderBy: { createdAt: "asc" },
-  });
-  return ads.filter((a) => !a.expiresAt || a.expiresAt >= now);
-}
-
-/** Record N impressions for a set of ad ids (best-effort, Redis only). */
-export async function recordImpressions(ids: string[]): Promise<void> {
-  if (!ids.length) return;
-  const pipe = redis.pipeline();
-  for (const id of ids) pipe.incr(IMP_PREFIX + id);
-  pipe.incrby(IMP_TOTAL, ids.length);
-  await pipe.exec().catch(() => {});
-}
-
-/** Total impressions across all ads (for the money counter). */
-export async function getImpressionTotal(): Promise<number> {
-  const v = await redis.get(IMP_TOTAL).catch(() => "0");
-  return Number(v ?? 0);
-}
-
-/**
- * Periodically fold the Redis per-ad impression counters into the DB so the
- * Ad.impressions column stays roughly current (and survives a Redis flush).
- */
-export async function reconcileImpressions(): Promise<void> {
-  try {
-    const ads = await prisma.ad.findMany({ select: { id: true } });
-    for (const { id } of ads) {
-      const key = IMP_PREFIX + id;
-      const v = await redis.get(key).catch(() => null);
-      const n = Number(v ?? 0);
-      if (n > 0) {
-        await prisma.ad.update({ where: { id }, data: { impressions: n } }).catch(() => {});
-      }
-    }
-  } catch {
-    /* best-effort */
-  }
-}
-
-/** Backfill the Redis impression total from the DB on first boot. */
-export async function initImpressionTotal(): Promise<void> {
-  const exists = await redis.exists(IMP_TOTAL).catch(() => 0);
-  if (exists) return;
-  const agg = await prisma.ad.aggregate({ _sum: { impressions: true } }).catch(() => null);
-  const sum = agg?._sum.impressions ?? 0;
-  if (sum > 0) await redis.set(IMP_TOTAL, String(sum)).catch(() => {});
-  // Also seed per-ad keys so reconcile doesn't clobber DB values with 0.
-  const ads = await prisma.ad.findMany({ select: { id: true, impressions: true } }).catch(() => []);
-  for (const a of ads) {
-    if (a.impressions > 0) await redis.set(IMP_PREFIX + a.id, String(a.impressions)).catch(() => {});
-  }
-}
+import { prisma } from "./prisma";
+import { redis } from "./redis";
+
+/**
+ * Ad inventory access + impression counting.
+ *
+ * Active, non-expired ads are served by kind ("band" | "casino"). Impressions
+ * are counted cheaply in Redis (xip:ad:impressions:<id> + a global total) and
+ * periodically reconciled into Ad.impressions for durability.
+ */
+
+const IMP_PREFIX = "xip:ad:impressions:";
+const IMP_TOTAL = "xip:money:impressions_total";
+
+export async function listActiveAds(kind: "band" | "casino") {
+  const now = new Date();
+  const ads = await prisma.ad.findMany({
+    where: { kind, active: true },
+    orderBy: { createdAt: "asc" },
+  });
+  return ads.filter((a) => !a.expiresAt || a.expiresAt >= now);
+}
+
+/** Record N impressions for a set of ad ids (best-effort, Redis only). */
+export async function recordImpressions(ids: string[]): Promise<void> {
+  if (!ids.length) return;
+  const pipe = redis.pipeline();
+  for (const id of ids) pipe.incr(IMP_PREFIX + id);
+  pipe.incrby(IMP_TOTAL, ids.length);
+  await pipe.exec().catch(() => {});
+}
+
+/** Total impressions across all ads (for the money counter). */
+export async function getImpressionTotal(): Promise<number> {
+  const v = await redis.get(IMP_TOTAL).catch(() => "0");
+  return Number(v ?? 0);
+}
+
+/**
+ * Periodically fold the Redis per-ad impression counters into the DB so the
+ * Ad.impressions column stays roughly current (and survives a Redis flush).
+ */
+export async function reconcileImpressions(): Promise<void> {
+  try {
+    const ads = await prisma.ad.findMany({ select: { id: true } });
+    for (const { id } of ads) {
+      const key = IMP_PREFIX + id;
+      const v = await redis.get(key).catch(() => null);
+      const n = Number(v ?? 0);
+      if (n > 0) {
+        await prisma.ad.update({ where: { id }, data: { impressions: n } }).catch(() => {});
+      }
+    }
+  } catch {
+    /* best-effort */
+  }
+}
+
+/** Backfill the Redis impression total from the DB on first boot. */
+export async function initImpressionTotal(): Promise<void> {
+  const exists = await redis.exists(IMP_TOTAL).catch(() => 0);
+  if (exists) return;
+  const agg = await prisma.ad.aggregate({ _sum: { impressions: true } }).catch(() => null);
+  const sum = agg?._sum.impressions ?? 0;
+  if (sum > 0) await redis.set(IMP_TOTAL, String(sum)).catch(() => {});
+  // Also seed per-ad keys so reconcile doesn't clobber DB values with 0.
+  const ads = await prisma.ad.findMany({ select: { id: true, impressions: true } }).catch(() => []);
+  for (const a of ads) {
+    if (a.impressions > 0) await redis.set(IMP_PREFIX + a.id, String(a.impressions)).catch(() => {});
+  }
+}
diff --git a/backend/src/lib/catalog.ts b/backend/src/lib/catalog.ts
index 5299917..e17fd37 100644
--- a/backend/src/lib/catalog.ts
+++ b/backend/src/lib/catalog.ts
@@ -1,314 +1,314 @@
-import { prisma } from "./prisma";
-import { spend, getWallet, InsufficientCreditsError } from "./wallet";
-import { isFree } from "./ip";
-import { invalidatePerks, getPerksForIp } from "./perks";
-
-/**
- * Marketplace catalogue + purchase engine.
- *
- * Prices are centi-credits (mockup € → credits). The server is the ONLY
- * authority on price, stock, and per-IP limits — the client never decides.
- */
-
-export interface PurchaseOptions {
-  plan?: "monthly" | "annual"; // subscription
-  durationDays?: number; // ad-frame
-  format?: "static" | "gif"; // ad-frame
-  url?: string; // ad-frame destination
-  petDesign?: string; // pet slug
-  petChar?: string; // pet glyph
-  petPosition?: "left" | "right" | "both";
-}
-
-export interface PurchaseResult {
-  ok: true;
-  productId: string;
-  pricePaid: number;
-  balance: number;
-  entitlementKinds: string[];
-}
-
-export class PurchaseError extends Error {
-  status: number;
-  constructor(message: string, status = 400) {
-    super(message);
-    this.name = "PurchaseError";
-    this.status = status;
-  }
-}
-
-const DAY_MS = 24 * 60 * 60 * 1000;
-
-/** Effective unit price for a product given options (promo + add-ons). */
-function effectivePrice(product: any, options: PurchaseOptions): number {
-  let price = product.promoPrice ?? product.basePrice;
-  let meta: any = {};
-  try {
-    meta = product.metaJson ? JSON.parse(product.metaJson) : {};
-  } catch {
-    meta = {};
-  }
-
-  if (product.kind === "subscription") {
-    const plan = (meta.plans ?? []).find((p: any) => p.id === (options.plan ?? "monthly"));
-    if (plan) price = plan.price;
-  }
-  if (product.kind === "ad-frame") {
-    const dur = (meta.durations ?? []).find(
-      (d: any) => d.days === (options.durationDays ?? 7)
-    );
-    const fmt = (meta.formats ?? []).find(
-      (f: any) => f.id === (options.format ?? "static")
-    );
-    price += (dur?.extra ?? 0) + (fmt?.extra ?? 0);
-  }
-  return price;
-}
-
-export async function listProducts(category?: string) {
-  return prisma.product.findMany({
-    where: { active: true, ...(category ? { category } : {}) },
-    orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
-  });
-}
-
-export function getProduct(id: string) {
-  return prisma.product.findUnique({ where: { id } });
-}
-
-/** All entitlements an IP owns (active), for "Mes achats". */
-export async function getEntitlements(ip: string) {
-  const now = new Date();
-  const rows = await prisma.entitlement.findMany({
-    where: { ip, active: true },
-    orderBy: { createdAt: "desc" },
-  });
-  return rows.filter((e) => !e.expiresAt || e.expiresAt >= now);
-}
-
-async function countActiveEntitlements(ip: string, kind: string): Promise<number> {
-  const now = new Date();
-  const rows = await prisma.entitlement.findMany({ where: { ip, kind, active: true } });
-  return rows.filter((e) => !e.expiresAt || e.expiresAt >= now).length;
-}
-
-/**
- * Buy a product. Enforces per-IP limits + stock, spends credits atomically,
- * grants the entitlement(s). Returns the new balance and granted kinds.
- * Side-effect: caller should bust perks cache + broadcast (done in the route).
- */
-export async function purchase(
-  ip: string,
-  productId: string,
-  options: PurchaseOptions = {}
-): Promise<{ result: PurchaseResult; visiblePerkChanged: boolean; adCreated: boolean }> {
-  const product = await getProduct(productId);
-  if (!product || !product.active) throw new PurchaseError("Produit introuvable", 404);
-
-  const free = isFree(ip);
-  const price = effectivePrice(product, options);
-
-  // Resolve which entitlement kind(s) this grants + per-IP limit checks.
-  const grants: { kind: string; expiresAt?: Date; meta?: any }[] = [];
-  let visiblePerkChanged = false;
-  let adCreated = false;
-
-  switch (product.kind) {
-    case "subscription": {
-      // NoAds: 1 active max.
-      if ((await countActiveEntitlements(ip, "noads")) >= 1)
-        throw new PurchaseError("Tu as déjà un abonnement NoAds actif", 409);
-      const plan = options.plan ?? "monthly";
-      const days = plan === "annual" ? 365 : 30;
-      grants.push({ kind: "noads", expiresAt: new Date(Date.now() + days * DAY_MS), meta: { plan } });
-      break;
-    }
-    case "ip-skin": {
-      // Style Doré: 1 active max + global stock cap.
-      if ((await countActiveEntitlements(ip, "style-dore")) >= 1)
-        throw new PurchaseError("Tu possèdes déjà le Style Doré", 409);
-      grants.push({ kind: "style-dore", meta: { variant: "gold" } });
-      visiblePerkChanged = true;
-      break;
-    }
-    case "pet": {
-      const char = options.petChar ?? "♥";
-      grants.push({
-        kind: "pet",
-        meta: { design: options.petDesign ?? "coeur", char, position: options.petPosition ?? "left" },
-      });
-      visiblePerkChanged = true;
-      break;
-    }
-    case "ad-frame": {
-      if ((await countActiveEntitlements(ip, "ad-frame")) >= 1)
-        throw new PurchaseError("Tu as déjà un cadre de pub actif", 409);
-      const days = options.durationDays ?? 7;
-      grants.push({
-        kind: "ad-frame",
-        expiresAt: new Date(Date.now() + days * DAY_MS),
-        meta: { format: options.format ?? "static", url: options.url ?? "", days },
-      });
-      break;
-    }
-    case "rich": {
-      const kind = product.id === "rich-js" ? "rich-js" : "rich-htmlcss";
-      if ((await countActiveEntitlements(ip, kind)) >= 1)
-        throw new PurchaseError("Déjà débloqué", 409);
-      grants.push({ kind });
-      break;
-    }
-    case "unlock": {
-      // no-file-limit, element-skin, etc. — slug == kind.
-      if ((await countActiveEntitlements(ip, product.id)) >= 1)
-        throw new PurchaseError("Déjà débloqué", 409);
-      grants.push({ kind: product.id });
-      if (product.id === "element-skin" || product.id === "ip-colors") visiblePerkChanged = false; // viewer-scoped
-      break;
-    }
-    case "consumable": {
-      // audio-alert: grant the entitlement once; firing is a separate action.
-      if ((await countActiveEntitlements(ip, "audio-alert")) < 1) {
-        grants.push({ kind: "audio-alert" });
-      } else {
-        // Already owned — buying again is a harmless top-up; just record it.
-        grants.push({ kind: "audio-alert" });
-      }
-      break;
-    }
-    case "send-skin": {
-      if ((await countActiveEntitlements(ip, product.id)) >= 1)
-        throw new PurchaseError("Déjà débloqué", 409);
-      let skinMeta: any = {};
-      try { skinMeta = product.metaJson ? JSON.parse(product.metaJson) : {}; } catch {}
-      grants.push({ kind: product.id, meta: skinMeta });
-      break;
-    }
-    case "bundle": {
-      // Cosmetic bundle: Style Doré + 1 pet.
-      if ((await countActiveEntitlements(ip, "style-dore")) < 1)
-        grants.push({ kind: "style-dore", meta: { variant: "gold" } });
-      if ((await countActiveEntitlements(ip, "pet")) < 3) {
-        const char = options.petChar ?? "★";
-        grants.push({
-          kind: "pet",
-          meta: { design: options.petDesign ?? "etoile", char, position: options.petPosition ?? "left" },
-        });
-      }
-      if (grants.length === 0)
-        throw new PurchaseError("Tu possèdes déjà ce que contient le pack", 409);
-      visiblePerkChanged = true;
-      break;
-    }
-    default:
-      throw new PurchaseError("Type de produit non géré", 400);
-  }
-
-  // Stock check for limited products (Style Doré). Done transactionally with the
-  // spend so we can never oversell the 50-unit cap under concurrency.
-  let balance = 0;
-  try {
-    balance = await prisma.$transaction(async (tx) => {
-      if (product.stockLimit != null) {
-        const fresh = await tx.product.findUnique({ where: { id: product.id } });
-        if (!fresh) throw new PurchaseError("Produit introuvable", 404);
-        if (fresh.stockSold >= fresh.stockLimit)
-          throw new PurchaseError("Stock épuisé", 409);
-        await tx.product.update({
-          where: { id: product.id },
-          data: { stockSold: { increment: 1 } },
-        });
-      }
-
-      // Spend (skips real deduction for localhost free mode).
-      if (!free && price > 0) {
-        const w = await tx.wallet.upsert({
-          where: { ip },
-          create: { ip, balance: 0 },
-          update: {},
-        });
-        if (w.balance < price) throw new InsufficientCreditsError();
-        const updated = await tx.wallet.update({
-          where: { ip },
-          data: { balance: { decrement: price } },
-        });
-        await tx.purchase.create({
-          data: { ip, type: "purchase", amount: -price, productId: product.id, metaJson: JSON.stringify(options) },
-        });
-        // Grant entitlements inside the tx too.
-        for (const g of grants) {
-          await tx.entitlement.create({
-            data: { ip, kind: g.kind, expiresAt: g.expiresAt ?? null, metaJson: g.meta ? JSON.stringify(g.meta) : null },
-          });
-        }
-        return updated.balance;
-      }
-
-      // Free (localhost) or zero-price: record purchase + grants, no deduction.
-      await tx.purchase.create({
-        data: { ip, type: "purchase", amount: 0, productId: product.id, metaJson: JSON.stringify(options) },
-      });
-      for (const g of grants) {
-        await tx.entitlement.create({
-          data: { ip, kind: g.kind, expiresAt: g.expiresAt ?? null, metaJson: g.meta ? JSON.stringify(g.meta) : null },
-        });
-      }
-      const w = await tx.wallet.findUnique({ where: { ip } });
-      return w?.balance ?? 0;
-    });
-  } catch (e) {
-    if (e instanceof InsufficientCreditsError)
-      throw new PurchaseError("Crédits insuffisants", 402);
-    throw e;
-  }
-
-  // Bump the global credits-spent money counter (outside the tx; best-effort).
-  if (!free && price > 0) {
-    const { redis } = await import("./redis");
-    void redis.incrby("xip:money:credits_spent", price).catch(() => {});
-  }
-
-  // Ad-frame purchase => create a real Ad row that enters rotation (Phase 7).
-  const adGrant = grants.find((g) => g.kind === "ad-frame");
-  if (adGrant) {
-    await prisma.ad
-      .create({
-        data: {
-          brand: "VOTRE PUB",
-          subtitle: "Espace acheté",
-          url: adGrant.meta?.url || null,
-          cta: "VOIR",
-          icon: "📣",
-          tone: "user",
-          kind: "band",
-          weight: 3,
-          active: true,
-          ownerIp: ip,
-          format: adGrant.meta?.format ?? "static",
-          expiresAt: adGrant.expiresAt ?? null,
-        },
-      })
-      .catch(() => {});
-    adCreated = true;
-  }
-
-  const balanceView = free ? (await getWallet(ip)).balance : balance;
-
-  return {
-    result: {
-      ok: true,
-      productId: product.id,
-      pricePaid: free ? 0 : price,
-      balance: balanceView,
-      entitlementKinds: grants.map((g) => g.kind),
-    },
-    visiblePerkChanged,
-    adCreated,
-  };
-}
-
-/** Recompute + cache perks after a purchase (caller broadcasts). */
-export async function refreshPerks(ip: string) {
-  await invalidatePerks(ip);
-  return getPerksForIp(ip);
-}
+import { prisma } from "./prisma";
+import { spend, getWallet, InsufficientCreditsError } from "./wallet";
+import { isFree } from "./ip";
+import { invalidatePerks, getPerksForIp } from "./perks";
+
+/**
+ * Marketplace catalogue + purchase engine.
+ *
+ * Prices are centi-credits (mockup € → credits). The server is the ONLY
+ * authority on price, stock, and per-IP limits — the client never decides.
+ */
+
+export interface PurchaseOptions {
+  plan?: "monthly" | "annual"; // subscription
+  durationDays?: number; // ad-frame
+  format?: "static" | "gif"; // ad-frame
+  url?: string; // ad-frame destination
+  petDesign?: string; // pet slug
+  petChar?: string; // pet glyph
+  petPosition?: "left" | "right" | "both";
+}
+
+export interface PurchaseResult {
+  ok: true;
+  productId: string;
+  pricePaid: number;
+  balance: number;
+  entitlementKinds: string[];
+}
+
+export class PurchaseError extends Error {
+  status: number;
+  constructor(message: string, status = 400) {
+    super(message);
+    this.name = "PurchaseError";
+    this.status = status;
+  }
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/** Effective unit price for a product given options (promo + add-ons). */
+function effectivePrice(product: any, options: PurchaseOptions): number {
+  let price = product.promoPrice ?? product.basePrice;
+  let meta: any = {};
+  try {
+    meta = product.metaJson ? JSON.parse(product.metaJson) : {};
+  } catch {
+    meta = {};
+  }
+
+  if (product.kind === "subscription") {
+    const plan = (meta.plans ?? []).find((p: any) => p.id === (options.plan ?? "monthly"));
+    if (plan) price = plan.price;
+  }
+  if (product.kind === "ad-frame") {
+    const dur = (meta.durations ?? []).find(
+      (d: any) => d.days === (options.durationDays ?? 7)
+    );
+    const fmt = (meta.formats ?? []).find(
+      (f: any) => f.id === (options.format ?? "static")
+    );
+    price += (dur?.extra ?? 0) + (fmt?.extra ?? 0);
+  }
+  return price;
+}
+
+export async function listProducts(category?: string) {
+  return prisma.product.findMany({
+    where: { active: true, ...(category ? { category } : {}) },
+    orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
+  });
+}
+
+export function getProduct(id: string) {
+  return prisma.product.findUnique({ where: { id } });
+}
+
+/** All entitlements an IP owns (active), for "Mes achats". */
+export async function getEntitlements(ip: string) {
+  const now = new Date();
+  const rows = await prisma.entitlement.findMany({
+    where: { ip, active: true },
+    orderBy: { createdAt: "desc" },
+  });
+  return rows.filter((e) => !e.expiresAt || e.expiresAt >= now);
+}
+
+async function countActiveEntitlements(ip: string, kind: string): Promise<number> {
+  const now = new Date();
+  const rows = await prisma.entitlement.findMany({ where: { ip, kind, active: true } });
+  return rows.filter((e) => !e.expiresAt || e.expiresAt >= now).length;
+}
+
+/**
+ * Buy a product. Enforces per-IP limits + stock, spends credits atomically,
+ * grants the entitlement(s). Returns the new balance and granted kinds.
+ * Side-effect: caller should bust perks cache + broadcast (done in the route).
+ */
+export async function purchase(
+  ip: string,
+  productId: string,
+  options: PurchaseOptions = {}
+): Promise<{ result: PurchaseResult; visiblePerkChanged: boolean; adCreated: boolean }> {
+  const product = await getProduct(productId);
+  if (!product || !product.active) throw new PurchaseError("Produit introuvable", 404);
+
+  const free = isFree(ip);
+  const price = effectivePrice(product, options);
+
+  // Resolve which entitlement kind(s) this grants + per-IP limit checks.
+  const grants: { kind: string; expiresAt?: Date; meta?: any }[] = [];
+  let visiblePerkChanged = false;
+  let adCreated = false;
+
+  switch (product.kind) {
+    case "subscription": {
+      // NoAds: 1 active max.
+      if ((await countActiveEntitlements(ip, "noads")) >= 1)
+        throw new PurchaseError("Tu as déjà un abonnement NoAds actif", 409);
+      const plan = options.plan ?? "monthly";
+      const days = plan === "annual" ? 365 : 30;
+      grants.push({ kind: "noads", expiresAt: new Date(Date.now() + days * DAY_MS), meta: { plan } });
+      break;
+    }
+    case "ip-skin": {
+      // Style Doré: 1 active max + global stock cap.
+      if ((await countActiveEntitlements(ip, "style-dore")) >= 1)
+        throw new PurchaseError("Tu possèdes déjà le Style Doré", 409);
+      grants.push({ kind: "style-dore", meta: { variant: "gold" } });
+      visiblePerkChanged = true;
+      break;
+    }
+    case "pet": {
+      const char = options.petChar ?? "♥";
+      grants.push({
+        kind: "pet",
+        meta: { design: options.petDesign ?? "coeur", char, position: options.petPosition ?? "left" },
+      });
+      visiblePerkChanged = true;
+      break;
+    }
+    case "ad-frame": {
+      if ((await countActiveEntitlements(ip, "ad-frame")) >= 1)
+        throw new PurchaseError("Tu as déjà un cadre de pub actif", 409);
+      const days = options.durationDays ?? 7;
+      grants.push({
+        kind: "ad-frame",
+        expiresAt: new Date(Date.now() + days * DAY_MS),
+        meta: { format: options.format ?? "static", url: options.url ?? "", days },
+      });
+      break;
+    }
+    case "rich": {
+      const kind = product.id === "rich-js" ? "rich-js" : "rich-htmlcss";
+      if ((await countActiveEntitlements(ip, kind)) >= 1)
+        throw new PurchaseError("Déjà débloqué", 409);
+      grants.push({ kind });
+      break;
+    }
+    case "unlock": {
+      // no-file-limit, element-skin, etc. — slug == kind.
+      if ((await countActiveEntitlements(ip, product.id)) >= 1)
+        throw new PurchaseError("Déjà débloqué", 409);
+      grants.push({ kind: product.id });
+      if (product.id === "element-skin" || product.id === "ip-colors") visiblePerkChanged = false; // viewer-scoped
+      break;
+    }
+    case "consumable": {
+      // audio-alert: grant the entitlement once; firing is a separate action.
+      if ((await countActiveEntitlements(ip, "audio-alert")) < 1) {
+        grants.push({ kind: "audio-alert" });
+      } else {
+        // Already owned — buying again is a harmless top-up; just record it.
+        grants.push({ kind: "audio-alert" });
+      }
+      break;
+    }
+    case "send-skin": {
+      if ((await countActiveEntitlements(ip, product.id)) >= 1)
+        throw new PurchaseError("Déjà débloqué", 409);
+      let skinMeta: any = {};
+      try { skinMeta = product.metaJson ? JSON.parse(product.metaJson) : {}; } catch {}
+      grants.push({ kind: product.id, meta: skinMeta });
+      break;
+    }
+    case "bundle": {
+      // Cosmetic bundle: Style Doré + 1 pet.
+      if ((await countActiveEntitlements(ip, "style-dore")) < 1)
+        grants.push({ kind: "style-dore", meta: { variant: "gold" } });
+      if ((await countActiveEntitlements(ip, "pet")) < 3) {
+        const char = options.petChar ?? "★";
+        grants.push({
+          kind: "pet",
+          meta: { design: options.petDesign ?? "etoile", char, position: options.petPosition ?? "left" },
+        });
+      }
+      if (grants.length === 0)
+        throw new PurchaseError("Tu possèdes déjà ce que contient le pack", 409);
+      visiblePerkChanged = true;
+      break;
+    }
+    default:
+      throw new PurchaseError("Type de produit non géré", 400);
+  }
+
+  // Stock check for limited products (Style Doré). Done transactionally with the
+  // spend so we can never oversell the 50-unit cap under concurrency.
+  let balance = 0;
+  try {
+    balance = await prisma.$transaction(async (tx) => {
+      if (product.stockLimit != null) {
+        const fresh = await tx.product.findUnique({ where: { id: product.id } });
+        if (!fresh) throw new PurchaseError("Produit introuvable", 404);
+        if (fresh.stockLimit != null && fresh.stockSold >= fresh.stockLimit)
+          throw new PurchaseError("Stock épuisé", 409);
+        await tx.product.update({
+          where: { id: product.id },
+          data: { stockSold: { increment: 1 } },
+        });
+      }
+
+      // Spend (skips real deduction for localhost free mode).
+      if (!free && price > 0) {
+        const w = await tx.wallet.upsert({
+          where: { ip },
+          create: { ip, balance: 0 },
+          update: {},
+        });
+        if (w.balance < price) throw new InsufficientCreditsError();
+        const updated = await tx.wallet.update({
+          where: { ip },
+          data: { balance: { decrement: price } },
+        });
+        await tx.purchase.create({
+          data: { ip, type: "purchase", amount: -price, productId: product.id, metaJson: JSON.stringify(options) },
+        });
+        // Grant entitlements inside the tx too.
+        for (const g of grants) {
+          await tx.entitlement.create({
+            data: { ip, kind: g.kind, expiresAt: g.expiresAt ?? null, metaJson: g.meta ? JSON.stringify(g.meta) : null },
+          });
+        }
+        return updated.balance;
+      }
+
+      // Free (localhost) or zero-price: record purchase + grants, no deduction.
+      await tx.purchase.create({
+        data: { ip, type: "purchase", amount: 0, productId: product.id, metaJson: JSON.stringify(options) },
+      });
+      for (const g of grants) {
+        await tx.entitlement.create({
+          data: { ip, kind: g.kind, expiresAt: g.expiresAt ?? null, metaJson: g.meta ? JSON.stringify(g.meta) : null },
+        });
+      }
+      const w = await tx.wallet.findUnique({ where: { ip } });
+      return w?.balance ?? 0;
+    });
+  } catch (e) {
+    if (e instanceof InsufficientCreditsError)
+      throw new PurchaseError("Crédits insuffisants", 402);
+    throw e;
+  }
+
+  // Bump the global credits-spent money counter (outside the tx; best-effort).
+  if (!free && price > 0) {
+    const { redis } = await import("./redis");
+    void redis.incrby("xip:money:credits_spent", price).catch(() => {});
+  }
+
+  // Ad-frame purchase => create a real Ad row that enters rotation (Phase 7).
+  const adGrant = grants.find((g) => g.kind === "ad-frame");
+  if (adGrant) {
+    await prisma.ad
+      .create({
+        data: {
+          brand: "VOTRE PUB",
+          subtitle: "Espace acheté",
+          url: adGrant.meta?.url || null,
+          cta: "VOIR",
+          icon: "📣",
+          tone: "user",
+          kind: "band",
+          weight: 3,
+          active: true,
+          ownerIp: ip,
+          format: adGrant.meta?.format ?? "static",
+          expiresAt: adGrant.expiresAt ?? null,
+        },
+      })
+      .catch(() => {});
+    adCreated = true;
+  }
+
+  const balanceView = free ? (await getWallet(ip)).balance : balance;
+
+  return {
+    result: {
+      ok: true,
+      productId: product.id,
+      pricePaid: free ? 0 : price,
+      balance: balanceView,
+      entitlementKinds: grants.map((g) => g.kind),
+    },
+    visiblePerkChanged,
+    adCreated,
+  };
+}
+
+/** Recompute + cache perks after a purchase (caller broadcasts). */
+export async function refreshPerks(ip: string) {
+  await invalidatePerks(ip);
+  return getPerksForIp(ip);
+}
diff --git a/backend/src/lib/geo.ts b/backend/src/lib/geo.ts
index a4f0f43..fb19998 100644
--- a/backend/src/lib/geo.ts
+++ b/backend/src/lib/geo.ts
@@ -1,95 +1,95 @@
-/**
- * Best-effort IP geolocation using ip-api.com (free, no key required).
- * Results are cached in Redis for 24 h so repeated lookups don't burn the
- * rate-limit (45 req/min on the free tier).
- *
- * Private / loopback addresses always resolve to "Local" without a network call.
- */
-import { redis } from "./redis";
-import { isLocalhost } from "./ip";
-
-export interface GeoInfo {
-  country: string;
-  countryCode: string; // ISO 3166-1 alpha-2, or "" for local
-  city: string;
-  lat?: number;
-  lon?: number;
-}
-
-const GEO_TTL = 60 * 60 * 24; // 24 h
-const geoKey = (ip: string) => `xip:geo:v2:${ip}`;
-
-function isPrivate(ip: string): boolean {
-  if (isLocalhost(ip)) return true;
-  // RFC-1918 private ranges and link-local
-  return (
-    ip.startsWith("10.") ||
-    ip.startsWith("192.168.") ||
-    /^172\.(1[6-9]|2\d|3[01])\./.test(ip) ||
-    ip.startsWith("169.254.") ||
-    ip.startsWith("fc") ||
-    ip.startsWith("fd")
-  );
-}
-
-/** Resolve geo for a batch of IPs. Uses the ip-api.com /batch endpoint.
- *  Private IPs are resolved locally; real IPs are fetched and cached. */
-export async function getGeoForIps(ips: string[]): Promise<Record<string, GeoInfo | null>> {
-  const result: Record<string, GeoInfo | null> = {};
-  const toFetch: string[] = [];
-
-  for (const ip of ips) {
-    if (isPrivate(ip)) {
-      result[ip] = { country: "Local", countryCode: "", city: "" };
-      continue;
-    }
-    const cached = await redis.get(geoKey(ip)).catch(() => null);
-    if (cached) {
-      try {
-        result[ip] = JSON.parse(cached) as GeoInfo;
-        continue;
-      } catch { /* fall through */ }
-    }
-    toFetch.push(ip);
-  }
-
-  if (toFetch.length === 0) return result;
-
-  // Batch lookup via ip-api.com
-  try {
-    const res = await fetch("http://ip-api.com/batch?fields=status,query,country,countryCode,city,lat,lon", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(toFetch.map((ip) => ({ query: ip }))),
-      signal: AbortSignal.timeout(5000),
-    });
-    if (res.ok) {
-      const list = (await res.json()) as any[];
-      for (const item of list) {
-        if (item.status === "success") {
-          const info: GeoInfo = {
-            country: item.country ?? "",
-            countryCode: item.countryCode ?? "",
-            city: item.city ?? "",
-            lat: item.lat,
-            lon: item.lon,
-          };
-          result[item.query] = info;
-          await redis.set(geoKey(item.query), JSON.stringify(info), "EX", GEO_TTL).catch(() => {});
-        } else {
-          result[item.query] = null;
-        }
-      }
-    }
-  } catch {
-    for (const ip of toFetch) if (!(ip in result)) result[ip] = null;
-  }
-
-  return result;
-}
-
-/** Single-IP variant used by the POST /messages broadcast path. */
-export async function getGeoForIp(ip: string): Promise<GeoInfo | null> {
-  const batch = await getGeoForIps([ip]);
-  return batch[ip] ?? null;
-}
+/**
+ * Best-effort IP geolocation using ip-api.com (free, no key required).
+ * Results are cached in Redis for 24 h so repeated lookups don't burn the
+ * rate-limit (45 req/min on the free tier).
+ *
+ * Private / loopback addresses always resolve to "Local" without a network call.
+ */
+import { redis } from "./redis";
+import { isLocalhost } from "./ip";
+
+export interface GeoInfo {
+  country: string;
+  countryCode: string; // ISO 3166-1 alpha-2, or "" for local
+  city: string;
+  lat?: number;
+  lon?: number;
+}
+
+const GEO_TTL = 60 * 60 * 24; // 24 h
+const geoKey = (ip: string) => `xip:geo:v2:${ip}`;
+
+function isPrivate(ip: string): boolean {
+  if (isLocalhost(ip)) return true;
+  // RFC-1918 private ranges and link-local
+  return (
+    ip.startsWith("10.") ||
+    ip.startsWith("192.168.") ||
+    /^172\.(1[6-9]|2\d|3[01])\./.test(ip) ||
+    ip.startsWith("169.254.") ||
+    ip.startsWith("fc") ||
+    ip.startsWith("fd")
+  );
+}
+
+/** Resolve geo for a batch of IPs. Uses the ip-api.com /batch endpoint.
+ *  Private IPs are resolved locally; real IPs are fetched and cached. */
+export async function getGeoForIps(ips: string[]): Promise<Record<string, GeoInfo | null>> {
+  const result: Record<string, GeoInfo | null> = {};
+  const toFetch: string[] = [];
+
+  for (const ip of ips) {
+    if (isPrivate(ip)) {
+      result[ip] = { country: "Local", countryCode: "", city: "" };
+      continue;
+    }
+    const cached = await redis.get(geoKey(ip)).catch(() => null);
+    if (cached) {
+      try {
+        result[ip] = JSON.parse(cached) as GeoInfo;
+        continue;
+      } catch { /* fall through */ }
+    }
+    toFetch.push(ip);
+  }
+
+  if (toFetch.length === 0) return result;
+
+  // Batch lookup via ip-api.com
+  try {
+    const res = await fetch("http://ip-api.com/batch?fields=status,query,country,countryCode,city,lat,lon", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(toFetch.map((ip) => ({ query: ip }))),
+      signal: AbortSignal.timeout(5000),
+    });
+    if (res.ok) {
+      const list = (await res.json()) as any[];
+      for (const item of list) {
+        if (item.status === "success") {
+          const info: GeoInfo = {
+            country: item.country ?? "",
+            countryCode: item.countryCode ?? "",
+            city: item.city ?? "",
+            lat: item.lat,
+            lon: item.lon,
+          };
+          result[item.query] = info;
+          await redis.set(geoKey(item.query), JSON.stringify(info), "EX", GEO_TTL).catch(() => {});
+        } else {
+          result[item.query] = null;
+        }
+      }
+    }
+  } catch {
+    for (const ip of toFetch) if (!(ip in result)) result[ip] = null;
+  }
+
+  return result;
+}
+
+/** Single-IP variant used by the POST /messages broadcast path. */
+export async function getGeoForIp(ip: string): Promise<GeoInfo | null> {
+  const batch = await getGeoForIps([ip]);
+  return batch[ip] ?? null;
+}
diff --git a/backend/src/lib/ip.ts b/backend/src/lib/ip.ts
index df43d95..8a90f0a 100644
--- a/backend/src/lib/ip.ts
+++ b/backend/src/lib/ip.ts
@@ -1,48 +1,48 @@
-import type { Context } from "hono";
-import { getConnInfo } from "hono/bun";
-
-/**
- * Best-effort client IP.
- * Prefer x-forwarded-for (set when behind a proxy), fall back to the raw socket
- * address from Bun. In local dev (frontend:5173 → backend:3000, no proxy) this
- * is typically 127.0.0.1 / ::1.
- */
-export function getClientIp(c: Context): string {
-  const fwd = c.req.header("x-forwarded-for");
-  if (fwd) {
-    const first = fwd.split(",")[0]?.trim();
-    if (first) return first;
-  }
-  try {
-    const addr = getConnInfo(c).remote.address;
-    if (addr) return addr;
-  } catch {
-    /* getConnInfo only works under the Bun adapter */
-  }
-  return "127.0.0.1";
-}
-
-/**
- * Is this IP the local machine? Drives the README rule "si localhost: pas de
- * paywall (tout gratuit)". Covers IPv4 loopback, IPv6 loopback, and the
- * IPv4-mapped-IPv6 form Bun sometimes reports.
- */
-export function isLocalhost(ip: string): boolean {
-  return (
-    ip === "127.0.0.1" ||
-    ip === "::1" ||
-    ip === "::ffff:127.0.0.1" ||
-    ip === "localhost" ||
-    ip.startsWith("127.")
-  );
-}
-
-/**
- * Free mode: the paywall is OFF. True on localhost (README rule "si localhost:
- * pas de paywall"), OR whenever the deployment sets XIP_OPEN_BAR=true — the prod
- * "open bar" where every paid feature is free for everyone. Every paywall gate
- * in the app routes through this single helper.
- */
-export function isFree(ip: string): boolean {
-  return process.env.XIP_OPEN_BAR === "true" || isLocalhost(ip);
-}
+import type { Context } from "hono";
+import { getConnInfo } from "hono/bun";
+
+/**
+ * Best-effort client IP.
+ * Prefer x-forwarded-for (set when behind a proxy), fall back to the raw socket
+ * address from Bun. In local dev (frontend:5173 → backend:3000, no proxy) this
+ * is typically 127.0.0.1 / ::1.
+ */
+export function getClientIp(c: Context): string {
+  const fwd = c.req.header("x-forwarded-for");
+  if (fwd) {
+    const first = fwd.split(",")[0]?.trim();
+    if (first) return first;
+  }
+  try {
+    const addr = getConnInfo(c).remote.address;
+    if (addr) return addr;
+  } catch {
+    /* getConnInfo only works under the Bun adapter */
+  }
+  return "127.0.0.1";
+}
+
+/**
+ * Is this IP the local machine? Drives the README rule "si localhost: pas de
+ * paywall (tout gratuit)". Covers IPv4 loopback, IPv6 loopback, and the
+ * IPv4-mapped-IPv6 form Bun sometimes reports.
+ */
+export function isLocalhost(ip: string): boolean {
+  return (
+    ip === "127.0.0.1" ||
+    ip === "::1" ||
+    ip === "::ffff:127.0.0.1" ||
+    ip === "localhost" ||
+    ip.startsWith("127.")
+  );
+}
+
+/**
+ * Free mode: the paywall is OFF. True on localhost (README rule "si localhost:
+ * pas de paywall"), OR whenever the deployment sets XIP_OPEN_BAR=true — the prod
+ * "open bar" where every paid feature is free for everyone. Every paywall gate
+ * in the app routes through this single helper.
+ */
+export function isFree(ip: string): boolean {
+  return process.env.XIP_OPEN_BAR === "true" || isLocalhost(ip);
+}
diff --git a/backend/src/lib/perks.ts b/backend/src/lib/perks.ts
index c7f4dd1..330fb0a 100644
--- a/backend/src/lib/perks.ts
+++ b/backend/src/lib/perks.ts
@@ -1,130 +1,130 @@
-import { prisma } from "./prisma";
-import { redis } from "./redis";
-
-/**
- * Perks = the visible/functional consequences of an IP's active entitlements.
- *
- *  - skin:  'gold'                       (Style Doré — everyone sees it)
- *  - pets:  [{char, position}]           (Pets de Nom — everyone sees them)
- *  - noads: true                         (NoAds subscription — viewer-scoped)
- *  - badge: true                         (annual NoAds — exclusive badge)
- *  - elementSkin: true                   (one cosmetic element variant — viewer-scoped)
- *  - richHtmlcss / richJs / noFileLimit  (unlocks the composer / upload gate)
- *
- * Cached in Redis (short TTL) and busted on purchase so the feed updates live.
- */
-
-export type PetPosition = "left" | "right" | "both";
-
-export interface Perks {
-  skin?: "gold";
-  pets?: { char: string; position: PetPosition }[];
-  noads?: boolean;
-  badge?: boolean;
-  elementSkin?: boolean;
-  richHtmlcss?: boolean;
-  richJs?: boolean;
-  noFileLimit?: boolean;
-  ipColors?: boolean;
-  audioAlert?: boolean;
-  sendSkins?: { id: string; char: string; label?: string }[];
-}
-
-const perksKey = (ip: string) => `xip:perks:${ip}`;
-const TTL_SEC = 60;
-
-/** Drop the cached perks for an IP. Call BEFORE broadcasting a perks change. */
-export async function invalidatePerks(ip: string): Promise<void> {
-  await redis.del(perksKey(ip)).catch(() => {});
-}
-
-/** Compute perks for one IP from its active, non-expired entitlements. */
-export async function getPerksForIp(ip: string): Promise<Perks> {
-  // Fast path: cache.
-  const cached = await redis.get(perksKey(ip)).catch(() => null);
-  if (cached) {
-    try {
-      return JSON.parse(cached) as Perks;
-    } catch {
-      /* fall through to recompute */
-    }
-  }
-
-  const now = new Date();
-  const rows = await prisma.entitlement
-    .findMany({ where: { ip, active: true } })
-    .catch(() => []);
-
-  const perks: Perks = {};
-  const pets: { char: string; position: PetPosition }[] = [];
-
-  for (const e of rows) {
-    // Skip expired (subscriptions / ad-frames).
-    if (e.expiresAt && e.expiresAt < now) continue;
-    let meta: any = {};
-    try {
-      meta = e.metaJson ? JSON.parse(e.metaJson) : {};
-    } catch {
-      meta = {};
-    }
-
-    switch (e.kind) {
-      case "style-dore":
-        perks.skin = "gold";
-        break;
-      case "pet":
-        if (meta.char) pets.push({ char: meta.char, position: meta.position ?? "left" });
-        break;
-      case "noads":
-        perks.noads = true;
-        if (meta.plan === "annual") perks.badge = true;
-        break;
-      case "element-skin":
-        perks.elementSkin = true;
-        break;
-      case "rich-htmlcss":
-        perks.richHtmlcss = true;
-        break;
-      case "rich-js":
-        perks.richJs = true;
-        break;
-      case "no-file-limit":
-        perks.noFileLimit = true;
-        break;
-      case "ip-colors":
-        perks.ipColors = true;
-        break;
-      case "audio-alert":
-        perks.audioAlert = true;
-        break;
-    }
-
-    // Send-button skins use a prefixed kind (send-skin-rocket, …), so they
-    // can't be matched by the switch above.
-    if (e.kind.startsWith("send-skin-")) {
-      (perks.sendSkins ??= []).push({
-        id: e.kind,
-        char: meta.char ?? "?",
-        label: meta.label,
-      });
-    }
-  }
-  if (pets.length) perks.pets = pets.slice(0, 3);
-
-  await redis.set(perksKey(ip), JSON.stringify(perks), "EX", TTL_SEC).catch(() => {});
-  return perks;
-}
-
-/** Batch perks for several IPs (used to annotate message lists). */
-export async function getPerksForIps(
-  ips: string[]
-): Promise<Record<string, Perks>> {
-  const uniq = [...new Set(ips.filter(Boolean))];
-  const out: Record<string, Perks> = {};
-  await Promise.all(
-    uniq.map(async (ip) => {
-      out[ip] = await getPerksForIp(ip);
-    })
-  );
-  return out;
-}
+import { prisma } from "./prisma";
+import { redis } from "./redis";
+
+/**
+ * Perks = the visible/functional consequences of an IP's active entitlements.
+ *
+ *  - skin:  'gold'                       (Style Doré — everyone sees it)
+ *  - pets:  [{char, position}]           (Pets de Nom — everyone sees them)
+ *  - noads: true                         (NoAds subscription — viewer-scoped)
+ *  - badge: true                         (annual NoAds — exclusive badge)
+ *  - elementSkin: true                   (one cosmetic element variant — viewer-scoped)
+ *  - richHtmlcss / richJs / noFileLimit  (unlocks the composer / upload gate)
+ *
+ * Cached in Redis (short TTL) and busted on purchase so the feed updates live.
+ */
+
+export type PetPosition = "left" | "right" | "both";
+
+export interface Perks {
+  skin?: "gold";
+  pets?: { char: string; position: PetPosition }[];
+  noads?: boolean;
+  badge?: boolean;
+  elementSkin?: boolean;
+  richHtmlcss?: boolean;
+  richJs?: boolean;
+  noFileLimit?: boolean;
+  ipColors?: boolean;
+  audioAlert?: boolean;
+  sendSkins?: { id: string; char: string; label?: string }[];
+}
+
+const perksKey = (ip: string) => `xip:perks:${ip}`;
+const TTL_SEC = 60;
+
+/** Drop the cached perks for an IP. Call BEFORE broadcasting a perks change. */
+export async function invalidatePerks(ip: string): Promise<void> {
+  await redis.del(perksKey(ip)).catch(() => {});
+}
+
+/** Compute perks for one IP from its active, non-expired entitlements. */
+export async function getPerksForIp(ip: string): Promise<Perks> {
+  // Fast path: cache.
+  const cached = await redis.get(perksKey(ip)).catch(() => null);
+  if (cached) {
+    try {
+      return JSON.parse(cached) as Perks;
+    } catch {
+      /* fall through to recompute */
+    }
+  }
+
+  const now = new Date();
+  const rows = await prisma.entitlement
+    .findMany({ where: { ip, active: true } })
+    .catch(() => []);
+
+  const perks: Perks = {};
+  const pets: { char: string; position: PetPosition }[] = [];
+
+  for (const e of rows) {
+    // Skip expired (subscriptions / ad-frames).
+    if (e.expiresAt && e.expiresAt < now) continue;
+    let meta: any = {};
+    try {
+      meta = e.metaJson ? JSON.parse(e.metaJson) : {};
+    } catch {
+      meta = {};
+    }
+
+    switch (e.kind) {
+      case "style-dore":
+        perks.skin = "gold";
+        break;
+      case "pet":
+        if (meta.char) pets.push({ char: meta.char, position: meta.position ?? "left" });
+        break;
+      case "noads":
+        perks.noads = true;
+        if (meta.plan === "annual") perks.badge = true;
+        break;
+      case "element-skin":
+        perks.elementSkin = true;
+        break;
+      case "rich-htmlcss":
+        perks.richHtmlcss = true;
+        break;
+      case "rich-js":
+        perks.richJs = true;
+        break;
+      case "no-file-limit":
+        perks.noFileLimit = true;
+        break;
+      case "ip-colors":
+        perks.ipColors = true;
+        break;
+      case "audio-alert":
+        perks.audioAlert = true;
+        break;
+    }
+
+    // Send-button skins use a prefixed kind (send-skin-rocket, …), so they
+    // can't be matched by the switch above.
+    if (e.kind.startsWith("send-skin-")) {
+      (perks.sendSkins ??= []).push({
+        id: e.kind,
+        char: meta.char ?? "?",
+        label: meta.label,
+      });
+    }
+  }
+  if (pets.length) perks.pets = pets.slice(0, 3);
+
+  await redis.set(perksKey(ip), JSON.stringify(perks), "EX", TTL_SEC).catch(() => {});
+  return perks;
+}
+
+/** Batch perks for several IPs (used to annotate message lists). */
+export async function getPerksForIps(
+  ips: string[]
+): Promise<Record<string, Perks>> {
+  const uniq = [...new Set(ips.filter(Boolean))];
+  const out: Record<string, Perks> = {};
+  await Promise.all(
+    uniq.map(async (ip) => {
+      out[ip] = await getPerksForIp(ip);
+    })
+  );
+  return out;
+}
diff --git a/backend/src/lib/prisma.ts b/backend/src/lib/prisma.ts
index 363adfb..d0ac709 100644
--- a/backend/src/lib/prisma.ts
+++ b/backend/src/lib/prisma.ts
@@ -1,10 +1,10 @@
-import { PrismaClient } from "@prisma/client";
-
-const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
-
-export const prisma =
-  globalForPrisma.prisma ?? new PrismaClient({ log: ["error", "warn"] });
-
-if (process.env.NODE_ENV !== "production") {
-  globalForPrisma.prisma = prisma;
-}
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+export const prisma =
+  globalForPrisma.prisma ?? new PrismaClient({ log: ["error", "warn"] });
+
+if (process.env.NODE_ENV !== "production") {
+  globalForPrisma.prisma = prisma;
+}
diff --git a/backend/src/lib/stats.ts b/backend/src/lib/stats.ts
index 44082e6..1b3d794 100644
--- a/backend/src/lib/stats.ts
+++ b/backend/src/lib/stats.ts
@@ -1,207 +1,207 @@
-import { redis } from "./redis";
-import { prisma } from "./prisma";
-
-/**
- * XIP live stats.
- *
- * Two kinds of metrics:
- *  - PERSISTENT totals, stored in Redis (survive restarts): messages, replies,
- *    characters sent, letters typed (even if never sent), unique IPs, longest message.
- *  - LIVE metrics, kept in process memory (sliding windows): letters/sec, messages/min.
- *
- * The number of connected tabs and the "currently typing" count are owned by the
- * realtime module and injected when building a snapshot.
- */
-
-const K = {
-  messages: "xip:stat:messages",
-  replies: "xip:stat:replies",
-  charsSent: "xip:stat:chars_sent",
-  lettersTyped: "xip:stat:letters_typed",
-  longest: "xip:stat:longest",
-  ips: "xip:hll:ips",
-  initialized: "xip:stat:initialized",
-  creditsSpent: "xip:money:credits_spent", // centi-credits spent (set by wallet/catalog)
-  impressionsTotal: "xip:money:impressions_total", // ad impressions (set by lib/ads)
-} as const;
-
-// Satirical CPM: "€" earned per 1000 ad impressions.
-const FAKE_CPM = 12.5;
-
-// ── Sliding-window live metrics (per process) ──────────────────────────────
-const LETTERS_WINDOW_MS = 4000; // smoothing window for letters/sec
-const MSGS_WINDOW_MS = 60000; // messages per minute
-
-let letterEvents: { ts: number; n: number }[] = [];
-let messageEvents: number[] = [];
-
-function prune(now: number): void {
-  letterEvents = letterEvents.filter((e) => now - e.ts <= LETTERS_WINDOW_MS);
-  messageEvents = messageEvents.filter((ts) => now - ts <= MSGS_WINDOW_MS);
-}
-
-export function getLettersPerSec(): number {
-  const now = Date.now();
-  prune(now);
-  const total = letterEvents.reduce((sum, e) => sum + e.n, 0);
-  return total / (LETTERS_WINDOW_MS / 1000);
-}
-
-export function getMsgsPerMin(): number {
-  const now = Date.now();
-  prune(now);
-  return messageEvents.length;
-}
-
-// ── First-boot backfill ─────────────────────────────────────────────────────
-
-/**
- * Seed the persistent counters from the database the first time the server runs
- * (guarded by a Redis sentinel, so it's a no-op on hot reloads / restarts).
- * Without this, totals would show 0 while seeded messages are already visible.
- * letters_typed is intentionally NOT backfilled — it has no DB source.
- */
-export async function initStats(): Promise<void> {
-  const first = await redis.set(K.initialized, "1", "NX").catch(() => null);
-  if (first !== "OK") return; // already initialized
-
-  try {
-    const rows = await prisma.$queryRaw<
-      { messages: bigint; replies: bigint; chars: bigint; longest: bigint }[]
-    >`
-      SELECT
-        COUNT(*)                                       AS messages,
-        COUNT(*) FILTER (WHERE "parentId" IS NOT NULL) AS replies,
-        COALESCE(SUM(LENGTH(content)), 0)              AS chars,
-        COALESCE(MAX(LENGTH(content)), 0)              AS longest
-      FROM messages
-    `;
-    const r = rows[0];
-    if (r) {
-      const pipe = redis.pipeline();
-      pipe.set(K.messages, String(Number(r.messages)));
-      pipe.set(K.replies, String(Number(r.replies)));
-      pipe.set(K.charsSent, String(Number(r.chars)));
-      pipe.set(K.longest, String(Number(r.longest)));
-      await pipe.exec();
-    }
-
-    const ips = await prisma.message.findMany({
-      distinct: ["authorIp"],
-      select: { authorIp: true },
-    });
-    if (ips.length > 0) {
-      await redis.pfadd(K.ips, ...ips.map((m) => m.authorIp));
-    }
-    console.log("📊  Stats backfilled from database.");
-  } catch (err) {
-    // Non-fatal: release the sentinel so a later boot can retry.
-    await redis.del(K.initialized).catch(() => {});
-    console.warn("⚠️  Stats backfill failed:", (err as Error).message);
-  }
-}
-
-// ── Mutations ──────────────────────────────────────────────────────────────
-
-/** Record a freshly created message (top-level or reply). */
-export async function recordMessage(
-  contentLength: number,
-  isReply: boolean
-): Promise<void> {
-  messageEvents.push(Date.now());
-  const pipe = redis.pipeline();
-  pipe.incr(K.messages);
-  pipe.incrby(K.charsSent, contentLength);
-  if (isReply) pipe.incr(K.replies);
-  // Track longest message (read-modify-write is fine; contention is negligible).
-  pipe.get(K.longest);
-  const res = await pipe.exec().catch(() => null);
-  if (res) {
-    const current = Number(res[res.length - 1]?.[1] ?? 0);
-    if (contentLength > current) {
-      await redis.set(K.longest, String(contentLength)).catch(() => {});
-    }
-  }
-}
-
-/** Record letters typed (sent or not). Feeds both the persistent total and letters/sec. */
-export async function recordLettersTyped(delta: number): Promise<void> {
-  if (!Number.isFinite(delta) || delta <= 0) return;
-  const n = Math.min(delta, 1000); // guard against bogus client payloads
-  letterEvents.push({ ts: Date.now(), n });
-  await redis.incrby(K.lettersTyped, n).catch(() => {});
-}
-
-/** Register an IP in the HyperLogLog of unique visitors. */
-export async function recordIp(ip: string): Promise<void> {
-  if (!ip) return;
-  await redis.pfadd(K.ips, ip).catch(() => {});
-}
-
-// ── Snapshot ─────────────────────────────────────────────────────────────
-
-export interface StatsSnapshot {
-  // live
-  connectedTabs: number;
-  typingNow: number;
-  lettersPerSec: number;
-  msgsPerMin: number;
-  // totals
-  messages: number;
-  replies: number;
-  charsSent: number;
-  lettersTyped: number;
-  uniqueIps: number;
-  longestMsg: number;
-  // derived
-  abandonRate: number; // % of typed letters that were never sent
-  avgLength: number; // average sent-message length
-  moneyExtorted: number; // fake "€": impressions×CPM + credits spent
-}
-
-export async function buildSnapshot(live: {
-  connectedTabs: number;
-  typingNow: number;
-}): Promise<StatsSnapshot> {
-  const [messages, replies, charsSent, lettersTyped, longest, uniqueIps, creditsSpent, impressions] =
-    await Promise.all([
-      redis.get(K.messages).catch(() => "0"),
-      redis.get(K.replies).catch(() => "0"),
-      redis.get(K.charsSent).catch(() => "0"),
-      redis.get(K.lettersTyped).catch(() => "0"),
-      redis.get(K.longest).catch(() => "0"),
-      redis.pfcount(K.ips).catch(() => 0),
-      redis.get(K.creditsSpent).catch(() => "0"),
-      redis.get(K.impressionsTotal).catch(() => "0"),
-    ]);
-
-  const nMessages = Number(messages ?? 0);
-  const nCharsSent = Number(charsSent ?? 0);
-  const nLettersTyped = Number(lettersTyped ?? 0);
-
-  const abandonRate =
-    nLettersTyped > 0
-      ? Math.max(0, Math.min(100, ((nLettersTyped - nCharsSent) / nLettersTyped) * 100))
-      : 0;
-  const avgLength = nMessages > 0 ? nCharsSent / nMessages : 0;
-
-  // Fake revenue: ad impressions × CPM + credits spent (centi-credits → "€").
-  const moneyExtorted =
-    (Number(impressions ?? 0) / 1000) * FAKE_CPM + Number(creditsSpent ?? 0) / 100;
-
-  return {
-    connectedTabs: live.connectedTabs,
-    typingNow: live.typingNow,
-    lettersPerSec: getLettersPerSec(),
-    msgsPerMin: getMsgsPerMin(),
-    messages: nMessages,
-    replies: Number(replies ?? 0),
-    charsSent: nCharsSent,
-    lettersTyped: nLettersTyped,
-    uniqueIps: Number(uniqueIps ?? 0),
-    longestMsg: Number(longest ?? 0),
-    abandonRate,
-    avgLength,
-    moneyExtorted,
-  };
-}
+import { redis } from "./redis";
+import { prisma } from "./prisma";
+
+/**
+ * XIP live stats.
+ *
+ * Two kinds of metrics:
+ *  - PERSISTENT totals, stored in Redis (survive restarts): messages, replies,
+ *    characters sent, letters typed (even if never sent), unique IPs, longest message.
+ *  - LIVE metrics, kept in process memory (sliding windows): letters/sec, messages/min.
+ *
+ * The number of connected tabs and the "currently typing" count are owned by the
+ * realtime module and injected when building a snapshot.
+ */
+
+const K = {
+  messages: "xip:stat:messages",
+  replies: "xip:stat:replies",
+  charsSent: "xip:stat:chars_sent",
+  lettersTyped: "xip:stat:letters_typed",
+  longest: "xip:stat:longest",
+  ips: "xip:hll:ips",
+  initialized: "xip:stat:initialized",
+  creditsSpent: "xip:money:credits_spent", // centi-credits spent (set by wallet/catalog)
+  impressionsTotal: "xip:money:impressions_total", // ad impressions (set by lib/ads)
+} as const;
+
+// Satirical CPM: "€" earned per 1000 ad impressions.
+const FAKE_CPM = 12.5;
+
+// ── Sliding-window live metrics (per process) ──────────────────────────────
+const LETTERS_WINDOW_MS = 4000; // smoothing window for letters/sec
+const MSGS_WINDOW_MS = 60000; // messages per minute
+
+let letterEvents: { ts: number; n: number }[] = [];
+let messageEvents: number[] = [];
+
+function prune(now: number): void {
+  letterEvents = letterEvents.filter((e) => now - e.ts <= LETTERS_WINDOW_MS);
+  messageEvents = messageEvents.filter((ts) => now - ts <= MSGS_WINDOW_MS);
+}
+
+export function getLettersPerSec(): number {
+  const now = Date.now();
+  prune(now);
+  const total = letterEvents.reduce((sum, e) => sum + e.n, 0);
+  return total / (LETTERS_WINDOW_MS / 1000);
+}
+
+export function getMsgsPerMin(): number {
+  const now = Date.now();
+  prune(now);
+  return messageEvents.length;
+}
+
+// ── First-boot backfill ─────────────────────────────────────────────────────
+
+/**
+ * Seed the persistent counters from the database the first time the server runs
+ * (guarded by a Redis sentinel, so it's a no-op on hot reloads / restarts).
+ * Without this, totals would show 0 while seeded messages are already visible.
+ * letters_typed is intentionally NOT backfilled — it has no DB source.
+ */
+export async function initStats(): Promise<void> {
+  const first = await redis.set(K.initialized, "1", "NX").catch(() => null);
+  if (first !== "OK") return; // already initialized
+
+  try {
+    const rows = await prisma.$queryRaw<
+      { messages: bigint; replies: bigint; chars: bigint; longest: bigint }[]
+    >`
+      SELECT
+        COUNT(*)                                       AS messages,
+        COUNT(*) FILTER (WHERE "parentId" IS NOT NULL) AS replies,
+        COALESCE(SUM(LENGTH(content)), 0)              AS chars,
+        COALESCE(MAX(LENGTH(content)), 0)              AS longest
+      FROM messages
+    `;
+    const r = rows[0];
+    if (r) {
+      const pipe = redis.pipeline();
+      pipe.set(K.messages, String(Number(r.messages)));
+      pipe.set(K.replies, String(Number(r.replies)));
+      pipe.set(K.charsSent, String(Number(r.chars)));
+      pipe.set(K.longest, String(Number(r.longest)));
+      await pipe.exec();
+    }
+
+    const ips = await prisma.message.findMany({
+      distinct: ["authorIp"],
+      select: { authorIp: true },
+    });
+    if (ips.length > 0) {
+      await redis.pfadd(K.ips, ...ips.map((m) => m.authorIp));
+    }
+    console.log("📊  Stats backfilled from database.");
+  } catch (err) {
+    // Non-fatal: release the sentinel so a later boot can retry.
+    await redis.del(K.initialized).catch(() => {});
+    console.warn("⚠️  Stats backfill failed:", (err as Error).message);
+  }
+}
+
+// ── Mutations ──────────────────────────────────────────────────────────────
+
+/** Record a freshly created message (top-level or reply). */
+export async function recordMessage(
+  contentLength: number,
+  isReply: boolean
+): Promise<void> {
+  messageEvents.push(Date.now());
+  const pipe = redis.pipeline();
+  pipe.incr(K.messages);
+  pipe.incrby(K.charsSent, contentLength);
+  if (isReply) pipe.incr(K.replies);
+  // Track longest message (read-modify-write is fine; contention is negligible).
+  pipe.get(K.longest);
+  const res = await pipe.exec().catch(() => null);
+  if (res) {
+    const current = Number(res[res.length - 1]?.[1] ?? 0);
+    if (contentLength > current) {
+      await redis.set(K.longest, String(contentLength)).catch(() => {});
+    }
+  }
+}
+
+/** Record letters typed (sent or not). Feeds both the persistent total and letters/sec. */
+export async function recordLettersTyped(delta: number): Promise<void> {
+  if (!Number.isFinite(delta) || delta <= 0) return;
+  const n = Math.min(delta, 1000); // guard against bogus client payloads
+  letterEvents.push({ ts: Date.now(), n });
+  await redis.incrby(K.lettersTyped, n).catch(() => {});
+}
+
+/** Register an IP in the HyperLogLog of unique visitors. */
+export async function recordIp(ip: string): Promise<void> {
+  if (!ip) return;
+  await redis.pfadd(K.ips, ip).catch(() => {});
+}
+
+// ── Snapshot ─────────────────────────────────────────────────────────────
+
+export interface StatsSnapshot {
+  // live
+  connectedTabs: number;
+  typingNow: number;
+  lettersPerSec: number;
+  msgsPerMin: number;
+  // totals
+  messages: number;
+  replies: number;
+  charsSent: number;
+  lettersTyped: number;
+  uniqueIps: number;
+  longestMsg: number;
+  // derived
+  abandonRate: number; // % of typed letters that were never sent
+  avgLength: number; // average sent-message length
+  moneyExtorted: number; // fake "€": impressions×CPM + credits spent
+}
+
+export async function buildSnapshot(live: {
+  connectedTabs: number;
+  typingNow: number;
+}): Promise<StatsSnapshot> {
+  const [messages, replies, charsSent, lettersTyped, longest, uniqueIps, creditsSpent, impressions] =
+    await Promise.all([
+      redis.get(K.messages).catch(() => "0"),
+      redis.get(K.replies).catch(() => "0"),
+      redis.get(K.charsSent).catch(() => "0"),
+      redis.get(K.lettersTyped).catch(() => "0"),
+      redis.get(K.longest).catch(() => "0"),
+      redis.pfcount(K.ips).catch(() => 0),
+      redis.get(K.creditsSpent).catch(() => "0"),
+      redis.get(K.impressionsTotal).catch(() => "0"),
+    ]);
+
+  const nMessages = Number(messages ?? 0);
+  const nCharsSent = Number(charsSent ?? 0);
+  const nLettersTyped = Number(lettersTyped ?? 0);
+
+  const abandonRate =
+    nLettersTyped > 0
+      ? Math.max(0, Math.min(100, ((nLettersTyped - nCharsSent) / nLettersTyped) * 100))
+      : 0;
+  const avgLength = nMessages > 0 ? nCharsSent / nMessages : 0;
+
+  // Fake revenue: ad impressions × CPM + credits spent (centi-credits → "€").
+  const moneyExtorted =
+    (Number(impressions ?? 0) / 1000) * FAKE_CPM + Number(creditsSpent ?? 0) / 100;
+
+  return {
+    connectedTabs: live.connectedTabs,
+    typingNow: live.typingNow,
+    lettersPerSec: getLettersPerSec(),
+    msgsPerMin: getMsgsPerMin(),
+    messages: nMessages,
+    replies: Number(replies ?? 0),
+    charsSent: nCharsSent,
+    lettersTyped: nLettersTyped,
+    uniqueIps: Number(uniqueIps ?? 0),
+    longestMsg: Number(longest ?? 0),
+    abandonRate,
+    avgLength,
+    moneyExtorted,
+  };
+}
diff --git a/backend/src/lib/storage.ts b/backend/src/lib/storage.ts
index 02ff407..5f73442 100644
--- a/backend/src/lib/storage.ts
+++ b/backend/src/lib/storage.ts
@@ -1,48 +1,48 @@
-import { mkdir } from "node:fs/promises";
-import { resolve, extname } from "node:path";
-
-/**
- * Filesystem storage for uploads, under backend/uploads/.
- * Files are stored under a UUID-prefixed name so a malicious client filename
- * can never traverse paths or overwrite another file. The raw bytes are never
- * executed server-side — we only ever read them back to serve downloads.
- */
-
-const UPLOADS_DIR = resolve(import.meta.dir, "../../uploads");
-
-let ensured = false;
-async function ensureDir(): Promise<void> {
-  if (ensured) return;
-  await mkdir(UPLOADS_DIR, { recursive: true });
-  ensured = true;
-}
-
-/** Keep only a safe, short suffix of the original name for readability. */
-function safeSuffix(filename: string): string {
-  const ext = extname(filename).slice(0, 12).replace(/[^a-zA-Z0-9.]/g, "");
-  return ext || "";
-}
-
-export interface StoredFile {
-  storagePath: string; // relative name under uploads/
-  absolutePath: string;
-}
-
-/** Persist a File/Blob, returning its storage path. id should be a fresh uuid. */
-export async function storeFile(id: string, file: File): Promise<StoredFile> {
-  await ensureDir();
-  const name = `${id}${safeSuffix(file.name)}`;
-  const absolutePath = resolve(UPLOADS_DIR, name);
-  // Extra guard: the resolved path must stay inside UPLOADS_DIR.
-  if (!absolutePath.startsWith(UPLOADS_DIR)) {
-    throw new Error("Invalid storage path");
-  }
-  await Bun.write(absolutePath, file);
-  return { storagePath: name, absolutePath };
-}
-
-export function absolutePathFor(storagePath: string): string {
-  const abs = resolve(UPLOADS_DIR, storagePath);
-  if (!abs.startsWith(UPLOADS_DIR)) throw new Error("Invalid storage path");
-  return abs;
-}
+import { mkdir } from "node:fs/promises";
+import { resolve, extname } from "node:path";
+
+/**
+ * Filesystem storage for uploads, under backend/uploads/.
+ * Files are stored under a UUID-prefixed name so a malicious client filename
+ * can never traverse paths or overwrite another file. The raw bytes are never
+ * executed server-side — we only ever read them back to serve downloads.
+ */
+
+const UPLOADS_DIR = resolve(import.meta.dir, "../../uploads");
+
+let ensured = false;
+async function ensureDir(): Promise<void> {
+  if (ensured) return;
+  await mkdir(UPLOADS_DIR, { recursive: true });
+  ensured = true;
+}
+
+/** Keep only a safe, short suffix of the original name for readability. */
+function safeSuffix(filename: string): string {
+  const ext = extname(filename).slice(0, 12).replace(/[^a-zA-Z0-9.]/g, "");
+  return ext || "";
+}
+
+export interface StoredFile {
+  storagePath: string; // relative name under uploads/
+  absolutePath: string;
+}
+
+/** Persist a File/Blob, returning its storage path. id should be a fresh uuid. */
+export async function storeFile(id: string, file: File): Promise<StoredFile> {
+  await ensureDir();
+  const name = `${id}${safeSuffix(file.name)}`;
+  const absolutePath = resolve(UPLOADS_DIR, name);
+  // Extra guard: the resolved path must stay inside UPLOADS_DIR.
+  if (!absolutePath.startsWith(UPLOADS_DIR)) {
+    throw new Error("Invalid storage path");
+  }
+  await Bun.write(absolutePath, file);
+  return { storagePath: name, absolutePath };
+}
+
+export function absolutePathFor(storagePath: string): string {
+  const abs = resolve(UPLOADS_DIR, storagePath);
+  if (!abs.startsWith(UPLOADS_DIR)) throw new Error("Invalid storage path");
+  return abs;
+}
diff --git a/backend/src/lib/wallet.ts b/backend/src/lib/wallet.ts
index 246d059..c2de4c5 100644
--- a/backend/src/lib/wallet.ts
+++ b/backend/src/lib/wallet.ts
@@ -1,127 +1,127 @@
-import { prisma } from "./prisma";
-import { redis } from "./redis";
-import { isFree } from "./ip";
-
-/**
- * Wallet engine — fictional "crédits XIP", keyed on IP (no accounts).
- *
- * Amounts are integer CENTI-CREDITS to avoid float drift (display divides by 100).
- * So 9.99 "crédits" is stored as 999.
- *
- * `spend()` is the single choke point for every paid action: it enforces the
- * balance and is the one place the localhost "free mode" bypass lives.
- */
-
-// Starting grant on first wallet touch, and the free top-up button amount.
-export const SIGNUP_GRANT = 0;
-export const TOPUP_AMOUNT = 5000; // 50.00 crédits per free top-up
-
-// Sentinel reported as the balance for localhost (rendered as "∞" by the UI).
-export const INFINITE = Number.MAX_SAFE_INTEGER;
-
-// Redis keys (mirror + global money counter).
-const walletKey = (ip: string) => `xip:wallet:${ip}`;
-const CREDITS_SPENT = "xip:money:credits_spent";
-
-export interface WalletView {
-  ip: string;
-  balance: number; // centi-credits (or INFINITE for free mode)
-  freeMode: boolean;
-}
-
-/** Lazily create the wallet row (with the signup grant) the first time we touch an IP. */
-export async function ensureWallet(ip: string): Promise<void> {
-  await prisma.wallet
-    .upsert({
-      where: { ip },
-      create: { ip, balance: SIGNUP_GRANT },
-      update: {},
-    })
-    .catch(() => {});
-}
-
-export async function getWallet(ip: string): Promise<WalletView> {
-  if (isFree(ip)) return { ip, balance: INFINITE, freeMode: true };
-  await ensureWallet(ip);
-  const w = await prisma.wallet.findUnique({ where: { ip } }).catch(() => null);
-  const balance = w?.balance ?? 0;
-  void redis.set(walletKey(ip), String(balance)).catch(() => {});
-  return { ip, balance, freeMode: false };
-}
-
-/** Free, instant, satirical top-up. No-op for localhost (already infinite). */
-export async function topUp(ip: string, amount = TOPUP_AMOUNT): Promise<WalletView> {
-  if (isFree(ip)) return { ip, balance: INFINITE, freeMode: true };
-  await ensureWallet(ip);
-  const w = await prisma.wallet.update({
-    where: { ip },
-    data: { balance: { increment: amount } },
-  });
-  await prisma.purchase
-    .create({ data: { ip, type: "topup", amount } })
-    .catch(() => {});
-  void redis.set(walletKey(ip), String(w.balance)).catch(() => {});
-  return { ip, balance: w.balance, freeMode: false };
-}
-
-export class InsufficientCreditsError extends Error {
-  constructor() {
-    super("Crédits insuffisants");
-    this.name = "InsufficientCreditsError";
-  }
-}
-
-/**
- * Atomically spend credits. Returns the new balance.
- * - localhost => free mode: records nothing, returns INFINITE.
- * - otherwise: transactional re-read + guard + decrement + ledger row.
- * Throws InsufficientCreditsError if the balance can't cover `amount`.
- */
-export async function spend(
-  ip: string,
-  amount: number,
-  reason: string,
-  meta?: Record<string, unknown>
-): Promise<number> {
-  if (isFree(ip)) return INFINITE;
-  if (amount <= 0) {
-    // Free item — still record the (zero) purchase for history, no balance change.
-    const w = await getWallet(ip);
-    await prisma.purchase
-      .create({
-        data: { ip, type: "purchase", amount: 0, productId: reason, metaJson: meta ? JSON.stringify(meta) : null },
-      })
-      .catch(() => {});
-    return w.balance;
-  }
-
-  const newBalance = await prisma.$transaction(async (tx) => {
-    await tx.wallet.upsert({
-      where: { ip },
-      create: { ip, balance: SIGNUP_GRANT },
-      update: {},
-    });
-    const w = await tx.wallet.findUnique({ where: { ip } });
-    const current = w?.balance ?? 0;
-    if (current < amount) throw new InsufficientCreditsError();
-    const updated = await tx.wallet.update({
-      where: { ip },
-      data: { balance: { decrement: amount } },
-    });
-    await tx.purchase.create({
-      data: {
-        ip,
-        type: "purchase",
-        amount: -amount,
-        productId: reason,
-        metaJson: meta ? JSON.stringify(meta) : null,
-      },
-    });
-    return updated.balance;
-  });
-
-  // Mirror to Redis + bump the global "credits spent" money counter.
-  void redis.set(walletKey(ip), String(newBalance)).catch(() => {});
-  void redis.incrby(CREDITS_SPENT, amount).catch(() => {});
-  return newBalance;
-}
+import { prisma } from "./prisma";
+import { redis } from "./redis";
+import { isFree } from "./ip";
+
+/**
+ * Wallet engine — fictional "crédits XIP", keyed on IP (no accounts).
+ *
+ * Amounts are integer CENTI-CREDITS to avoid float drift (display divides by 100).
+ * So 9.99 "crédits" is stored as 999.
+ *
+ * `spend()` is the single choke point for every paid action: it enforces the
+ * balance and is the one place the localhost "free mode" bypass lives.
+ */
+
+// Starting grant on first wallet touch, and the free top-up button amount.
+export const SIGNUP_GRANT = 0;
+export const TOPUP_AMOUNT = 5000; // 50.00 crédits per free top-up
+
+// Sentinel reported as the balance for localhost (rendered as "∞" by the UI).
+export const INFINITE = Number.MAX_SAFE_INTEGER;
+
+// Redis keys (mirror + global money counter).
+const walletKey = (ip: string) => `xip:wallet:${ip}`;
+const CREDITS_SPENT = "xip:money:credits_spent";
+
+export interface WalletView {
+  ip: string;
+  balance: number; // centi-credits (or INFINITE for free mode)
+  freeMode: boolean;
+}
+
+/** Lazily create the wallet row (with the signup grant) the first time we touch an IP. */
+export async function ensureWallet(ip: string): Promise<void> {
+  await prisma.wallet
+    .upsert({
+      where: { ip },
+      create: { ip, balance: SIGNUP_GRANT },
+      update: {},
+    })
+    .catch(() => {});
+}
+
+export async function getWallet(ip: string): Promise<WalletView> {
+  if (isFree(ip)) return { ip, balance: INFINITE, freeMode: true };
+  await ensureWallet(ip);
+  const w = await prisma.wallet.findUnique({ where: { ip } }).catch(() => null);
+  const balance = w?.balance ?? 0;
+  void redis.set(walletKey(ip), String(balance)).catch(() => {});
+  return { ip, balance, freeMode: false };
+}
+
+/** Free, instant, satirical top-up. No-op for localhost (already infinite). */
+export async function topUp(ip: string, amount = TOPUP_AMOUNT): Promise<WalletView> {
+  if (isFree(ip)) return { ip, balance: INFINITE, freeMode: true };
+  await ensureWallet(ip);
+  const w = await prisma.wallet.update({
+    where: { ip },
+    data: { balance: { increment: amount } },
+  });
+  await prisma.purchase
+    .create({ data: { ip, type: "topup", amount } })
+    .catch(() => {});
+  void redis.set(walletKey(ip), String(w.balance)).catch(() => {});
+  return { ip, balance: w.balance, freeMode: false };
+}
+
+export class InsufficientCreditsError extends Error {
+  constructor() {
+    super("Crédits insuffisants");
+    this.name = "InsufficientCreditsError";
+  }
+}
+
+/**
+ * Atomically spend credits. Returns the new balance.
+ * - localhost => free mode: records nothing, returns INFINITE.
+ * - otherwise: transactional re-read + guard + decrement + ledger row.
+ * Throws InsufficientCreditsError if the balance can't cover `amount`.
+ */
+export async function spend(
+  ip: string,
+  amount: number,
+  reason: string,
+  meta?: Record<string, unknown>
+): Promise<number> {
+  if (isFree(ip)) return INFINITE;
+  if (amount <= 0) {
+    // Free item — still record the (zero) purchase for history, no balance change.
+    const w = await getWallet(ip);
+    await prisma.purchase
+      .create({
+        data: { ip, type: "purchase", amount: 0, productId: reason, metaJson: meta ? JSON.stringify(meta) : null },
+      })
+      .catch(() => {});
+    return w.balance;
+  }
+
+  const newBalance = await prisma.$transaction(async (tx) => {
+    await tx.wallet.upsert({
+      where: { ip },
+      create: { ip, balance: SIGNUP_GRANT },
+      update: {},
+    });
+    const w = await tx.wallet.findUnique({ where: { ip } });
+    const current = w?.balance ?? 0;
+    if (current < amount) throw new InsufficientCreditsError();
+    const updated = await tx.wallet.update({
+      where: { ip },
+      data: { balance: { decrement: amount } },
+    });
+    await tx.purchase.create({
+      data: {
+        ip,
+        type: "purchase",
+        amount: -amount,
+        productId: reason,
+        metaJson: meta ? JSON.stringify(meta) : null,
+      },
+    });
+    return updated.balance;
+  });
+
+  // Mirror to Redis + bump the global "credits spent" money counter.
+  void redis.set(walletKey(ip), String(newBalance)).catch(() => {});
+  void redis.incrby(CREDITS_SPENT, amount).catch(() => {});
+  return newBalance;
+}
diff --git a/backend/src/realtime.ts b/backend/src/realtime.ts
index f2834fa..74c56c1 100644
--- a/backend/src/realtime.ts
+++ b/backend/src/realtime.ts
@@ -1,147 +1,147 @@
-import { createBunWebSocket } from "hono/bun";
-import type { WSContext } from "hono/ws";
-import { buildSnapshot, recordLettersTyped } from "./lib/stats";
-import { getClientIp } from "./lib/ip";
-
-/**
- * Realtime hub: one WebSocket connection = one open tab.
- *
- *  - Broadcasts a throttled stats snapshot to every tab.
- *  - Broadcasts newly created messages so feeds update without polling.
- *  - Tracks "currently typing" presence and feeds the global letters-typed counter.
- *  - Knows each socket's client IP, so it can push wallet/perks frames to just
- *    that IP's tabs (broadcastToIp) or to everyone (broadcast).
- *
- * The Hono Bun adapter calls the events factory with the request Context, so we
- * derive the IP once per connection in the factory and stash it in ClientState.
- */
-
-const { upgradeWebSocket, websocket } = createBunWebSocket();
-
-interface ClientState {
-  lastTypingAt: number;
-  ip: string;
-}
-
-const clients = new Map<WSContext, ClientState>();
-
-const TYPING_TTL_MS = 2500; // a tab counts as "typing" for this long after a keystroke
-const BROADCAST_MIN_INTERVAL_MS = 250; // throttle: at most one stats frame this often
-
-function countTyping(now: number): number {
-  let n = 0;
-  for (const s of clients.values()) {
-    if (now - s.lastTypingAt <= TYPING_TTL_MS) n++;
-  }
-  return n;
-}
-
-function send(ws: WSContext, payload: string): void {
-  // readyState 1 === OPEN
-  if (ws.readyState === 1) {
-    try {
-      ws.send(payload);
-    } catch {
-      /* ignore broken pipe */
-    }
-  }
-}
-
-// ── Throttled stats broadcast ──────────────────────────────────────────────
-let broadcastScheduled = false;
-let lastBroadcastAt = 0;
-
-async function flushStats(): Promise<void> {
-  broadcastScheduled = false;
-  lastBroadcastAt = Date.now();
-  if (clients.size === 0) return;
-  const distinctIps = new Set<string>();
-  for (const s of clients.values()) distinctIps.add(s.ip);
-  const snapshot = await buildSnapshot({
-    connectedTabs: distinctIps.size,
-    typingNow: countTyping(Date.now()),
-  });
-  const payload = JSON.stringify({ type: "stats", data: snapshot });
-  for (const ws of clients.keys()) send(ws, payload);
-}
-
-function scheduleStats(): void {
-  if (broadcastScheduled) return;
-  broadcastScheduled = true;
-  const wait = Math.max(0, BROADCAST_MIN_INTERVAL_MS - (Date.now() - lastBroadcastAt));
-  setTimeout(() => {
-    void flushStats();
-  }, wait);
-}
-
-// Periodic tick so time-decaying metrics (letters/sec, typing expiry, msgs/min)
-// keep updating even when nobody is interacting.
-setInterval(() => {
-  if (clients.size > 0) void flushStats();
-}, 1000);
-
-// Periodic console log of connected IPs (every 10 s).
-setInterval(() => {
-  if (clients.size === 0) return;
-  const ips = new Set<string>();
-  for (const s of clients.values()) ips.add(s.ip);
-  const lines = [...ips].map((ip) => `  ${ip}`).join("\n");
-  console.log(`[connectés] ${ips.size} IP(s):\n${lines}`);
-}, 10_000);
-
-/** Send an arbitrary frame to every connected tab. */
-export function broadcast(payload: object): void {
-  const str = JSON.stringify(payload);
-  for (const ws of clients.keys()) send(ws, str);
-}
-
-/** Send a frame only to the tabs belonging to one IP (e.g. wallet updates). */
-export function broadcastToIp(ip: string, payload: object): void {
-  const str = JSON.stringify(payload);
-  for (const [ws, state] of clients) {
-    if (state.ip === ip) send(ws, str);
-  }
-}
-
-/** Push a freshly created message to every connected tab. */
-export function broadcastNewMessage(message: unknown): void {
-  broadcast({ type: "message", data: message });
-  scheduleStats(); // totals changed too
-}
-
-/** Hono route handler for GET /ws. The factory receives the request Context. */
-export const wsHandler = upgradeWebSocket((c) => {
-  const ip = getClientIp(c);
-  return {
-    onOpen(_evt, ws) {
-      clients.set(ws, { lastTypingAt: 0, ip });
-      scheduleStats();
-    },
-    onMessage(evt, ws) {
-      let msg: { type?: string; delta?: number } | null = null;
-      try {
-        msg = JSON.parse(typeof evt.data === "string" ? evt.data : "{}");
-      } catch {
-        return;
-      }
-      if (!msg || typeof msg !== "object") return;
-
-      if (msg.type === "typing") {
-        const state = clients.get(ws);
-        if (state) state.lastTypingAt = Date.now();
-        const delta = Number(msg.delta) || 0;
-        if (delta > 0) void recordLettersTyped(delta);
-        scheduleStats();
-      }
-    },
-    onClose(_evt, ws) {
-      clients.delete(ws);
-      scheduleStats();
-    },
-    onError(_evt, ws) {
-      clients.delete(ws);
-    },
-  };
-});
-
-export { websocket };
+import { createBunWebSocket } from "hono/bun";
+import type { WSContext } from "hono/ws";
+import { buildSnapshot, recordLettersTyped } from "./lib/stats";
+import { getClientIp } from "./lib/ip";
+
+/**
+ * Realtime hub: one WebSocket connection = one open tab.
+ *
+ *  - Broadcasts a throttled stats snapshot to every tab.
+ *  - Broadcasts newly created messages so feeds update without polling.
+ *  - Tracks "currently typing" presence and feeds the global letters-typed counter.
+ *  - Knows each socket's client IP, so it can push wallet/perks frames to just
+ *    that IP's tabs (broadcastToIp) or to everyone (broadcast).
+ *
+ * The Hono Bun adapter calls the events factory with the request Context, so we
+ * derive the IP once per connection in the factory and stash it in ClientState.
+ */
+
+const { upgradeWebSocket, websocket } = createBunWebSocket();
+
+interface ClientState {
+  lastTypingAt: number;
+  ip: string;
+}
+
+const clients = new Map<WSContext, ClientState>();
+
+const TYPING_TTL_MS = 2500; // a tab counts as "typing" for this long after a keystroke
+const BROADCAST_MIN_INTERVAL_MS = 250; // throttle: at most one stats frame this often
+
+function countTyping(now: number): number {
+  let n = 0;
+  for (const s of clients.values()) {
+    if (now - s.lastTypingAt <= TYPING_TTL_MS) n++;
+  }
+  return n;
+}
+
+function send(ws: WSContext, payload: string): void {
+  // readyState 1 === OPEN
+  if (ws.readyState === 1) {
+    try {
+      ws.send(payload);
+    } catch {
+      /* ignore broken pipe */
+    }
+  }
+}
+
+// ── Throttled stats broadcast ──────────────────────────────────────────────
+let broadcastScheduled = false;
+let lastBroadcastAt = 0;
+
+async function flushStats(): Promise<void> {
+  broadcastScheduled = false;
+  lastBroadcastAt = Date.now();
+  if (clients.size === 0) return;
+  const distinctIps = new Set<string>();
+  for (const s of clients.values()) distinctIps.add(s.ip);
+  const snapshot = await buildSnapshot({
+    connectedTabs: distinctIps.size,
+    typingNow: countTyping(Date.now()),
+  });
+  const payload = JSON.stringify({ type: "stats", data: snapshot });
+  for (const ws of clients.keys()) send(ws, payload);
+}
+
+function scheduleStats(): void {
+  if (broadcastScheduled) return;
+  broadcastScheduled = true;
+  const wait = Math.max(0, BROADCAST_MIN_INTERVAL_MS - (Date.now() - lastBroadcastAt));
+  setTimeout(() => {
+    void flushStats();
+  }, wait);
+}
+
+// Periodic tick so time-decaying metrics (letters/sec, typing expiry, msgs/min)
+// keep updating even when nobody is interacting.
+setInterval(() => {
+  if (clients.size > 0) void flushStats();
+}, 1000);
+
+// Periodic console log of connected IPs (every 10 s).
+setInterval(() => {
+  if (clients.size === 0) return;
+  const ips = new Set<string>();
+  for (const s of clients.values()) ips.add(s.ip);
+  const lines = [...ips].map((ip) => `  ${ip}`).join("\n");
+  console.log(`[connectés] ${ips.size} IP(s):\n${lines}`);
+}, 10_000);
+
+/** Send an arbitrary frame to every connected tab. */
+export function broadcast(payload: object): void {
+  const str = JSON.stringify(payload);
+  for (const ws of clients.keys()) send(ws, str);
+}
+
+/** Send a frame only to the tabs belonging to one IP (e.g. wallet updates). */
+export function broadcastToIp(ip: string, payload: object): void {
+  const str = JSON.stringify(payload);
+  for (const [ws, state] of clients) {
+    if (state.ip === ip) send(ws, str);
+  }
+}
+
+/** Push a freshly created message to every connected tab. */
+export function broadcastNewMessage(message: unknown): void {
+  broadcast({ type: "message", data: message });
+  scheduleStats(); // totals changed too
+}
+
+/** Hono route handler for GET /ws. The factory receives the request Context. */
+export const wsHandler = upgradeWebSocket((c) => {
+  const ip = getClientIp(c);
+  return {
+    onOpen(_evt, ws) {
+      clients.set(ws, { lastTypingAt: 0, ip });
+      scheduleStats();
+    },
+    onMessage(evt, ws) {
+      let msg: { type?: string; delta?: number } | null = null;
+      try {
+        msg = JSON.parse(typeof evt.data === "string" ? evt.data : "{}");
+      } catch {
+        return;
+      }
+      if (!msg || typeof msg !== "object") return;
+
+      if (msg.type === "typing") {
+        const state = clients.get(ws);
+        if (state) state.lastTypingAt = Date.now();
+        const delta = Number(msg.delta) || 0;
+        if (delta > 0) void recordLettersTyped(delta);
+        scheduleStats();
+      }
+    },
+    onClose(_evt, ws) {
+      clients.delete(ws);
+      scheduleStats();
+    },
+    onError(_evt, ws) {
+      clients.delete(ws);
+    },
+  };
+});
+
+export { websocket };
diff --git a/backend/src/routes/ads.ts b/backend/src/routes/ads.ts
index 2790ae4..38b0ef1 100644
--- a/backend/src/routes/ads.ts
+++ b/backend/src/routes/ads.ts
@@ -1,40 +1,40 @@
-import { Hono } from "hono";
-import { listActiveAds, recordImpressions } from "../lib/ads";
-
-const ads = new Hono();
-
-// GET /api/ads?kind=band  → active ad set for that slot (client rotates).
-ads.get("/", async (c) => {
-  const kind = c.req.query("kind") === "casino" ? "casino" : "band";
-  const list = await listActiveAds(kind);
-  // Expose only what the UI needs.
-  return c.json(
-    list.map((a) => ({
-      id: a.id,
-      brand: a.brand,
-      subtitle: a.subtitle,
-      url: a.url,
-      cta: a.cta,
-      icon: a.icon,
-      tone: a.tone,
-      kind: a.kind,
-      ownerIp: a.ownerIp,
-      imageUrl: a.imageUrl,
-    }))
-  );
-});
-
-// POST /api/ads/impressions  { ids: [...] }
-ads.post("/impressions", async (c) => {
-  let body: { ids?: string[] } = {};
-  try {
-    body = await c.req.json();
-  } catch {
-    return c.json({ error: "JSON invalide" }, 400);
-  }
-  const ids = Array.isArray(body.ids) ? body.ids.filter((x) => typeof x === "string") : [];
-  await recordImpressions(ids);
-  return c.json({ ok: true, counted: ids.length });
-});
-
-export default ads;
+import { Hono } from "hono";
+import { listActiveAds, recordImpressions } from "../lib/ads";
+
+const ads = new Hono();
+
+// GET /api/ads?kind=band  → active ad set for that slot (client rotates).
+ads.get("/", async (c) => {
+  const kind = c.req.query("kind") === "casino" ? "casino" : "band";
+  const list = await listActiveAds(kind);
+  // Expose only what the UI needs.
+  return c.json(
+    list.map((a) => ({
+      id: a.id,
+      brand: a.brand,
+      subtitle: a.subtitle,
+      url: a.url,
+      cta: a.cta,
+      icon: a.icon,
+      tone: a.tone,
+      kind: a.kind,
+      ownerIp: a.ownerIp,
+      imageUrl: a.imageUrl,
+    }))
+  );
+});
+
+// POST /api/ads/impressions  { ids: [...] }
+ads.post("/impressions", async (c) => {
+  let body: { ids?: string[] } = {};
+  try {
+    body = await c.req.json();
+  } catch {
+    return c.json({ error: "JSON invalide" }, 400);
+  }
+  const ids = Array.isArray(body.ids) ? body.ids.filter((x) => typeof x === "string") : [];
+  await recordImpressions(ids);
+  return c.json({ ok: true, counted: ids.length });
+});
+
+export default ads;
diff --git a/backend/src/routes/alert.ts b/backend/src/routes/alert.ts
index 48eb30a..c033d37 100644
--- a/backend/src/routes/alert.ts
+++ b/backend/src/routes/alert.ts
@@ -1,67 +1,67 @@
-import { Hono } from "hono";
-import { getClientIp, isFree } from "../lib/ip";
-import { prisma } from "../lib/prisma";
-import { redis } from "../lib/redis";
-import { spend } from "../lib/wallet";
-import { broadcast } from "../realtime";
-
-const alert = new Hono();
-
-const COOLDOWN_MS = 60_000; // server-enforced global cooldown
-const MAX_DURATION_MS = 5_000; // server clamps how long the sound may play
-const ALERT_PRICE = 999; // centi-credits per fire (consumable)
-const COOLDOWN_KEY = "xip:alert:cooldown";
-
-// POST /api/alert  { soundUrl? }
-alert.post("/", async (c) => {
-  const ip = getClientIp(c);
-
-  let body: { soundUrl?: string } = {};
-  try {
-    body = await c.req.json();
-  } catch {
-    /* no body is fine */
-  }
-
-  // Must own the audio-alert entitlement (localhost bypasses).
-  if (!isFree(ip)) {
-    const owned = await prisma.entitlement.findFirst({
-      where: { ip, kind: "audio-alert", active: true },
-    });
-    if (!owned) {
-      return c.json({ error: "Débloque l'alerte audio dans le Shop" }, 402);
-    }
-  }
-
-  // Global cooldown via Redis NX+PX.
-  const ok = await redis
-    .set(COOLDOWN_KEY, ip, "PX", COOLDOWN_MS, "NX")
-    .catch(() => null);
-  if (ok !== "OK") {
-    const ttl = await redis.pttl(COOLDOWN_KEY).catch(() => 0);
-    return c.json({ error: "Cooldown actif", retryInMs: Math.max(0, ttl) }, 429);
-  }
-
-  // Charge the consumable (skipped for localhost free mode).
-  try {
-    await spend(ip, ALERT_PRICE, "audio-alert");
-  } catch {
-    await redis.del(COOLDOWN_KEY).catch(() => {});
-    return c.json({ error: "Crédits insuffisants" }, 402);
-  }
-
-  // Validate a supplied mp3 URL (must be one of our own /api/uploads/ paths).
-  let soundUrl: string | undefined;
-  if (typeof body.soundUrl === "string" && body.soundUrl.includes("/api/uploads/")) {
-    soundUrl = body.soundUrl;
-  }
-
-  broadcast({
-    type: "alert",
-    data: { ip, soundUrl, maxDurationMs: MAX_DURATION_MS, volume: 1 },
-  });
-
-  return c.json({ ok: true });
-});
-
-export default alert;
+import { Hono } from "hono";
+import { getClientIp, isFree } from "../lib/ip";
+import { prisma } from "../lib/prisma";
+import { redis } from "../lib/redis";
+import { spend } from "../lib/wallet";
+import { broadcast } from "../realtime";
+
+const alert = new Hono();
+
+const COOLDOWN_MS = 60_000; // server-enforced global cooldown
+const MAX_DURATION_MS = 5_000; // server clamps how long the sound may play
+const ALERT_PRICE = 999; // centi-credits per fire (consumable)
+const COOLDOWN_KEY = "xip:alert:cooldown";
+
+// POST /api/alert  { soundUrl? }
+alert.post("/", async (c) => {
+  const ip = getClientIp(c);
+
+  let body: { soundUrl?: string } = {};
+  try {
+    body = await c.req.json();
+  } catch {
+    /* no body is fine */
+  }
+
+  // Must own the audio-alert entitlement (localhost bypasses).
+  if (!isFree(ip)) {
+    const owned = await prisma.entitlement.findFirst({
+      where: { ip, kind: "audio-alert", active: true },
+    });
+    if (!owned) {
+      return c.json({ error: "Débloque l'alerte audio dans le Shop" }, 402);
+    }
+  }
+
+  // Global cooldown via Redis NX+PX.
+  const ok = await redis
+    .set(COOLDOWN_KEY, ip, "PX", COOLDOWN_MS, "NX")
+    .catch(() => null);
+  if (ok !== "OK") {
+    const ttl = await redis.pttl(COOLDOWN_KEY).catch(() => 0);
+    return c.json({ error: "Cooldown actif", retryInMs: Math.max(0, ttl) }, 429);
+  }
+
+  // Charge the consumable (skipped for localhost free mode).
+  try {
+    await spend(ip, ALERT_PRICE, "audio-alert");
+  } catch {
+    await redis.del(COOLDOWN_KEY).catch(() => {});
+    return c.json({ error: "Crédits insuffisants" }, 402);
+  }
+
+  // Validate a supplied mp3 URL (must be one of our own /api/uploads/ paths).
+  let soundUrl: string | undefined;
+  if (typeof body.soundUrl === "string" && body.soundUrl.includes("/api/uploads/")) {
+    soundUrl = body.soundUrl;
+  }
+
+  broadcast({
+    type: "alert",
+    data: { ip, soundUrl, maxDurationMs: MAX_DURATION_MS, volume: 1 },
+  });
+
+  return c.json({ ok: true });
+});
+
+export default alert;
diff --git a/backend/src/routes/messages.ts b/backend/src/routes/messages.ts
index 429f185..f759370 100644
--- a/backend/src/routes/messages.ts
+++ b/backend/src/routes/messages.ts
@@ -1,142 +1,188 @@
-import { Hono } from "hono";
-import { prisma } from "../lib/prisma";
-import { getClientIp, isFree } from "../lib/ip";
-import { recordMessage } from "../lib/stats";
-import { broadcastNewMessage } from "../realtime";
-import { getPerksForIp, getPerksForIps } from "../lib/perks";
-import { getGeoForIp, getGeoForIps } from "../lib/geo";
-
-const messages = new Hono();
-
-const RICH_MAX = 64 * 1024; // 64 KB cap on rich markup
-
-/** Does this IP own the entitlement needed for a rich tier? */
-async function ownsRich(ip: string, mode: "htmlcss" | "js"): Promise<boolean> {
-  if (isFree(ip)) return true;
-  const kind = mode === "js" ? "rich-js" : "rich-htmlcss";
-  const now = new Date();
-  const rows = await prisma.entitlement.findMany({ where: { ip, kind, active: true } });
-  return rows.some((e) => !e.expiresAt || e.expiresAt >= now);
-}
-
-// GET /api/messages — top-level threads with replies, annotated with author perks.
-messages.get("/", async (c) => {
-  const data = await prisma.message.findMany({
-    where: { parentId: null },
-    orderBy: { createdAt: "desc" },
-    take: 50,
-    include: {
-      attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
-      replies: {
-        orderBy: { createdAt: "asc" },
-        include: {
-          attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
-        },
-      },
-    },
-  });
-
-  // Collect every distinct author IP (threads + replies) and resolve perks once.
-  const ips = new Set<string>();
-  for (const m of data) {
-    ips.add(m.authorIp);
-    for (const r of m.replies) ips.add(r.authorIp);
-  }
-  const [perks, geo] = await Promise.all([
-    getPerksForIps([...ips]),
-    getGeoForIps([...ips]),
-  ]);
-
-  const annotated = data.map((m) => ({
-    ...m,
-    authorPerks: perks[m.authorIp] ?? {},
-    authorGeo: geo[m.authorIp] ?? null,
-    replies: m.replies.map((r) => ({
-      ...r,
-      authorPerks: perks[r.authorIp] ?? {},
-      authorGeo: geo[r.authorIp] ?? null,
-    })),
-  }));
-
-  return c.json(annotated);
-});
-
-// POST /api/messages — create a message or reply (optionally rich + attachments)
-messages.post("/", async (c) => {
-  const ip = getClientIp(c);
-
-  const body = await c.req.json<{
-    content?: string;
-    parentId?: string;
-    richMode?: "htmlcss" | "js";
-    richContent?: string;
-    attachmentIds?: string[];
-  }>();
-
-  // A message is valid if it has ANY of: plain text, rich content, or attachments.
-  // (Rich-only and file-only messages are legitimate — no need for placeholder text.)
-  const hasContent = typeof body.content === "string" && body.content.trim().length > 0;
-  const hasRich =
-    !!body.richMode && !!body.richContent && body.richContent.trim().length > 0;
-  const hasAttachments =
-    Array.isArray(body.attachmentIds) && body.attachmentIds.length > 0;
-
-  if (!hasContent && !hasRich && !hasAttachments) {
-    return c.json({ error: "Message vide" }, 400);
-  }
-  if (hasContent && body.content!.trim().length > 267) {
-    return c.json({ error: "Content exceeds 267 characters" }, 400);
-  }
-
-  // Rich content: validate tier ownership + size.
-  let richMode: "none" | "htmlcss" | "js" = "none";
-  let richContent: string | null = null;
-  if (body.richMode && body.richContent && body.richContent.trim().length > 0) {
-    if (body.richMode !== "htmlcss" && body.richMode !== "js") {
-      return c.json({ error: "richMode invalide" }, 400);
-    }
-    if (!(await ownsRich(ip, body.richMode))) {
-      return c.json({ error: "Fonctionnalité non débloquée" }, 402);
-    }
-    if (body.richContent.length > RICH_MAX) {
-      return c.json({ error: "Contenu riche trop volumineux" }, 413);
-    }
-    richMode = body.richMode;
-    richContent = body.richContent;
-  }
-
-  const content = (body.content ?? "").trim();
-  const parentId = body.parentId ?? null;
-
-  const message = await prisma.message.create({
-    data: { content, authorIp: ip, parentId, richMode, richContent },
-  });
-
-  // Link any pre-uploaded attachments owned by this IP to the new message.
-  let attachments: any[] = [];
-  if (Array.isArray(body.attachmentIds) && body.attachmentIds.length > 0) {
-    await prisma.attachment.updateMany({
-      where: { id: { in: body.attachmentIds }, ip, messageId: null },
-      data: { messageId: message.id },
-    });
-    attachments = await prisma.attachment.findMany({
-      where: { messageId: message.id },
-      select: { id: true, filename: true, mimeType: true, size: true },
-    });
-  }
-
-  // Update persistent stats and push the message to every connected tab,
-  // annotated with the author's perks so it renders correctly everywhere.
-  void recordMessage(content.length, parentId !== null);
-  const [authorPerks, authorGeo] = await Promise.all([
-    getPerksForIp(ip),
-    getGeoForIp(ip),
-  ]);
-  const enriched = { ...message, attachments, authorPerks, authorGeo };
-  const payload = parentId === null ? { ...enriched, replies: [] } : enriched;
-  broadcastNewMessage(payload);
-
-  return c.json(enriched, 201);
-});
-
-export default messages;
+import { Hono } from "hono";
+import { prisma } from "../lib/prisma";
+import { getClientIp, isFree } from "../lib/ip";
+import { recordMessage } from "../lib/stats";
+import { broadcastNewMessage } from "../realtime";
+import { getPerksForIp, getPerksForIps } from "../lib/perks";
+import { getGeoForIp, getGeoForIps } from "../lib/geo";
+
+const messages = new Hono();
+
+const RICH_MAX = 64 * 1024; // 64 KB cap on rich markup
+
+/** Does this IP own the entitlement needed for a rich tier? */
+async function ownsRich(ip: string, mode: "htmlcss" | "js"): Promise<boolean> {
+  if (isFree(ip)) return true;
+  const kind = mode === "js" ? "rich-js" : "rich-htmlcss";
+  const now = new Date();
+  const rows = await prisma.entitlement.findMany({ where: { ip, kind, active: true } });
+  return rows.some((e) => !e.expiresAt || e.expiresAt >= now);
+}
+
+// What we always include with a thread: its attachments + replies (+ their attachments).
+const THREAD_INCLUDE = {
+  attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
+  replies: {
+    orderBy: { createdAt: "asc" as const },
+    include: {
+      attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
+    },
+  },
+} as const;
+
+/** Annotate a list of threads with each author's perks + geo (threads + replies). */
+async function annotateThreads<T extends { authorIp: string; replies: { authorIp: string }[] }>(
+  threads: T[]
+) {
+  const ips = new Set<string>();
+  for (const m of threads) {
+    ips.add(m.authorIp);
+    for (const r of m.replies) ips.add(r.authorIp);
+  }
+  const [perks, geo] = await Promise.all([
+    getPerksForIps([...ips]),
+    getGeoForIps([...ips]),
+  ]);
+  return threads.map((m) => ({
+    ...m,
+    authorPerks: perks[m.authorIp] ?? {},
+    authorGeo: geo[m.authorIp] ?? null,
+    replies: m.replies.map((r) => ({
+      ...r,
+      authorPerks: perks[r.authorIp] ?? {},
+      authorGeo: geo[r.authorIp] ?? null,
+    })),
+  }));
+}
+
+// GET /api/messages — top-level threads with replies, annotated with author perks.
+// Optional query params (all backward-compatible — no params = the original feed):
+//   q      : keyword search on content (case-insensitive)
+//   before : cursor — only threads strictly older than this ISO date (pagination)
+//   limit  : page size (default 50, max 100)
+// Returns { items, nextCursor, hasMore }.
+messages.get("/", async (c) => {
+  const q = c.req.query("q")?.trim();
+  const before = c.req.query("before");
+  const limit = Math.min(Math.max(Number(c.req.query("limit")) || 50, 1), 100);
+
+  const where: any = { parentId: null };
+  if (q) where.content = { contains: q, mode: "insensitive" };
+  if (before) {
+    const d = new Date(before);
+    if (!isNaN(d.getTime())) where.createdAt = { lt: d };
+  }
+
+  // Fetch one extra row to know whether there's a next page.
+  const rows = await prisma.message.findMany({
+    where,
+    orderBy: { createdAt: "desc" },
+    take: limit + 1,
+    include: THREAD_INCLUDE,
+  });
+
+  const hasMore = rows.length > limit;
+  const page = hasMore ? rows.slice(0, limit) : rows;
+  const items = await annotateThreads(page);
+  const nextCursor = hasMore ? page[page.length - 1]!.createdAt.toISOString() : null;
+
+  // Backward-compatible: with no query params, return the bare array the live
+  // chat feed (useMessages) already consumes. The explorer passes params and
+  // gets the paginated envelope.
+  const isLegacy = !q && !before && c.req.query("limit") === undefined;
+  return c.json(isLegacy ? items : { items, nextCursor, hasMore });
+});
+
+// GET /api/messages/:id — a single top-level thread (with its replies), annotated.
+messages.get("/:id", async (c) => {
+  const id = c.req.param("id");
+  const message = await prisma.message.findUnique({
+    where: { id },
+    include: THREAD_INCLUDE,
+  });
+  if (!message || message.parentId !== null) {
+    return c.json({ error: "Message introuvable" }, 404);
+  }
+  const [annotated] = await annotateThreads([message]);
+  return c.json(annotated);
+});
+
+// POST /api/messages — create a message or reply (optionally rich + attachments)
+messages.post("/", async (c) => {
+  const ip = getClientIp(c);
+
+  const body = await c.req.json<{
+    content?: string;
+    parentId?: string;
+    richMode?: "htmlcss" | "js";
+    richContent?: string;
+    attachmentIds?: string[];
+  }>();
+
+  // A message is valid if it has ANY of: plain text, rich content, or attachments.
+  // (Rich-only and file-only messages are legitimate — no need for placeholder text.)
+  const hasContent = typeof body.content === "string" && body.content.trim().length > 0;
+  const hasRich =
+    !!body.richMode && !!body.richContent && body.richContent.trim().length > 0;
+  const hasAttachments =
+    Array.isArray(body.attachmentIds) && body.attachmentIds.length > 0;
+
+  if (!hasContent && !hasRich && !hasAttachments) {
+    return c.json({ error: "Message vide" }, 400);
+  }
+  if (hasContent && body.content!.trim().length > 267) {
+    return c.json({ error: "Content exceeds 267 characters" }, 400);
+  }
+
+  // Rich content: validate tier ownership + size.
+  let richMode: "none" | "htmlcss" | "js" = "none";
+  let richContent: string | null = null;
+  if (body.richMode && body.richContent && body.richContent.trim().length > 0) {
+    if (body.richMode !== "htmlcss" && body.richMode !== "js") {
+      return c.json({ error: "richMode invalide" }, 400);
+    }
+    if (!(await ownsRich(ip, body.richMode))) {
+      return c.json({ error: "Fonctionnalité non débloquée" }, 402);
+    }
+    if (body.richContent.length > RICH_MAX) {
+      return c.json({ error: "Contenu riche trop volumineux" }, 413);
+    }
+    richMode = body.richMode;
+    richContent = body.richContent;
+  }
+
+  const content = (body.content ?? "").trim();
+  const parentId = body.parentId ?? null;
+
+  const message = await prisma.message.create({
+    data: { content, authorIp: ip, parentId, richMode, richContent },
+  });
+
+  // Link any pre-uploaded attachments owned by this IP to the new message.
+  let attachments: any[] = [];
+  if (Array.isArray(body.attachmentIds) && body.attachmentIds.length > 0) {
+    await prisma.attachment.updateMany({
+      where: { id: { in: body.attachmentIds }, ip, messageId: null },
+      data: { messageId: message.id },
+    });
+    attachments = await prisma.attachment.findMany({
+      where: { messageId: message.id },
+      select: { id: true, filename: true, mimeType: true, size: true },
+    });
+  }
+
+  // Update persistent stats and push the message to every connected tab,
+  // annotated with the author's perks so it renders correctly everywhere.
+  void recordMessage(content.length, parentId !== null);
+  const [authorPerks, authorGeo] = await Promise.all([
+    getPerksForIp(ip),
+    getGeoForIp(ip),
+  ]);
+  const enriched = { ...message, attachments, authorPerks, authorGeo };
+  const payload = parentId === null ? { ...enriched, replies: [] } : enriched;
+  broadcastNewMessage(payload);
+
+  return c.json(enriched, 201);
+});
+
+export default messages;
diff --git a/backend/src/routes/perks.ts b/backend/src/routes/perks.ts
index a3cc9c9..aa88469 100644
--- a/backend/src/routes/perks.ts
+++ b/backend/src/routes/perks.ts
@@ -1,14 +1,14 @@
-import { Hono } from "hono";
-import { getPerksForIps } from "../lib/perks";
-
-const perks = new Hono();
-
-// GET /api/perks?ips=a,b,c — batch perk lookup for authors already on screen.
-perks.get("/", async (c) => {
-  const raw = c.req.query("ips") || "";
-  const ips = raw.split(",").map((s) => s.trim()).filter(Boolean);
-  if (ips.length === 0) return c.json({});
-  return c.json(await getPerksForIps(ips));
-});
-
-export default perks;
+import { Hono } from "hono";
+import { getPerksForIps } from "../lib/perks";
+
+const perks = new Hono();
+
+// GET /api/perks?ips=a,b,c — batch perk lookup for authors already on screen.
+perks.get("/", async (c) => {
+  const raw = c.req.query("ips") || "";
+  const ips = raw.split(",").map((s) => s.trim()).filter(Boolean);
+  if (ips.length === 0) return c.json({});
+  return c.json(await getPerksForIps(ips));
+});
+
+export default perks;
diff --git a/backend/src/routes/shop.ts b/backend/src/routes/shop.ts
index 5e0f213..5ca456e 100644
--- a/backend/src/routes/shop.ts
+++ b/backend/src/routes/shop.ts
@@ -1,86 +1,86 @@
-import { Hono } from "hono";
-import { getClientIp } from "../lib/ip";
-import { getWallet } from "../lib/wallet";
-import {
-  listProducts,
-  getProduct,
-  getEntitlements,
-  purchase,
-  refreshPerks,
-  PurchaseError,
-  type PurchaseOptions,
-} from "../lib/catalog";
-import { broadcast, broadcastToIp } from "../realtime";
-import { getPerksForIp } from "../lib/perks";
-
-const shop = new Hono();
-
-// GET /api/shop/products?category=cosmetiques
-shop.get("/products", async (c) => {
-  const category = c.req.query("category") || undefined;
-  return c.json(await listProducts(category));
-});
-
-// GET /api/shop/products/:id
-shop.get("/products/:id", async (c) => {
-  const p = await getProduct(c.req.param("id"));
-  if (!p) return c.json({ error: "Produit introuvable" }, 404);
-  return c.json(p);
-});
-
-// GET /api/shop/me — my balance + owned entitlements
-shop.get("/me", async (c) => {
-  const ip = getClientIp(c);
-  const [wallet, entitlements, myPerks] = await Promise.all([
-    getWallet(ip),
-    getEntitlements(ip),
-    getPerksForIp(ip),
-  ]);
-  return c.json({ wallet, entitlements, myPerks });
-});
-
-// POST /api/shop/purchase  { productId, options }
-shop.post("/purchase", async (c) => {
-  const ip = getClientIp(c);
-  let body: { productId?: string; options?: PurchaseOptions } = {};
-  try {
-    body = await c.req.json();
-  } catch {
-    return c.json({ error: "Corps JSON invalide" }, 400);
-  }
-  if (!body.productId) return c.json({ error: "productId requis" }, 400);
-
-  try {
-    const { result, visiblePerkChanged, adCreated } = await purchase(
-      ip,
-      body.productId,
-      body.options ?? {}
-    );
-
-    // Wallet update → only this IP's tabs.
-    const wallet = await getWallet(ip);
-    broadcastToIp(ip, { type: "wallet", data: wallet });
-
-    // Perks: always tell the buyer; if a *visible* perk changed, tell everyone
-    // so existing messages by this IP re-render with the skin/pet.
-    const perks = await refreshPerks(ip);
-    if (visiblePerkChanged) {
-      broadcast({ type: "perks", data: { ip, perks } });
-    } else {
-      broadcastToIp(ip, { type: "perks", data: { ip, perks } });
-    }
-
-    // New user ad entered rotation → nudge everyone to refetch ads.
-    if (adCreated) broadcast({ type: "ads", data: { reason: "new-user-ad" } });
-
-    return c.json(result, 201);
-  } catch (e) {
-    if (e instanceof PurchaseError) {
-      return c.json({ error: e.message }, e.status as 400);
-    }
-    console.error("purchase error:", (e as Error).message);
-    return c.json({ error: "Achat impossible" }, 500);
-  }
-});
-
-export default shop;
+import { Hono } from "hono";
+import { getClientIp } from "../lib/ip";
+import { getWallet } from "../lib/wallet";
+import {
+  listProducts,
+  getProduct,
+  getEntitlements,
+  purchase,
+  refreshPerks,
+  PurchaseError,
+  type PurchaseOptions,
+} from "../lib/catalog";
+import { broadcast, broadcastToIp } from "../realtime";
+import { getPerksForIp } from "../lib/perks";
+
+const shop = new Hono();
+
+// GET /api/shop/products?category=cosmetiques
+shop.get("/products", async (c) => {
+  const category = c.req.query("category") || undefined;
+  return c.json(await listProducts(category));
+});
+
+// GET /api/shop/products/:id
+shop.get("/products/:id", async (c) => {
+  const p = await getProduct(c.req.param("id"));
+  if (!p) return c.json({ error: "Produit introuvable" }, 404);
+  return c.json(p);
+});
+
+// GET /api/shop/me — my balance + owned entitlements
+shop.get("/me", async (c) => {
+  const ip = getClientIp(c);
+  const [wallet, entitlements, myPerks] = await Promise.all([
+    getWallet(ip),
+    getEntitlements(ip),
+    getPerksForIp(ip),
+  ]);
+  return c.json({ wallet, entitlements, myPerks });
+});
+
+// POST /api/shop/purchase  { productId, options }
+shop.post("/purchase", async (c) => {
+  const ip = getClientIp(c);
+  let body: { productId?: string; options?: PurchaseOptions } = {};
+  try {
+    body = await c.req.json();
+  } catch {
+    return c.json({ error: "Corps JSON invalide" }, 400);
+  }
+  if (!body.productId) return c.json({ error: "productId requis" }, 400);
+
+  try {
+    const { result, visiblePerkChanged, adCreated } = await purchase(
+      ip,
+      body.productId,
+      body.options ?? {}
+    );
+
+    // Wallet update → only this IP's tabs.
+    const wallet = await getWallet(ip);
+    broadcastToIp(ip, { type: "wallet", data: wallet });
+
+    // Perks: always tell the buyer; if a *visible* perk changed, tell everyone
+    // so existing messages by this IP re-render with the skin/pet.
+    const perks = await refreshPerks(ip);
+    if (visiblePerkChanged) {
+      broadcast({ type: "perks", data: { ip, perks } });
+    } else {
+      broadcastToIp(ip, { type: "perks", data: { ip, perks } });
+    }
+
+    // New user ad entered rotation → nudge everyone to refetch ads.
+    if (adCreated) broadcast({ type: "ads", data: { reason: "new-user-ad" } });
+
+    return c.json(result, 201);
+  } catch (e) {
+    if (e instanceof PurchaseError) {
+      return c.json({ error: e.message }, e.status as 400);
+    }
+    console.error("purchase error:", (e as Error).message);
+    return c.json({ error: "Achat impossible" }, 500);
+  }
+});
+
+export default shop;
diff --git a/backend/src/routes/uploads.ts b/backend/src/routes/uploads.ts
index a4d6199..5e95656 100644
--- a/backend/src/routes/uploads.ts
+++ b/backend/src/routes/uploads.ts
@@ -1,93 +1,93 @@
-import { Hono } from "hono";
-import { randomUUID } from "node:crypto";
-import { prisma } from "../lib/prisma";
-import { getClientIp, isFree } from "../lib/ip";
-import { storeFile, absolutePathFor } from "../lib/storage";
-
-const uploads = new Hono();
-
-const FREE_LIMIT = 1_000_000; // 1 Mo for the free tier (README)
-const ABSOLUTE_MAX = 50_000_000; // hard cap even for paid, to protect the dev box
-
-async function ownsNoFileLimit(ip: string): Promise<boolean> {
-  if (isFree(ip)) return true;
-  const rows = await prisma.entitlement.findMany({
-    where: { ip, kind: "no-file-limit", active: true },
-  });
-  return rows.length > 0;
-}
-
-// POST /api/uploads (multipart) — store a file, return its metadata.
-uploads.post("/", async (c) => {
-  const ip = getClientIp(c);
-
-  let body: Record<string, unknown>;
-  try {
-    body = await c.req.parseBody();
-  } catch {
-    return c.json({ error: "Upload invalide" }, 400);
-  }
-  const file = body["file"];
-  if (!(file instanceof File)) {
-    return c.json({ error: "Aucun fichier" }, 400);
-  }
-
-  if (file.size > ABSOLUTE_MAX) {
-    return c.json({ error: "Fichier trop volumineux (50 Mo max absolu)" }, 413);
-  }
-  if (file.size > FREE_LIMIT && !(await ownsNoFileLimit(ip))) {
-    return c.json(
-      { error: "Fichier > 1 Mo : débloque « Fichiers illimités » dans le Shop 💸" },
-      413
-    );
-  }
-
-  const id = randomUUID();
-  let stored;
-  try {
-    stored = await storeFile(id, file);
-  } catch {
-    return c.json({ error: "Échec d'écriture" }, 500);
-  }
-
-  const attachment = await prisma.attachment.create({
-    data: {
-      id,
-      ip,
-      filename: file.name || "fichier",
-      mimeType: file.type || "application/octet-stream",
-      size: file.size,
-      storagePath: stored.storagePath,
-    },
-    select: { id: true, filename: true, mimeType: true, size: true },
-  });
-
-  return c.json(attachment, 201);
-});
-
-// GET /uploads/:id — serve the stored bytes. Images inline; everything else is
-// forced to download (never rendered same-origin, never executed).
-uploads.get("/:id", async (c) => {
-  const id = c.req.param("id");
-  const att = await prisma.attachment.findUnique({ where: { id } });
-  if (!att) return c.json({ error: "Introuvable" }, 404);
-
-  let file;
-  try {
-    file = Bun.file(absolutePathFor(att.storagePath));
-  } catch {
-    return c.json({ error: "Introuvable" }, 404);
-  }
-  if (!(await file.exists())) return c.json({ error: "Introuvable" }, 404);
-
-  const isImage = att.mimeType.startsWith("image/");
-  const headers: Record<string, string> = {
-    // Images may render inline; anything else downloads. Never serve as HTML.
-    "Content-Type": isImage ? att.mimeType : "application/octet-stream",
-    "Content-Disposition": `${isImage ? "inline" : "attachment"}; filename="${att.filename.replace(/"/g, "")}"`,
-    "X-Content-Type-Options": "nosniff",
-  };
-  return new Response(file, { headers });
-});
-
-export default uploads;
+import { Hono } from "hono";
+import { randomUUID } from "node:crypto";
+import { prisma } from "../lib/prisma";
+import { getClientIp, isFree } from "../lib/ip";
+import { storeFile, absolutePathFor } from "../lib/storage";
+
+const uploads = new Hono();
+
+const FREE_LIMIT = 1_000_000; // 1 Mo for the free tier (README)
+const ABSOLUTE_MAX = 50_000_000; // hard cap even for paid, to protect the dev box
+
+async function ownsNoFileLimit(ip: string): Promise<boolean> {
+  if (isFree(ip)) return true;
+  const rows = await prisma.entitlement.findMany({
+    where: { ip, kind: "no-file-limit", active: true },
+  });
+  return rows.length > 0;
+}
+
+// POST /api/uploads (multipart) — store a file, return its metadata.
+uploads.post("/", async (c) => {
+  const ip = getClientIp(c);
+
+  let body: Record<string, unknown>;
+  try {
+    body = await c.req.parseBody();
+  } catch {
+    return c.json({ error: "Upload invalide" }, 400);
+  }
+  const file = body["file"];
+  if (!(file instanceof File)) {
+    return c.json({ error: "Aucun fichier" }, 400);
+  }
+
+  if (file.size > ABSOLUTE_MAX) {
+    return c.json({ error: "Fichier trop volumineux (50 Mo max absolu)" }, 413);
+  }
+  if (file.size > FREE_LIMIT && !(await ownsNoFileLimit(ip))) {
+    return c.json(
+      { error: "Fichier > 1 Mo : débloque « Fichiers illimités » dans le Shop 💸" },
+      413
+    );
+  }
+
+  const id = randomUUID();
+  let stored;
+  try {
+    stored = await storeFile(id, file);
+  } catch {
+    return c.json({ error: "Échec d'écriture" }, 500);
+  }
+
+  const attachment = await prisma.attachment.create({
+    data: {
+      id,
+      ip,
+      filename: file.name || "fichier",
+      mimeType: file.type || "application/octet-stream",
+      size: file.size,
+      storagePath: stored.storagePath,
+    },
+    select: { id: true, filename: true, mimeType: true, size: true },
+  });
+
+  return c.json(attachment, 201);
+});
+
+// GET /uploads/:id — serve the stored bytes. Images inline; everything else is
+// forced to download (never rendered same-origin, never executed).
+uploads.get("/:id", async (c) => {
+  const id = c.req.param("id");
+  const att = await prisma.attachment.findUnique({ where: { id } });
+  if (!att) return c.json({ error: "Introuvable" }, 404);
+
+  let file;
+  try {
+    file = Bun.file(absolutePathFor(att.storagePath));
+  } catch {
+    return c.json({ error: "Introuvable" }, 404);
+  }
+  if (!(await file.exists())) return c.json({ error: "Introuvable" }, 404);
+
+  const isImage = att.mimeType.startsWith("image/");
+  const headers: Record<string, string> = {
+    // Images may render inline; anything else downloads. Never serve as HTML.
+    "Content-Type": isImage ? att.mimeType : "application/octet-stream",
+    "Content-Disposition": `${isImage ? "inline" : "attachment"}; filename="${att.filename.replace(/"/g, "")}"`,
+    "X-Content-Type-Options": "nosniff",
+  };
+  return new Response(file, { headers });
+});
+
+export default uploads;
diff --git a/backend/src/routes/wallet.ts b/backend/src/routes/wallet.ts
index 34230f9..255482f 100644
--- a/backend/src/routes/wallet.ts
+++ b/backend/src/routes/wallet.ts
@@ -1,22 +1,22 @@
-import { Hono } from "hono";
-import { getClientIp } from "../lib/ip";
-import { getWallet, topUp } from "../lib/wallet";
-import { broadcastToIp } from "../realtime";
-
-const wallet = new Hono();
-
-// GET /api/wallet — current balance + freeMode for the calling IP.
-wallet.get("/", async (c) => {
-  return c.json(await getWallet(getClientIp(c)));
-});
-
-// POST /api/wallet/topup — free, instant, satirical recharge.
-wallet.post("/topup", async (c) => {
-  const ip = getClientIp(c);
-  const view = await topUp(ip);
-  // Push the new balance to every tab of this IP.
-  broadcastToIp(ip, { type: "wallet", data: view });
-  return c.json(view);
-});
-
-export default wallet;
+import { Hono } from "hono";
+import { getClientIp } from "../lib/ip";
+import { getWallet, topUp } from "../lib/wallet";
+import { broadcastToIp } from "../realtime";
+
+const wallet = new Hono();
+
+// GET /api/wallet — current balance + freeMode for the calling IP.
+wallet.get("/", async (c) => {
+  return c.json(await getWallet(getClientIp(c)));
+});
+
+// POST /api/wallet/topup — free, instant, satirical recharge.
+wallet.post("/topup", async (c) => {
+  const ip = getClientIp(c);
+  const view = await topUp(ip);
+  // Push the new balance to every tab of this IP.
+  broadcastToIp(ip, { type: "wallet", data: view });
+  return c.json(view);
+});
+
+export default wallet;
diff --git a/backend/tsconfig.json b/backend/tsconfig.json
index 6efa0c2..fc555e0 100644
--- a/backend/tsconfig.json
+++ b/backend/tsconfig.json
@@ -1,12 +1,12 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "types": ["bun-types"]
-  },
-  "include": ["src/**/*.ts", "prisma/**/*.ts"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["bun"]
+  },
+  "include": ["src/**/*.ts", "prisma/**/*.ts"]
+}
diff --git a/bun.lock b/bun.lock
index 8e0ab56..e5d10cd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -23,21 +23,24 @@
       "name": "xip-frontend",
       "version": "0.0.1",
       "dependencies": {
-        "@ionic/vue": "^8.3.0",
-        "@ionic/vue-router": "^8.3.0",
-        "ionicons": "^7.4.0",
         "vue": "^3.5.0",
         "vue-router": "^4.4.0",
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.1.0",
+        "@vitest/coverage-v8": "^2.1.0",
+        "@vue/test-utils": "^2.4.6",
+        "happy-dom": "^15.0.0",
         "typescript": "^5.6.0",
         "vite": "^5.4.0",
+        "vitest": "^2.1.0",
         "vue-tsc": "^2.1.0",
       },
     },
   },
   "packages": {
+    "@ampproject/remapping": ["@ampproject/remapping@2.3.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="],
+
     "@babel/helper-string-parser": ["@babel/helper-string-parser@7.29.7", "", {}, "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw=="],
 
     "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
@@ -46,6 +49,8 @@
 
     "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
 
+    "@bcoe/v8-coverage": ["@bcoe/v8-coverage@0.2.3", "", {}, "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="],
+
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.21.5", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ=="],
 
     "@esbuild/android-arm": ["@esbuild/android-arm@0.21.5", "", { "os": "android", "cpu": "arm" }, "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg=="],
@@ -92,16 +97,24 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.21.5", "", { "os": "win32", "cpu": "x64" }, "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw=="],
 
-    "@ionic/core": ["@ionic/core@8.8.8", "", { "dependencies": { "@stencil/core": "4.43.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } }, "sha512-GGvYtEzLtn1gBUC1/vb4pvA3gQzYskTNVIsvdTVIgnwLtdt70rwTibrZRSqmkyHeqpjg/u3+9XsM2c0kzc/V3w=="],
-
-    "@ionic/vue": ["@ionic/vue@8.8.8", "", { "dependencies": { "@ionic/core": "8.8.8", "@stencil/vue-output-target": "0.10.7", "ionicons": "^8.0.13" } }, "sha512-7Yfv6HUPpKXqYy9qWtx/8Cntn7DzskooUCSFoIjj35sUXRyTwEUWFnQM0AqGkxH+qtO5PeCPwq9VzBdVzqIgDA=="],
-
-    "@ionic/vue-router": ["@ionic/vue-router@8.8.8", "", { "dependencies": { "@ionic/vue": "8.8.8" } }, "sha512-mdofM1BXUCWO/J5ourldPQxULSV14rJ1ZrRgGHLFZ9UFEjgvYlPF4jq0Kk2j1hsrwuPpau/ehJM4GFmELGecoA=="],
-
     "@ioredis/commands": ["@ioredis/commands@1.10.0", "", {}, "sha512-UmeW7z4LfctwoQ5wkhVzgq8tXkreED2xZGpX+Bg+zA+WJFZCT6c062AfCK/Dfk81xZnnwdhJCUMkitihRaoC2Q=="],
 
+    "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
+
+    "@istanbuljs/schema": ["@istanbuljs/schema@0.1.6", "", {}, "sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
     "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@one-ini/wasm": ["@one-ini/wasm@0.1.1", "", {}, "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw=="],
+
+    "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
+
     "@prisma/client": ["@prisma/client@5.22.0", "", { "peerDependencies": { "prisma": "*" }, "optionalPeers": ["prisma"] }, "sha512-M0SVXfyHnQREBKxCgyo7sffrKttwE6R8PMq330MIUF0pTwjUhLbW84pFDlf06B27XyCR++VtjugEnIHdr07SVA=="],
 
     "@prisma/debug": ["@prisma/debug@5.22.0", "", {}, "sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ=="],
@@ -164,10 +177,6 @@
 
     "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.60.4", "", { "os": "win32", "cpu": "x64" }, "sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw=="],
 
-    "@stencil/core": ["@stencil/core@4.43.5", "", { "optionalDependencies": { "@rollup/rollup-darwin-arm64": "4.44.0", "@rollup/rollup-darwin-x64": "4.44.0", "@rollup/rollup-linux-arm64-gnu": "4.44.0", "@rollup/rollup-linux-arm64-musl": "4.44.0", "@rollup/rollup-linux-x64-gnu": "4.44.0", "@rollup/rollup-linux-x64-musl": "4.44.0", "@rollup/rollup-win32-arm64-msvc": "4.44.0", "@rollup/rollup-win32-x64-msvc": "4.44.0" }, "bin": { "stencil": "bin/stencil" } }, "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q=="],
-
-    "@stencil/vue-output-target": ["@stencil/vue-output-target@0.10.7", "", { "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0", "vue": "^3.4.38", "vue-router": "^4.5.0" }, "optionalPeers": ["@stencil/core", "vue-router"] }, "sha512-IYxDe+SLCkwhwsWRdynE31rTK1zN3hVwwojQ/V9lrN8Gnx4PTvrUQHiRno9jFo1dk+EaBZWX9gZSmXta0ZaZew=="],
-
     "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
@@ -176,6 +185,22 @@
 
     "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.4", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA=="],
 
+    "@vitest/coverage-v8": ["@vitest/coverage-v8@2.1.9", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@bcoe/v8-coverage": "^0.2.3", "debug": "^4.3.7", "istanbul-lib-coverage": "^3.2.2", "istanbul-lib-report": "^3.0.1", "istanbul-lib-source-maps": "^5.0.6", "istanbul-reports": "^3.1.7", "magic-string": "^0.30.12", "magicast": "^0.3.5", "std-env": "^3.8.0", "test-exclude": "^7.0.1", "tinyrainbow": "^1.2.0" }, "peerDependencies": { "@vitest/browser": "2.1.9", "vitest": "2.1.9" }, "optionalPeers": ["@vitest/browser"] }, "sha512-Z2cOr0ksM00MpEfyVE8KXIYPEcBFxdbLSs56L8PO0QQMxt/6bDj45uQfxoc96v05KW3clk7vvgP0qfDit9DmfQ=="],
+
+    "@vitest/expect": ["@vitest/expect@2.1.9", "", { "dependencies": { "@vitest/spy": "2.1.9", "@vitest/utils": "2.1.9", "chai": "^5.1.2", "tinyrainbow": "^1.2.0" } }, "sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw=="],
+
+    "@vitest/mocker": ["@vitest/mocker@2.1.9", "", { "dependencies": { "@vitest/spy": "2.1.9", "estree-walker": "^3.0.3", "magic-string": "^0.30.12" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^5.0.0" }, "optionalPeers": ["msw", "vite"] }, "sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg=="],
+
+    "@vitest/pretty-format": ["@vitest/pretty-format@2.1.9", "", { "dependencies": { "tinyrainbow": "^1.2.0" } }, "sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ=="],
+
+    "@vitest/runner": ["@vitest/runner@2.1.9", "", { "dependencies": { "@vitest/utils": "2.1.9", "pathe": "^1.1.2" } }, "sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g=="],
+
+    "@vitest/snapshot": ["@vitest/snapshot@2.1.9", "", { "dependencies": { "@vitest/pretty-format": "2.1.9", "magic-string": "^0.30.12", "pathe": "^1.1.2" } }, "sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ=="],
+
+    "@vitest/spy": ["@vitest/spy@2.1.9", "", { "dependencies": { "tinyspy": "^3.0.2" } }, "sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ=="],
+
+    "@vitest/utils": ["@vitest/utils@2.1.9", "", { "dependencies": { "@vitest/pretty-format": "2.1.9", "loupe": "^3.1.2", "tinyrainbow": "^1.2.0" } }, "sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ=="],
+
     "@volar/language-core": ["@volar/language-core@2.4.15", "", { "dependencies": { "@volar/source-map": "2.4.15" } }, "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA=="],
 
     "@volar/source-map": ["@volar/source-map@2.4.15", "", {}, "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg=="],
@@ -206,43 +231,119 @@
 
     "@vue/shared": ["@vue/shared@3.5.35", "", {}, "sha512-zSbjL7gRXwks2ZQLRGCajBtBXEOXW9Ddhn/HvSdrGkE2dqGnumzW8XtusRrxrE9LvqtiqDXQ+A60Hp6mvdYxfA=="],
 
+    "@vue/test-utils": ["@vue/test-utils@2.4.10", "", { "dependencies": { "js-beautify": "^1.14.9", "vue-component-type-helpers": "^3.0.0" }, "peerDependencies": { "@vue/compiler-dom": "3.x", "@vue/server-renderer": "3.x", "vue": "3.x" }, "optionalPeers": ["@vue/server-renderer"] }, "sha512-SmoZ5EA1kYiAFs9NkYdiFFQF+cSnUwnvlYEbY+DogWQZUiqOm/Y29eSbc5T6yi75SgSF9863SBeXniIEoPajCA=="],
+
+    "abbrev": ["abbrev@2.0.0", "", {}, "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ=="],
+
     "alien-signals": ["alien-signals@1.0.13", "", {}, "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg=="],
 
-    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+    "ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
 
-    "brace-expansion": ["brace-expansion@2.1.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA=="],
+    "ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+
+    "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
+
+    "balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
+
+    "brace-expansion": ["brace-expansion@5.0.6", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g=="],
 
     "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
 
+    "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
+
+    "chai": ["chai@5.3.3", "", { "dependencies": { "assertion-error": "^2.0.1", "check-error": "^2.1.1", "deep-eql": "^5.0.1", "loupe": "^3.1.0", "pathval": "^2.0.0" } }, "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw=="],
+
+    "check-error": ["check-error@2.1.3", "", {}, "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA=="],
+
     "cluster-key-slot": ["cluster-key-slot@1.1.1", "", {}, "sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw=="],
 
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "commander": ["commander@10.0.1", "", {}, "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug=="],
+
+    "config-chain": ["config-chain@1.1.13", "", { "dependencies": { "ini": "^1.3.4", "proto-list": "~1.2.1" } }, "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ=="],
+
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "de-indent": ["de-indent@1.0.2", "", {}, "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "deep-eql": ["deep-eql@5.0.2", "", {}, "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q=="],
+
     "denque": ["denque@2.1.0", "", {}, "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw=="],
 
-    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
+    "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
+
+    "editorconfig": ["editorconfig@1.0.7", "", { "dependencies": { "@one-ini/wasm": "0.1.1", "commander": "^10.0.0", "minimatch": "^9.0.1", "semver": "^7.5.3" }, "bin": { "editorconfig": "bin/editorconfig" } }, "sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw=="],
+
+    "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
+
+    "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
+    "es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
 
     "esbuild": ["esbuild@0.21.5", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.21.5", "@esbuild/android-arm": "0.21.5", "@esbuild/android-arm64": "0.21.5", "@esbuild/android-x64": "0.21.5", "@esbuild/darwin-arm64": "0.21.5", "@esbuild/darwin-x64": "0.21.5", "@esbuild/freebsd-arm64": "0.21.5", "@esbuild/freebsd-x64": "0.21.5", "@esbuild/linux-arm": "0.21.5", "@esbuild/linux-arm64": "0.21.5", "@esbuild/linux-ia32": "0.21.5", "@esbuild/linux-loong64": "0.21.5", "@esbuild/linux-mips64el": "0.21.5", "@esbuild/linux-ppc64": "0.21.5", "@esbuild/linux-riscv64": "0.21.5", "@esbuild/linux-s390x": "0.21.5", "@esbuild/linux-x64": "0.21.5", "@esbuild/netbsd-x64": "0.21.5", "@esbuild/openbsd-x64": "0.21.5", "@esbuild/sunos-x64": "0.21.5", "@esbuild/win32-arm64": "0.21.5", "@esbuild/win32-ia32": "0.21.5", "@esbuild/win32-x64": "0.21.5" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw=="],
 
-    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+    "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
+
+    "expect-type": ["expect-type@1.3.0", "", {}, "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA=="],
+
+    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
+    "glob": ["glob@10.5.0", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg=="],
+
+    "happy-dom": ["happy-dom@15.11.7", "", { "dependencies": { "entities": "^4.5.0", "webidl-conversions": "^7.0.0", "whatwg-mimetype": "^3.0.0" } }, "sha512-KyrFvnl+J9US63TEzwoiJOQzZBJY7KgBushJA8X61DMbNsH+2ONkDuLDnCnwUiPTF42tLoEmrPyoqbenVA5zrg=="],
+
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
     "he": ["he@1.2.0", "", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
 
     "hono": ["hono@4.12.23", "", {}, "sha512-eIaZ9qDgu7XV0pxOCrg7/WhnQ6Ivm22UcxhXx/A3dcbqbbYgBEkc6e/J/s7j2tS96zoB0S9VBdLwQNCWwUo4LA=="],
 
-    "ionicons": ["ionicons@7.4.0", "", { "dependencies": { "@stencil/core": "^4.0.3" } }, "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ=="],
+    "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
+
+    "ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
 
     "ioredis": ["ioredis@5.11.0", "", { "dependencies": { "@ioredis/commands": "1.10.0", "cluster-key-slot": "1.1.1", "debug": "4.4.3", "denque": "2.1.0", "redis-errors": "1.2.0", "redis-parser": "3.0.0", "standard-as-callback": "2.1.0" } }, "sha512-EZBErytyVovD8f6pDfG3Kb37N6Y3lmDA9NNj+4+IP13CzzHGeX+OyeRM2Um13khRzoBSzzL+5lVnCX8V2RLeMg=="],
 
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
+    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
+    "istanbul-lib-coverage": ["istanbul-lib-coverage@3.2.2", "", {}, "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg=="],
+
+    "istanbul-lib-report": ["istanbul-lib-report@3.0.1", "", { "dependencies": { "istanbul-lib-coverage": "^3.0.0", "make-dir": "^4.0.0", "supports-color": "^7.1.0" } }, "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw=="],
+
+    "istanbul-lib-source-maps": ["istanbul-lib-source-maps@5.0.6", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.23", "debug": "^4.1.1", "istanbul-lib-coverage": "^3.0.0" } }, "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A=="],
+
+    "istanbul-reports": ["istanbul-reports@3.2.0", "", { "dependencies": { "html-escaper": "^2.0.0", "istanbul-lib-report": "^3.0.0" } }, "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA=="],
+
+    "jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],
+
+    "js-beautify": ["js-beautify@1.15.4", "", { "dependencies": { "config-chain": "^1.1.13", "editorconfig": "^1.0.4", "glob": "^10.4.2", "js-cookie": "^3.0.5", "nopt": "^7.2.1" }, "bin": { "css-beautify": "js/bin/css-beautify.js", "html-beautify": "js/bin/html-beautify.js", "js-beautify": "js/bin/js-beautify.js" } }, "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA=="],
+
+    "js-cookie": ["js-cookie@3.0.8", "", {}, "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw=="],
+
+    "loupe": ["loupe@3.2.1", "", {}, "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ=="],
+
+    "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
-    "minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
+    "magicast": ["magicast@0.3.5", "", { "dependencies": { "@babel/parser": "^7.25.4", "@babel/types": "^7.25.4", "source-map-js": "^1.2.0" } }, "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ=="],
+
+    "make-dir": ["make-dir@4.0.0", "", { "dependencies": { "semver": "^7.5.3" } }, "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw=="],
+
+    "minimatch": ["minimatch@10.2.5", "", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="],
+
+    "minipass": ["minipass@7.1.3", "", {}, "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
@@ -250,25 +351,73 @@
 
     "nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
 
+    "nopt": ["nopt@7.2.1", "", { "dependencies": { "abbrev": "^2.0.0" }, "bin": { "nopt": "bin/nopt.js" } }, "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w=="],
+
+    "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
+
     "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
+
+    "pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
+
+    "pathval": ["pathval@2.0.1", "", {}, "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "postcss": ["postcss@8.5.15", "", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A=="],
 
     "prisma": ["prisma@5.22.0", "", { "dependencies": { "@prisma/engines": "5.22.0" }, "optionalDependencies": { "fsevents": "2.3.3" }, "bin": { "prisma": "build/index.js" } }, "sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A=="],
 
+    "proto-list": ["proto-list@1.2.4", "", {}, "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="],
+
     "redis-errors": ["redis-errors@1.2.0", "", {}, "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w=="],
 
     "redis-parser": ["redis-parser@3.0.0", "", { "dependencies": { "redis-errors": "^1.0.0" } }, "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A=="],
 
     "rollup": ["rollup@4.60.4", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.4", "@rollup/rollup-android-arm64": "4.60.4", "@rollup/rollup-darwin-arm64": "4.60.4", "@rollup/rollup-darwin-x64": "4.60.4", "@rollup/rollup-freebsd-arm64": "4.60.4", "@rollup/rollup-freebsd-x64": "4.60.4", "@rollup/rollup-linux-arm-gnueabihf": "4.60.4", "@rollup/rollup-linux-arm-musleabihf": "4.60.4", "@rollup/rollup-linux-arm64-gnu": "4.60.4", "@rollup/rollup-linux-arm64-musl": "4.60.4", "@rollup/rollup-linux-loong64-gnu": "4.60.4", "@rollup/rollup-linux-loong64-musl": "4.60.4", "@rollup/rollup-linux-ppc64-gnu": "4.60.4", "@rollup/rollup-linux-ppc64-musl": "4.60.4", "@rollup/rollup-linux-riscv64-gnu": "4.60.4", "@rollup/rollup-linux-riscv64-musl": "4.60.4", "@rollup/rollup-linux-s390x-gnu": "4.60.4", "@rollup/rollup-linux-x64-gnu": "4.60.4", "@rollup/rollup-linux-x64-musl": "4.60.4", "@rollup/rollup-openbsd-x64": "4.60.4", "@rollup/rollup-openharmony-arm64": "4.60.4", "@rollup/rollup-win32-arm64-msvc": "4.60.4", "@rollup/rollup-win32-ia32-msvc": "4.60.4", "@rollup/rollup-win32-x64-gnu": "4.60.4", "@rollup/rollup-win32-x64-msvc": "4.60.4", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g=="],
 
+    "semver": ["semver@7.8.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg=="],
+
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "siginfo": ["siginfo@2.0.0", "", {}, "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g=="],
+
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
+
     "standard-as-callback": ["standard-as-callback@2.1.0", "", {}, "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A=="],
 
-    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+    "std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
+
+    "string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
+
+    "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+
+    "strip-ansi-cjs": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
+    "test-exclude": ["test-exclude@7.0.2", "", { "dependencies": { "@istanbuljs/schema": "^0.1.2", "glob": "^10.4.1", "minimatch": "^10.2.2" } }, "sha512-u9E6A+ZDYdp7a4WnarkXPZOx8Ilz46+kby6p1yZ8zsGTz9gYa6FIS7lj2oezzNKmtdyyJNNmmXDppga5GB7kSw=="],
+
+    "tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
+
+    "tinyexec": ["tinyexec@0.3.2", "", {}, "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA=="],
+
+    "tinypool": ["tinypool@1.1.1", "", {}, "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg=="],
+
+    "tinyrainbow": ["tinyrainbow@1.2.0", "", {}, "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ=="],
+
+    "tinyspy": ["tinyspy@3.0.2", "", {}, "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q=="],
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
@@ -276,72 +425,76 @@
 
     "vite": ["vite@5.4.21", "", { "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", "rollup": "^4.20.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw=="],
 
+    "vite-node": ["vite-node@2.1.9", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.3.7", "es-module-lexer": "^1.5.4", "pathe": "^1.1.2", "vite": "^5.0.0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA=="],
+
+    "vitest": ["vitest@2.1.9", "", { "dependencies": { "@vitest/expect": "2.1.9", "@vitest/mocker": "2.1.9", "@vitest/pretty-format": "^2.1.9", "@vitest/runner": "2.1.9", "@vitest/snapshot": "2.1.9", "@vitest/spy": "2.1.9", "@vitest/utils": "2.1.9", "chai": "^5.1.2", "debug": "^4.3.7", "expect-type": "^1.1.0", "magic-string": "^0.30.12", "pathe": "^1.1.2", "std-env": "^3.8.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.1", "tinypool": "^1.0.1", "tinyrainbow": "^1.2.0", "vite": "^5.0.0", "vite-node": "2.1.9", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@types/node": "^18.0.0 || >=20.0.0", "@vitest/browser": "2.1.9", "@vitest/ui": "2.1.9", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@types/node", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q=="],
+
     "vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
 
     "vue": ["vue@3.5.35", "", { "dependencies": { "@vue/compiler-dom": "3.5.35", "@vue/compiler-sfc": "3.5.35", "@vue/runtime-dom": "3.5.35", "@vue/server-renderer": "3.5.35", "@vue/shared": "3.5.35" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-cx89fnr+0kVGHiNFG6y6s0bdjypJRFNZn6x3WPstNdQR1bi1mbB7h4v5IBGTsPJU3nK1+0Iqj3Zf+hZWMieR4Q=="],
 
+    "vue-component-type-helpers": ["vue-component-type-helpers@3.3.3", "", {}, "sha512-x4nsFpy5Pe8fqPzp/5vkTPeTTDBpAx4WVtV47Ejt0+2FQrq4pRRsJs7JmYRqMFzTu/LW+pCWEjQ3YVCkPV7f9g=="],
+
     "vue-router": ["vue-router@4.6.4", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg=="],
 
     "vue-tsc": ["vue-tsc@2.2.12", "", { "dependencies": { "@volar/typescript": "2.4.15", "@vue/language-core": "2.2.12" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw=="],
 
+    "webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
+
+    "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
+
+    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "why-is-node-running": ["why-is-node-running@2.3.0", "", { "dependencies": { "siginfo": "^2.0.0", "stackback": "0.0.2" }, "bin": { "why-is-node-running": "cli.js" } }, "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w=="],
+
+    "wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
+
+    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
     "xip-backend": ["xip-backend@workspace:backend"],
 
     "xip-frontend": ["xip-frontend@workspace:frontend"],
 
-    "@ionic/core/@stencil/core": ["@stencil/core@4.43.0", "", { "optionalDependencies": { "@rollup/rollup-darwin-arm64": "4.34.9", "@rollup/rollup-darwin-x64": "4.34.9", "@rollup/rollup-linux-arm64-gnu": "4.34.9", "@rollup/rollup-linux-arm64-musl": "4.34.9", "@rollup/rollup-linux-x64-gnu": "4.34.9", "@rollup/rollup-linux-x64-musl": "4.34.9", "@rollup/rollup-win32-arm64-msvc": "4.34.9", "@rollup/rollup-win32-x64-msvc": "4.34.9" }, "bin": { "stencil": "bin/stencil" } }, "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg=="],
+    "@vue/compiler-core/entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
 
-    "@ionic/core/ionicons": ["ionicons@8.0.13", "", { "dependencies": { "@stencil/core": "^4.35.3" } }, "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ=="],
+    "@vue/compiler-core/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
-    "@ionic/vue/ionicons": ["ionicons@8.0.13", "", { "dependencies": { "@stencil/core": "^4.35.3" } }, "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ=="],
+    "@vue/compiler-sfc/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
-    "@stencil/core/@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.44.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA=="],
+    "@vue/language-core/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
-    "@stencil/core/@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.44.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ=="],
+    "editorconfig/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
-    "@stencil/core/@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.44.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ=="],
+    "glob/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
-    "@stencil/core/@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.44.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q=="],
+    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "@stencil/core/@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.44.0", "", { "os": "linux", "cpu": "x64" }, "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw=="],
+    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
-    "@stencil/core/@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.44.0", "", { "os": "linux", "cpu": "x64" }, "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA=="],
+    "strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
-    "@stencil/core/@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.44.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w=="],
+    "wrap-ansi-cjs/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
-    "@stencil/core/@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.44.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ=="],
+    "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.34.9", "", { "os": "darwin", "cpu": "arm64" }, "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ=="],
+    "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.34.9", "", { "os": "darwin", "cpu": "x64" }, "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q=="],
+    "@vue/language-core/minimatch/brace-expansion": ["brace-expansion@2.1.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.34.9", "", { "os": "linux", "cpu": "arm64" }, "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw=="],
+    "editorconfig/minimatch/brace-expansion": ["brace-expansion@2.1.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.34.9", "", { "os": "linux", "cpu": "arm64" }, "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A=="],
+    "glob/minimatch/brace-expansion": ["brace-expansion@2.1.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.34.9", "", { "os": "linux", "cpu": "x64" }, "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A=="],
+    "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.34.9", "", { "os": "linux", "cpu": "x64" }, "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA=="],
+    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.34.9", "", { "os": "win32", "cpu": "arm64" }, "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q=="],
+    "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.34.9", "", { "os": "win32", "cpu": "x64" }, "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw=="],
+    "@vue/language-core/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
-    "@ionic/core/ionicons/@stencil/core": ["@stencil/core@4.43.5", "", { "optionalDependencies": { "@rollup/rollup-darwin-arm64": "4.44.0", "@rollup/rollup-darwin-x64": "4.44.0", "@rollup/rollup-linux-arm64-gnu": "4.44.0", "@rollup/rollup-linux-arm64-musl": "4.44.0", "@rollup/rollup-linux-x64-gnu": "4.44.0", "@rollup/rollup-linux-x64-musl": "4.44.0", "@rollup/rollup-win32-arm64-msvc": "4.44.0", "@rollup/rollup-win32-x64-msvc": "4.44.0" }, "bin": { "stencil": "bin/stencil" } }, "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q=="],
+    "editorconfig/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.44.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.44.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.44.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.44.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.44.0", "", { "os": "linux", "cpu": "x64" }, "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.44.0", "", { "os": "linux", "cpu": "x64" }, "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.44.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.44.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ=="],
+    "glob/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
   }
 }
diff --git a/deploy/nginx.conf b/deploy/nginx.conf
index be30c49..fed5849 100644
--- a/deploy/nginx.conf
+++ b/deploy/nginx.conf
@@ -1,42 +1,42 @@
-# Single-origin reverse proxy for XIP (Vireli pattern).
-# nginx serves the built SPA and proxies API + WebSocket to the bun backend.
-server {
-    listen 80;
-    server_name _;
-
-    # Uploads: backend allows up to 50 MB (ABSOLUTE_MAX). Give headroom.
-    client_max_body_size 60m;
-
-    # ── API (REST + uploads) ────────────────────────────────────────────────
-    location /api/ {
-        proxy_pass http://backend:3000;
-        proxy_set_header Host              $host;
-        proxy_set_header X-Real-IP         $remote_addr;
-        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_read_timeout 120s;
-    }
-
-    # ── WebSocket (live feed + realtime stats) ──────────────────────────────
-    location /ws {
-        proxy_pass http://backend:3000;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade           $http_upgrade;
-        proxy_set_header Connection        "upgrade";
-        proxy_set_header Host              $host;
-        proxy_set_header X-Real-IP         $remote_addr;
-        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
-        proxy_read_timeout 3600s;
-    }
-
-    # ── Health passthrough ──────────────────────────────────────────────────
-    location = /health {
-        proxy_pass http://backend:3000;
-    }
-
-    # ── Static SPA (Vue history fallback) ───────────────────────────────────
-    location / {
-        root /usr/share/nginx/html;
-        try_files $uri $uri/ /index.html;
-    }
-}
+# Single-origin reverse proxy for XIP (Vireli pattern).
+# nginx serves the built SPA and proxies API + WebSocket to the bun backend.
+server {
+    listen 80;
+    server_name _;
+
+    # Uploads: backend allows up to 50 MB (ABSOLUTE_MAX). Give headroom.
+    client_max_body_size 60m;
+
+    # ── API (REST + uploads) ────────────────────────────────────────────────
+    location /api/ {
+        proxy_pass http://backend:3000;
+        proxy_set_header Host              $host;
+        proxy_set_header X-Real-IP         $remote_addr;
+        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_read_timeout 120s;
+    }
+
+    # ── WebSocket (live feed + realtime stats) ──────────────────────────────
+    location /ws {
+        proxy_pass http://backend:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade           $http_upgrade;
+        proxy_set_header Connection        "upgrade";
+        proxy_set_header Host              $host;
+        proxy_set_header X-Real-IP         $remote_addr;
+        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_read_timeout 3600s;
+    }
+
+    # ── Health passthrough ──────────────────────────────────────────────────
+    location = /health {
+        proxy_pass http://backend:3000;
+    }
+
+    # ── Static SPA (Vue history fallback) ───────────────────────────────────
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+    }
+}
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index d672e2d..a858ca8 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -1,67 +1,67 @@
-# Production stack for XIP — runs on the dedicated CT (xip-app, Echelon CT502).
-# Postgres + Redis + bun backend + nginx (serves SPA, proxies /api and /ws).
-# Secrets come from .env.prod (gitignored), loaded via `--env-file .env.prod`.
-services:
-  postgres:
-    image: postgres:16
-    restart: unless-stopped
-    environment:
-      POSTGRES_DB: ${POSTGRES_DB:-xip}
-      POSTGRES_USER: ${POSTGRES_USER:-xip}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:?POSTGRES_PASSWORD must be set in .env.prod}
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-xip}"]
-      interval: 5s
-      timeout: 5s
-      retries: 20
-
-  redis:
-    image: redis:7
-    restart: unless-stopped
-    command: ["redis-server", "--appendonly", "yes"]
-    volumes:
-      - redis_data:/data
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 5s
-      timeout: 5s
-      retries: 20
-
-  backend:
-    build:
-      context: .
-      dockerfile: backend/Dockerfile
-    restart: unless-stopped
-    environment:
-      DATABASE_URL: postgresql://${POSTGRES_USER:-xip}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-xip}
-      REDIS_URL: redis://redis:6379
-      PORT: "3000"
-      NODE_ENV: production
-      # Prod "open bar": paywall disabled for everyone (see backend/src/lib/ip.ts).
-      XIP_OPEN_BAR: ${XIP_OPEN_BAR:-true}
-    volumes:
-      - uploads_data:/app/uploads
-    depends_on:
-      postgres:
-        condition: service_healthy
-      redis:
-        condition: service_healthy
-
-  web:
-    build:
-      context: .
-      dockerfile: frontend/Dockerfile
-      args:
-        VITE_API_URL: ${PUBLIC_URL:-https://xip.kerboul.me}
-    restart: unless-stopped
-    ports:
-      - "80:80"
-    depends_on:
-      - backend
-
-volumes:
-  postgres_data:
-  redis_data:
-  uploads_data:
+# Production stack for XIP — runs on the dedicated CT (xip-app, Echelon CT502).
+# Postgres + Redis + bun backend + nginx (serves SPA, proxies /api and /ws).
+# Secrets come from .env.prod (gitignored), loaded via `--env-file .env.prod`.
+services:
+  postgres:
+    image: postgres:16
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-xip}
+      POSTGRES_USER: ${POSTGRES_USER:-xip}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:?POSTGRES_PASSWORD must be set in .env.prod}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-xip}"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+
+  redis:
+    image: redis:7
+    restart: unless-stopped
+    command: ["redis-server", "--appendonly", "yes"]
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile
+    restart: unless-stopped
+    environment:
+      DATABASE_URL: postgresql://${POSTGRES_USER:-xip}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-xip}
+      REDIS_URL: redis://redis:6379
+      PORT: "3000"
+      NODE_ENV: production
+      # Prod "open bar": paywall disabled for everyone (see backend/src/lib/ip.ts).
+      XIP_OPEN_BAR: ${XIP_OPEN_BAR:-true}
+    volumes:
+      - uploads_data:/app/uploads
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+
+  web:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile
+      args:
+        VITE_API_URL: ${PUBLIC_URL:-https://xip.kerboul.me}
+    restart: unless-stopped
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+
+volumes:
+  postgres_data:
+  redis_data:
+  uploads_data:
diff --git a/docker-compose.yml b/docker-compose.yml
index 3f2b146..393ca9e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,35 +1,35 @@
-services:
-  postgres:
-    image: postgres:16
-    restart: unless-stopped
-    environment:
-      POSTGRES_DB: xip
-      POSTGRES_USER: xip
-      POSTGRES_PASSWORD: xip
-    ports:
-      - "5432:5432"
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U xip"]
-      interval: 5s
-      timeout: 5s
-      retries: 10
-
-  redis:
-    image: redis:7
-    restart: unless-stopped
-    command: ["redis-server", "--appendonly", "yes"]
-    ports:
-      - "6379:6379"
-    volumes:
-      - redis_data:/data
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 5s
-      timeout: 5s
-      retries: 10
-
-volumes:
-  postgres_data:
-  redis_data:
+services:
+  postgres:
+    image: postgres:16
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: xip
+      POSTGRES_USER: xip
+      POSTGRES_PASSWORD: xip
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U xip"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  redis:
+    image: redis:7
+    restart: unless-stopped
+    command: ["redis-server", "--appendonly", "yes"]
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+volumes:
+  postgres_data:
+  redis_data:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 267ca98..967cbf0 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,17 +1,17 @@
-# XIP frontend — Vue 3 + Vite, built to static assets and served by nginx.
-# Build context is the repo ROOT (see docker-compose.prod.yml).
-FROM oven/bun:1-debian AS build
-WORKDIR /app
-COPY frontend/package.json ./
-RUN bun install
-COPY frontend/ ./
-# Baked at build time. Must be the public absolute origin so the WebSocket URL
-# (derived as API_URL.replace(/^http/,'ws') + '/ws') becomes wss://xip.kerboul.me/ws.
-ARG VITE_API_URL=https://xip.kerboul.me
-ENV VITE_API_URL=$VITE_API_URL
-RUN bun run build
-
-FROM nginx:1.27-alpine AS runtime
-COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/dist /usr/share/nginx/html
-EXPOSE 80
+# XIP frontend — Vue 3 + Vite, built to static assets and served by nginx.
+# Build context is the repo ROOT (see docker-compose.prod.yml).
+FROM oven/bun:1-debian AS build
+WORKDIR /app
+COPY frontend/package.json ./
+RUN bun install
+COPY frontend/ ./
+# Baked at build time. Must be the public absolute origin so the WebSocket URL
+# (derived as API_URL.replace(/^http/,'ws') + '/ws') becomes wss://xip.kerboul.me/ws.
+ARG VITE_API_URL=https://xip.kerboul.me
+ENV VITE_API_URL=$VITE_API_URL
+RUN bun run build
+
+FROM nginx:1.27-alpine AS runtime
+COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
diff --git a/frontend/index.html b/frontend/index.html
index 4799e99..9c1128d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>XIP</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>XIP</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
index c420332..1a0ccca 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,21 +4,24 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
     "typecheck": "vue-tsc --noEmit",
-    "preview": "vite preview"
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage"
   },
   "dependencies": {
-    "@ionic/vue": "^8.3.0",
-    "@ionic/vue-router": "^8.3.0",
-    "ionicons": "^7.4.0",
     "vue": "^3.5.0",
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.0",
+    "@vitest/coverage-v8": "^2.1.0",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^15.0.0",
     "typescript": "^5.6.0",
     "vite": "^5.4.0",
+    "vitest": "^2.1.0",
     "vue-tsc": "^2.1.0"
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d96ca47..48e3313 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,8 +1,72 @@
+<!-- Composant racine : barre de navigation globale + zone de pages routées.
+     L'explorateur est gardé en cache (keep-alive) pour conserver son état
+     (recherche, scroll) lors d'un retour navigation. -->
 <template>
-  <RouterView />
-  <StyleContextMenu />
+  <div class="app-shell">
+    <nav class="app-nav">
+      <RouterLink to="/" class="brand">XIP</RouterLink>
+      <div class="nav-links">
+        <RouterLink to="/" class="nav-link">💬 Chat</RouterLink>
+        <RouterLink to="/explorer" class="nav-link">🔎 Explorer</RouterLink>
+        <RouterLink to="/favoris" class="nav-link">⭐ Favoris</RouterLink>
+        <RouterLink to="/mes-stats" class="nav-link">📊 Mes stats</RouterLink>
+        <RouterLink to="/shop" class="nav-link">🛒 Shop</RouterLink>
+      </div>
+    </nav>
+
+    <main class="app-main">
+      <RouterView v-slot="{ Component }">
+        <keep-alive include="ExplorerPage">
+          <component :is="Component" />
+        </keep-alive>
+      </RouterView>
+    </main>
+  </div>
 </template>
 
-<script setup lang="ts">
-import StyleContextMenu from '@/components/StyleContextMenu.vue';
-</script>
+<style scoped>
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.app-nav {
+  flex-shrink: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 18px;
+  background: #0a0a12;
+  border-bottom: 1px solid #1a1a2a;
+}
+.brand {
+  font-family: Arial, sans-serif;
+  font-weight: 900;
+  font-size: 16px;
+  color: #00eeff;
+  text-decoration: none;
+  text-shadow: 0 0 10px #00ccff77;
+}
+.nav-links { display: flex; gap: 6px; }
+.nav-link {
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  color: #7a7a9a;
+  text-decoration: none;
+  padding: 5px 11px;
+  border-radius: 8px;
+  transition: color 0.12s, background 0.12s;
+}
+.nav-link:hover { color: #ccccee; background: #15152480; }
+.nav-link.router-link-exact-active { color: #00ddff; background: #00aaff18; }
+
+.app-main {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+</style>
diff --git a/frontend/src/components/AdBand.vue b/frontend/src/components/AdBand.vue
index 3c73836..8592590 100644
--- a/frontend/src/components/AdBand.vue
+++ b/frontend/src/components/AdBand.vue
@@ -1,163 +1,163 @@
-<!-- Bande publicitaire gauche (130 px) — pilotée par l'inventaire de pubs réel -->
-<template>
-  <aside class="ad-band">
-    <p class="ad-label">PUBLICITÉ</p>
-
-    <component
-      :is="ad.url ? 'a' : 'div'"
-      v-for="ad in ads"
-      :key="ad.id"
-      class="ad-card"
-      :href="ad.url || undefined"
-      :style="cardStyle"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      title="Clic droit pour personnaliser le cadre"
-      @contextmenu.prevent="onRightClick"
-    >
-      <div class="ad-header" :class="`ad-header--${ad.tone}`">
-        <p class="ad-brand" :class="`ad-brand--${ad.tone}`">{{ ad.brand }}</p>
-        <p v-if="ad.subtitle" class="ad-sub">{{ ad.subtitle }}</p>
-      </div>
-      <div class="ad-body" :class="`ad-body--${ad.tone}`">
-        <span class="ad-icon">{{ ad.icon || '📢' }}</span>
-      </div>
-      <p v-if="ad.cta" class="ad-cta" :class="`ad-cta--${ad.tone}`">{{ ad.cta }}</p>
-      <p v-if="ad.url" class="ad-url">{{ prettyUrl(ad.url) }}</p>
-    </component>
-  </aside>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, watch } from 'vue';
-import { useAds } from '@/composables/useAds';
-import { openContextMenu } from '@/composables/useContextMenu';
-import { useCustomStyles, AD_FRAME_PRESETS } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
-
-const { ads, fetchAds, reportImpression } = useAds('band');
-const { prefs } = useCustomStyles();
-const { myPerks } = useMyPerks();
-
-const cardStyle = computed(() => {
-  const p = AD_FRAME_PRESETS[prefs.adFrame];
-  return { border: p.border, background: p.bg };
-});
-
-function onRightClick(e: MouseEvent): void {
-  if (!myPerks.value.elementSkin) return;
-  e.stopPropagation();
-  openContextMenu({
-    x: e.clientX,
-    y: e.clientY,
-    title: 'Cadre pub',
-    items: Object.entries(AD_FRAME_PRESETS).map(([k, v]) => ({ value: k, label: v.label })),
-    current: prefs.adFrame,
-    onSelect: (v) => { prefs.adFrame = v as typeof prefs.adFrame; },
-  });
-}
-
-function prettyUrl(url: string): string {
-  return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
-}
-
-watch(ads, (list) => {
-  for (const a of list) reportImpression(a.id);
-});
-
-onMounted(fetchAds);
-</script>
-
-<style scoped>
-.ad-band {
-  width: 130px;
-  flex-shrink: 0;
-  background: #0c0c10;
-  border-right: 1px solid #1a1a22;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
-}
-.ad-band::-webkit-scrollbar { display: none; }
-
-.ad-label {
-  font-family: Arial, sans-serif;
-  font-size: 8px;
-  color: #2a2a38;
-  text-align: center;
-  padding: 5px 0 3px;
-  letter-spacing: 0.5px;
-}
-
-/* ── Carte pub ── */
-.ad-card {
-  margin: 0 4px 4px;
-  background: #121218;
-  border: 1px solid #1e1e2a;
-  border-radius: 3px;
-  text-align: center;
-  padding-bottom: 10px;
-}
-
-.ad-header {
-  padding: 8px 4px 6px;
-  border-radius: 3px 3px 0 0;
-}
-.ad-header--blue   { background: #161620; }
-.ad-header--green  { background: #101614; }
-.ad-header--purple { background: #16101a; }
-.ad-header--user   { background: #1a1606; }
-.ad-header--casino { background: #1a0606; }
-
-.ad-brand {
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-  font-weight: bold;
-  margin: 0;
-}
-.ad-brand--blue   { color: #4455aa; }
-.ad-brand--green  { color: #336644; }
-.ad-brand--purple { color: #6633aa; }
-.ad-brand--user   { color: #998833; }
-.ad-brand--casino { color: #884433; }
-
-.ad-sub {
-  font-family: Arial, sans-serif;
-  font-size: 9px;
-  color: #383870;
-  margin: 2px 0 0;
-}
-
-.ad-body {
-  background: #0e0e16;
-  margin: 6px 10px;
-  border-radius: 2px;
-  padding: 10px 0;
-}
-.ad-body--green  { background: #0e160e; }
-.ad-body--purple { background: #110e16; }
-.ad-body--user   { background: #16140e; }
-.ad-body--casino { background: #160e0e; }
-
-.ad-icon { font-size: 24px; }
-
-.ad-cta {
-  font-family: Arial, sans-serif;
-  font-size: 10px;
-  margin: 6px 0 2px;
-}
-.ad-cta--blue   { color: #3a3a88; }
-.ad-cta--green  { color: #33aa55; }
-.ad-cta--purple { color: #9944dd; }
-.ad-cta--user   { color: #ffcc44; }
-.ad-cta--casino { color: #ff5533; }
-
-.ad-url {
-  font-family: Arial, sans-serif;
-  font-size: 8px;
-  color: #282840;
-}
-
-/* Carte cliquable : pas de soulignement, héritage couleur */
-a.ad-card { text-decoration: none; display: block; }
-</style>
+<!-- Bande publicitaire gauche (130 px) — pilotée par l'inventaire de pubs réel -->
+<template>
+  <aside class="ad-band">
+    <p class="ad-label">PUBLICITÉ</p>
+
+    <component
+      :is="ad.url ? 'a' : 'div'"
+      v-for="ad in ads"
+      :key="ad.id"
+      class="ad-card"
+      :href="ad.url || undefined"
+      :style="cardStyle"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      title="Clic droit pour personnaliser le cadre"
+      @contextmenu.prevent="onRightClick"
+    >
+      <div class="ad-header" :class="`ad-header--${ad.tone}`">
+        <p class="ad-brand" :class="`ad-brand--${ad.tone}`">{{ ad.brand }}</p>
+        <p v-if="ad.subtitle" class="ad-sub">{{ ad.subtitle }}</p>
+      </div>
+      <div class="ad-body" :class="`ad-body--${ad.tone}`">
+        <span class="ad-icon">{{ ad.icon || '📢' }}</span>
+      </div>
+      <p v-if="ad.cta" class="ad-cta" :class="`ad-cta--${ad.tone}`">{{ ad.cta }}</p>
+      <p v-if="ad.url" class="ad-url">{{ prettyUrl(ad.url) }}</p>
+    </component>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+import { useAds } from '@/composables/useAds';
+import { openContextMenu } from '@/composables/useContextMenu';
+import { useCustomStyles, AD_FRAME_PRESETS } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+
+const { ads, fetchAds, reportImpression } = useAds('band');
+const { prefs } = useCustomStyles();
+const { myPerks } = useMyPerks();
+
+const cardStyle = computed(() => {
+  const p = AD_FRAME_PRESETS[prefs.adFrame];
+  return { border: p.border, background: p.bg };
+});
+
+function onRightClick(e: MouseEvent): void {
+  if (!myPerks.value.elementSkin) return;
+  e.stopPropagation();
+  openContextMenu({
+    x: e.clientX,
+    y: e.clientY,
+    title: 'Cadre pub',
+    items: Object.entries(AD_FRAME_PRESETS).map(([k, v]) => ({ value: k, label: v.label })),
+    current: prefs.adFrame,
+    onSelect: (v) => { prefs.adFrame = v as typeof prefs.adFrame; },
+  });
+}
+
+function prettyUrl(url: string): string {
+  return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
+}
+
+watch(ads, (list) => {
+  for (const a of list) reportImpression(a.id);
+});
+
+onMounted(fetchAds);
+</script>
+
+<style scoped>
+.ad-band {
+  width: 130px;
+  flex-shrink: 0;
+  background: #0c0c10;
+  border-right: 1px solid #1a1a22;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+.ad-band::-webkit-scrollbar { display: none; }
+
+.ad-label {
+  font-family: Arial, sans-serif;
+  font-size: 8px;
+  color: #2a2a38;
+  text-align: center;
+  padding: 5px 0 3px;
+  letter-spacing: 0.5px;
+}
+
+/* ── Carte pub ── */
+.ad-card {
+  margin: 0 4px 4px;
+  background: #121218;
+  border: 1px solid #1e1e2a;
+  border-radius: 3px;
+  text-align: center;
+  padding-bottom: 10px;
+}
+
+.ad-header {
+  padding: 8px 4px 6px;
+  border-radius: 3px 3px 0 0;
+}
+.ad-header--blue   { background: #161620; }
+.ad-header--green  { background: #101614; }
+.ad-header--purple { background: #16101a; }
+.ad-header--user   { background: #1a1606; }
+.ad-header--casino { background: #1a0606; }
+
+.ad-brand {
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  margin: 0;
+}
+.ad-brand--blue   { color: #4455aa; }
+.ad-brand--green  { color: #336644; }
+.ad-brand--purple { color: #6633aa; }
+.ad-brand--user   { color: #998833; }
+.ad-brand--casino { color: #884433; }
+
+.ad-sub {
+  font-family: Arial, sans-serif;
+  font-size: 9px;
+  color: #383870;
+  margin: 2px 0 0;
+}
+
+.ad-body {
+  background: #0e0e16;
+  margin: 6px 10px;
+  border-radius: 2px;
+  padding: 10px 0;
+}
+.ad-body--green  { background: #0e160e; }
+.ad-body--purple { background: #110e16; }
+.ad-body--user   { background: #16140e; }
+.ad-body--casino { background: #160e0e; }
+
+.ad-icon { font-size: 24px; }
+
+.ad-cta {
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  margin: 6px 0 2px;
+}
+.ad-cta--blue   { color: #3a3a88; }
+.ad-cta--green  { color: #33aa55; }
+.ad-cta--purple { color: #9944dd; }
+.ad-cta--user   { color: #ffcc44; }
+.ad-cta--casino { color: #ff5533; }
+
+.ad-url {
+  font-family: Arial, sans-serif;
+  font-size: 8px;
+  color: #282840;
+}
+
+/* Carte cliquable : pas de soulignement, héritage couleur */
+a.ad-card { text-decoration: none; display: block; }
+</style>
diff --git a/frontend/src/components/AnimatedNumber.vue b/frontend/src/components/AnimatedNumber.vue
index 47ce285..04cd0b2 100644
--- a/frontend/src/components/AnimatedNumber.vue
+++ b/frontend/src/components/AnimatedNumber.vue
@@ -1,50 +1,50 @@
-<!-- Tweened number display (easeOutCubic) for live-updating stats -->
-<template>
-  <span>{{ formatted }}</span>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onUnmounted } from 'vue';
-
-const props = withDefaults(
-  defineProps<{ value: number; decimals?: number; duration?: number }>(),
-  { decimals: 0, duration: 600 },
-);
-
-const display = ref(props.value);
-let raf = 0;
-let startVal = props.value;
-let startTime = 0;
-let target = props.value;
-
-function animate(to: number): void {
-  cancelAnimationFrame(raf);
-  startVal = display.value;
-  target = to;
-  startTime = performance.now();
-  const step = (now: number) => {
-    const t = Math.min(1, (now - startTime) / props.duration);
-    const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
-    display.value = startVal + (target - startVal) * eased;
-    if (t < 1) raf = requestAnimationFrame(step);
-    else display.value = target;
-  };
-  raf = requestAnimationFrame(step);
-}
-
-watch(
-  () => props.value,
-  (v) => {
-    if (Number.isFinite(v)) animate(v);
-  },
-);
-
-const formatted = computed(() =>
-  display.value.toLocaleString('fr-FR', {
-    minimumFractionDigits: props.decimals,
-    maximumFractionDigits: props.decimals,
-  }),
-);
-
-onUnmounted(() => cancelAnimationFrame(raf));
-</script>
+<!-- Tweened number display (easeOutCubic) for live-updating stats -->
+<template>
+  <span>{{ formatted }}</span>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{ value: number; decimals?: number; duration?: number }>(),
+  { decimals: 0, duration: 600 },
+);
+
+const display = ref(props.value);
+let raf = 0;
+let startVal = props.value;
+let startTime = 0;
+let target = props.value;
+
+function animate(to: number): void {
+  cancelAnimationFrame(raf);
+  startVal = display.value;
+  target = to;
+  startTime = performance.now();
+  const step = (now: number) => {
+    const t = Math.min(1, (now - startTime) / props.duration);
+    const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
+    display.value = startVal + (target - startVal) * eased;
+    if (t < 1) raf = requestAnimationFrame(step);
+    else display.value = target;
+  };
+  raf = requestAnimationFrame(step);
+}
+
+watch(
+  () => props.value,
+  (v) => {
+    if (Number.isFinite(v)) animate(v);
+  },
+);
+
+const formatted = computed(() =>
+  display.value.toLocaleString('fr-FR', {
+    minimumFractionDigits: props.decimals,
+    maximumFractionDigits: props.decimals,
+  }),
+);
+
+onUnmounted(() => cancelAnimationFrame(raf));
+</script>
diff --git a/frontend/src/components/ChatHeader.vue b/frontend/src/components/ChatHeader.vue
index 7baf082..3d96d82 100644
--- a/frontend/src/components/ChatHeader.vue
+++ b/frontend/src/components/ChatHeader.vue
@@ -1,133 +1,133 @@
-<!-- En-tête du chat -->
-<template>
-  <header class="chat-header">
-    <div class="header-left">
-      <span class="xip-title">XIP</span>
-      <span class="chat-label">Chat</span>
-      <span class="online-dot" aria-hidden="true" />
-      <span class="online-count">{{ connectedCount }} connectés</span>
-    </div>
-
-    <div class="header-right">
-      <ThemePicker v-model="theme" />
-      <span v-if="ip" class="me-ip" :title="'Ton pseudo = ton IP'">{{ ip }}</span>
-      <span class="balance" :class="{ 'balance--free': freeMode }" title="Tes crédits XIP">
-        <span class="balance-coin">◈</span>
-        <span class="balance-val">{{ displayBalance() }}</span>
-        <span class="balance-unit">cr</span>
-      </span>
-      <router-link to="/shop" class="shop-link">🛒 Shop</router-link>
-      <span class="channel-badge"># général</span>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { useWallet } from '@/composables/useWallet';
-import { useTheme } from '@/composables/useTheme';
-import ThemePicker from './ThemePicker.vue';
-
-defineProps<{ connectedCount: number }>();
-
-const { ip, freeMode, displayBalance } = useWallet();
-const { theme } = useTheme();
-</script>
-
-<style scoped>
-.chat-header {
-  height: 52px;
-  flex-shrink: 0;
-  background: var(--xip-header-bg);
-  border-bottom: 1px solid var(--xip-header-border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px 0 20px;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.xip-title {
-  font-family: Arial, sans-serif;
-  font-size: 18px;
-  font-weight: bold;
-  color: #7ab8cc;
-}
-
-.chat-label {
-  font-family: Arial, sans-serif;
-  font-size: 14px;
-  font-weight: bold;
-  color: #aaaacc;
-}
-
-.online-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #44aa66;
-}
-
-.online-count {
-  font-family: Arial, sans-serif;
-  font-size: 11px;
-  color: #557766;
-}
-
-.me-ip {
-  font-family: 'Courier New', monospace;
-  font-size: 11px;
-  color: #5566aa;
-}
-
-.balance {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 4px;
-  background: #131322;
-  border: 1px solid #2a2a44;
-  border-radius: 12px;
-  padding: 3px 10px;
-  font-family: 'Courier New', monospace;
-}
-.balance-coin { color: #aa8833; font-size: 11px; }
-.balance-val { color: #ccaa44; font-size: 13px; font-weight: bold; }
-.balance-unit { color: #886633; font-size: 9px; }
-.balance--free .balance-val { color: #44aa77; }
-.balance--free .balance-coin { color: #44aa77; }
-
-.shop-link {
-  font-family: Arial, sans-serif;
-  font-size: 12px;
-  font-weight: bold;
-  color: #6699aa;
-  text-decoration: none;
-  border: 1px solid #33445566;
-  border-radius: 12px;
-  padding: 4px 12px;
-  transition: background 0.15s;
-}
-.shop-link:hover {
-  background: #1a2530;
-}
-
-.channel-badge {
-  background: #131320;
-  border: 1px solid #222233;
-  border-radius: 12px;
-  padding: 4px 14px;
-  font-family: Arial, sans-serif;
-  font-size: 10px;
-  color: #5555aa;
-}
-</style>
+<!-- En-tête du chat -->
+<template>
+  <header class="chat-header">
+    <div class="header-left">
+      <span class="xip-title">XIP</span>
+      <span class="chat-label">Chat</span>
+      <span class="online-dot" aria-hidden="true" />
+      <span class="online-count">{{ connectedCount }} connectés</span>
+    </div>
+
+    <div class="header-right">
+      <ThemePicker v-model="theme" />
+      <span v-if="ip" class="me-ip" :title="'Ton pseudo = ton IP'">{{ ip }}</span>
+      <span class="balance" :class="{ 'balance--free': freeMode }" title="Tes crédits XIP">
+        <span class="balance-coin">◈</span>
+        <span class="balance-val">{{ displayBalance() }}</span>
+        <span class="balance-unit">cr</span>
+      </span>
+      <router-link to="/shop" class="shop-link">🛒 Shop</router-link>
+      <span class="channel-badge"># général</span>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useWallet } from '@/composables/useWallet';
+import { useTheme } from '@/composables/useTheme';
+import ThemePicker from './ThemePicker.vue';
+
+defineProps<{ connectedCount: number }>();
+
+const { ip, freeMode, displayBalance } = useWallet();
+const { theme } = useTheme();
+</script>
+
+<style scoped>
+.chat-header {
+  height: 52px;
+  flex-shrink: 0;
+  background: var(--xip-header-bg);
+  border-bottom: 1px solid var(--xip-header-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px 0 20px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.xip-title {
+  font-family: Arial, sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  color: #7ab8cc;
+}
+
+.chat-label {
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #aaaacc;
+}
+
+.online-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #44aa66;
+}
+
+.online-count {
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  color: #557766;
+}
+
+.me-ip {
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  color: #5566aa;
+}
+
+.balance {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  background: #131322;
+  border: 1px solid #2a2a44;
+  border-radius: 12px;
+  padding: 3px 10px;
+  font-family: 'Courier New', monospace;
+}
+.balance-coin { color: #aa8833; font-size: 11px; }
+.balance-val { color: #ccaa44; font-size: 13px; font-weight: bold; }
+.balance-unit { color: #886633; font-size: 9px; }
+.balance--free .balance-val { color: #44aa77; }
+.balance--free .balance-coin { color: #44aa77; }
+
+.shop-link {
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  font-weight: bold;
+  color: #6699aa;
+  text-decoration: none;
+  border: 1px solid #33445566;
+  border-radius: 12px;
+  padding: 4px 12px;
+  transition: background 0.15s;
+}
+.shop-link:hover {
+  background: #1a2530;
+}
+
+.channel-badge {
+  background: #131320;
+  border: 1px solid #222233;
+  border-radius: 12px;
+  padding: 4px 14px;
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  color: #5555aa;
+}
+</style>
diff --git a/frontend/src/components/FavButton.vue b/frontend/src/components/FavButton.vue
new file mode 100644
index 0000000..104e125
--- /dev/null
+++ b/frontend/src/components/FavButton.vue
@@ -0,0 +1,41 @@
+<!-- Bouton favori réutilisable : ⭐ partout (chat, explorateur, détail).
+     Reflète et bascule l'état de la liste perso centralisée (useFavorites). -->
+<template>
+  <button
+    class="fav-btn"
+    :class="{ 'fav-btn--on': active }"
+    :title="active ? 'Retirer des favoris' : 'Ajouter aux favoris'"
+    :aria-pressed="active"
+    type="button"
+    @click.stop="onClick"
+  >{{ active ? '★' : '☆' }}</button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useFavorites, type FavoriteSource } from '@/composables/useFavorites';
+
+const props = defineProps<{ message: FavoriteSource }>();
+
+const { isFav, toggle } = useFavorites();
+const active = computed(() => isFav(props.message.id));
+
+function onClick(): void {
+  toggle(props.message);
+}
+</script>
+
+<style scoped>
+.fav-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: 13px;
+  line-height: 1;
+  color: #44446a;
+  transition: color 0.12s, transform 0.12s;
+}
+.fav-btn:hover { color: #ffcc44; transform: scale(1.15); }
+.fav-btn--on { color: #ffcc44; }
+</style>
diff --git a/frontend/src/components/InlineCasinoAd.vue b/frontend/src/components/InlineCasinoAd.vue
index af5db4b..1227618 100644
--- a/frontend/src/components/InlineCasinoAd.vue
+++ b/frontend/src/components/InlineCasinoAd.vue
@@ -1,152 +1,152 @@
-<!-- Pub casino néon : overlay dans le feed, pilotée par l'inventaire de pubs -->
-<template>
-  <div v-if="ad" class="casino">
-    <div class="casino-head">
-      <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">{{ ad.subtitle || 'sur votre 1er dépôt • 500€ max' }}</p>
-
-      <div class="slots">
-        <span class="suit suit--diamond">♦</span>
-        <span class="seven">7</span>
-        <span class="seven">7</span>
-        <span class="seven">7</span>
-        <span class="suit suit--spade">♠</span>
-      </div>
-
-      <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;
-  background: #100400;
-  border: 2px solid #ff2200;
-  border-radius: 6px;
-  box-shadow: none;
-}
-
-/* ── En-tête rouge ── */
-.casino-head {
-  background: #1a0400;
-  border-radius: 4px 4px 0 0;
-  border-bottom: 1px solid #440000;
-  padding: 10px 8px;
-  text-align: center;
-}
-
-.casino-title {
-  font-family: Arial, sans-serif;
-  font-size: 15px;
-  font-weight: bold;
-  color: #ff5533;
-
-  margin: 0;
-}
-
-.casino-subtitle {
-  font-family: Arial, sans-serif;
-  font-size: 9px;
-  letter-spacing: 2px;
-  color: #882200;
-  margin: 4px 0 0;
-}
-
-/* ── Corps ── */
-.casino-body {
-  padding: 12px;
-  text-align: center;
-}
-
-.bonus {
-  font-family: Arial, sans-serif;
-  font-size: 32px;
-  font-weight: bold;
-  color: #ffdd00;
-
-  margin: 0;
-}
-
-.bonus-sub {
-  font-family: Arial, sans-serif;
-  font-size: 11px;
-  color: #cc6600;
-  margin: 4px 0 10px;
-}
-
-/* ── Machines à sous ── */
-.slots {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.suit {
-  font-size: 24px;
-}
-.suit--diamond { color: #ffaa44; }
-.suit--spade   { color: #ffaa44; }
-
-.seven {
-  font-size: 30px;
-  font-weight: bold;
-  color: #ffffff;
-
-}
-
-/* ── CTA ── */
-.casino-cta {
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 8px 0;
-  background: #220000;
-  border: 1.5px solid #ff2200;
-  border-radius: 19px;
-  color: #ff4422;
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-  font-weight: bold;
-  cursor: pointer;
-  text-align: center;
-  text-decoration: none;
-  transition: background 0.15s;
-}
-
-.casino-cta:hover {
-
-}
-
-.disclaimer {
-  font-family: Arial, sans-serif;
-  font-size: 7px;
-  color: #440000;
-  margin-top: 8px;
-}
-</style>
+<!-- Pub casino néon : overlay dans le feed, pilotée par l'inventaire de pubs -->
+<template>
+  <div v-if="ad" class="casino">
+    <div class="casino-head">
+      <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">{{ ad.subtitle || 'sur votre 1er dépôt • 500€ max' }}</p>
+
+      <div class="slots">
+        <span class="suit suit--diamond">♦</span>
+        <span class="seven">7</span>
+        <span class="seven">7</span>
+        <span class="seven">7</span>
+        <span class="suit suit--spade">♠</span>
+      </div>
+
+      <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;
+  background: #100400;
+  border: 2px solid #ff2200;
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+/* ── En-tête rouge ── */
+.casino-head {
+  background: #1a0400;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid #440000;
+  padding: 10px 8px;
+  text-align: center;
+}
+
+.casino-title {
+  font-family: Arial, sans-serif;
+  font-size: 15px;
+  font-weight: bold;
+  color: #ff5533;
+
+  margin: 0;
+}
+
+.casino-subtitle {
+  font-family: Arial, sans-serif;
+  font-size: 9px;
+  letter-spacing: 2px;
+  color: #882200;
+  margin: 4px 0 0;
+}
+
+/* ── Corps ── */
+.casino-body {
+  padding: 12px;
+  text-align: center;
+}
+
+.bonus {
+  font-family: Arial, sans-serif;
+  font-size: 32px;
+  font-weight: bold;
+  color: #ffdd00;
+
+  margin: 0;
+}
+
+.bonus-sub {
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  color: #cc6600;
+  margin: 4px 0 10px;
+}
+
+/* ── Machines à sous ── */
+.slots {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.suit {
+  font-size: 24px;
+}
+.suit--diamond { color: #ffaa44; }
+.suit--spade   { color: #ffaa44; }
+
+.seven {
+  font-size: 30px;
+  font-weight: bold;
+  color: #ffffff;
+
+}
+
+/* ── CTA ── */
+.casino-cta {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 0;
+  background: #220000;
+  border: 1.5px solid #ff2200;
+  border-radius: 19px;
+  color: #ff4422;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.casino-cta:hover {
+
+}
+
+.disclaimer {
+  font-family: Arial, sans-serif;
+  font-size: 7px;
+  color: #440000;
+  margin-top: 8px;
+}
+</style>
diff --git a/frontend/src/components/MessageAttachments.vue b/frontend/src/components/MessageAttachments.vue
index 439fc71..dafce69 100644
--- a/frontend/src/components/MessageAttachments.vue
+++ b/frontend/src/components/MessageAttachments.vue
@@ -1,80 +1,80 @@
-<!-- Renders a message's attachments: image previews inline, everything else as a download link -->
-<template>
-  <div class="attachments">
-    <template v-for="a in attachments" :key="a.id">
-      <a
-        v-if="isImage(a)"
-        class="att-image"
-        :href="urlFor(a.id)"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <img :src="urlFor(a.id)" :alt="a.filename" loading="lazy" />
-      </a>
-      <a
-        v-else
-        class="att-file"
-        :href="urlFor(a.id)"
-        target="_blank"
-        rel="noopener noreferrer"
-        :download="a.filename"
-      >
-        <span class="att-icon">{{ isExe(a) ? '⚠️' : '📎' }}</span>
-        <span class="att-name">{{ a.filename }}</span>
-        <span class="att-size">{{ kb(a.size) }}</span>
-        <span v-if="isExe(a)" class="att-warn">exécutable</span>
-      </a>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Attachment } from '@/composables/useMessages';
-import { useAttachments } from '@/composables/useAttachments';
-
-defineProps<{ attachments: Attachment[] }>();
-
-const { kb, urlFor } = useAttachments();
-
-function isImage(a: Attachment): boolean {
-  return a.mimeType.startsWith('image/');
-}
-function isExe(a: Attachment): boolean {
-  return /\.(exe|bat|cmd|msi|sh|app)$/i.test(a.filename) || a.mimeType === 'application/x-msdownload';
-}
-</script>
-
-<style scoped>
-.attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 6px 25px 0;
-}
-.att-image img {
-  max-width: 220px;
-  max-height: 160px;
-  border-radius: 8px;
-  border: 1px solid #222234;
-  display: block;
-}
-.att-file {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  background: #141420;
-  border: 1px solid #222234;
-  border-radius: 10px;
-  padding: 7px 12px;
-  text-decoration: none;
-  font-family: Arial, sans-serif;
-}
-.att-file:hover { background: #1c1c2e; }
-.att-icon { font-size: 14px; }
-.att-name { font-size: 12px; color: #aaccdd; }
-.att-size { font-size: 10px; color: #555577; }
-.att-warn {
-  font-size: 8px; font-weight: bold; color: #ff5544;
-  background: #2a0a08; border: 1px solid #662211; border-radius: 4px; padding: 1px 5px;
-}
-</style>
+<!-- Renders a message's attachments: image previews inline, everything else as a download link -->
+<template>
+  <div class="attachments">
+    <template v-for="a in attachments" :key="a.id">
+      <a
+        v-if="isImage(a)"
+        class="att-image"
+        :href="urlFor(a.id)"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img :src="urlFor(a.id)" :alt="a.filename" loading="lazy" />
+      </a>
+      <a
+        v-else
+        class="att-file"
+        :href="urlFor(a.id)"
+        target="_blank"
+        rel="noopener noreferrer"
+        :download="a.filename"
+      >
+        <span class="att-icon">{{ isExe(a) ? '⚠️' : '📎' }}</span>
+        <span class="att-name">{{ a.filename }}</span>
+        <span class="att-size">{{ kb(a.size) }}</span>
+        <span v-if="isExe(a)" class="att-warn">exécutable</span>
+      </a>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Attachment } from '@/composables/useMessages';
+import { useAttachments } from '@/composables/useAttachments';
+
+defineProps<{ attachments: Attachment[] }>();
+
+const { kb, urlFor } = useAttachments();
+
+function isImage(a: Attachment): boolean {
+  return a.mimeType.startsWith('image/');
+}
+function isExe(a: Attachment): boolean {
+  return /\.(exe|bat|cmd|msi|sh|app)$/i.test(a.filename) || a.mimeType === 'application/x-msdownload';
+}
+</script>
+
+<style scoped>
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 25px 0;
+}
+.att-image img {
+  max-width: 220px;
+  max-height: 160px;
+  border-radius: 8px;
+  border: 1px solid #222234;
+  display: block;
+}
+.att-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #141420;
+  border: 1px solid #222234;
+  border-radius: 10px;
+  padding: 7px 12px;
+  text-decoration: none;
+  font-family: Arial, sans-serif;
+}
+.att-file:hover { background: #1c1c2e; }
+.att-icon { font-size: 14px; }
+.att-name { font-size: 12px; color: #aaccdd; }
+.att-size { font-size: 10px; color: #555577; }
+.att-warn {
+  font-size: 8px; font-weight: bold; color: #ff5544;
+  background: #2a0a08; border: 1px solid #662211; border-radius: 4px; padding: 1px 5px;
+}
+</style>
diff --git a/frontend/src/components/MessageItem.vue b/frontend/src/components/MessageItem.vue
index 0a578f4..247d5ad 100644
--- a/frontend/src/components/MessageItem.vue
+++ b/frontend/src/components/MessageItem.vue
@@ -1,238 +1,240 @@
-<!-- Un message avec ses éventuelles réponses, perks d'auteur, rich content et pièces jointes -->
-<template>
-  <div class="message-item">
-    <!-- Auteur + horodatage -->
-    <div class="message-meta">
-      <span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, message.authorIp)" :title="message.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
-        <span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
-        <span class="ip" :style="ipStyle(message)">{{ message.authorIp }}</span>
-        <span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
-        <span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
-      </span>
-      <span v-if="message.authorGeo && geoLabel(message.authorGeo)" class="geo-tag">
-        <a :href="geoLink(message.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
-          <img v-if="message.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`" :alt="message.authorGeo.countryCode" class="geo-flag" />
-          <span v-else>🏠</span>
-          {{ geoLabel(message.authorGeo) }}
-        </a>
-      </span>
-      <span class="ts">{{ fmt(message.createdAt) }}</span>
-      <button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: message.authorIp })" type="button">↩ répondre</button>
-    </div>
-
-    <!-- Contenu : riche (iframe sandbox) ou texte simple -->
-    <RichContent
-      v-if="message.richMode && message.richMode !== 'none' && message.richContent"
-      :mode="message.richMode"
-      :content="message.richContent"
-    />
-    <p v-else class="message-body">{{ message.content }}</p>
-
-    <!-- Pièces jointes -->
-    <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
-
-    <!-- Réponses -->
-    <div
-      v-for="reply in message.replies"
-      :key="reply.id"
-      class="reply"
-    >
-      <span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, reply.authorIp)" :title="reply.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
-        <span v-if="petsLeft(reply)" class="pet pet--sm">{{ petsLeft(reply) }}</span>
-        <span class="ip reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
-        <span v-if="petsRight(reply)" class="pet pet--sm">{{ petsRight(reply) }}</span>
-      </span>
-      <span v-if="reply.authorGeo && geoLabel(reply.authorGeo)" class="geo-tag geo-tag--sm">
-        <a :href="geoLink(reply.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
-          <img v-if="reply.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${reply.authorGeo.countryCode.toLowerCase()}.png`" :alt="reply.authorGeo.countryCode" class="geo-flag" />
-          <span v-else>🏠</span>
-          {{ geoLabel(reply.authorGeo) }}
-        </a>
-      </span>
-      <span class="ts">{{ fmt(reply.createdAt) }}</span>
-      <button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: reply.authorIp })" type="button">↩</button>
-      <RichContent
-        v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
-        :mode="reply.richMode"
-        :content="reply.richContent"
-      />
-      <p v-else class="message-body reply-body">{{ reply.content }}</p>
-      <MessageAttachments v-if="reply.attachments?.length" :attachments="reply.attachments" />
-    </div>
-
-    <div class="divider" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Message } from '@/composables/useMessages';
-import { openContextMenu } from '@/composables/useContextMenu';
-import { IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
-import { useMessageItem } from '@/composables/useMessageItem';
-import RichContent from './RichContent.vue';
-import MessageAttachments from './MessageAttachments.vue';
-
-const props = defineProps<{ message: Message; myIp?: string }>();
-defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
-
-const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs } = useMessageItem();
-
-function openIpMenu(e: MouseEvent, ip: string): void {
-  if (ip !== props.myIp) return;
-
-  const hasElementSkin = !!myPerks.value.elementSkin;
-  const ownedPets = myPerks.value.pets ?? [];
-  const hasPets = ownedPets.length > 0;
-
-  // Nothing to show if no perk unlocks customization.
-  if (!hasElementSkin && !hasPets) return;
-
-  const currentColor = prefs.ipColors[ip] ?? 'auto';
-  const currentPet   = ip in prefs.ipPets ? prefs.ipPets[ip] : '__inherit__';
-
-  const items: import('@/composables/useContextMenu').ContextMenuItem[] = [];
-
-  if (hasElementSkin) {
-    items.push({ value: '__h_color', label: 'Couleur', isHeader: true });
-    items.push(...IP_COLOR_OPTIONS.map((o) => ({ value: `color:${o.value}`, label: o.label, swatch: o.swatch })));
-  }
-
-  if (hasPets) {
-    items.push({ value: '__h_pet', label: 'Pet', isHeader: true });
-    items.push({ value: 'pet:__inherit__', label: '↩ défaut' });
-    // Show only the pets the user actually owns.
-    const seen = new Set<string>();
-    for (const p of ownedPets) {
-      if (!seen.has(p.char)) {
-        seen.add(p.char);
-        items.push({ value: `pet:${p.char}`, label: p.char });
-      }
-    }
-  }
-
-  openContextMenu({
-    x: e.clientX,
-    y: e.clientY,
-    title: ip,
-    items,
-    current: currentColor !== 'auto' ? `color:${currentColor}` : `pet:${currentPet}`,
-    onSelect: (v) => {
-      if (v.startsWith('color:')) {
-        prefs.ipColors[ip] = v.slice(6);
-      } else if (v.startsWith('pet:')) {
-        const pet = v.slice(4);
-        if (pet === '__inherit__') {
-          delete prefs.ipPets[ip];
-        } else {
-          prefs.ipPets[ip] = pet;
-        }
-      }
-    },
-  });
-}
-
-</script>
-
-<style scoped>
-.message-item {
-  padding: 4px 0;
-}
-
-.message-meta {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 0 25px;
-}
-
-.ip-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
-.pet { font-size: 12px; filter: drop-shadow(0 0 3px currentColor); }
-.pet--sm { font-size: 11px; }
-.vip-badge {
-  font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
-  color: #ffcc44; background: #2a2206; border: 1px solid #665511; border-radius: 4px;
-  padding: 0 4px; margin-left: 4px; letter-spacing: 0.5px;
-}
-
-.ip {
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.ts {
-  font-family: 'Courier New', monospace;
-  font-size: 10px;
-  color: #303030;
-}
-
-.reply-btn {
-  background: none; border: none; cursor: pointer;
-  font-family: Arial, sans-serif; font-size: 10px; color: #33335a;
-  padding: 0; opacity: 0; transition: opacity 0.12s, color 0.12s;
-}
-.message-item:hover .reply-btn,
-.reply:hover .reply-btn { opacity: 1; }
-.reply-btn:hover { color: #00ccff; }
-
-.message-body {
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-  color: #c0c0c0;
-  padding: 3px 25px 0;
-  margin: 0;
-  word-break: break-word;
-}
-
-.divider {
-  height: 1px;
-  background: #141420;
-  margin: 8px 25px 0;
-}
-
-/* ── Réponses ── */
-.reply {
-  margin: 6px 25px 0 45px;
-  border-left: 2px solid #1a1a2a;
-  padding-left: 10px;
-}
-
-.reply-ip {
-  font-size: 11px;
-}
-
-.reply-body {
-  font-size: 12px;
-  padding-left: 0;
-}
-
-.geo-tag {
-  font-family: Arial, sans-serif;
-  font-size: 10px;
-  color: #44445a;
-  white-space: nowrap;
-}
-.geo-tag--sm { font-size: 9px; }
-.geo-link {
-  color: inherit;
-  text-decoration: none;
-  opacity: 0.7;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  transition: opacity 0.12s, color 0.12s;
-}
-.geo-link:hover {
-  color: #5588cc;
-  opacity: 1;
-  text-decoration: underline;
-}
-.geo-flag {
-  width: 16px;
-  height: 12px;
-  object-fit: cover;
-  border-radius: 2px;
-  vertical-align: middle;
-  flex-shrink: 0;
-}
-</style>
+<!-- Un message avec ses éventuelles réponses, perks d'auteur, rich content et pièces jointes -->
+<template>
+  <div class="message-item">
+    <!-- Auteur + horodatage -->
+    <div class="message-meta">
+      <span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, message.authorIp)" :title="message.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
+        <span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
+        <span class="ip" :style="ipStyle(message)">{{ message.authorIp }}</span>
+        <span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
+        <span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
+      </span>
+      <span v-if="message.authorGeo && geoLabel(message.authorGeo)" class="geo-tag">
+        <a :href="geoLink(message.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
+          <img v-if="message.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`" :alt="message.authorGeo.countryCode" class="geo-flag" />
+          <span v-else>🏠</span>
+          {{ geoLabel(message.authorGeo) }}
+        </a>
+      </span>
+      <span class="ts">{{ fmt(message.createdAt) }}</span>
+      <button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: message.authorIp })" type="button">↩ répondre</button>
+      <FavButton :message="message" />
+    </div>
+
+    <!-- Contenu : riche (iframe sandbox) ou texte simple -->
+    <RichContent
+      v-if="message.richMode && message.richMode !== 'none' && message.richContent"
+      :mode="message.richMode"
+      :content="message.richContent"
+    />
+    <p v-else class="message-body">{{ message.content }}</p>
+
+    <!-- Pièces jointes -->
+    <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
+
+    <!-- Réponses -->
+    <div
+      v-for="reply in message.replies"
+      :key="reply.id"
+      class="reply"
+    >
+      <span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, reply.authorIp)" :title="reply.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
+        <span v-if="petsLeft(reply)" class="pet pet--sm">{{ petsLeft(reply) }}</span>
+        <span class="ip reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
+        <span v-if="petsRight(reply)" class="pet pet--sm">{{ petsRight(reply) }}</span>
+      </span>
+      <span v-if="reply.authorGeo && geoLabel(reply.authorGeo)" class="geo-tag geo-tag--sm">
+        <a :href="geoLink(reply.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
+          <img v-if="reply.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${reply.authorGeo.countryCode.toLowerCase()}.png`" :alt="reply.authorGeo.countryCode" class="geo-flag" />
+          <span v-else>🏠</span>
+          {{ geoLabel(reply.authorGeo) }}
+        </a>
+      </span>
+      <span class="ts">{{ fmt(reply.createdAt) }}</span>
+      <button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: reply.authorIp })" type="button">↩</button>
+      <RichContent
+        v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
+        :mode="reply.richMode"
+        :content="reply.richContent"
+      />
+      <p v-else class="message-body reply-body">{{ reply.content }}</p>
+      <MessageAttachments v-if="reply.attachments?.length" :attachments="reply.attachments" />
+    </div>
+
+    <div class="divider" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Message } from '@/composables/useMessages';
+import { openContextMenu } from '@/composables/useContextMenu';
+import { IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
+import { useMessageItem } from '@/composables/useMessageItem';
+import RichContent from './RichContent.vue';
+import MessageAttachments from './MessageAttachments.vue';
+import FavButton from './FavButton.vue';
+
+const props = defineProps<{ message: Message; myIp?: string }>();
+defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
+
+const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs } = useMessageItem();
+
+function openIpMenu(e: MouseEvent, ip: string): void {
+  if (ip !== props.myIp) return;
+
+  const hasElementSkin = !!myPerks.value.elementSkin;
+  const ownedPets = myPerks.value.pets ?? [];
+  const hasPets = ownedPets.length > 0;
+
+  // Nothing to show if no perk unlocks customization.
+  if (!hasElementSkin && !hasPets) return;
+
+  const currentColor = prefs.ipColors[ip] ?? 'auto';
+  const currentPet   = ip in prefs.ipPets ? prefs.ipPets[ip] : '__inherit__';
+
+  const items: import('@/composables/useContextMenu').ContextMenuItem[] = [];
+
+  if (hasElementSkin) {
+    items.push({ value: '__h_color', label: 'Couleur', isHeader: true });
+    items.push(...IP_COLOR_OPTIONS.map((o) => ({ value: `color:${o.value}`, label: o.label, swatch: o.swatch })));
+  }
+
+  if (hasPets) {
+    items.push({ value: '__h_pet', label: 'Pet', isHeader: true });
+    items.push({ value: 'pet:__inherit__', label: '↩ défaut' });
+    // Show only the pets the user actually owns.
+    const seen = new Set<string>();
+    for (const p of ownedPets) {
+      if (!seen.has(p.char)) {
+        seen.add(p.char);
+        items.push({ value: `pet:${p.char}`, label: p.char });
+      }
+    }
+  }
+
+  openContextMenu({
+    x: e.clientX,
+    y: e.clientY,
+    title: ip,
+    items,
+    current: currentColor !== 'auto' ? `color:${currentColor}` : `pet:${currentPet}`,
+    onSelect: (v) => {
+      if (v.startsWith('color:')) {
+        prefs.ipColors[ip] = v.slice(6);
+      } else if (v.startsWith('pet:')) {
+        const pet = v.slice(4);
+        if (pet === '__inherit__') {
+          delete prefs.ipPets[ip];
+        } else {
+          prefs.ipPets[ip] = pet;
+        }
+      }
+    },
+  });
+}
+
+</script>
+
+<style scoped>
+.message-item {
+  padding: 4px 0;
+}
+
+.message-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 0 25px;
+}
+
+.ip-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
+.pet { font-size: 12px; filter: drop-shadow(0 0 3px currentColor); }
+.pet--sm { font-size: 11px; }
+.vip-badge {
+  font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
+  color: #ffcc44; background: #2a2206; border: 1px solid #665511; border-radius: 4px;
+  padding: 0 4px; margin-left: 4px; letter-spacing: 0.5px;
+}
+
+.ip {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ts {
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  color: #303030;
+}
+
+.reply-btn {
+  background: none; border: none; cursor: pointer;
+  font-family: Arial, sans-serif; font-size: 10px; color: #33335a;
+  padding: 0; opacity: 0; transition: opacity 0.12s, color 0.12s;
+}
+.message-item:hover .reply-btn,
+.reply:hover .reply-btn { opacity: 1; }
+.reply-btn:hover { color: #00ccff; }
+
+.message-body {
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  color: #c0c0c0;
+  padding: 3px 25px 0;
+  margin: 0;
+  word-break: break-word;
+}
+
+.divider {
+  height: 1px;
+  background: #141420;
+  margin: 8px 25px 0;
+}
+
+/* ── Réponses ── */
+.reply {
+  margin: 6px 25px 0 45px;
+  border-left: 2px solid #1a1a2a;
+  padding-left: 10px;
+}
+
+.reply-ip {
+  font-size: 11px;
+}
+
+.reply-body {
+  font-size: 12px;
+  padding-left: 0;
+}
+
+.geo-tag {
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  color: #44445a;
+  white-space: nowrap;
+}
+.geo-tag--sm { font-size: 9px; }
+.geo-link {
+  color: inherit;
+  text-decoration: none;
+  opacity: 0.7;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: opacity 0.12s, color 0.12s;
+}
+.geo-link:hover {
+  color: #5588cc;
+  opacity: 1;
+  text-decoration: underline;
+}
+.geo-flag {
+  width: 16px;
+  height: 12px;
+  object-fit: cover;
+  border-radius: 2px;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+</style>
diff --git a/frontend/src/components/MessageItemBubble.vue b/frontend/src/components/MessageItemBubble.vue
index 7ca9cd3..47d7125 100644
--- a/frontend/src/components/MessageItemBubble.vue
+++ b/frontend/src/components/MessageItemBubble.vue
@@ -1,154 +1,159 @@
-<!-- Variante "bulles" du message — style chat mobile -->
-<template>
-  <div class="bubble-item" :class="{ 'bubble-item--mine': isMine }">
-    <div class="bubble-header">
-      <span class="bubble-ip" :style="ipStyle(message)">
-        <span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
-        {{ message.authorIp }}
-        <span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
-        <span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
-      </span>
-      <span class="bubble-ts">{{ fmt(message.createdAt) }}</span>
-      <a
-        v-if="message.authorGeo && geoLabel(message.authorGeo)"
-        :href="geoLink(message.authorGeo)"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="geo-link"
-      >
-        <img
-          v-if="message.authorGeo.countryCode"
-          :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
-          :alt="message.authorGeo.countryCode"
-          class="geo-flag"
-        />
-        <span v-else>🏠</span>
-      </a>
-    </div>
-
-    <!-- Contenu -->
-    <div class="bubble" :class="{ 'bubble--mine': isMine }">
-      <RichContent
-        v-if="message.richMode && message.richMode !== 'none' && message.richContent"
-        :mode="message.richMode"
-        :content="message.richContent"
-      />
-      <span v-else>{{ message.content }}</span>
-    </div>
-
-    <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
-
-    <!-- Réponses en thread -->
-    <div v-if="message.replies?.length" class="bubble-thread">
-      <div v-for="reply in message.replies" :key="reply.id" class="bubble-reply">
-        <span class="bubble-reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
-        <span class="bubble-reply-ts">{{ fmt(reply.createdAt) }}</span>
-        <RichContent
-          v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
-          :mode="reply.richMode"
-          :content="reply.richContent"
-        />
-        <span v-else class="bubble-reply-body">{{ reply.content }}</span>
-      </div>
-    </div>
-
-    <button
-      class="bubble-reply-btn"
-      type="button"
-      @click="$emit('reply', { id: message.id, authorIp: message.authorIp })"
-    >↩</button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { Message } from '@/composables/useMessages';
-import { useMessageItem } from '@/composables/useMessageItem';
-import RichContent from './RichContent.vue';
-import MessageAttachments from './MessageAttachments.vue';
-
-const props = defineProps<{ message: Message; myIp?: string }>();
-defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
-
-const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink } = useMessageItem();
-
-const isMine = computed(() => props.message.authorIp === props.myIp);
-</script>
-
-<style scoped>
-.bubble-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 4px 12px;
-  gap: 3px;
-  position: relative;
-}
-.bubble-item--mine { align-items: flex-end; }
-
-.bubble-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: 'Courier New', monospace;
-  font-size: 10px;
-}
-.bubble-ip { font-weight: bold; font-size: 11px; }
-.bubble-ts { color: #303040; }
-.pet { font-size: 11px; }
-.vip-badge {
-  font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
-  color: #ffcc44; background: #2a2206; border: 1px solid #665511;
-  border-radius: 4px; padding: 0 4px; margin-left: 2px;
-}
-
-.bubble {
-  background: var(--xip-bubble-other);
-  border: 1px solid var(--xip-bubble-other-border);
-  border-radius: 14px 14px 14px 4px;
-  padding: 7px 13px;
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-  color: #e0e0e8;
-  max-width: 72%;
-  word-break: break-word;
-  line-height: 1.4;
-}
-.bubble--mine {
-  background: var(--xip-bubble-sent);
-  border-color: var(--xip-bubble-sent-border);
-  border-radius: 14px 14px 4px 14px;
-  color: #eef4f0;
-}
-
-.bubble-thread {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding-left: 12px;
-  border-left: 2px solid #1a1a2e;
-  margin-top: 2px;
-}
-.bubble-reply {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  font-family: Arial, sans-serif;
-  font-size: 11px;
-  color: #888;
-}
-.bubble-reply-ip { font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; }
-.bubble-reply-ts  { font-family: 'Courier New', monospace; font-size: 9px; color: #303040; }
-.bubble-reply-body { color: #888; }
-
-.bubble-reply-btn {
-  background: none; border: none; cursor: pointer;
-  font-size: 10px; color: #33335a;
-  padding: 0; opacity: 0; transition: opacity 0.12s;
-}
-.bubble-item:hover .bubble-reply-btn { opacity: 1; }
-.bubble-reply-btn:hover { color: #00ccff; }
-
-.geo-link { color: #44445a; text-decoration: none; display: inline-flex; align-items: center; }
-.geo-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
-</style>
+<!-- Variante "bulles" du message — style chat mobile -->
+<template>
+  <div class="bubble-item" :class="{ 'bubble-item--mine': isMine }">
+    <div class="bubble-header">
+      <span class="bubble-ip" :style="ipStyle(message)">
+        <span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
+        {{ message.authorIp }}
+        <span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
+        <span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
+      </span>
+      <span class="bubble-ts">{{ fmt(message.createdAt) }}</span>
+      <a
+        v-if="message.authorGeo && geoLabel(message.authorGeo)"
+        :href="geoLink(message.authorGeo)"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="geo-link"
+      >
+        <img
+          v-if="message.authorGeo.countryCode"
+          :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
+          :alt="message.authorGeo.countryCode"
+          class="geo-flag"
+        />
+        <span v-else>🏠</span>
+      </a>
+    </div>
+
+    <!-- Contenu -->
+    <div class="bubble" :class="{ 'bubble--mine': isMine }">
+      <RichContent
+        v-if="message.richMode && message.richMode !== 'none' && message.richContent"
+        :mode="message.richMode"
+        :content="message.richContent"
+      />
+      <span v-else>{{ message.content }}</span>
+    </div>
+
+    <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
+
+    <!-- Réponses en thread -->
+    <div v-if="message.replies?.length" class="bubble-thread">
+      <div v-for="reply in message.replies" :key="reply.id" class="bubble-reply">
+        <span class="bubble-reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
+        <span class="bubble-reply-ts">{{ fmt(reply.createdAt) }}</span>
+        <RichContent
+          v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
+          :mode="reply.richMode"
+          :content="reply.richContent"
+        />
+        <span v-else class="bubble-reply-body">{{ reply.content }}</span>
+      </div>
+    </div>
+
+    <div class="bubble-actions">
+      <button
+        class="bubble-reply-btn"
+        type="button"
+        @click="$emit('reply', { id: message.id, authorIp: message.authorIp })"
+      >↩</button>
+      <FavButton :message="message" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Message } from '@/composables/useMessages';
+import { useMessageItem } from '@/composables/useMessageItem';
+import RichContent from './RichContent.vue';
+import MessageAttachments from './MessageAttachments.vue';
+import FavButton from './FavButton.vue';
+
+const props = defineProps<{ message: Message; myIp?: string }>();
+defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
+
+const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink } = useMessageItem();
+
+const isMine = computed(() => props.message.authorIp === props.myIp);
+</script>
+
+<style scoped>
+.bubble-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 4px 12px;
+  gap: 3px;
+  position: relative;
+}
+.bubble-item--mine { align-items: flex-end; }
+
+.bubble-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+}
+.bubble-ip { font-weight: bold; font-size: 11px; }
+.bubble-ts { color: #303040; }
+.pet { font-size: 11px; }
+.vip-badge {
+  font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
+  color: #ffcc44; background: #2a2206; border: 1px solid #665511;
+  border-radius: 4px; padding: 0 4px; margin-left: 2px;
+}
+
+.bubble {
+  background: var(--xip-bubble-other);
+  border: 1px solid var(--xip-bubble-other-border);
+  border-radius: 14px 14px 14px 4px;
+  padding: 7px 13px;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  color: #e0e0e8;
+  max-width: 72%;
+  word-break: break-word;
+  line-height: 1.4;
+}
+.bubble--mine {
+  background: var(--xip-bubble-sent);
+  border-color: var(--xip-bubble-sent-border);
+  border-radius: 14px 14px 4px 14px;
+  color: #eef4f0;
+}
+
+.bubble-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 12px;
+  border-left: 2px solid #1a1a2e;
+  margin-top: 2px;
+}
+.bubble-reply {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  color: #888;
+}
+.bubble-reply-ip { font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; }
+.bubble-reply-ts  { font-family: 'Courier New', monospace; font-size: 9px; color: #303040; }
+.bubble-reply-body { color: #888; }
+
+.bubble-actions { display: flex; align-items: center; gap: 8px; }
+.bubble-reply-btn {
+  background: none; border: none; cursor: pointer;
+  font-size: 10px; color: #33335a;
+  padding: 0; opacity: 0; transition: opacity 0.12s;
+}
+.bubble-item:hover .bubble-reply-btn { opacity: 1; }
+.bubble-reply-btn:hover { color: #00ccff; }
+
+.geo-link { color: #44445a; text-decoration: none; display: inline-flex; align-items: center; }
+.geo-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
+</style>
diff --git a/frontend/src/components/MessageItemCompact.vue b/frontend/src/components/MessageItemCompact.vue
index c908b77..9985169 100644
--- a/frontend/src/components/MessageItemCompact.vue
+++ b/frontend/src/components/MessageItemCompact.vue
@@ -23,6 +23,7 @@
         type="button"
         @click="$emit('reply', { id: message.id, authorIp: message.authorIp })"
       >↩</button>
+      <FavButton :message="message" />
     </div>
 
     <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
@@ -50,6 +51,7 @@ import type { Message } from '@/composables/useMessages';
 import { useMessageItem } from '@/composables/useMessageItem';
 import RichContent from './RichContent.vue';
 import MessageAttachments from './MessageAttachments.vue';
+import FavButton from './FavButton.vue';
 
 defineProps<{ message: Message; myIp?: string }>();
 defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
diff --git a/frontend/src/components/MessageList.vue b/frontend/src/components/MessageList.vue
index dd4dfa1..3ec9572 100644
--- a/frontend/src/components/MessageList.vue
+++ b/frontend/src/components/MessageList.vue
@@ -1,98 +1,98 @@
-<!-- Zone de messages scrollable avec la pub casino en overlay -->
-<template>
-  <div class="feed-wrapper">
-    <div ref="listEl" class="feed-scroll">
-      <TransitionGroup name="msg" tag="div">
-        <component
-          :is="messageComponent"
-          v-for="msg in messages"
-          :key="msg.id"
-          :message="msg"
-          :my-ip="myIp"
-          @reply="$emit('reply', $event)"
-        />
-      </TransitionGroup>
-      <div v-if="messages.length === 0" class="feed-empty">
-        Aucun message pour l'instant.
-      </div>
-    </div>
-
-    <!-- Pub casino : overlay absolu sur la droite du feed (masqué si NoAds) -->
-    <InlineCasinoAd v-if="!hideAds" class="casino-overlay" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue';
-import type { Message } from '@/composables/useMessages';
-import { useTheme, THEME_LAYOUT, type Layout } from '@/composables/useTheme';
-import MessageItem from './MessageItem.vue';
-import MessageItemBubble from './MessageItemBubble.vue';
-import MessageItemCompact from './MessageItemCompact.vue';
-import InlineCasinoAd from './InlineCasinoAd.vue';
-
-const props = defineProps<{ messages: Message[]; hideAds?: boolean; myIp?: string }>();
-defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
-
-const { theme } = useTheme();
-
-// One component per layout family. The `?? MessageItem` fallback guarantees a
-// missing/unknown layout can never produce `<component :is="undefined">`.
-const LAYOUT_COMPONENT: Record<Layout, typeof MessageItem> = {
-  classic: MessageItem,
-  bubble: MessageItemBubble,
-  compact: MessageItemCompact,
-};
-const messageComponent = computed(
-  () => LAYOUT_COMPONENT[THEME_LAYOUT[theme.value]] ?? MessageItem,
-);
-
-const listEl = ref<HTMLElement | null>(null);
-
-watch(
-  () => props.messages.length,
-  async () => {
-    await nextTick();
-    listEl.value?.scrollTo({ top: listEl.value.scrollHeight, behavior: 'smooth' });
-  },
-);
-</script>
-
-<style scoped>
-.feed-wrapper {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  min-height: 0;
-}
-
-.feed-scroll {
-  height: 100%;
-  overflow-y: auto;
-  padding: 8px 0;
-  scrollbar-width: thin;
-  scrollbar-color: #252535 #080810;
-}
-.feed-scroll::-webkit-scrollbar       { width: 8px; }
-.feed-scroll::-webkit-scrollbar-track { background: #080810; }
-.feed-scroll::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }
-
-.feed-empty {
-  padding: 48px 25px;
-  color: #2a2a44;
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-}
-
-.casino-overlay {
-  position: absolute;
-  right: 30px;
-  top: 20px;
-  pointer-events: none;
-}
-.casino-overlay :deep(.casino-cta) { pointer-events: all; }
-
-/* Transition d'entrée des nouveaux messages */
-.msg-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; }
-.msg-enter-from   { opacity: 0; transform: translateY(6px); }
-</style>
+<!-- Zone de messages scrollable avec la pub casino en overlay -->
+<template>
+  <div class="feed-wrapper">
+    <div ref="listEl" class="feed-scroll">
+      <TransitionGroup name="msg" tag="div">
+        <component
+          :is="messageComponent"
+          v-for="msg in messages"
+          :key="msg.id"
+          :message="msg"
+          :my-ip="myIp"
+          @reply="$emit('reply', $event)"
+        />
+      </TransitionGroup>
+      <div v-if="messages.length === 0" class="feed-empty">
+        Aucun message pour l'instant.
+      </div>
+    </div>
+
+    <!-- Pub casino : overlay absolu sur la droite du feed (masqué si NoAds) -->
+    <InlineCasinoAd v-if="!hideAds" class="casino-overlay" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+import type { Message } from '@/composables/useMessages';
+import { useTheme, THEME_LAYOUT, type Layout } from '@/composables/useTheme';
+import MessageItem from './MessageItem.vue';
+import MessageItemBubble from './MessageItemBubble.vue';
+import MessageItemCompact from './MessageItemCompact.vue';
+import InlineCasinoAd from './InlineCasinoAd.vue';
+
+const props = defineProps<{ messages: Message[]; hideAds?: boolean; myIp?: string }>();
+defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
+
+const { theme } = useTheme();
+
+// One component per layout family. The `?? MessageItem` fallback guarantees a
+// missing/unknown layout can never produce `<component :is="undefined">`.
+const LAYOUT_COMPONENT: Record<Layout, typeof MessageItem> = {
+  classic: MessageItem,
+  bubble: MessageItemBubble,
+  compact: MessageItemCompact,
+};
+const messageComponent = computed(
+  () => LAYOUT_COMPONENT[THEME_LAYOUT[theme.value]] ?? MessageItem,
+);
+
+const listEl = ref<HTMLElement | null>(null);
+
+watch(
+  () => props.messages.length,
+  async () => {
+    await nextTick();
+    listEl.value?.scrollTo({ top: listEl.value.scrollHeight, behavior: 'smooth' });
+  },
+);
+</script>
+
+<style scoped>
+.feed-wrapper {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.feed-scroll {
+  height: 100%;
+  overflow-y: auto;
+  padding: 8px 0;
+  scrollbar-width: thin;
+  scrollbar-color: #252535 #080810;
+}
+.feed-scroll::-webkit-scrollbar       { width: 8px; }
+.feed-scroll::-webkit-scrollbar-track { background: #080810; }
+.feed-scroll::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }
+
+.feed-empty {
+  padding: 48px 25px;
+  color: #2a2a44;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+}
+
+.casino-overlay {
+  position: absolute;
+  right: 30px;
+  top: 20px;
+  pointer-events: none;
+}
+.casino-overlay :deep(.casino-cta) { pointer-events: all; }
+
+/* Transition d'entrée des nouveaux messages */
+.msg-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.msg-enter-from   { opacity: 0; transform: translateY(6px); }
+</style>
diff --git a/frontend/src/components/Modal.vue b/frontend/src/components/Modal.vue
new file mode 100644
index 0000000..1e897cf
--- /dev/null
+++ b/frontend/src/components/Modal.vue
@@ -0,0 +1,64 @@
+<!-- Modale réutilisable rendue HORS de l'arbre DOM courant (Teleport to body).
+     Contenu injecté par le parent via slots (défaut = corps, #title = en-tête).
+     Ferme au clic extérieur (v-click-outside) ou sur Échap. -->
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="open" class="modal-backdrop">
+        <div class="modal-card" v-click-outside="close" role="dialog" aria-modal="true">
+          <header class="modal-head">
+            <h3 class="modal-title"><slot name="title">{{ title }}</slot></h3>
+            <button class="modal-x" type="button" title="Fermer" @click="close">✕</button>
+          </header>
+          <div class="modal-body">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { watch, onBeforeUnmount } from 'vue';
+import { vClickOutside } from '@/directives/clickOutside';
+
+const props = defineProps<{ open: boolean; title?: string }>();
+const emit = defineEmits<{ 'update:open': [v: boolean] }>();
+
+function close(): void { emit('update:open', false); }
+
+function onKey(e: KeyboardEvent): void {
+  if (e.key === 'Escape') close();
+}
+watch(() => props.open, (v) => {
+  if (v) document.addEventListener('keydown', onKey);
+  else document.removeEventListener('keydown', onKey);
+});
+onBeforeUnmount(() => document.removeEventListener('keydown', onKey));
+</script>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex; align-items: center; justify-content: center;
+  padding: 20px;
+}
+.modal-card {
+  width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto;
+  background: #101018; border: 1px solid #2a2a44; border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
+}
+.modal-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 18px; border-bottom: 1px solid #20203a;
+}
+.modal-title { font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; color: #ccccee; margin: 0; }
+.modal-x { background: none; border: none; color: #55557a; cursor: pointer; font-size: 15px; }
+.modal-x:hover { color: #aaa; }
+.modal-body { padding: 18px; }
+
+.modal-enter-active, .modal-leave-active { transition: opacity 0.18s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+</style>
diff --git a/frontend/src/components/RichContent.vue b/frontend/src/components/RichContent.vue
index b9f5f2a..2058530 100644
--- a/frontend/src/components/RichContent.vue
+++ b/frontend/src/components/RichContent.vue
@@ -1,108 +1,108 @@
-<!--
-  Rich message renderer.
-
-  Sandbox policy:
-   - htmlcss: sandbox="" (empty) + meta CSP → scripts totalement inertes
-   - js:      sandbox avec tous les tokens SAUF allow-same-origin
-              → scripts libres, fetch vers l'extérieur OK, accès parent impossible
-              (null origin = isolation réelle sans allow-same-origin)
--->
-<template>
-  <div class="rich-frame-wrap">
-    <span class="rich-tag" :class="`rich-tag--${mode}`">
-      {{ mode === 'js' ? '⚡ JS' : '🎨 HTML/CSS' }} · bac à sable
-    </span>
-    <iframe
-      ref="frameRef"
-      class="rich-frame"
-      :sandbox="sandboxTokens"
-      :srcdoc="srcdoc"
-      referrerpolicy="no-referrer"
-      loading="lazy"
-      title="Message riche (isolé)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useTemplateRef, watchEffect } from 'vue';
-
-const props = defineProps<{ mode: 'htmlcss' | 'js'; content: string }>();
-
-const frameRef = useTemplateRef<HTMLIFrameElement>('frameRef');
-
-// htmlcss → aucun script ; js → tout permis sauf accès au parent (pas de allow-same-origin)
-const sandboxTokens = computed(() =>
-  props.mode === 'js'
-    ? 'allow-scripts allow-forms allow-modals allow-downloads allow-popups allow-presentation allow-pointer-lock'
-    : ''
-);
-
-// Garde de sécurité réactive — allow-scripts + allow-same-origin = catastrophe
-watchEffect(() => {
-  const tokens = sandboxTokens.value;
-  if (tokens.includes('allow-scripts') && tokens.includes('allow-same-origin')) {
-    throw new Error('SECURITY: rich iframe must never combine allow-scripts + allow-same-origin');
-  }
-});
-
-const srcdoc = computed(() => {
-  // htmlcss : meta CSP en second couche (le sandbox="" bloque déjà les scripts)
-  // js      : pas de meta CSP — le sandbox null-origin est la vraie frontière
-  const metaCsp = props.mode === 'htmlcss'
-    ? `<meta http-equiv="Content-Security-Policy"
-         content="default-src 'none'; style-src 'unsafe-inline'; img-src data: https:; font-src data:;">`
-    : '';
-
-  return `<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  ${metaCsp}
-  <style>
-    html, body {
-      margin: 0;
-      padding: 8px;
-      color: #ddd;
-      font-family: Arial, sans-serif;
-      background: #0a0a12;
-      overflow: auto;
-      height: 100%;
-      box-sizing: border-box;
-    }
-  </style>
-</head>
-<body>${props.content}</body>
-</html>`;
-});
-</script>
-
-<style scoped>
-.rich-frame-wrap {
-  position: relative;
-  margin: 6px 25px 0;
-}
-.rich-tag {
-  position: absolute;
-  top: -7px;
-  left: 8px;
-  z-index: 1;
-  font-family: Arial, sans-serif;
-  font-size: 8px;
-  font-weight: bold;
-  padding: 1px 6px;
-  border-radius: 6px;
-}
-.rich-tag--htmlcss { color: #00ddaa; background: #062019; border: 1px solid #0a4435; }
-.rich-tag--js      { color: #ffcc44; background: #201a06; border: 1px solid #443a0a; }
-
-.rich-frame {
-  width: 480px;
-  max-width: 100%;
-  height: 270px;
-  border: 1px solid #222234;
-  border-radius: 8px;
-  background: #0a0a12;
-  display: block;
-}
-</style>
+<!--
+  Rich message renderer.
+
+  Sandbox policy:
+   - htmlcss: sandbox="" (empty) + meta CSP → scripts totalement inertes
+   - js:      sandbox avec tous les tokens SAUF allow-same-origin
+              → scripts libres, fetch vers l'extérieur OK, accès parent impossible
+              (null origin = isolation réelle sans allow-same-origin)
+-->
+<template>
+  <div class="rich-frame-wrap">
+    <span class="rich-tag" :class="`rich-tag--${mode}`">
+      {{ mode === 'js' ? '⚡ JS' : '🎨 HTML/CSS' }} · bac à sable
+    </span>
+    <iframe
+      ref="frameRef"
+      class="rich-frame"
+      :sandbox="sandboxTokens"
+      :srcdoc="srcdoc"
+      referrerpolicy="no-referrer"
+      loading="lazy"
+      title="Message riche (isolé)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef, watchEffect } from 'vue';
+
+const props = defineProps<{ mode: 'htmlcss' | 'js'; content: string }>();
+
+const frameRef = useTemplateRef<HTMLIFrameElement>('frameRef');
+
+// htmlcss → aucun script ; js → tout permis sauf accès au parent (pas de allow-same-origin)
+const sandboxTokens = computed(() =>
+  props.mode === 'js'
+    ? 'allow-scripts allow-forms allow-modals allow-downloads allow-popups allow-presentation allow-pointer-lock'
+    : ''
+);
+
+// Garde de sécurité réactive — allow-scripts + allow-same-origin = catastrophe
+watchEffect(() => {
+  const tokens = sandboxTokens.value;
+  if (tokens.includes('allow-scripts') && tokens.includes('allow-same-origin')) {
+    throw new Error('SECURITY: rich iframe must never combine allow-scripts + allow-same-origin');
+  }
+});
+
+const srcdoc = computed(() => {
+  // htmlcss : meta CSP en second couche (le sandbox="" bloque déjà les scripts)
+  // js      : pas de meta CSP — le sandbox null-origin est la vraie frontière
+  const metaCsp = props.mode === 'htmlcss'
+    ? `<meta http-equiv="Content-Security-Policy"
+         content="default-src 'none'; style-src 'unsafe-inline'; img-src data: https:; font-src data:;">`
+    : '';
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  ${metaCsp}
+  <style>
+    html, body {
+      margin: 0;
+      padding: 8px;
+      color: #ddd;
+      font-family: Arial, sans-serif;
+      background: #0a0a12;
+      overflow: auto;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  </style>
+</head>
+<body>${props.content}</body>
+</html>`;
+});
+</script>
+
+<style scoped>
+.rich-frame-wrap {
+  position: relative;
+  margin: 6px 25px 0;
+}
+.rich-tag {
+  position: absolute;
+  top: -7px;
+  left: 8px;
+  z-index: 1;
+  font-family: Arial, sans-serif;
+  font-size: 8px;
+  font-weight: bold;
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+.rich-tag--htmlcss { color: #00ddaa; background: #062019; border: 1px solid #0a4435; }
+.rich-tag--js      { color: #ffcc44; background: #201a06; border: 1px solid #443a0a; }
+
+.rich-frame {
+  width: 480px;
+  max-width: 100%;
+  height: 270px;
+  border: 1px solid #222234;
+  border-radius: 8px;
+  background: #0a0a12;
+  display: block;
+}
+</style>
diff --git a/frontend/src/components/SearchBox.spec.ts b/frontend/src/components/SearchBox.spec.ts
new file mode 100644
index 0000000..c44a7e0
--- /dev/null
+++ b/frontend/src/components/SearchBox.spec.ts
@@ -0,0 +1,34 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import SearchBox from './SearchBox.vue';
+
+describe('SearchBox (interaction composant + v-model debouncé)', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('n’émet la valeur qu’après le délai de debounce', async () => {
+    const wrapper = mount(SearchBox, { props: { modelValue: '', delay: 300 } });
+    const input = wrapper.find('input');
+
+    await input.setValue('vue');
+    // Avant le délai : rien n'est émis vers le parent.
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+
+    vi.advanceTimersByTime(300);
+    await wrapper.vm.$nextTick();
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual(['vue']);
+  });
+
+  it('le bouton clear vide la valeur immédiatement', async () => {
+    const wrapper = mount(SearchBox, { props: { modelValue: 'déjà', delay: 300 } });
+    await wrapper.find('input').setValue('texte');
+    await wrapper.find('.search-clear').trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual(['']);
+  });
+});
diff --git a/frontend/src/components/SearchBox.vue b/frontend/src/components/SearchBox.vue
new file mode 100644
index 0000000..2bbc40a
--- /dev/null
+++ b/frontend/src/components/SearchBox.vue
@@ -0,0 +1,83 @@
+<!-- Champ de recherche réutilisable avec liaison bidirectionnelle personnalisée
+     (v-model) + debounce interne. Se branche comme un input natif :
+     <SearchBox v-model="query" placeholder="…" />. Le parent ne reçoit la
+     nouvelle valeur qu'après une pause de frappe. -->
+<template>
+  <div class="search-box">
+    <span class="search-icon">🔎</span>
+    <input
+      ref="inputEl"
+      class="search-input"
+      type="text"
+      :value="text"
+      :placeholder="placeholder"
+      @input="onInput"
+      @keydown.escape="clearNow"
+    />
+    <button v-if="text" class="search-clear" type="button" title="Effacer" @click="clearNow">✕</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from 'vue';
+import { debounce } from '@/composables/useDebounce';
+
+const props = withDefaults(
+  defineProps<{ placeholder?: string; delay?: number }>(),
+  { placeholder: 'Rechercher…', delay: 350 },
+);
+
+// Liaison bidirectionnelle personnalisée : la prop modelValue + l'event update.
+const model = defineModel<string>({ default: '' });
+
+// Copie locale réactive pour un affichage immédiat ; le modèle parent n'est
+// mis à jour qu'après le debounce.
+const text = ref(model.value);
+
+// Si le parent change la valeur (ex. reset), refléter dans le champ.
+watch(model, (v) => { if (v !== text.value) text.value = v; });
+
+const pushModel = debounce((v: string) => { model.value = v; }, props.delay);
+
+function onInput(e: Event): void {
+  text.value = (e.target as HTMLInputElement).value;
+  pushModel(text.value);
+}
+
+function clearNow(): void {
+  pushModel.cancel();
+  text.value = '';
+  model.value = '';
+}
+
+onBeforeUnmount(() => pushModel.cancel());
+</script>
+
+<style scoped>
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #141420;
+  border: 1px solid #222234;
+  border-radius: 23px;
+  padding: 8px 16px;
+}
+.search-box:focus-within { border-color: #333355; }
+.search-icon { font-size: 13px; opacity: 0.6; }
+.search-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: #aaaacc;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+}
+.search-input::placeholder { color: #2a2a44; }
+.search-clear {
+  background: none; border: none; cursor: pointer;
+  color: #55557a; font-size: 12px;
+}
+.search-clear:hover { color: #aaa; }
+</style>
diff --git a/frontend/src/components/SendButton.vue b/frontend/src/components/SendButton.vue
index e4a5ec5..c92869c 100644
--- a/frontend/src/components/SendButton.vue
+++ b/frontend/src/components/SendButton.vue
@@ -1,97 +1,97 @@
-<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
-<template>
-  <button
-    class="send-btn"
-    :disabled="disabled"
-    :style="btnStyle"
-    aria-label="Envoyer"
-    title="Clic droit pour personnaliser"
-    @click="$emit('send')"
-    @contextmenu.prevent="onRightClick"
-  >
-    <span v-if="activeSkinChar" class="skin-char">{{ activeSkinChar }}</span>
-    <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
-    </svg>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { openContextMenu } from '@/composables/useContextMenu';
-import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
-
-defineProps<{ disabled?: boolean }>();
-defineEmits<{ send: [] }>();
-
-const { prefs } = useCustomStyles();
-const { myPerks } = useMyPerks();
-
-const activeSkinChar = computed(() => {
-  const skinId = prefs.sendSkin;
-  if (!skinId) return null;
-  return myPerks.value.sendSkins?.find((s) => s.id === skinId)?.char ?? null;
-});
-
-const btnStyle = computed(() => {
-  // On the default preset, defer to the theme's CSS variables (so e.g. the
-  // WhatsApp theme tints the button green). A chosen preset overrides the theme.
-  if (prefs.sendButton === 'default') return {};
-  const p = SEND_BUTTON_PRESETS[prefs.sendButton];
-  return { background: p.bg, color: p.color, borderRadius: p.radius };
-});
-
-function onRightClick(e: MouseEvent): void {
-  const skins = myPerks.value.sendSkins ?? [];
-  const items: import('@/composables/useContextMenu').ContextMenuItem[] = [
-    ...Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
-      value: k,
-      label: v.label,
-      swatch: v.color,
-      checked: prefs.sendButton === k,
-    })),
-  ];
-  if (skins.length > 0) {
-    items.push({ value: '__skin_header__', label: 'Skin', isHeader: true });
-    items.push({ value: '__default_skin__', label: 'Défaut', emoji: '▶', checked: prefs.sendSkin === '' });
-    for (const s of skins) {
-      items.push({ value: s.id, label: s.label ?? s.id.replace('send-skin-', ''), emoji: s.char, checked: prefs.sendSkin === s.id });
-    }
-  }
-  openContextMenu({
-    x: e.clientX,
-    y: e.clientY,
-    title: 'Bouton d\'envoi',
-    items,
-    current: '',
-    onSelect: (v) => {
-      if (v === '__default_skin__') { prefs.sendSkin = ''; }
-      else if (v.startsWith('send-skin-')) { prefs.sendSkin = v; }
-      else { prefs.sendButton = v as typeof prefs.sendButton; }
-    },
-  });
-}
-</script>
-
-<style scoped>
-.send-btn {
-  width: 42px;
-  height: 42px;
-  flex-shrink: 0;
-  border: 1px solid #ffffff10;
-  border-radius: 50%;
-  /* Defaults from the theme palette; a chosen preset overrides via inline style. */
-  background: var(--xip-send-bg);
-  color: var(--xip-send-fg);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: filter 0.15s;
-}
-.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
-.send-btn:active:not(:disabled) { filter: brightness(0.85); }
-.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
-.skin-char { font-size: 18px; line-height: 1; }
-</style>
+<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
+<template>
+  <button
+    class="send-btn"
+    :disabled="disabled"
+    :style="btnStyle"
+    aria-label="Envoyer"
+    title="Clic droit pour personnaliser"
+    @click="$emit('send')"
+    @contextmenu.prevent="onRightClick"
+  >
+    <span v-if="activeSkinChar" class="skin-char">{{ activeSkinChar }}</span>
+    <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { openContextMenu } from '@/composables/useContextMenu';
+import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+
+defineProps<{ disabled?: boolean }>();
+defineEmits<{ send: [] }>();
+
+const { prefs } = useCustomStyles();
+const { myPerks } = useMyPerks();
+
+const activeSkinChar = computed(() => {
+  const skinId = prefs.sendSkin;
+  if (!skinId) return null;
+  return myPerks.value.sendSkins?.find((s) => s.id === skinId)?.char ?? null;
+});
+
+const btnStyle = computed(() => {
+  // On the default preset, defer to the theme's CSS variables (so e.g. the
+  // WhatsApp theme tints the button green). A chosen preset overrides the theme.
+  if (prefs.sendButton === 'default') return {};
+  const p = SEND_BUTTON_PRESETS[prefs.sendButton];
+  return { background: p.bg, color: p.color, borderRadius: p.radius };
+});
+
+function onRightClick(e: MouseEvent): void {
+  const skins = myPerks.value.sendSkins ?? [];
+  const items: import('@/composables/useContextMenu').ContextMenuItem[] = [
+    ...Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
+      value: k,
+      label: v.label,
+      swatch: v.color,
+      checked: prefs.sendButton === k,
+    })),
+  ];
+  if (skins.length > 0) {
+    items.push({ value: '__skin_header__', label: 'Skin', isHeader: true });
+    items.push({ value: '__default_skin__', label: 'Défaut', emoji: '▶', checked: prefs.sendSkin === '' });
+    for (const s of skins) {
+      items.push({ value: s.id, label: s.label ?? s.id.replace('send-skin-', ''), emoji: s.char, checked: prefs.sendSkin === s.id });
+    }
+  }
+  openContextMenu({
+    x: e.clientX,
+    y: e.clientY,
+    title: 'Bouton d\'envoi',
+    items,
+    current: '',
+    onSelect: (v) => {
+      if (v === '__default_skin__') { prefs.sendSkin = ''; }
+      else if (v.startsWith('send-skin-')) { prefs.sendSkin = v; }
+      else { prefs.sendButton = v as typeof prefs.sendButton; }
+    },
+  });
+}
+</script>
+
+<style scoped>
+.send-btn {
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  border: 1px solid #ffffff10;
+  border-radius: 50%;
+  /* Defaults from the theme palette; a chosen preset overrides via inline style. */
+  background: var(--xip-send-bg);
+  color: var(--xip-send-fg);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: filter 0.15s;
+}
+.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
+.send-btn:active:not(:disabled) { filter: brightness(0.85); }
+.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.skin-char { font-size: 18px; line-height: 1; }
+</style>
diff --git a/frontend/src/components/StatsTicker.vue b/frontend/src/components/StatsTicker.vue
index dc84bfa..b66f53f 100644
--- a/frontend/src/components/StatsTicker.vue
+++ b/frontend/src/components/StatsTicker.vue
@@ -1,216 +1,216 @@
-<!-- Bandeau de stats permanent façon téléscripteur néon (casino / bourse). -->
-<template>
-  <div class="ticker" :class="{ 'is-off': !connected }">
-    <!-- Badge LIVE fixe à gauche -->
-    <div class="ticker-badge">
-      <span class="ticker-dot" />
-      <span class="ticker-badge-txt">{{ connected ? 'LIVE' : '···' }}</span>
-    </div>
-
-    <!-- Piste défilante (2 groupes identiques pour une boucle sans couture) -->
-    <div class="ticker-viewport">
-      <div class="ticker-track">
-        <div
-          v-for="copy in 2"
-          :key="copy"
-          class="ticker-group"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
-        >
-          <span
-            v-for="item in items"
-            :key="item.key + '-' + copy"
-            class="chip"
-            :class="`chip--${item.tone}`"
-          >
-            <span class="chip-val">
-              <AnimatedNumber :value="item.value" :decimals="item.decimals ?? 0" />
-              <span v-if="item.unit" class="chip-unit">{{ item.unit }}</span>
-            </span>
-            <span class="chip-label">{{ item.label }}</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import AnimatedNumber from './AnimatedNumber.vue';
-import type { Stats } from '@/composables/useRealtime';
-
-const props = defineProps<{ stats: Stats | null; connected: boolean }>();
-
-type Tone = 'cyan' | 'green' | 'magenta' | 'orange' | 'plain';
-interface Chip {
-  key: string;
-  label: string;
-  value: number;
-  tone: Tone;
-  unit?: string;
-  decimals?: number;
-}
-
-const ZERO: Stats = {
-  connectedTabs: 0,
-  typingNow: 0,
-  lettersPerSec: 0,
-  msgsPerMin: 0,
-  messages: 0,
-  replies: 0,
-  charsSent: 0,
-  lettersTyped: 0,
-  uniqueIps: 0,
-  longestMsg: 0,
-  abandonRate: 0,
-  avgLength: 0,
-  moneyExtorted: 0,
-};
-
-const items = computed<Chip[]>(() => {
-  const s = props.stats ?? ZERO;
-  return [
-    { key: 'tabs', label: 'onglets connectés', value: s.connectedTabs, tone: 'cyan' },
-    { key: 'typing', label: 'écrivent là', value: s.typingNow, tone: 'green' },
-    { key: 'lps', label: 'lettres / s', value: s.lettersPerSec, decimals: 1, tone: 'green' },
-    { key: 'mpm', label: 'messages / min', value: s.msgsPerMin, tone: 'green' },
-    { key: 'msgs', label: 'messages', value: s.messages, tone: 'cyan' },
-    { key: 'replies', label: 'réponses', value: s.replies, tone: 'plain' },
-    { key: 'chars', label: 'caractères envoyés', value: s.charsSent, tone: 'plain' },
-    { key: 'letters', label: 'lettres tapées', value: s.lettersTyped, tone: 'magenta' },
-    { key: 'ips', label: 'IP uniques', value: s.uniqueIps, tone: 'cyan' },
-    { key: 'longest', label: 'le + long', value: s.longestMsg, unit: ' car', tone: 'plain' },
-    { key: 'abandon', label: "taux d'abandon", value: s.abandonRate, decimals: 1, unit: ' %', tone: 'orange' },
-    { key: 'avg', label: 'longueur moy.', value: s.avgLength, decimals: 1, unit: ' car', tone: 'plain' },
-    { key: 'money', label: 'argent extorqué', value: s.moneyExtorted, decimals: 2, unit: ' €', tone: 'orange' },
-  ];
-});
-</script>
-
-<style scoped>
-.ticker {
-  position: relative;
-  flex-shrink: 0;
-  height: 40px;
-  display: flex;
-  align-items: stretch;
-  background: #0a0a12;
-  border-bottom: 1px solid #1a1a2a;
-  box-shadow: 0 2px 8px #00000066;
-  overflow: hidden;
-}
-
-/* ── Badge LIVE fixe ── */
-.ticker-badge {
-  position: relative;
-  z-index: 2;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 0 14px;
-  background: #0e0e18;
-  border-right: 1px solid #1a1a2a;
-  box-shadow: 4px 0 8px #0a0a12;
-}
-.ticker-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #44996655;
-  animation: blink 1.5s ease-in-out infinite;
-}
-.ticker-badge-txt {
-  font-family: 'Courier New', monospace;
-  font-size: 11px;
-  font-weight: bold;
-  letter-spacing: 2px;
-  color: #448866;
-}
-.ticker.is-off .ticker-dot {
-  background: #884444;
-  animation: none;
-}
-.ticker.is-off .ticker-badge-txt {
-  color: #885555;
-}
-@keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-/* ── Piste défilante ── */
-.ticker-viewport {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-.ticker-track {
-  display: inline-flex;
-  white-space: nowrap;
-  will-change: transform;
-  animation: ticker-scroll 48s linear infinite;
-}
-.ticker:hover .ticker-track {
-  animation-play-state: paused;
-}
-.ticker-group {
-  display: inline-flex;
-  align-items: center;
-}
-@keyframes ticker-scroll {
-  from { transform: translateX(0); }
-  to   { transform: translateX(-50%); }
-}
-
-/* ── Chips ── */
-.chip {
-  position: relative;
-  display: inline-flex;
-  align-items: baseline;
-  gap: 7px;
-  padding: 0 22px;
-}
-.chip::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 16px;
-  width: 1px;
-  background: #ffffff14;
-}
-.chip-val {
-  font-family: 'Courier New', monospace;
-  font-size: 15px;
-  font-weight: bold;
-  color: #d8d8e8;
-}
-.chip-unit {
-  font-size: 10px;
-  font-weight: normal;
-  opacity: 0.6;
-}
-.chip-label {
-  font-family: Arial, sans-serif;
-  font-size: 10px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  color: #50506e;
-}
-
-.chip--cyan .chip-val { color: #5599aa; }
-.chip--green .chip-val { color: #447755; }
-.chip--magenta .chip-val { color: #885588; }
-.chip--orange .chip-val { color: #997744; }
-
-/* Accessibilité : pas de défilement si l'utilisateur le refuse */
-@media (prefers-reduced-motion: reduce) {
-  .ticker-track { animation: none; }
-  .ticker-viewport { overflow-x: auto; scrollbar-width: none; }
-  .ticker-viewport::-webkit-scrollbar { display: none; }
-}
-</style>
+<!-- Bandeau de stats permanent façon téléscripteur néon (casino / bourse). -->
+<template>
+  <div class="ticker" :class="{ 'is-off': !connected }">
+    <!-- Badge LIVE fixe à gauche -->
+    <div class="ticker-badge">
+      <span class="ticker-dot" />
+      <span class="ticker-badge-txt">{{ connected ? 'LIVE' : '···' }}</span>
+    </div>
+
+    <!-- Piste défilante (2 groupes identiques pour une boucle sans couture) -->
+    <div class="ticker-viewport">
+      <div class="ticker-track">
+        <div
+          v-for="copy in 2"
+          :key="copy"
+          class="ticker-group"
+          :aria-hidden="copy === 2 ? 'true' : undefined"
+        >
+          <span
+            v-for="item in items"
+            :key="item.key + '-' + copy"
+            class="chip"
+            :class="`chip--${item.tone}`"
+          >
+            <span class="chip-val">
+              <AnimatedNumber :value="item.value" :decimals="item.decimals ?? 0" />
+              <span v-if="item.unit" class="chip-unit">{{ item.unit }}</span>
+            </span>
+            <span class="chip-label">{{ item.label }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AnimatedNumber from './AnimatedNumber.vue';
+import type { Stats } from '@/composables/useRealtime';
+
+const props = defineProps<{ stats: Stats | null; connected: boolean }>();
+
+type Tone = 'cyan' | 'green' | 'magenta' | 'orange' | 'plain';
+interface Chip {
+  key: string;
+  label: string;
+  value: number;
+  tone: Tone;
+  unit?: string;
+  decimals?: number;
+}
+
+const ZERO: Stats = {
+  connectedTabs: 0,
+  typingNow: 0,
+  lettersPerSec: 0,
+  msgsPerMin: 0,
+  messages: 0,
+  replies: 0,
+  charsSent: 0,
+  lettersTyped: 0,
+  uniqueIps: 0,
+  longestMsg: 0,
+  abandonRate: 0,
+  avgLength: 0,
+  moneyExtorted: 0,
+};
+
+const items = computed<Chip[]>(() => {
+  const s = props.stats ?? ZERO;
+  return [
+    { key: 'tabs', label: 'onglets connectés', value: s.connectedTabs, tone: 'cyan' },
+    { key: 'typing', label: 'écrivent là', value: s.typingNow, tone: 'green' },
+    { key: 'lps', label: 'lettres / s', value: s.lettersPerSec, decimals: 1, tone: 'green' },
+    { key: 'mpm', label: 'messages / min', value: s.msgsPerMin, tone: 'green' },
+    { key: 'msgs', label: 'messages', value: s.messages, tone: 'cyan' },
+    { key: 'replies', label: 'réponses', value: s.replies, tone: 'plain' },
+    { key: 'chars', label: 'caractères envoyés', value: s.charsSent, tone: 'plain' },
+    { key: 'letters', label: 'lettres tapées', value: s.lettersTyped, tone: 'magenta' },
+    { key: 'ips', label: 'IP uniques', value: s.uniqueIps, tone: 'cyan' },
+    { key: 'longest', label: 'le + long', value: s.longestMsg, unit: ' car', tone: 'plain' },
+    { key: 'abandon', label: "taux d'abandon", value: s.abandonRate, decimals: 1, unit: ' %', tone: 'orange' },
+    { key: 'avg', label: 'longueur moy.', value: s.avgLength, decimals: 1, unit: ' car', tone: 'plain' },
+    { key: 'money', label: 'argent extorqué', value: s.moneyExtorted, decimals: 2, unit: ' €', tone: 'orange' },
+  ];
+});
+</script>
+
+<style scoped>
+.ticker {
+  position: relative;
+  flex-shrink: 0;
+  height: 40px;
+  display: flex;
+  align-items: stretch;
+  background: #0a0a12;
+  border-bottom: 1px solid #1a1a2a;
+  box-shadow: 0 2px 8px #00000066;
+  overflow: hidden;
+}
+
+/* ── Badge LIVE fixe ── */
+.ticker-badge {
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 14px;
+  background: #0e0e18;
+  border-right: 1px solid #1a1a2a;
+  box-shadow: 4px 0 8px #0a0a12;
+}
+.ticker-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #44996655;
+  animation: blink 1.5s ease-in-out infinite;
+}
+.ticker-badge-txt {
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  color: #448866;
+}
+.ticker.is-off .ticker-dot {
+  background: #884444;
+  animation: none;
+}
+.ticker.is-off .ticker-badge-txt {
+  color: #885555;
+}
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* ── Piste défilante ── */
+.ticker-viewport {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.ticker-track {
+  display: inline-flex;
+  white-space: nowrap;
+  will-change: transform;
+  animation: ticker-scroll 48s linear infinite;
+}
+.ticker:hover .ticker-track {
+  animation-play-state: paused;
+}
+.ticker-group {
+  display: inline-flex;
+  align-items: center;
+}
+@keyframes ticker-scroll {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+
+/* ── Chips ── */
+.chip {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 7px;
+  padding: 0 22px;
+}
+.chip::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 16px;
+  width: 1px;
+  background: #ffffff14;
+}
+.chip-val {
+  font-family: 'Courier New', monospace;
+  font-size: 15px;
+  font-weight: bold;
+  color: #d8d8e8;
+}
+.chip-unit {
+  font-size: 10px;
+  font-weight: normal;
+  opacity: 0.6;
+}
+.chip-label {
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: #50506e;
+}
+
+.chip--cyan .chip-val { color: #5599aa; }
+.chip--green .chip-val { color: #447755; }
+.chip--magenta .chip-val { color: #885588; }
+.chip--orange .chip-val { color: #997744; }
+
+/* Accessibilité : pas de défilement si l'utilisateur le refuse */
+@media (prefers-reduced-motion: reduce) {
+  .ticker-track { animation: none; }
+  .ticker-viewport { overflow-x: auto; scrollbar-width: none; }
+  .ticker-viewport::-webkit-scrollbar { display: none; }
+}
+</style>
diff --git a/frontend/src/components/StyleContextMenu.vue b/frontend/src/components/StyleContextMenu.vue
index 52e5241..39fc2ec 100644
--- a/frontend/src/components/StyleContextMenu.vue
+++ b/frontend/src/components/StyleContextMenu.vue
@@ -1,138 +1,138 @@
-<!-- Generic right-click style picker. Mounted once in App.vue via Teleport. -->
-<template>
-  <Teleport to="body">
-    <div
-      v-if="state.visible"
-      ref="menuEl"
-      class="style-ctx-menu"
-      :style="menuPos"
-      @click.stop
-    >
-      <div class="ctx-title">{{ state.title }}</div>
-      <template v-for="item in state.items" :key="item.value">
-        <div v-if="item.isHeader" class="ctx-header">{{ item.label }}</div>
-        <button
-          v-else
-          class="ctx-item"
-          :class="{ 'ctx-item--active': item.checked || item.value === state.current }"
-          @click="pick(item.value)"
-        >
-          <span v-if="item.emoji" class="ctx-emoji">{{ item.emoji }}</span>
-          <span v-else-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
-          {{ item.label }}
-        </button>
-      </template>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useContextMenu, closeContextMenu } from '@/composables/useContextMenu';
-
-const { state } = useContextMenu();
-const menuEl = ref<HTMLElement | null>(null);
-
-const menuPos = computed(() => ({
-  top:  `${Math.min(state.y, window.innerHeight - 260)}px`,
-  left: `${Math.min(state.x, window.innerWidth  - 175)}px`,
-}));
-
-function pick(value: string): void {
-  state.onSelect(value);
-  closeContextMenu();
-}
-
-function onMouseDown(e: MouseEvent): void {
-  if (state.visible && menuEl.value && !menuEl.value.contains(e.target as Node)) {
-    closeContextMenu();
-  }
-}
-function onKeyDown(e: KeyboardEvent): void {
-  if (e.key === 'Escape') closeContextMenu();
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', onMouseDown);
-  document.addEventListener('keydown', onKeyDown);
-});
-onUnmounted(() => {
-  document.removeEventListener('mousedown', onMouseDown);
-  document.removeEventListener('keydown', onKeyDown);
-});
-</script>
-
-<style>
-.style-ctx-menu {
-  position: fixed;
-  z-index: 9999;
-  min-width: 160px;
-  background: #111118;
-  border: 1px solid #2a2a3a;
-  border-radius: 6px;
-  box-shadow: 0 8px 32px #000a, 0 0 0 1px #ffffff08;
-  padding: 4px 0;
-  font-family: Arial, sans-serif;
-}
-
-.ctx-title {
-  font-size: 10px;
-  color: #44445a;
-  padding: 4px 12px 3px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  border-bottom: 1px solid #1e1e2a;
-  margin-bottom: 3px;
-}
-
-.ctx-header {
-  font-size: 9px;
-  color: #33334a;
-  padding: 6px 12px 2px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-}
-
-.ctx-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 5px 12px;
-  background: none;
-  border: none;
-  color: #9999bb;
-  font-family: Arial, sans-serif;
-  font-size: 12px;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.1s, color 0.1s;
-}
-.ctx-item:hover {
-  background: #1a1a28;
-  color: #ffffff;
-}
-.ctx-item--active {
-  color: #00ddff;
-}
-.ctx-item--active::after {
-  content: '✓';
-  margin-left: auto;
-  font-size: 10px;
-}
-
-.ctx-swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  border: 1px solid #ffffff22;
-}
-.ctx-emoji {
-  font-size: 14px;
-  line-height: 1;
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-}
-</style>
+<!-- Generic right-click style picker. Mounted once in App.vue via Teleport. -->
+<template>
+  <Teleport to="body">
+    <div
+      v-if="state.visible"
+      ref="menuEl"
+      class="style-ctx-menu"
+      :style="menuPos"
+      @click.stop
+    >
+      <div class="ctx-title">{{ state.title }}</div>
+      <template v-for="item in state.items" :key="item.value">
+        <div v-if="item.isHeader" class="ctx-header">{{ item.label }}</div>
+        <button
+          v-else
+          class="ctx-item"
+          :class="{ 'ctx-item--active': item.checked || item.value === state.current }"
+          @click="pick(item.value)"
+        >
+          <span v-if="item.emoji" class="ctx-emoji">{{ item.emoji }}</span>
+          <span v-else-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
+          {{ item.label }}
+        </button>
+      </template>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useContextMenu, closeContextMenu } from '@/composables/useContextMenu';
+
+const { state } = useContextMenu();
+const menuEl = ref<HTMLElement | null>(null);
+
+const menuPos = computed(() => ({
+  top:  `${Math.min(state.y, window.innerHeight - 260)}px`,
+  left: `${Math.min(state.x, window.innerWidth  - 175)}px`,
+}));
+
+function pick(value: string): void {
+  state.onSelect(value);
+  closeContextMenu();
+}
+
+function onMouseDown(e: MouseEvent): void {
+  if (state.visible && menuEl.value && !menuEl.value.contains(e.target as Node)) {
+    closeContextMenu();
+  }
+}
+function onKeyDown(e: KeyboardEvent): void {
+  if (e.key === 'Escape') closeContextMenu();
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onMouseDown);
+  document.addEventListener('keydown', onKeyDown);
+});
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onMouseDown);
+  document.removeEventListener('keydown', onKeyDown);
+});
+</script>
+
+<style>
+.style-ctx-menu {
+  position: fixed;
+  z-index: 9999;
+  min-width: 160px;
+  background: #111118;
+  border: 1px solid #2a2a3a;
+  border-radius: 6px;
+  box-shadow: 0 8px 32px #000a, 0 0 0 1px #ffffff08;
+  padding: 4px 0;
+  font-family: Arial, sans-serif;
+}
+
+.ctx-title {
+  font-size: 10px;
+  color: #44445a;
+  padding: 4px 12px 3px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  border-bottom: 1px solid #1e1e2a;
+  margin-bottom: 3px;
+}
+
+.ctx-header {
+  font-size: 9px;
+  color: #33334a;
+  padding: 6px 12px 2px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.ctx-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 12px;
+  background: none;
+  border: none;
+  color: #9999bb;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s, color 0.1s;
+}
+.ctx-item:hover {
+  background: #1a1a28;
+  color: #ffffff;
+}
+.ctx-item--active {
+  color: #00ddff;
+}
+.ctx-item--active::after {
+  content: '✓';
+  margin-left: auto;
+  font-size: 10px;
+}
+
+.ctx-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid #ffffff22;
+}
+.ctx-emoji {
+  font-size: 14px;
+  line-height: 1;
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+}
+</style>
diff --git a/frontend/src/components/ThemePicker.spec.ts b/frontend/src/components/ThemePicker.spec.ts
new file mode 100644
index 0000000..c2fd2cd
--- /dev/null
+++ b/frontend/src/components/ThemePicker.spec.ts
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ThemePicker from './ThemePicker.vue';
+import { THEMES } from '@/composables/useTheme';
+
+describe('ThemePicker (interaction composant + v-model custom)', () => {
+  it('rend un bouton par thème disponible', () => {
+    const wrapper = mount(ThemePicker, { props: { modelValue: 'default' } });
+    expect(wrapper.findAll('button')).toHaveLength(Object.keys(THEMES).length);
+  });
+
+  it('émet update:modelValue avec le thème cliqué (WhatsApp)', async () => {
+    const wrapper = mount(ThemePicker, { props: { modelValue: 'default' } });
+    const keys = Object.keys(THEMES);
+    const idx = keys.indexOf('whatsapp');
+    await wrapper.findAll('button')[idx].trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0]).toEqual(['whatsapp']);
+  });
+
+  it('marque le thème actif', () => {
+    const wrapper = mount(ThemePicker, { props: { modelValue: 'bubble' } });
+    expect(wrapper.find('.theme-btn--active').exists()).toBe(true);
+  });
+});
diff --git a/frontend/src/components/ThemePicker.vue b/frontend/src/components/ThemePicker.vue
index 559b934..c925417 100644
--- a/frontend/src/components/ThemePicker.vue
+++ b/frontend/src/components/ThemePicker.vue
@@ -1,41 +1,41 @@
-<script setup lang="ts">
-import { THEMES, type Theme } from '@/composables/useTheme';
-
-const model = defineModel<Theme>({ required: true });
-</script>
-
-<template>
-  <div class="theme-picker">
-    <button
-      v-for="(info, key) in THEMES"
-      :key="key"
-      class="theme-btn"
-      :class="{ 'theme-btn--active': model === key }"
-      :title="info.label"
-      type="button"
-      @click="model = key"
-    >{{ info.emoji }}</button>
-  </div>
-</template>
-
-<style scoped>
-.theme-picker {
-  display: flex;
-  gap: 4px;
-}
-.theme-btn {
-  background: #131320;
-  border: 1px solid #222233;
-  border-radius: 8px;
-  padding: 3px 7px;
-  cursor: pointer;
-  font-size: 14px;
-  opacity: 0.5;
-  transition: opacity 0.15s, border-color 0.15s;
-}
-.theme-btn:hover { opacity: 0.8; }
-.theme-btn--active {
-  opacity: 1;
-  border-color: #5577aa;
-}
-</style>
+<script setup lang="ts">
+import { THEMES, type Theme } from '@/composables/useTheme';
+
+const model = defineModel<Theme>({ required: true });
+</script>
+
+<template>
+  <div class="theme-picker">
+    <button
+      v-for="(info, key) in THEMES"
+      :key="key"
+      class="theme-btn"
+      :class="{ 'theme-btn--active': model === key }"
+      :title="info.label"
+      type="button"
+      @click="model = key"
+    >{{ info.emoji }}</button>
+  </div>
+</template>
+
+<style scoped>
+.theme-picker {
+  display: flex;
+  gap: 4px;
+}
+.theme-btn {
+  background: #131320;
+  border: 1px solid #222233;
+  border-radius: 8px;
+  padding: 3px 7px;
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.5;
+  transition: opacity 0.15s, border-color 0.15s;
+}
+.theme-btn:hover { opacity: 0.8; }
+.theme-btn--active {
+  opacity: 1;
+  border-color: #5577aa;
+}
+</style>
diff --git a/frontend/src/components/shop/PrefSection.vue b/frontend/src/components/shop/PrefSection.vue
new file mode 100644
index 0000000..8ac63c4
--- /dev/null
+++ b/frontend/src/components/shop/PrefSection.vue
@@ -0,0 +1,16 @@
+<!-- Conteneur de section « Mes Persos ». Démontre l'injection de contenu depuis
+     le parent : un slot par défaut (corps de la section) + un slot nommé #lock
+     (badge optionnel quand la fonctionnalité n'est pas débloquée). -->
+<template>
+  <section class="pf-section" :class="{ 'pf-locked': locked }">
+    <h2 class="pf-title">
+      {{ title }}
+      <slot name="lock" />
+    </h2>
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{ title: string; locked?: boolean }>();
+</script>
diff --git a/frontend/src/components/shop/ProductCard.vue b/frontend/src/components/shop/ProductCard.vue
index 0db4630..65ac8a4 100644
--- a/frontend/src/components/shop/ProductCard.vue
+++ b/frontend/src/components/shop/ProductCard.vue
@@ -1,330 +1,331 @@
-<!-- One marketplace product card — handles per-kind options inline (faithful to shop mockups) -->
-<template>
-  <div class="card" :class="{ 'card--owned': ownedAlready }">
-    <div v-if="product.badge" class="card-badge">{{ product.badge }}</div>
-
-    <div class="card-head">
-      <span class="card-icon">{{ icon }}</span>
-      <div>
-        <p class="card-name">{{ product.name }}</p>
-        <p v-if="product.subtitle" class="card-sub">{{ product.subtitle }}</p>
-      </div>
-    </div>
-
-    <!-- Aperçu cosmétique : avant / après -->
-    <div v-if="product.kind === 'ip-skin' || product.id === 'bundle-cosmetic'" class="preview">
-      <span class="prev-ip prev-plain">192.168.1.45</span>
-      <span class="prev-arrow">→</span>
-      <span class="prev-ip prev-gold">192.168.1.45</span>
-    </div>
-
-    <!-- Options : abonnement NoAds -->
-    <div v-if="product.kind === 'subscription'" class="opts">
-      <label v-for="p in plans" :key="p.id" class="opt-radio" :class="{ active: plan === p.id }">
-        <input type="radio" :value="p.id" v-model="plan" />
-        <span>{{ p.label }}</span>
-        <span class="opt-price">{{ fmt(p.price) }} cr{{ p.id === 'monthly' ? '/mois' : '/an' }}</span>
-      </label>
-    </div>
-
-    <!-- Options : Cadre de Pub -->
-    <div v-if="product.kind === 'ad-frame'" class="opts">
-      <div class="opt-row">
-        <span class="opt-label">Durée</span>
-        <select v-model.number="durationDays" class="opt-select">
-          <option v-for="d in durations" :key="d.days" :value="d.days">
-            {{ d.days }} j{{ d.extra ? ` (+${fmt(d.extra)})` : '' }}
-          </option>
-        </select>
-      </div>
-      <div class="opt-row">
-        <span class="opt-label">Format</span>
-        <select v-model="format" class="opt-select">
-          <option v-for="f in formats" :key="f.id" :value="f.id">
-            {{ f.label }}{{ f.extra ? ` (+${fmt(f.extra)})` : '' }}
-          </option>
-        </select>
-      </div>
-      <input v-model="url" class="opt-input" type="text" placeholder="URL de destination (optionnel)" />
-    </div>
-
-    <!-- Options : Pet (grille des designs non encore possédés) -->
-    <div v-if="product.kind === 'pet'" class="opts">
-      <div class="pet-grid">
-        <button
-          v-for="d in availableDesigns"
-          :key="d.id"
-          class="pet-cell"
-          :class="{ active: petDesign === d.id }"
-          @click="petDesign = d.id"
-          type="button"
-        >{{ d.char }}</button>
-      </div>
-    </div>
-
-    <!-- Preview : Skin de bouton -->
-    <div v-if="product.kind === 'send-skin'" class="send-skin-preview">
-      <div class="skin-btn-demo">{{ meta.char }}</div>
-    </div>
-
-    <!-- Stock limité -->
-    <div v-if="product.stockLimit" class="stock">
-      <div class="stock-bar"><div class="stock-fill" :style="{ width: stockPct + '%' }" /></div>
-      <span class="stock-txt">{{ product.stockSold }} / {{ product.stockLimit }} vendus</span>
-    </div>
-
-    <!-- Prix + CTA -->
-    <div class="card-foot">
-      <div class="price">
-        <span v-if="product.promoPrice != null" class="price-old">{{ fmt(product.basePrice) }}</span>
-        <span class="price-now">{{ fmt(effectivePrice) }}</span>
-        <span class="price-unit">cr</span>
-      </div>
-      <!-- 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"
-        :disabled="disabled"
-        @click="onBuy"
-        type="button"
-      >{{ buyLabel }}</button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import type { Product, PurchaseOptions } from '@/composables/useShop';
-import { parseMeta, type ProductMeta } from '@/composables/useMeta';
-
-const props = defineProps<{
-  product: Product;
-  buying: boolean;
-  owns: (kind: string) => boolean;
-  ownedPetChars: string[];
-  petCount: number;
-  freeMode: boolean;
-}>();
-
-const emit = defineEmits<{
-  buy: [productId: string, options: PurchaseOptions];
-  goPerso: [];
-}>();
-
-const meta = computed(() => parseMeta<ProductMeta>(props.product.metaJson));
-
-// Subscription
-const plans = computed(() => meta.value.plans ?? []);
-const plan = ref<'monthly' | 'annual'>('monthly');
-
-// Ad-frame
-const durations = computed(() => meta.value.durations ?? []);
-const formats = computed(() => meta.value.formats ?? []);
-const durationDays = ref<number>(7);
-const format = ref<'static' | 'gif'>('static');
-const url = ref('');
-
-// Pet
-const designs = computed(() => meta.value.designs ?? []);
-const petDesign = ref<string>('');
-const availableDesigns = computed(() =>
-  designs.value.filter((d) => !props.ownedPetChars.includes(d.char))
-);
-watch(availableDesigns, (ds) => {
-  if (ds.length > 0 && !ds.find((d) => d.id === petDesign.value)) {
-    petDesign.value = ds[0].id;
-  }
-}, { immediate: true });
-
-const icon = computed(() => {
-  if (props.product.id === 'ip-colors') return '🎨';
-  if (props.product.kind === 'send-skin') return meta.value.char ?? '🖱️';
-  switch (props.product.kind) {
-    case 'ad-frame': return '📣';
-    case 'subscription': return '🚫';
-    case 'ip-skin': return '👑';
-    case 'pet': return '✨';
-    case 'bundle': return '🎁';
-    case 'rich': return props.product.id === 'rich-js' ? '⚡' : '🎨';
-    case 'consumable': return '🔊';
-    default: return '🛍️';
-  }
-});
-
-const effectivePrice = computed(() => {
-  let price = props.product.promoPrice ?? props.product.basePrice;
-  if (props.product.kind === 'subscription') {
-    const p = plans.value.find((x) => x.id === plan.value);
-    if (p) price = p.price;
-  }
-  if (props.product.kind === 'ad-frame') {
-    const d = durations.value.find((x) => x.days === durationDays.value);
-    const f = formats.value.find((x) => x.id === format.value);
-    price += (d?.extra ?? 0) + (f?.extra ?? 0);
-  }
-  return price;
-});
-
-// Ownership / limits → disable & label.
-const ownedAlready = computed(() => {
-  const k = props.product.kind;
-  if (k === 'ip-skin') return props.owns('style-dore');
-  if (k === 'subscription') return props.owns('noads');
-  if (k === 'rich') return props.owns(props.product.id);
-  if (k === 'unlock') return props.owns(props.product.id);
-  if (k === 'ad-frame') return props.owns('ad-frame');
-  if (k === 'send-skin') return props.owns(props.product.id);
-  return false;
-});
-
-const soldOut = computed(() => props.product.stockLimit != null && props.product.stockSold >= props.product.stockLimit);
-
-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é ✓';
-  return props.freeMode ? 'Obtenir (gratuit)' : 'Acheter';
-});
-
-const stockPct = computed(() =>
-  props.product.stockLimit ? Math.round((props.product.stockSold / props.product.stockLimit) * 100) : 0
-);
-
-function fmt(centi: number): string {
-  return (centi / 100).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-}
-
-function onBuy(): void {
-  const options: PurchaseOptions = {};
-  if (props.product.kind === 'subscription') options.plan = plan.value;
-  if (props.product.kind === 'ad-frame') {
-    options.durationDays = durationDays.value;
-    options.format = format.value;
-    options.url = url.value || undefined;
-  }
-  if (props.product.kind === 'pet' || props.product.id === 'bundle-cosmetic') {
-    const d = availableDesigns.value.find((x) => x.id === petDesign.value) ?? availableDesigns.value[0];
-    if (d) { options.petDesign = d.id; options.petChar = d.char; }
-  }
-  emit('buy', props.product.id, options);
-}
-</script>
-
-<style scoped>
-.card {
-  position: relative;
-  background: #101018;
-  border: 1px solid #20203a;
-  border-radius: 10px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  font-family: Arial, sans-serif;
-}
-.card--owned { opacity: 0.7; }
-
-.card-badge {
-  position: absolute;
-  top: -9px;
-  right: 12px;
-  background: #ff2266;
-  color: #fff;
-  font-size: 9px;
-  font-weight: bold;
-  letter-spacing: 0.5px;
-  padding: 3px 9px;
-  border-radius: 8px;
-  box-shadow: none;
-}
-
-.card-head { display: flex; gap: 12px; align-items: flex-start; }
-.card-icon { font-size: 28px; }
-.card-name { font-size: 15px; font-weight: bold; color: #d8d8ee; margin: 0; }
-.card-sub { font-size: 11px; color: #6a6a90; margin: 3px 0 0; line-height: 1.4; }
-
-.preview {
-  display: flex; align-items: center; gap: 10px;
-  background: #0a0a12; border-radius: 6px; padding: 10px; justify-content: center;
-}
-.prev-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
-.prev-plain { color: #666688; }
-.prev-gold { color: #aa8833; }
-.prev-arrow { color: #444466; }
-
-.opts { display: flex; flex-direction: column; gap: 8px; }
-.opt-radio {
-  display: flex; align-items: center; gap: 8px;
-  background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
-  padding: 8px 10px; font-size: 12px; color: #aaaacc; cursor: pointer;
-}
-.opt-radio.active { border-color: #00aaff; background: #0a1622; }
-.opt-radio input { accent-color: #00ccff; }
-.opt-radio--sm { padding: 5px 8px; font-size: 11px; flex: 1; justify-content: center; }
-.opt-price { margin-left: auto; color: #ffdd66; font-family: 'Courier New', monospace; }
-.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-.opt-label { font-size: 11px; color: #8888aa; }
-.opt-select, .opt-input {
-  background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
-  color: #ccccdd; font-size: 12px; padding: 6px 8px; outline: none;
-}
-.opt-select { flex: 1; }
-.opt-input { width: 100%; }
-
-.pet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
-.pet-cell {
-  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: #8844aa; }
-.pet-pos { display: flex; gap: 6px; }
-
-.send-skin-preview { display: flex; justify-content: center; padding: 8px 0; }
-.skin-btn-demo {
-  width: 52px; height: 52px; border-radius: 50%;
-  background: #151525; border: 1px solid #30306a;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 24px;
-}
-
-.stock { display: flex; flex-direction: column; gap: 4px; }
-.stock-bar { height: 6px; background: #1a1a2a; border-radius: 3px; overflow: hidden; }
-.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; 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: #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;
-  transition: background 0.15s;
-}
-.buy:hover:not(:disabled) { background: #1a4466; }
-.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>
+<!-- One marketplace product card — handles per-kind options inline (faithful to shop mockups) -->
+<template>
+  <div class="card" :class="{ 'card--owned': ownedAlready }">
+    <div v-if="product.badge" class="card-badge">{{ product.badge }}</div>
+
+    <div class="card-head">
+      <span class="card-icon">{{ icon }}</span>
+      <div>
+        <RouterLink :to="`/shop/p/${product.id}`" class="card-name">{{ product.name }}</RouterLink>
+        <p v-if="product.subtitle" class="card-sub">{{ product.subtitle }}</p>
+      </div>
+    </div>
+
+    <!-- Aperçu cosmétique : avant / après -->
+    <div v-if="product.kind === 'ip-skin' || product.id === 'bundle-cosmetic'" class="preview">
+      <span class="prev-ip prev-plain">192.168.1.45</span>
+      <span class="prev-arrow">→</span>
+      <span class="prev-ip prev-gold">192.168.1.45</span>
+    </div>
+
+    <!-- Options : abonnement NoAds -->
+    <div v-if="product.kind === 'subscription'" class="opts">
+      <label v-for="p in plans" :key="p.id" class="opt-radio" :class="{ active: plan === p.id }">
+        <input type="radio" :value="p.id" v-model="plan" />
+        <span>{{ p.label }}</span>
+        <span class="opt-price">{{ fmt(p.price) }} cr{{ p.id === 'monthly' ? '/mois' : '/an' }}</span>
+      </label>
+    </div>
+
+    <!-- Options : Cadre de Pub -->
+    <div v-if="product.kind === 'ad-frame'" class="opts">
+      <div class="opt-row">
+        <span class="opt-label">Durée</span>
+        <select v-model.number="durationDays" class="opt-select">
+          <option v-for="d in durations" :key="d.days" :value="d.days">
+            {{ d.days }} j{{ d.extra ? ` (+${fmt(d.extra)})` : '' }}
+          </option>
+        </select>
+      </div>
+      <div class="opt-row">
+        <span class="opt-label">Format</span>
+        <select v-model="format" class="opt-select">
+          <option v-for="f in formats" :key="f.id" :value="f.id">
+            {{ f.label }}{{ f.extra ? ` (+${fmt(f.extra)})` : '' }}
+          </option>
+        </select>
+      </div>
+      <input v-model="url" class="opt-input" type="text" placeholder="URL de destination (optionnel)" />
+    </div>
+
+    <!-- Options : Pet (grille des designs non encore possédés) -->
+    <div v-if="product.kind === 'pet'" class="opts">
+      <div class="pet-grid">
+        <button
+          v-for="d in availableDesigns"
+          :key="d.id"
+          class="pet-cell"
+          :class="{ active: petDesign === d.id }"
+          @click="petDesign = d.id"
+          type="button"
+        >{{ d.char }}</button>
+      </div>
+    </div>
+
+    <!-- Preview : Skin de bouton -->
+    <div v-if="product.kind === 'send-skin'" class="send-skin-preview">
+      <div class="skin-btn-demo">{{ meta.char }}</div>
+    </div>
+
+    <!-- Stock limité -->
+    <div v-if="product.stockLimit" class="stock">
+      <div class="stock-bar"><div class="stock-fill" :style="{ width: stockPct + '%' }" /></div>
+      <span class="stock-txt">{{ product.stockSold }} / {{ product.stockLimit }} vendus</span>
+    </div>
+
+    <!-- Prix + CTA -->
+    <div class="card-foot">
+      <div class="price">
+        <span v-if="product.promoPrice != null" class="price-old">{{ fmt(product.basePrice) }}</span>
+        <span class="price-now">{{ fmt(effectivePrice) }}</span>
+        <span class="price-unit">cr</span>
+      </div>
+      <!-- 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"
+        :disabled="disabled"
+        @click="onBuy"
+        type="button"
+      >{{ buyLabel }}</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { Product, PurchaseOptions } from '@/composables/useShop';
+import { parseMeta, type ProductMeta } from '@/composables/useMeta';
+
+const props = defineProps<{
+  product: Product;
+  buying: boolean;
+  owns: (kind: string) => boolean;
+  ownedPetChars: string[];
+  petCount: number;
+  freeMode: boolean;
+}>();
+
+const emit = defineEmits<{
+  buy: [productId: string, options: PurchaseOptions];
+  goPerso: [];
+}>();
+
+const meta = computed(() => parseMeta<ProductMeta>(props.product.metaJson));
+
+// Subscription
+const plans = computed(() => meta.value.plans ?? []);
+const plan = ref<'monthly' | 'annual'>('monthly');
+
+// Ad-frame
+const durations = computed(() => meta.value.durations ?? []);
+const formats = computed(() => meta.value.formats ?? []);
+const durationDays = ref<number>(7);
+const format = ref<'static' | 'gif'>('static');
+const url = ref('');
+
+// Pet
+const designs = computed(() => meta.value.designs ?? []);
+const petDesign = ref<string>('');
+const availableDesigns = computed(() =>
+  designs.value.filter((d) => !props.ownedPetChars.includes(d.char))
+);
+watch(availableDesigns, (ds) => {
+  if (ds.length > 0 && !ds.find((d) => d.id === petDesign.value)) {
+    petDesign.value = ds[0].id;
+  }
+}, { immediate: true });
+
+const icon = computed(() => {
+  if (props.product.id === 'ip-colors') return '🎨';
+  if (props.product.kind === 'send-skin') return meta.value.char ?? '🖱️';
+  switch (props.product.kind) {
+    case 'ad-frame': return '📣';
+    case 'subscription': return '🚫';
+    case 'ip-skin': return '👑';
+    case 'pet': return '✨';
+    case 'bundle': return '🎁';
+    case 'rich': return props.product.id === 'rich-js' ? '⚡' : '🎨';
+    case 'consumable': return '🔊';
+    default: return '🛍️';
+  }
+});
+
+const effectivePrice = computed(() => {
+  let price = props.product.promoPrice ?? props.product.basePrice;
+  if (props.product.kind === 'subscription') {
+    const p = plans.value.find((x) => x.id === plan.value);
+    if (p) price = p.price;
+  }
+  if (props.product.kind === 'ad-frame') {
+    const d = durations.value.find((x) => x.days === durationDays.value);
+    const f = formats.value.find((x) => x.id === format.value);
+    price += (d?.extra ?? 0) + (f?.extra ?? 0);
+  }
+  return price;
+});
+
+// Ownership / limits → disable & label.
+const ownedAlready = computed(() => {
+  const k = props.product.kind;
+  if (k === 'ip-skin') return props.owns('style-dore');
+  if (k === 'subscription') return props.owns('noads');
+  if (k === 'rich') return props.owns(props.product.id);
+  if (k === 'unlock') return props.owns(props.product.id);
+  if (k === 'ad-frame') return props.owns('ad-frame');
+  if (k === 'send-skin') return props.owns(props.product.id);
+  return false;
+});
+
+const soldOut = computed(() => props.product.stockLimit != null && props.product.stockSold >= props.product.stockLimit);
+
+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é ✓';
+  return props.freeMode ? 'Obtenir (gratuit)' : 'Acheter';
+});
+
+const stockPct = computed(() =>
+  props.product.stockLimit ? Math.round((props.product.stockSold / props.product.stockLimit) * 100) : 0
+);
+
+function fmt(centi: number): string {
+  return (centi / 100).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+function onBuy(): void {
+  const options: PurchaseOptions = {};
+  if (props.product.kind === 'subscription') options.plan = plan.value;
+  if (props.product.kind === 'ad-frame') {
+    options.durationDays = durationDays.value;
+    options.format = format.value;
+    options.url = url.value || undefined;
+  }
+  if (props.product.kind === 'pet' || props.product.id === 'bundle-cosmetic') {
+    const d = availableDesigns.value.find((x) => x.id === petDesign.value) ?? availableDesigns.value[0];
+    if (d) { options.petDesign = d.id; options.petChar = d.char; }
+  }
+  emit('buy', props.product.id, options);
+}
+</script>
+
+<style scoped>
+.card {
+  position: relative;
+  background: #101018;
+  border: 1px solid #20203a;
+  border-radius: 10px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-family: Arial, sans-serif;
+}
+.card--owned { opacity: 0.7; }
+
+.card-badge {
+  position: absolute;
+  top: -9px;
+  right: 12px;
+  background: #ff2266;
+  color: #fff;
+  font-size: 9px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  padding: 3px 9px;
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+.card-head { display: flex; gap: 12px; align-items: flex-start; }
+.card-icon { font-size: 28px; }
+.card-name { font-size: 15px; font-weight: bold; color: #d8d8ee; margin: 0; text-decoration: none; display: inline-block; }
+.card-name:hover { color: #00ddff; }
+.card-sub { font-size: 11px; color: #6a6a90; margin: 3px 0 0; line-height: 1.4; }
+
+.preview {
+  display: flex; align-items: center; gap: 10px;
+  background: #0a0a12; border-radius: 6px; padding: 10px; justify-content: center;
+}
+.prev-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
+.prev-plain { color: #666688; }
+.prev-gold { color: #aa8833; }
+.prev-arrow { color: #444466; }
+
+.opts { display: flex; flex-direction: column; gap: 8px; }
+.opt-radio {
+  display: flex; align-items: center; gap: 8px;
+  background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
+  padding: 8px 10px; font-size: 12px; color: #aaaacc; cursor: pointer;
+}
+.opt-radio.active { border-color: #00aaff; background: #0a1622; }
+.opt-radio input { accent-color: #00ccff; }
+.opt-radio--sm { padding: 5px 8px; font-size: 11px; flex: 1; justify-content: center; }
+.opt-price { margin-left: auto; color: #ffdd66; font-family: 'Courier New', monospace; }
+.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.opt-label { font-size: 11px; color: #8888aa; }
+.opt-select, .opt-input {
+  background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
+  color: #ccccdd; font-size: 12px; padding: 6px 8px; outline: none;
+}
+.opt-select { flex: 1; }
+.opt-input { width: 100%; }
+
+.pet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
+.pet-cell {
+  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: #8844aa; }
+.pet-pos { display: flex; gap: 6px; }
+
+.send-skin-preview { display: flex; justify-content: center; padding: 8px 0; }
+.skin-btn-demo {
+  width: 52px; height: 52px; border-radius: 50%;
+  background: #151525; border: 1px solid #30306a;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 24px;
+}
+
+.stock { display: flex; flex-direction: column; gap: 4px; }
+.stock-bar { height: 6px; background: #1a1a2a; border-radius: 3px; overflow: hidden; }
+.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; 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: #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;
+  transition: background 0.15s;
+}
+.buy:hover:not(:disabled) { background: #1a4466; }
+.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>
diff --git a/frontend/src/components/shop/persos/BgPrefsSection.vue b/frontend/src/components/shop/persos/BgPrefsSection.vue
index 694764f..f355118 100644
--- a/frontend/src/components/shop/persos/BgPrefsSection.vue
+++ b/frontend/src/components/shop/persos/BgPrefsSection.vue
@@ -1,7 +1,6 @@
 <!-- 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>
+  <PrefSection title="🖼️ Fond du chat">
     <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
@@ -15,12 +14,13 @@
       <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>
+  </PrefSection>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useCustomStyles } from '@/composables/useCustomStyles';
+import PrefSection from '@/components/shop/PrefSection.vue';
 
 const { prefs } = useCustomStyles();
 
diff --git a/frontend/src/components/shop/persos/IpColorPrefsSection.vue b/frontend/src/components/shop/persos/IpColorPrefsSection.vue
index ebd2c04..f6f57df 100644
--- a/frontend/src/components/shop/persos/IpColorPrefsSection.vue
+++ b/frontend/src/components/shop/persos/IpColorPrefsSection.vue
@@ -1,10 +1,9 @@
 <!-- Mes Persos › Couleur de mon IP (viewer-side, nécessite la Palette IP) -->
 <template>
-  <section class="pf-section" :class="{ 'pf-locked': !myPerks.ipColors }">
-    <h2 class="pf-title">
-      🎨 Couleur de mon IP
-      <span v-if="!myPerks.ipColors" class="pf-lock">🔒 Palette IP requise</span>
-    </h2>
+  <PrefSection title="🎨 Couleur de mon IP" :locked="!myPerks.ipColors">
+    <template v-if="!myPerks.ipColors" #lock>
+      <span class="pf-lock">🔒 Palette IP requise</span>
+    </template>
     <p v-if="myIp" class="pf-sub">IP&nbsp;: <code class="code-ip" :style="ipPreviewStyle">{{ myIp }}</code></p>
     <div class="pf-grid">
       <button
@@ -21,7 +20,7 @@
         <span class="pf-label">{{ opt.label }}</span>
       </button>
     </div>
-  </section>
+  </PrefSection>
 </template>
 
 <script setup lang="ts">
@@ -30,6 +29,7 @@ import { useCustomStyles, IP_COLOR_OPTIONS } from '@/composables/useCustomStyles
 import { useMyPerks } from '@/composables/useMessages';
 import { useWallet } from '@/composables/useWallet';
 import { getIpColorWithPerks, getIpGlow } from '@/composables/ipColor';
+import PrefSection from '@/components/shop/PrefSection.vue';
 
 const { prefs } = useCustomStyles();
 const { myPerks } = useMyPerks();
diff --git a/frontend/src/components/shop/persos/PetsPrefsSection.vue b/frontend/src/components/shop/persos/PetsPrefsSection.vue
index d489215..abb1a30 100644
--- a/frontend/src/components/shop/persos/PetsPrefsSection.vue
+++ b/frontend/src/components/shop/persos/PetsPrefsSection.vue
@@ -1,10 +1,9 @@
 <!-- Mes Persos › Pet actif affiché à gauche de l'IP (parmi les pets possédés) -->
 <template>
-  <section class="pf-section" :class="{ 'pf-locked': !hasPets }">
-    <h2 class="pf-title">
-      ✨ Mes pets
-      <span v-if="!hasPets" class="pf-lock">Achetez un Pet dans le shop</span>
-    </h2>
+  <PrefSection title="✨ Mes pets" :locked="!hasPets">
+    <template v-if="!hasPets" #lock>
+      <span class="pf-lock">Achetez un Pet dans le shop</span>
+    </template>
     <template v-if="hasPets">
       <div class="pf-grid">
         <button
@@ -28,7 +27,7 @@
       </p>
     </template>
     <p v-else class="pf-sub">Aucun pet possédé pour l'instant.</p>
-  </section>
+  </PrefSection>
 </template>
 
 <script setup lang="ts">
@@ -36,6 +35,7 @@ import { computed } from 'vue';
 import { useCustomStyles } from '@/composables/useCustomStyles';
 import { useMyPerks } from '@/composables/useMessages';
 import { useWallet } from '@/composables/useWallet';
+import PrefSection from '@/components/shop/PrefSection.vue';
 
 const { prefs } = useCustomStyles();
 const { myPerks } = useMyPerks();
diff --git a/frontend/src/components/shop/persos/SendButtonPrefsSection.vue b/frontend/src/components/shop/persos/SendButtonPrefsSection.vue
index 6afc084..df4f94c 100644
--- a/frontend/src/components/shop/persos/SendButtonPrefsSection.vue
+++ b/frontend/src/components/shop/persos/SendButtonPrefsSection.vue
@@ -1,10 +1,9 @@
 <!-- Mes Persos › Couleur du bouton d'envoi (preset, nécessite le skin d'éléments) -->
 <template>
-  <section class="pf-section" :class="{ 'pf-locked': !myPerks.elementSkin }">
-    <h2 class="pf-title">
-      ➤ Bouton d'envoi
-      <span v-if="!myPerks.elementSkin" class="pf-lock">🔒 Skin d'éléments requis</span>
-    </h2>
+  <PrefSection title="➤ Bouton d'envoi" :locked="!myPerks.elementSkin">
+    <template v-if="!myPerks.elementSkin" #lock>
+      <span class="pf-lock">🔒 Skin d'éléments requis</span>
+    </template>
     <div class="pf-grid">
       <button
         v-for="[k, p] in presetEntries"
@@ -19,12 +18,13 @@
         <span class="pf-label">{{ p.label }}</span>
       </button>
     </div>
-  </section>
+  </PrefSection>
 </template>
 
 <script setup lang="ts">
 import { useCustomStyles, SEND_BUTTON_PRESETS, type SendButtonKey } from '@/composables/useCustomStyles';
 import { useMyPerks } from '@/composables/useMessages';
+import PrefSection from '@/components/shop/PrefSection.vue';
 
 const { prefs } = useCustomStyles();
 const { myPerks } = useMyPerks();
diff --git a/frontend/src/components/shop/persos/SendSkinPrefsSection.vue b/frontend/src/components/shop/persos/SendSkinPrefsSection.vue
index 2634713..faa55d2 100644
--- a/frontend/src/components/shop/persos/SendSkinPrefsSection.vue
+++ b/frontend/src/components/shop/persos/SendSkinPrefsSection.vue
@@ -1,10 +1,9 @@
 <!-- Mes Persos › Skin (emoji) du bouton d'envoi, parmi les skins possédés -->
 <template>
-  <section class="pf-section" :class="{ 'pf-locked': !hasSendSkins }">
-    <h2 class="pf-title">
-      🖱️ Skin du bouton d'envoi
-      <span v-if="!hasSendSkins" class="pf-lock">Achetez un skin dans le shop</span>
-    </h2>
+  <PrefSection title="🖱️ Skin du bouton d'envoi" :locked="!hasSendSkins">
+    <template v-if="!hasSendSkins" #lock>
+      <span class="pf-lock">Achetez un skin dans le shop</span>
+    </template>
     <template v-if="hasSendSkins">
       <div class="pf-grid">
         <button
@@ -30,13 +29,14 @@
       </div>
     </template>
     <p v-else class="pf-sub">Aucun skin possédé pour l'instant.</p>
-  </section>
+  </PrefSection>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useCustomStyles } from '@/composables/useCustomStyles';
 import { useMyPerks } from '@/composables/useMessages';
+import PrefSection from '@/components/shop/PrefSection.vue';
 
 const { prefs } = useCustomStyles();
 const { myPerks } = useMyPerks();
diff --git a/frontend/src/composables/ipColor.spec.ts b/frontend/src/composables/ipColor.spec.ts
new file mode 100644
index 0000000..3bd2e25
--- /dev/null
+++ b/frontend/src/composables/ipColor.spec.ts
@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { getIpColor, getIpColorWithPerks } from './ipColor';
+
+describe('ipColor (fonction réutilisable)', () => {
+  it('est déterministe : même IP → même couleur', () => {
+    expect(getIpColor('1.2.3.4')).toBe(getIpColor('1.2.3.4'));
+  });
+
+  it('renvoie une couleur hex de la palette', () => {
+    expect(getIpColor('42.42.42.42')).toMatch(/^#[0-9a-f]{6}$/i);
+  });
+
+  it('le skin gold force la couleur or, sinon palette déterministe', () => {
+    expect(getIpColorWithPerks('1.2.3.4', { skin: 'gold' })).toBe('#ffdd44');
+    expect(getIpColorWithPerks('1.2.3.4', {})).toBe(getIpColor('1.2.3.4'));
+    expect(getIpColorWithPerks('1.2.3.4', null)).toBe(getIpColor('1.2.3.4'));
+  });
+});
diff --git a/frontend/src/composables/ipColor.ts b/frontend/src/composables/ipColor.ts
index b2b440d..f361401 100644
--- a/frontend/src/composables/ipColor.ts
+++ b/frontend/src/composables/ipColor.ts
@@ -1,33 +1,33 @@
-/** Couleurs assignées de façon déterministe à chaque adresse IP */
-const PALETTE = ['#7777aa', '#4499bb', '#aa4499', '#338866', '#aa6633'] as const;
-
-export function getIpColor(ip: string): string {
-  // djb2 hash
-  let hash = 5381;
-  for (let i = 0; i < ip.length; i++) {
-    hash = ((hash << 5) + hash + ip.charCodeAt(i)) & 0xffffffff;
-  }
-  return PALETTE[Math.abs(hash) % PALETTE.length];
-}
-
-// Glows are currently disabled globally; params kept for signature stability.
-export function getIpGlow(_color: string): string {
-  return 'none';
-}
-
-/** Gold skin (Style Doré) — overrides the djb2 palette for owners. */
-const GOLD = '#ffdd44';
-
-interface PerkLike {
-  skin?: 'gold';
-}
-
-/** Perk-aware color: gold for Style Doré owners, else the deterministic palette. */
-export function getIpColorWithPerks(ip: string, perks?: PerkLike | null): string {
-  if (perks?.skin === 'gold') return GOLD;
-  return getIpColor(ip);
-}
-
-export function getIpGlowWithPerks(_ip: string, _perks?: PerkLike | null): string {
-  return 'none';
-}
+/** Couleurs assignées de façon déterministe à chaque adresse IP */
+const PALETTE = ['#7777aa', '#4499bb', '#aa4499', '#338866', '#aa6633'] as const;
+
+export function getIpColor(ip: string): string {
+  // djb2 hash
+  let hash = 5381;
+  for (let i = 0; i < ip.length; i++) {
+    hash = ((hash << 5) + hash + ip.charCodeAt(i)) & 0xffffffff;
+  }
+  return PALETTE[Math.abs(hash) % PALETTE.length];
+}
+
+// Glows are currently disabled globally; params kept for signature stability.
+export function getIpGlow(_color: string): string {
+  return 'none';
+}
+
+/** Gold skin (Style Doré) — overrides the djb2 palette for owners. */
+const GOLD = '#ffdd44';
+
+interface PerkLike {
+  skin?: 'gold';
+}
+
+/** Perk-aware color: gold for Style Doré owners, else the deterministic palette. */
+export function getIpColorWithPerks(ip: string, perks?: PerkLike | null): string {
+  if (perks?.skin === 'gold') return GOLD;
+  return getIpColor(ip);
+}
+
+export function getIpGlowWithPerks(_ip: string, _perks?: PerkLike | null): string {
+  return 'none';
+}
diff --git a/frontend/src/composables/useAds.ts b/frontend/src/composables/useAds.ts
index 0ab9db8..46afb51 100644
--- a/frontend/src/composables/useAds.ts
+++ b/frontend/src/composables/useAds.ts
@@ -1,67 +1,67 @@
-import { ref, watch } from 'vue';
-
-/** Ad inventory client: fetch ads by slot, report impressions (debounced). */
-
-// Shared signal: bumped when the server broadcasts an `ads` frame (e.g. a user
-// bought a Cadre de Pub). All useAds instances refetch when this changes.
-const adsRevision = ref(0);
-export function bumpAdsRevision(): void {
-  adsRevision.value++;
-}
-
-export interface Ad {
-  id: string;
-  brand: string;
-  subtitle?: string | null;
-  url?: string | null;
-  cta?: string | null;
-  icon?: string | null;
-  tone: string; // blue | green | purple | casino | user
-  kind: string; // band | casino
-  ownerIp?: string | null;
-  imageUrl?: string | null;
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-export function useAds(kind: 'band' | 'casino') {
-  const ads = ref<Ad[]>([]);
-
-  async function fetchAds(): Promise<void> {
-    try {
-      const res = await fetch(`${API_URL}/api/ads?kind=${kind}`);
-      if (res.ok) ads.value = (await res.json()) as Ad[];
-    } catch {
-      /* ignore */
-    }
-  }
-
-  // Refetch whenever the server signals an inventory change.
-  watch(adsRevision, () => void fetchAds());
-
-  // Debounced impression reporting (each ad id at most once per flush).
-  const pending = new Set<string>();
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  function reportImpression(id: string): void {
-    pending.add(id);
-    if (timer) return;
-    timer = setTimeout(flush, 800);
-  }
-  async function flush(): Promise<void> {
-    timer = null;
-    const ids = [...pending];
-    pending.clear();
-    if (!ids.length) return;
-    try {
-      await fetch(`${API_URL}/api/ads/impressions`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ids }),
-      });
-    } catch {
-      /* ignore */
-    }
-  }
-
-  return { ads, fetchAds, reportImpression };
-}
+import { ref, watch } from 'vue';
+
+/** Ad inventory client: fetch ads by slot, report impressions (debounced). */
+
+// Shared signal: bumped when the server broadcasts an `ads` frame (e.g. a user
+// bought a Cadre de Pub). All useAds instances refetch when this changes.
+const adsRevision = ref(0);
+export function bumpAdsRevision(): void {
+  adsRevision.value++;
+}
+
+export interface Ad {
+  id: string;
+  brand: string;
+  subtitle?: string | null;
+  url?: string | null;
+  cta?: string | null;
+  icon?: string | null;
+  tone: string; // blue | green | purple | casino | user
+  kind: string; // band | casino
+  ownerIp?: string | null;
+  imageUrl?: string | null;
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export function useAds(kind: 'band' | 'casino') {
+  const ads = ref<Ad[]>([]);
+
+  async function fetchAds(): Promise<void> {
+    try {
+      const res = await fetch(`${API_URL}/api/ads?kind=${kind}`);
+      if (res.ok) ads.value = (await res.json()) as Ad[];
+    } catch {
+      /* ignore */
+    }
+  }
+
+  // Refetch whenever the server signals an inventory change.
+  watch(adsRevision, () => void fetchAds());
+
+  // Debounced impression reporting (each ad id at most once per flush).
+  const pending = new Set<string>();
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  function reportImpression(id: string): void {
+    pending.add(id);
+    if (timer) return;
+    timer = setTimeout(flush, 800);
+  }
+  async function flush(): Promise<void> {
+    timer = null;
+    const ids = [...pending];
+    pending.clear();
+    if (!ids.length) return;
+    try {
+      await fetch(`${API_URL}/api/ads/impressions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ids }),
+      });
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return { ads, fetchAds, reportImpression };
+}
diff --git a/frontend/src/composables/useAlert.ts b/frontend/src/composables/useAlert.ts
index 05a0cfa..df9b7ca 100644
--- a/frontend/src/composables/useAlert.ts
+++ b/frontend/src/composables/useAlert.ts
@@ -1,86 +1,86 @@
-import { ref } from 'vue';
-
-/**
- * Global audio alert (paid, consumable). On an `alert` WS frame, every tab plays
- * the sound at full volume for at most maxDurationMs. If a custom mp3 URL is
- * provided it's played; otherwise a synthesized siren is used (WebAudio).
- *
- * Browser autoplay policies block sound before a user gesture — we unlock the
- * AudioContext on the first click anywhere.
- */
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-let audioCtx: AudioContext | null = null;
-const lastFiredAt = ref(0);
-
-function unlock(): void {
-  if (!audioCtx) {
-    const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
-    if (AC) audioCtx = new AC();
-  }
-  if (audioCtx && audioCtx.state === 'suspended') void audioCtx.resume();
-}
-
-// Unlock on the first interaction.
-if (typeof window !== 'undefined') {
-  window.addEventListener('pointerdown', unlock, { once: false });
-}
-
-function playSiren(maxDurationMs: number): void {
-  if (!audioCtx) return;
-  const dur = Math.min(maxDurationMs, 5000) / 1000;
-  const now = audioCtx.currentTime;
-  const osc = audioCtx.createOscillator();
-  const gain = audioCtx.createGain();
-  osc.type = 'sawtooth';
-  // Warble between two pitches like an air-raid siren.
-  osc.frequency.setValueAtTime(440, now);
-  for (let t = 0; t < dur; t += 0.5) {
-    osc.frequency.linearRampToValueAtTime(880, now + t + 0.25);
-    osc.frequency.linearRampToValueAtTime(440, now + t + 0.5);
-  }
-  gain.gain.setValueAtTime(1, now); // volume à fond
-  gain.gain.setValueAtTime(1, now + dur - 0.05);
-  gain.gain.linearRampToValueAtTime(0, now + dur);
-  osc.connect(gain).connect(audioCtx.destination);
-  osc.start(now);
-  osc.stop(now + dur);
-}
-
-function playMp3(url: string, maxDurationMs: number): void {
-  const audio = new Audio(url);
-  audio.volume = 1;
-  void audio.play().catch(() => { /* autoplay blocked */ });
-  setTimeout(() => { audio.pause(); audio.currentTime = 0; }, Math.min(maxDurationMs, 5000));
-}
-
-/** Handle an incoming `alert` frame. */
-export function handleAlertFrame(data: { soundUrl?: string; maxDurationMs?: number }): void {
-  lastFiredAt.value = Date.now();
-  const max = data.maxDurationMs ?? 5000;
-  unlock();
-  if (data.soundUrl) playMp3(data.soundUrl, max);
-  else playSiren(max);
-}
-
-export function useAlert() {
-  async function fireAlert(soundUrl?: string): Promise<{ ok: boolean; error?: string }> {
-    unlock();
-    try {
-      const res = await fetch(`${API_URL}/api/alert`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ soundUrl }),
-      });
-      if (!res.ok) {
-        const d = await res.json().catch(() => ({}));
-        return { ok: false, error: d.error || 'Alerte impossible' };
-      }
-      return { ok: true };
-    } catch {
-      return { ok: false, error: 'Réseau indisponible' };
-    }
-  }
-  return { fireAlert };
-}
+import { ref } from 'vue';
+
+/**
+ * Global audio alert (paid, consumable). On an `alert` WS frame, every tab plays
+ * the sound at full volume for at most maxDurationMs. If a custom mp3 URL is
+ * provided it's played; otherwise a synthesized siren is used (WebAudio).
+ *
+ * Browser autoplay policies block sound before a user gesture — we unlock the
+ * AudioContext on the first click anywhere.
+ */
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+let audioCtx: AudioContext | null = null;
+const lastFiredAt = ref(0);
+
+function unlock(): void {
+  if (!audioCtx) {
+    const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
+    if (AC) audioCtx = new AC();
+  }
+  if (audioCtx && audioCtx.state === 'suspended') void audioCtx.resume();
+}
+
+// Unlock on the first interaction.
+if (typeof window !== 'undefined') {
+  window.addEventListener('pointerdown', unlock, { once: false });
+}
+
+function playSiren(maxDurationMs: number): void {
+  if (!audioCtx) return;
+  const dur = Math.min(maxDurationMs, 5000) / 1000;
+  const now = audioCtx.currentTime;
+  const osc = audioCtx.createOscillator();
+  const gain = audioCtx.createGain();
+  osc.type = 'sawtooth';
+  // Warble between two pitches like an air-raid siren.
+  osc.frequency.setValueAtTime(440, now);
+  for (let t = 0; t < dur; t += 0.5) {
+    osc.frequency.linearRampToValueAtTime(880, now + t + 0.25);
+    osc.frequency.linearRampToValueAtTime(440, now + t + 0.5);
+  }
+  gain.gain.setValueAtTime(1, now); // volume à fond
+  gain.gain.setValueAtTime(1, now + dur - 0.05);
+  gain.gain.linearRampToValueAtTime(0, now + dur);
+  osc.connect(gain).connect(audioCtx.destination);
+  osc.start(now);
+  osc.stop(now + dur);
+}
+
+function playMp3(url: string, maxDurationMs: number): void {
+  const audio = new Audio(url);
+  audio.volume = 1;
+  void audio.play().catch(() => { /* autoplay blocked */ });
+  setTimeout(() => { audio.pause(); audio.currentTime = 0; }, Math.min(maxDurationMs, 5000));
+}
+
+/** Handle an incoming `alert` frame. */
+export function handleAlertFrame(data: { soundUrl?: string; maxDurationMs?: number }): void {
+  lastFiredAt.value = Date.now();
+  const max = data.maxDurationMs ?? 5000;
+  unlock();
+  if (data.soundUrl) playMp3(data.soundUrl, max);
+  else playSiren(max);
+}
+
+export function useAlert() {
+  async function fireAlert(soundUrl?: string): Promise<{ ok: boolean; error?: string }> {
+    unlock();
+    try {
+      const res = await fetch(`${API_URL}/api/alert`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ soundUrl }),
+      });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        return { ok: false, error: d.error || 'Alerte impossible' };
+      }
+      return { ok: true };
+    } catch {
+      return { ok: false, error: 'Réseau indisponible' };
+    }
+  }
+  return { fireAlert };
+}
diff --git a/frontend/src/composables/useAttachments.ts b/frontend/src/composables/useAttachments.ts
index eaed427..a1c28b9 100644
--- a/frontend/src/composables/useAttachments.ts
+++ b/frontend/src/composables/useAttachments.ts
@@ -1,43 +1,43 @@
-/** Upload helper: posts a file to /api/uploads, returns its metadata. */
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-export interface UploadedAttachment {
-  id: string;
-  filename: string;
-  mimeType: string;
-  size: number;
-}
-
-export type UploadResult =
-  | { ok: true; attachment: UploadedAttachment }
-  | { ok: false; error: string };
-
-export function useAttachments() {
-  async function uploadFile(file: File): Promise<UploadResult> {
-    const form = new FormData();
-    form.append('file', file);
-    try {
-      const res = await fetch(`${API_URL}/api/uploads`, { method: 'POST', body: form });
-      const data = await res.json().catch(() => ({}));
-      if (!res.ok) return { ok: false, error: data.error || 'Upload refusé' };
-      return { ok: true, attachment: data as UploadedAttachment };
-    } catch {
-      return { ok: false, error: 'Réseau indisponible' };
-    }
-  }
-
-  /** Human file size. */
-  function kb(bytes: number): string {
-    if (bytes >= 1_000_000) return (bytes / 1_000_000).toFixed(1) + ' Mo';
-    if (bytes >= 1000) return Math.round(bytes / 1000) + ' Ko';
-    return bytes + ' o';
-  }
-
-  /** URL to fetch/download an attachment. */
-  function urlFor(id: string): string {
-    return `${API_URL}/api/uploads/${id}`;
-  }
-
-  return { uploadFile, kb, urlFor };
-}
+/** Upload helper: posts a file to /api/uploads, returns its metadata. */
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export interface UploadedAttachment {
+  id: string;
+  filename: string;
+  mimeType: string;
+  size: number;
+}
+
+export type UploadResult =
+  | { ok: true; attachment: UploadedAttachment }
+  | { ok: false; error: string };
+
+export function useAttachments() {
+  async function uploadFile(file: File): Promise<UploadResult> {
+    const form = new FormData();
+    form.append('file', file);
+    try {
+      const res = await fetch(`${API_URL}/api/uploads`, { method: 'POST', body: form });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) return { ok: false, error: data.error || 'Upload refusé' };
+      return { ok: true, attachment: data as UploadedAttachment };
+    } catch {
+      return { ok: false, error: 'Réseau indisponible' };
+    }
+  }
+
+  /** Human file size. */
+  function kb(bytes: number): string {
+    if (bytes >= 1_000_000) return (bytes / 1_000_000).toFixed(1) + ' Mo';
+    if (bytes >= 1000) return Math.round(bytes / 1000) + ' Ko';
+    return bytes + ' o';
+  }
+
+  /** URL to fetch/download an attachment. */
+  function urlFor(id: string): string {
+    return `${API_URL}/api/uploads/${id}`;
+  }
+
+  return { uploadFile, kb, urlFor };
+}
diff --git a/frontend/src/composables/useContextMenu.ts b/frontend/src/composables/useContextMenu.ts
index db4bca8..e49bb89 100644
--- a/frontend/src/composables/useContextMenu.ts
+++ b/frontend/src/composables/useContextMenu.ts
@@ -1,60 +1,60 @@
-/**
- * Global singleton for the right-click style context menu.
- * Any component calls openContextMenu() to display the floating picker,
- * and StyleContextMenu.vue (mounted once in App.vue) renders it.
- */
-import { reactive } from 'vue';
-
-export interface ContextMenuItem {
-  value: string;
-  label: string;
-  swatch?: string;        // optional color swatch dot
-  emoji?: string;         // optional emoji shown instead of swatch
-  isHeader?: boolean;     // non-interactive section heading
-  checked?: boolean;      // explicit checkmark (for multi-group menus)
-}
-
-interface MenuState {
-  visible: boolean;
-  x: number;
-  y: number;
-  title: string;
-  items: ContextMenuItem[];
-  current: string;
-  onSelect: (value: string) => void;
-}
-
-const state = reactive<MenuState>({
-  visible: false,
-  x: 0,
-  y: 0,
-  title: '',
-  items: [],
-  current: '',
-  onSelect: () => {},
-});
-
-export function openContextMenu(opts: {
-  x: number;
-  y: number;
-  title: string;
-  items: ContextMenuItem[];
-  current: string;
-  onSelect: (value: string) => void;
-}): void {
-  state.visible = true;
-  state.x = opts.x;
-  state.y = opts.y;
-  state.title = opts.title;
-  state.items = opts.items;
-  state.current = opts.current;
-  state.onSelect = opts.onSelect;
-}
-
-export function closeContextMenu(): void {
-  state.visible = false;
-}
-
-export function useContextMenu() {
-  return { state };
-}
+/**
+ * Global singleton for the right-click style context menu.
+ * Any component calls openContextMenu() to display the floating picker,
+ * and StyleContextMenu.vue (mounted once in App.vue) renders it.
+ */
+import { reactive } from 'vue';
+
+export interface ContextMenuItem {
+  value: string;
+  label: string;
+  swatch?: string;        // optional color swatch dot
+  emoji?: string;         // optional emoji shown instead of swatch
+  isHeader?: boolean;     // non-interactive section heading
+  checked?: boolean;      // explicit checkmark (for multi-group menus)
+}
+
+interface MenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  title: string;
+  items: ContextMenuItem[];
+  current: string;
+  onSelect: (value: string) => void;
+}
+
+const state = reactive<MenuState>({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  items: [],
+  current: '',
+  onSelect: () => {},
+});
+
+export function openContextMenu(opts: {
+  x: number;
+  y: number;
+  title: string;
+  items: ContextMenuItem[];
+  current: string;
+  onSelect: (value: string) => void;
+}): void {
+  state.visible = true;
+  state.x = opts.x;
+  state.y = opts.y;
+  state.title = opts.title;
+  state.items = opts.items;
+  state.current = opts.current;
+  state.onSelect = opts.onSelect;
+}
+
+export function closeContextMenu(): void {
+  state.visible = false;
+}
+
+export function useContextMenu() {
+  return { state };
+}
diff --git a/frontend/src/composables/useCustomStyles.ts b/frontend/src/composables/useCustomStyles.ts
index 9421c5c..dae2eb9 100644
--- a/frontend/src/composables/useCustomStyles.ts
+++ b/frontend/src/composables/useCustomStyles.ts
@@ -1,80 +1,80 @@
-/**
- * Viewer-side visual customisations, persisted in localStorage.
- * None of these affect other users — they're purely local display overrides.
- */
-import { reactive, watch } from 'vue';
-
-const STORAGE_KEY = 'xip_custom_styles_v1';
-
-// ── Preset catalogues ────────────────────────────────────────────────────────
-
-export const SEND_BUTTON_PRESETS = {
-  default: { bg: '#004488', color: '#00ddff', radius: '50%',  label: 'Cyan (défaut)' },
-  green:   { bg: '#1a4a1a', color: '#00ee77', radius: '50%',  label: 'Vert' },
-  purple:  { bg: '#2a1040', color: '#cc44ff', radius: '50%',  label: 'Violet' },
-  red:     { bg: '#3a0a0a', color: '#ff5533', radius: '50%',  label: 'Rouge' },
-  square:  { bg: '#1a1a1a', color: '#ffffff', radius: '4px',   label: 'Blanc carré' },
-} as const;
-export type SendButtonKey = keyof typeof SEND_BUTTON_PRESETS;
-
-export const AD_FRAME_PRESETS = {
-  default: { border: '1px solid #1e1e2a', bg: '#121218', label: 'Défaut' },
-  neon:    { border: '1px solid #00ddff66', bg: '#0a1220', label: 'Néon bleu' },
-  gold:    { border: '1px solid #ffdd4466', bg: '#141208', label: 'Or' },
-  minimal: { border: '1px solid transparent', bg: '#0c0c10', label: 'Minimal' },
-} as const;
-export type AdFrameKey = keyof typeof AD_FRAME_PRESETS;
-
-export const IP_COLOR_OPTIONS: { value: string; label: string; swatch?: string }[] = [
-  { value: 'auto',    label: 'Auto (palette)' },
-  { value: '#00ddff', label: 'Cyan',   swatch: '#00ddff' },
-  { value: '#ff00cc', label: 'Rose',   swatch: '#ff00cc' },
-  { value: '#00ee77', label: 'Vert',   swatch: '#00ee77' },
-  { value: '#ffdd44', label: 'Or',     swatch: '#ffdd44' },
-  { value: '#ff5533', label: 'Rouge',  swatch: '#ff5533' },
-  { value: '#ffffff', label: 'Blanc',  swatch: '#ffffff' },
-];
-
-export const PET_OPTIONS: { value: string; label: string }[] = [
-  { value: '',   label: 'Aucun' },
-  { value: '🐱', label: '🐱 Chat' },
-  { value: '🐶', label: '🐶 Chien' },
-  { value: '✨', label: '✨ Sparkle' },
-  { value: '🔥', label: '🔥 Feu' },
-  { value: '👾', label: '👾 Ghost' },
-  { value: '⚡', label: '⚡ Éclair' },
-  { value: '🌙', label: '🌙 Lune' },
-];
-
-// ── Preferences shape ────────────────────────────────────────────────────────
-
-export interface CustomStylePrefs {
-  sendButton: SendButtonKey;
-  sendSkin: string;                  // send-skin product id, or '' for default arrow
-  adFrame: AdFrameKey;
-  ipColors: Record<string, string>;  // ip → hex or 'auto'
-  ipPets:   Record<string, string>;  // ip → emoji or ''
-  chatBgUrl: string;                 // URL or '' for no background
-}
-
-function defaults(): CustomStylePrefs {
-  return { sendButton: 'default', sendSkin: '', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
-}
-
-function load(): CustomStylePrefs {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (raw) return { ...defaults(), ...JSON.parse(raw) };
-  } catch { /* ignore */ }
-  return defaults();
-}
-
-const prefs = reactive<CustomStylePrefs>(load());
-
-watch(prefs, (v) => {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(v));
-}, { deep: true });
-
-export function useCustomStyles() {
-  return { prefs };
-}
+/**
+ * Viewer-side visual customisations, persisted in localStorage.
+ * None of these affect other users — they're purely local display overrides.
+ */
+import { reactive, watch } from 'vue';
+
+const STORAGE_KEY = 'xip_custom_styles_v1';
+
+// ── Preset catalogues ────────────────────────────────────────────────────────
+
+export const SEND_BUTTON_PRESETS = {
+  default: { bg: '#004488', color: '#00ddff', radius: '50%',  label: 'Cyan (défaut)' },
+  green:   { bg: '#1a4a1a', color: '#00ee77', radius: '50%',  label: 'Vert' },
+  purple:  { bg: '#2a1040', color: '#cc44ff', radius: '50%',  label: 'Violet' },
+  red:     { bg: '#3a0a0a', color: '#ff5533', radius: '50%',  label: 'Rouge' },
+  square:  { bg: '#1a1a1a', color: '#ffffff', radius: '4px',   label: 'Blanc carré' },
+} as const;
+export type SendButtonKey = keyof typeof SEND_BUTTON_PRESETS;
+
+export const AD_FRAME_PRESETS = {
+  default: { border: '1px solid #1e1e2a', bg: '#121218', label: 'Défaut' },
+  neon:    { border: '1px solid #00ddff66', bg: '#0a1220', label: 'Néon bleu' },
+  gold:    { border: '1px solid #ffdd4466', bg: '#141208', label: 'Or' },
+  minimal: { border: '1px solid transparent', bg: '#0c0c10', label: 'Minimal' },
+} as const;
+export type AdFrameKey = keyof typeof AD_FRAME_PRESETS;
+
+export const IP_COLOR_OPTIONS: { value: string; label: string; swatch?: string }[] = [
+  { value: 'auto',    label: 'Auto (palette)' },
+  { value: '#00ddff', label: 'Cyan',   swatch: '#00ddff' },
+  { value: '#ff00cc', label: 'Rose',   swatch: '#ff00cc' },
+  { value: '#00ee77', label: 'Vert',   swatch: '#00ee77' },
+  { value: '#ffdd44', label: 'Or',     swatch: '#ffdd44' },
+  { value: '#ff5533', label: 'Rouge',  swatch: '#ff5533' },
+  { value: '#ffffff', label: 'Blanc',  swatch: '#ffffff' },
+];
+
+export const PET_OPTIONS: { value: string; label: string }[] = [
+  { value: '',   label: 'Aucun' },
+  { value: '🐱', label: '🐱 Chat' },
+  { value: '🐶', label: '🐶 Chien' },
+  { value: '✨', label: '✨ Sparkle' },
+  { value: '🔥', label: '🔥 Feu' },
+  { value: '👾', label: '👾 Ghost' },
+  { value: '⚡', label: '⚡ Éclair' },
+  { value: '🌙', label: '🌙 Lune' },
+];
+
+// ── Preferences shape ────────────────────────────────────────────────────────
+
+export interface CustomStylePrefs {
+  sendButton: SendButtonKey;
+  sendSkin: string;                  // send-skin product id, or '' for default arrow
+  adFrame: AdFrameKey;
+  ipColors: Record<string, string>;  // ip → hex or 'auto'
+  ipPets:   Record<string, string>;  // ip → emoji or ''
+  chatBgUrl: string;                 // URL or '' for no background
+}
+
+function defaults(): CustomStylePrefs {
+  return { sendButton: 'default', sendSkin: '', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
+}
+
+function load(): CustomStylePrefs {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return { ...defaults(), ...JSON.parse(raw) };
+  } catch { /* ignore */ }
+  return defaults();
+}
+
+const prefs = reactive<CustomStylePrefs>(load());
+
+watch(prefs, (v) => {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(v));
+}, { deep: true });
+
+export function useCustomStyles() {
+  return { prefs };
+}
diff --git a/frontend/src/composables/useDebounce.spec.ts b/frontend/src/composables/useDebounce.spec.ts
new file mode 100644
index 0000000..0da9d66
--- /dev/null
+++ b/frontend/src/composables/useDebounce.spec.ts
@@ -0,0 +1,26 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { debounce } from './useDebounce';
+
+describe('debounce (fonction réutilisable)', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('ne déclenche qu’une fois après la pause', () => {
+    const spy = vi.fn();
+    const d = debounce(spy, 300);
+    d('a'); d('b'); d('c');
+    expect(spy).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(300);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('c'); // garde le dernier appel
+  });
+
+  it('cancel() annule l’appel en attente', () => {
+    const spy = vi.fn();
+    const d = debounce(spy, 200);
+    d('x');
+    d.cancel();
+    vi.advanceTimersByTime(500);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/composables/useDebounce.ts b/frontend/src/composables/useDebounce.ts
new file mode 100644
index 0000000..d8a8e85
--- /dev/null
+++ b/frontend/src/composables/useDebounce.ts
@@ -0,0 +1,33 @@
+/**
+ * Petit utilitaire de debounce réutilisable : retourne une version de `fn` qui
+ * n'est appelée qu'après `delay` ms sans nouvel appel. Expose `.cancel()` pour
+ * annuler un appel en attente (utile au démontage d'un composant).
+ */
+export interface Debounced<A extends unknown[]> {
+  (...args: A): void;
+  cancel(): void;
+}
+
+export function debounce<A extends unknown[]>(
+  fn: (...args: A) => void,
+  delay = 300,
+): Debounced<A> {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const debounced = (...args: A): void => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn(...args);
+    }, delay);
+  };
+
+  debounced.cancel = (): void => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+
+  return debounced;
+}
diff --git a/frontend/src/composables/useFavorites.spec.ts b/frontend/src/composables/useFavorites.spec.ts
new file mode 100644
index 0000000..71781b5
--- /dev/null
+++ b/frontend/src/composables/useFavorites.spec.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useFavorites, type FavoriteSource } from './useFavorites';
+
+const sample: FavoriteSource = {
+  id: 'm1',
+  content: 'Bonjour le monde',
+  authorIp: '1.2.3.4',
+  createdAt: '2026-01-01T10:00:00.000Z',
+  authorGeo: { country: 'France', countryCode: 'FR', city: 'Paris' },
+};
+
+describe('useFavorites (logique d’état)', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useFavorites().clear();
+  });
+
+  it('ajoute et retire un favori (toggle)', () => {
+    const fav = useFavorites();
+    expect(fav.isFav('m1')).toBe(false);
+
+    const added = fav.toggle(sample);
+    expect(added).toBe(true);
+    expect(fav.isFav('m1')).toBe(true);
+    expect(fav.all.value).toHaveLength(1);
+
+    const removed = fav.toggle(sample);
+    expect(removed).toBe(false);
+    expect(fav.isFav('m1')).toBe(false);
+    expect(fav.all.value).toHaveLength(0);
+  });
+
+  it('stocke un snapshot avec valeurs par défaut', () => {
+    const fav = useFavorites();
+    fav.toggle(sample);
+    const item = fav.all.value[0];
+    expect(item.content).toBe('Bonjour le monde');
+    expect(item.authorGeo?.countryCode).toBe('FR');
+    expect(item.rating).toBe(0);
+    expect(item.status).toBe('a-lire');
+  });
+
+  it('édite note / rating / statut', () => {
+    const fav = useFavorites();
+    fav.toggle(sample);
+    fav.setNote('m1', 'super message');
+    fav.setRating('m1', 4);
+    fav.setStatus('m1', 'top');
+    const item = fav.all.value[0];
+    expect(item.note).toBe('super message');
+    expect(item.rating).toBe(4);
+    expect(item.status).toBe('top');
+  });
+
+  it('borne la note entre 0 et 5', () => {
+    const fav = useFavorites();
+    fav.toggle(sample);
+    fav.setRating('m1', 9);
+    expect(fav.all.value[0].rating).toBe(5);
+    fav.setRating('m1', -3);
+    expect(fav.all.value[0].rating).toBe(0);
+  });
+
+  it('persiste dans localStorage', () => {
+    const fav = useFavorites();
+    fav.toggle(sample);
+    const raw = localStorage.getItem('xip-favoris');
+    expect(raw).toBeTruthy();
+    expect(JSON.parse(raw!).items[0].id).toBe('m1');
+  });
+});
diff --git a/frontend/src/composables/useFavorites.ts b/frontend/src/composables/useFavorites.ts
new file mode 100644
index 0000000..6afbefe
--- /dev/null
+++ b/frontend/src/composables/useFavorites.ts
@@ -0,0 +1,124 @@
+import { reactive, computed } from 'vue';
+
+/**
+ * Liste personnelle « Favoris » — état applicatif centralisé (singleton
+ * module-level), persisté en localStorage, sans serveur. Chaque favori est un
+ * SNAPSHOT du message au moment de l'ajout : la page Favoris et la synthèse
+ * restent valides même si le message a quitté le flux temps réel.
+ */
+
+const STORAGE_KEY = 'xip-favoris';
+
+export type FavStatus = 'a-lire' | 'lu' | 'top';
+
+export interface FavoriteGeo {
+  country: string;
+  countryCode: string;
+  city: string;
+}
+
+/** Données minimales d'un message dont on a besoin pour le favori. */
+export interface FavoriteSource {
+  id: string;
+  content: string;
+  authorIp: string;
+  createdAt: string;
+  authorGeo?: FavoriteGeo | null;
+}
+
+export interface FavoriteItem extends FavoriteSource {
+  note: string;        // annotation libre
+  rating: number;      // 0–5
+  status: FavStatus;
+  addedAt: string;     // ISO
+}
+
+interface FavState {
+  items: FavoriteItem[];
+}
+
+function load(): FavState {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed?.items)) return { items: parsed.items };
+    }
+  } catch {
+    /* ignore corrupted storage */
+  }
+  return { items: [] };
+}
+
+const state = reactive<FavState>(load());
+
+function persist(): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    /* quota / unavailable — non-fatal */
+  }
+}
+
+function find(id: string): FavoriteItem | undefined {
+  return state.items.find((f) => f.id === id);
+}
+
+export function useFavorites() {
+  const all = computed(() => state.items);
+  const count = computed(() => state.items.length);
+
+  function isFav(id: string): boolean {
+    return state.items.some((f) => f.id === id);
+  }
+
+  /** Ajoute le message en favori s'il ne l'est pas, sinon le retire. Retourne le nouvel état. */
+  function toggle(msg: FavoriteSource): boolean {
+    const existing = find(msg.id);
+    if (existing) {
+      state.items = state.items.filter((f) => f.id !== msg.id);
+      persist();
+      return false;
+    }
+    state.items.push({
+      id: msg.id,
+      content: msg.content,
+      authorIp: msg.authorIp,
+      createdAt: msg.createdAt,
+      authorGeo: msg.authorGeo ?? null,
+      note: '',
+      rating: 0,
+      status: 'a-lire',
+      addedAt: new Date().toISOString(),
+    });
+    persist();
+    return true;
+  }
+
+  function remove(id: string): void {
+    state.items = state.items.filter((f) => f.id !== id);
+    persist();
+  }
+
+  function setNote(id: string, note: string): void {
+    const f = find(id);
+    if (f) { f.note = note; persist(); }
+  }
+
+  function setRating(id: string, rating: number): void {
+    const f = find(id);
+    if (f) { f.rating = Math.max(0, Math.min(5, Math.round(rating))); persist(); }
+  }
+
+  function setStatus(id: string, status: FavStatus): void {
+    const f = find(id);
+    if (f) { f.status = status; persist(); }
+  }
+
+  function clear(): void {
+    state.items = [];
+    persist();
+  }
+
+  return { all, count, isFav, toggle, remove, setNote, setRating, setStatus, clear };
+}
diff --git a/frontend/src/composables/useMessageItem.ts b/frontend/src/composables/useMessageItem.ts
index 32606a3..f120261 100644
--- a/frontend/src/composables/useMessageItem.ts
+++ b/frontend/src/composables/useMessageItem.ts
@@ -1,62 +1,62 @@
-import { type GeoInfo } from '@/composables/useMessages';
-import { getIpColorWithPerks, getIpGlowWithPerks, getIpGlow } from '@/composables/ipColor';
-import { usePerks } from '@/composables/usePerks';
-import { useCustomStyles } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
-
-export function useMessageItem() {
-  const { perksFor } = usePerks();
-  const { myPerks } = useMyPerks();
-  const { prefs } = useCustomStyles();
-
-  function perksOf(m: { authorIp: string; authorPerks?: any }) {
-    return m.authorPerks ?? perksFor(m.authorIp);
-  }
-
-  function ipStyle(m: { authorIp: string; authorPerks?: any }) {
-    const ip = m.authorIp;
-    const override = prefs.ipColors[ip];
-    if (override && override !== 'auto') {
-      return { color: override, textShadow: getIpGlow(override) };
-    }
-    const p = perksOf(m);
-    return { color: getIpColorWithPerks(ip, p), textShadow: getIpGlowWithPerks(ip, p) };
-  }
-
-  function petsLeft(m: { authorIp: string; authorPerks?: any }) {
-    const ip = m.authorIp;
-    if (ip in prefs.ipPets) return prefs.ipPets[ip];
-    return (perksOf(m)?.pets ?? [])
-      .filter((x: any) => x.position === 'left' || x.position === 'both')
-      .map((x: any) => x.char).join('');
-  }
-
-  function petsRight(m: { authorIp: string; authorPerks?: any }) {
-    const ip = m.authorIp;
-    if (ip in prefs.ipPets) return '';
-    return (perksOf(m)?.pets ?? [])
-      .filter((x: any) => x.position === 'right' || x.position === 'both')
-      .map((x: any) => x.char).join('');
-  }
-
-  function fmt(date: string) {
-    return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
-  }
-
-  function geoLabel(geo?: GeoInfo | null): string {
-    if (!geo) return '';
-    if (!geo.countryCode) return 'Local';
-    const place = geo.city || geo.country;
-    if (geo.lat != null && geo.lon != null) {
-      return `${place} · ${geo.lat.toFixed(4)}, ${geo.lon.toFixed(4)}`;
-    }
-    return place;
-  }
-
-  function geoLink(geo?: GeoInfo | null): string {
-    if (!geo || geo.lat == null || geo.lon == null) return 'https://maps.google.com';
-    return `https://www.google.com/maps/search/?api=1&query=${geo.lat},${geo.lon}`;
-  }
-
-  return { perksOf, ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs };
-}
+import { type GeoInfo } from '@/composables/useMessages';
+import { getIpColorWithPerks, getIpGlowWithPerks, getIpGlow } from '@/composables/ipColor';
+import { usePerks } from '@/composables/usePerks';
+import { useCustomStyles } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+
+export function useMessageItem() {
+  const { perksFor } = usePerks();
+  const { myPerks } = useMyPerks();
+  const { prefs } = useCustomStyles();
+
+  function perksOf(m: { authorIp: string; authorPerks?: any }) {
+    return m.authorPerks ?? perksFor(m.authorIp);
+  }
+
+  function ipStyle(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    const override = prefs.ipColors[ip];
+    if (override && override !== 'auto') {
+      return { color: override, textShadow: getIpGlow(override) };
+    }
+    const p = perksOf(m);
+    return { color: getIpColorWithPerks(ip, p), textShadow: getIpGlowWithPerks(ip, p) };
+  }
+
+  function petsLeft(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    if (ip in prefs.ipPets) return prefs.ipPets[ip];
+    return (perksOf(m)?.pets ?? [])
+      .filter((x: any) => x.position === 'left' || x.position === 'both')
+      .map((x: any) => x.char).join('');
+  }
+
+  function petsRight(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    if (ip in prefs.ipPets) return '';
+    return (perksOf(m)?.pets ?? [])
+      .filter((x: any) => x.position === 'right' || x.position === 'both')
+      .map((x: any) => x.char).join('');
+  }
+
+  function fmt(date: string) {
+    return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+  }
+
+  function geoLabel(geo?: GeoInfo | null): string {
+    if (!geo) return '';
+    if (!geo.countryCode) return 'Local';
+    const place = geo.city || geo.country;
+    if (geo.lat != null && geo.lon != null) {
+      return `${place} · ${geo.lat.toFixed(4)}, ${geo.lon.toFixed(4)}`;
+    }
+    return place;
+  }
+
+  function geoLink(geo?: GeoInfo | null): string {
+    if (!geo || geo.lat == null || geo.lon == null) return 'https://maps.google.com';
+    return `https://www.google.com/maps/search/?api=1&query=${geo.lat},${geo.lon}`;
+  }
+
+  return { perksOf, ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs };
+}
diff --git a/frontend/src/composables/useMessages.ts b/frontend/src/composables/useMessages.ts
index 34a90b6..1f5293d 100644
--- a/frontend/src/composables/useMessages.ts
+++ b/frontend/src/composables/useMessages.ts
@@ -1,212 +1,212 @@
-import { ref, onMounted } from 'vue';
-import { useRealtime } from './useRealtime';
-import { useWallet, applyWalletFrame } from './useWallet';
-import { setPerks, applyPerksFrame, type Perks } from './usePerks';
-import { bumpAdsRevision } from './useAds';
-import { handleAlertFrame } from './useAlert';
-
-// Module-level singleton so any component can read the viewer's own perks
-// without prop-drilling (e.g. SendButton, AdBand).
-export const myPerks = ref<Perks>({});
-
-export function useMyPerks() {
-  return { myPerks };
-}
-
-export interface GeoInfo {
-  country: string;
-  countryCode: string;
-  city: string;
-  lat?: number;
-  lon?: number;
-}
-
-export interface Reply {
-  id: string;
-  content: string;
-  authorIp: string;
-  createdAt: string;
-  parentId?: string | null;
-  authorPerks?: Perks;
-  authorGeo?: GeoInfo | null;
-  richMode?: 'none' | 'htmlcss' | 'js';
-  richContent?: string | null;
-  attachments?: Attachment[];
-}
-
-export interface Attachment {
-  id: string;
-  filename: string;
-  mimeType: string;
-  size: number;
-}
-
-export interface Message extends Reply {
-  parentId: string | null;
-  replies: Reply[];
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-/**
- * Refresh the viewer's own perks from the server (callable from anywhere).
- * The backend computes the perks (entitlement.kind → Perks) and returns them
- * precomputed as `myPerks`, so we just adopt them — no client-side re-derivation.
- */
-export async function refreshMyPerks(): Promise<void> {
-  try {
-    const res = await fetch(`${API_URL}/api/shop/me`);
-    if (!res.ok) return;
-    const { myPerks: p } = (await res.json()) as { myPerks?: Perks };
-    myPerks.value = p ?? {};
-    const { ip } = useWallet();
-    if (ip.value) setPerks(ip.value, myPerks.value);
-  } catch {
-    /* ignore */
-  }
-}
-
-export function useMessages() {
-  const messages = ref<Message[]>([]);
-  const loading = ref(false);
-  const sending = ref(false);
-
-  /** Seed the perks store from a message + its replies. */
-  function harvestPerks(m: Message): void {
-    setPerks(m.authorIp, m.authorPerks);
-    for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
-  }
-
-  async function fetchMessages(): Promise<void> {
-    loading.value = true;
-    try {
-      const res = await fetch(`${API_URL}/api/messages`);
-      if (res.ok) {
-        // API returns newest→oldest; reverse for chronological display.
-        const list = ((await res.json()) as Message[]).reverse();
-        list.forEach(harvestPerks);
-        messages.value = list;
-      }
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  /** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
-  function addIncoming(raw: Message & { parentId: string | null }): void {
-    if (!raw || !raw.id) return;
-
-    // Always record the author's perks, even for replies.
-    setPerks(raw.authorIp, raw.authorPerks);
-
-    if (raw.parentId == null) {
-      // New top-level thread.
-      if (messages.value.some((m) => m.id === raw.id)) return;
-      messages.value.push({ ...raw, replies: raw.replies ?? [] });
-      return;
-    }
-
-    // Reply: attach to its parent thread if we have it.
-    const parent = messages.value.find((m) => m.id === raw.parentId);
-    if (!parent) return; // thread not loaded; reconnect-resync will reconcile
-    if (parent.replies.some((r) => r.id === raw.id)) return;
-    parent.replies.push({
-      id: raw.id,
-      content: raw.content,
-      authorIp: raw.authorIp,
-      createdAt: raw.createdAt,
-      parentId: raw.parentId,
-      authorPerks: raw.authorPerks,
-      authorGeo: raw.authorGeo,
-      richMode: raw.richMode,
-      richContent: raw.richContent,
-      attachments: raw.attachments,
-    });
-  }
-
-  const { fetchWallet, ip: myIp } = useWallet();
-
-  // The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
-  // myPerks is module-level; this ref is the same reference.
-
-  async function fetchMyPerks(): Promise<void> {
-    return refreshMyPerks();
-  }
-
-  const { stats, connected, sendTyping } = useRealtime({
-    onMessage: addIncoming,
-    onReconnect: () => {
-      fetchMessages();
-      fetchWallet();
-      fetchMyPerks();
-    },
-    onWallet: applyWalletFrame,
-    onPerks: (data: { ip: string; perks: Perks }) => {
-      applyPerksFrame(data);
-      // If it's about us, update myPerks too (viewer-scoped perks like NoAds).
-      if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
-    },
-    onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
-    onAlert: (data) => handleAlertFrame(data), // paid global audio alert
-  });
-
-  interface PostExtras {
-    parentId?: string;
-    richMode?: 'htmlcss' | 'js';
-    richContent?: string;
-    attachmentIds?: string[];
-  }
-
-  async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
-    const hasRich = !!extras.richContent && !!extras.richMode;
-    const hasFiles = !!extras.attachmentIds?.length;
-    // Allow empty text only when there's rich content or an attachment.
-    if (!content.trim() && !hasRich && !hasFiles) return false;
-    sending.value = true;
-    try {
-      const res = await fetch(`${API_URL}/api/messages`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          content: content.trim(),
-          parentId: extras.parentId,
-          richMode: extras.richMode,
-          richContent: extras.richContent,
-          attachmentIds: extras.attachmentIds,
-        }),
-      });
-      if (!res.ok) return false;
-      // The created message comes back via the WebSocket broadcast, so no
-      // re-fetch here. Fallback: if the socket is down, add it locally.
-      if (!connected.value) {
-        const created = (await res.json()) as Message;
-        addIncoming(
-          created.parentId == null ? { ...created, replies: [] } : created
-        );
-      }
-      return true;
-    } finally {
-      sending.value = false;
-    }
-  }
-
-  onMounted(() => {
-    fetchMessages();
-    fetchWallet();
-    fetchMyPerks();
-  });
-
-  // Note: viewer-own perks live in the module-level `myPerks` singleton; read
-  // them via `useMyPerks()` rather than off this return (consistency rule).
-  return {
-    messages,
-    loading,
-    sending,
-    postMessage,
-    stats,
-    connected,
-    sendTyping,
-    myIp,
-    fetchMyPerks,
-  };
-}
+import { ref, onMounted } from 'vue';
+import { useRealtime } from './useRealtime';
+import { useWallet, applyWalletFrame } from './useWallet';
+import { setPerks, applyPerksFrame, type Perks } from './usePerks';
+import { bumpAdsRevision } from './useAds';
+import { handleAlertFrame } from './useAlert';
+
+// Module-level singleton so any component can read the viewer's own perks
+// without prop-drilling (e.g. SendButton, AdBand).
+export const myPerks = ref<Perks>({});
+
+export function useMyPerks() {
+  return { myPerks };
+}
+
+export interface GeoInfo {
+  country: string;
+  countryCode: string;
+  city: string;
+  lat?: number;
+  lon?: number;
+}
+
+export interface Reply {
+  id: string;
+  content: string;
+  authorIp: string;
+  createdAt: string;
+  parentId?: string | null;
+  authorPerks?: Perks;
+  authorGeo?: GeoInfo | null;
+  richMode?: 'none' | 'htmlcss' | 'js';
+  richContent?: string | null;
+  attachments?: Attachment[];
+}
+
+export interface Attachment {
+  id: string;
+  filename: string;
+  mimeType: string;
+  size: number;
+}
+
+export interface Message extends Reply {
+  parentId: string | null;
+  replies: Reply[];
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+/**
+ * Refresh the viewer's own perks from the server (callable from anywhere).
+ * The backend computes the perks (entitlement.kind → Perks) and returns them
+ * precomputed as `myPerks`, so we just adopt them — no client-side re-derivation.
+ */
+export async function refreshMyPerks(): Promise<void> {
+  try {
+    const res = await fetch(`${API_URL}/api/shop/me`);
+    if (!res.ok) return;
+    const { myPerks: p } = (await res.json()) as { myPerks?: Perks };
+    myPerks.value = p ?? {};
+    const { ip } = useWallet();
+    if (ip.value) setPerks(ip.value, myPerks.value);
+  } catch {
+    /* ignore */
+  }
+}
+
+export function useMessages() {
+  const messages = ref<Message[]>([]);
+  const loading = ref(false);
+  const sending = ref(false);
+
+  /** Seed the perks store from a message + its replies. */
+  function harvestPerks(m: Message): void {
+    setPerks(m.authorIp, m.authorPerks);
+    for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
+  }
+
+  async function fetchMessages(): Promise<void> {
+    loading.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/messages`);
+      if (res.ok) {
+        // API returns newest→oldest; reverse for chronological display.
+        const list = ((await res.json()) as Message[]).reverse();
+        list.forEach(harvestPerks);
+        messages.value = list;
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
+  function addIncoming(raw: Message & { parentId: string | null }): void {
+    if (!raw || !raw.id) return;
+
+    // Always record the author's perks, even for replies.
+    setPerks(raw.authorIp, raw.authorPerks);
+
+    if (raw.parentId == null) {
+      // New top-level thread.
+      if (messages.value.some((m) => m.id === raw.id)) return;
+      messages.value.push({ ...raw, replies: raw.replies ?? [] });
+      return;
+    }
+
+    // Reply: attach to its parent thread if we have it.
+    const parent = messages.value.find((m) => m.id === raw.parentId);
+    if (!parent) return; // thread not loaded; reconnect-resync will reconcile
+    if (parent.replies.some((r) => r.id === raw.id)) return;
+    parent.replies.push({
+      id: raw.id,
+      content: raw.content,
+      authorIp: raw.authorIp,
+      createdAt: raw.createdAt,
+      parentId: raw.parentId,
+      authorPerks: raw.authorPerks,
+      authorGeo: raw.authorGeo,
+      richMode: raw.richMode,
+      richContent: raw.richContent,
+      attachments: raw.attachments,
+    });
+  }
+
+  const { fetchWallet, ip: myIp } = useWallet();
+
+  // The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
+  // myPerks is module-level; this ref is the same reference.
+
+  async function fetchMyPerks(): Promise<void> {
+    return refreshMyPerks();
+  }
+
+  const { stats, connected, sendTyping } = useRealtime({
+    onMessage: addIncoming,
+    onReconnect: () => {
+      fetchMessages();
+      fetchWallet();
+      fetchMyPerks();
+    },
+    onWallet: applyWalletFrame,
+    onPerks: (data: { ip: string; perks: Perks }) => {
+      applyPerksFrame(data);
+      // If it's about us, update myPerks too (viewer-scoped perks like NoAds).
+      if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
+    },
+    onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
+    onAlert: (data) => handleAlertFrame(data), // paid global audio alert
+  });
+
+  interface PostExtras {
+    parentId?: string;
+    richMode?: 'htmlcss' | 'js';
+    richContent?: string;
+    attachmentIds?: string[];
+  }
+
+  async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
+    const hasRich = !!extras.richContent && !!extras.richMode;
+    const hasFiles = !!extras.attachmentIds?.length;
+    // Allow empty text only when there's rich content or an attachment.
+    if (!content.trim() && !hasRich && !hasFiles) return false;
+    sending.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          content: content.trim(),
+          parentId: extras.parentId,
+          richMode: extras.richMode,
+          richContent: extras.richContent,
+          attachmentIds: extras.attachmentIds,
+        }),
+      });
+      if (!res.ok) return false;
+      // The created message comes back via the WebSocket broadcast, so no
+      // re-fetch here. Fallback: if the socket is down, add it locally.
+      if (!connected.value) {
+        const created = (await res.json()) as Message;
+        addIncoming(
+          created.parentId == null ? { ...created, replies: [] } : created
+        );
+      }
+      return true;
+    } finally {
+      sending.value = false;
+    }
+  }
+
+  onMounted(() => {
+    fetchMessages();
+    fetchWallet();
+    fetchMyPerks();
+  });
+
+  // Note: viewer-own perks live in the module-level `myPerks` singleton; read
+  // them via `useMyPerks()` rather than off this return (consistency rule).
+  return {
+    messages,
+    loading,
+    sending,
+    postMessage,
+    stats,
+    connected,
+    sendTyping,
+    myIp,
+    fetchMyPerks,
+  };
+}
diff --git a/frontend/src/composables/useMeta.spec.ts b/frontend/src/composables/useMeta.spec.ts
new file mode 100644
index 0000000..58a01ac
--- /dev/null
+++ b/frontend/src/composables/useMeta.spec.ts
@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { parseMeta, type ProductMeta } from './useMeta';
+
+describe('parseMeta (fonction réutilisable)', () => {
+  it('parse un JSON valide', () => {
+    const meta = parseMeta<ProductMeta>('{"plans":[{"id":"m","label":"Mensuel","price":499}]}');
+    expect(meta.plans?.[0].price).toBe(499);
+  });
+
+  it('renvoie le fallback sur null/undefined', () => {
+    expect(parseMeta(null)).toEqual({});
+    expect(parseMeta(undefined)).toEqual({});
+    expect(parseMeta(null, { plans: [] })).toEqual({ plans: [] });
+  });
+
+  it('renvoie le fallback sur JSON invalide (sans lever)', () => {
+    expect(parseMeta('{ pas du json }')).toEqual({});
+    expect(() => parseMeta('oops')).not.toThrow();
+  });
+});
diff --git a/frontend/src/composables/usePerks.spec.ts b/frontend/src/composables/usePerks.spec.ts
new file mode 100644
index 0000000..8f6c9e9
--- /dev/null
+++ b/frontend/src/composables/usePerks.spec.ts
@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { usePerks, setPerks, applyPerksFrame, type Perks } from './usePerks';
+
+describe('usePerks (logique d’état)', () => {
+  it('renvoie un objet vide pour une IP inconnue', () => {
+    expect(usePerks().perksFor('0.0.0.0')).toEqual({});
+  });
+
+  it('enregistre et relit les perks d’une IP', () => {
+    const perks: Perks = { skin: 'gold', pets: [{ char: '🔥', position: 'left' }] };
+    setPerks('1.1.1.1', perks);
+    expect(usePerks().perksFor('1.1.1.1')).toEqual(perks);
+  });
+
+  it('ignore un setPerks sans IP ou sans perks', () => {
+    setPerks('', { skin: 'gold' });
+    setPerks('2.2.2.2', null);
+    expect(usePerks().perksFor('2.2.2.2')).toEqual({});
+  });
+
+  it('applique un frame WS perks { ip, perks }', () => {
+    applyPerksFrame({ ip: '3.3.3.3', perks: { noads: true } });
+    expect(usePerks().perksFor('3.3.3.3')).toEqual({ noads: true });
+  });
+});
diff --git a/frontend/src/composables/usePerks.ts b/frontend/src/composables/usePerks.ts
index 7e7bf6c..cbf346c 100644
--- a/frontend/src/composables/usePerks.ts
+++ b/frontend/src/composables/usePerks.ts
@@ -1,43 +1,43 @@
-import { reactive } from 'vue';
-
-/**
- * Perks store (module-level singleton): maps an author IP → its visible perks.
- * Seeded from message payloads (authorPerks), updated live by WS `perks` frames,
- * and read by MessageItem to colour names / render pets for every author.
- */
-
-export type PetPosition = 'left' | 'right' | 'both';
-
-export interface Perks {
-  skin?: 'gold';
-  pets?: { char: string; position: PetPosition }[];
-  noads?: boolean;
-  badge?: boolean;
-  elementSkin?: boolean;
-  richHtmlcss?: boolean;
-  richJs?: boolean;
-  ipColors?: boolean;
-  sendSkins?: { id: string; char: string; label?: string }[];
-  noFileLimit?: boolean;
-  audioAlert?: boolean;
-}
-
-const map = reactive<Record<string, Perks>>({});
-
-/** Merge perks for one IP (from a message payload or a perks frame). */
-export function setPerks(ip: string, perks: Perks | undefined | null): void {
-  if (!ip || !perks) return;
-  map[ip] = perks;
-}
-
-/** Apply a WS `perks` frame: { ip, perks }. */
-export function applyPerksFrame(data: { ip: string; perks: Perks }): void {
-  if (data?.ip) map[data.ip] = data.perks ?? {};
-}
-
-export function usePerks() {
-  function perksFor(ip: string): Perks {
-    return map[ip] ?? {};
-  }
-  return { perksFor, setPerks };
-}
+import { reactive } from 'vue';
+
+/**
+ * Perks store (module-level singleton): maps an author IP → its visible perks.
+ * Seeded from message payloads (authorPerks), updated live by WS `perks` frames,
+ * and read by MessageItem to colour names / render pets for every author.
+ */
+
+export type PetPosition = 'left' | 'right' | 'both';
+
+export interface Perks {
+  skin?: 'gold';
+  pets?: { char: string; position: PetPosition }[];
+  noads?: boolean;
+  badge?: boolean;
+  elementSkin?: boolean;
+  richHtmlcss?: boolean;
+  richJs?: boolean;
+  ipColors?: boolean;
+  sendSkins?: { id: string; char: string; label?: string }[];
+  noFileLimit?: boolean;
+  audioAlert?: boolean;
+}
+
+const map = reactive<Record<string, Perks>>({});
+
+/** Merge perks for one IP (from a message payload or a perks frame). */
+export function setPerks(ip: string, perks: Perks | undefined | null): void {
+  if (!ip || !perks) return;
+  map[ip] = perks;
+}
+
+/** Apply a WS `perks` frame: { ip, perks }. */
+export function applyPerksFrame(data: { ip: string; perks: Perks }): void {
+  if (data?.ip) map[data.ip] = data.perks ?? {};
+}
+
+export function usePerks() {
+  function perksFor(ip: string): Perks {
+    return map[ip] ?? {};
+  }
+  return { perksFor, setPerks };
+}
diff --git a/frontend/src/composables/useRealtime.ts b/frontend/src/composables/useRealtime.ts
index 79d6aed..bbf2cf6 100644
--- a/frontend/src/composables/useRealtime.ts
+++ b/frontend/src/composables/useRealtime.ts
@@ -1,125 +1,125 @@
-import { ref, onMounted, onUnmounted } from 'vue';
-
-/** Mirror of the backend StatsSnapshot. */
-export interface Stats {
-  // live
-  connectedTabs: number;
-  typingNow: number;
-  lettersPerSec: number;
-  msgsPerMin: number;
-  // totals
-  messages: number;
-  replies: number;
-  charsSent: number;
-  lettersTyped: number;
-  uniqueIps: number;
-  longestMsg: number;
-  // derived
-  abandonRate: number;
-  avgLength: number;
-  moneyExtorted: number;
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-const WS_URL = API_URL.replace(/^http/, 'ws') + '/ws';
-
-const TYPING_FLUSH_MS = 400; // batch keystroke deltas before sending
-const RECONNECT_DELAY_MS = 1500;
-
-interface RealtimeHooks {
-  onMessage?: (raw: any) => void;
-  /** Called when the socket reconnects after a drop — use to resync state. */
-  onReconnect?: () => void;
-  /** Wallet update for THIS tab's IP (balance changed). */
-  onWallet?: (data: any) => void;
-  /** A visible perk changed for some IP (skin/pet) — update that author everywhere. */
-  onPerks?: (data: any) => void;
-  /** Ad inventory changed (e.g. a user bought a Cadre de Pub). */
-  onAds?: (data: any) => void;
-  /** A paid global audio alert was fired. */
-  onAlert?: (data: any) => void;
-}
-
-export function useRealtime(hooks: RealtimeHooks = {}) {
-  const stats = ref<Stats | null>(null);
-  const connected = ref(false);
-
-  let ws: WebSocket | null = null;
-  let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-  let typingTimer: ReturnType<typeof setTimeout> | null = null;
-  let typingBuffer = 0;
-  let everConnected = false;
-  let closedByUs = false;
-
-  function connect(): void {
-    try {
-      ws = new WebSocket(WS_URL);
-    } catch {
-      scheduleReconnect();
-      return;
-    }
-
-    ws.onopen = () => {
-      connected.value = true;
-      if (everConnected) hooks.onReconnect?.();
-      everConnected = true;
-    };
-
-    ws.onmessage = (ev) => {
-      let msg: { type?: string; data?: any };
-      try {
-        msg = JSON.parse(ev.data);
-      } catch {
-        return;
-      }
-      if (msg.type === 'stats') stats.value = msg.data as Stats;
-      else if (msg.type === 'message') hooks.onMessage?.(msg.data);
-      else if (msg.type === 'wallet') hooks.onWallet?.(msg.data);
-      else if (msg.type === 'perks') hooks.onPerks?.(msg.data);
-      else if (msg.type === 'ads') hooks.onAds?.(msg.data);
-      else if (msg.type === 'alert') hooks.onAlert?.(msg.data);
-    };
-
-    ws.onclose = () => {
-      connected.value = false;
-      if (!closedByUs) scheduleReconnect();
-    };
-
-    ws.onerror = () => {
-      ws?.close();
-    };
-  }
-
-  function scheduleReconnect(): void {
-    if (reconnectTimer || closedByUs) return;
-    reconnectTimer = setTimeout(() => {
-      reconnectTimer = null;
-      connect();
-    }, RECONNECT_DELAY_MS);
-  }
-
-  /** Report keystrokes (delta ≥ 0). Marks this tab as "typing" and feeds the global counter. */
-  function sendTyping(delta: number): void {
-    typingBuffer += Math.max(0, delta);
-    if (typingTimer) return;
-    typingTimer = setTimeout(flushTyping, TYPING_FLUSH_MS);
-  }
-
-  function flushTyping(): void {
-    typingTimer = null;
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify({ type: 'typing', delta: typingBuffer }));
-    }
-    typingBuffer = 0;
-  }
-
-  onMounted(connect);
-  onUnmounted(() => {
-    closedByUs = true;
-    if (reconnectTimer) clearTimeout(reconnectTimer);
-    if (typingTimer) clearTimeout(typingTimer);
-    ws?.close();
-  });
-
-  return { stats, connected, sendTyping };
-}
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/** Mirror of the backend StatsSnapshot. */
+export interface Stats {
+  // live
+  connectedTabs: number;
+  typingNow: number;
+  lettersPerSec: number;
+  msgsPerMin: number;
+  // totals
+  messages: number;
+  replies: number;
+  charsSent: number;
+  lettersTyped: number;
+  uniqueIps: number;
+  longestMsg: number;
+  // derived
+  abandonRate: number;
+  avgLength: number;
+  moneyExtorted: number;
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+const WS_URL = API_URL.replace(/^http/, 'ws') + '/ws';
+
+const TYPING_FLUSH_MS = 400; // batch keystroke deltas before sending
+const RECONNECT_DELAY_MS = 1500;
+
+interface RealtimeHooks {
+  onMessage?: (raw: any) => void;
+  /** Called when the socket reconnects after a drop — use to resync state. */
+  onReconnect?: () => void;
+  /** Wallet update for THIS tab's IP (balance changed). */
+  onWallet?: (data: any) => void;
+  /** A visible perk changed for some IP (skin/pet) — update that author everywhere. */
+  onPerks?: (data: any) => void;
+  /** Ad inventory changed (e.g. a user bought a Cadre de Pub). */
+  onAds?: (data: any) => void;
+  /** A paid global audio alert was fired. */
+  onAlert?: (data: any) => void;
+}
+
+export function useRealtime(hooks: RealtimeHooks = {}) {
+  const stats = ref<Stats | null>(null);
+  const connected = ref(false);
+
+  let ws: WebSocket | null = null;
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  let typingTimer: ReturnType<typeof setTimeout> | null = null;
+  let typingBuffer = 0;
+  let everConnected = false;
+  let closedByUs = false;
+
+  function connect(): void {
+    try {
+      ws = new WebSocket(WS_URL);
+    } catch {
+      scheduleReconnect();
+      return;
+    }
+
+    ws.onopen = () => {
+      connected.value = true;
+      if (everConnected) hooks.onReconnect?.();
+      everConnected = true;
+    };
+
+    ws.onmessage = (ev) => {
+      let msg: { type?: string; data?: any };
+      try {
+        msg = JSON.parse(ev.data);
+      } catch {
+        return;
+      }
+      if (msg.type === 'stats') stats.value = msg.data as Stats;
+      else if (msg.type === 'message') hooks.onMessage?.(msg.data);
+      else if (msg.type === 'wallet') hooks.onWallet?.(msg.data);
+      else if (msg.type === 'perks') hooks.onPerks?.(msg.data);
+      else if (msg.type === 'ads') hooks.onAds?.(msg.data);
+      else if (msg.type === 'alert') hooks.onAlert?.(msg.data);
+    };
+
+    ws.onclose = () => {
+      connected.value = false;
+      if (!closedByUs) scheduleReconnect();
+    };
+
+    ws.onerror = () => {
+      ws?.close();
+    };
+  }
+
+  function scheduleReconnect(): void {
+    if (reconnectTimer || closedByUs) return;
+    reconnectTimer = setTimeout(() => {
+      reconnectTimer = null;
+      connect();
+    }, RECONNECT_DELAY_MS);
+  }
+
+  /** Report keystrokes (delta ≥ 0). Marks this tab as "typing" and feeds the global counter. */
+  function sendTyping(delta: number): void {
+    typingBuffer += Math.max(0, delta);
+    if (typingTimer) return;
+    typingTimer = setTimeout(flushTyping, TYPING_FLUSH_MS);
+  }
+
+  function flushTyping(): void {
+    typingTimer = null;
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'typing', delta: typingBuffer }));
+    }
+    typingBuffer = 0;
+  }
+
+  onMounted(connect);
+  onUnmounted(() => {
+    closedByUs = true;
+    if (reconnectTimer) clearTimeout(reconnectTimer);
+    if (typingTimer) clearTimeout(typingTimer);
+    ws?.close();
+  });
+
+  return { stats, connected, sendTyping };
+}
diff --git a/frontend/src/composables/useShop.ts b/frontend/src/composables/useShop.ts
index 49ebf9c..1d81be5 100644
--- a/frontend/src/composables/useShop.ts
+++ b/frontend/src/composables/useShop.ts
@@ -1,133 +1,133 @@
-import { ref } from 'vue';
-import { useWallet } from './useWallet';
-import { refreshMyPerks } from './useMessages';
-import { parseMeta, type ProductMeta } from './useMeta';
-
-/** Marketplace client: catalogue, my entitlements, purchase flow. */
-
-export interface Product {
-  id: string;
-  category: string;
-  name: string;
-  subtitle?: string | null;
-  kind: string;
-  basePrice: number; // centi-credits
-  promoPrice?: number | null;
-  badge?: string | null;
-  stockLimit?: number | null;
-  stockSold: number;
-  sortOrder: number;
-  metaJson?: string | null;
-}
-
-export interface Entitlement {
-  id: string;
-  ip: string;
-  kind: string;
-  active: boolean;
-  expiresAt?: string | null;
-  metaJson?: string | null;
-  createdAt: string;
-}
-
-export interface PurchaseOptions {
-  plan?: 'monthly' | 'annual';
-  durationDays?: number;
-  format?: 'static' | 'gif';
-  url?: string;
-  petDesign?: string;
-  petChar?: string;
-  petPosition?: 'left' | 'right' | 'both';
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-export function useShop() {
-  const products = ref<Product[]>([]);
-  const entitlements = ref<Entitlement[]>([]);
-  const loading = ref(false);
-  const buying = ref<string | null>(null); // productId currently being purchased
-  const lastError = ref<string | null>(null);
-  const lastSuccess = ref<string | null>(null);
-
-  const { fetchWallet } = useWallet();
-
-  async function fetchProducts(): Promise<void> {
-    loading.value = true;
-    try {
-      const res = await fetch(`${API_URL}/api/shop/products`);
-      if (res.ok) products.value = (await res.json()) as Product[];
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  async function fetchMe(): Promise<void> {
-    try {
-      const res = await fetch(`${API_URL}/api/shop/me`);
-      if (res.ok) {
-        const data = await res.json();
-        entitlements.value = data.entitlements ?? [];
-      }
-    } catch {
-      /* ignore */
-    }
-  }
-
-  function owns(kind: string): boolean {
-    return entitlements.value.some((e) => e.kind === kind && e.active);
-  }
-
-  function petCount(): number {
-    return entitlements.value.filter((e) => e.kind === 'pet' && e.active).length;
-  }
-
-  function ownedPetChars(): string[] {
-    return entitlements.value
-      .filter((e) => e.kind === 'pet' && e.active)
-      .map((e) => parseMeta<ProductMeta>(e.metaJson).char ?? '')
-      .filter(Boolean);
-  }
-
-  async function purchase(productId: string, options: PurchaseOptions = {}): Promise<boolean> {
-    buying.value = productId;
-    lastError.value = null;
-    lastSuccess.value = null;
-    try {
-      const res = await fetch(`${API_URL}/api/shop/purchase`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ productId, options }),
-      });
-      const data = await res.json().catch(() => ({}));
-      if (!res.ok) {
-        lastError.value = data.error || 'Achat impossible';
-        return false;
-      }
-      lastSuccess.value = `Acheté : ${productId}`;
-      // Refresh wallet + my entitlements + myPerks (WS also pushes wallet, this is belt-and-braces).
-      await Promise.all([fetchWallet(), fetchMe(), fetchProducts(), refreshMyPerks()]);
-      return true;
-    } catch {
-      lastError.value = 'Réseau indisponible';
-      return false;
-    } finally {
-      buying.value = null;
-    }
-  }
-
-  return {
-    products,
-    entitlements,
-    loading,
-    buying,
-    lastError,
-    lastSuccess,
-    fetchProducts,
-    fetchMe,
-    owns,
-    petCount,
-    ownedPetChars,
-    purchase,
-  };
-}
+import { ref } from 'vue';
+import { useWallet } from './useWallet';
+import { refreshMyPerks } from './useMessages';
+import { parseMeta, type ProductMeta } from './useMeta';
+
+/** Marketplace client: catalogue, my entitlements, purchase flow. */
+
+export interface Product {
+  id: string;
+  category: string;
+  name: string;
+  subtitle?: string | null;
+  kind: string;
+  basePrice: number; // centi-credits
+  promoPrice?: number | null;
+  badge?: string | null;
+  stockLimit?: number | null;
+  stockSold: number;
+  sortOrder: number;
+  metaJson?: string | null;
+}
+
+export interface Entitlement {
+  id: string;
+  ip: string;
+  kind: string;
+  active: boolean;
+  expiresAt?: string | null;
+  metaJson?: string | null;
+  createdAt: string;
+}
+
+export interface PurchaseOptions {
+  plan?: 'monthly' | 'annual';
+  durationDays?: number;
+  format?: 'static' | 'gif';
+  url?: string;
+  petDesign?: string;
+  petChar?: string;
+  petPosition?: 'left' | 'right' | 'both';
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export function useShop() {
+  const products = ref<Product[]>([]);
+  const entitlements = ref<Entitlement[]>([]);
+  const loading = ref(false);
+  const buying = ref<string | null>(null); // productId currently being purchased
+  const lastError = ref<string | null>(null);
+  const lastSuccess = ref<string | null>(null);
+
+  const { fetchWallet } = useWallet();
+
+  async function fetchProducts(): Promise<void> {
+    loading.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/shop/products`);
+      if (res.ok) products.value = (await res.json()) as Product[];
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function fetchMe(): Promise<void> {
+    try {
+      const res = await fetch(`${API_URL}/api/shop/me`);
+      if (res.ok) {
+        const data = await res.json();
+        entitlements.value = data.entitlements ?? [];
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  function owns(kind: string): boolean {
+    return entitlements.value.some((e) => e.kind === kind && e.active);
+  }
+
+  function petCount(): number {
+    return entitlements.value.filter((e) => e.kind === 'pet' && e.active).length;
+  }
+
+  function ownedPetChars(): string[] {
+    return entitlements.value
+      .filter((e) => e.kind === 'pet' && e.active)
+      .map((e) => parseMeta<ProductMeta>(e.metaJson).char ?? '')
+      .filter(Boolean);
+  }
+
+  async function purchase(productId: string, options: PurchaseOptions = {}): Promise<boolean> {
+    buying.value = productId;
+    lastError.value = null;
+    lastSuccess.value = null;
+    try {
+      const res = await fetch(`${API_URL}/api/shop/purchase`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ productId, options }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        lastError.value = data.error || 'Achat impossible';
+        return false;
+      }
+      lastSuccess.value = `Acheté : ${productId}`;
+      // Refresh wallet + my entitlements + myPerks (WS also pushes wallet, this is belt-and-braces).
+      await Promise.all([fetchWallet(), fetchMe(), fetchProducts(), refreshMyPerks()]);
+      return true;
+    } catch {
+      lastError.value = 'Réseau indisponible';
+      return false;
+    } finally {
+      buying.value = null;
+    }
+  }
+
+  return {
+    products,
+    entitlements,
+    loading,
+    buying,
+    lastError,
+    lastSuccess,
+    fetchProducts,
+    fetchMe,
+    owns,
+    petCount,
+    ownedPetChars,
+    purchase,
+  };
+}
diff --git a/frontend/src/composables/useWallet.spec.ts b/frontend/src/composables/useWallet.spec.ts
new file mode 100644
index 0000000..3385a07
--- /dev/null
+++ b/frontend/src/composables/useWallet.spec.ts
@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { useWallet, applyWalletFrame } from './useWallet';
+
+describe('useWallet (logique d’état)', () => {
+  it('affiche un solde réel converti depuis les centi-crédits', () => {
+    applyWalletFrame({ ip: '8.8.8.8', balance: 5000, freeMode: false });
+    const { displayBalance, freeMode, balanceRaw } = useWallet();
+    expect(freeMode.value).toBe(false);
+    expect(balanceRaw.value).toBe(5000);
+    // 5000 centi-crédits = 50,00 — séparateur dépendant de la locale ICU.
+    expect(displayBalance()).not.toBe('∞');
+    expect(displayBalance()).toContain('50');
+  });
+
+  it('affiche ∞ en mode gratuit (localhost / open bar)', () => {
+    applyWalletFrame({ ip: '::1', balance: Number.MAX_SAFE_INTEGER, freeMode: true });
+    const { displayBalance, freeMode } = useWallet();
+    expect(freeMode.value).toBe(true);
+    expect(displayBalance()).toBe('∞');
+  });
+
+  it('met à jour l’IP courante via le frame WS', () => {
+    applyWalletFrame({ ip: '9.9.9.9', balance: 0, freeMode: false });
+    expect(useWallet().ip.value).toBe('9.9.9.9');
+  });
+});
diff --git a/frontend/src/composables/useWallet.ts b/frontend/src/composables/useWallet.ts
index e2aef09..3fe9994 100644
--- a/frontend/src/composables/useWallet.ts
+++ b/frontend/src/composables/useWallet.ts
@@ -1,72 +1,72 @@
-import { ref } from 'vue';
-
-/**
- * Wallet store (module-level singleton so the header, shop, and composer all
- * share one balance). Credits are CENTI-CREDITS server-side; `displayBalance`
- * converts to a human "crédits" number. Live updates arrive via the WS `wallet`
- * frame, routed here through useMessages' realtime hook (applyWalletFrame).
- */
-
-export interface WalletView {
-  ip: string;
-  balance: number; // centi-credits, or a huge sentinel in free mode
-  freeMode: boolean;
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-const ip = ref<string>('');
-const balanceRaw = ref<number>(0); // centi-credits
-const freeMode = ref<boolean>(false);
-const loaded = ref<boolean>(false);
-
-function apply(view: WalletView): void {
-  ip.value = view.ip;
-  balanceRaw.value = view.balance;
-  freeMode.value = view.freeMode;
-  loaded.value = true;
-}
-
-/** Called by the realtime `wallet` frame handler. */
-export function applyWalletFrame(data: WalletView): void {
-  apply(data);
-}
-
-async function fetchWallet(): Promise<void> {
-  try {
-    const res = await fetch(`${API_URL}/api/wallet`);
-    if (res.ok) apply((await res.json()) as WalletView);
-  } catch {
-    /* offline — keep last known */
-  }
-}
-
-async function topUp(): Promise<void> {
-  try {
-    const res = await fetch(`${API_URL}/api/wallet/topup`, { method: 'POST' });
-    if (res.ok) apply((await res.json()) as WalletView);
-  } catch {
-    /* ignore */
-  }
-}
-
-/** Human-readable balance ("∞" in free mode, else credits with 2 decimals). */
-function displayBalance(): string {
-  if (freeMode.value) return '∞';
-  return (balanceRaw.value / 100).toLocaleString('fr-FR', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  });
-}
-
-export function useWallet() {
-  return {
-    ip,
-    balanceRaw,
-    freeMode,
-    loaded,
-    fetchWallet,
-    topUp,
-    displayBalance,
-  };
-}
+import { ref } from 'vue';
+
+/**
+ * Wallet store (module-level singleton so the header, shop, and composer all
+ * share one balance). Credits are CENTI-CREDITS server-side; `displayBalance`
+ * converts to a human "crédits" number. Live updates arrive via the WS `wallet`
+ * frame, routed here through useMessages' realtime hook (applyWalletFrame).
+ */
+
+export interface WalletView {
+  ip: string;
+  balance: number; // centi-credits, or a huge sentinel in free mode
+  freeMode: boolean;
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+const ip = ref<string>('');
+const balanceRaw = ref<number>(0); // centi-credits
+const freeMode = ref<boolean>(false);
+const loaded = ref<boolean>(false);
+
+function apply(view: WalletView): void {
+  ip.value = view.ip;
+  balanceRaw.value = view.balance;
+  freeMode.value = view.freeMode;
+  loaded.value = true;
+}
+
+/** Called by the realtime `wallet` frame handler. */
+export function applyWalletFrame(data: WalletView): void {
+  apply(data);
+}
+
+async function fetchWallet(): Promise<void> {
+  try {
+    const res = await fetch(`${API_URL}/api/wallet`);
+    if (res.ok) apply((await res.json()) as WalletView);
+  } catch {
+    /* offline — keep last known */
+  }
+}
+
+async function topUp(): Promise<void> {
+  try {
+    const res = await fetch(`${API_URL}/api/wallet/topup`, { method: 'POST' });
+    if (res.ok) apply((await res.json()) as WalletView);
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Human-readable balance ("∞" in free mode, else credits with 2 decimals). */
+function displayBalance(): string {
+  if (freeMode.value) return '∞';
+  return (balanceRaw.value / 100).toLocaleString('fr-FR', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+export function useWallet() {
+  return {
+    ip,
+    balanceRaw,
+    freeMode,
+    loaded,
+    fetchWallet,
+    topUp,
+    displayBalance,
+  };
+}
diff --git a/frontend/src/directives/clickOutside.ts b/frontend/src/directives/clickOutside.ts
new file mode 100644
index 0000000..63e8316
--- /dev/null
+++ b/frontend/src/directives/clickOutside.ts
@@ -0,0 +1,28 @@
+import type { Directive } from 'vue';
+
+/**
+ * Directive `v-click-outside` : exécute le handler fourni quand un clic se
+ * produit en dehors de l'élément. Utile pour fermer modales / menus.
+ * Usage : <div v-click-outside="onClose">…</div>
+ */
+type Handler = (e: MouseEvent) => void;
+
+const map = new WeakMap<HTMLElement, (e: MouseEvent) => void>();
+
+export const vClickOutside: Directive<HTMLElement, Handler> = {
+  mounted(el, binding) {
+    const listener = (e: MouseEvent) => {
+      if (!el.contains(e.target as Node)) binding.value?.(e);
+    };
+    map.set(el, listener);
+    // `capture` + microtask delay évite de capter le clic qui a ouvert l'élément.
+    setTimeout(() => document.addEventListener('click', listener, true), 0);
+  },
+  unmounted(el) {
+    const listener = map.get(el);
+    if (listener) {
+      document.removeEventListener('click', listener, true);
+      map.delete(el);
+    }
+  },
+};
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index a13306d..872e737 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -2,16 +2,34 @@ import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import App from './App.vue';
 import HomePage from './views/HomePage.vue';
-import ShopPage from './views/ShopPage.vue';
+import { useFavorites } from './composables/useFavorites';
+import { vClickOutside } from './directives/clickOutside';
 import './style.css';
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
+    // Chat : page d'accueil, chargée d'emblée (premier rendu rapide).
     { path: '/', component: HomePage },
-    { path: '/shop', component: ShopPage },
-    { path: '/shop/p/:id', component: ShopPage },
+    // Vues secondaires : chargées à la demande (code-splitting) pour ne pas
+    // pénaliser le premier rendu.
+    { path: '/explorer', component: () => import('./views/ExplorerPage.vue') },
+    { path: '/message/:id', component: () => import('./views/MessageDetailPage.vue') },
+    { path: '/favoris', component: () => import('./views/FavorisPage.vue') },
+    {
+      path: '/mes-stats',
+      component: () => import('./views/MesStatsPage.vue'),
+      // Garde : pas de stats tant que la liste perso est vide.
+      beforeEnter: () => (useFavorites().all.value.length > 0 ? true : '/favoris'),
+    },
+    { path: '/shop', component: () => import('./views/ShopPage.vue') },
+    { path: '/shop/p/:id', component: () => import('./views/ProductDetailPage.vue') },
+    // Repli : toute URL inconnue renvoie au chat.
+    { path: '/:pathMatch(.*)*', redirect: '/' },
   ],
 });
 
-createApp(App).use(router).mount('#app');
+createApp(App)
+  .use(router)
+  .directive('click-outside', vClickOutside)
+  .mount('#app');
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 1e1e52f..8984559 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,116 +1,116 @@
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* ── Thèmes : palette par variables CSS, basculée via [data-theme] sur la racine app ──
-   Le défaut = palette XIP sombre/néon. Chaque thème ne redéfinit que les surfaces
-   à fort impact (fond, header, bulles, bouton d'envoi). */
-:root {
-  --xip-app-bg: #080808;
-  --xip-bg: #090910;
-  --xip-header-bg: #0e0e16;
-  --xip-header-border: #1a1a2a;
-  --xip-bubble-other: #141422;
-  --xip-bubble-other-border: #222236;
-  --xip-bubble-sent: #0e1f30;
-  --xip-bubble-sent-border: #1a3a55;
-  --xip-accent: #00ddff;
-  --xip-send-bg: #004488;
-  --xip-send-fg: #00ddff;
-}
-
-[data-theme="whatsapp"] {
-  --xip-app-bg: #0b141a;
-  --xip-bg: #0b141a;
-  --xip-header-bg: #202c33;
-  --xip-header-border: #2a3942;
-  --xip-bubble-other: #202c33;
-  --xip-bubble-other-border: #2a3942;
-  --xip-bubble-sent: #005c4b;          /* vert sortant signature WhatsApp */
-  --xip-bubble-sent-border: #047857;
-  --xip-accent: #00a884;
-  --xip-send-bg: #00a884;
-  --xip-send-fg: #ffffff;
-}
-
-html,
-body,
-#app {
-  height: 100%;
-  overflow: hidden;
-  background: var(--xip-app-bg);
-  font-family: 'Lato', sans-serif;
-}
-
-/* ── Styles partagés des sections « Mes Persos » (shop/persos/*) ──
-   Globaux (non scopés) pour être réutilisés par chaque sous-section sans
-   dupliquer le CSS. Préfixe .pf- (persos-form) pour éviter les collisions. */
-.pf-section {
-  background: #101018;
-  border: 1px solid #20203a;
-  border-radius: 10px;
-  padding: 18px 20px;
-}
-.pf-section.pf-locked { opacity: 0.6; }
-.pf-title {
-  font-size: 14px; font-weight: bold; color: #ccccee;
-  margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
-}
-.pf-sub { font-size: 11px; color: #5a5a80; margin: 0 0 12px; }
-.pf-lock {
-  font-size: 10px; font-weight: normal; color: #886644;
-  background: #1a1408; border: 1px solid #44330066; border-radius: 8px; padding: 2px 8px;
-}
-.pf-grid { display: flex; flex-wrap: wrap; gap: 8px; }
-.pf-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;
-}
-.pf-tile:hover:not(:disabled) { background: #1a1a2e; border-color: #333355; }
-.pf-tile--active { border-color: #00ddff; background: #0a1a20; }
-.pf-tile:disabled { cursor: not-allowed; opacity: 0.5; }
-.pf-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;
-}
-.pf-label { font-size: 10px; color: #8888aa; white-space: nowrap; }
-.pf-tile--active .pf-label { color: #00ddff; }
-.pf-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ffffff22; }
-.pf-dot--auto { background: conic-gradient(#00ddff, #ff00cc, #00ee77, #ffdd44, #00ddff); }
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Thèmes : palette par variables CSS, basculée via [data-theme] sur la racine app ──
+   Le défaut = palette XIP sombre/néon. Chaque thème ne redéfinit que les surfaces
+   à fort impact (fond, header, bulles, bouton d'envoi). */
+:root {
+  --xip-app-bg: #080808;
+  --xip-bg: #090910;
+  --xip-header-bg: #0e0e16;
+  --xip-header-border: #1a1a2a;
+  --xip-bubble-other: #141422;
+  --xip-bubble-other-border: #222236;
+  --xip-bubble-sent: #0e1f30;
+  --xip-bubble-sent-border: #1a3a55;
+  --xip-accent: #00ddff;
+  --xip-send-bg: #004488;
+  --xip-send-fg: #00ddff;
+}
+
+[data-theme="whatsapp"] {
+  --xip-app-bg: #0b141a;
+  --xip-bg: #0b141a;
+  --xip-header-bg: #202c33;
+  --xip-header-border: #2a3942;
+  --xip-bubble-other: #202c33;
+  --xip-bubble-other-border: #2a3942;
+  --xip-bubble-sent: #005c4b;          /* vert sortant signature WhatsApp */
+  --xip-bubble-sent-border: #047857;
+  --xip-accent: #00a884;
+  --xip-send-bg: #00a884;
+  --xip-send-fg: #ffffff;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  overflow: hidden;
+  background: var(--xip-app-bg);
+  font-family: 'Lato', sans-serif;
+}
+
+/* ── Styles partagés des sections « Mes Persos » (shop/persos/*) ──
+   Globaux (non scopés) pour être réutilisés par chaque sous-section sans
+   dupliquer le CSS. Préfixe .pf- (persos-form) pour éviter les collisions. */
+.pf-section {
+  background: #101018;
+  border: 1px solid #20203a;
+  border-radius: 10px;
+  padding: 18px 20px;
+}
+.pf-section.pf-locked { opacity: 0.6; }
+.pf-title {
+  font-size: 14px; font-weight: bold; color: #ccccee;
+  margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
+}
+.pf-sub { font-size: 11px; color: #5a5a80; margin: 0 0 12px; }
+.pf-lock {
+  font-size: 10px; font-weight: normal; color: #886644;
+  background: #1a1408; border: 1px solid #44330066; border-radius: 8px; padding: 2px 8px;
+}
+.pf-grid { display: flex; flex-wrap: wrap; gap: 8px; }
+.pf-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;
+}
+.pf-tile:hover:not(:disabled) { background: #1a1a2e; border-color: #333355; }
+.pf-tile--active { border-color: #00ddff; background: #0a1a20; }
+.pf-tile:disabled { cursor: not-allowed; opacity: 0.5; }
+.pf-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;
+}
+.pf-label { font-size: 10px; color: #8888aa; white-space: nowrap; }
+.pf-tile--active .pf-label { color: #00ddff; }
+.pf-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ffffff22; }
+.pf-dot--auto { background: conic-gradient(#00ddff, #ff00cc, #00ee77, #ffdd44, #00ddff); }
diff --git a/frontend/src/views/ExplorerPage.vue b/frontend/src/views/ExplorerPage.vue
new file mode 100644
index 0000000..563a9c0
--- /dev/null
+++ b/frontend/src/views/ExplorerPage.vue
@@ -0,0 +1,192 @@
+<!-- Explorateur du catalogue distant de messages : recherche debouncée +
+     annulable (AbortController), filtre, défilement infini par curseur.
+     Gardé en cache (keep-alive) pour conserver recherche + scroll au retour. -->
+<template>
+  <div class="explorer">
+    <header class="exp-head">
+      <h1 class="exp-title">🔎 Explorer les messages</h1>
+      <div class="exp-controls">
+        <SearchBox v-model="query" placeholder="Rechercher dans les messages…" class="exp-search" />
+        <select v-model="filter" class="exp-filter" title="Filtrer">
+          <option value="all">Tous</option>
+          <option value="rich">Messages riches</option>
+          <option value="files">Avec pièce jointe</option>
+          <option value="geo">Géolocalisés</option>
+        </select>
+      </div>
+    </header>
+
+    <div class="exp-scroll">
+      <p v-if="error" class="exp-msg exp-msg--err">{{ error }}</p>
+
+      <ul class="exp-list">
+        <li v-for="m in visible" :key="m.id" class="exp-card">
+          <RouterLink :to="`/message/${m.id}`" class="exp-card-link">
+            <div class="exp-card-head">
+              <span class="exp-ip" :style="{ color: ipColor(m.authorIp) }">{{ m.authorIp }}</span>
+              <img
+                v-if="m.authorGeo?.countryCode"
+                :src="`https://flagcdn.com/16x12/${m.authorGeo.countryCode.toLowerCase()}.png`"
+                :alt="m.authorGeo.countryCode"
+                class="exp-flag"
+              />
+              <span class="exp-ts">{{ fmtDate(m.createdAt) }}</span>
+            </div>
+            <p class="exp-content">{{ preview(m) }}</p>
+            <div class="exp-tags">
+              <span v-if="m.richMode && m.richMode !== 'none'" class="exp-tag">riche</span>
+              <span v-if="m.attachments?.length" class="exp-tag">📎 {{ m.attachments.length }}</span>
+              <span v-if="m.replies?.length" class="exp-tag">↩ {{ m.replies.length }}</span>
+            </div>
+          </RouterLink>
+          <FavButton :message="m" class="exp-fav" />
+        </li>
+      </ul>
+
+      <p v-if="loading" class="exp-msg">Chargement…</p>
+      <p v-if="!loading && visible.length === 0" class="exp-msg">Aucun message trouvé.</p>
+
+      <!-- Sentinelle de défilement infini -->
+      <div ref="sentinel" class="exp-sentinel" />
+      <p v-if="!hasMore && visible.length > 0" class="exp-msg exp-end">— fin du catalogue —</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick } from 'vue';
+import type { Message } from '@/composables/useMessages';
+import { getIpColor } from '@/composables/ipColor';
+import SearchBox from '@/components/SearchBox.vue';
+import FavButton from '@/components/FavButton.vue';
+
+// Nom requis pour le keep-alive (App.vue `include="ExplorerPage"`).
+defineOptions({ name: 'ExplorerPage' });
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+const PAGE = 20;
+
+const query = ref('');
+const filter = ref<'all' | 'rich' | 'files' | 'geo'>('all');
+const items = ref<Message[]>([]);
+const cursor = ref<string | null>(null);
+const hasMore = ref(true);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+let controller: AbortController | null = null;
+
+/** Filtre client appliqué par-dessus la recherche serveur. */
+const visible = computed(() => {
+  switch (filter.value) {
+    case 'rich': return items.value.filter((m) => m.richMode && m.richMode !== 'none');
+    case 'files': return items.value.filter((m) => (m.attachments?.length ?? 0) > 0);
+    case 'geo': return items.value.filter((m) => !!m.authorGeo?.countryCode);
+    default: return items.value;
+  }
+});
+
+async function load(reset: boolean): Promise<void> {
+  // Annule toute requête en vol (recherche/page précédente).
+  controller?.abort();
+  controller = new AbortController();
+  const mine = controller;
+
+  if (reset) { items.value = []; cursor.value = null; hasMore.value = true; }
+  if (!hasMore.value && !reset) return;
+
+  loading.value = true;
+  error.value = null;
+  try {
+    const params = new URLSearchParams({ limit: String(PAGE) });
+    if (query.value.trim()) params.set('q', query.value.trim());
+    if (cursor.value && !reset) params.set('before', cursor.value);
+
+    const res = await fetch(`${API_URL}/api/messages?${params}`, { signal: mine.signal });
+    if (!res.ok) throw new Error('Erreur réseau');
+    const data = (await res.json()) as { items: Message[]; nextCursor: string | null; hasMore: boolean };
+
+    // Si une requête plus récente a démarré entre-temps, on ignore ce résultat.
+    if (mine.signal.aborted) return;
+
+    items.value = reset ? data.items : [...items.value, ...data.items];
+    cursor.value = data.nextCursor;
+    hasMore.value = data.hasMore;
+  } catch (e) {
+    if ((e as Error).name !== 'AbortError') error.value = 'Impossible de charger les messages.';
+  } finally {
+    if (mine === controller) loading.value = false;
+  }
+}
+
+// Nouvelle recherche → on repart de zéro (la valeur arrive déjà debouncée du SearchBox).
+watch(query, () => { void load(true); });
+
+// ── Défilement infini ──
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+function setupObserver(): void {
+  if (observer || !sentinel.value) return;
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0]?.isIntersecting && !loading.value && hasMore.value) void load(false);
+  }, { rootMargin: '200px' });
+  observer.observe(sentinel.value);
+}
+
+onMounted(async () => {
+  await load(true);
+  await nextTick();
+  setupObserver();
+});
+onActivated(() => setupObserver());
+onDeactivated(() => { observer?.disconnect(); observer = null; });
+
+function ipColor(ip: string): string { return getIpColor(ip); }
+function fmtDate(d: string): string {
+  return new Date(d).toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
+}
+function preview(m: Message): string {
+  if (m.richMode && m.richMode !== 'none') return m.content?.trim() || '[message riche]';
+  return m.content || '[vide]';
+}
+</script>
+
+<style scoped>
+.explorer { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.exp-head { flex-shrink: 0; padding: 16px 20px 12px; border-bottom: 1px solid #1a1a2a; }
+.exp-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0 0 12px; }
+.exp-controls { display: flex; gap: 10px; }
+.exp-search { flex: 1; }
+.exp-filter {
+  background: #141420; border: 1px solid #222234; border-radius: 23px;
+  color: #aaaacc; font-size: 12px; padding: 0 14px; outline: none; cursor: pointer;
+}
+
+.exp-scroll { flex: 1; overflow-y: auto; padding: 14px 20px; }
+.exp-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+.exp-card {
+  position: relative;
+  background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 12px 14px;
+}
+.exp-card-link { text-decoration: none; display: block; }
+.exp-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.exp-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
+.exp-flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
+.exp-ts { margin-left: auto; font-size: 10px; color: #44445a; font-family: 'Courier New', monospace; }
+.exp-content {
+  font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 0;
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+}
+.exp-tags { display: flex; gap: 6px; margin-top: 8px; }
+.exp-tag {
+  font-family: Arial, sans-serif; font-size: 9px; color: #6688aa;
+  background: #0c1622; border: 1px solid #16324a; border-radius: 6px; padding: 1px 6px;
+}
+.exp-fav { position: absolute; top: 10px; right: 10px; font-size: 15px; }
+
+.exp-msg { text-align: center; color: #55557a; font-family: Arial, sans-serif; font-size: 12px; padding: 16px; }
+.exp-msg--err { color: #ff7788; }
+.exp-end { color: #33334d; }
+.exp-sentinel { height: 1px; }
+</style>
diff --git a/frontend/src/views/FavorisPage.vue b/frontend/src/views/FavorisPage.vue
new file mode 100644
index 0000000..baf2778
--- /dev/null
+++ b/frontend/src/views/FavorisPage.vue
@@ -0,0 +1,162 @@
+<!-- Liste personnelle « Favoris » : éléments enregistrés (localStorage),
+     éditables (note, commentaire, statut) via une modale, retirables. -->
+<template>
+  <div class="favs">
+    <header class="favs-head">
+      <h1 class="favs-title">⭐ Mes favoris <span class="favs-count">{{ all.length }}</span></h1>
+      <div class="favs-actions">
+        <RouterLink v-if="all.length" to="/mes-stats" class="btn-stats">📊 Voir mes stats</RouterLink>
+        <button v-if="all.length" class="btn-clear" type="button" @click="clear">Tout vider</button>
+      </div>
+    </header>
+
+    <div class="favs-scroll">
+      <div v-if="all.length === 0" class="favs-empty">
+        <p>Aucun favori pour l'instant.</p>
+        <RouterLink to="/explorer" class="btn-explore">🔎 Explorer des messages</RouterLink>
+      </div>
+
+      <ul v-else class="favs-list">
+        <li v-for="f in all" :key="f.id" class="fav-card">
+          <div class="fav-main">
+            <div class="fav-meta">
+              <RouterLink :to="`/message/${f.id}`" class="fav-ip" :style="{ color: ipColor(f.authorIp) }">{{ f.authorIp }}</RouterLink>
+              <span class="fav-status" :class="`fav-status--${f.status}`">{{ statusLabel(f.status) }}</span>
+              <span v-if="f.rating" class="fav-rating">{{ '★'.repeat(f.rating) }}<span class="dim">{{ '★'.repeat(5 - f.rating) }}</span></span>
+            </div>
+            <p class="fav-content">{{ f.content }}</p>
+            <p v-if="f.note" class="fav-note">📝 {{ f.note }}</p>
+          </div>
+          <div class="fav-buttons">
+            <button class="fav-edit" type="button" @click="openEdit(f.id)">✏️</button>
+            <button class="fav-del" type="button" @click="remove(f.id)">🗑️</button>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Modale d'édition (Teleport + slots) -->
+    <Modal v-model:open="editOpen" :title="`Annoter ${editing?.authorIp ?? ''}`">
+      <div v-if="editing" class="edit">
+        <p class="edit-content">« {{ editing.content }} »</p>
+
+        <label class="edit-label">Note</label>
+        <div class="stars">
+          <button
+            v-for="n in 5"
+            :key="n"
+            class="star"
+            :class="{ on: n <= draftRating }"
+            type="button"
+            @click="draftRating = n === draftRating ? 0 : n"
+          >★</button>
+        </div>
+
+        <label class="edit-label">Statut</label>
+        <select v-model="draftStatus" class="edit-select">
+          <option value="a-lire">À lire</option>
+          <option value="lu">Lu</option>
+          <option value="top">Coup de cœur</option>
+        </select>
+
+        <label class="edit-label">Commentaire</label>
+        <textarea v-model="draftNote" class="edit-note" rows="3" placeholder="Ton annotation…" />
+
+        <div class="edit-foot">
+          <button class="btn-save" type="button" @click="save">Enregistrer</button>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useFavorites, type FavStatus } from '@/composables/useFavorites';
+import { getIpColor } from '@/composables/ipColor';
+import Modal from '@/components/Modal.vue';
+
+const { all, remove, clear, setNote, setRating, setStatus } = useFavorites();
+
+const editOpen = ref(false);
+const editingId = ref<string | null>(null);
+const editing = computed(() => all.value.find((f) => f.id === editingId.value) ?? null);
+
+const draftNote = ref('');
+const draftRating = ref(0);
+const draftStatus = ref<FavStatus>('a-lire');
+
+function openEdit(id: string): void {
+  const f = all.value.find((x) => x.id === id);
+  if (!f) return;
+  editingId.value = id;
+  draftNote.value = f.note;
+  draftRating.value = f.rating;
+  draftStatus.value = f.status;
+  editOpen.value = true;
+}
+
+function save(): void {
+  if (!editingId.value) return;
+  setNote(editingId.value, draftNote.value);
+  setRating(editingId.value, draftRating.value);
+  setStatus(editingId.value, draftStatus.value);
+  editOpen.value = false;
+}
+
+function ipColor(ip: string): string { return getIpColor(ip); }
+function statusLabel(s: FavStatus): string {
+  return s === 'lu' ? 'Lu' : s === 'top' ? 'Coup de cœur' : 'À lire';
+}
+</script>
+
+<style scoped>
+.favs { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.favs-head {
+  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid #1a1a2a;
+}
+.favs-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0; }
+.favs-count { font-size: 13px; color: #ffcc44; margin-left: 6px; }
+.favs-actions { display: flex; gap: 10px; }
+.btn-stats { font-size: 12px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 14px; padding: 6px 12px; }
+.btn-stats:hover { background: #00aaff14; }
+.btn-clear { font-size: 12px; color: #ff6655; background: #2a1010; border: 1px solid #882222; border-radius: 14px; padding: 6px 12px; cursor: pointer; }
+
+.favs-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.favs-empty { text-align: center; color: #55557a; font-family: Arial, sans-serif; padding: 50px 0; }
+.btn-explore { display: inline-block; margin-top: 14px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 16px; padding: 8px 18px; }
+.btn-explore:hover { background: #00aaff14; }
+
+.favs-list { list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
+.fav-card {
+  display: flex; gap: 12px; align-items: flex-start;
+  background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 12px 14px;
+}
+.fav-main { flex: 1; min-width: 0; }
+.fav-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
+.fav-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; text-decoration: none; }
+.fav-status { font-size: 9px; padding: 1px 7px; border-radius: 6px; font-family: Arial, sans-serif; }
+.fav-status--a-lire { color: #8888aa; background: #16162a; }
+.fav-status--lu { color: #33aa77; background: #0e2018; }
+.fav-status--top { color: #ffcc44; background: #2a2206; }
+.fav-rating { font-size: 11px; color: #ffcc44; }
+.fav-rating .dim { color: #333; }
+.fav-content { font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 0; word-break: break-word; }
+.fav-note { font-family: Arial, sans-serif; font-size: 11px; color: #6688aa; margin: 6px 0 0; font-style: italic; }
+.fav-buttons { display: flex; flex-direction: column; gap: 6px; }
+.fav-edit, .fav-del { background: #141420; border: 1px solid #222234; border-radius: 8px; cursor: pointer; padding: 4px 8px; font-size: 13px; }
+.fav-edit:hover, .fav-del:hover { background: #1c1c2e; }
+
+/* Modale d'édition */
+.edit-content { font-family: Arial, sans-serif; font-size: 12px; color: #8899aa; font-style: italic; margin: 0 0 16px; }
+.edit-label { display: block; font-family: Arial, sans-serif; font-size: 11px; color: #6a6a90; margin: 12px 0 5px; text-transform: uppercase; letter-spacing: 0.5px; }
+.stars { display: flex; gap: 4px; }
+.star { background: none; border: none; cursor: pointer; font-size: 22px; color: #333; padding: 0; }
+.star.on { color: #ffcc44; }
+.edit-select { width: 100%; background: #141420; border: 1px solid #222234; border-radius: 6px; color: #ccccdd; font-size: 13px; padding: 8px 10px; outline: none; }
+.edit-note { width: 100%; box-sizing: border-box; background: #141420; border: 1px solid #222234; border-radius: 6px; color: #ccccdd; font-family: Arial, sans-serif; font-size: 13px; padding: 8px 10px; outline: none; resize: vertical; }
+.edit-foot { margin-top: 18px; text-align: right; }
+.btn-save { background: #004488; border: 1px solid #0066aa; color: #00ddff; font-size: 13px; font-weight: bold; padding: 8px 18px; border-radius: 18px; cursor: pointer; }
+.btn-save:hover { background: #005599; }
+</style>
diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index 5720cfc..4f417e8 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -64,8 +64,8 @@ function cancelReply(): void {
 .xip-app {
   display: flex;
   flex-direction: column;
-  width: 100vw;
-  height: 100dvh;
+  width: 100%;
+  height: 100%;
   background: var(--xip-app-bg);
   overflow: hidden;
 }
diff --git a/frontend/src/views/MesStatsPage.vue b/frontend/src/views/MesStatsPage.vue
new file mode 100644
index 0000000..8aca5fa
--- /dev/null
+++ b/frontend/src/views/MesStatsPage.vue
@@ -0,0 +1,169 @@
+<!-- Synthèse dérivée de la liste personnelle (favoris). Tous les agrégats sont
+     des `computed` sur useFavorites().all → mise à jour automatique à chaque
+     ajout / retrait / modification. Accès gardé : redirige si aucun favori. -->
+<template>
+  <div class="stats">
+    <header class="stats-head">
+      <h1 class="stats-title">📊 Mes statistiques</h1>
+      <RouterLink to="/favoris" class="btn-back">← Mes favoris</RouterLink>
+    </header>
+
+    <div class="stats-scroll">
+      <!-- Cartes chiffres -->
+      <div class="cards">
+        <div class="card">
+          <div class="card-label">Favoris</div>
+          <div class="card-val"><AnimatedNumber :value="total" /></div>
+        </div>
+        <div class="card">
+          <div class="card-label">Note moyenne</div>
+          <div class="card-val card-val--gold"><AnimatedNumber :value="avgRating" :decimals="1" /><span class="unit">/5</span></div>
+        </div>
+        <div class="card">
+          <div class="card-label">Longueur moyenne</div>
+          <div class="card-val"><AnimatedNumber :value="avgLength" :decimals="0" /><span class="unit">car.</span></div>
+        </div>
+        <div class="card">
+          <div class="card-label">Pays distincts</div>
+          <div class="card-val card-val--cyan"><AnimatedNumber :value="countryCount" /></div>
+        </div>
+      </div>
+
+      <!-- Répartition par statut -->
+      <section class="block">
+        <h2 class="block-title">Par statut</h2>
+        <div class="bars">
+          <div v-for="s in statusBreakdown" :key="s.key" class="bar-row">
+            <span class="bar-label">{{ s.label }}</span>
+            <div class="bar-track"><div class="bar-fill" :style="{ width: pct(s.count) + '%', background: s.color }" /></div>
+            <span class="bar-count">{{ s.count }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Top pays -->
+      <section v-if="topCountries.length" class="block">
+        <h2 class="block-title">Top pays</h2>
+        <div class="bars">
+          <div v-for="c in topCountries" :key="c.key" class="bar-row">
+            <span class="bar-label">
+              <img v-if="c.code" :src="`https://flagcdn.com/16x12/${c.code.toLowerCase()}.png`" :alt="c.code" class="flag" />
+              {{ c.label }}
+            </span>
+            <div class="bar-track"><div class="bar-fill" :style="{ width: pct(c.count) + '%' }" /></div>
+            <span class="bar-count">{{ c.count }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Top auteurs -->
+      <section v-if="topAuthors.length" class="block">
+        <h2 class="block-title">Top auteurs (IP)</h2>
+        <ol class="authors">
+          <li v-for="a in topAuthors" :key="a.key" class="author-row">
+            <span class="author-ip" :style="{ color: ipColor(a.key) }">{{ a.key }}</span>
+            <span class="author-count">{{ a.count }} favori(s)</span>
+          </li>
+        </ol>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useFavorites } from '@/composables/useFavorites';
+import { getIpColor } from '@/composables/ipColor';
+import AnimatedNumber from '@/components/AnimatedNumber.vue';
+
+const { all } = useFavorites();
+
+const total = computed(() => all.value.length);
+
+const avgRating = computed(() => {
+  const rated = all.value.filter((f) => f.rating > 0);
+  if (!rated.length) return 0;
+  return rated.reduce((s, f) => s + f.rating, 0) / rated.length;
+});
+
+const avgLength = computed(() => {
+  if (!all.value.length) return 0;
+  return all.value.reduce((s, f) => s + (f.content?.length ?? 0), 0) / all.value.length;
+});
+
+function tally<T extends string>(keyOf: (f: (typeof all.value)[number]) => T | null) {
+  const map = new Map<T, number>();
+  for (const f of all.value) {
+    const k = keyOf(f);
+    if (k == null) continue;
+    map.set(k, (map.get(k) ?? 0) + 1);
+  }
+  return map;
+}
+
+const statusBreakdown = computed(() => {
+  const m = tally((f) => f.status);
+  return [
+    { key: 'a-lire', label: 'À lire', color: '#5566aa', count: m.get('a-lire') ?? 0 },
+    { key: 'lu', label: 'Lu', color: '#33aa77', count: m.get('lu') ?? 0 },
+    { key: 'top', label: 'Coup de cœur', color: '#ffcc44', count: m.get('top') ?? 0 },
+  ];
+});
+
+const countryAgg = computed(() => {
+  const counts = new Map<string, { code: string; count: number }>();
+  for (const f of all.value) {
+    const g = f.authorGeo;
+    const label = g?.country || (g && !g.countryCode ? 'Local' : 'Inconnu');
+    const code = g?.countryCode ?? '';
+    const cur = counts.get(label) ?? { code, count: 0 };
+    cur.count++;
+    counts.set(label, cur);
+  }
+  return [...counts.entries()].map(([label, v]) => ({ key: label, label, code: v.code, count: v.count }));
+});
+const countryCount = computed(() => countryAgg.value.length);
+const topCountries = computed(() => [...countryAgg.value].sort((a, b) => b.count - a.count).slice(0, 5));
+
+const topAuthors = computed(() => {
+  const m = tally((f) => f.authorIp);
+  return [...m.entries()].map(([key, count]) => ({ key, count })).sort((a, b) => b.count - a.count).slice(0, 5);
+});
+
+const maxCount = computed(() => Math.max(1, ...all.value.length ? [total.value] : [1]));
+function pct(n: number): number { return Math.round((n / maxCount.value) * 100); }
+function ipColor(ip: string): string { return getIpColor(ip); }
+</script>
+
+<style scoped>
+.stats { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.stats-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #1a1a2a; }
+.stats-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0; }
+.btn-back { font-size: 12px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 14px; padding: 6px 12px; }
+.btn-back:hover { background: #00aaff14; }
+
+.stats-scroll { flex: 1; overflow-y: auto; padding: 20px; max-width: 760px; margin: 0 auto; width: 100%; }
+.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
+.card { background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 16px; text-align: center; }
+.card-label { font-family: Arial, sans-serif; font-size: 10px; color: #6a6a90; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
+.card-val { font-family: 'Courier New', monospace; font-size: 26px; font-weight: bold; color: #d8d8e8; }
+.card-val--gold { color: #ffcc44; }
+.card-val--cyan { color: #00ddff; }
+.unit { font-size: 12px; color: #55557a; margin-left: 3px; }
+
+.block { background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
+.block-title { font-family: Arial, sans-serif; font-size: 13px; color: #aaaacc; margin: 0 0 12px; }
+.bars { display: flex; flex-direction: column; gap: 8px; }
+.bar-row { display: flex; align-items: center; gap: 10px; }
+.bar-label { font-family: Arial, sans-serif; font-size: 12px; color: #9999bb; width: 130px; display: flex; align-items: center; gap: 6px; }
+.flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
+.bar-track { flex: 1; height: 8px; background: #16162a; border-radius: 4px; overflow: hidden; }
+.bar-fill { height: 100%; background: #00aaff; border-radius: 4px; transition: width 0.3s; }
+.bar-count { font-family: 'Courier New', monospace; font-size: 12px; color: #ccccdd; width: 28px; text-align: right; }
+
+.authors { list-style: none; counter-reset: rank; display: flex; flex-direction: column; gap: 8px; }
+.author-row { display: flex; align-items: center; justify-content: space-between; counter-increment: rank; }
+.author-row::before { content: counter(rank); color: #44445a; font-family: 'Courier New', monospace; font-size: 11px; margin-right: 10px; }
+.author-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; flex: 1; }
+.author-count { font-family: Arial, sans-serif; font-size: 11px; color: #6a6a90; }
+</style>
diff --git a/frontend/src/views/MessageDetailPage.vue b/frontend/src/views/MessageDetailPage.vue
new file mode 100644
index 0000000..d91d536
--- /dev/null
+++ b/frontend/src/views/MessageDetailPage.vue
@@ -0,0 +1,125 @@
+<!-- Détail d'un message à partir de l'identifiant présent dans l'URL (/message/:id). -->
+<template>
+  <div class="detail">
+    <div class="detail-bar">
+      <button class="back" type="button" @click="goBack">← Retour</button>
+    </div>
+
+    <div class="detail-body">
+      <p v-if="loading" class="state">Chargement…</p>
+      <p v-else-if="error" class="state state--err">{{ error }}</p>
+
+      <article v-else-if="message" class="thread">
+        <header class="thread-head">
+          <span class="thread-ip" :style="{ color: ipColor(message.authorIp) }">{{ message.authorIp }}</span>
+          <span v-if="message.authorGeo" class="thread-geo">
+            <img
+              v-if="message.authorGeo.countryCode"
+              :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
+              :alt="message.authorGeo.countryCode"
+              class="flag"
+            />
+            {{ geoText(message.authorGeo) }}
+          </span>
+          <span class="thread-ts">{{ fmtDate(message.createdAt) }}</span>
+          <FavButton :message="message" class="thread-fav" />
+        </header>
+
+        <RichContent
+          v-if="message.richMode && message.richMode !== 'none' && message.richContent"
+          :mode="message.richMode"
+          :content="message.richContent"
+        />
+        <p v-else class="thread-content">{{ message.content }}</p>
+
+        <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
+
+        <section v-if="message.replies?.length" class="replies">
+          <h2 class="replies-title">{{ message.replies.length }} réponse(s)</h2>
+          <div v-for="r in message.replies" :key="r.id" class="reply">
+            <span class="reply-ip" :style="{ color: ipColor(r.authorIp) }">{{ r.authorIp }}</span>
+            <span class="reply-ts">{{ fmtDate(r.createdAt) }}</span>
+            <p class="reply-content">{{ r.content }}</p>
+          </div>
+        </section>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import type { Message, GeoInfo } from '@/composables/useMessages';
+import { getIpColor } from '@/composables/ipColor';
+import RichContent from '@/components/RichContent.vue';
+import MessageAttachments from '@/components/MessageAttachments.vue';
+import FavButton from '@/components/FavButton.vue';
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+const route = useRoute();
+const router = useRouter();
+
+const message = ref<Message | null>(null);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+async function fetchMessage(id: string): Promise<void> {
+  loading.value = true;
+  error.value = null;
+  message.value = null;
+  try {
+    const res = await fetch(`${API_URL}/api/messages/${encodeURIComponent(id)}`);
+    if (res.status === 404) { error.value = 'Ce message n’existe pas (ou plus).'; return; }
+    if (!res.ok) throw new Error();
+    message.value = (await res.json()) as Message;
+  } catch {
+    error.value = 'Impossible de charger ce message.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Recharge quand l'id de l'URL change (navigation entre détails).
+watch(() => route.params.id, (id) => { if (typeof id === 'string') void fetchMessage(id); }, { immediate: true });
+
+function goBack(): void {
+  if (window.history.length > 1) router.back();
+  else router.push('/explorer');
+}
+function ipColor(ip: string): string { return getIpColor(ip); }
+function fmtDate(d: string): string { return new Date(d).toLocaleString('fr-FR'); }
+function geoText(g: GeoInfo): string {
+  if (!g.countryCode) return 'Local';
+  return [g.city, g.country].filter(Boolean).join(', ');
+}
+</script>
+
+<style scoped>
+.detail { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.detail-bar { flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid #1a1a2a; }
+.back {
+  background: #141420; border: 1px solid #222234; border-radius: 16px;
+  color: #00ddff; font-size: 12px; padding: 6px 14px; cursor: pointer;
+}
+.back:hover { background: #1c1c2e; }
+.detail-body { flex: 1; overflow-y: auto; padding: 24px 20px; }
+.state { text-align: center; color: #55557a; font-family: Arial, sans-serif; padding: 40px; }
+.state--err { color: #ff7788; }
+
+.thread { max-width: 640px; margin: 0 auto; background: #101018; border: 1px solid #20203a; border-radius: 12px; padding: 20px; }
+.thread-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+.thread-ip { font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; }
+.thread-geo { font-family: Arial, sans-serif; font-size: 11px; color: #55557a; display: inline-flex; align-items: center; gap: 4px; }
+.flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
+.thread-ts { margin-left: auto; font-size: 11px; color: #44445a; font-family: 'Courier New', monospace; }
+.thread-fav { font-size: 17px; }
+.thread-content { font-family: Arial, sans-serif; font-size: 15px; color: #d8d8e8; line-height: 1.5; margin: 0; word-break: break-word; }
+
+.replies { margin-top: 20px; border-top: 1px solid #20203a; padding-top: 14px; }
+.replies-title { font-family: Arial, sans-serif; font-size: 12px; color: #6688aa; margin: 0 0 12px; }
+.reply { border-left: 2px solid #1a1a2a; padding-left: 12px; margin-bottom: 12px; }
+.reply-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
+.reply-ts { font-size: 10px; color: #44445a; margin-left: 8px; font-family: 'Courier New', monospace; }
+.reply-content { font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 4px 0 0; }
+</style>
diff --git a/frontend/src/views/ProductDetailPage.vue b/frontend/src/views/ProductDetailPage.vue
new file mode 100644
index 0000000..331b7f4
--- /dev/null
+++ b/frontend/src/views/ProductDetailPage.vue
@@ -0,0 +1,78 @@
+<!-- Détail d'un produit du shop à partir de l'identifiant de l'URL (/shop/p/:id). -->
+<template>
+  <div class="pdetail">
+    <div class="pdetail-bar">
+      <RouterLink to="/shop" class="back">← Boutique</RouterLink>
+    </div>
+    <div class="pdetail-body">
+      <p v-if="loading" class="state">Chargement…</p>
+      <p v-else-if="!product" class="state state--err">Produit introuvable.</p>
+      <div v-else class="pdetail-card">
+        <ProductCard
+          :product="product"
+          :buying="buying === product.id"
+          :owns="owns"
+          :owned-pet-chars="ownedPetChars()"
+          :pet-count="petCount()"
+          :free-mode="freeMode"
+          @buy="onBuy"
+          @go-perso="$router.push('/shop')"
+        />
+        <p v-if="lastError" class="toast toast--err">{{ lastError }}</p>
+        <p v-else-if="lastSuccess" class="toast toast--ok">✓ Acheté</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useShop, type Product, type PurchaseOptions } from '@/composables/useShop';
+import { useWallet } from '@/composables/useWallet';
+import ProductCard from '@/components/shop/ProductCard.vue';
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+const route = useRoute();
+
+const { buying, lastError, lastSuccess, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
+const { freeMode, fetchWallet } = useWallet();
+
+const product = ref<Product | null>(null);
+const loading = ref(true);
+
+async function load(id: string): Promise<void> {
+  loading.value = true;
+  product.value = null;
+  try {
+    const [res] = await Promise.all([
+      fetch(`${API_URL}/api/shop/products/${encodeURIComponent(id)}`),
+      fetchMe(),
+      fetchWallet(),
+    ]);
+    if (res.ok) product.value = (await res.json()) as Product;
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(() => route.params.id, (id) => { if (typeof id === 'string') void load(id); }, { immediate: true });
+
+async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
+  await purchase(productId, options);
+}
+</script>
+
+<style scoped>
+.pdetail { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.pdetail-bar { flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid #1a1a2a; }
+.back { background: #141420; border: 1px solid #222234; border-radius: 16px; color: #00ddff; font-size: 12px; padding: 6px 14px; text-decoration: none; }
+.back:hover { background: #1c1c2e; }
+.pdetail-body { flex: 1; overflow-y: auto; padding: 24px 20px; display: flex; justify-content: center; }
+.pdetail-card { width: 100%; max-width: 340px; }
+.state { color: #55557a; font-family: Arial, sans-serif; padding: 40px; text-align: center; }
+.state--err { color: #ff7788; }
+.toast { margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; text-align: center; }
+.toast--err { background: #2a0e12; border: 1px solid #aa3344; color: #ff8899; }
+.toast--ok { background: #0e2a16; border: 1px solid #33aa55; color: #66ffaa; }
+</style>
diff --git a/frontend/src/views/ShopPage.vue b/frontend/src/views/ShopPage.vue
index 61381d6..1d82dbb 100644
--- a/frontend/src/views/ShopPage.vue
+++ b/frontend/src/views/ShopPage.vue
@@ -1,228 +1,228 @@
-<template>
-  <div class="shop">
-    <!-- Header -->
-    <header class="shop-header">
-      <div class="sh-left">
-        <router-link to="/" class="sh-back">← Chat</router-link>
-        <span class="sh-title">XIP</span>
-        <span class="sh-sub">Marketplace</span>
-      </div>
-      <div class="sh-right">
-        <span v-if="ip" class="sh-ip">Connecté&nbsp;: {{ ip }}</span>
-        <span class="sh-balance" :class="{ free: freeMode }">
-          ◈ {{ displayBalance() }} <span class="sh-cr">cr</span>
-        </span>
-        <button class="sh-topup" @click="topUp" type="button">💸 Recharger</button>
-      </div>
-    </header>
-
-    <!-- Flash promo banner -->
-    <div class="flash">
-      ⚡ OFFRES FLASH — Cadre de Pub -33%, Pack Cosmétique -3 cr — expire dans
-      <span class="flash-timer">{{ countdown }}</span>
-    </div>
-
-    <div class="shop-body">
-      <!-- Category nav -->
-      <nav class="shop-nav">
-        <button
-          v-for="cat in categories"
-          :key="cat.id"
-          class="nav-item"
-          :class="{ active: activeCat === cat.id }"
-          @click="activeCat = cat.id"
-          type="button"
-        >{{ cat.label }}</button>
-
-        <div class="nav-wallet">
-          <p class="nav-wallet-label">Ton solde</p>
-          <p class="nav-wallet-val" :class="{ free: freeMode }">{{ displayBalance() }} cr</p>
-          <button class="nav-topup" @click="topUp" type="button">+ Recharger gratuitement</button>
-          <p v-if="freeMode" class="nav-free-note">Mode localhost : tout gratuit 🎉</p>
-        </div>
-      </nav>
-
-      <!-- Product grid -->
-      <main class="shop-main">
-        <div v-if="lastError" class="toast toast--err">{{ lastError }}</div>
-        <div v-else-if="lastSuccess" class="toast toast--ok">✓ Achat effectué</div>
-
-        <!-- Mes Persos panel -->
-        <MesPersos v-if="activeCat === 'perso'" />
-
-        <template v-else>
-          <div class="grid">
-            <ProductCard
-              v-for="p in visibleProducts"
-              :key="p.id"
-              :product="p"
-              :buying="buying === p.id"
-              :owns="owns"
-              :pet-count="petCount()"
-              :owned-pet-chars="ownedPetChars()"
-              :free-mode="freeMode"
-              @buy="onBuy"
-              @go-perso="activeCat = 'perso'"
-            />
-          </div>
-          <p v-if="visibleProducts.length === 0" class="empty">Aucun produit dans cette catégorie.</p>
-        </template>
-      </main>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useShop, type PurchaseOptions } from '@/composables/useShop';
-import { useWallet } from '@/composables/useWallet';
-import { parseMeta, type ProductMeta } from '@/composables/useMeta';
-import ProductCard from '@/components/shop/ProductCard.vue';
-import MesPersos from '@/components/shop/MesPersos.vue';
-
-const { products, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
-const { ip, freeMode, displayBalance, fetchWallet, topUp: walletTopUp } = useWallet();
-
-// Navigation forcée par catégorie : pas de « Tout voir », on entre directement
-// dans une rubrique organisée.
-const categories = [
-  { id: 'publicite', label: 'Publicité' },
-  { id: 'abonnements', label: 'Abonnements' },
-  { id: 'cosmetiques', label: 'Cosmétiques' },
-  { id: 'premium', label: 'Premium' },
-  { id: 'promotions', label: 'Promotions' },
-  { id: 'perso', label: '✨ Mes Persos' },
-];
-const activeCat = ref('publicite');
-
-const visibleProducts = computed(() => {
-  const chars = ownedPetChars();
-  return products.value
-    .filter((p) => p.category === activeCat.value)
-    .filter((p) => {
-      if (p.kind !== 'pet') return true;
-      const designs = parseMeta<ProductMeta>(p.metaJson).designs ?? [];
-      return designs.some((d) => !chars.includes(d.char));
-    });
-});
-
-async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
-  await purchase(productId, options);
-}
-
-async function topUp(): Promise<void> {
-  await walletTopUp();
-}
-
-// Cosmetic countdown timer (purely decorative, like the mockups).
-const countdown = ref('02:47:33');
-let timer: ReturnType<typeof setInterval> | null = null;
-let remaining = 2 * 3600 + 47 * 60 + 33;
-function tick(): void {
-  remaining = remaining > 0 ? remaining - 1 : 0;
-  const h = Math.floor(remaining / 3600);
-  const m = Math.floor((remaining % 3600) / 60);
-  const s = remaining % 60;
-  const pad = (n: number) => String(n).padStart(2, '0');
-  countdown.value = `${pad(h)}:${pad(m)}:${pad(s)}`;
-}
-
-onMounted(() => {
-  fetchProducts();
-  fetchMe();
-  fetchWallet();
-  timer = setInterval(tick, 1000);
-});
-onUnmounted(() => { if (timer) clearInterval(timer); });
-</script>
-
-<style scoped>
-.shop {
-  width: 100vw;
-  height: 100dvh;
-  background: #08080e;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: Arial, sans-serif;
-}
-
-/* Header */
-.shop-header {
-  flex-shrink: 0;
-  height: 56px;
-  background: #0e0e18;
-  border-bottom: 1px solid #1a1a2e;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-}
-.sh-left { display: flex; align-items: center; gap: 12px; }
-.sh-back {
-  color: #00ddff; text-decoration: none; font-size: 12px; font-weight: bold;
-  border: 1px solid #00aaff44; border-radius: 10px; padding: 4px 10px;
-}
-.sh-back:hover { background: #00aaff14; }
-.sh-title { font-size: 18px; font-weight: bold; color: #6699aa; }
-.sh-sub { font-size: 13px; color: #8888aa; }
-.sh-right { display: flex; align-items: center; gap: 12px; }
-.sh-ip { font-family: 'Courier New', monospace; font-size: 11px; color: #5566aa; }
-.sh-balance { font-family: 'Courier New', monospace; font-size: 15px; font-weight: bold; color: #ccaa44; }
-.sh-balance.free { color: #44aa77; }
-.sh-cr { font-size: 10px; color: #886633; }
-.sh-topup {
-  background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
-  font-size: 12px; font-weight: bold; padding: 6px 14px; border-radius: 16px; cursor: pointer;
-  box-shadow: none;
-}
-.sh-topup:hover { background: #234a23; }
-
-/* Flash banner */
-.flash {
-  flex-shrink: 0;
-  background: linear-gradient(90deg, #2a0a0a, #1a0a1a);
-  border-bottom: 1px solid #44113344;
-  color: #ff8866; font-size: 12px; text-align: center; padding: 7px;
-}
-.flash-timer { font-family: 'Courier New', monospace; color: #ffcc44; font-weight: bold; }
-
-/* Body */
-.shop-body { flex: 1; display: flex; min-height: 0; }
-
-.shop-nav {
-  width: 200px; flex-shrink: 0; background: #0b0b14; border-right: 1px solid #1a1a2a;
-  padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
-}
-.nav-item {
-  text-align: left; background: none; border: none; color: #8888aa;
-  font-size: 13px; padding: 9px 12px; border-radius: 7px; cursor: pointer;
-}
-.nav-item:hover { background: #14142080; color: #aaaacc; }
-.nav-item.active { background: #00aaff18; color: #00ddff; font-weight: bold; }
-
-.nav-wallet {
-  margin-top: auto; background: #0e0e1a; border: 1px solid #20203a; border-radius: 8px; padding: 12px;
-}
-.nav-wallet-label { font-size: 10px; color: #6a6a90; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 1px; }
-.nav-wallet-val { font-family: 'Courier New', monospace; font-size: 20px; font-weight: bold; color: #ffdd66; margin: 0 0 10px; }
-.nav-wallet-val.free { color: #33ff99; }
-.nav-topup { width: 100%; background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77; font-size: 11px; font-weight: bold; padding: 8px; border-radius: 14px; cursor: pointer; }
-.nav-topup:hover { background: #234a23; }
-.nav-free-note { font-size: 10px; color: #33aa66; margin: 8px 0 0; text-align: center; }
-
-.shop-main { flex: 1; overflow-y: auto; padding: 20px; }
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-  align-items: start;
-}
-.empty { color: #44446a; text-align: center; padding: 40px; }
-
-.toast {
-  margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
-}
-.toast--err { background: #2a0e12; border: 1px solid #aa3344; color: #ff8899; }
-.toast--ok { background: #0e2a16; border: 1px solid #33aa55; color: #66ffaa; }
-</style>
+<template>
+  <div class="shop">
+    <!-- Header -->
+    <header class="shop-header">
+      <div class="sh-left">
+        <router-link to="/" class="sh-back">← Chat</router-link>
+        <span class="sh-title">XIP</span>
+        <span class="sh-sub">Marketplace</span>
+      </div>
+      <div class="sh-right">
+        <span v-if="ip" class="sh-ip">Connecté&nbsp;: {{ ip }}</span>
+        <span class="sh-balance" :class="{ free: freeMode }">
+          ◈ {{ displayBalance() }} <span class="sh-cr">cr</span>
+        </span>
+        <button class="sh-topup" @click="topUp" type="button">💸 Recharger</button>
+      </div>
+    </header>
+
+    <!-- Flash promo banner -->
+    <div class="flash">
+      ⚡ OFFRES FLASH — Cadre de Pub -33%, Pack Cosmétique -3 cr — expire dans
+      <span class="flash-timer">{{ countdown }}</span>
+    </div>
+
+    <div class="shop-body">
+      <!-- Category nav -->
+      <nav class="shop-nav">
+        <button
+          v-for="cat in categories"
+          :key="cat.id"
+          class="nav-item"
+          :class="{ active: activeCat === cat.id }"
+          @click="activeCat = cat.id"
+          type="button"
+        >{{ cat.label }}</button>
+
+        <div class="nav-wallet">
+          <p class="nav-wallet-label">Ton solde</p>
+          <p class="nav-wallet-val" :class="{ free: freeMode }">{{ displayBalance() }} cr</p>
+          <button class="nav-topup" @click="topUp" type="button">+ Recharger gratuitement</button>
+          <p v-if="freeMode" class="nav-free-note">Mode localhost : tout gratuit 🎉</p>
+        </div>
+      </nav>
+
+      <!-- Product grid -->
+      <main class="shop-main">
+        <div v-if="lastError" class="toast toast--err">{{ lastError }}</div>
+        <div v-else-if="lastSuccess" class="toast toast--ok">✓ Achat effectué</div>
+
+        <!-- Mes Persos panel -->
+        <MesPersos v-if="activeCat === 'perso'" />
+
+        <template v-else>
+          <div class="grid">
+            <ProductCard
+              v-for="p in visibleProducts"
+              :key="p.id"
+              :product="p"
+              :buying="buying === p.id"
+              :owns="owns"
+              :pet-count="petCount()"
+              :owned-pet-chars="ownedPetChars()"
+              :free-mode="freeMode"
+              @buy="onBuy"
+              @go-perso="activeCat = 'perso'"
+            />
+          </div>
+          <p v-if="visibleProducts.length === 0" class="empty">Aucun produit dans cette catégorie.</p>
+        </template>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useShop, type PurchaseOptions } from '@/composables/useShop';
+import { useWallet } from '@/composables/useWallet';
+import { parseMeta, type ProductMeta } from '@/composables/useMeta';
+import ProductCard from '@/components/shop/ProductCard.vue';
+import MesPersos from '@/components/shop/MesPersos.vue';
+
+const { products, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
+const { ip, freeMode, displayBalance, fetchWallet, topUp: walletTopUp } = useWallet();
+
+// Navigation forcée par catégorie : pas de « Tout voir », on entre directement
+// dans une rubrique organisée.
+const categories = [
+  { id: 'publicite', label: 'Publicité' },
+  { id: 'abonnements', label: 'Abonnements' },
+  { id: 'cosmetiques', label: 'Cosmétiques' },
+  { id: 'premium', label: 'Premium' },
+  { id: 'promotions', label: 'Promotions' },
+  { id: 'perso', label: '✨ Mes Persos' },
+];
+const activeCat = ref('publicite');
+
+const visibleProducts = computed(() => {
+  const chars = ownedPetChars();
+  return products.value
+    .filter((p) => p.category === activeCat.value)
+    .filter((p) => {
+      if (p.kind !== 'pet') return true;
+      const designs = parseMeta<ProductMeta>(p.metaJson).designs ?? [];
+      return designs.some((d) => !chars.includes(d.char));
+    });
+});
+
+async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
+  await purchase(productId, options);
+}
+
+async function topUp(): Promise<void> {
+  await walletTopUp();
+}
+
+// Cosmetic countdown timer (purely decorative, like the mockups).
+const countdown = ref('02:47:33');
+let timer: ReturnType<typeof setInterval> | null = null;
+let remaining = 2 * 3600 + 47 * 60 + 33;
+function tick(): void {
+  remaining = remaining > 0 ? remaining - 1 : 0;
+  const h = Math.floor(remaining / 3600);
+  const m = Math.floor((remaining % 3600) / 60);
+  const s = remaining % 60;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  countdown.value = `${pad(h)}:${pad(m)}:${pad(s)}`;
+}
+
+onMounted(() => {
+  fetchProducts();
+  fetchMe();
+  fetchWallet();
+  timer = setInterval(tick, 1000);
+});
+onUnmounted(() => { if (timer) clearInterval(timer); });
+</script>
+
+<style scoped>
+.shop {
+  width: 100%;
+  height: 100%;
+  background: #08080e;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+}
+
+/* Header */
+.shop-header {
+  flex-shrink: 0;
+  height: 56px;
+  background: #0e0e18;
+  border-bottom: 1px solid #1a1a2e;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+.sh-left { display: flex; align-items: center; gap: 12px; }
+.sh-back {
+  color: #00ddff; text-decoration: none; font-size: 12px; font-weight: bold;
+  border: 1px solid #00aaff44; border-radius: 10px; padding: 4px 10px;
+}
+.sh-back:hover { background: #00aaff14; }
+.sh-title { font-size: 18px; font-weight: bold; color: #6699aa; }
+.sh-sub { font-size: 13px; color: #8888aa; }
+.sh-right { display: flex; align-items: center; gap: 12px; }
+.sh-ip { font-family: 'Courier New', monospace; font-size: 11px; color: #5566aa; }
+.sh-balance { font-family: 'Courier New', monospace; font-size: 15px; font-weight: bold; color: #ccaa44; }
+.sh-balance.free { color: #44aa77; }
+.sh-cr { font-size: 10px; color: #886633; }
+.sh-topup {
+  background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
+  font-size: 12px; font-weight: bold; padding: 6px 14px; border-radius: 16px; cursor: pointer;
+  box-shadow: none;
+}
+.sh-topup:hover { background: #234a23; }
+
+/* Flash banner */
+.flash {
+  flex-shrink: 0;
+  background: linear-gradient(90deg, #2a0a0a, #1a0a1a);
+  border-bottom: 1px solid #44113344;
+  color: #ff8866; font-size: 12px; text-align: center; padding: 7px;
+}
+.flash-timer { font-family: 'Courier New', monospace; color: #ffcc44; font-weight: bold; }
+
+/* Body */
+.shop-body { flex: 1; display: flex; min-height: 0; }
+
+.shop-nav {
+  width: 200px; flex-shrink: 0; background: #0b0b14; border-right: 1px solid #1a1a2a;
+  padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
+}
+.nav-item {
+  text-align: left; background: none; border: none; color: #8888aa;
+  font-size: 13px; padding: 9px 12px; border-radius: 7px; cursor: pointer;
+}
+.nav-item:hover { background: #14142080; color: #aaaacc; }
+.nav-item.active { background: #00aaff18; color: #00ddff; font-weight: bold; }
+
+.nav-wallet {
+  margin-top: auto; background: #0e0e1a; border: 1px solid #20203a; border-radius: 8px; padding: 12px;
+}
+.nav-wallet-label { font-size: 10px; color: #6a6a90; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 1px; }
+.nav-wallet-val { font-family: 'Courier New', monospace; font-size: 20px; font-weight: bold; color: #ffdd66; margin: 0 0 10px; }
+.nav-wallet-val.free { color: #33ff99; }
+.nav-topup { width: 100%; background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77; font-size: 11px; font-weight: bold; padding: 8px; border-radius: 14px; cursor: pointer; }
+.nav-topup:hover { background: #234a23; }
+.nav-free-note { font-size: 10px; color: #33aa66; margin: 8px 0 0; text-align: center; }
+
+.shop-main { flex: 1; overflow-y: auto; padding: 20px; }
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+.empty { color: #44446a; text-align: center; padding: 40px; }
+
+.toast {
+  margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
+}
+.toast--err { background: #2a0e12; border: 1px solid #aa3344; color: #ff8899; }
+.toast--ok { background: #0e2a16; border: 1px solid #33aa55; color: #66ffaa; }
+</style>
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index 11f02fe..7d0ff9e 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 27918ea..7efa4ff 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,24 +1,24 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
index 97ede7e..b850582 100644
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -1,11 +1,11 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
new file mode 100644
index 0000000..97fb3ee
--- /dev/null
+++ b/frontend/vitest.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: { '@': path.resolve(__dirname, './src') },
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    coverage: {
+      provider: 'v8',
+      // On cible le code métier (état + utilitaires), pas les pages/présentation.
+      include: [
+        'src/composables/useFavorites.ts',
+        'src/composables/useWallet.ts',
+        'src/composables/usePerks.ts',
+        'src/composables/useMeta.ts',
+        'src/composables/useDebounce.ts',
+        'src/composables/ipColor.ts',
+      ],
+      reporter: ['text', 'text-summary'],
+    },
+  },
+});
diff --git a/maquettes/chat/v1.svg b/maquettes/chat/v1.svg
index a5eff57..27c109a 100644
--- a/maquettes/chat/v1.svg
+++ b/maquettes/chat/v1.svg
@@ -1,368 +1,368 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
-<!--
-  v5 — Vue complète / Version la plus aboutie
-  Tous les éléments visibles : pub, chat avec IPs colorisées,
-  effets néon, menu fermé avec badge, champ de saisie stylisé
--->
-<defs>
-  <style>
-    .mono { font-family: 'Courier New', Courier, monospace; }
-    .sans { font-family: Arial, Helvetica, sans-serif; }
-    .msg  { font-family: Arial, Helvetica, sans-serif; font-size: 13px; fill: #c0c0c0; }
-    .ts   { font-family: 'Courier New', Courier, monospace; font-size: 10px; fill: #2e2e2e; }
-  </style>
-
-  <!-- Gradient fond -->
-  <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-    <stop offset="0%" stop-color="#0a0a0e"/>
-    <stop offset="100%" stop-color="#0c0c0e"/>
-  </linearGradient>
-
-  <!-- Gradient header -->
-  <linearGradient id="hdr" x1="0" y1="0" x2="1" y2="0">
-    <stop offset="0%" stop-color="#0e0e18"/>
-    <stop offset="50%" stop-color="#111118"/>
-    <stop offset="100%" stop-color="#0e0e18"/>
-  </linearGradient>
-
-  <!-- Gradient input -->
-  <linearGradient id="inp" x1="0" y1="0" x2="0" y2="1">
-    <stop offset="0%" stop-color="#1a1a24"/>
-    <stop offset="100%" stop-color="#141418"/>
-  </linearGradient>
-
-  <!-- Gradient barre pub -->
-  <linearGradient id="pub-bg" x1="0" y1="0" x2="1" y2="0">
-    <stop offset="0%" stop-color="#0e0e0e"/>
-    <stop offset="100%" stop-color="#111111"/>
-  </linearGradient>
-
-  <!-- Filtres glow -->
-  <filter id="glow-c" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="4"/>
-  </filter>
-  <filter id="glow-m" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="4"/>
-  </filter>
-  <filter id="glow-g" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="3.5"/>
-  </filter>
-  <filter id="glow-o" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="3"/>
-  </filter>
-  <filter id="glow-title" x="-30%" y="-30%" width="160%" height="160%">
-    <feGaussianBlur stdDeviation="6"/>
-  </filter>
-  <filter id="glow-btn" x="-30%" y="-30%" width="160%" height="160%">
-    <feGaussianBlur stdDeviation="5"/>
-  </filter>
-  <filter id="glow-menu" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="2"/>
-  </filter>
-
-  <!-- Badge menu -->
-  <filter id="badge-glow" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="2"/>
-  </filter>
-</defs>
-
-<!-- ══ FOND PRINCIPAL ══ -->
-<rect width="1280" height="720" fill="url(#bg)"/>
-
-<!-- Scanlines subtiles -->
-<rect width="1280" height="720" fill="none" stroke="#ffffff" stroke-width="0" opacity="0.02">
-  <animate attributeName="y" values="0;720" dur="8s" repeatCount="indefinite"/>
-</rect>
-
-<!-- ══════════════════════════════════════════
-     BANDE PUBLICITAIRE GAUCHE  130px
-     ══════════════════════════════════════════ -->
-<rect x="0" y="0" width="130" height="720" fill="url(#pub-bg)" stroke="#1e1e24" stroke-width="1"/>
-<!-- Ligne décorative droite -->
-<line x1="129" y1="0" x2="129" y2="720" stroke="#1a1a22" stroke-width="2"/>
-<line x1="127" y1="0" x2="127" y2="720" stroke="#0e0e12" stroke-width="1"/>
-
-<!-- Label pub discret -->
-<rect x="25" y="5" width="80" height="12" fill="#0e0e10" rx="6"/>
-<text x="65" y="15" fill="#2a2a38" text-anchor="middle" class="sans" font-size="8">PUB</text>
-
-<!-- ── Ad 1 : NOVA STORE ── -->
-<rect x="4" y="22" width="122" height="190" fill="#111116" stroke="#1e1e28" rx="4"/>
-<rect x="4" y="22" width="122" height="54" fill="#141420" rx="4"/>
-<!-- Trait déco haut -->
-<line x1="4" y1="75" x2="126" y2="75" stroke="#1a1a28" stroke-width="1"/>
-<!-- Titre ad avec subtle glow violet -->
-<text x="65" y="46" fill="#3333aa" text-anchor="middle" class="sans" font-size="14" font-weight="bold" filter="url(#glow-c)" opacity="0.5">NOVA</text>
-<text x="65" y="46" fill="#5566cc" text-anchor="middle" class="sans" font-size="14" font-weight="bold">NOVA</text>
-<text x="65" y="64" fill="#333355" text-anchor="middle" class="sans" font-size="9" letter-spacing="2">STORE 2026</text>
-<rect x="12" y="82" width="106" height="68" fill="#0c0c12" rx="2" stroke="#1a1a24"/>
-<text x="65" y="120" fill="#2a2a88" text-anchor="middle" class="sans" font-size="28">&#128722;</text>
-<rect x="20" y="160" width="90" height="24" fill="#181828" rx="12" stroke="#222235"/>
-<text x="65" y="176" fill="#4444aa" text-anchor="middle" class="sans" font-size="10">DÉCOUVRIR &#8594;</text>
-<text x="65" y="202" fill="#222232" text-anchor="middle" class="sans" font-size="8">nova-store.io</text>
-
-<!-- ── Ad 2 : APEX GEAR ── -->
-<rect x="4" y="220" width="122" height="190" fill="#0e120e" stroke="#1a241a" rx="4"/>
-<rect x="4" y="220" width="122" height="54" fill="#101810" rx="4"/>
-<line x1="4" y1="273" x2="126" y2="273" stroke="#182018" stroke-width="1"/>
-<text x="65" y="244" fill="#2a6633" text-anchor="middle" class="sans" font-size="13" font-weight="bold" filter="url(#glow-g)" opacity="0.5">APEX GEAR</text>
-<text x="65" y="244" fill="#44bb55" text-anchor="middle" class="sans" font-size="13" font-weight="bold">APEX GEAR</text>
-<text x="65" y="262" fill="#224422" text-anchor="middle" class="sans" font-size="9" letter-spacing="1">GAMING SETUP</text>
-<rect x="12" y="280" width="106" height="68" fill="#0a0e0a" rx="2" stroke="#182018"/>
-<text x="65" y="318" fill="#226622" text-anchor="middle" class="sans" font-size="28">&#127918;</text>
-<rect x="20" y="358" width="90" height="24" fill="#142014" rx="12" stroke="#1e2e1e"/>
-<text x="65" y="374" fill="#44aa44" text-anchor="middle" class="sans" font-size="10">ACHETER &#8594;</text>
-<text x="65" y="400" fill="#1a2a1a" text-anchor="middle" class="sans" font-size="8">apex-gear.com</text>
-
-<!-- ── Ad 3 : SHIELDVPN ── -->
-<rect x="4" y="418" width="122" height="190" fill="#0e0e16" stroke="#1a1a26" rx="4"/>
-<rect x="4" y="418" width="122" height="54" fill="#111020" rx="4"/>
-<line x1="4" y1="471" x2="126" y2="471" stroke="#181828" stroke-width="1"/>
-<text x="65" y="442" fill="#552288" text-anchor="middle" class="sans" font-size="12" font-weight="bold" filter="url(#glow-m)" opacity="0.5">SHIELDVPN</text>
-<text x="65" y="442" fill="#8844cc" text-anchor="middle" class="sans" font-size="12" font-weight="bold">SHIELDVPN</text>
-<text x="65" y="460" fill="#331155" text-anchor="middle" class="sans" font-size="9" letter-spacing="1">SÉCURITÉ TOTALE</text>
-<rect x="12" y="478" width="106" height="68" fill="#0a0810" rx="2" stroke="#181824"/>
-<text x="65" y="516" fill="#441188" text-anchor="middle" class="sans" font-size="28">&#128274;</text>
-<rect x="12" y="556" width="106" height="24" fill="#1a0a28" rx="12" stroke="#221230"/>
-<text x="65" y="572" fill="#9944dd" text-anchor="middle" class="sans" font-size="9">ESSAI GRATUIT &#8594;</text>
-<text x="65" y="598" fill="#221132" text-anchor="middle" class="sans" font-size="8">shieldvpn.net</text>
-
-<!-- ══════════════════════════════════════════
-     TOGGLE MENU DROIT  35px (avec badge)
-     ══════════════════════════════════════════ -->
-<rect x="1245" y="0" width="35" height="720" fill="#0e0e14" stroke="#1a1a22" stroke-width="1"/>
-<line x1="1246" y1="0" x2="1246" y2="720" stroke="#1a1a2a" stroke-width="2"/>
-
-<!-- Hamburger stylisé -->
-<line x1="1253" y1="20" x2="1272" y2="20" stroke="#4a4a6a" stroke-width="2" stroke-linecap="round"/>
-<line x1="1256" y1="28" x2="1272" y2="28" stroke="#4a4a6a" stroke-width="1.5" stroke-linecap="round"/>
-<line x1="1253" y1="36" x2="1272" y2="36" stroke="#4a4a6a" stroke-width="2" stroke-linecap="round"/>
-
-<!-- Badge notification (point rouge) -->
-<circle cx="1271" cy="16" r="5" fill="#880000" filter="url(#badge-glow)" opacity="0.8"/>
-<circle cx="1271" cy="16" r="4" fill="#cc2222"/>
-<circle cx="1271" cy="16" r="2" fill="#ff4444"/>
-<text x="1271" y="20" fill="#ffffff" text-anchor="middle" class="sans" font-size="6" font-weight="bold">3</text>
-
-<!-- Étiquettes verticales options (petit texte rotatif) -->
-<text x="1262" y="120" fill="#2a2a44" class="sans" font-size="8" text-anchor="middle" transform="rotate(90,1262,120)">Paramètres</text>
-<text x="1262" y="240" fill="#2a2a44" class="sans" font-size="8" text-anchor="middle" transform="rotate(90,1262,240)">Shop</text>
-<text x="1262" y="380" fill="#2a2a44" class="sans" font-size="8" text-anchor="middle" transform="rotate(90,1262,380)">Mes données</text>
-
-<!-- ══════════════════════════════════════════
-     ZONE CHAT PRINCIPALE  1115px
-     ══════════════════════════════════════════ -->
-<rect x="130" y="0" width="1115" height="720" fill="#090910"/>
-
-<!-- ── EN-TÊTE enrichi ── -->
-<rect x="130" y="0" width="1115" height="58" fill="url(#hdr)" stroke="#1e1e2a" stroke-width="1"/>
-<!-- Séparateur lumineux sous le header -->
-<line x1="130" y1="58" x2="1245" y2="58" stroke="#222233" stroke-width="1"/>
-<line x1="130" y1="57" x2="1245" y2="57" stroke="#2a2a44" stroke-width="0.5" opacity="0.5"/>
-
-<!-- Logo / titre avec glow -->
-<text x="155" y="26" fill="#0066aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-title)" opacity="0.8">XIP</text>
-<text x="155" y="26" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
-<line x1="185" y1="12" x2="185" y2="46" stroke="#222233" stroke-width="1"/>
-<text x="196" y="24" fill="#ccccdd" class="sans" font-size="14" font-weight="bold">Chat Public</text>
-<text x="196" y="42" fill="#3a3a55" class="sans" font-size="11">canal : <tspan fill="#4a4a77"># général</tspan></text>
-
-<!-- Indicateur de connexion animé -->
-<circle cx="420" cy="29" r="6" fill="#003300" stroke="#006600" stroke-width="1"/>
-<circle cx="420" cy="29" r="4" fill="#00ff44" filter="url(#glow-g)" opacity="0.6"/>
-<circle cx="420" cy="29" r="3" fill="#00ff88"/>
-<text x="434" y="27" fill="#33aa44" class="sans" font-size="12">312 en ligne</text>
-<text x="434" y="42" fill="#2a3a2a" class="sans" font-size="10">pic journalier : 1 204</text>
-
-<!-- Barre de recherche (déco) -->
-<rect x="700" y="14" width="200" height="28" fill="#141420" stroke="#222232" rx="14"/>
-<text x="720" y="31" fill="#2a2a44" class="sans" font-size="11">&#128269; Rechercher...</text>
-
-<!-- Heure / date -->
-<text x="940" y="24" fill="#2a2a40" class="mono" font-size="10">ven. 23 mai 2026</text>
-<text x="940" y="40" fill="#3a3a5a" class="mono" font-size="12">17:48</text>
-
-<!-- ── MESSAGES ── -->
-<!-- Ligne: y_ip, y_msg, séparateur à y_msg+9 -->
-
-<!-- 1: 192.168.1.45 (gris standard) -->
-<text x="155" y="80" fill="#606080" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
-<text x="279" y="80" class="ts">17:42</text>
-<text x="155" y="97" class="msg">Salut tout le monde !</text>
-<line x1="148" y1="106" x2="1230" y2="106" stroke="#141420" stroke-width="1"/>
-
-<!-- 2: 172.16.254.1 (CYAN — haut rang) -->
-<!-- Barre latérale cyan -->
-<rect x="143" y="115" width="3" height="44" fill="#004466" rx="1.5"/>
-<rect x="143" y="115" width="3" height="44" fill="#00ccff" rx="1.5" filter="url(#glow-c)" opacity="0.6"/>
-<text x="155" y="119" fill="#007799" class="mono" font-size="12" font-weight="bold" filter="url(#glow-c)" opacity="0.6">172.16.254.1</text>
-<text x="155" y="119" fill="#00ddff" class="mono" font-size="12" font-weight="bold">172.16.254.1</text>
-<!-- Badge rang -->
-<rect x="266" y="109" width="30" height="13" fill="#003344" rx="6" stroke="#006688"/>
-<text x="281" y="120" fill="#00ccff" text-anchor="middle" class="sans" font-size="7" font-weight="bold">TOP 5</text>
-<text x="306" y="119" class="ts">17:43</text>
-<text x="155" y="136" class="msg">Vous avez vu les nouveautés du shop ce soir ? Y'a des trucs ouf</text>
-<line x1="148" y1="145" x2="1230" y2="145" stroke="#141420" stroke-width="1"/>
-
-<!-- 3: 10.0.0.187 (gris) -->
-<text x="155" y="163" fill="#606080" class="mono" font-size="12" font-weight="bold">10.0.0.187</text>
-<text x="253" y="163" class="ts">17:43</text>
-<text x="155" y="180" class="msg">Ouais j'ai check, les prix sont vraiment corrects cette fois</text>
-<line x1="148" y1="189" x2="1230" y2="189" stroke="#141420" stroke-width="1"/>
-
-<!-- 4: 203.0.113.42 (ORANGE) -->
-<rect x="143" y="198" width="3" height="32" fill="#663300" rx="1.5"/>
-<rect x="143" y="198" width="3" height="32" fill="#ff8800" rx="1.5" filter="url(#glow-o)" opacity="0.5"/>
-<text x="155" y="202" fill="#994400" class="mono" font-size="12" font-weight="bold" filter="url(#glow-o)" opacity="0.6">203.0.113.42</text>
-<text x="155" y="202" fill="#ff8844" class="mono" font-size="12" font-weight="bold">203.0.113.42</text>
-<text x="279" y="202" class="ts">17:44</text>
-<text x="155" y="219" class="msg">lol ça spam trop ce soir 😂</text>
-<line x1="148" y1="228" x2="1230" y2="228" stroke="#141420" stroke-width="1"/>
-
-<!-- 5: 10.10.10.99 (MAGENTA) -->
-<rect x="143" y="237" width="3" height="44" fill="#660044" rx="1.5"/>
-<rect x="143" y="237" width="3" height="44" fill="#ff00aa" rx="1.5" filter="url(#glow-m)" opacity="0.5"/>
-<text x="155" y="241" fill="#880055" class="mono" font-size="12" font-weight="bold" filter="url(#glow-m)" opacity="0.6">10.10.10.99</text>
-<text x="155" y="241" fill="#ff44cc" class="mono" font-size="12" font-weight="bold">10.10.10.99</text>
-<rect x="254" y="231" width="38" height="13" fill="#330022" rx="6" stroke="#660044"/>
-<text x="273" y="242" fill="#ff00aa" text-anchor="middle" class="sans" font-size="7" font-weight="bold">VIP</text>
-<text x="302" y="241" class="ts">17:44</text>
-<text x="155" y="258" class="msg">@203.0.113.42 t'as raison mais c'est le fun quand même 🔥</text>
-<line x1="148" y1="267" x2="1230" y2="267" stroke="#141420" stroke-width="1"/>
-
-<!-- 6: 192.168.1.1 (gris) -->
-<text x="155" y="285" fill="#606080" class="mono" font-size="12" font-weight="bold">192.168.1.1</text>
-<text x="249" y="285" class="ts">17:45</text>
-<text x="155" y="302" class="msg">Le chat est vraiment actif ce soir, j'adore</text>
-<line x1="148" y1="311" x2="1230" y2="311" stroke="#141420" stroke-width="1"/>
-
-<!-- 7: 172.31.0.5 (VERT) -->
-<rect x="143" y="320" width="3" height="44" fill="#005522" rx="1.5"/>
-<rect x="143" y="320" width="3" height="44" fill="#00ff77" rx="1.5" filter="url(#glow-g)" opacity="0.5"/>
-<text x="155" y="324" fill="#007733" class="mono" font-size="12" font-weight="bold" filter="url(#glow-g)" opacity="0.6">172.31.0.5</text>
-<text x="155" y="324" fill="#00ee77" class="mono" font-size="12" font-weight="bold">172.31.0.5</text>
-<text x="247" y="324" class="ts">17:45</text>
-<text x="155" y="341" class="msg">Drop de demain va être énorme 🔥 j'ai les infos du shop en avance</text>
-<line x1="148" y1="350" x2="1230" y2="350" stroke="#141420" stroke-width="1"/>
-
-<!-- 8: 10.0.0.253 (gris) -->
-<text x="155" y="368" fill="#606080" class="mono" font-size="12" font-weight="bold">10.0.0.253</text>
-<text x="252" y="368" class="ts">17:45</text>
-<text x="155" y="385" class="msg">Quelqu'un sait comment configurer le stream OBS ?</text>
-<line x1="148" y1="394" x2="1230" y2="394" stroke="#141420" stroke-width="1"/>
-
-<!-- 9: 192.168.1.45 (réponse, gris) -->
-<text x="155" y="412" fill="#606080" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
-<text x="279" y="412" class="ts">17:46</text>
-<text x="155" y="429" class="msg">Vérife dans Paramètres &#x2192; onglet Diffusion &#x2192; Bitrate</text>
-<line x1="148" y1="438" x2="1230" y2="438" stroke="#141420" stroke-width="1"/>
-
-<!-- 10: 172.16.254.1 (CYAN) -->
-<rect x="143" y="447" width="3" height="32" fill="#004466" rx="1.5"/>
-<rect x="143" y="447" width="3" height="32" fill="#00ccff" rx="1.5" filter="url(#glow-c)" opacity="0.5"/>
-<text x="155" y="451" fill="#007799" class="mono" font-size="12" font-weight="bold" filter="url(#glow-c)" opacity="0.5">172.16.254.1</text>
-<text x="155" y="451" fill="#00ddff" class="mono" font-size="12" font-weight="bold">172.16.254.1</text>
-<text x="306" y="451" class="ts">17:47</text>
-<text x="155" y="468" class="msg">Sérieux ? T'as accès aux infos du shop en avant-première ?</text>
-<line x1="148" y1="477" x2="1230" y2="477" stroke="#141420" stroke-width="1"/>
-
-<!-- 11: 10.10.10.99 (MAGENTA) -->
-<rect x="143" y="486" width="3" height="32" fill="#660044" rx="1.5"/>
-<rect x="143" y="486" width="3" height="32" fill="#ff00aa" rx="1.5" filter="url(#glow-m)" opacity="0.4"/>
-<text x="155" y="490" fill="#880055" class="mono" font-size="12" font-weight="bold" filter="url(#glow-m)" opacity="0.5">10.10.10.99</text>
-<text x="155" y="490" fill="#ff44cc" class="mono" font-size="12" font-weight="bold">10.10.10.99</text>
-<text x="302" y="490" class="ts">17:47</text>
-<text x="155" y="507" class="msg">Pas accès officiel mais j'ai des sources bien placées 😏</text>
-<line x1="148" y1="516" x2="1230" y2="516" stroke="#141420" stroke-width="1"/>
-
-<!-- 12: 192.168.100.2 (gris) -->
-<text x="155" y="534" fill="#606080" class="mono" font-size="12" font-weight="bold">192.168.100.2</text>
-<text x="271" y="534" class="ts">17:48</text>
-<text x="155" y="551" class="msg">Quel canal pour les annonces du shop ?</text>
-<line x1="148" y1="560" x2="1230" y2="560" stroke="#141420" stroke-width="1"/>
-
-<!-- 13: 203.0.113.42 (ORANGE) -->
-<rect x="143" y="569" width="3" height="32" fill="#663300" rx="1.5"/>
-<rect x="143" y="569" width="3" height="32" fill="#ff8800" rx="1.5" filter="url(#glow-o)" opacity="0.4"/>
-<text x="155" y="573" fill="#994400" class="mono" font-size="12" font-weight="bold" filter="url(#glow-o)" opacity="0.5">203.0.113.42</text>
-<text x="155" y="573" fill="#ff8844" class="mono" font-size="12" font-weight="bold">203.0.113.42</text>
-<text x="279" y="573" class="ts">17:48</text>
-<text x="155" y="590" class="msg">Y'a un canal #shop mais c'est souvent silencieux 🤐</text>
-
-<!-- ══ PUB GAMBLING (droite, lumineux) ══ -->
-<defs>
-  <filter id="glow-red-gb" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="5"/>
-  </filter>
-  <filter id="glow-gold-gb" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="5"/>
-  </filter>
-</defs>
-<!-- Fond + bordure néon rouge -->
-<rect x="966" y="162" width="248" height="258" fill="#100400"/>
-<rect x="966" y="162" width="248" height="258" fill="none" stroke="#ff2200" stroke-width="3" rx="6" filter="url(#glow-red-gb)" opacity="0.9"/>
-<rect x="966" y="162" width="248" height="258" fill="none" stroke="#ff4422" stroke-width="1.5" rx="6"/>
-<!-- Header rouge -->
-<rect x="966" y="162" width="248" height="54" fill="#1a0400" rx="6"/>
-<text x="1090" y="186" fill="#aa2200" text-anchor="middle" class="sans" font-size="15" font-weight="bold" filter="url(#glow-red-gb)" opacity="0.9">&#9824; CASINO LUCKY &#9824;</text>
-<text x="1090" y="186" fill="#ff5533" text-anchor="middle" class="sans" font-size="15" font-weight="bold">&#9824; CASINO LUCKY &#9824;</text>
-<text x="1090" y="204" fill="#882200" text-anchor="middle" class="sans" font-size="9" letter-spacing="2">OFFRE EXCLUSIVE</text>
-<line x1="966" y1="216" x2="1214" y2="216" stroke="#440000" stroke-width="1"/>
-<!-- +200% or néon -->
-<text x="1090" y="262" fill="#996600" text-anchor="middle" class="sans" font-size="32" font-weight="bold" filter="url(#glow-gold-gb)" opacity="0.9">+200%</text>
-<text x="1090" y="262" fill="#ffdd00" text-anchor="middle" class="sans" font-size="32" font-weight="bold">+200%</text>
-<text x="1090" y="282" fill="#cc6600" text-anchor="middle" class="sans" font-size="11">sur votre 1er dépôt &#x2022; 500&#x20AC; max</text>
-<!-- 7 7 7 avec suits -->
-<text x="980" y="336" fill="#ff8800" class="sans" font-size="26" filter="url(#glow-red-gb)" opacity="0.5">&#9830;</text>
-<text x="980" y="336" fill="#ffaa44" class="sans" font-size="26">&#9830;</text>
-<text x="1030" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gold-gb)" opacity="0.6">7</text>
-<text x="1030" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1070" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gold-gb)" opacity="0.6">7</text>
-<text x="1070" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1110" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gold-gb)" opacity="0.6">7</text>
-<text x="1110" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1156" y="336" fill="#ff8800" class="sans" font-size="26" filter="url(#glow-red-gb)" opacity="0.5">&#9824;</text>
-<text x="1156" y="336" fill="#ffaa44" class="sans" font-size="26">&#9824;</text>
-<!-- CTA néon -->
-<rect x="976" y="349" width="228" height="38" fill="#220000" rx="19"/>
-<rect x="976" y="349" width="228" height="38" fill="none" stroke="#ff2200" stroke-width="1.5" rx="19" filter="url(#glow-red-gb)" opacity="0.8"/>
-<text x="1090" y="373" fill="#aa2200" text-anchor="middle" class="sans" font-size="13" font-weight="bold" filter="url(#glow-red-gb)" opacity="0.7">JOUER MAINTENANT &#x2192;</text>
-<text x="1090" y="373" fill="#ff4422" text-anchor="middle" class="sans" font-size="13" font-weight="bold">JOUER MAINTENANT &#x2192;</text>
-<!-- Disclaimer -->
-<text x="1090" y="411" fill="#440000" text-anchor="middle" class="sans" font-size="7">18+ &#x2022; Jeu responsable &#x2022; casino-lucky.bet</text>
-
-<!-- SCROLLBAR -->
-<rect x="1228" y="58" width="8" height="592" fill="#080810" stroke="#141420" stroke-width="1"/>
-<!-- Thumb scrollbar -->
-<rect x="1229" y="420" width="6" height="130" fill="#252535" rx="3"/>
-<rect x="1230" y="421" width="4" height="128" fill="#2e2e48" rx="2"/>
-
-<!-- ── ZONE DE SAISIE enrichie ── -->
-<rect x="130" y="650" width="1115" height="70" fill="#0e0e16" stroke="#1e1e2a" stroke-width="1"/>
-<!-- Trait lumineux en haut de la zone de saisie -->
-<line x1="130" y1="650" x2="1245" y2="650" stroke="#222238" stroke-width="1"/>
-<line x1="130" y1="651" x2="1245" y2="651" stroke="#2a2a44" stroke-width="0.5" opacity="0.4"/>
-
-<!-- Champ de saisie -->
-<rect x="175" y="660" width="930" height="48" fill="url(#inp)" stroke="#252538" stroke-width="1" rx="24"/>
-<!-- Reflet interne haut -->
-<rect x="176" y="661" width="928" height="6" fill="#ffffff" opacity="0.02" rx="24"/>
-
-<!-- Icône gauche (emoji/attachment) -->
-<text x="200" y="690" fill="#2a2a44" class="sans" font-size="16">&#128512;</text>
-<text x="228" y="690" fill="#222238" class="sans" font-size="16">&#128206;</text>
-
-<text x="260" y="690" fill="#252540" class="sans" font-size="13">Entrez un message...</text>
-
-<!-- Bouton envoi avec glow bleu-cyan -->
-<circle cx="1151" cy="684" r="22" fill="#001828" stroke="#003055" stroke-width="1"/>
-<circle cx="1151" cy="684" r="22" fill="#0066aa" filter="url(#glow-btn)" opacity="0.3"/>
-<!-- Flèche -->
-<polygon points="1142,679 1159,684 1142,689 1147,684" fill="#00aaee"/>
-<polygon points="1142,679 1159,684 1142,689 1147,684" fill="#00ddff" filter="url(#glow-btn)" opacity="0.5"/>
-
-<!-- Raccourcis bas de page -->
-<text x="175" y="712" fill="#1e1e2e" class="sans" font-size="9">Entrée pour envoyer · Maj+Entrée pour saut de ligne</text>
-<text x="1220" y="712" fill="#1e1e2e" text-anchor="end" class="sans" font-size="9">0/500</text>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
+<!--
+  v5 — Vue complète / Version la plus aboutie
+  Tous les éléments visibles : pub, chat avec IPs colorisées,
+  effets néon, menu fermé avec badge, champ de saisie stylisé
+-->
+<defs>
+  <style>
+    .mono { font-family: 'Courier New', Courier, monospace; }
+    .sans { font-family: Arial, Helvetica, sans-serif; }
+    .msg  { font-family: Arial, Helvetica, sans-serif; font-size: 13px; fill: #c0c0c0; }
+    .ts   { font-family: 'Courier New', Courier, monospace; font-size: 10px; fill: #2e2e2e; }
+  </style>
+
+  <!-- Gradient fond -->
+  <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0%" stop-color="#0a0a0e"/>
+    <stop offset="100%" stop-color="#0c0c0e"/>
+  </linearGradient>
+
+  <!-- Gradient header -->
+  <linearGradient id="hdr" x1="0" y1="0" x2="1" y2="0">
+    <stop offset="0%" stop-color="#0e0e18"/>
+    <stop offset="50%" stop-color="#111118"/>
+    <stop offset="100%" stop-color="#0e0e18"/>
+  </linearGradient>
+
+  <!-- Gradient input -->
+  <linearGradient id="inp" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="0%" stop-color="#1a1a24"/>
+    <stop offset="100%" stop-color="#141418"/>
+  </linearGradient>
+
+  <!-- Gradient barre pub -->
+  <linearGradient id="pub-bg" x1="0" y1="0" x2="1" y2="0">
+    <stop offset="0%" stop-color="#0e0e0e"/>
+    <stop offset="100%" stop-color="#111111"/>
+  </linearGradient>
+
+  <!-- Filtres glow -->
+  <filter id="glow-c" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="4"/>
+  </filter>
+  <filter id="glow-m" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="4"/>
+  </filter>
+  <filter id="glow-g" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="3.5"/>
+  </filter>
+  <filter id="glow-o" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="3"/>
+  </filter>
+  <filter id="glow-title" x="-30%" y="-30%" width="160%" height="160%">
+    <feGaussianBlur stdDeviation="6"/>
+  </filter>
+  <filter id="glow-btn" x="-30%" y="-30%" width="160%" height="160%">
+    <feGaussianBlur stdDeviation="5"/>
+  </filter>
+  <filter id="glow-menu" x="-50%" y="-50%" width="200%" height="200%">
+    <feGaussianBlur stdDeviation="2"/>
+  </filter>
+
+  <!-- Badge menu -->
+  <filter id="badge-glow" x="-50%" y="-50%" width="200%" height="200%">
+    <feGaussianBlur stdDeviation="2"/>
+  </filter>
+</defs>
+
+<!-- ══ FOND PRINCIPAL ══ -->
+<rect width="1280" height="720" fill="url(#bg)"/>
+
+<!-- Scanlines subtiles -->
+<rect width="1280" height="720" fill="none" stroke="#ffffff" stroke-width="0" opacity="0.02">
+  <animate attributeName="y" values="0;720" dur="8s" repeatCount="indefinite"/>
+</rect>
+
+<!-- ══════════════════════════════════════════
+     BANDE PUBLICITAIRE GAUCHE  130px
+     ══════════════════════════════════════════ -->
+<rect x="0" y="0" width="130" height="720" fill="url(#pub-bg)" stroke="#1e1e24" stroke-width="1"/>
+<!-- Ligne décorative droite -->
+<line x1="129" y1="0" x2="129" y2="720" stroke="#1a1a22" stroke-width="2"/>
+<line x1="127" y1="0" x2="127" y2="720" stroke="#0e0e12" stroke-width="1"/>
+
+<!-- Label pub discret -->
+<rect x="25" y="5" width="80" height="12" fill="#0e0e10" rx="6"/>
+<text x="65" y="15" fill="#2a2a38" text-anchor="middle" class="sans" font-size="8">PUB</text>
+
+<!-- ── Ad 1 : NOVA STORE ── -->
+<rect x="4" y="22" width="122" height="190" fill="#111116" stroke="#1e1e28" rx="4"/>
+<rect x="4" y="22" width="122" height="54" fill="#141420" rx="4"/>
+<!-- Trait déco haut -->
+<line x1="4" y1="75" x2="126" y2="75" stroke="#1a1a28" stroke-width="1"/>
+<!-- Titre ad avec subtle glow violet -->
+<text x="65" y="46" fill="#3333aa" text-anchor="middle" class="sans" font-size="14" font-weight="bold" filter="url(#glow-c)" opacity="0.5">NOVA</text>
+<text x="65" y="46" fill="#5566cc" text-anchor="middle" class="sans" font-size="14" font-weight="bold">NOVA</text>
+<text x="65" y="64" fill="#333355" text-anchor="middle" class="sans" font-size="9" letter-spacing="2">STORE 2026</text>
+<rect x="12" y="82" width="106" height="68" fill="#0c0c12" rx="2" stroke="#1a1a24"/>
+<text x="65" y="120" fill="#2a2a88" text-anchor="middle" class="sans" font-size="28">&#128722;</text>
+<rect x="20" y="160" width="90" height="24" fill="#181828" rx="12" stroke="#222235"/>
+<text x="65" y="176" fill="#4444aa" text-anchor="middle" class="sans" font-size="10">DÉCOUVRIR &#8594;</text>
+<text x="65" y="202" fill="#222232" text-anchor="middle" class="sans" font-size="8">nova-store.io</text>
+
+<!-- ── Ad 2 : APEX GEAR ── -->
+<rect x="4" y="220" width="122" height="190" fill="#0e120e" stroke="#1a241a" rx="4"/>
+<rect x="4" y="220" width="122" height="54" fill="#101810" rx="4"/>
+<line x1="4" y1="273" x2="126" y2="273" stroke="#182018" stroke-width="1"/>
+<text x="65" y="244" fill="#2a6633" text-anchor="middle" class="sans" font-size="13" font-weight="bold" filter="url(#glow-g)" opacity="0.5">APEX GEAR</text>
+<text x="65" y="244" fill="#44bb55" text-anchor="middle" class="sans" font-size="13" font-weight="bold">APEX GEAR</text>
+<text x="65" y="262" fill="#224422" text-anchor="middle" class="sans" font-size="9" letter-spacing="1">GAMING SETUP</text>
+<rect x="12" y="280" width="106" height="68" fill="#0a0e0a" rx="2" stroke="#182018"/>
+<text x="65" y="318" fill="#226622" text-anchor="middle" class="sans" font-size="28">&#127918;</text>
+<rect x="20" y="358" width="90" height="24" fill="#142014" rx="12" stroke="#1e2e1e"/>
+<text x="65" y="374" fill="#44aa44" text-anchor="middle" class="sans" font-size="10">ACHETER &#8594;</text>
+<text x="65" y="400" fill="#1a2a1a" text-anchor="middle" class="sans" font-size="8">apex-gear.com</text>
+
+<!-- ── Ad 3 : SHIELDVPN ── -->
+<rect x="4" y="418" width="122" height="190" fill="#0e0e16" stroke="#1a1a26" rx="4"/>
+<rect x="4" y="418" width="122" height="54" fill="#111020" rx="4"/>
+<line x1="4" y1="471" x2="126" y2="471" stroke="#181828" stroke-width="1"/>
+<text x="65" y="442" fill="#552288" text-anchor="middle" class="sans" font-size="12" font-weight="bold" filter="url(#glow-m)" opacity="0.5">SHIELDVPN</text>
+<text x="65" y="442" fill="#8844cc" text-anchor="middle" class="sans" font-size="12" font-weight="bold">SHIELDVPN</text>
+<text x="65" y="460" fill="#331155" text-anchor="middle" class="sans" font-size="9" letter-spacing="1">SÉCURITÉ TOTALE</text>
+<rect x="12" y="478" width="106" height="68" fill="#0a0810" rx="2" stroke="#181824"/>
+<text x="65" y="516" fill="#441188" text-anchor="middle" class="sans" font-size="28">&#128274;</text>
+<rect x="12" y="556" width="106" height="24" fill="#1a0a28" rx="12" stroke="#221230"/>
+<text x="65" y="572" fill="#9944dd" text-anchor="middle" class="sans" font-size="9">ESSAI GRATUIT &#8594;</text>
+<text x="65" y="598" fill="#221132" text-anchor="middle" class="sans" font-size="8">shieldvpn.net</text>
+
+<!-- ══════════════════════════════════════════
+     TOGGLE MENU DROIT  35px (avec badge)
+     ══════════════════════════════════════════ -->
+<rect x="1245" y="0" width="35" height="720" fill="#0e0e14" stroke="#1a1a22" stroke-width="1"/>
+<line x1="1246" y1="0" x2="1246" y2="720" stroke="#1a1a2a" stroke-width="2"/>
+
+<!-- Hamburger stylisé -->
+<line x1="1253" y1="20" x2="1272" y2="20" stroke="#4a4a6a" stroke-width="2" stroke-linecap="round"/>
+<line x1="1256" y1="28" x2="1272" y2="28" stroke="#4a4a6a" stroke-width="1.5" stroke-linecap="round"/>
+<line x1="1253" y1="36" x2="1272" y2="36" stroke="#4a4a6a" stroke-width="2" stroke-linecap="round"/>
+
+<!-- Badge notification (point rouge) -->
+<circle cx="1271" cy="16" r="5" fill="#880000" filter="url(#badge-glow)" opacity="0.8"/>
+<circle cx="1271" cy="16" r="4" fill="#cc2222"/>
+<circle cx="1271" cy="16" r="2" fill="#ff4444"/>
+<text x="1271" y="20" fill="#ffffff" text-anchor="middle" class="sans" font-size="6" font-weight="bold">3</text>
+
+<!-- Étiquettes verticales options (petit texte rotatif) -->
+<text x="1262" y="120" fill="#2a2a44" class="sans" font-size="8" text-anchor="middle" transform="rotate(90,1262,120)">Paramètres</text>
+<text x="1262" y="240" fill="#2a2a44" class="sans" font-size="8" text-anchor="middle" transform="rotate(90,1262,240)">Shop</text>
+<text x="1262" y="380" fill="#2a2a44" class="sans" font-size="8" text-anchor="middle" transform="rotate(90,1262,380)">Mes données</text>
+
+<!-- ══════════════════════════════════════════
+     ZONE CHAT PRINCIPALE  1115px
+     ══════════════════════════════════════════ -->
+<rect x="130" y="0" width="1115" height="720" fill="#090910"/>
+
+<!-- ── EN-TÊTE enrichi ── -->
+<rect x="130" y="0" width="1115" height="58" fill="url(#hdr)" stroke="#1e1e2a" stroke-width="1"/>
+<!-- Séparateur lumineux sous le header -->
+<line x1="130" y1="58" x2="1245" y2="58" stroke="#222233" stroke-width="1"/>
+<line x1="130" y1="57" x2="1245" y2="57" stroke="#2a2a44" stroke-width="0.5" opacity="0.5"/>
+
+<!-- Logo / titre avec glow -->
+<text x="155" y="26" fill="#0066aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-title)" opacity="0.8">XIP</text>
+<text x="155" y="26" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
+<line x1="185" y1="12" x2="185" y2="46" stroke="#222233" stroke-width="1"/>
+<text x="196" y="24" fill="#ccccdd" class="sans" font-size="14" font-weight="bold">Chat Public</text>
+<text x="196" y="42" fill="#3a3a55" class="sans" font-size="11">canal : <tspan fill="#4a4a77"># général</tspan></text>
+
+<!-- Indicateur de connexion animé -->
+<circle cx="420" cy="29" r="6" fill="#003300" stroke="#006600" stroke-width="1"/>
+<circle cx="420" cy="29" r="4" fill="#00ff44" filter="url(#glow-g)" opacity="0.6"/>
+<circle cx="420" cy="29" r="3" fill="#00ff88"/>
+<text x="434" y="27" fill="#33aa44" class="sans" font-size="12">312 en ligne</text>
+<text x="434" y="42" fill="#2a3a2a" class="sans" font-size="10">pic journalier : 1 204</text>
+
+<!-- Barre de recherche (déco) -->
+<rect x="700" y="14" width="200" height="28" fill="#141420" stroke="#222232" rx="14"/>
+<text x="720" y="31" fill="#2a2a44" class="sans" font-size="11">&#128269; Rechercher...</text>
+
+<!-- Heure / date -->
+<text x="940" y="24" fill="#2a2a40" class="mono" font-size="10">ven. 23 mai 2026</text>
+<text x="940" y="40" fill="#3a3a5a" class="mono" font-size="12">17:48</text>
+
+<!-- ── MESSAGES ── -->
+<!-- Ligne: y_ip, y_msg, séparateur à y_msg+9 -->
+
+<!-- 1: 192.168.1.45 (gris standard) -->
+<text x="155" y="80" fill="#606080" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
+<text x="279" y="80" class="ts">17:42</text>
+<text x="155" y="97" class="msg">Salut tout le monde !</text>
+<line x1="148" y1="106" x2="1230" y2="106" stroke="#141420" stroke-width="1"/>
+
+<!-- 2: 172.16.254.1 (CYAN — haut rang) -->
+<!-- Barre latérale cyan -->
+<rect x="143" y="115" width="3" height="44" fill="#004466" rx="1.5"/>
+<rect x="143" y="115" width="3" height="44" fill="#00ccff" rx="1.5" filter="url(#glow-c)" opacity="0.6"/>
+<text x="155" y="119" fill="#007799" class="mono" font-size="12" font-weight="bold" filter="url(#glow-c)" opacity="0.6">172.16.254.1</text>
+<text x="155" y="119" fill="#00ddff" class="mono" font-size="12" font-weight="bold">172.16.254.1</text>
+<!-- Badge rang -->
+<rect x="266" y="109" width="30" height="13" fill="#003344" rx="6" stroke="#006688"/>
+<text x="281" y="120" fill="#00ccff" text-anchor="middle" class="sans" font-size="7" font-weight="bold">TOP 5</text>
+<text x="306" y="119" class="ts">17:43</text>
+<text x="155" y="136" class="msg">Vous avez vu les nouveautés du shop ce soir ? Y'a des trucs ouf</text>
+<line x1="148" y1="145" x2="1230" y2="145" stroke="#141420" stroke-width="1"/>
+
+<!-- 3: 10.0.0.187 (gris) -->
+<text x="155" y="163" fill="#606080" class="mono" font-size="12" font-weight="bold">10.0.0.187</text>
+<text x="253" y="163" class="ts">17:43</text>
+<text x="155" y="180" class="msg">Ouais j'ai check, les prix sont vraiment corrects cette fois</text>
+<line x1="148" y1="189" x2="1230" y2="189" stroke="#141420" stroke-width="1"/>
+
+<!-- 4: 203.0.113.42 (ORANGE) -->
+<rect x="143" y="198" width="3" height="32" fill="#663300" rx="1.5"/>
+<rect x="143" y="198" width="3" height="32" fill="#ff8800" rx="1.5" filter="url(#glow-o)" opacity="0.5"/>
+<text x="155" y="202" fill="#994400" class="mono" font-size="12" font-weight="bold" filter="url(#glow-o)" opacity="0.6">203.0.113.42</text>
+<text x="155" y="202" fill="#ff8844" class="mono" font-size="12" font-weight="bold">203.0.113.42</text>
+<text x="279" y="202" class="ts">17:44</text>
+<text x="155" y="219" class="msg">lol ça spam trop ce soir 😂</text>
+<line x1="148" y1="228" x2="1230" y2="228" stroke="#141420" stroke-width="1"/>
+
+<!-- 5: 10.10.10.99 (MAGENTA) -->
+<rect x="143" y="237" width="3" height="44" fill="#660044" rx="1.5"/>
+<rect x="143" y="237" width="3" height="44" fill="#ff00aa" rx="1.5" filter="url(#glow-m)" opacity="0.5"/>
+<text x="155" y="241" fill="#880055" class="mono" font-size="12" font-weight="bold" filter="url(#glow-m)" opacity="0.6">10.10.10.99</text>
+<text x="155" y="241" fill="#ff44cc" class="mono" font-size="12" font-weight="bold">10.10.10.99</text>
+<rect x="254" y="231" width="38" height="13" fill="#330022" rx="6" stroke="#660044"/>
+<text x="273" y="242" fill="#ff00aa" text-anchor="middle" class="sans" font-size="7" font-weight="bold">VIP</text>
+<text x="302" y="241" class="ts">17:44</text>
+<text x="155" y="258" class="msg">@203.0.113.42 t'as raison mais c'est le fun quand même 🔥</text>
+<line x1="148" y1="267" x2="1230" y2="267" stroke="#141420" stroke-width="1"/>
+
+<!-- 6: 192.168.1.1 (gris) -->
+<text x="155" y="285" fill="#606080" class="mono" font-size="12" font-weight="bold">192.168.1.1</text>
+<text x="249" y="285" class="ts">17:45</text>
+<text x="155" y="302" class="msg">Le chat est vraiment actif ce soir, j'adore</text>
+<line x1="148" y1="311" x2="1230" y2="311" stroke="#141420" stroke-width="1"/>
+
+<!-- 7: 172.31.0.5 (VERT) -->
+<rect x="143" y="320" width="3" height="44" fill="#005522" rx="1.5"/>
+<rect x="143" y="320" width="3" height="44" fill="#00ff77" rx="1.5" filter="url(#glow-g)" opacity="0.5"/>
+<text x="155" y="324" fill="#007733" class="mono" font-size="12" font-weight="bold" filter="url(#glow-g)" opacity="0.6">172.31.0.5</text>
+<text x="155" y="324" fill="#00ee77" class="mono" font-size="12" font-weight="bold">172.31.0.5</text>
+<text x="247" y="324" class="ts">17:45</text>
+<text x="155" y="341" class="msg">Drop de demain va être énorme 🔥 j'ai les infos du shop en avance</text>
+<line x1="148" y1="350" x2="1230" y2="350" stroke="#141420" stroke-width="1"/>
+
+<!-- 8: 10.0.0.253 (gris) -->
+<text x="155" y="368" fill="#606080" class="mono" font-size="12" font-weight="bold">10.0.0.253</text>
+<text x="252" y="368" class="ts">17:45</text>
+<text x="155" y="385" class="msg">Quelqu'un sait comment configurer le stream OBS ?</text>
+<line x1="148" y1="394" x2="1230" y2="394" stroke="#141420" stroke-width="1"/>
+
+<!-- 9: 192.168.1.45 (réponse, gris) -->
+<text x="155" y="412" fill="#606080" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
+<text x="279" y="412" class="ts">17:46</text>
+<text x="155" y="429" class="msg">Vérife dans Paramètres &#x2192; onglet Diffusion &#x2192; Bitrate</text>
+<line x1="148" y1="438" x2="1230" y2="438" stroke="#141420" stroke-width="1"/>
+
+<!-- 10: 172.16.254.1 (CYAN) -->
+<rect x="143" y="447" width="3" height="32" fill="#004466" rx="1.5"/>
+<rect x="143" y="447" width="3" height="32" fill="#00ccff" rx="1.5" filter="url(#glow-c)" opacity="0.5"/>
+<text x="155" y="451" fill="#007799" class="mono" font-size="12" font-weight="bold" filter="url(#glow-c)" opacity="0.5">172.16.254.1</text>
+<text x="155" y="451" fill="#00ddff" class="mono" font-size="12" font-weight="bold">172.16.254.1</text>
+<text x="306" y="451" class="ts">17:47</text>
+<text x="155" y="468" class="msg">Sérieux ? T'as accès aux infos du shop en avant-première ?</text>
+<line x1="148" y1="477" x2="1230" y2="477" stroke="#141420" stroke-width="1"/>
+
+<!-- 11: 10.10.10.99 (MAGENTA) -->
+<rect x="143" y="486" width="3" height="32" fill="#660044" rx="1.5"/>
+<rect x="143" y="486" width="3" height="32" fill="#ff00aa" rx="1.5" filter="url(#glow-m)" opacity="0.4"/>
+<text x="155" y="490" fill="#880055" class="mono" font-size="12" font-weight="bold" filter="url(#glow-m)" opacity="0.5">10.10.10.99</text>
+<text x="155" y="490" fill="#ff44cc" class="mono" font-size="12" font-weight="bold">10.10.10.99</text>
+<text x="302" y="490" class="ts">17:47</text>
+<text x="155" y="507" class="msg">Pas accès officiel mais j'ai des sources bien placées 😏</text>
+<line x1="148" y1="516" x2="1230" y2="516" stroke="#141420" stroke-width="1"/>
+
+<!-- 12: 192.168.100.2 (gris) -->
+<text x="155" y="534" fill="#606080" class="mono" font-size="12" font-weight="bold">192.168.100.2</text>
+<text x="271" y="534" class="ts">17:48</text>
+<text x="155" y="551" class="msg">Quel canal pour les annonces du shop ?</text>
+<line x1="148" y1="560" x2="1230" y2="560" stroke="#141420" stroke-width="1"/>
+
+<!-- 13: 203.0.113.42 (ORANGE) -->
+<rect x="143" y="569" width="3" height="32" fill="#663300" rx="1.5"/>
+<rect x="143" y="569" width="3" height="32" fill="#ff8800" rx="1.5" filter="url(#glow-o)" opacity="0.4"/>
+<text x="155" y="573" fill="#994400" class="mono" font-size="12" font-weight="bold" filter="url(#glow-o)" opacity="0.5">203.0.113.42</text>
+<text x="155" y="573" fill="#ff8844" class="mono" font-size="12" font-weight="bold">203.0.113.42</text>
+<text x="279" y="573" class="ts">17:48</text>
+<text x="155" y="590" class="msg">Y'a un canal #shop mais c'est souvent silencieux 🤐</text>
+
+<!-- ══ PUB GAMBLING (droite, lumineux) ══ -->
+<defs>
+  <filter id="glow-red-gb" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="5"/>
+  </filter>
+  <filter id="glow-gold-gb" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="5"/>
+  </filter>
+</defs>
+<!-- Fond + bordure néon rouge -->
+<rect x="966" y="162" width="248" height="258" fill="#100400"/>
+<rect x="966" y="162" width="248" height="258" fill="none" stroke="#ff2200" stroke-width="3" rx="6" filter="url(#glow-red-gb)" opacity="0.9"/>
+<rect x="966" y="162" width="248" height="258" fill="none" stroke="#ff4422" stroke-width="1.5" rx="6"/>
+<!-- Header rouge -->
+<rect x="966" y="162" width="248" height="54" fill="#1a0400" rx="6"/>
+<text x="1090" y="186" fill="#aa2200" text-anchor="middle" class="sans" font-size="15" font-weight="bold" filter="url(#glow-red-gb)" opacity="0.9">&#9824; CASINO LUCKY &#9824;</text>
+<text x="1090" y="186" fill="#ff5533" text-anchor="middle" class="sans" font-size="15" font-weight="bold">&#9824; CASINO LUCKY &#9824;</text>
+<text x="1090" y="204" fill="#882200" text-anchor="middle" class="sans" font-size="9" letter-spacing="2">OFFRE EXCLUSIVE</text>
+<line x1="966" y1="216" x2="1214" y2="216" stroke="#440000" stroke-width="1"/>
+<!-- +200% or néon -->
+<text x="1090" y="262" fill="#996600" text-anchor="middle" class="sans" font-size="32" font-weight="bold" filter="url(#glow-gold-gb)" opacity="0.9">+200%</text>
+<text x="1090" y="262" fill="#ffdd00" text-anchor="middle" class="sans" font-size="32" font-weight="bold">+200%</text>
+<text x="1090" y="282" fill="#cc6600" text-anchor="middle" class="sans" font-size="11">sur votre 1er dépôt &#x2022; 500&#x20AC; max</text>
+<!-- 7 7 7 avec suits -->
+<text x="980" y="336" fill="#ff8800" class="sans" font-size="26" filter="url(#glow-red-gb)" opacity="0.5">&#9830;</text>
+<text x="980" y="336" fill="#ffaa44" class="sans" font-size="26">&#9830;</text>
+<text x="1030" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gold-gb)" opacity="0.6">7</text>
+<text x="1030" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1070" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gold-gb)" opacity="0.6">7</text>
+<text x="1070" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1110" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gold-gb)" opacity="0.6">7</text>
+<text x="1110" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1156" y="336" fill="#ff8800" class="sans" font-size="26" filter="url(#glow-red-gb)" opacity="0.5">&#9824;</text>
+<text x="1156" y="336" fill="#ffaa44" class="sans" font-size="26">&#9824;</text>
+<!-- CTA néon -->
+<rect x="976" y="349" width="228" height="38" fill="#220000" rx="19"/>
+<rect x="976" y="349" width="228" height="38" fill="none" stroke="#ff2200" stroke-width="1.5" rx="19" filter="url(#glow-red-gb)" opacity="0.8"/>
+<text x="1090" y="373" fill="#aa2200" text-anchor="middle" class="sans" font-size="13" font-weight="bold" filter="url(#glow-red-gb)" opacity="0.7">JOUER MAINTENANT &#x2192;</text>
+<text x="1090" y="373" fill="#ff4422" text-anchor="middle" class="sans" font-size="13" font-weight="bold">JOUER MAINTENANT &#x2192;</text>
+<!-- Disclaimer -->
+<text x="1090" y="411" fill="#440000" text-anchor="middle" class="sans" font-size="7">18+ &#x2022; Jeu responsable &#x2022; casino-lucky.bet</text>
+
+<!-- SCROLLBAR -->
+<rect x="1228" y="58" width="8" height="592" fill="#080810" stroke="#141420" stroke-width="1"/>
+<!-- Thumb scrollbar -->
+<rect x="1229" y="420" width="6" height="130" fill="#252535" rx="3"/>
+<rect x="1230" y="421" width="4" height="128" fill="#2e2e48" rx="2"/>
+
+<!-- ── ZONE DE SAISIE enrichie ── -->
+<rect x="130" y="650" width="1115" height="70" fill="#0e0e16" stroke="#1e1e2a" stroke-width="1"/>
+<!-- Trait lumineux en haut de la zone de saisie -->
+<line x1="130" y1="650" x2="1245" y2="650" stroke="#222238" stroke-width="1"/>
+<line x1="130" y1="651" x2="1245" y2="651" stroke="#2a2a44" stroke-width="0.5" opacity="0.4"/>
+
+<!-- Champ de saisie -->
+<rect x="175" y="660" width="930" height="48" fill="url(#inp)" stroke="#252538" stroke-width="1" rx="24"/>
+<!-- Reflet interne haut -->
+<rect x="176" y="661" width="928" height="6" fill="#ffffff" opacity="0.02" rx="24"/>
+
+<!-- Icône gauche (emoji/attachment) -->
+<text x="200" y="690" fill="#2a2a44" class="sans" font-size="16">&#128512;</text>
+<text x="228" y="690" fill="#222238" class="sans" font-size="16">&#128206;</text>
+
+<text x="260" y="690" fill="#252540" class="sans" font-size="13">Entrez un message...</text>
+
+<!-- Bouton envoi avec glow bleu-cyan -->
+<circle cx="1151" cy="684" r="22" fill="#001828" stroke="#003055" stroke-width="1"/>
+<circle cx="1151" cy="684" r="22" fill="#0066aa" filter="url(#glow-btn)" opacity="0.3"/>
+<!-- Flèche -->
+<polygon points="1142,679 1159,684 1142,689 1147,684" fill="#00aaee"/>
+<polygon points="1142,679 1159,684 1142,689 1147,684" fill="#00ddff" filter="url(#glow-btn)" opacity="0.5"/>
+
+<!-- Raccourcis bas de page -->
+<text x="175" y="712" fill="#1e1e2e" class="sans" font-size="9">Entrée pour envoyer · Maj+Entrée pour saut de ligne</text>
+<text x="1220" y="712" fill="#1e1e2e" text-anchor="end" class="sans" font-size="9">0/500</text>
+</svg>
diff --git a/maquettes/chat/v2.svg b/maquettes/chat/v2.svg
index 1435756..d3c16f7 100644
--- a/maquettes/chat/v2.svg
+++ b/maquettes/chat/v2.svg
@@ -1,187 +1,187 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
-<defs>
-  <style>
-    .mono { font-family: 'Courier New', Courier, monospace; }
-    .sans { font-family: Arial, Helvetica, sans-serif; }
-    .ip   { font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: bold; fill: #7a7a7a; }
-    .ts   { font-family: 'Courier New', Courier, monospace; font-size: 10px; fill: #2e2e2e; }
-    .msg  { font-family: Arial, Helvetica, sans-serif; font-size: 13px; fill: #bababa; }
-    .sep  { stroke: #181818; stroke-width: 1; }
-  </style>
-</defs>
-
-<!-- ══ FOND ══ -->
-<rect width="1280" height="720" fill="#0d0d0d"/>
-
-<!-- ══════════════════════════════
-     BANDE PUB GAUCHE  130px
-     ══════════════════════════════ -->
-<rect x="0" y="0" width="130" height="720" fill="#111" stroke="#1a1a1a" stroke-width="1"/>
-<rect x="4" y="4" width="122" height="14" fill="#161616" rx="2"/>
-<text x="65" y="15" fill="#383838" text-anchor="middle" class="sans" font-size="8">PUBLICITÉ</text>
-
-<!-- Ad 1: NOVA STORE -->
-<rect x="4" y="22" width="122" height="188" fill="#161616" stroke="#222" rx="3"/>
-<rect x="4" y="22" width="122" height="52" fill="#1c1c1c" rx="3"/>
-<text x="65" y="44" fill="#5a5a5a" text-anchor="middle" class="sans" font-size="14" font-weight="bold">NOVA</text>
-<text x="65" y="62" fill="#484848" text-anchor="middle" class="sans" font-size="9">STORE 2026</text>
-<rect x="14" y="83" width="102" height="64" fill="#111" rx="2"/>
-<text x="65" y="118" fill="#404040" text-anchor="middle" class="sans" font-size="26">&#128722;</text>
-<text x="65" y="166" fill="#484848" text-anchor="middle" class="sans" font-size="10">DÉCOUVRIR</text>
-<text x="65" y="198" fill="#303030" text-anchor="middle" class="sans" font-size="8">nova-store.io</text>
-
-<!-- Ad 2: APEX GEAR -->
-<rect x="4" y="218" width="122" height="188" fill="#161616" stroke="#222" rx="3"/>
-<rect x="4" y="218" width="122" height="52" fill="#141e14" rx="3"/>
-<text x="65" y="240" fill="#447744" text-anchor="middle" class="sans" font-size="12" font-weight="bold">APEX GEAR</text>
-<text x="65" y="257" fill="#336633" text-anchor="middle" class="sans" font-size="9">Gaming Setup</text>
-<rect x="14" y="278" width="102" height="64" fill="#111" rx="2"/>
-<text x="65" y="313" fill="#336633" text-anchor="middle" class="sans" font-size="26">&#127918;</text>
-<text x="65" y="360" fill="#3a5a3a" text-anchor="middle" class="sans" font-size="10">ACHETER</text>
-<text x="65" y="394" fill="#2a3a2a" text-anchor="middle" class="sans" font-size="8">apex-gear.com</text>
-
-<!-- Ad 3: SHIELDVPN -->
-<rect x="4" y="414" width="122" height="188" fill="#161616" stroke="#222" rx="3"/>
-<rect x="4" y="414" width="122" height="52" fill="#14141e" rx="3"/>
-<text x="65" y="436" fill="#4455aa" text-anchor="middle" class="sans" font-size="11" font-weight="bold">SHIELDVPN</text>
-<text x="65" y="452" fill="#3a4488" text-anchor="middle" class="sans" font-size="9">Sécurité totale</text>
-<rect x="14" y="474" width="102" height="64" fill="#111" rx="2"/>
-<text x="65" y="509" fill="#3a4488" text-anchor="middle" class="sans" font-size="26">&#128274;</text>
-<text x="65" y="556" fill="#3a4488" text-anchor="middle" class="sans" font-size="10">ESSAI GRATUIT</text>
-<text x="65" y="590" fill="#2a3366" text-anchor="middle" class="sans" font-size="8">shieldvpn.net</text>
-
-<!-- ══════════════════════════════
-     TOGGLE MENU DROIT  35px
-     ══════════════════════════════ -->
-<rect x="1245" y="0" width="35" height="720" fill="#111" stroke="#1a1a1a" stroke-width="1"/>
-<line x1="1253" y1="18" x2="1272" y2="18" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"/>
-<line x1="1253" y1="26" x2="1272" y2="26" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"/>
-<line x1="1253" y1="34" x2="1272" y2="34" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"/>
-
-<!-- ══════════════════════════════
-     ZONE CHAT PRINCIPALE  1115px
-     ══════════════════════════════ -->
-<rect x="130" y="0" width="1115" height="720" fill="#0d0d0d"/>
-
-<!-- ── EN-TÊTE ── -->
-<rect x="130" y="0" width="1115" height="52" fill="#111" stroke="#1a1a1a" stroke-width="1"/>
-<text x="158" y="24" fill="#d0d0d0" class="sans" font-size="17" font-weight="bold">XIP</text>
-<text x="190" y="20" fill="#cccccc" class="sans" font-size="14" font-weight="bold">Chat</text>
-<circle cx="206" cy="36" r="5" fill="#2d4a2d"/>
-<circle cx="206" cy="36" r="3" fill="#3a8a3a"/>
-<text x="218" y="41" fill="#3a6a3a" class="sans" font-size="11">312 connectés</text>
-<rect x="1050" y="14" width="95" height="24" fill="#1a1a1a" stroke="#262626" rx="12"/>
-<text x="1097" y="30" fill="#4a4a4a" text-anchor="middle" class="sans" font-size="10"># général</text>
-<line x1="130" y1="52" x2="1245" y2="52" stroke="#1a1a1a" stroke-width="1"/>
-
-<!-- ── MESSAGES ── -->
-
-<!-- 1: 192.168.1.45 -->
-<text x="155" y="76" class="ip">192.168.1.45</text>
-<text x="277" y="76" class="ts">17:42</text>
-<text x="155" y="93" class="msg">Salut tout le monde !</text>
-<line x1="155" y1="102" x2="1230" y2="102" class="sep"/>
-
-<!-- 2: 10.0.0.187 -->
-<text x="155" y="119" class="ip">10.0.0.187</text>
-<text x="253" y="119" class="ts">17:43</text>
-<text x="155" y="136" class="msg">Vous avez vu les nouveautés du shop ce soir ?</text>
-<line x1="155" y1="145" x2="1230" y2="145" class="sep"/>
-
-<!-- 3: 172.16.254.1 -->
-<text x="155" y="162" class="ip">172.16.254.1</text>
-<text x="271" y="162" class="ts">17:43</text>
-<text x="155" y="179" class="msg">Ouais j'ai check, les prix sont vraiment corrects</text>
-<line x1="155" y1="188" x2="1230" y2="188" class="sep"/>
-
-<!-- 4: 203.0.113.42 -->
-<text x="155" y="205" class="ip">203.0.113.42</text>
-<text x="275" y="205" class="ts">17:44</text>
-<text x="155" y="222" class="msg">lol ça spam trop ce soir</text>
-<line x1="155" y1="231" x2="1230" y2="231" class="sep"/>
-
-<!-- 5: 10.10.10.99 -->
-<text x="155" y="248" class="ip">10.10.10.99</text>
-<text x="255" y="248" class="ts">17:44</text>
-<text x="155" y="265" class="msg">@203.0.113.42 t'as raison mais c'est le fun quand même</text>
-<line x1="155" y1="274" x2="1230" y2="274" class="sep"/>
-
-<!-- 6: 192.168.1.1 -->
-<text x="155" y="291" class="ip">192.168.1.1</text>
-<text x="252" y="291" class="ts">17:45</text>
-<text x="155" y="308" class="msg">Le chat est bien actif ce soir, j'aime ça</text>
-<line x1="155" y1="317" x2="1230" y2="317" class="sep"/>
-
-<!-- 7: 10.0.0.253 -->
-<text x="155" y="334" class="ip">10.0.0.253</text>
-<text x="252" y="334" class="ts">17:45</text>
-<text x="155" y="351" class="msg">Quelqu'un sait comment configurer le stream ?</text>
-<line x1="155" y1="360" x2="1230" y2="360" class="sep"/>
-
-<!-- 8: 192.168.1.45 (réponse) -->
-<text x="155" y="377" class="ip">192.168.1.45</text>
-<text x="277" y="377" class="ts">17:46</text>
-<text x="155" y="394" class="msg">Vérife dans Paramètres &#x2192; onglet Diffusion</text>
-<line x1="155" y1="403" x2="1230" y2="403" class="sep"/>
-
-<!-- 9: 172.31.0.5 -->
-<text x="155" y="420" class="ip">172.31.0.5</text>
-<text x="247" y="420" class="ts">17:46</text>
-<text x="155" y="437" class="msg">Le drop de demain va être chaud, j'ai les infos du shop</text>
-<line x1="155" y1="446" x2="1230" y2="446" class="sep"/>
-
-<!-- 10: 10.0.0.187 -->
-<text x="155" y="463" class="ip">10.0.0.187</text>
-<text x="253" y="463" class="ts">17:47</text>
-<text x="155" y="480" class="msg">Sérieux ? T'as accès aux infos du shop ?</text>
-<line x1="155" y1="489" x2="1230" y2="489" class="sep"/>
-
-<!-- 11: 192.168.100.2 -->
-<text x="155" y="506" class="ip">192.168.100.2</text>
-<text x="271" y="506" class="ts">17:47</text>
-<text x="155" y="523" class="msg">Pas accès direct mais j'ai des sources 😏</text>
-<line x1="155" y1="532" x2="1230" y2="532" class="sep"/>
-
-<!-- 12: 10.0.1.15 -->
-<text x="155" y="549" class="ip">10.0.1.15</text>
-<text x="241" y="549" class="ts">17:48</text>
-<text x="155" y="566" class="msg">Quel canal pour les annonces du shop ?</text>
-
-<!-- ══ PUB GAMBLING (droite, lumineux) ══ -->
-<!-- Fond rouge sombre -->
-<rect x="966" y="162" width="248" height="258" fill="#1a0600" stroke="#cc4400" stroke-width="2" rx="6"/>
-<!-- Header rouge vif -->
-<rect x="966" y="162" width="248" height="54" fill="#220800" rx="6"/>
-<text x="1090" y="187" fill="#ff5500" text-anchor="middle" class="sans" font-size="15" font-weight="bold">&#9824; CASINO LUCKY &#9824;</text>
-<text x="1090" y="205" fill="#882200" text-anchor="middle" class="sans" font-size="9" letter-spacing="2">OFFRE EXCLUSIVE</text>
-<line x1="966" y1="216" x2="1214" y2="216" stroke="#441400" stroke-width="1"/>
-<!-- Zone bonus -->
-<rect x="976" y="224" width="228" height="82" fill="#1e0c00" rx="4"/>
-<text x="1090" y="258" fill="#ffaa00" text-anchor="middle" class="sans" font-size="30" font-weight="bold">+200%</text>
-<text x="1090" y="278" fill="#ff8800" text-anchor="middle" class="sans" font-size="12">sur votre 1er dépôt</text>
-<text x="1090" y="295" fill="#cc5500" text-anchor="middle" class="sans" font-size="10">jusqu'&#x00E0; 500&#x20AC; offerts</text>
-<!-- 7 7 7 avec déco -->
-<text x="980" y="338" fill="#ffcc00" class="sans" font-size="26">&#9830;</text>
-<text x="1030" y="340" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1070" y="340" fill="#ffaa00" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1110" y="340" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1154" y="338" fill="#ffcc00" class="sans" font-size="26">&#9824;</text>
-<!-- CTA rouge vif -->
-<rect x="976" y="350" width="228" height="38" fill="#cc2200" rx="19"/>
-<text x="1090" y="374" fill="#ffffff" text-anchor="middle" class="sans" font-size="13" font-weight="bold">JOUER MAINTENANT &#x2192;</text>
-<!-- Disclaimer -->
-<text x="1090" y="412" fill="#441400" text-anchor="middle" class="sans" font-size="7">18+ &#x2022; Jeu responsable &#x2022; casino-lucky.bet</text>
-
-<!-- SCROLLBAR -->
-<rect x="1229" y="52" width="8" height="598" fill="#090909" stroke="#141414" stroke-width="1"/>
-<rect x="1230" y="390" width="6" height="140" fill="#1e1e1e" rx="3"/>
-
-<!-- ── ZONE DE SAISIE ── -->
-<rect x="130" y="650" width="1115" height="70" fill="#111" stroke="#1a1a1a" stroke-width="1"/>
-<rect x="178" y="661" width="927" height="47" fill="#181818" stroke="#252525" stroke-width="1" rx="23"/>
-<text x="228" y="690" fill="#333" class="sans" font-size="13">Entrez un message...</text>
-<!-- Bouton envoi -->
-<circle cx="1151" cy="684" r="21" fill="#1a2a1a" stroke="#283828" stroke-width="1"/>
-<polygon points="1143,679 1158,684 1143,689 1147,684" fill="#4a7a4a"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
+<defs>
+  <style>
+    .mono { font-family: 'Courier New', Courier, monospace; }
+    .sans { font-family: Arial, Helvetica, sans-serif; }
+    .ip   { font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: bold; fill: #7a7a7a; }
+    .ts   { font-family: 'Courier New', Courier, monospace; font-size: 10px; fill: #2e2e2e; }
+    .msg  { font-family: Arial, Helvetica, sans-serif; font-size: 13px; fill: #bababa; }
+    .sep  { stroke: #181818; stroke-width: 1; }
+  </style>
+</defs>
+
+<!-- ══ FOND ══ -->
+<rect width="1280" height="720" fill="#0d0d0d"/>
+
+<!-- ══════════════════════════════
+     BANDE PUB GAUCHE  130px
+     ══════════════════════════════ -->
+<rect x="0" y="0" width="130" height="720" fill="#111" stroke="#1a1a1a" stroke-width="1"/>
+<rect x="4" y="4" width="122" height="14" fill="#161616" rx="2"/>
+<text x="65" y="15" fill="#383838" text-anchor="middle" class="sans" font-size="8">PUBLICITÉ</text>
+
+<!-- Ad 1: NOVA STORE -->
+<rect x="4" y="22" width="122" height="188" fill="#161616" stroke="#222" rx="3"/>
+<rect x="4" y="22" width="122" height="52" fill="#1c1c1c" rx="3"/>
+<text x="65" y="44" fill="#5a5a5a" text-anchor="middle" class="sans" font-size="14" font-weight="bold">NOVA</text>
+<text x="65" y="62" fill="#484848" text-anchor="middle" class="sans" font-size="9">STORE 2026</text>
+<rect x="14" y="83" width="102" height="64" fill="#111" rx="2"/>
+<text x="65" y="118" fill="#404040" text-anchor="middle" class="sans" font-size="26">&#128722;</text>
+<text x="65" y="166" fill="#484848" text-anchor="middle" class="sans" font-size="10">DÉCOUVRIR</text>
+<text x="65" y="198" fill="#303030" text-anchor="middle" class="sans" font-size="8">nova-store.io</text>
+
+<!-- Ad 2: APEX GEAR -->
+<rect x="4" y="218" width="122" height="188" fill="#161616" stroke="#222" rx="3"/>
+<rect x="4" y="218" width="122" height="52" fill="#141e14" rx="3"/>
+<text x="65" y="240" fill="#447744" text-anchor="middle" class="sans" font-size="12" font-weight="bold">APEX GEAR</text>
+<text x="65" y="257" fill="#336633" text-anchor="middle" class="sans" font-size="9">Gaming Setup</text>
+<rect x="14" y="278" width="102" height="64" fill="#111" rx="2"/>
+<text x="65" y="313" fill="#336633" text-anchor="middle" class="sans" font-size="26">&#127918;</text>
+<text x="65" y="360" fill="#3a5a3a" text-anchor="middle" class="sans" font-size="10">ACHETER</text>
+<text x="65" y="394" fill="#2a3a2a" text-anchor="middle" class="sans" font-size="8">apex-gear.com</text>
+
+<!-- Ad 3: SHIELDVPN -->
+<rect x="4" y="414" width="122" height="188" fill="#161616" stroke="#222" rx="3"/>
+<rect x="4" y="414" width="122" height="52" fill="#14141e" rx="3"/>
+<text x="65" y="436" fill="#4455aa" text-anchor="middle" class="sans" font-size="11" font-weight="bold">SHIELDVPN</text>
+<text x="65" y="452" fill="#3a4488" text-anchor="middle" class="sans" font-size="9">Sécurité totale</text>
+<rect x="14" y="474" width="102" height="64" fill="#111" rx="2"/>
+<text x="65" y="509" fill="#3a4488" text-anchor="middle" class="sans" font-size="26">&#128274;</text>
+<text x="65" y="556" fill="#3a4488" text-anchor="middle" class="sans" font-size="10">ESSAI GRATUIT</text>
+<text x="65" y="590" fill="#2a3366" text-anchor="middle" class="sans" font-size="8">shieldvpn.net</text>
+
+<!-- ══════════════════════════════
+     TOGGLE MENU DROIT  35px
+     ══════════════════════════════ -->
+<rect x="1245" y="0" width="35" height="720" fill="#111" stroke="#1a1a1a" stroke-width="1"/>
+<line x1="1253" y1="18" x2="1272" y2="18" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"/>
+<line x1="1253" y1="26" x2="1272" y2="26" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"/>
+<line x1="1253" y1="34" x2="1272" y2="34" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"/>
+
+<!-- ══════════════════════════════
+     ZONE CHAT PRINCIPALE  1115px
+     ══════════════════════════════ -->
+<rect x="130" y="0" width="1115" height="720" fill="#0d0d0d"/>
+
+<!-- ── EN-TÊTE ── -->
+<rect x="130" y="0" width="1115" height="52" fill="#111" stroke="#1a1a1a" stroke-width="1"/>
+<text x="158" y="24" fill="#d0d0d0" class="sans" font-size="17" font-weight="bold">XIP</text>
+<text x="190" y="20" fill="#cccccc" class="sans" font-size="14" font-weight="bold">Chat</text>
+<circle cx="206" cy="36" r="5" fill="#2d4a2d"/>
+<circle cx="206" cy="36" r="3" fill="#3a8a3a"/>
+<text x="218" y="41" fill="#3a6a3a" class="sans" font-size="11">312 connectés</text>
+<rect x="1050" y="14" width="95" height="24" fill="#1a1a1a" stroke="#262626" rx="12"/>
+<text x="1097" y="30" fill="#4a4a4a" text-anchor="middle" class="sans" font-size="10"># général</text>
+<line x1="130" y1="52" x2="1245" y2="52" stroke="#1a1a1a" stroke-width="1"/>
+
+<!-- ── MESSAGES ── -->
+
+<!-- 1: 192.168.1.45 -->
+<text x="155" y="76" class="ip">192.168.1.45</text>
+<text x="277" y="76" class="ts">17:42</text>
+<text x="155" y="93" class="msg">Salut tout le monde !</text>
+<line x1="155" y1="102" x2="1230" y2="102" class="sep"/>
+
+<!-- 2: 10.0.0.187 -->
+<text x="155" y="119" class="ip">10.0.0.187</text>
+<text x="253" y="119" class="ts">17:43</text>
+<text x="155" y="136" class="msg">Vous avez vu les nouveautés du shop ce soir ?</text>
+<line x1="155" y1="145" x2="1230" y2="145" class="sep"/>
+
+<!-- 3: 172.16.254.1 -->
+<text x="155" y="162" class="ip">172.16.254.1</text>
+<text x="271" y="162" class="ts">17:43</text>
+<text x="155" y="179" class="msg">Ouais j'ai check, les prix sont vraiment corrects</text>
+<line x1="155" y1="188" x2="1230" y2="188" class="sep"/>
+
+<!-- 4: 203.0.113.42 -->
+<text x="155" y="205" class="ip">203.0.113.42</text>
+<text x="275" y="205" class="ts">17:44</text>
+<text x="155" y="222" class="msg">lol ça spam trop ce soir</text>
+<line x1="155" y1="231" x2="1230" y2="231" class="sep"/>
+
+<!-- 5: 10.10.10.99 -->
+<text x="155" y="248" class="ip">10.10.10.99</text>
+<text x="255" y="248" class="ts">17:44</text>
+<text x="155" y="265" class="msg">@203.0.113.42 t'as raison mais c'est le fun quand même</text>
+<line x1="155" y1="274" x2="1230" y2="274" class="sep"/>
+
+<!-- 6: 192.168.1.1 -->
+<text x="155" y="291" class="ip">192.168.1.1</text>
+<text x="252" y="291" class="ts">17:45</text>
+<text x="155" y="308" class="msg">Le chat est bien actif ce soir, j'aime ça</text>
+<line x1="155" y1="317" x2="1230" y2="317" class="sep"/>
+
+<!-- 7: 10.0.0.253 -->
+<text x="155" y="334" class="ip">10.0.0.253</text>
+<text x="252" y="334" class="ts">17:45</text>
+<text x="155" y="351" class="msg">Quelqu'un sait comment configurer le stream ?</text>
+<line x1="155" y1="360" x2="1230" y2="360" class="sep"/>
+
+<!-- 8: 192.168.1.45 (réponse) -->
+<text x="155" y="377" class="ip">192.168.1.45</text>
+<text x="277" y="377" class="ts">17:46</text>
+<text x="155" y="394" class="msg">Vérife dans Paramètres &#x2192; onglet Diffusion</text>
+<line x1="155" y1="403" x2="1230" y2="403" class="sep"/>
+
+<!-- 9: 172.31.0.5 -->
+<text x="155" y="420" class="ip">172.31.0.5</text>
+<text x="247" y="420" class="ts">17:46</text>
+<text x="155" y="437" class="msg">Le drop de demain va être chaud, j'ai les infos du shop</text>
+<line x1="155" y1="446" x2="1230" y2="446" class="sep"/>
+
+<!-- 10: 10.0.0.187 -->
+<text x="155" y="463" class="ip">10.0.0.187</text>
+<text x="253" y="463" class="ts">17:47</text>
+<text x="155" y="480" class="msg">Sérieux ? T'as accès aux infos du shop ?</text>
+<line x1="155" y1="489" x2="1230" y2="489" class="sep"/>
+
+<!-- 11: 192.168.100.2 -->
+<text x="155" y="506" class="ip">192.168.100.2</text>
+<text x="271" y="506" class="ts">17:47</text>
+<text x="155" y="523" class="msg">Pas accès direct mais j'ai des sources 😏</text>
+<line x1="155" y1="532" x2="1230" y2="532" class="sep"/>
+
+<!-- 12: 10.0.1.15 -->
+<text x="155" y="549" class="ip">10.0.1.15</text>
+<text x="241" y="549" class="ts">17:48</text>
+<text x="155" y="566" class="msg">Quel canal pour les annonces du shop ?</text>
+
+<!-- ══ PUB GAMBLING (droite, lumineux) ══ -->
+<!-- Fond rouge sombre -->
+<rect x="966" y="162" width="248" height="258" fill="#1a0600" stroke="#cc4400" stroke-width="2" rx="6"/>
+<!-- Header rouge vif -->
+<rect x="966" y="162" width="248" height="54" fill="#220800" rx="6"/>
+<text x="1090" y="187" fill="#ff5500" text-anchor="middle" class="sans" font-size="15" font-weight="bold">&#9824; CASINO LUCKY &#9824;</text>
+<text x="1090" y="205" fill="#882200" text-anchor="middle" class="sans" font-size="9" letter-spacing="2">OFFRE EXCLUSIVE</text>
+<line x1="966" y1="216" x2="1214" y2="216" stroke="#441400" stroke-width="1"/>
+<!-- Zone bonus -->
+<rect x="976" y="224" width="228" height="82" fill="#1e0c00" rx="4"/>
+<text x="1090" y="258" fill="#ffaa00" text-anchor="middle" class="sans" font-size="30" font-weight="bold">+200%</text>
+<text x="1090" y="278" fill="#ff8800" text-anchor="middle" class="sans" font-size="12">sur votre 1er dépôt</text>
+<text x="1090" y="295" fill="#cc5500" text-anchor="middle" class="sans" font-size="10">jusqu'&#x00E0; 500&#x20AC; offerts</text>
+<!-- 7 7 7 avec déco -->
+<text x="980" y="338" fill="#ffcc00" class="sans" font-size="26">&#9830;</text>
+<text x="1030" y="340" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1070" y="340" fill="#ffaa00" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1110" y="340" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1154" y="338" fill="#ffcc00" class="sans" font-size="26">&#9824;</text>
+<!-- CTA rouge vif -->
+<rect x="976" y="350" width="228" height="38" fill="#cc2200" rx="19"/>
+<text x="1090" y="374" fill="#ffffff" text-anchor="middle" class="sans" font-size="13" font-weight="bold">JOUER MAINTENANT &#x2192;</text>
+<!-- Disclaimer -->
+<text x="1090" y="412" fill="#441400" text-anchor="middle" class="sans" font-size="7">18+ &#x2022; Jeu responsable &#x2022; casino-lucky.bet</text>
+
+<!-- SCROLLBAR -->
+<rect x="1229" y="52" width="8" height="598" fill="#090909" stroke="#141414" stroke-width="1"/>
+<rect x="1230" y="390" width="6" height="140" fill="#1e1e1e" rx="3"/>
+
+<!-- ── ZONE DE SAISIE ── -->
+<rect x="130" y="650" width="1115" height="70" fill="#111" stroke="#1a1a1a" stroke-width="1"/>
+<rect x="178" y="661" width="927" height="47" fill="#181818" stroke="#252525" stroke-width="1" rx="23"/>
+<text x="228" y="690" fill="#333" class="sans" font-size="13">Entrez un message...</text>
+<!-- Bouton envoi -->
+<circle cx="1151" cy="684" r="21" fill="#1a2a1a" stroke="#283828" stroke-width="1"/>
+<polygon points="1143,679 1158,684 1143,689 1147,684" fill="#4a7a4a"/>
+</svg>
diff --git a/maquettes/chat/v3.svg b/maquettes/chat/v3.svg
index 57ca7d5..f3c8022 100644
--- a/maquettes/chat/v3.svg
+++ b/maquettes/chat/v3.svg
@@ -1,239 +1,239 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
-<defs>
-  <style>
-    .mono { font-family: 'Courier New', Courier, monospace; }
-    .sans { font-family: Arial, Helvetica, sans-serif; }
-    .msg  { font-family: Arial, Helvetica, sans-serif; font-size: 13px; fill: #c0c0c0; }
-    .ts   { font-family: 'Courier New', Courier, monospace; font-size: 10px; fill: #303030; }
-  </style>
-  <!-- Filtres de glow colorés -->
-  <filter id="blur-cyan" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="4"/>
-  </filter>
-  <filter id="blur-magenta" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="4"/>
-  </filter>
-  <filter id="blur-green" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="4"/>
-  </filter>
-  <filter id="blur-orange" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="3"/>
-  </filter>
-  <filter id="blur-title" x="-20%" y="-20%" width="140%" height="140%">
-    <feGaussianBlur stdDeviation="6"/>
-  </filter>
-</defs>
-
-<!-- ══ FOND ══ -->
-<rect width="1280" height="720" fill="#080808"/>
-<!-- Légère teinte violacée en fond -->
-<rect width="1280" height="720" fill="url(#bg-grad)" opacity="0.4"/>
-<defs>
-  <linearGradient id="bg-grad" x1="0" y1="0" x2="1" y2="1">
-    <stop offset="0%" stop-color="#0a0a14"/>
-    <stop offset="100%" stop-color="#0a080e"/>
-  </linearGradient>
-</defs>
-
-<!-- ══════════════════════════════
-     BANDE PUB GAUCHE
-     ══════════════════════════════ -->
-<rect x="0" y="0" width="130" height="720" fill="#0c0c10" stroke="#1a1a22" stroke-width="1"/>
-<text x="65" y="14" fill="#2a2a38" text-anchor="middle" class="sans" font-size="8">PUBLICITÉ</text>
-
-<!-- Ad 1 -->
-<rect x="4" y="20" width="122" height="188" fill="#121218" stroke="#1e1e2a" rx="3"/>
-<rect x="4" y="20" width="122" height="52" fill="#161620" rx="3"/>
-<text x="65" y="42" fill="#4444aa" text-anchor="middle" class="sans" font-size="13" font-weight="bold" filter="url(#blur-cyan)" opacity="0.5">NOVA</text>
-<text x="65" y="42" fill="#5555cc" text-anchor="middle" class="sans" font-size="13" font-weight="bold">NOVA</text>
-<text x="65" y="59" fill="#383870" text-anchor="middle" class="sans" font-size="9">STORE 2026</text>
-<rect x="14" y="80" width="102" height="62" fill="#0e0e16" rx="2"/>
-<text x="65" y="115" fill="#3a3a88" text-anchor="middle" class="sans" font-size="24">&#128722;</text>
-<text x="65" y="163" fill="#3a3a88" text-anchor="middle" class="sans" font-size="10">DÉCOUVRIR</text>
-<text x="65" y="196" fill="#282840" text-anchor="middle" class="sans" font-size="8">nova-store.io</text>
-
-<!-- Ad 2 -->
-<rect x="4" y="216" width="122" height="188" fill="#121218" stroke="#1e1e2a" rx="3"/>
-<rect x="4" y="216" width="122" height="52" fill="#101614" rx="3"/>
-<text x="65" y="238" fill="#225533" text-anchor="middle" class="sans" font-size="11" font-weight="bold" filter="url(#blur-green)" opacity="0.5">APEX GEAR</text>
-<text x="65" y="238" fill="#33aa55" text-anchor="middle" class="sans" font-size="11" font-weight="bold">APEX GEAR</text>
-<text x="65" y="254" fill="#225533" text-anchor="middle" class="sans" font-size="9">Gaming Setup</text>
-<rect x="14" y="276" width="102" height="62" fill="#0e160e" rx="2"/>
-<text x="65" y="311" fill="#33aa55" text-anchor="middle" class="sans" font-size="24">&#127918;</text>
-<text x="65" y="358" fill="#33aa55" text-anchor="middle" class="sans" font-size="10">ACHETER</text>
-<text x="65" y="392" fill="#225533" text-anchor="middle" class="sans" font-size="8">apex-gear.com</text>
-
-<!-- Ad 3 -->
-<rect x="4" y="412" width="122" height="188" fill="#121218" stroke="#1e1e2a" rx="3"/>
-<rect x="4" y="412" width="122" height="52" fill="#16101a" rx="3"/>
-<text x="65" y="434" fill="#6622aa" text-anchor="middle" class="sans" font-size="11" font-weight="bold" filter="url(#blur-magenta)" opacity="0.5">SHIELDVPN</text>
-<text x="65" y="434" fill="#9944dd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">SHIELDVPN</text>
-<text x="65" y="450" fill="#552288" text-anchor="middle" class="sans" font-size="9">Sécurité totale</text>
-<rect x="14" y="472" width="102" height="62" fill="#110e16" rx="2"/>
-<text x="65" y="507" fill="#9944dd" text-anchor="middle" class="sans" font-size="24">&#128274;</text>
-<text x="65" y="554" fill="#9944dd" text-anchor="middle" class="sans" font-size="10">ESSAI GRATUIT</text>
-<text x="65" y="588" fill="#441877" text-anchor="middle" class="sans" font-size="8">shieldvpn.net</text>
-
-<!-- ══════════════════════════════
-     TOGGLE MENU DROIT
-     ══════════════════════════════ -->
-<rect x="1245" y="0" width="35" height="720" fill="#0c0c10" stroke="#1a1a22" stroke-width="1"/>
-<line x1="1253" y1="18" x2="1272" y2="18" stroke="#3a3a55" stroke-width="2" stroke-linecap="round"/>
-<line x1="1253" y1="26" x2="1272" y2="26" stroke="#3a3a55" stroke-width="2" stroke-linecap="round"/>
-<line x1="1253" y1="34" x2="1272" y2="34" stroke="#3a3a55" stroke-width="2" stroke-linecap="round"/>
-
-<!-- ══════════════════════════════
-     ZONE CHAT
-     ══════════════════════════════ -->
-<rect x="130" y="0" width="1115" height="720" fill="#090910"/>
-
-<!-- ── EN-TÊTE ── -->
-<rect x="130" y="0" width="1115" height="52" fill="#0e0e16" stroke="#1a1a26" stroke-width="1"/>
-<!-- Titre avec glow -->
-<text x="158" y="26" fill="#00ccff" class="sans" font-size="18" font-weight="bold" filter="url(#blur-cyan)" opacity="0.7">XIP</text>
-<text x="158" y="26" fill="#00eeff" class="sans" font-size="18" font-weight="bold">XIP</text>
-<text x="198" y="22" fill="#aaaacc" class="sans" font-size="14" font-weight="bold">Chat</text>
-<circle cx="214" cy="37" r="5" fill="#002200"/>
-<circle cx="214" cy="37" r="3" fill="#00ff44" filter="url(#blur-green)" opacity="0.9"/>
-<circle cx="214" cy="37" r="2" fill="#00ff88"/>
-<text x="226" y="42" fill="#33ff66" class="sans" font-size="11">312 connectés</text>
-<rect x="1050" y="14" width="95" height="24" fill="#131320" stroke="#222233" rx="12"/>
-<text x="1097" y="30" fill="#5555aa" text-anchor="middle" class="sans" font-size="10"># général</text>
-<line x1="130" y1="52" x2="1245" y2="52" stroke="#1a1a2a" stroke-width="1"/>
-
-<!-- ── MESSAGES ── -->
-
-<!-- 1: 192.168.1.45 (gris normal) -->
-<text x="155" y="76" fill="#666688" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
-<text x="277" y="76" class="ts">17:42</text>
-<text x="155" y="93" class="msg">Salut tout le monde !</text>
-<line x1="155" y1="102" x2="1230" y2="102" stroke="#141420" stroke-width="1"/>
-
-<!-- 2: 172.16.254.1 (CYAN) -->
-<text x="155" y="119" fill="#00aacc" class="mono" font-size="12" font-weight="bold" filter="url(#blur-cyan)" opacity="0.7">172.16.254.1</text>
-<text x="155" y="119" fill="#00ddff" class="mono" font-size="12" font-weight="bold">172.16.254.1</text>
-<text x="271" y="119" class="ts">17:43</text>
-<text x="155" y="136" class="msg">Vous avez vu les nouvelles du shop ce soir ?</text>
-<line x1="155" y1="145" x2="1230" y2="145" stroke="#141420" stroke-width="1"/>
-
-<!-- 3: 10.0.0.187 (gris normal) -->
-<text x="155" y="162" fill="#666688" class="mono" font-size="12" font-weight="bold">10.0.0.187</text>
-<text x="253" y="162" class="ts">17:43</text>
-<text x="155" y="179" class="msg">Ouais j'ai check, les prix sont vraiment corrects</text>
-<line x1="155" y1="188" x2="1230" y2="188" stroke="#141420" stroke-width="1"/>
-
-<!-- 4: 203.0.113.42 (ORANGE) -->
-<text x="155" y="205" fill="#cc5500" class="mono" font-size="12" font-weight="bold" filter="url(#blur-orange)" opacity="0.8">203.0.113.42</text>
-<text x="155" y="205" fill="#ff8844" class="mono" font-size="12" font-weight="bold">203.0.113.42</text>
-<text x="275" y="205" class="ts">17:44</text>
-<text x="155" y="222" class="msg">lol ça spam trop ce soir</text>
-<line x1="155" y1="231" x2="1230" y2="231" stroke="#141420" stroke-width="1"/>
-
-<!-- 5: 10.10.10.99 (MAGENTA) -->
-<text x="155" y="248" fill="#aa0088" class="mono" font-size="12" font-weight="bold" filter="url(#blur-magenta)" opacity="0.8">10.10.10.99</text>
-<text x="155" y="248" fill="#ff00cc" class="mono" font-size="12" font-weight="bold">10.10.10.99</text>
-<text x="255" y="248" class="ts">17:44</text>
-<text x="155" y="265" class="msg">@203.0.113.42 t'as raison mais c'est le fun quand même</text>
-<line x1="155" y1="274" x2="1230" y2="274" stroke="#141420" stroke-width="1"/>
-
-<!-- 6: 192.168.1.1 (gris) -->
-<text x="155" y="291" fill="#666688" class="mono" font-size="12" font-weight="bold">192.168.1.1</text>
-<text x="252" y="291" class="ts">17:45</text>
-<text x="155" y="308" class="msg">Le chat est bien actif ce soir, j'aime ça</text>
-<line x1="155" y1="317" x2="1230" y2="317" stroke="#141420" stroke-width="1"/>
-
-<!-- 7: 172.31.0.5 (VERT) -->
-<text x="155" y="334" fill="#008844" class="mono" font-size="12" font-weight="bold" filter="url(#blur-green)" opacity="0.8">172.31.0.5</text>
-<text x="155" y="334" fill="#00ee77" class="mono" font-size="12" font-weight="bold">172.31.0.5</text>
-<text x="247" y="334" class="ts">17:45</text>
-<text x="155" y="351" class="msg">Le drop de demain va être chaud 🔥 j'ai les infos du shop</text>
-<line x1="155" y1="360" x2="1230" y2="360" stroke="#141420" stroke-width="1"/>
-
-<!-- 8: 10.0.0.253 (gris) -->
-<text x="155" y="377" fill="#666688" class="mono" font-size="12" font-weight="bold">10.0.0.253</text>
-<text x="252" y="377" class="ts">17:46</text>
-<text x="155" y="394" class="msg">Quelqu'un sait configurer le stream ?</text>
-<line x1="155" y1="403" x2="1230" y2="403" stroke="#141420" stroke-width="1"/>
-
-<!-- 9: 192.168.1.45 (gris) -->
-<text x="155" y="420" fill="#666688" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
-<text x="277" y="420" class="ts">17:46</text>
-<text x="155" y="437" class="msg">Vérife dans Paramètres &#x2192; onglet Diffusion</text>
-<line x1="155" y1="446" x2="1230" y2="446" stroke="#141420" stroke-width="1"/>
-
-<!-- 10: 172.16.254.1 (CYAN again) -->
-<text x="155" y="463" fill="#00aacc" class="mono" font-size="12" font-weight="bold" filter="url(#blur-cyan)" opacity="0.6">172.16.254.1</text>
-<text x="155" y="463" fill="#00ddff" class="mono" font-size="12" font-weight="bold">172.16.254.1</text>
-<text x="271" y="463" class="ts">17:47</text>
-<text x="155" y="480" class="msg">Sérieux ? T'as accès aux infos du shop ?</text>
-<line x1="155" y1="489" x2="1230" y2="489" stroke="#141420" stroke-width="1"/>
-
-<!-- 11: 10.10.10.99 (MAGENTA) -->
-<text x="155" y="506" fill="#aa0088" class="mono" font-size="12" font-weight="bold" filter="url(#blur-magenta)" opacity="0.7">10.10.10.99</text>
-<text x="155" y="506" fill="#ff00cc" class="mono" font-size="12" font-weight="bold">10.10.10.99</text>
-<text x="255" y="506" class="ts">17:47</text>
-<text x="155" y="523" class="msg">Pas accès direct mais j'ai des sources 😏</text>
-<line x1="155" y1="532" x2="1230" y2="532" stroke="#141420" stroke-width="1"/>
-
-<!-- 12: 203.0.113.42 (ORANGE) -->
-<text x="155" y="549" fill="#cc5500" class="mono" font-size="12" font-weight="bold" filter="url(#blur-orange)" opacity="0.7">203.0.113.42</text>
-<text x="155" y="549" fill="#ff8844" class="mono" font-size="12" font-weight="bold">203.0.113.42</text>
-<text x="275" y="549" class="ts">17:48</text>
-<text x="155" y="566" class="msg">Quel canal pour les annonces du shop ?</text>
-
-<!-- ══ PUB GAMBLING NÉON (droite, lumineux) ══ -->
-<defs>
-  <filter id="glow-rb" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="5"/>
-  </filter>
-  <filter id="glow-gd" x="-40%" y="-40%" width="180%" height="180%">
-    <feGaussianBlur stdDeviation="5"/>
-  </filter>
-</defs>
-<!-- Fond + bordure néon rouge -->
-<rect x="966" y="162" width="248" height="258" fill="#100400"/>
-<rect x="966" y="162" width="248" height="258" fill="none" stroke="#ff2200" stroke-width="3" rx="6" filter="url(#glow-rb)" opacity="0.9"/>
-<rect x="966" y="162" width="248" height="258" fill="none" stroke="#ff4422" stroke-width="1.5" rx="6"/>
-<!-- Header rouge -->
-<rect x="966" y="162" width="248" height="54" fill="#1a0400" rx="6"/>
-<text x="1090" y="186" fill="#aa2200" text-anchor="middle" class="sans" font-size="15" font-weight="bold" filter="url(#glow-rb)" opacity="0.9">&#9824; CASINO LUCKY &#9824;</text>
-<text x="1090" y="186" fill="#ff5533" text-anchor="middle" class="sans" font-size="15" font-weight="bold">&#9824; CASINO LUCKY &#9824;</text>
-<text x="1090" y="204" fill="#882200" text-anchor="middle" class="sans" font-size="9" letter-spacing="2">OFFRE EXCLUSIVE</text>
-<line x1="966" y1="216" x2="1214" y2="216" stroke="#440000" stroke-width="1"/>
-<!-- +200% or néon -->
-<text x="1090" y="262" fill="#996600" text-anchor="middle" class="sans" font-size="32" font-weight="bold" filter="url(#glow-gd)" opacity="0.9">+200%</text>
-<text x="1090" y="262" fill="#ffdd00" text-anchor="middle" class="sans" font-size="32" font-weight="bold">+200%</text>
-<text x="1090" y="282" fill="#cc6600" text-anchor="middle" class="sans" font-size="11">sur votre 1er dépôt &#x2022; 500&#x20AC; max</text>
-<!-- 7 7 7 néon -->
-<text x="980" y="336" fill="#ff8800" class="sans" font-size="26" filter="url(#glow-rb)" opacity="0.6">&#9830;</text>
-<text x="980" y="336" fill="#ffaa44" class="sans" font-size="26">&#9830;</text>
-<text x="1030" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gd)" opacity="0.6">7</text>
-<text x="1030" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1070" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gd)" opacity="0.6">7</text>
-<text x="1070" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1110" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gd)" opacity="0.6">7</text>
-<text x="1110" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
-<text x="1156" y="336" fill="#ff8800" class="sans" font-size="26" filter="url(#glow-rb)" opacity="0.6">&#9824;</text>
-<text x="1156" y="336" fill="#ffaa44" class="sans" font-size="26">&#9824;</text>
-<!-- CTA néon rouge -->
-<rect x="976" y="349" width="228" height="38" fill="#220000" rx="19"/>
-<rect x="976" y="349" width="228" height="38" fill="none" stroke="#ff2200" stroke-width="1.5" rx="19" filter="url(#glow-rb)" opacity="0.8"/>
-<text x="1090" y="373" fill="#aa2200" text-anchor="middle" class="sans" font-size="13" font-weight="bold" filter="url(#glow-rb)" opacity="0.7">JOUER MAINTENANT &#x2192;</text>
-<text x="1090" y="373" fill="#ff4422" text-anchor="middle" class="sans" font-size="13" font-weight="bold">JOUER MAINTENANT &#x2192;</text>
-<!-- Disclaimer -->
-<text x="1090" y="411" fill="#440000" text-anchor="middle" class="sans" font-size="7">18+ &#x2022; Jeu responsable &#x2022; casino-lucky.bet</text>
-
-<!-- SCROLLBAR -->
-<rect x="1229" y="52" width="8" height="598" fill="#080810" stroke="#141420" stroke-width="1"/>
-<rect x="1230" y="390" width="6" height="140" fill="#252535" rx="3"/>
-
-<!-- ── ZONE DE SAISIE ── -->
-<rect x="130" y="650" width="1115" height="70" fill="#0e0e16" stroke="#1a1a26" stroke-width="1"/>
-<rect x="178" y="661" width="927" height="47" fill="#141420" stroke="#222234" stroke-width="1" rx="23"/>
-<text x="228" y="690" fill="#2a2a44" class="sans" font-size="13">Entrez un message...</text>
-<!-- Bouton envoi avec glow cyan -->
-<circle cx="1151" cy="684" r="21" fill="#00223a" stroke="#004466" stroke-width="1"/>
-<circle cx="1151" cy="684" r="21" fill="#004488" filter="url(#blur-cyan)" opacity="0.4"/>
-<polygon points="1143,679 1158,684 1143,689 1147,684" fill="#00ddff"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
+<defs>
+  <style>
+    .mono { font-family: 'Courier New', Courier, monospace; }
+    .sans { font-family: Arial, Helvetica, sans-serif; }
+    .msg  { font-family: Arial, Helvetica, sans-serif; font-size: 13px; fill: #c0c0c0; }
+    .ts   { font-family: 'Courier New', Courier, monospace; font-size: 10px; fill: #303030; }
+  </style>
+  <!-- Filtres de glow colorés -->
+  <filter id="blur-cyan" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="4"/>
+  </filter>
+  <filter id="blur-magenta" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="4"/>
+  </filter>
+  <filter id="blur-green" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="4"/>
+  </filter>
+  <filter id="blur-orange" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="3"/>
+  </filter>
+  <filter id="blur-title" x="-20%" y="-20%" width="140%" height="140%">
+    <feGaussianBlur stdDeviation="6"/>
+  </filter>
+</defs>
+
+<!-- ══ FOND ══ -->
+<rect width="1280" height="720" fill="#080808"/>
+<!-- Légère teinte violacée en fond -->
+<rect width="1280" height="720" fill="url(#bg-grad)" opacity="0.4"/>
+<defs>
+  <linearGradient id="bg-grad" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0%" stop-color="#0a0a14"/>
+    <stop offset="100%" stop-color="#0a080e"/>
+  </linearGradient>
+</defs>
+
+<!-- ══════════════════════════════
+     BANDE PUB GAUCHE
+     ══════════════════════════════ -->
+<rect x="0" y="0" width="130" height="720" fill="#0c0c10" stroke="#1a1a22" stroke-width="1"/>
+<text x="65" y="14" fill="#2a2a38" text-anchor="middle" class="sans" font-size="8">PUBLICITÉ</text>
+
+<!-- Ad 1 -->
+<rect x="4" y="20" width="122" height="188" fill="#121218" stroke="#1e1e2a" rx="3"/>
+<rect x="4" y="20" width="122" height="52" fill="#161620" rx="3"/>
+<text x="65" y="42" fill="#4444aa" text-anchor="middle" class="sans" font-size="13" font-weight="bold" filter="url(#blur-cyan)" opacity="0.5">NOVA</text>
+<text x="65" y="42" fill="#5555cc" text-anchor="middle" class="sans" font-size="13" font-weight="bold">NOVA</text>
+<text x="65" y="59" fill="#383870" text-anchor="middle" class="sans" font-size="9">STORE 2026</text>
+<rect x="14" y="80" width="102" height="62" fill="#0e0e16" rx="2"/>
+<text x="65" y="115" fill="#3a3a88" text-anchor="middle" class="sans" font-size="24">&#128722;</text>
+<text x="65" y="163" fill="#3a3a88" text-anchor="middle" class="sans" font-size="10">DÉCOUVRIR</text>
+<text x="65" y="196" fill="#282840" text-anchor="middle" class="sans" font-size="8">nova-store.io</text>
+
+<!-- Ad 2 -->
+<rect x="4" y="216" width="122" height="188" fill="#121218" stroke="#1e1e2a" rx="3"/>
+<rect x="4" y="216" width="122" height="52" fill="#101614" rx="3"/>
+<text x="65" y="238" fill="#225533" text-anchor="middle" class="sans" font-size="11" font-weight="bold" filter="url(#blur-green)" opacity="0.5">APEX GEAR</text>
+<text x="65" y="238" fill="#33aa55" text-anchor="middle" class="sans" font-size="11" font-weight="bold">APEX GEAR</text>
+<text x="65" y="254" fill="#225533" text-anchor="middle" class="sans" font-size="9">Gaming Setup</text>
+<rect x="14" y="276" width="102" height="62" fill="#0e160e" rx="2"/>
+<text x="65" y="311" fill="#33aa55" text-anchor="middle" class="sans" font-size="24">&#127918;</text>
+<text x="65" y="358" fill="#33aa55" text-anchor="middle" class="sans" font-size="10">ACHETER</text>
+<text x="65" y="392" fill="#225533" text-anchor="middle" class="sans" font-size="8">apex-gear.com</text>
+
+<!-- Ad 3 -->
+<rect x="4" y="412" width="122" height="188" fill="#121218" stroke="#1e1e2a" rx="3"/>
+<rect x="4" y="412" width="122" height="52" fill="#16101a" rx="3"/>
+<text x="65" y="434" fill="#6622aa" text-anchor="middle" class="sans" font-size="11" font-weight="bold" filter="url(#blur-magenta)" opacity="0.5">SHIELDVPN</text>
+<text x="65" y="434" fill="#9944dd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">SHIELDVPN</text>
+<text x="65" y="450" fill="#552288" text-anchor="middle" class="sans" font-size="9">Sécurité totale</text>
+<rect x="14" y="472" width="102" height="62" fill="#110e16" rx="2"/>
+<text x="65" y="507" fill="#9944dd" text-anchor="middle" class="sans" font-size="24">&#128274;</text>
+<text x="65" y="554" fill="#9944dd" text-anchor="middle" class="sans" font-size="10">ESSAI GRATUIT</text>
+<text x="65" y="588" fill="#441877" text-anchor="middle" class="sans" font-size="8">shieldvpn.net</text>
+
+<!-- ══════════════════════════════
+     TOGGLE MENU DROIT
+     ══════════════════════════════ -->
+<rect x="1245" y="0" width="35" height="720" fill="#0c0c10" stroke="#1a1a22" stroke-width="1"/>
+<line x1="1253" y1="18" x2="1272" y2="18" stroke="#3a3a55" stroke-width="2" stroke-linecap="round"/>
+<line x1="1253" y1="26" x2="1272" y2="26" stroke="#3a3a55" stroke-width="2" stroke-linecap="round"/>
+<line x1="1253" y1="34" x2="1272" y2="34" stroke="#3a3a55" stroke-width="2" stroke-linecap="round"/>
+
+<!-- ══════════════════════════════
+     ZONE CHAT
+     ══════════════════════════════ -->
+<rect x="130" y="0" width="1115" height="720" fill="#090910"/>
+
+<!-- ── EN-TÊTE ── -->
+<rect x="130" y="0" width="1115" height="52" fill="#0e0e16" stroke="#1a1a26" stroke-width="1"/>
+<!-- Titre avec glow -->
+<text x="158" y="26" fill="#00ccff" class="sans" font-size="18" font-weight="bold" filter="url(#blur-cyan)" opacity="0.7">XIP</text>
+<text x="158" y="26" fill="#00eeff" class="sans" font-size="18" font-weight="bold">XIP</text>
+<text x="198" y="22" fill="#aaaacc" class="sans" font-size="14" font-weight="bold">Chat</text>
+<circle cx="214" cy="37" r="5" fill="#002200"/>
+<circle cx="214" cy="37" r="3" fill="#00ff44" filter="url(#blur-green)" opacity="0.9"/>
+<circle cx="214" cy="37" r="2" fill="#00ff88"/>
+<text x="226" y="42" fill="#33ff66" class="sans" font-size="11">312 connectés</text>
+<rect x="1050" y="14" width="95" height="24" fill="#131320" stroke="#222233" rx="12"/>
+<text x="1097" y="30" fill="#5555aa" text-anchor="middle" class="sans" font-size="10"># général</text>
+<line x1="130" y1="52" x2="1245" y2="52" stroke="#1a1a2a" stroke-width="1"/>
+
+<!-- ── MESSAGES ── -->
+
+<!-- 1: 192.168.1.45 (gris normal) -->
+<text x="155" y="76" fill="#666688" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
+<text x="277" y="76" class="ts">17:42</text>
+<text x="155" y="93" class="msg">Salut tout le monde !</text>
+<line x1="155" y1="102" x2="1230" y2="102" stroke="#141420" stroke-width="1"/>
+
+<!-- 2: 172.16.254.1 (CYAN) -->
+<text x="155" y="119" fill="#00aacc" class="mono" font-size="12" font-weight="bold" filter="url(#blur-cyan)" opacity="0.7">172.16.254.1</text>
+<text x="155" y="119" fill="#00ddff" class="mono" font-size="12" font-weight="bold">172.16.254.1</text>
+<text x="271" y="119" class="ts">17:43</text>
+<text x="155" y="136" class="msg">Vous avez vu les nouvelles du shop ce soir ?</text>
+<line x1="155" y1="145" x2="1230" y2="145" stroke="#141420" stroke-width="1"/>
+
+<!-- 3: 10.0.0.187 (gris normal) -->
+<text x="155" y="162" fill="#666688" class="mono" font-size="12" font-weight="bold">10.0.0.187</text>
+<text x="253" y="162" class="ts">17:43</text>
+<text x="155" y="179" class="msg">Ouais j'ai check, les prix sont vraiment corrects</text>
+<line x1="155" y1="188" x2="1230" y2="188" stroke="#141420" stroke-width="1"/>
+
+<!-- 4: 203.0.113.42 (ORANGE) -->
+<text x="155" y="205" fill="#cc5500" class="mono" font-size="12" font-weight="bold" filter="url(#blur-orange)" opacity="0.8">203.0.113.42</text>
+<text x="155" y="205" fill="#ff8844" class="mono" font-size="12" font-weight="bold">203.0.113.42</text>
+<text x="275" y="205" class="ts">17:44</text>
+<text x="155" y="222" class="msg">lol ça spam trop ce soir</text>
+<line x1="155" y1="231" x2="1230" y2="231" stroke="#141420" stroke-width="1"/>
+
+<!-- 5: 10.10.10.99 (MAGENTA) -->
+<text x="155" y="248" fill="#aa0088" class="mono" font-size="12" font-weight="bold" filter="url(#blur-magenta)" opacity="0.8">10.10.10.99</text>
+<text x="155" y="248" fill="#ff00cc" class="mono" font-size="12" font-weight="bold">10.10.10.99</text>
+<text x="255" y="248" class="ts">17:44</text>
+<text x="155" y="265" class="msg">@203.0.113.42 t'as raison mais c'est le fun quand même</text>
+<line x1="155" y1="274" x2="1230" y2="274" stroke="#141420" stroke-width="1"/>
+
+<!-- 6: 192.168.1.1 (gris) -->
+<text x="155" y="291" fill="#666688" class="mono" font-size="12" font-weight="bold">192.168.1.1</text>
+<text x="252" y="291" class="ts">17:45</text>
+<text x="155" y="308" class="msg">Le chat est bien actif ce soir, j'aime ça</text>
+<line x1="155" y1="317" x2="1230" y2="317" stroke="#141420" stroke-width="1"/>
+
+<!-- 7: 172.31.0.5 (VERT) -->
+<text x="155" y="334" fill="#008844" class="mono" font-size="12" font-weight="bold" filter="url(#blur-green)" opacity="0.8">172.31.0.5</text>
+<text x="155" y="334" fill="#00ee77" class="mono" font-size="12" font-weight="bold">172.31.0.5</text>
+<text x="247" y="334" class="ts">17:45</text>
+<text x="155" y="351" class="msg">Le drop de demain va être chaud 🔥 j'ai les infos du shop</text>
+<line x1="155" y1="360" x2="1230" y2="360" stroke="#141420" stroke-width="1"/>
+
+<!-- 8: 10.0.0.253 (gris) -->
+<text x="155" y="377" fill="#666688" class="mono" font-size="12" font-weight="bold">10.0.0.253</text>
+<text x="252" y="377" class="ts">17:46</text>
+<text x="155" y="394" class="msg">Quelqu'un sait configurer le stream ?</text>
+<line x1="155" y1="403" x2="1230" y2="403" stroke="#141420" stroke-width="1"/>
+
+<!-- 9: 192.168.1.45 (gris) -->
+<text x="155" y="420" fill="#666688" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
+<text x="277" y="420" class="ts">17:46</text>
+<text x="155" y="437" class="msg">Vérife dans Paramètres &#x2192; onglet Diffusion</text>
+<line x1="155" y1="446" x2="1230" y2="446" stroke="#141420" stroke-width="1"/>
+
+<!-- 10: 172.16.254.1 (CYAN again) -->
+<text x="155" y="463" fill="#00aacc" class="mono" font-size="12" font-weight="bold" filter="url(#blur-cyan)" opacity="0.6">172.16.254.1</text>
+<text x="155" y="463" fill="#00ddff" class="mono" font-size="12" font-weight="bold">172.16.254.1</text>
+<text x="271" y="463" class="ts">17:47</text>
+<text x="155" y="480" class="msg">Sérieux ? T'as accès aux infos du shop ?</text>
+<line x1="155" y1="489" x2="1230" y2="489" stroke="#141420" stroke-width="1"/>
+
+<!-- 11: 10.10.10.99 (MAGENTA) -->
+<text x="155" y="506" fill="#aa0088" class="mono" font-size="12" font-weight="bold" filter="url(#blur-magenta)" opacity="0.7">10.10.10.99</text>
+<text x="155" y="506" fill="#ff00cc" class="mono" font-size="12" font-weight="bold">10.10.10.99</text>
+<text x="255" y="506" class="ts">17:47</text>
+<text x="155" y="523" class="msg">Pas accès direct mais j'ai des sources 😏</text>
+<line x1="155" y1="532" x2="1230" y2="532" stroke="#141420" stroke-width="1"/>
+
+<!-- 12: 203.0.113.42 (ORANGE) -->
+<text x="155" y="549" fill="#cc5500" class="mono" font-size="12" font-weight="bold" filter="url(#blur-orange)" opacity="0.7">203.0.113.42</text>
+<text x="155" y="549" fill="#ff8844" class="mono" font-size="12" font-weight="bold">203.0.113.42</text>
+<text x="275" y="549" class="ts">17:48</text>
+<text x="155" y="566" class="msg">Quel canal pour les annonces du shop ?</text>
+
+<!-- ══ PUB GAMBLING NÉON (droite, lumineux) ══ -->
+<defs>
+  <filter id="glow-rb" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="5"/>
+  </filter>
+  <filter id="glow-gd" x="-40%" y="-40%" width="180%" height="180%">
+    <feGaussianBlur stdDeviation="5"/>
+  </filter>
+</defs>
+<!-- Fond + bordure néon rouge -->
+<rect x="966" y="162" width="248" height="258" fill="#100400"/>
+<rect x="966" y="162" width="248" height="258" fill="none" stroke="#ff2200" stroke-width="3" rx="6" filter="url(#glow-rb)" opacity="0.9"/>
+<rect x="966" y="162" width="248" height="258" fill="none" stroke="#ff4422" stroke-width="1.5" rx="6"/>
+<!-- Header rouge -->
+<rect x="966" y="162" width="248" height="54" fill="#1a0400" rx="6"/>
+<text x="1090" y="186" fill="#aa2200" text-anchor="middle" class="sans" font-size="15" font-weight="bold" filter="url(#glow-rb)" opacity="0.9">&#9824; CASINO LUCKY &#9824;</text>
+<text x="1090" y="186" fill="#ff5533" text-anchor="middle" class="sans" font-size="15" font-weight="bold">&#9824; CASINO LUCKY &#9824;</text>
+<text x="1090" y="204" fill="#882200" text-anchor="middle" class="sans" font-size="9" letter-spacing="2">OFFRE EXCLUSIVE</text>
+<line x1="966" y1="216" x2="1214" y2="216" stroke="#440000" stroke-width="1"/>
+<!-- +200% or néon -->
+<text x="1090" y="262" fill="#996600" text-anchor="middle" class="sans" font-size="32" font-weight="bold" filter="url(#glow-gd)" opacity="0.9">+200%</text>
+<text x="1090" y="262" fill="#ffdd00" text-anchor="middle" class="sans" font-size="32" font-weight="bold">+200%</text>
+<text x="1090" y="282" fill="#cc6600" text-anchor="middle" class="sans" font-size="11">sur votre 1er dépôt &#x2022; 500&#x20AC; max</text>
+<!-- 7 7 7 néon -->
+<text x="980" y="336" fill="#ff8800" class="sans" font-size="26" filter="url(#glow-rb)" opacity="0.6">&#9830;</text>
+<text x="980" y="336" fill="#ffaa44" class="sans" font-size="26">&#9830;</text>
+<text x="1030" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gd)" opacity="0.6">7</text>
+<text x="1030" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1070" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gd)" opacity="0.6">7</text>
+<text x="1070" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1110" y="338" fill="#ffdd00" class="sans" font-size="30" font-weight="bold" filter="url(#glow-gd)" opacity="0.6">7</text>
+<text x="1110" y="338" fill="#ffffff" class="sans" font-size="30" font-weight="bold">7</text>
+<text x="1156" y="336" fill="#ff8800" class="sans" font-size="26" filter="url(#glow-rb)" opacity="0.6">&#9824;</text>
+<text x="1156" y="336" fill="#ffaa44" class="sans" font-size="26">&#9824;</text>
+<!-- CTA néon rouge -->
+<rect x="976" y="349" width="228" height="38" fill="#220000" rx="19"/>
+<rect x="976" y="349" width="228" height="38" fill="none" stroke="#ff2200" stroke-width="1.5" rx="19" filter="url(#glow-rb)" opacity="0.8"/>
+<text x="1090" y="373" fill="#aa2200" text-anchor="middle" class="sans" font-size="13" font-weight="bold" filter="url(#glow-rb)" opacity="0.7">JOUER MAINTENANT &#x2192;</text>
+<text x="1090" y="373" fill="#ff4422" text-anchor="middle" class="sans" font-size="13" font-weight="bold">JOUER MAINTENANT &#x2192;</text>
+<!-- Disclaimer -->
+<text x="1090" y="411" fill="#440000" text-anchor="middle" class="sans" font-size="7">18+ &#x2022; Jeu responsable &#x2022; casino-lucky.bet</text>
+
+<!-- SCROLLBAR -->
+<rect x="1229" y="52" width="8" height="598" fill="#080810" stroke="#141420" stroke-width="1"/>
+<rect x="1230" y="390" width="6" height="140" fill="#252535" rx="3"/>
+
+<!-- ── ZONE DE SAISIE ── -->
+<rect x="130" y="650" width="1115" height="70" fill="#0e0e16" stroke="#1a1a26" stroke-width="1"/>
+<rect x="178" y="661" width="927" height="47" fill="#141420" stroke="#222234" stroke-width="1" rx="23"/>
+<text x="228" y="690" fill="#2a2a44" class="sans" font-size="13">Entrez un message...</text>
+<!-- Bouton envoi avec glow cyan -->
+<circle cx="1151" cy="684" r="21" fill="#00223a" stroke="#004466" stroke-width="1"/>
+<circle cx="1151" cy="684" r="21" fill="#004488" filter="url(#blur-cyan)" opacity="0.4"/>
+<polygon points="1143,679 1158,684 1143,689 1147,684" fill="#00ddff"/>
+</svg>
diff --git a/maquettes/shop/shop1.svg b/maquettes/shop/shop1.svg
index be3c899..d38b225 100644
--- a/maquettes/shop/shop1.svg
+++ b/maquettes/shop/shop1.svg
@@ -1,247 +1,247 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
-<defs>
-  <style>
-    .sans { font-family: Arial, Helvetica, sans-serif; }
-    .mono { font-family: 'Courier New', Courier, monospace; }
-  </style>
-  <filter id="glow-gold"><feGaussianBlur stdDeviation="3"/></filter>
-  <filter id="glow-red"><feGaussianBlur stdDeviation="3"/></filter>
-</defs>
-
-<!-- FOND -->
-<rect width="1280" height="720" fill="#090910"/>
-
-<!-- ════════════════════ HEADER ════════════════════ -->
-<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
-<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-gold)" opacity="0.4">XIP</text>
-<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
-<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
-<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
-<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Accès · Publicité</text>
-<text x="310" y="35" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
-<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecté :</text>
-<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
-<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
-<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
-<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
-
-<!-- ════════════════════ LEFT NAV ════════════════════ -->
-<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
-<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
-
-<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATÉGORIES</text>
-
-<!-- Active item -->
-<rect x="3" y="90" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
-<rect x="3" y="90" width="3" height="36" fill="#00aaee" rx="2"/>
-<text x="20" y="113" fill="#aabbdd" class="sans" font-size="13" font-weight="bold">Tout voir</text>
-
-<text x="20" y="153" fill="#4a4a6a" class="sans" font-size="13">Publicite</text>
-<text x="20" y="188" fill="#4a4a6a" class="sans" font-size="13">Abonnements</text>
-<text x="20" y="223" fill="#4a4a6a" class="sans" font-size="13">Cosmetiques</text>
-<text x="20" y="258" fill="#cc3322" class="sans" font-size="13" font-weight="bold">Promotions</text>
-
-<line x1="10" y1="272" x2="175" y2="272" stroke="#181822" stroke-width="1"/>
-<text x="16" y="292" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
-<text x="20" y="316" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
-<text x="20" y="348" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
-
-<!-- Solde dans nav -->
-<rect x="10" y="660" width="165" height="50" fill="#111118" stroke="#1e1e28" rx="4"/>
-<text x="93" y="679" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">Votre solde</text>
-<text x="93" y="700" fill="#44aa44" text-anchor="middle" class="sans" font-size="16" font-weight="bold">24.50 €</text>
-
-<!-- ════════════════════ CONTENU PRINCIPAL ════════════════════ -->
-
-<!-- ── PROMO BANNER ── -->
-<rect x="193" y="66" width="1079" height="72" fill="#180800" stroke="#bb3300" stroke-width="1.5" rx="6"/>
-<rect x="193" y="66" width="170" height="72" fill="#220c00" rx="6"/>
-<!-- Badge flash -->
-<text x="278" y="92" fill="#ff5500" text-anchor="middle" class="sans" font-size="13" font-weight="bold">FLASH SALE</text>
-<text x="278" y="112" fill="#774400" text-anchor="middle" class="sans" font-size="9">Offre limitee 2h47</text>
-<line x1="363" y1="72" x2="363" y2="132" stroke="#331100" stroke-width="1"/>
-<!-- Texte promo -->
-<text x="380" y="90" fill="#ffcc00" class="sans" font-size="14" font-weight="bold">Pack Cosmetique — Style Dore + Pet</text>
-<text x="380" y="110" fill="#cc6600" class="sans" font-size="12">14.99 € au lieu de 17.98 € —</text>
-<text x="620" y="110" fill="#ff4444" class="sans" font-size="12" font-weight="bold">ECONOMISEZ 3 €</text>
-<text x="380" y="128" fill="#553300" class="sans" font-size="10">Achat groupe · Stock limite : 47 restants</text>
-<!-- Timer + CTA -->
-<text x="880" y="92" fill="#ff8800" class="sans" font-size="11" font-weight="bold">Expire dans</text>
-<text x="880" y="114" fill="#ffaa00" class="mono" font-size="16" font-weight="bold">02:47:33</text>
-<rect x="1000" y="78" width="262" height="36" fill="#cc3300" rx="18"/>
-<rect x="1001" y="79" width="260" height="34" fill="none" stroke="#ff6600" stroke-width="0.5" rx="18"/>
-<text x="1131" y="101" fill="#ffffff" text-anchor="middle" class="sans" font-size="12" font-weight="bold">PROFITER DE L'OFFRE</text>
-
-<!-- ── TITRE SECTION ── -->
-<text x="200" y="162" fill="#7788aa" class="sans" font-size="14" font-weight="bold">Tous les articles</text>
-<text x="1262" y="162" fill="#3a3a5a" text-anchor="end" class="sans" font-size="11">Trier : Popularite</text>
-
-<!-- ══════════ CARD 1 : CADRE DE PUB ══════════ -->
-<!-- x=193, y=172, w=532, h=236 -->
-<rect x="193" y="172" width="532" height="236" fill="#111118" stroke="#1e1e2c" rx="6"/>
-<!-- Badge promo -->
-<rect x="193" y="172" width="112" height="22" fill="#bb2200" rx="6"/>
-<text x="249" y="187" fill="#ffffff" text-anchor="middle" class="sans" font-size="9" font-weight="bold">-33%  FLASH PROMO</text>
-<!-- Image zone: mini XIP avec pub en surbrillance -->
-<rect x="203" y="198" width="198" height="200" fill="#0c0c14" stroke="#181826" rx="4"/>
-<rect x="209" y="204" width="186" height="20" fill="#131320" rx="2"/>
-<text x="302" y="218" fill="#303055" text-anchor="middle" class="sans" font-size="8">XIP Chat</text>
-<!-- Ad band highlighted -->
-<rect x="209" y="228" width="44" height="158" fill="#1a1a10" stroke="#cc8800" stroke-width="2" rx="2"/>
-<rect x="210" y="229" width="42" height="156" fill="none" stroke="#ffcc00" stroke-width="0.5" rx="1" opacity="0.5"/>
-<text x="231" y="310" fill="#cc8800" text-anchor="middle" class="sans" font-size="8" transform="rotate(-90,231,310)">VOTRE PUB ICI</text>
-<!-- Chat messages mockup -->
-<rect x="259" y="232" width="120" height="10" fill="#161622" rx="1"/>
-<rect x="259" y="247" width="88" height="8" fill="#131318" rx="1"/>
-<rect x="259" y="260" width="100" height="8" fill="#131318" rx="1"/>
-<rect x="259" y="273" width="72" height="8" fill="#131318" rx="1"/>
-<rect x="259" y="290" width="110" height="10" fill="#161622" rx="1"/>
-<rect x="259" y="305" width="80" height="8" fill="#131318" rx="1"/>
-<rect x="259" y="318" width="95" height="8" fill="#131318" rx="1"/>
-<rect x="259" y="331" width="60" height="8" fill="#131318" rx="1"/>
-<rect x="209" y="372" width="186" height="12" fill="#131320" rx="2"/>
-<text x="302" y="382" fill="#202040" text-anchor="middle" class="sans" font-size="7">[ saisie message ]</text>
-<!-- Infos card -->
-<text x="412" y="215" fill="#c8c8e0" class="sans" font-size="15" font-weight="bold">Cadre de Pub</text>
-<text x="412" y="234" fill="#505070" class="sans" font-size="11">Espace publicitaire dans la bande gauche</text>
-<text x="412" y="250" fill="#505070" class="sans" font-size="11">du chat, visible par tous les utilisateurs.</text>
-<text x="412" y="274" fill="#3a5a3a" class="sans" font-size="11">+ 1 000 impressions garanties</text>
-<text x="412" y="291" fill="#3a5a3a" class="sans" font-size="11">+ 7 jours de diffusion continue</text>
-<text x="412" y="308" fill="#3a5a3a" class="sans" font-size="11">+ Format 130x180 px · lien cliquable</text>
-<text x="412" y="328" fill="#884422" class="sans" font-size="10">/ Max. 1 cadre actif par compte</text>
-<!-- Prix barré + promo + normal -->
-<text x="412" y="355" fill="#444455" class="sans" font-size="12" text-decoration="line-through">22.50 €</text>
-<text x="460" y="355" fill="#ee3333" class="sans" font-size="11" font-weight="bold">-33%</text>
-<text x="412" y="380" fill="#ffdd00" class="sans" font-size="22" font-weight="bold">9.99 €</text>
-<text x="412" y="397" fill="#444455" class="sans" font-size="9">Prix normal : 15.00 € | Promo expire dans 2h47</text>
-<!-- Bouton acheter -->
-<rect x="542" y="358" width="170" height="34" fill="#224488" rx="17"/>
-<rect x="543" y="359" width="168" height="32" fill="none" stroke="#4466aa" stroke-width="0.5" rx="16"/>
-<text x="627" y="380" fill="#ffffff" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Acheter</text>
-
-<!-- ══════════ CARD 2 : ABONNEMENT NOADS ══════════ -->
-<!-- x=733, y=172, w=532, h=236 -->
-<rect x="733" y="172" width="532" height="236" fill="#111118" stroke="#1e1e2c" rx="6"/>
-<!-- Badge populaire -->
-<rect x="733" y="172" width="100" height="22" fill="#2244aa" rx="6"/>
-<text x="783" y="187" fill="#ffffff" text-anchor="middle" class="sans" font-size="9" font-weight="bold">POPULAIRE</text>
-<!-- Image zone: XIP sans pub -->
-<rect x="743" y="198" width="198" height="200" fill="#0c0c14" stroke="#181826" rx="4"/>
-<rect x="749" y="204" width="186" height="20" fill="#131320" rx="2"/>
-<text x="842" y="218" fill="#303055" text-anchor="middle" class="sans" font-size="8">XIP Chat — sans pubs</text>
-<!-- Ad band GRISE (aucune pub) -->
-<rect x="749" y="228" width="44" height="158" fill="#0e0e10" stroke="#222" stroke-width="1" rx="2"/>
-<line x1="749" y1="228" x2="793" y2="386" stroke="#1e1e22" stroke-width="1"/>
-<line x1="793" y1="228" x2="749" y2="386" stroke="#1e1e22" stroke-width="1"/>
-<text x="771" y="310" fill="#1e1e2a" text-anchor="middle" class="sans" font-size="7" transform="rotate(-90,771,310)">PUB MASQUEE</text>
-<!-- Chat normal -->
-<rect x="799" y="232" width="120" height="10" fill="#161622" rx="1"/>
-<rect x="799" y="247" width="88" height="8" fill="#131318" rx="1"/>
-<rect x="799" y="260" width="100" height="8" fill="#131318" rx="1"/>
-<rect x="799" y="273" width="72" height="8" fill="#131318" rx="1"/>
-<rect x="799" y="290" width="110" height="10" fill="#161622" rx="1"/>
-<rect x="799" y="305" width="80" height="8" fill="#131318" rx="1"/>
-<!-- Checkmark vert sur la bande -->
-<circle cx="771" cy="310" r="12" fill="#112211" stroke="#225522" stroke-width="1"/>
-<text x="771" y="315" fill="#33aa44" text-anchor="middle" class="sans" font-size="14" font-weight="bold">X</text>
-<!-- Infos card -->
-<text x="952" y="215" fill="#c8c8e0" class="sans" font-size="15" font-weight="bold">Abonnement NoAds</text>
-<text x="952" y="234" fill="#505070" class="sans" font-size="11">Supprimez toutes les publicites du</text>
-<text x="952" y="250" fill="#505070" class="sans" font-size="11">chat tant que l'abonnement est actif.</text>
-<text x="952" y="274" fill="#3a5a3a" class="sans" font-size="11">+ Bande gauche entierement masquee</text>
-<text x="952" y="291" fill="#3a5a3a" class="sans" font-size="11">+ Annulable a tout moment</text>
-<text x="952" y="308" fill="#3a5a3a" class="sans" font-size="11">+ -33% avec l'abonnement annuel</text>
-<text x="952" y="328" fill="#884422" class="sans" font-size="10">/ 1 abonnement actif max par compte</text>
-<!-- Prix -->
-<text x="952" y="362" fill="#8888bb" class="sans" font-size="13">a partir de</text>
-<text x="952" y="385" fill="#ffdd00" class="sans" font-size="22" font-weight="bold">4.99 €</text>
-<text x="952" y="400" fill="#444455" class="sans" font-size="9">/mois | Annuel : 39.99 € (3.33 €/mois)</text>
-<!-- Bouton -->
-<rect x="1082" y="358" width="170" height="34" fill="#224488" rx="17"/>
-<text x="1167" y="380" fill="#ffffff" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Voir les offres</text>
-
-<!-- ══════════ CARD 3 : STYLE DORE ══════════ -->
-<!-- x=193, y=416, w=532, h=234 -->
-<rect x="193" y="416" width="532" height="236" fill="#111118" stroke="#1e1e2c" rx="6"/>
-<!-- Badge limité + or -->
-<rect x="193" y="416" width="88" height="22" fill="#664400" rx="6"/>
-<text x="237" y="431" fill="#ffcc00" text-anchor="middle" class="sans" font-size="9" font-weight="bold">LIMITE 50 ex.</text>
-<!-- Image zone: nom en or -->
-<rect x="203" y="442" width="198" height="200" fill="#0c0c14" stroke="#181826" rx="4"/>
-<!-- Fond avec gradient doré subtil -->
-<rect x="209" y="448" width="186" height="186" fill="#0e0a04" rx="2"/>
-<!-- Avant/Après -->
-<text x="302" y="475" fill="#303030" text-anchor="middle" class="sans" font-size="9">AVANT</text>
-<text x="302" y="492" fill="#606080" class="mono" font-size="11" text-anchor="middle">192.168.1.45</text>
-<line x1="215" y1="506" x2="390" y2="506" stroke="#222" stroke-width="0.5"/>
-<text x="302" y="522" fill="#303030" text-anchor="middle" class="sans" font-size="9">APRES</text>
-<!-- Nom en or avec glow -->
-<text x="302" y="546" fill="#996600" text-anchor="middle" class="mono" font-size="12" font-weight="bold" filter="url(#glow-gold)" opacity="0.9">192.168.1.45</text>
-<text x="302" y="546" fill="#ffdd44" text-anchor="middle" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
-<rect x="242" y="555" width="120" height="16" fill="#1a1400" stroke="#443300" rx="2"/>
-<text x="302" y="567" fill="#886600" text-anchor="middle" class="sans" font-size="8">Style Dore actif</text>
-<!-- Couronne decorative -->
-<text x="302" y="610" fill="#886600" text-anchor="middle" class="sans" font-size="28">&#9818;</text>
-<text x="302" y="630" fill="#553300" text-anchor="middle" class="sans" font-size="8">decoration du nom</text>
-<!-- Infos card -->
-<text x="412" y="458" fill="#c8c8e0" class="sans" font-size="15" font-weight="bold">Style Dore</text>
-<text x="412" y="477" fill="#505070" class="sans" font-size="11">Votre adresse IP s'affiche en doree</text>
-<text x="412" y="493" fill="#505070" class="sans" font-size="11">avec un effet lumineux dans le chat.</text>
-<text x="412" y="517" fill="#3a5a3a" class="sans" font-size="11">+ Nom en couleur or avec lueur</text>
-<text x="412" y="534" fill="#3a5a3a" class="sans" font-size="11">+ Visible par tous dans le chat</text>
-<text x="412" y="551" fill="#3a5a3a" class="sans" font-size="11">+ Permanant (non expirant)</text>
-<text x="412" y="571" fill="#884422" class="sans" font-size="10">/ 1 style actif a la fois · non remboursable</text>
-<text x="412" y="585" fill="#884422" class="sans" font-size="10">/ Stock limite : 50 exemplaires disponibles</text>
-<!-- Prix -->
-<text x="412" y="615" fill="#ffdd00" class="sans" font-size="22" font-weight="bold">9.99 €</text>
-<text x="412" y="631" fill="#444455" class="sans" font-size="9">Achat unique · Permanent</text>
-<!-- Bouton -->
-<rect x="542" y="598" width="170" height="34" fill="#664400" rx="17"/>
-<rect x="543" y="599" width="168" height="32" fill="none" stroke="#cc8800" stroke-width="0.5" rx="16"/>
-<text x="627" y="620" fill="#ffcc00" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Acheter</text>
-
-<!-- ══════════ CARD 4 : PET ══════════ -->
-<!-- x=733, y=416, w=532, h=236 -->
-<rect x="733" y="416" width="532" height="236" fill="#111118" stroke="#1e1e2c" rx="6"/>
-<!-- Badge NEW -->
-<rect x="733" y="416" width="60" height="22" fill="#226644" rx="6"/>
-<text x="763" y="431" fill="#44ffaa" text-anchor="middle" class="sans" font-size="9" font-weight="bold">NOUVEAU</text>
-<!-- Image zone: nom avec pet -->
-<rect x="743" y="442" width="198" height="200" fill="#0c0c14" stroke="#181826" rx="4"/>
-<rect x="749" y="448" width="186" height="186" fill="#0a0c0a" rx="2"/>
-<!-- Preview: IP avec pet -->
-<text x="842" y="490" fill="#2a3a2a" text-anchor="middle" class="sans" font-size="8">apercu dans le chat</text>
-<!-- Pet a gauche du nom -->
-<text x="766" y="524" fill="#33aa66" class="sans" font-size="20">&#9829;</text>
-<text x="800" y="524" fill="#606080" class="mono" font-size="11">192.168.1.45</text>
-<text x="916" y="524" fill="#33aa66" class="sans" font-size="20">&#9829;</text>
-<!-- Ligne 2: autre pet -->
-<text x="766" y="554" fill="#aa6633" class="sans" font-size="18">&#9733;</text>
-<text x="800" y="554" fill="#606080" class="mono" font-size="11">10.0.0.187</text>
-<!-- Ligne 3: sans pet -->
-<text x="800" y="582" fill="#404055" class="mono" font-size="11">172.31.0.5</text>
-<!-- Badge "3 max" -->
-<rect x="756" y="598" width="172" height="16" fill="#0a1a0a" stroke="#224422" rx="2"/>
-<text x="842" y="610" fill="#226622" text-anchor="middle" class="sans" font-size="8">Max. 3 pets actifs simultanement</text>
-<!-- Infos card -->
-<text x="952" y="458" fill="#c8c8e0" class="sans" font-size="15" font-weight="bold">Pet de Nom</text>
-<text x="952" y="477" fill="#505070" class="sans" font-size="11">Ajoutez un petit element decoratif</text>
-<text x="952" y="493" fill="#505070" class="sans" font-size="11">qui s'affiche autour de votre IP.</text>
-<text x="952" y="517" fill="#3a5a3a" class="sans" font-size="11">+ Visible par tous les utilisateurs</text>
-<text x="952" y="534" fill="#3a5a3a" class="sans" font-size="11">+ Choix parmi 20+ designs</text>
-<text x="952" y="551" fill="#3a5a3a" class="sans" font-size="11">+ Position gauche, droite ou les deux</text>
-<text x="952" y="571" fill="#884422" class="sans" font-size="10">/ Max. 3 pets actifs par compte</text>
-<text x="952" y="585" fill="#884422" class="sans" font-size="10">/ Non remboursable apres activation</text>
-<!-- Prix -->
-<text x="952" y="615" fill="#ffdd00" class="sans" font-size="22" font-weight="bold">7.99 €</text>
-<text x="952" y="631" fill="#444455" class="sans" font-size="9">par pet · Achat unique · Permanent</text>
-<!-- Bouton -->
-<rect x="1082" y="598" width="170" height="34" fill="#226644" rx="17"/>
-<rect x="1083" y="599" width="168" height="32" fill="none" stroke="#44aa88" stroke-width="0.5" rx="16"/>
-<text x="1167" y="620" fill="#ffffff" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Choisir un pet</text>
-
-<!-- FOOTER INFO -->
-<rect x="0" y="688" width="1280" height="32" fill="#080810" stroke="#141420" stroke-width="1"/>
-<text x="640" y="708" fill="#222233" text-anchor="middle" class="sans" font-size="9">XIP Shop · Les achats sont definitifs sauf mention contraire · Voir les Conditions Generales de Vente · Support : shop@xip.local</text>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
+<defs>
+  <style>
+    .sans { font-family: Arial, Helvetica, sans-serif; }
+    .mono { font-family: 'Courier New', Courier, monospace; }
+  </style>
+  <filter id="glow-gold"><feGaussianBlur stdDeviation="3"/></filter>
+  <filter id="glow-red"><feGaussianBlur stdDeviation="3"/></filter>
+</defs>
+
+<!-- FOND -->
+<rect width="1280" height="720" fill="#090910"/>
+
+<!-- ════════════════════ HEADER ════════════════════ -->
+<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
+<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-gold)" opacity="0.4">XIP</text>
+<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
+<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
+<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
+<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Accès · Publicité</text>
+<text x="310" y="35" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
+<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecté :</text>
+<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
+<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
+<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
+<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
+
+<!-- ════════════════════ LEFT NAV ════════════════════ -->
+<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
+<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
+
+<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATÉGORIES</text>
+
+<!-- Active item -->
+<rect x="3" y="90" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
+<rect x="3" y="90" width="3" height="36" fill="#00aaee" rx="2"/>
+<text x="20" y="113" fill="#aabbdd" class="sans" font-size="13" font-weight="bold">Tout voir</text>
+
+<text x="20" y="153" fill="#4a4a6a" class="sans" font-size="13">Publicite</text>
+<text x="20" y="188" fill="#4a4a6a" class="sans" font-size="13">Abonnements</text>
+<text x="20" y="223" fill="#4a4a6a" class="sans" font-size="13">Cosmetiques</text>
+<text x="20" y="258" fill="#cc3322" class="sans" font-size="13" font-weight="bold">Promotions</text>
+
+<line x1="10" y1="272" x2="175" y2="272" stroke="#181822" stroke-width="1"/>
+<text x="16" y="292" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
+<text x="20" y="316" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
+<text x="20" y="348" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
+
+<!-- Solde dans nav -->
+<rect x="10" y="660" width="165" height="50" fill="#111118" stroke="#1e1e28" rx="4"/>
+<text x="93" y="679" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">Votre solde</text>
+<text x="93" y="700" fill="#44aa44" text-anchor="middle" class="sans" font-size="16" font-weight="bold">24.50 €</text>
+
+<!-- ════════════════════ CONTENU PRINCIPAL ════════════════════ -->
+
+<!-- ── PROMO BANNER ── -->
+<rect x="193" y="66" width="1079" height="72" fill="#180800" stroke="#bb3300" stroke-width="1.5" rx="6"/>
+<rect x="193" y="66" width="170" height="72" fill="#220c00" rx="6"/>
+<!-- Badge flash -->
+<text x="278" y="92" fill="#ff5500" text-anchor="middle" class="sans" font-size="13" font-weight="bold">FLASH SALE</text>
+<text x="278" y="112" fill="#774400" text-anchor="middle" class="sans" font-size="9">Offre limitee 2h47</text>
+<line x1="363" y1="72" x2="363" y2="132" stroke="#331100" stroke-width="1"/>
+<!-- Texte promo -->
+<text x="380" y="90" fill="#ffcc00" class="sans" font-size="14" font-weight="bold">Pack Cosmetique — Style Dore + Pet</text>
+<text x="380" y="110" fill="#cc6600" class="sans" font-size="12">14.99 € au lieu de 17.98 € —</text>
+<text x="620" y="110" fill="#ff4444" class="sans" font-size="12" font-weight="bold">ECONOMISEZ 3 €</text>
+<text x="380" y="128" fill="#553300" class="sans" font-size="10">Achat groupe · Stock limite : 47 restants</text>
+<!-- Timer + CTA -->
+<text x="880" y="92" fill="#ff8800" class="sans" font-size="11" font-weight="bold">Expire dans</text>
+<text x="880" y="114" fill="#ffaa00" class="mono" font-size="16" font-weight="bold">02:47:33</text>
+<rect x="1000" y="78" width="262" height="36" fill="#cc3300" rx="18"/>
+<rect x="1001" y="79" width="260" height="34" fill="none" stroke="#ff6600" stroke-width="0.5" rx="18"/>
+<text x="1131" y="101" fill="#ffffff" text-anchor="middle" class="sans" font-size="12" font-weight="bold">PROFITER DE L'OFFRE</text>
+
+<!-- ── TITRE SECTION ── -->
+<text x="200" y="162" fill="#7788aa" class="sans" font-size="14" font-weight="bold">Tous les articles</text>
+<text x="1262" y="162" fill="#3a3a5a" text-anchor="end" class="sans" font-size="11">Trier : Popularite</text>
+
+<!-- ══════════ CARD 1 : CADRE DE PUB ══════════ -->
+<!-- x=193, y=172, w=532, h=236 -->
+<rect x="193" y="172" width="532" height="236" fill="#111118" stroke="#1e1e2c" rx="6"/>
+<!-- Badge promo -->
+<rect x="193" y="172" width="112" height="22" fill="#bb2200" rx="6"/>
+<text x="249" y="187" fill="#ffffff" text-anchor="middle" class="sans" font-size="9" font-weight="bold">-33%  FLASH PROMO</text>
+<!-- Image zone: mini XIP avec pub en surbrillance -->
+<rect x="203" y="198" width="198" height="200" fill="#0c0c14" stroke="#181826" rx="4"/>
+<rect x="209" y="204" width="186" height="20" fill="#131320" rx="2"/>
+<text x="302" y="218" fill="#303055" text-anchor="middle" class="sans" font-size="8">XIP Chat</text>
+<!-- Ad band highlighted -->
+<rect x="209" y="228" width="44" height="158" fill="#1a1a10" stroke="#cc8800" stroke-width="2" rx="2"/>
+<rect x="210" y="229" width="42" height="156" fill="none" stroke="#ffcc00" stroke-width="0.5" rx="1" opacity="0.5"/>
+<text x="231" y="310" fill="#cc8800" text-anchor="middle" class="sans" font-size="8" transform="rotate(-90,231,310)">VOTRE PUB ICI</text>
+<!-- Chat messages mockup -->
+<rect x="259" y="232" width="120" height="10" fill="#161622" rx="1"/>
+<rect x="259" y="247" width="88" height="8" fill="#131318" rx="1"/>
+<rect x="259" y="260" width="100" height="8" fill="#131318" rx="1"/>
+<rect x="259" y="273" width="72" height="8" fill="#131318" rx="1"/>
+<rect x="259" y="290" width="110" height="10" fill="#161622" rx="1"/>
+<rect x="259" y="305" width="80" height="8" fill="#131318" rx="1"/>
+<rect x="259" y="318" width="95" height="8" fill="#131318" rx="1"/>
+<rect x="259" y="331" width="60" height="8" fill="#131318" rx="1"/>
+<rect x="209" y="372" width="186" height="12" fill="#131320" rx="2"/>
+<text x="302" y="382" fill="#202040" text-anchor="middle" class="sans" font-size="7">[ saisie message ]</text>
+<!-- Infos card -->
+<text x="412" y="215" fill="#c8c8e0" class="sans" font-size="15" font-weight="bold">Cadre de Pub</text>
+<text x="412" y="234" fill="#505070" class="sans" font-size="11">Espace publicitaire dans la bande gauche</text>
+<text x="412" y="250" fill="#505070" class="sans" font-size="11">du chat, visible par tous les utilisateurs.</text>
+<text x="412" y="274" fill="#3a5a3a" class="sans" font-size="11">+ 1 000 impressions garanties</text>
+<text x="412" y="291" fill="#3a5a3a" class="sans" font-size="11">+ 7 jours de diffusion continue</text>
+<text x="412" y="308" fill="#3a5a3a" class="sans" font-size="11">+ Format 130x180 px · lien cliquable</text>
+<text x="412" y="328" fill="#884422" class="sans" font-size="10">/ Max. 1 cadre actif par compte</text>
+<!-- Prix barré + promo + normal -->
+<text x="412" y="355" fill="#444455" class="sans" font-size="12" text-decoration="line-through">22.50 €</text>
+<text x="460" y="355" fill="#ee3333" class="sans" font-size="11" font-weight="bold">-33%</text>
+<text x="412" y="380" fill="#ffdd00" class="sans" font-size="22" font-weight="bold">9.99 €</text>
+<text x="412" y="397" fill="#444455" class="sans" font-size="9">Prix normal : 15.00 € | Promo expire dans 2h47</text>
+<!-- Bouton acheter -->
+<rect x="542" y="358" width="170" height="34" fill="#224488" rx="17"/>
+<rect x="543" y="359" width="168" height="32" fill="none" stroke="#4466aa" stroke-width="0.5" rx="16"/>
+<text x="627" y="380" fill="#ffffff" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Acheter</text>
+
+<!-- ══════════ CARD 2 : ABONNEMENT NOADS ══════════ -->
+<!-- x=733, y=172, w=532, h=236 -->
+<rect x="733" y="172" width="532" height="236" fill="#111118" stroke="#1e1e2c" rx="6"/>
+<!-- Badge populaire -->
+<rect x="733" y="172" width="100" height="22" fill="#2244aa" rx="6"/>
+<text x="783" y="187" fill="#ffffff" text-anchor="middle" class="sans" font-size="9" font-weight="bold">POPULAIRE</text>
+<!-- Image zone: XIP sans pub -->
+<rect x="743" y="198" width="198" height="200" fill="#0c0c14" stroke="#181826" rx="4"/>
+<rect x="749" y="204" width="186" height="20" fill="#131320" rx="2"/>
+<text x="842" y="218" fill="#303055" text-anchor="middle" class="sans" font-size="8">XIP Chat — sans pubs</text>
+<!-- Ad band GRISE (aucune pub) -->
+<rect x="749" y="228" width="44" height="158" fill="#0e0e10" stroke="#222" stroke-width="1" rx="2"/>
+<line x1="749" y1="228" x2="793" y2="386" stroke="#1e1e22" stroke-width="1"/>
+<line x1="793" y1="228" x2="749" y2="386" stroke="#1e1e22" stroke-width="1"/>
+<text x="771" y="310" fill="#1e1e2a" text-anchor="middle" class="sans" font-size="7" transform="rotate(-90,771,310)">PUB MASQUEE</text>
+<!-- Chat normal -->
+<rect x="799" y="232" width="120" height="10" fill="#161622" rx="1"/>
+<rect x="799" y="247" width="88" height="8" fill="#131318" rx="1"/>
+<rect x="799" y="260" width="100" height="8" fill="#131318" rx="1"/>
+<rect x="799" y="273" width="72" height="8" fill="#131318" rx="1"/>
+<rect x="799" y="290" width="110" height="10" fill="#161622" rx="1"/>
+<rect x="799" y="305" width="80" height="8" fill="#131318" rx="1"/>
+<!-- Checkmark vert sur la bande -->
+<circle cx="771" cy="310" r="12" fill="#112211" stroke="#225522" stroke-width="1"/>
+<text x="771" y="315" fill="#33aa44" text-anchor="middle" class="sans" font-size="14" font-weight="bold">X</text>
+<!-- Infos card -->
+<text x="952" y="215" fill="#c8c8e0" class="sans" font-size="15" font-weight="bold">Abonnement NoAds</text>
+<text x="952" y="234" fill="#505070" class="sans" font-size="11">Supprimez toutes les publicites du</text>
+<text x="952" y="250" fill="#505070" class="sans" font-size="11">chat tant que l'abonnement est actif.</text>
+<text x="952" y="274" fill="#3a5a3a" class="sans" font-size="11">+ Bande gauche entierement masquee</text>
+<text x="952" y="291" fill="#3a5a3a" class="sans" font-size="11">+ Annulable a tout moment</text>
+<text x="952" y="308" fill="#3a5a3a" class="sans" font-size="11">+ -33% avec l'abonnement annuel</text>
+<text x="952" y="328" fill="#884422" class="sans" font-size="10">/ 1 abonnement actif max par compte</text>
+<!-- Prix -->
+<text x="952" y="362" fill="#8888bb" class="sans" font-size="13">a partir de</text>
+<text x="952" y="385" fill="#ffdd00" class="sans" font-size="22" font-weight="bold">4.99 €</text>
+<text x="952" y="400" fill="#444455" class="sans" font-size="9">/mois | Annuel : 39.99 € (3.33 €/mois)</text>
+<!-- Bouton -->
+<rect x="1082" y="358" width="170" height="34" fill="#224488" rx="17"/>
+<text x="1167" y="380" fill="#ffffff" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Voir les offres</text>
+
+<!-- ══════════ CARD 3 : STYLE DORE ══════════ -->
+<!-- x=193, y=416, w=532, h=234 -->
+<rect x="193" y="416" width="532" height="236" fill="#111118" stroke="#1e1e2c" rx="6"/>
+<!-- Badge limité + or -->
+<rect x="193" y="416" width="88" height="22" fill="#664400" rx="6"/>
+<text x="237" y="431" fill="#ffcc00" text-anchor="middle" class="sans" font-size="9" font-weight="bold">LIMITE 50 ex.</text>
+<!-- Image zone: nom en or -->
+<rect x="203" y="442" width="198" height="200" fill="#0c0c14" stroke="#181826" rx="4"/>
+<!-- Fond avec gradient doré subtil -->
+<rect x="209" y="448" width="186" height="186" fill="#0e0a04" rx="2"/>
+<!-- Avant/Après -->
+<text x="302" y="475" fill="#303030" text-anchor="middle" class="sans" font-size="9">AVANT</text>
+<text x="302" y="492" fill="#606080" class="mono" font-size="11" text-anchor="middle">192.168.1.45</text>
+<line x1="215" y1="506" x2="390" y2="506" stroke="#222" stroke-width="0.5"/>
+<text x="302" y="522" fill="#303030" text-anchor="middle" class="sans" font-size="9">APRES</text>
+<!-- Nom en or avec glow -->
+<text x="302" y="546" fill="#996600" text-anchor="middle" class="mono" font-size="12" font-weight="bold" filter="url(#glow-gold)" opacity="0.9">192.168.1.45</text>
+<text x="302" y="546" fill="#ffdd44" text-anchor="middle" class="mono" font-size="12" font-weight="bold">192.168.1.45</text>
+<rect x="242" y="555" width="120" height="16" fill="#1a1400" stroke="#443300" rx="2"/>
+<text x="302" y="567" fill="#886600" text-anchor="middle" class="sans" font-size="8">Style Dore actif</text>
+<!-- Couronne decorative -->
+<text x="302" y="610" fill="#886600" text-anchor="middle" class="sans" font-size="28">&#9818;</text>
+<text x="302" y="630" fill="#553300" text-anchor="middle" class="sans" font-size="8">decoration du nom</text>
+<!-- Infos card -->
+<text x="412" y="458" fill="#c8c8e0" class="sans" font-size="15" font-weight="bold">Style Dore</text>
+<text x="412" y="477" fill="#505070" class="sans" font-size="11">Votre adresse IP s'affiche en doree</text>
+<text x="412" y="493" fill="#505070" class="sans" font-size="11">avec un effet lumineux dans le chat.</text>
+<text x="412" y="517" fill="#3a5a3a" class="sans" font-size="11">+ Nom en couleur or avec lueur</text>
+<text x="412" y="534" fill="#3a5a3a" class="sans" font-size="11">+ Visible par tous dans le chat</text>
+<text x="412" y="551" fill="#3a5a3a" class="sans" font-size="11">+ Permanant (non expirant)</text>
+<text x="412" y="571" fill="#884422" class="sans" font-size="10">/ 1 style actif a la fois · non remboursable</text>
+<text x="412" y="585" fill="#884422" class="sans" font-size="10">/ Stock limite : 50 exemplaires disponibles</text>
+<!-- Prix -->
+<text x="412" y="615" fill="#ffdd00" class="sans" font-size="22" font-weight="bold">9.99 €</text>
+<text x="412" y="631" fill="#444455" class="sans" font-size="9">Achat unique · Permanent</text>
+<!-- Bouton -->
+<rect x="542" y="598" width="170" height="34" fill="#664400" rx="17"/>
+<rect x="543" y="599" width="168" height="32" fill="none" stroke="#cc8800" stroke-width="0.5" rx="16"/>
+<text x="627" y="620" fill="#ffcc00" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Acheter</text>
+
+<!-- ══════════ CARD 4 : PET ══════════ -->
+<!-- x=733, y=416, w=532, h=236 -->
+<rect x="733" y="416" width="532" height="236" fill="#111118" stroke="#1e1e2c" rx="6"/>
+<!-- Badge NEW -->
+<rect x="733" y="416" width="60" height="22" fill="#226644" rx="6"/>
+<text x="763" y="431" fill="#44ffaa" text-anchor="middle" class="sans" font-size="9" font-weight="bold">NOUVEAU</text>
+<!-- Image zone: nom avec pet -->
+<rect x="743" y="442" width="198" height="200" fill="#0c0c14" stroke="#181826" rx="4"/>
+<rect x="749" y="448" width="186" height="186" fill="#0a0c0a" rx="2"/>
+<!-- Preview: IP avec pet -->
+<text x="842" y="490" fill="#2a3a2a" text-anchor="middle" class="sans" font-size="8">apercu dans le chat</text>
+<!-- Pet a gauche du nom -->
+<text x="766" y="524" fill="#33aa66" class="sans" font-size="20">&#9829;</text>
+<text x="800" y="524" fill="#606080" class="mono" font-size="11">192.168.1.45</text>
+<text x="916" y="524" fill="#33aa66" class="sans" font-size="20">&#9829;</text>
+<!-- Ligne 2: autre pet -->
+<text x="766" y="554" fill="#aa6633" class="sans" font-size="18">&#9733;</text>
+<text x="800" y="554" fill="#606080" class="mono" font-size="11">10.0.0.187</text>
+<!-- Ligne 3: sans pet -->
+<text x="800" y="582" fill="#404055" class="mono" font-size="11">172.31.0.5</text>
+<!-- Badge "3 max" -->
+<rect x="756" y="598" width="172" height="16" fill="#0a1a0a" stroke="#224422" rx="2"/>
+<text x="842" y="610" fill="#226622" text-anchor="middle" class="sans" font-size="8">Max. 3 pets actifs simultanement</text>
+<!-- Infos card -->
+<text x="952" y="458" fill="#c8c8e0" class="sans" font-size="15" font-weight="bold">Pet de Nom</text>
+<text x="952" y="477" fill="#505070" class="sans" font-size="11">Ajoutez un petit element decoratif</text>
+<text x="952" y="493" fill="#505070" class="sans" font-size="11">qui s'affiche autour de votre IP.</text>
+<text x="952" y="517" fill="#3a5a3a" class="sans" font-size="11">+ Visible par tous les utilisateurs</text>
+<text x="952" y="534" fill="#3a5a3a" class="sans" font-size="11">+ Choix parmi 20+ designs</text>
+<text x="952" y="551" fill="#3a5a3a" class="sans" font-size="11">+ Position gauche, droite ou les deux</text>
+<text x="952" y="571" fill="#884422" class="sans" font-size="10">/ Max. 3 pets actifs par compte</text>
+<text x="952" y="585" fill="#884422" class="sans" font-size="10">/ Non remboursable apres activation</text>
+<!-- Prix -->
+<text x="952" y="615" fill="#ffdd00" class="sans" font-size="22" font-weight="bold">7.99 €</text>
+<text x="952" y="631" fill="#444455" class="sans" font-size="9">par pet · Achat unique · Permanent</text>
+<!-- Bouton -->
+<rect x="1082" y="598" width="170" height="34" fill="#226644" rx="17"/>
+<rect x="1083" y="599" width="168" height="32" fill="none" stroke="#44aa88" stroke-width="0.5" rx="16"/>
+<text x="1167" y="620" fill="#ffffff" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Choisir un pet</text>
+
+<!-- FOOTER INFO -->
+<rect x="0" y="688" width="1280" height="32" fill="#080810" stroke="#141420" stroke-width="1"/>
+<text x="640" y="708" fill="#222233" text-anchor="middle" class="sans" font-size="9">XIP Shop · Les achats sont definitifs sauf mention contraire · Voir les Conditions Generales de Vente · Support : shop@xip.local</text>
+</svg>
diff --git a/maquettes/shop/shop2.svg b/maquettes/shop/shop2.svg
index 8735eec..405df0d 100644
--- a/maquettes/shop/shop2.svg
+++ b/maquettes/shop/shop2.svg
@@ -1,197 +1,197 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
-<defs>
-  <style>
-    .sans { font-family: Arial, Helvetica, sans-serif; }
-    .mono { font-family: 'Courier New', Courier, monospace; }
-  </style>
-  <filter id="glow-pub"><feGaussianBlur stdDeviation="4"/></filter>
-  <filter id="glow-red"><feGaussianBlur stdDeviation="3"/></filter>
-</defs>
-
-<!-- FOND -->
-<rect width="1280" height="720" fill="#090910"/>
-
-<!-- ════════════════════ HEADER ════════════════════ -->
-<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
-<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-pub)" opacity="0.4">XIP</text>
-<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
-<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
-<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
-<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Acces · Publicite</text>
-<!-- Breadcrumb -->
-<text x="280" y="30" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
-<text x="340" y="30" fill="#1a1a33" class="sans" font-size="11">/</text>
-<text x="354" y="30" fill="#5566aa" class="sans" font-size="11" font-weight="bold">Cadre de Pub</text>
-<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecte :</text>
-<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
-<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
-<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
-<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
-
-<!-- ════════════════════ LEFT NAV ════════════════════ -->
-<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
-<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
-<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATEGORIES</text>
-<text x="20" y="116" fill="#4a4a6a" class="sans" font-size="13">Tout voir</text>
-<!-- Active: Publicité -->
-<rect x="3" y="126" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
-<rect x="3" y="126" width="3" height="36" fill="#cc4400" rx="2"/>
-<text x="20" y="149" fill="#cc8844" class="sans" font-size="13" font-weight="bold">Publicite</text>
-<text x="20" y="185" fill="#4a4a6a" class="sans" font-size="13">Abonnements</text>
-<text x="20" y="220" fill="#4a4a6a" class="sans" font-size="13">Cosmetiques</text>
-<text x="20" y="255" fill="#cc3322" class="sans" font-size="13">Promotions</text>
-<line x1="10" y1="268" x2="175" y2="268" stroke="#181822" stroke-width="1"/>
-<text x="16" y="290" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
-<text x="20" y="314" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
-<text x="20" y="346" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
-<!-- Statut pub actuelle -->
-<rect x="8" y="560" width="169" height="80" fill="#111116" stroke="#1e1e26" rx="4"/>
-<text x="93" y="578" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MES PUBS ACTIVES</text>
-<line x1="16" y1="584" x2="170" y2="584" stroke="#1a1a22" stroke-width="1"/>
-<text x="93" y="603" fill="#666688" text-anchor="middle" class="sans" font-size="11">0 / 1 slot</text>
-<text x="93" y="620" fill="#2a4a2a" text-anchor="middle" class="sans" font-size="10">Slot disponible</text>
-<rect x="28" y="628" width="130" height="6" fill="#111116" stroke="#1e1e22" rx="3"/>
-<rect x="28" y="628" width="0" height="6" fill="#33aa44" rx="3"/>
-
-<!-- ════════════════════ CONTENU ════════════════════ -->
-
-<!-- ── PROMO FLASH TOP ── -->
-<rect x="193" y="66" width="1079" height="46" fill="#1e0800" stroke="#cc3300" stroke-width="1" rx="4"/>
-<text x="270" y="84" fill="#ff5500" class="sans" font-size="12" font-weight="bold">FLASH PROMO -33%</text>
-<text x="270" y="102" fill="#884422" class="sans" font-size="10">Prix normal : 15.00 € → Prix promo : 9.99 €</text>
-<text x="880" y="88" fill="#ff8800" class="sans" font-size="11" font-weight="bold">Expire dans :</text>
-<text x="990" y="88" fill="#ffaa00" class="mono" font-size="14" font-weight="bold">02:47:33</text>
-
-<!-- ── TITRE PRODUIT ── -->
-<text x="200" y="142" fill="#7788aa" class="sans" font-size="10">Publicite /</text>
-<text x="248" y="142" fill="#aabbdd" class="sans" font-size="12" font-weight="bold">Cadre de Pub</text>
-<rect x="340" y="130" width="100" height="18" fill="#bb2200" rx="9"/>
-<text x="390" y="143" fill="#ffffff" text-anchor="middle" class="sans" font-size="9" font-weight="bold">-33% PROMO</text>
-
-<!-- ════════════════════ CORPS : PREVIEW gauche + DETAIL droit ════════════════════ -->
-
-<!-- ── PREVIEW PRODUIT (x=193, y=154, w=480, h=490) ── -->
-<rect x="193" y="154" width="480" height="490" fill="#0e0e14" stroke="#1c1c28" rx="6"/>
-<!-- Titre zone preview -->
-<rect x="193" y="154" width="480" height="36" fill="#131320" rx="6"/>
-<text x="433" y="177" fill="#555577" text-anchor="middle" class="sans" font-size="11">Apercu dans le chat XIP</text>
-
-<!-- Mini interface XIP (1:2 scale de 1280x720) -->
-<!-- Canvas simulé: 460×340 centré -->
-<rect x="203" y="198" width="460" height="340" fill="#090910" stroke="#141420" rx="4"/>
-
-<!-- Header mini XIP -->
-<rect x="203" y="198" width="460" height="26" fill="#0e0e18" stroke="#1a1a28" stroke-width="0.5"/>
-<text x="218" y="215" fill="#009acc" class="sans" font-size="9" font-weight="bold">XIP Chat</text>
-<text x="300" y="215" fill="#3a3a5a" class="sans" font-size="8">312 connectes</text>
-
-<!-- Bande pub gauche — highlightée en or -->
-<rect x="203" y="224" width="54" height="302" fill="#0c0c08" stroke="#ffcc00" stroke-width="2" rx="2"/>
-<rect x="204" y="225" width="52" height="300" fill="none" stroke="#ffaa00" stroke-width="0.5" rx="1" opacity="0.6"/>
-<!-- Contenu pub dans la bande -->
-<rect x="207" y="230" width="46" height="70" fill="#1a1600" stroke="#aa8800" rx="1"/>
-<text x="230" y="254" fill="#cc8800" text-anchor="middle" class="sans" font-size="7" font-weight="bold">VOTRE</text>
-<text x="230" y="264" fill="#cc8800" text-anchor="middle" class="sans" font-size="7" font-weight="bold">PUB</text>
-<text x="230" y="278" fill="#886600" text-anchor="middle" class="sans" font-size="6">130x180px</text>
-<rect x="207" y="308" width="46" height="70" fill="#181818" stroke="#333" rx="1"/>
-<text x="230" y="345" fill="#2a2a2a" text-anchor="middle" class="sans" font-size="8">ad 2</text>
-<rect x="207" y="386" width="46" height="70" fill="#181818" stroke="#333" rx="1"/>
-<text x="230" y="423" fill="#2a2a2a" text-anchor="middle" class="sans" font-size="8">ad 3</text>
-<!-- Chat messages -->
-<text x="270" y="240" fill="#505070" class="mono" font-size="7" font-weight="bold">192.168.1.45</text>
-<text x="270" y="252" fill="#909090" class="sans" font-size="7">Salut tout le monde !</text>
-<text x="270" y="270" fill="#505070" class="mono" font-size="7" font-weight="bold">10.0.0.187</text>
-<text x="270" y="282" fill="#909090" class="sans" font-size="7">Y a quoi de neuf ce soir ?</text>
-<text x="270" y="300" fill="#505070" class="mono" font-size="7" font-weight="bold">172.16.254.1</text>
-<text x="270" y="312" fill="#909090" class="sans" font-size="7">Le drop de demain va etre chaud</text>
-<text x="270" y="330" fill="#505070" class="mono" font-size="7" font-weight="bold">203.0.113.42</text>
-<text x="270" y="342" fill="#909090" class="sans" font-size="7">lol toujours pareil</text>
-<!-- Input mini -->
-<rect x="258" y="488" width="398" height="22" fill="#131320" stroke="#1e1e2a" rx="11"/>
-<text x="268" y="503" fill="#2a2a44" class="sans" font-size="7">Entrez un message...</text>
-
-<!-- Legende heatmap de la pub -->
-<rect x="203" y="548" width="460" height="88" fill="#0c0c10" stroke="#181820" rx="4"/>
-<text x="215" y="566" fill="#555577" class="sans" font-size="10" font-weight="bold">Zone surlignee = votre espace publicitaire</text>
-<line x1="215" y1="572" x2="643" y2="572" stroke="#1a1a28" stroke-width="0.5"/>
-<!-- Stats pub -->
-<text x="225" y="592" fill="#446644" class="sans" font-size="11" font-weight="bold">1 000</text>
-<text x="278" y="592" fill="#404055" class="sans" font-size="10">impressions garanties</text>
-<text x="225" y="612" fill="#446644" class="sans" font-size="11" font-weight="bold">7</text>
-<text x="240" y="612" fill="#404055" class="sans" font-size="10">jours de diffusion continue</text>
-<text x="450" y="592" fill="#446644" class="sans" font-size="11" font-weight="bold">24/7</text>
-<text x="480" y="592" fill="#404055" class="sans" font-size="10">disponibilite</text>
-<text x="450" y="612" fill="#446644" class="sans" font-size="11" font-weight="bold">130px</text>
-<text x="498" y="612" fill="#404055" class="sans" font-size="10">largeur x 180px hauteur</text>
-<text x="215" y="632" fill="#883322" class="sans" font-size="9">Votre image ou animation sera visible par tous les utilisateurs connectes au chat public.</text>
-
-<!-- ── DETAIL PRODUIT droite (x=685, y=154, w=580, h=490) ── -->
-<rect x="685" y="154" width="580" height="490" fill="#0e0e14" stroke="#1c1c28" rx="6"/>
-
-<!-- Titre + note -->
-<text x="705" y="192" fill="#c8c8e0" class="sans" font-size="20" font-weight="bold">Cadre de Pub</text>
-<text x="912" y="192" fill="#cc8800" class="sans" font-size="11">★★★★☆</text>
-<text x="962" y="192" fill="#444455" class="sans" font-size="10">(142 avis)</text>
-
-<!-- Prix - barré / promo / normal -->
-<rect x="705" y="202" width="550" height="72" fill="#111118" stroke="#1e1e26" rx="4"/>
-<text x="720" y="224" fill="#444455" class="sans" font-size="14" text-decoration="line-through">22.50 €</text>
-<text x="777" y="224" fill="#ee3333" class="sans" font-size="12" font-weight="bold">-33%</text>
-<text x="720" y="256" fill="#ffdd00" class="sans" font-size="28" font-weight="bold" filter="url(#glow-pub)" opacity="0.4">9.99 €</text>
-<text x="720" y="256" fill="#ffdd00" class="sans" font-size="28" font-weight="bold">9.99 €</text>
-<text x="850" y="240" fill="#444455" class="sans" font-size="11">Prix normal : 15.00 €</text>
-<text x="850" y="258" fill="#883322" class="sans" font-size="10">Promo flash → expire dans 02:47</text>
-
-<!-- Options / configurateur -->
-<text x="705" y="300" fill="#7788aa" class="sans" font-size="12" font-weight="bold">Configuration</text>
-<line x1="705" y1="308" x2="1255" y2="308" stroke="#1a1a28" stroke-width="1"/>
-<!-- Duree -->
-<text x="705" y="330" fill="#555577" class="sans" font-size="10">Duree de diffusion</text>
-<rect x="705" y="336" width="122" height="30" fill="#181828" stroke="#2244aa" rx="4"/>
-<text x="766" y="356" fill="#aabbdd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">7 jours</text>
-<rect x="835" y="336" width="122" height="30" fill="#111118" stroke="#222230" rx="4"/>
-<text x="896" y="356" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">14 jours (+8€)</text>
-<rect x="965" y="336" width="122" height="30" fill="#111118" stroke="#222230" rx="4"/>
-<text x="1026" y="356" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">30 jours (+20€)</text>
-<!-- Format -->
-<text x="705" y="390" fill="#555577" class="sans" font-size="10">Format</text>
-<rect x="705" y="396" width="170" height="30" fill="#181828" stroke="#2244aa" rx="4"/>
-<text x="790" y="416" fill="#aabbdd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Image statique</text>
-<rect x="883" y="396" width="170" height="30" fill="#111118" stroke="#222230" rx="4"/>
-<text x="968" y="416" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">GIF anime (+3€)</text>
-<!-- URL de la pub -->
-<text x="705" y="450" fill="#555577" class="sans" font-size="10">URL de destination (optionnel)</text>
-<rect x="705" y="456" width="540" height="30" fill="#131320" stroke="#222232" rx="4"/>
-<text x="720" y="476" fill="#2a2a44" class="sans" font-size="11">https://</text>
-
-<!-- LIMITES D'ACHAT -->
-<rect x="705" y="502" width="540" height="104" fill="#110a00" stroke="#442200" rx="4"/>
-<text x="720" y="522" fill="#cc6633" class="sans" font-size="11" font-weight="bold">Limites d'achat</text>
-<line x1="715" y1="528" x2="1235" y2="528" stroke="#331800" stroke-width="1"/>
-<text x="720" y="546" fill="#884422" class="sans" font-size="10">/ 1 seul cadre de pub actif par compte a la fois</text>
-<text x="720" y="562" fill="#884422" class="sans" font-size="10">/ Maximum 3 achats par mois (quota mensuel)</text>
-<text x="720" y="578" fill="#884422" class="sans" font-size="10">/ L'image doit respecter les CGU (pas de contenu adulte)</text>
-<text x="720" y="594" fill="#884422" class="sans" font-size="10">/ La pub expire automatiquement apres la duree choisie</text>
-
-<!-- Bouton acheter principal -->
-<rect x="705" y="618" width="338" height="46" fill="#cc3300" rx="23"/>
-<rect x="706" y="619" width="336" height="44" fill="none" stroke="#ff6600" stroke-width="0.5" rx="22"/>
-<text x="874" y="646" fill="#ffffff" text-anchor="middle" class="sans" font-size="14" font-weight="bold">Acheter — 9.99 €</text>
-
-<!-- Bouton pack -->
-<rect x="1051" y="618" width="224" height="46" fill="#111128" stroke="#2a2a5a" rx="23"/>
-<text x="1163" y="641" fill="#7788bb" text-anchor="middle" class="sans" font-size="11">Voir aussi le Pack</text>
-<text x="1163" y="657" fill="#7788bb" text-anchor="middle" class="sans" font-size="10">Pub + Abonnement</text>
-
-<!-- ── AVIS CLIENTS (bas) ── -->
-<rect x="193" y="656" width="1072" height="52" fill="#0c0c12" stroke="#181822" rx="4"/>
-<text x="210" y="674" fill="#555577" class="sans" font-size="10" font-weight="bold">Avis des acheteurs</text>
-<line x1="210" y1="680" x2="1255" y2="680" stroke="#1a1a22" stroke-width="0.5"/>
-<text x="210" y="697" fill="#334433" class="sans" font-size="9">★★★★★  192.168.x.x — "Bien visible, bonne visibilite dans le chat, je recommande !"</text>
-<text x="680" y="697" fill="#334433" class="sans" font-size="9">★★★★☆  10.x.x.x — "Prix correct, effet garanti sur mes clics."</text>
-
-<!-- FOOTER -->
-<rect x="0" y="696" width="1280" height="24" fill="#080810" stroke="#141420" stroke-width="1"/>
-<text x="640" y="712" fill="#222233" text-anchor="middle" class="sans" font-size="9">XIP Shop · Voir les CGV · Support : shop@xip.local</text>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
+<defs>
+  <style>
+    .sans { font-family: Arial, Helvetica, sans-serif; }
+    .mono { font-family: 'Courier New', Courier, monospace; }
+  </style>
+  <filter id="glow-pub"><feGaussianBlur stdDeviation="4"/></filter>
+  <filter id="glow-red"><feGaussianBlur stdDeviation="3"/></filter>
+</defs>
+
+<!-- FOND -->
+<rect width="1280" height="720" fill="#090910"/>
+
+<!-- ════════════════════ HEADER ════════════════════ -->
+<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
+<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-pub)" opacity="0.4">XIP</text>
+<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
+<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
+<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
+<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Acces · Publicite</text>
+<!-- Breadcrumb -->
+<text x="280" y="30" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
+<text x="340" y="30" fill="#1a1a33" class="sans" font-size="11">/</text>
+<text x="354" y="30" fill="#5566aa" class="sans" font-size="11" font-weight="bold">Cadre de Pub</text>
+<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecte :</text>
+<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
+<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
+<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
+<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
+
+<!-- ════════════════════ LEFT NAV ════════════════════ -->
+<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
+<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
+<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATEGORIES</text>
+<text x="20" y="116" fill="#4a4a6a" class="sans" font-size="13">Tout voir</text>
+<!-- Active: Publicité -->
+<rect x="3" y="126" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
+<rect x="3" y="126" width="3" height="36" fill="#cc4400" rx="2"/>
+<text x="20" y="149" fill="#cc8844" class="sans" font-size="13" font-weight="bold">Publicite</text>
+<text x="20" y="185" fill="#4a4a6a" class="sans" font-size="13">Abonnements</text>
+<text x="20" y="220" fill="#4a4a6a" class="sans" font-size="13">Cosmetiques</text>
+<text x="20" y="255" fill="#cc3322" class="sans" font-size="13">Promotions</text>
+<line x1="10" y1="268" x2="175" y2="268" stroke="#181822" stroke-width="1"/>
+<text x="16" y="290" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
+<text x="20" y="314" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
+<text x="20" y="346" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
+<!-- Statut pub actuelle -->
+<rect x="8" y="560" width="169" height="80" fill="#111116" stroke="#1e1e26" rx="4"/>
+<text x="93" y="578" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MES PUBS ACTIVES</text>
+<line x1="16" y1="584" x2="170" y2="584" stroke="#1a1a22" stroke-width="1"/>
+<text x="93" y="603" fill="#666688" text-anchor="middle" class="sans" font-size="11">0 / 1 slot</text>
+<text x="93" y="620" fill="#2a4a2a" text-anchor="middle" class="sans" font-size="10">Slot disponible</text>
+<rect x="28" y="628" width="130" height="6" fill="#111116" stroke="#1e1e22" rx="3"/>
+<rect x="28" y="628" width="0" height="6" fill="#33aa44" rx="3"/>
+
+<!-- ════════════════════ CONTENU ════════════════════ -->
+
+<!-- ── PROMO FLASH TOP ── -->
+<rect x="193" y="66" width="1079" height="46" fill="#1e0800" stroke="#cc3300" stroke-width="1" rx="4"/>
+<text x="270" y="84" fill="#ff5500" class="sans" font-size="12" font-weight="bold">FLASH PROMO -33%</text>
+<text x="270" y="102" fill="#884422" class="sans" font-size="10">Prix normal : 15.00 € → Prix promo : 9.99 €</text>
+<text x="880" y="88" fill="#ff8800" class="sans" font-size="11" font-weight="bold">Expire dans :</text>
+<text x="990" y="88" fill="#ffaa00" class="mono" font-size="14" font-weight="bold">02:47:33</text>
+
+<!-- ── TITRE PRODUIT ── -->
+<text x="200" y="142" fill="#7788aa" class="sans" font-size="10">Publicite /</text>
+<text x="248" y="142" fill="#aabbdd" class="sans" font-size="12" font-weight="bold">Cadre de Pub</text>
+<rect x="340" y="130" width="100" height="18" fill="#bb2200" rx="9"/>
+<text x="390" y="143" fill="#ffffff" text-anchor="middle" class="sans" font-size="9" font-weight="bold">-33% PROMO</text>
+
+<!-- ════════════════════ CORPS : PREVIEW gauche + DETAIL droit ════════════════════ -->
+
+<!-- ── PREVIEW PRODUIT (x=193, y=154, w=480, h=490) ── -->
+<rect x="193" y="154" width="480" height="490" fill="#0e0e14" stroke="#1c1c28" rx="6"/>
+<!-- Titre zone preview -->
+<rect x="193" y="154" width="480" height="36" fill="#131320" rx="6"/>
+<text x="433" y="177" fill="#555577" text-anchor="middle" class="sans" font-size="11">Apercu dans le chat XIP</text>
+
+<!-- Mini interface XIP (1:2 scale de 1280x720) -->
+<!-- Canvas simulé: 460×340 centré -->
+<rect x="203" y="198" width="460" height="340" fill="#090910" stroke="#141420" rx="4"/>
+
+<!-- Header mini XIP -->
+<rect x="203" y="198" width="460" height="26" fill="#0e0e18" stroke="#1a1a28" stroke-width="0.5"/>
+<text x="218" y="215" fill="#009acc" class="sans" font-size="9" font-weight="bold">XIP Chat</text>
+<text x="300" y="215" fill="#3a3a5a" class="sans" font-size="8">312 connectes</text>
+
+<!-- Bande pub gauche — highlightée en or -->
+<rect x="203" y="224" width="54" height="302" fill="#0c0c08" stroke="#ffcc00" stroke-width="2" rx="2"/>
+<rect x="204" y="225" width="52" height="300" fill="none" stroke="#ffaa00" stroke-width="0.5" rx="1" opacity="0.6"/>
+<!-- Contenu pub dans la bande -->
+<rect x="207" y="230" width="46" height="70" fill="#1a1600" stroke="#aa8800" rx="1"/>
+<text x="230" y="254" fill="#cc8800" text-anchor="middle" class="sans" font-size="7" font-weight="bold">VOTRE</text>
+<text x="230" y="264" fill="#cc8800" text-anchor="middle" class="sans" font-size="7" font-weight="bold">PUB</text>
+<text x="230" y="278" fill="#886600" text-anchor="middle" class="sans" font-size="6">130x180px</text>
+<rect x="207" y="308" width="46" height="70" fill="#181818" stroke="#333" rx="1"/>
+<text x="230" y="345" fill="#2a2a2a" text-anchor="middle" class="sans" font-size="8">ad 2</text>
+<rect x="207" y="386" width="46" height="70" fill="#181818" stroke="#333" rx="1"/>
+<text x="230" y="423" fill="#2a2a2a" text-anchor="middle" class="sans" font-size="8">ad 3</text>
+<!-- Chat messages -->
+<text x="270" y="240" fill="#505070" class="mono" font-size="7" font-weight="bold">192.168.1.45</text>
+<text x="270" y="252" fill="#909090" class="sans" font-size="7">Salut tout le monde !</text>
+<text x="270" y="270" fill="#505070" class="mono" font-size="7" font-weight="bold">10.0.0.187</text>
+<text x="270" y="282" fill="#909090" class="sans" font-size="7">Y a quoi de neuf ce soir ?</text>
+<text x="270" y="300" fill="#505070" class="mono" font-size="7" font-weight="bold">172.16.254.1</text>
+<text x="270" y="312" fill="#909090" class="sans" font-size="7">Le drop de demain va etre chaud</text>
+<text x="270" y="330" fill="#505070" class="mono" font-size="7" font-weight="bold">203.0.113.42</text>
+<text x="270" y="342" fill="#909090" class="sans" font-size="7">lol toujours pareil</text>
+<!-- Input mini -->
+<rect x="258" y="488" width="398" height="22" fill="#131320" stroke="#1e1e2a" rx="11"/>
+<text x="268" y="503" fill="#2a2a44" class="sans" font-size="7">Entrez un message...</text>
+
+<!-- Legende heatmap de la pub -->
+<rect x="203" y="548" width="460" height="88" fill="#0c0c10" stroke="#181820" rx="4"/>
+<text x="215" y="566" fill="#555577" class="sans" font-size="10" font-weight="bold">Zone surlignee = votre espace publicitaire</text>
+<line x1="215" y1="572" x2="643" y2="572" stroke="#1a1a28" stroke-width="0.5"/>
+<!-- Stats pub -->
+<text x="225" y="592" fill="#446644" class="sans" font-size="11" font-weight="bold">1 000</text>
+<text x="278" y="592" fill="#404055" class="sans" font-size="10">impressions garanties</text>
+<text x="225" y="612" fill="#446644" class="sans" font-size="11" font-weight="bold">7</text>
+<text x="240" y="612" fill="#404055" class="sans" font-size="10">jours de diffusion continue</text>
+<text x="450" y="592" fill="#446644" class="sans" font-size="11" font-weight="bold">24/7</text>
+<text x="480" y="592" fill="#404055" class="sans" font-size="10">disponibilite</text>
+<text x="450" y="612" fill="#446644" class="sans" font-size="11" font-weight="bold">130px</text>
+<text x="498" y="612" fill="#404055" class="sans" font-size="10">largeur x 180px hauteur</text>
+<text x="215" y="632" fill="#883322" class="sans" font-size="9">Votre image ou animation sera visible par tous les utilisateurs connectes au chat public.</text>
+
+<!-- ── DETAIL PRODUIT droite (x=685, y=154, w=580, h=490) ── -->
+<rect x="685" y="154" width="580" height="490" fill="#0e0e14" stroke="#1c1c28" rx="6"/>
+
+<!-- Titre + note -->
+<text x="705" y="192" fill="#c8c8e0" class="sans" font-size="20" font-weight="bold">Cadre de Pub</text>
+<text x="912" y="192" fill="#cc8800" class="sans" font-size="11">★★★★☆</text>
+<text x="962" y="192" fill="#444455" class="sans" font-size="10">(142 avis)</text>
+
+<!-- Prix - barré / promo / normal -->
+<rect x="705" y="202" width="550" height="72" fill="#111118" stroke="#1e1e26" rx="4"/>
+<text x="720" y="224" fill="#444455" class="sans" font-size="14" text-decoration="line-through">22.50 €</text>
+<text x="777" y="224" fill="#ee3333" class="sans" font-size="12" font-weight="bold">-33%</text>
+<text x="720" y="256" fill="#ffdd00" class="sans" font-size="28" font-weight="bold" filter="url(#glow-pub)" opacity="0.4">9.99 €</text>
+<text x="720" y="256" fill="#ffdd00" class="sans" font-size="28" font-weight="bold">9.99 €</text>
+<text x="850" y="240" fill="#444455" class="sans" font-size="11">Prix normal : 15.00 €</text>
+<text x="850" y="258" fill="#883322" class="sans" font-size="10">Promo flash → expire dans 02:47</text>
+
+<!-- Options / configurateur -->
+<text x="705" y="300" fill="#7788aa" class="sans" font-size="12" font-weight="bold">Configuration</text>
+<line x1="705" y1="308" x2="1255" y2="308" stroke="#1a1a28" stroke-width="1"/>
+<!-- Duree -->
+<text x="705" y="330" fill="#555577" class="sans" font-size="10">Duree de diffusion</text>
+<rect x="705" y="336" width="122" height="30" fill="#181828" stroke="#2244aa" rx="4"/>
+<text x="766" y="356" fill="#aabbdd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">7 jours</text>
+<rect x="835" y="336" width="122" height="30" fill="#111118" stroke="#222230" rx="4"/>
+<text x="896" y="356" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">14 jours (+8€)</text>
+<rect x="965" y="336" width="122" height="30" fill="#111118" stroke="#222230" rx="4"/>
+<text x="1026" y="356" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">30 jours (+20€)</text>
+<!-- Format -->
+<text x="705" y="390" fill="#555577" class="sans" font-size="10">Format</text>
+<rect x="705" y="396" width="170" height="30" fill="#181828" stroke="#2244aa" rx="4"/>
+<text x="790" y="416" fill="#aabbdd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Image statique</text>
+<rect x="883" y="396" width="170" height="30" fill="#111118" stroke="#222230" rx="4"/>
+<text x="968" y="416" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">GIF anime (+3€)</text>
+<!-- URL de la pub -->
+<text x="705" y="450" fill="#555577" class="sans" font-size="10">URL de destination (optionnel)</text>
+<rect x="705" y="456" width="540" height="30" fill="#131320" stroke="#222232" rx="4"/>
+<text x="720" y="476" fill="#2a2a44" class="sans" font-size="11">https://</text>
+
+<!-- LIMITES D'ACHAT -->
+<rect x="705" y="502" width="540" height="104" fill="#110a00" stroke="#442200" rx="4"/>
+<text x="720" y="522" fill="#cc6633" class="sans" font-size="11" font-weight="bold">Limites d'achat</text>
+<line x1="715" y1="528" x2="1235" y2="528" stroke="#331800" stroke-width="1"/>
+<text x="720" y="546" fill="#884422" class="sans" font-size="10">/ 1 seul cadre de pub actif par compte a la fois</text>
+<text x="720" y="562" fill="#884422" class="sans" font-size="10">/ Maximum 3 achats par mois (quota mensuel)</text>
+<text x="720" y="578" fill="#884422" class="sans" font-size="10">/ L'image doit respecter les CGU (pas de contenu adulte)</text>
+<text x="720" y="594" fill="#884422" class="sans" font-size="10">/ La pub expire automatiquement apres la duree choisie</text>
+
+<!-- Bouton acheter principal -->
+<rect x="705" y="618" width="338" height="46" fill="#cc3300" rx="23"/>
+<rect x="706" y="619" width="336" height="44" fill="none" stroke="#ff6600" stroke-width="0.5" rx="22"/>
+<text x="874" y="646" fill="#ffffff" text-anchor="middle" class="sans" font-size="14" font-weight="bold">Acheter — 9.99 €</text>
+
+<!-- Bouton pack -->
+<rect x="1051" y="618" width="224" height="46" fill="#111128" stroke="#2a2a5a" rx="23"/>
+<text x="1163" y="641" fill="#7788bb" text-anchor="middle" class="sans" font-size="11">Voir aussi le Pack</text>
+<text x="1163" y="657" fill="#7788bb" text-anchor="middle" class="sans" font-size="10">Pub + Abonnement</text>
+
+<!-- ── AVIS CLIENTS (bas) ── -->
+<rect x="193" y="656" width="1072" height="52" fill="#0c0c12" stroke="#181822" rx="4"/>
+<text x="210" y="674" fill="#555577" class="sans" font-size="10" font-weight="bold">Avis des acheteurs</text>
+<line x1="210" y1="680" x2="1255" y2="680" stroke="#1a1a22" stroke-width="0.5"/>
+<text x="210" y="697" fill="#334433" class="sans" font-size="9">★★★★★  192.168.x.x — "Bien visible, bonne visibilite dans le chat, je recommande !"</text>
+<text x="680" y="697" fill="#334433" class="sans" font-size="9">★★★★☆  10.x.x.x — "Prix correct, effet garanti sur mes clics."</text>
+
+<!-- FOOTER -->
+<rect x="0" y="696" width="1280" height="24" fill="#080810" stroke="#141420" stroke-width="1"/>
+<text x="640" y="712" fill="#222233" text-anchor="middle" class="sans" font-size="9">XIP Shop · Voir les CGV · Support : shop@xip.local</text>
+</svg>
diff --git a/maquettes/shop/shop3-.svg b/maquettes/shop/shop3-.svg
index 0018fdc..786db79 100644
--- a/maquettes/shop/shop3-.svg
+++ b/maquettes/shop/shop3-.svg
@@ -1,161 +1,161 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
-<defs>
-  <style>
-    .sans { font-family: Arial, Helvetica, sans-serif; }
-    .mono { font-family: 'Courier New', Courier, monospace; }
-  </style>
-  <filter id="glow-b"><feGaussianBlur stdDeviation="4"/></filter>
-  <filter id="glow-g"><feGaussianBlur stdDeviation="3"/></filter>
-</defs>
-
-<!-- FOND -->
-<rect width="1280" height="720" fill="#090910"/>
-
-<!-- ════════════════════ HEADER ════════════════════ -->
-<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
-<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-b)" opacity="0.4">XIP</text>
-<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
-<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
-<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
-<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Acces · Publicite</text>
-<text x="280" y="30" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
-<text x="342" y="30" fill="#1a1a33" class="sans" font-size="11">/</text>
-<text x="356" y="30" fill="#5566aa" class="sans" font-size="11" font-weight="bold">Abonnement NoAds</text>
-<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecte :</text>
-<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
-<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
-<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
-<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
-
-<!-- ════════════════════ LEFT NAV ════════════════════ -->
-<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
-<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
-<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATEGORIES</text>
-<text x="20" y="116" fill="#4a4a6a" class="sans" font-size="13">Tout voir</text>
-<text x="20" y="150" fill="#4a4a6a" class="sans" font-size="13">Publicite</text>
-<!-- Active: Abonnements -->
-<rect x="3" y="160" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
-<rect x="3" y="160" width="3" height="36" fill="#4455cc" rx="2"/>
-<text x="20" y="183" fill="#8899dd" class="sans" font-size="13" font-weight="bold">Abonnements</text>
-<text x="20" y="219" fill="#4a4a6a" class="sans" font-size="13">Cosmetiques</text>
-<text x="20" y="254" fill="#cc3322" class="sans" font-size="13">Promotions</text>
-<line x1="10" y1="268" x2="175" y2="268" stroke="#181822" stroke-width="1"/>
-<text x="16" y="290" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
-<text x="20" y="314" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
-<text x="20" y="346" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
-<!-- Statut abonnement -->
-<rect x="8" y="540" width="169" height="100" fill="#111116" stroke="#1e1e26" rx="4"/>
-<text x="93" y="558" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MON ABONNEMENT</text>
-<line x1="16" y1="564" x2="170" y2="564" stroke="#1a1a22" stroke-width="1"/>
-<text x="93" y="586" fill="#cc3322" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Inactif</text>
-<text x="93" y="604" fill="#444455" text-anchor="middle" class="sans" font-size="10">Aucun abonnement actif</text>
-<rect x="20" y="616" width="146" height="16" fill="#1a2200" stroke="#2a3800" rx="8"/>
-<text x="93" y="628" fill="#446644" text-anchor="middle" class="sans" font-size="9">Souscrire pour activer</text>
-
-<!-- ════════════════════ CONTENU ════════════════════ -->
-
-<!-- ── OFFRE PROMO ANNUEL ── -->
-<rect x="193" y="66" width="1079" height="44" fill="#080e18" stroke="#224488" stroke-width="1" rx="4"/>
-<text x="220" y="84" fill="#4466aa" class="sans" font-size="11" font-weight="bold">OFFRE ANNUELLE</text>
-<text x="340" y="84" fill="#334466" class="sans" font-size="10">Economisez 19.89 € par rapport au mensuel — 1er mois OFFERT a la souscription</text>
-<text x="900" y="85" fill="#44aaff" class="sans" font-size="11">En savoir plus</text>
-
-<!-- ── TITRE ── -->
-<text x="200" y="136" fill="#7788aa" class="sans" font-size="10">Abonnements /</text>
-<text x="278" y="136" fill="#aabbdd" class="sans" font-size="12" font-weight="bold">NoAds</text>
-<text x="200" y="154" fill="#404055" class="sans" font-size="10">Supprimez toutes les publicites du chat.</text>
-
-<!-- ══════════════════════════════════════════
-     CARTE MENSUEL (gauche)
-     x=193, y=162, w=510, h=430
-     ══════════════════════════════════════════ -->
-<rect x="193" y="162" width="510" height="430" fill="#101018" stroke="#1e1e2c" rx="8"/>
-<!-- En-tete carte -->
-<rect x="193" y="162" width="510" height="60" fill="#131322" rx="8"/>
-<line x1="193" y1="220" x2="703" y2="220" stroke="#1e1e30" stroke-width="1"/>
-<text x="448" y="188" fill="#aabbdd" text-anchor="middle" class="sans" font-size="16" font-weight="bold">Mensuel</text>
-<text x="448" y="208" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="10">Sans engagement</text>
-<!-- Prix mensuel -->
-<text x="340" y="264" fill="#8888aa" class="sans" font-size="14">a partir de</text>
-<text x="340" y="300" fill="#c8c8e8" class="sans" font-size="36" font-weight="bold">4.99</text>
-<text x="460" y="300" fill="#c8c8e8" class="sans" font-size="20" font-weight="bold">€</text>
-<text x="340" y="320" fill="#444455" class="sans" font-size="11">/mois · facture chaque mois</text>
-<!-- Features liste -->
-<line x1="210" y1="338" x2="695" y2="338" stroke="#1a1a2a" stroke-width="1"/>
-<text x="220" y="362" fill="#3a5a3a" class="sans" font-size="12">+ Toutes les publicites masquees</text>
-<text x="220" y="383" fill="#3a5a3a" class="sans" font-size="12">+ Bande gauche entierement vide</text>
-<text x="220" y="404" fill="#3a5a3a" class="sans" font-size="12">+ Annulable a tout moment</text>
-<text x="220" y="425" fill="#3a5a3a" class="sans" font-size="12">+ Actif immediatement apres paiement</text>
-<text x="220" y="446" fill="#3a4a5a" class="sans" font-size="12">+ Navigation fluide sans interruption</text>
-<text x="220" y="467" fill="#884422" class="sans" font-size="10">/ 1 abonnement actif par compte max</text>
-<text x="220" y="483" fill="#884422" class="sans" font-size="10">/ Pas de remboursement partiel si annulation</text>
-<text x="220" y="499" fill="#884422" class="sans" font-size="10">/ Ne s'applique pas aux messages sponsorises</text>
-<!-- Bouton mensuel -->
-<rect x="220" y="520" width="266" height="46" fill="#224488" rx="23"/>
-<rect x="221" y="521" width="264" height="44" fill="none" stroke="#4466cc" stroke-width="0.5" rx="22"/>
-<text x="353" y="548" fill="#ffffff" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Souscrire — 4.99 €/mois</text>
-
-<!-- ══════════════════════════════════════════
-     CARTE ANNUEL (droite) — RECOMMANDEE
-     x=711, y=162, w=561, h=430
-     ══════════════════════════════════════════ -->
-<rect x="711" y="162" width="561" height="430" fill="#0e1020" stroke="#334488" stroke-width="2" rx="8"/>
-<!-- Badge RECOMMANDE en haut -->
-<rect x="855" y="151" width="130" height="22" fill="#224488" rx="11"/>
-<rect x="856" y="152" width="128" height="20" fill="#2a55bb" rx="10"/>
-<text x="920" y="166" fill="#ffffff" text-anchor="middle" class="sans" font-size="10" font-weight="bold">RECOMMANDE</text>
-<!-- En-tete carte annuelle -->
-<rect x="711" y="162" width="561" height="60" fill="#131530" rx="8"/>
-<line x1="711" y1="220" x2="1272" y2="220" stroke="#2030500" stroke-width="1"/>
-<text x="991" y="188" fill="#aabbee" text-anchor="middle" class="sans" font-size="16" font-weight="bold">Annuel</text>
-<text x="991" y="208" fill="#4455aa" text-anchor="middle" class="sans" font-size="10">Engagement 12 mois · Meilleure valeur</text>
-<!-- Prix annuel + économie -->
-<text x="740" y="250" fill="#6677aa" class="sans" font-size="11" text-decoration="line-through">59.88 € /an</text>
-<rect x="810" y="238" width="80" height="18" fill="#113311" stroke="#226622" rx="9"/>
-<text x="850" y="251" fill="#44cc44" text-anchor="middle" class="sans" font-size="9" font-weight="bold">-33% PROMO</text>
-<text x="740" y="300" fill="#aabbee" class="sans" font-size="36" font-weight="bold" filter="url(#glow-b)" opacity="0.3">39.99</text>
-<text x="740" y="300" fill="#aabbee" class="sans" font-size="36" font-weight="bold">39.99</text>
-<text x="872" y="300" fill="#aabbee" class="sans" font-size="20" font-weight="bold">€</text>
-<text x="740" y="320" fill="#445566" class="sans" font-size="11">/an · soit 3.33 €/mois (economisez 19.89 €)</text>
-<!-- 1er mois offert badge -->
-<rect x="930" y="270" width="148" height="46" fill="#112233" stroke="#336688" rx="4"/>
-<text x="1004" y="290" fill="#55aadd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">1er MOIS</text>
-<text x="1004" y="308" fill="#44aacc" text-anchor="middle" class="sans" font-size="12" font-weight="bold">OFFERT</text>
-<!-- Features annuel -->
-<line x1="728" y1="338" x2="1260" y2="338" stroke="#1a2a4a" stroke-width="1"/>
-<text x="735" y="362" fill="#3a5a3a" class="sans" font-size="12">+ Tout ce qui est inclus dans Mensuel</text>
-<text x="735" y="383" fill="#4466aa" class="sans" font-size="12">+ 1 mois gratuit offert a la souscription</text>
-<text x="735" y="404" fill="#4466aa" class="sans" font-size="12">+ Acces prioritaire aux nouvelles fonctions</text>
-<text x="735" y="425" fill="#4466aa" class="sans" font-size="12">+ Badge exclusif a cote de votre IP</text>
-<text x="735" y="446" fill="#4466aa" class="sans" font-size="12">+ Support prioritaire par messagerie</text>
-<text x="735" y="467" fill="#884422" class="sans" font-size="10">/ Engagement annuel non remboursable</text>
-<text x="735" y="483" fill="#884422" class="sans" font-size="10">/ Renouvellement automatique sauf resiliation</text>
-<text x="735" y="499" fill="#884422" class="sans" font-size="10">/ Resiliation possible 30j avant l'echeance</text>
-<!-- Bouton annuel -->
-<rect x="735" y="520" width="306" height="46" fill="#1a3a7a" rx="23"/>
-<rect x="736" y="521" width="304" height="44" fill="none" stroke="#4477cc" stroke-width="1" rx="22"/>
-<text x="888" y="548" fill="#ffffff" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Souscrire — 39.99 €/an</text>
-
-<!-- ── COMPARATIF FEATURES ── -->
-<rect x="193" y="608" width="1079" height="80" fill="#0c0c14" stroke="#181826" rx="6"/>
-<text x="210" y="628" fill="#555577" class="sans" font-size="10" font-weight="bold">Comparatif des formules</text>
-<line x1="210" y1="634" x2="1262" y2="634" stroke="#181826" stroke-width="1"/>
-<!-- Headers -->
-<text x="530" y="650" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="10">MENSUEL</text>
-<text x="780" y="650" fill="#6677aa" text-anchor="middle" class="sans" font-size="10">ANNUEL</text>
-<!-- Colonnes -->
-<text x="210" y="668" fill="#404055" class="sans" font-size="10">Pubs masquees</text>
-<text x="530" y="668" fill="#44aa44" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
-<text x="780" y="668" fill="#44aa44" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
-<text x="870" y="668" fill="#404055" class="sans" font-size="10">Badge exclusif</text>
-<text x="1080" y="668" fill="#444455" text-anchor="middle" class="sans" font-size="11">Non</text>
-<text x="1200" y="668" fill="#4466aa" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
-<text x="210" y="682" fill="#404055" class="sans" font-size="10">Prix mensuel</text>
-<text x="530" y="682" fill="#c8c8e0" text-anchor="middle" class="sans" font-size="10">4.99 €</text>
-<text x="780" y="682" fill="#44cc44" text-anchor="middle" class="sans" font-size="10">3.33 € !</text>
-
-<!-- FOOTER -->
-<rect x="0" y="696" width="1280" height="24" fill="#080810" stroke="#141420" stroke-width="1"/>
-<text x="640" y="712" fill="#222233" text-anchor="middle" class="sans" font-size="9">XIP Shop · L'abonnement se renouvelle automatiquement · Annulable dans Compte > Abonnement · CGV sur xip.local</text>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
+<defs>
+  <style>
+    .sans { font-family: Arial, Helvetica, sans-serif; }
+    .mono { font-family: 'Courier New', Courier, monospace; }
+  </style>
+  <filter id="glow-b"><feGaussianBlur stdDeviation="4"/></filter>
+  <filter id="glow-g"><feGaussianBlur stdDeviation="3"/></filter>
+</defs>
+
+<!-- FOND -->
+<rect width="1280" height="720" fill="#090910"/>
+
+<!-- ════════════════════ HEADER ════════════════════ -->
+<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
+<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-b)" opacity="0.4">XIP</text>
+<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
+<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
+<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
+<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Acces · Publicite</text>
+<text x="280" y="30" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
+<text x="342" y="30" fill="#1a1a33" class="sans" font-size="11">/</text>
+<text x="356" y="30" fill="#5566aa" class="sans" font-size="11" font-weight="bold">Abonnement NoAds</text>
+<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecte :</text>
+<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
+<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
+<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
+<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
+
+<!-- ════════════════════ LEFT NAV ════════════════════ -->
+<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
+<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
+<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATEGORIES</text>
+<text x="20" y="116" fill="#4a4a6a" class="sans" font-size="13">Tout voir</text>
+<text x="20" y="150" fill="#4a4a6a" class="sans" font-size="13">Publicite</text>
+<!-- Active: Abonnements -->
+<rect x="3" y="160" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
+<rect x="3" y="160" width="3" height="36" fill="#4455cc" rx="2"/>
+<text x="20" y="183" fill="#8899dd" class="sans" font-size="13" font-weight="bold">Abonnements</text>
+<text x="20" y="219" fill="#4a4a6a" class="sans" font-size="13">Cosmetiques</text>
+<text x="20" y="254" fill="#cc3322" class="sans" font-size="13">Promotions</text>
+<line x1="10" y1="268" x2="175" y2="268" stroke="#181822" stroke-width="1"/>
+<text x="16" y="290" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
+<text x="20" y="314" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
+<text x="20" y="346" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
+<!-- Statut abonnement -->
+<rect x="8" y="540" width="169" height="100" fill="#111116" stroke="#1e1e26" rx="4"/>
+<text x="93" y="558" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MON ABONNEMENT</text>
+<line x1="16" y1="564" x2="170" y2="564" stroke="#1a1a22" stroke-width="1"/>
+<text x="93" y="586" fill="#cc3322" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Inactif</text>
+<text x="93" y="604" fill="#444455" text-anchor="middle" class="sans" font-size="10">Aucun abonnement actif</text>
+<rect x="20" y="616" width="146" height="16" fill="#1a2200" stroke="#2a3800" rx="8"/>
+<text x="93" y="628" fill="#446644" text-anchor="middle" class="sans" font-size="9">Souscrire pour activer</text>
+
+<!-- ════════════════════ CONTENU ════════════════════ -->
+
+<!-- ── OFFRE PROMO ANNUEL ── -->
+<rect x="193" y="66" width="1079" height="44" fill="#080e18" stroke="#224488" stroke-width="1" rx="4"/>
+<text x="220" y="84" fill="#4466aa" class="sans" font-size="11" font-weight="bold">OFFRE ANNUELLE</text>
+<text x="340" y="84" fill="#334466" class="sans" font-size="10">Economisez 19.89 € par rapport au mensuel — 1er mois OFFERT a la souscription</text>
+<text x="900" y="85" fill="#44aaff" class="sans" font-size="11">En savoir plus</text>
+
+<!-- ── TITRE ── -->
+<text x="200" y="136" fill="#7788aa" class="sans" font-size="10">Abonnements /</text>
+<text x="278" y="136" fill="#aabbdd" class="sans" font-size="12" font-weight="bold">NoAds</text>
+<text x="200" y="154" fill="#404055" class="sans" font-size="10">Supprimez toutes les publicites du chat.</text>
+
+<!-- ══════════════════════════════════════════
+     CARTE MENSUEL (gauche)
+     x=193, y=162, w=510, h=430
+     ══════════════════════════════════════════ -->
+<rect x="193" y="162" width="510" height="430" fill="#101018" stroke="#1e1e2c" rx="8"/>
+<!-- En-tete carte -->
+<rect x="193" y="162" width="510" height="60" fill="#131322" rx="8"/>
+<line x1="193" y1="220" x2="703" y2="220" stroke="#1e1e30" stroke-width="1"/>
+<text x="448" y="188" fill="#aabbdd" text-anchor="middle" class="sans" font-size="16" font-weight="bold">Mensuel</text>
+<text x="448" y="208" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="10">Sans engagement</text>
+<!-- Prix mensuel -->
+<text x="340" y="264" fill="#8888aa" class="sans" font-size="14">a partir de</text>
+<text x="340" y="300" fill="#c8c8e8" class="sans" font-size="36" font-weight="bold">4.99</text>
+<text x="460" y="300" fill="#c8c8e8" class="sans" font-size="20" font-weight="bold">€</text>
+<text x="340" y="320" fill="#444455" class="sans" font-size="11">/mois · facture chaque mois</text>
+<!-- Features liste -->
+<line x1="210" y1="338" x2="695" y2="338" stroke="#1a1a2a" stroke-width="1"/>
+<text x="220" y="362" fill="#3a5a3a" class="sans" font-size="12">+ Toutes les publicites masquees</text>
+<text x="220" y="383" fill="#3a5a3a" class="sans" font-size="12">+ Bande gauche entierement vide</text>
+<text x="220" y="404" fill="#3a5a3a" class="sans" font-size="12">+ Annulable a tout moment</text>
+<text x="220" y="425" fill="#3a5a3a" class="sans" font-size="12">+ Actif immediatement apres paiement</text>
+<text x="220" y="446" fill="#3a4a5a" class="sans" font-size="12">+ Navigation fluide sans interruption</text>
+<text x="220" y="467" fill="#884422" class="sans" font-size="10">/ 1 abonnement actif par compte max</text>
+<text x="220" y="483" fill="#884422" class="sans" font-size="10">/ Pas de remboursement partiel si annulation</text>
+<text x="220" y="499" fill="#884422" class="sans" font-size="10">/ Ne s'applique pas aux messages sponsorises</text>
+<!-- Bouton mensuel -->
+<rect x="220" y="520" width="266" height="46" fill="#224488" rx="23"/>
+<rect x="221" y="521" width="264" height="44" fill="none" stroke="#4466cc" stroke-width="0.5" rx="22"/>
+<text x="353" y="548" fill="#ffffff" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Souscrire — 4.99 €/mois</text>
+
+<!-- ══════════════════════════════════════════
+     CARTE ANNUEL (droite) — RECOMMANDEE
+     x=711, y=162, w=561, h=430
+     ══════════════════════════════════════════ -->
+<rect x="711" y="162" width="561" height="430" fill="#0e1020" stroke="#334488" stroke-width="2" rx="8"/>
+<!-- Badge RECOMMANDE en haut -->
+<rect x="855" y="151" width="130" height="22" fill="#224488" rx="11"/>
+<rect x="856" y="152" width="128" height="20" fill="#2a55bb" rx="10"/>
+<text x="920" y="166" fill="#ffffff" text-anchor="middle" class="sans" font-size="10" font-weight="bold">RECOMMANDE</text>
+<!-- En-tete carte annuelle -->
+<rect x="711" y="162" width="561" height="60" fill="#131530" rx="8"/>
+<line x1="711" y1="220" x2="1272" y2="220" stroke="#2030500" stroke-width="1"/>
+<text x="991" y="188" fill="#aabbee" text-anchor="middle" class="sans" font-size="16" font-weight="bold">Annuel</text>
+<text x="991" y="208" fill="#4455aa" text-anchor="middle" class="sans" font-size="10">Engagement 12 mois · Meilleure valeur</text>
+<!-- Prix annuel + économie -->
+<text x="740" y="250" fill="#6677aa" class="sans" font-size="11" text-decoration="line-through">59.88 € /an</text>
+<rect x="810" y="238" width="80" height="18" fill="#113311" stroke="#226622" rx="9"/>
+<text x="850" y="251" fill="#44cc44" text-anchor="middle" class="sans" font-size="9" font-weight="bold">-33% PROMO</text>
+<text x="740" y="300" fill="#aabbee" class="sans" font-size="36" font-weight="bold" filter="url(#glow-b)" opacity="0.3">39.99</text>
+<text x="740" y="300" fill="#aabbee" class="sans" font-size="36" font-weight="bold">39.99</text>
+<text x="872" y="300" fill="#aabbee" class="sans" font-size="20" font-weight="bold">€</text>
+<text x="740" y="320" fill="#445566" class="sans" font-size="11">/an · soit 3.33 €/mois (economisez 19.89 €)</text>
+<!-- 1er mois offert badge -->
+<rect x="930" y="270" width="148" height="46" fill="#112233" stroke="#336688" rx="4"/>
+<text x="1004" y="290" fill="#55aadd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">1er MOIS</text>
+<text x="1004" y="308" fill="#44aacc" text-anchor="middle" class="sans" font-size="12" font-weight="bold">OFFERT</text>
+<!-- Features annuel -->
+<line x1="728" y1="338" x2="1260" y2="338" stroke="#1a2a4a" stroke-width="1"/>
+<text x="735" y="362" fill="#3a5a3a" class="sans" font-size="12">+ Tout ce qui est inclus dans Mensuel</text>
+<text x="735" y="383" fill="#4466aa" class="sans" font-size="12">+ 1 mois gratuit offert a la souscription</text>
+<text x="735" y="404" fill="#4466aa" class="sans" font-size="12">+ Acces prioritaire aux nouvelles fonctions</text>
+<text x="735" y="425" fill="#4466aa" class="sans" font-size="12">+ Badge exclusif a cote de votre IP</text>
+<text x="735" y="446" fill="#4466aa" class="sans" font-size="12">+ Support prioritaire par messagerie</text>
+<text x="735" y="467" fill="#884422" class="sans" font-size="10">/ Engagement annuel non remboursable</text>
+<text x="735" y="483" fill="#884422" class="sans" font-size="10">/ Renouvellement automatique sauf resiliation</text>
+<text x="735" y="499" fill="#884422" class="sans" font-size="10">/ Resiliation possible 30j avant l'echeance</text>
+<!-- Bouton annuel -->
+<rect x="735" y="520" width="306" height="46" fill="#1a3a7a" rx="23"/>
+<rect x="736" y="521" width="304" height="44" fill="none" stroke="#4477cc" stroke-width="1" rx="22"/>
+<text x="888" y="548" fill="#ffffff" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Souscrire — 39.99 €/an</text>
+
+<!-- ── COMPARATIF FEATURES ── -->
+<rect x="193" y="608" width="1079" height="80" fill="#0c0c14" stroke="#181826" rx="6"/>
+<text x="210" y="628" fill="#555577" class="sans" font-size="10" font-weight="bold">Comparatif des formules</text>
+<line x1="210" y1="634" x2="1262" y2="634" stroke="#181826" stroke-width="1"/>
+<!-- Headers -->
+<text x="530" y="650" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="10">MENSUEL</text>
+<text x="780" y="650" fill="#6677aa" text-anchor="middle" class="sans" font-size="10">ANNUEL</text>
+<!-- Colonnes -->
+<text x="210" y="668" fill="#404055" class="sans" font-size="10">Pubs masquees</text>
+<text x="530" y="668" fill="#44aa44" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
+<text x="780" y="668" fill="#44aa44" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
+<text x="870" y="668" fill="#404055" class="sans" font-size="10">Badge exclusif</text>
+<text x="1080" y="668" fill="#444455" text-anchor="middle" class="sans" font-size="11">Non</text>
+<text x="1200" y="668" fill="#4466aa" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
+<text x="210" y="682" fill="#404055" class="sans" font-size="10">Prix mensuel</text>
+<text x="530" y="682" fill="#c8c8e0" text-anchor="middle" class="sans" font-size="10">4.99 €</text>
+<text x="780" y="682" fill="#44cc44" text-anchor="middle" class="sans" font-size="10">3.33 € !</text>
+
+<!-- FOOTER -->
+<rect x="0" y="696" width="1280" height="24" fill="#080810" stroke="#141420" stroke-width="1"/>
+<text x="640" y="712" fill="#222233" text-anchor="middle" class="sans" font-size="9">XIP Shop · L'abonnement se renouvelle automatiquement · Annulable dans Compte > Abonnement · CGV sur xip.local</text>
+</svg>
diff --git a/maquettes/shop/shop4.svg b/maquettes/shop/shop4.svg
index 3875d76..a76e3d6 100644
--- a/maquettes/shop/shop4.svg
+++ b/maquettes/shop/shop4.svg
@@ -1,239 +1,239 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
-<defs>
-  <style>
-    .sans { font-family: Arial, Helvetica, sans-serif; }
-    .mono { font-family: 'Courier New', Courier, monospace; }
-  </style>
-  <filter id="glow-gold"><feGaussianBlur stdDeviation="5"/></filter>
-  <filter id="glow-soft"><feGaussianBlur stdDeviation="3"/></filter>
-  <filter id="glow-pet"><feGaussianBlur stdDeviation="3"/></filter>
-</defs>
-
-<!-- FOND -->
-<rect width="1280" height="720" fill="#090910"/>
-
-<!-- ════════════════════ HEADER ════════════════════ -->
-<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
-<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-soft)" opacity="0.4">XIP</text>
-<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
-<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
-<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
-<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Acces · Publicite</text>
-<text x="280" y="30" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
-<text x="342" y="30" fill="#1a1a33" class="sans" font-size="11">/</text>
-<text x="356" y="30" fill="#aa9944" class="sans" font-size="11" font-weight="bold">Cosmetiques</text>
-<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecte :</text>
-<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
-<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
-<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
-<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
-
-<!-- ════════════════════ LEFT NAV ════════════════════ -->
-<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
-<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
-<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATEGORIES</text>
-<text x="20" y="116" fill="#4a4a6a" class="sans" font-size="13">Tout voir</text>
-<text x="20" y="150" fill="#4a4a6a" class="sans" font-size="13">Publicite</text>
-<text x="20" y="184" fill="#4a4a6a" class="sans" font-size="13">Abonnements</text>
-<!-- Active: Cosmetiques -->
-<rect x="3" y="194" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
-<rect x="3" y="194" width="3" height="36" fill="#cc9900" rx="2"/>
-<text x="20" y="217" fill="#ddaa55" class="sans" font-size="13" font-weight="bold">Cosmetiques</text>
-<text x="20" y="253" fill="#cc3322" class="sans" font-size="13">Promotions</text>
-<line x1="10" y1="267" x2="175" y2="267" stroke="#181822" stroke-width="1"/>
-<text x="16" y="289" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
-<text x="20" y="313" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
-<text x="20" y="345" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
-<!-- Cosmetics actifs dans nav -->
-<rect x="8" y="510" width="169" height="130" fill="#111116" stroke="#1e1e26" rx="4"/>
-<text x="93" y="528" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MES COSMETIQUES</text>
-<line x1="16" y1="534" x2="170" y2="534" stroke="#1a1a22" stroke-width="1"/>
-<text x="20" y="553" fill="#555566" class="sans" font-size="10">Style :</text>
-<text x="93" y="553" fill="#cc3322" class="sans" font-size="10">Aucun actif</text>
-<text x="20" y="572" fill="#555566" class="sans" font-size="10">Pets :</text>
-<text x="93" y="572" fill="#cc3322" class="sans" font-size="10">0 / 3 actifs</text>
-<line x1="16" y1="584" x2="170" y2="584" stroke="#1a1a22" stroke-width="1"/>
-<text x="93" y="603" fill="#333344" text-anchor="middle" class="sans" font-size="9">Pets disponibles :</text>
-<rect x="16" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
-<text x="30" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
-<rect x="50" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
-<text x="64" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
-<rect x="84" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
-<text x="98" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
-<text x="93" y="634" fill="#222230" text-anchor="middle" class="sans" font-size="8">0/3 slots</text>
-
-<!-- ════════════════════ CONTENU PRINCIPAL ════════════════════ -->
-
-<!-- ── APERCU GLOBAL (preview barre en haut) ── -->
-<rect x="193" y="66" width="1079" height="78" fill="#0c0c10" stroke="#1e1e28" rx="6"/>
-<!-- Titre preview -->
-<text x="210" y="84" fill="#555577" class="sans" font-size="10" font-weight="bold">APERCU — Votre nom dans le chat</text>
-<line x1="210" y1="90" x2="1262" y2="90" stroke="#181822" stroke-width="0.5"/>
-<!-- Preview normal -->
-<text x="220" y="108" fill="#404055" class="sans" font-size="9">Sans cosmetique</text>
-<text x="220" y="124" fill="#505070" class="mono" font-size="13">192.168.1.45</text>
-<!-- Preview style doré -->
-<text x="440" y="108" fill="#404055" class="sans" font-size="9">Avec Style Dore</text>
-<text x="440" y="124" fill="#aa8800" class="mono" font-size="13" font-weight="bold" filter="url(#glow-gold)" opacity="0.7">192.168.1.45</text>
-<text x="440" y="124" fill="#ffdd44" class="mono" font-size="13" font-weight="bold">192.168.1.45</text>
-<!-- Preview pet -->
-<text x="660" y="108" fill="#404055" class="sans" font-size="9">Avec Pet (coeur)</text>
-<text x="660" y="124" fill="#33aa66" class="sans" font-size="15">&#9829;</text>
-<text x="682" y="124" fill="#505070" class="mono" font-size="13">192.168.1.45</text>
-<text x="810" y="124" fill="#33aa66" class="sans" font-size="15">&#9829;</text>
-<!-- Preview les deux -->
-<text x="880" y="108" fill="#404055" class="sans" font-size="9">Style Dore + Pet etoile</text>
-<text x="880" y="124" fill="#cc8800" class="sans" font-size="15">&#9733;</text>
-<text x="902" y="124" fill="#aa8800" class="mono" font-size="13" font-weight="bold" filter="url(#glow-gold)" opacity="0.8">192.168.1.45</text>
-<text x="902" y="124" fill="#ffdd44" class="mono" font-size="13" font-weight="bold">192.168.1.45</text>
-<text x="1048" y="124" fill="#cc8800" class="sans" font-size="15">&#9733;</text>
-
-<!-- ════════════════════════════════════════════
-     SECTION GAUCHE : STYLE DORE
-     x=193, y=152, w=520, h=490
-     ════════════════════════════════════════════ -->
-<rect x="193" y="152" width="520" height="490" fill="#100e04" stroke="#2a2000" rx="6"/>
-<!-- En-tete section -->
-<rect x="193" y="152" width="520" height="48" fill="#181400" stroke="#332200" rx="6"/>
-<line x1="193" y1="198" x2="713" y2="198" stroke="#281e00" stroke-width="1"/>
-<text x="290" y="174" fill="#cc9900" class="sans" font-size="16" font-weight="bold">Style Dore</text>
-<text x="398" y="174" fill="#886600" class="sans" font-size="10">Permanent · Unique</text>
-<!-- Badge stock -->
-<rect x="548" y="159" width="140" height="22" fill="#331a00" stroke="#664400" rx="4"/>
-<text x="618" y="174" fill="#cc7700" text-anchor="middle" class="sans" font-size="9" font-weight="bold">STOCK LIMITE : 43 / 50</text>
-
-<!-- Barre de progression stock -->
-<rect x="210" y="208" width="486" height="10" fill="#111108" stroke="#221a00" rx="5"/>
-<rect x="210" y="208" width="418" height="10" fill="#884400" rx="5"/>
-<rect x="210" y="208" width="418" height="10" fill="none" stroke="#aa6600" stroke-width="0.5" rx="5" opacity="0.6"/>
-<text x="700" y="218" fill="#664400" class="sans" font-size="8">86%</text>
-
-<!-- Comparatif avant/apres -->
-<text x="260" y="242" fill="#334433" class="sans" font-size="9">AVANT</text>
-<text x="450" y="242" fill="#554433" class="sans" font-size="9">APRES</text>
-<rect x="210" y="250" width="200" height="44" fill="#0c0c10" stroke="#161620" rx="4"/>
-<text x="310" y="277" fill="#555566" text-anchor="middle" class="mono" font-size="14">192.168.1.45</text>
-<rect x="420" y="250" width="272" height="44" fill="#120e00" stroke="#332200" rx="4"/>
-<text x="556" y="272" fill="#886600" text-anchor="middle" class="mono" font-size="14" font-weight="bold" filter="url(#glow-gold)" opacity="0.8">192.168.1.45</text>
-<text x="556" y="272" fill="#ffee66" text-anchor="middle" class="mono" font-size="14" font-weight="bold">192.168.1.45</text>
-
-<!-- Description -->
-<text x="210" y="320" fill="#665500" class="sans" font-size="11">Votre adresse IP s'affiche dans une couleur doree</text>
-<text x="210" y="337" fill="#665500" class="sans" font-size="11">brillante avec un subtil effet lumineux, visible par</text>
-<text x="210" y="354" fill="#665500" class="sans" font-size="11">tous les participants du chat.</text>
-
-<!-- Features -->
-<text x="210" y="380" fill="#3a5a3a" class="sans" font-size="11">+ Couleur or avec effet de lueur</text>
-<text x="210" y="397" fill="#3a5a3a" class="sans" font-size="11">+ Visible de tous dans le chat public</text>
-<text x="210" y="414" fill="#3a5a3a" class="sans" font-size="11">+ Permanant, sans abonnement</text>
-<text x="210" y="431" fill="#3a5a3a" class="sans" font-size="11">+ Remplacable par un autre style</text>
-<text x="210" y="452" fill="#884422" class="sans" font-size="10">/ 1 seul style actif a la fois</text>
-<text x="210" y="468" fill="#884422" class="sans" font-size="10">/ Non remboursable apres activation</text>
-<text x="210" y="484" fill="#884422" class="sans" font-size="10">/ Stock definitif : 50 exemplaires disponibles</text>
-
-<!-- Prix + bouton -->
-<text x="210" y="530" fill="#ffdd00" class="sans" font-size="28" font-weight="bold" filter="url(#glow-gold)" opacity="0.4">9.99 €</text>
-<text x="210" y="530" fill="#ffdd00" class="sans" font-size="28" font-weight="bold">9.99 €</text>
-<text x="210" y="548" fill="#665500" class="sans" font-size="9">Achat unique · Permanent</text>
-<rect x="210" y="558" width="280" height="46" fill="#664400" rx="23"/>
-<rect x="211" y="559" width="278" height="44" fill="none" stroke="#cc8800" stroke-width="1" rx="22"/>
-<text x="350" y="586" fill="#ffdd00" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Acheter le Style Dore</text>
-
-<!-- ════════════════════════════════════════════
-     SECTION DROITE : PETS
-     x=721, y=152, w=551, h=490
-     ════════════════════════════════════════════ -->
-<rect x="721" y="152" width="551" height="490" fill="#060c08" stroke="#0e2010" rx="6"/>
-<!-- En-tete section -->
-<rect x="721" y="152" width="551" height="48" fill="#081410" stroke="#102018" rx="6"/>
-<line x1="721" y1="198" x2="1272" y2="198" stroke="#0e1e14" stroke-width="1"/>
-<text x="818" y="174" fill="#44cc88" class="sans" font-size="16" font-weight="bold">Pets de Nom</text>
-<text x="940" y="174" fill="#226644" class="sans" font-size="10">7.99 € / pet · Max 3 actifs</text>
-<!-- Badge NEW -->
-<rect x="1148" y="159" width="66" height="22" fill="#113322" stroke="#226644" rx="4"/>
-<text x="1181" y="174" fill="#44cc88" text-anchor="middle" class="sans" font-size="9" font-weight="bold">NOUVEAU</text>
-
-<!-- GRILLE DES PETS : 3 cols x 3 rows -->
-<!-- Pet 1 — Coeur (selected) -->
-<rect x="733" y="208" width="158" height="80" fill="#0a1810" stroke="#226644" stroke-width="2" rx="5"/>
-<text x="812" y="254" fill="#33aa66" text-anchor="middle" class="sans" font-size="32">&#9829;</text>
-<text x="812" y="278" fill="#33aa66" text-anchor="middle" class="sans" font-size="9" font-weight="bold">Coeur</text>
-<rect x="812" y="208" width="0" height="0"/>
-<!-- Selection marker -->
-<circle cx="877" cy="214" r="7" fill="#226644" stroke="#44aa66" stroke-width="1"/>
-<text x="877" y="218" fill="#44ff88" text-anchor="middle" class="sans" font-size="8" font-weight="bold">✓</text>
-
-<!-- Pet 2 — Etoile -->
-<rect x="899" y="208" width="158" height="80" fill="#101008" stroke="#332200" stroke-width="1" rx="5"/>
-<text x="978" y="254" fill="#cc8800" text-anchor="middle" class="sans" font-size="32">&#9733;</text>
-<text x="978" y="278" fill="#665500" text-anchor="middle" class="sans" font-size="9">Etoile</text>
-
-<!-- Pet 3 — Croix de diamant -->
-<rect x="1065" y="208" width="158" height="80" fill="#101008" stroke="#222230" stroke-width="1" rx="5"/>
-<text x="1144" y="254" fill="#4488cc" text-anchor="middle" class="sans" font-size="32">&#9830;</text>
-<text x="1144" y="278" fill="#334466" text-anchor="middle" class="sans" font-size="9">Diamant</text>
-
-<!-- Pet 4 — Trefle -->
-<rect x="733" y="298" width="158" height="80" fill="#101008" stroke="#222230" stroke-width="1" rx="5"/>
-<text x="812" y="344" fill="#22aa44" text-anchor="middle" class="sans" font-size="32">&#9827;</text>
-<text x="812" y="368" fill="#226644" text-anchor="middle" class="sans" font-size="9">Trefle</text>
-
-<!-- Pet 5 — Couronne -->
-<rect x="899" y="298" width="158" height="80" fill="#101008" stroke="#332200" stroke-width="1" rx="5"/>
-<text x="978" y="344" fill="#cc8800" text-anchor="middle" class="sans" font-size="28">&#9818;</text>
-<text x="978" y="368" fill="#665500" text-anchor="middle" class="sans" font-size="9">Couronne</text>
-
-<!-- Pet 6 — Feu -->
-<rect x="1065" y="298" width="158" height="80" fill="#100808" stroke="#330000" stroke-width="1" rx="5"/>
-<text x="1144" y="344" fill="#cc3300" text-anchor="middle" class="sans" font-size="32">&#9762;</text>
-<text x="1144" y="368" fill="#662200" text-anchor="middle" class="sans" font-size="9">Crane</text>
-
-<!-- Options position -->
-<text x="733" y="402" fill="#226644" class="sans" font-size="11" font-weight="bold">Position du pet</text>
-<rect x="733" y="410" width="148" height="30" fill="#0e1e12" stroke="#226644" stroke-width="1" rx="4"/>
-<text x="807" y="430" fill="#44aa66" text-anchor="middle" class="sans" font-size="10" font-weight="bold">A gauche du nom</text>
-<rect x="889" y="410" width="148" height="30" fill="#080e0a" stroke="#183020" rx="4"/>
-<text x="963" y="430" fill="#335544" text-anchor="middle" class="sans" font-size="10">A droite du nom</text>
-<rect x="1045" y="410" width="178" height="30" fill="#080e0a" stroke="#183020" rx="4"/>
-<text x="1134" y="430" fill="#335544" text-anchor="middle" class="sans" font-size="10">Des deux cotes</text>
-
-<!-- Limites pets -->
-<rect x="733" y="452" width="490" height="72" fill="#080e08" stroke="#112211" rx="4"/>
-<text x="748" y="472" fill="#226644" class="sans" font-size="10" font-weight="bold">Limites d'achat</text>
-<text x="748" y="490" fill="#445544" class="sans" font-size="10">/ Maximum 3 pets actifs simultanement par compte</text>
-<text x="748" y="506" fill="#445544" class="sans" font-size="10">/ Chaque pet occupe un slot (gauche, droite, haut)</text>
-<text x="748" y="522" fill="#445544" class="sans" font-size="10">/ Non remboursable apres activation · Transfert impossible</text>
-
-<!-- Prix + Bouton pet -->
-<text x="733" y="556" fill="#44cc88" class="sans" font-size="22" font-weight="bold" filter="url(#glow-pet)" opacity="0.4">7.99 €</text>
-<text x="733" y="556" fill="#44cc88" class="sans" font-size="22" font-weight="bold">7.99 €</text>
-<text x="733" y="572" fill="#226644" class="sans" font-size="9">par pet · Achat unique · Permanent</text>
-<rect x="733" y="580" width="274" height="44" fill="#113322" rx="22"/>
-<rect x="734" y="581" width="272" height="42" fill="none" stroke="#336644" stroke-width="1" rx="21"/>
-<text x="870" y="607" fill="#44cc88" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Ajouter ce pet — 7.99 €</text>
-
-<!-- ── OFFRE BUNDLE (bas, pleine largeur) ── -->
-<rect x="193" y="650" width="1079" height="56" fill="#100c00" stroke="#664400" stroke-width="1.5" rx="6"/>
-<!-- Icone pack -->
-<rect x="193" y="650" width="130" height="56" fill="#1a1200" rx="6"/>
-<text x="258" y="678" fill="#cc8800" text-anchor="middle" class="sans" font-size="12" font-weight="bold">PACK</text>
-<text x="258" y="695" fill="#886600" text-anchor="middle" class="sans" font-size="9">Bundle</text>
-<line x1="323" y1="656" x2="323" y2="700" stroke="#332200" stroke-width="1"/>
-<!-- Texte bundle -->
-<text x="340" y="672" fill="#ffcc00" class="sans" font-size="13" font-weight="bold">Style Dore + 1 Pet au choix</text>
-<text x="340" y="691" fill="#cc8800" class="sans" font-size="10">9.99 € + 7.99 € =</text>
-<text x="455" y="691" fill="#ee4444" class="sans" font-size="10" text-decoration="line-through">17.98 €</text>
-<text x="500" y="691" fill="#44cc44" class="sans" font-size="10">→ seulement 14.99 € (-3 €)</text>
-<!-- Timer bundle -->
-<text x="780" y="672" fill="#ff8800" class="sans" font-size="10">Offre Flash :</text>
-<text x="860" y="672" fill="#ffaa00" class="mono" font-size="12" font-weight="bold">02:47:33</text>
-<!-- Bouton bundle -->
-<rect x="990" y="660" width="272" height="36" fill="#664400" rx="18"/>
-<rect x="991" y="661" width="270" height="34" fill="none" stroke="#cc8800" stroke-width="0.5" rx="17"/>
-<text x="1126" y="683" fill="#ffdd00" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Acheter le Pack 14.99 €</text>
-
-<!-- FOOTER -->
-<rect x="0" y="710" width="1280" height="10" fill="#080810" stroke="#141420" stroke-width="1"/>
-<text x="640" y="718" fill="#222233" text-anchor="middle" class="sans" font-size="7">XIP Shop · Les cosmetiques sont definitifs sauf mention contraire · CGV sur xip.local</text>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
+<defs>
+  <style>
+    .sans { font-family: Arial, Helvetica, sans-serif; }
+    .mono { font-family: 'Courier New', Courier, monospace; }
+  </style>
+  <filter id="glow-gold"><feGaussianBlur stdDeviation="5"/></filter>
+  <filter id="glow-soft"><feGaussianBlur stdDeviation="3"/></filter>
+  <filter id="glow-pet"><feGaussianBlur stdDeviation="3"/></filter>
+</defs>
+
+<!-- FOND -->
+<rect width="1280" height="720" fill="#090910"/>
+
+<!-- ════════════════════ HEADER ════════════════════ -->
+<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
+<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-soft)" opacity="0.4">XIP</text>
+<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
+<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
+<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
+<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Acces · Publicite</text>
+<text x="280" y="30" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
+<text x="342" y="30" fill="#1a1a33" class="sans" font-size="11">/</text>
+<text x="356" y="30" fill="#aa9944" class="sans" font-size="11" font-weight="bold">Cosmetiques</text>
+<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecte :</text>
+<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
+<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
+<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
+<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
+
+<!-- ════════════════════ LEFT NAV ════════════════════ -->
+<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
+<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
+<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATEGORIES</text>
+<text x="20" y="116" fill="#4a4a6a" class="sans" font-size="13">Tout voir</text>
+<text x="20" y="150" fill="#4a4a6a" class="sans" font-size="13">Publicite</text>
+<text x="20" y="184" fill="#4a4a6a" class="sans" font-size="13">Abonnements</text>
+<!-- Active: Cosmetiques -->
+<rect x="3" y="194" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
+<rect x="3" y="194" width="3" height="36" fill="#cc9900" rx="2"/>
+<text x="20" y="217" fill="#ddaa55" class="sans" font-size="13" font-weight="bold">Cosmetiques</text>
+<text x="20" y="253" fill="#cc3322" class="sans" font-size="13">Promotions</text>
+<line x1="10" y1="267" x2="175" y2="267" stroke="#181822" stroke-width="1"/>
+<text x="16" y="289" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
+<text x="20" y="313" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
+<text x="20" y="345" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
+<!-- Cosmetics actifs dans nav -->
+<rect x="8" y="510" width="169" height="130" fill="#111116" stroke="#1e1e26" rx="4"/>
+<text x="93" y="528" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MES COSMETIQUES</text>
+<line x1="16" y1="534" x2="170" y2="534" stroke="#1a1a22" stroke-width="1"/>
+<text x="20" y="553" fill="#555566" class="sans" font-size="10">Style :</text>
+<text x="93" y="553" fill="#cc3322" class="sans" font-size="10">Aucun actif</text>
+<text x="20" y="572" fill="#555566" class="sans" font-size="10">Pets :</text>
+<text x="93" y="572" fill="#cc3322" class="sans" font-size="10">0 / 3 actifs</text>
+<line x1="16" y1="584" x2="170" y2="584" stroke="#1a1a22" stroke-width="1"/>
+<text x="93" y="603" fill="#333344" text-anchor="middle" class="sans" font-size="9">Pets disponibles :</text>
+<rect x="16" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
+<text x="30" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
+<rect x="50" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
+<text x="64" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
+<rect x="84" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
+<text x="98" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
+<text x="93" y="634" fill="#222230" text-anchor="middle" class="sans" font-size="8">0/3 slots</text>
+
+<!-- ════════════════════ CONTENU PRINCIPAL ════════════════════ -->
+
+<!-- ── APERCU GLOBAL (preview barre en haut) ── -->
+<rect x="193" y="66" width="1079" height="78" fill="#0c0c10" stroke="#1e1e28" rx="6"/>
+<!-- Titre preview -->
+<text x="210" y="84" fill="#555577" class="sans" font-size="10" font-weight="bold">APERCU — Votre nom dans le chat</text>
+<line x1="210" y1="90" x2="1262" y2="90" stroke="#181822" stroke-width="0.5"/>
+<!-- Preview normal -->
+<text x="220" y="108" fill="#404055" class="sans" font-size="9">Sans cosmetique</text>
+<text x="220" y="124" fill="#505070" class="mono" font-size="13">192.168.1.45</text>
+<!-- Preview style doré -->
+<text x="440" y="108" fill="#404055" class="sans" font-size="9">Avec Style Dore</text>
+<text x="440" y="124" fill="#aa8800" class="mono" font-size="13" font-weight="bold" filter="url(#glow-gold)" opacity="0.7">192.168.1.45</text>
+<text x="440" y="124" fill="#ffdd44" class="mono" font-size="13" font-weight="bold">192.168.1.45</text>
+<!-- Preview pet -->
+<text x="660" y="108" fill="#404055" class="sans" font-size="9">Avec Pet (coeur)</text>
+<text x="660" y="124" fill="#33aa66" class="sans" font-size="15">&#9829;</text>
+<text x="682" y="124" fill="#505070" class="mono" font-size="13">192.168.1.45</text>
+<text x="810" y="124" fill="#33aa66" class="sans" font-size="15">&#9829;</text>
+<!-- Preview les deux -->
+<text x="880" y="108" fill="#404055" class="sans" font-size="9">Style Dore + Pet etoile</text>
+<text x="880" y="124" fill="#cc8800" class="sans" font-size="15">&#9733;</text>
+<text x="902" y="124" fill="#aa8800" class="mono" font-size="13" font-weight="bold" filter="url(#glow-gold)" opacity="0.8">192.168.1.45</text>
+<text x="902" y="124" fill="#ffdd44" class="mono" font-size="13" font-weight="bold">192.168.1.45</text>
+<text x="1048" y="124" fill="#cc8800" class="sans" font-size="15">&#9733;</text>
+
+<!-- ════════════════════════════════════════════
+     SECTION GAUCHE : STYLE DORE
+     x=193, y=152, w=520, h=490
+     ════════════════════════════════════════════ -->
+<rect x="193" y="152" width="520" height="490" fill="#100e04" stroke="#2a2000" rx="6"/>
+<!-- En-tete section -->
+<rect x="193" y="152" width="520" height="48" fill="#181400" stroke="#332200" rx="6"/>
+<line x1="193" y1="198" x2="713" y2="198" stroke="#281e00" stroke-width="1"/>
+<text x="290" y="174" fill="#cc9900" class="sans" font-size="16" font-weight="bold">Style Dore</text>
+<text x="398" y="174" fill="#886600" class="sans" font-size="10">Permanent · Unique</text>
+<!-- Badge stock -->
+<rect x="548" y="159" width="140" height="22" fill="#331a00" stroke="#664400" rx="4"/>
+<text x="618" y="174" fill="#cc7700" text-anchor="middle" class="sans" font-size="9" font-weight="bold">STOCK LIMITE : 43 / 50</text>
+
+<!-- Barre de progression stock -->
+<rect x="210" y="208" width="486" height="10" fill="#111108" stroke="#221a00" rx="5"/>
+<rect x="210" y="208" width="418" height="10" fill="#884400" rx="5"/>
+<rect x="210" y="208" width="418" height="10" fill="none" stroke="#aa6600" stroke-width="0.5" rx="5" opacity="0.6"/>
+<text x="700" y="218" fill="#664400" class="sans" font-size="8">86%</text>
+
+<!-- Comparatif avant/apres -->
+<text x="260" y="242" fill="#334433" class="sans" font-size="9">AVANT</text>
+<text x="450" y="242" fill="#554433" class="sans" font-size="9">APRES</text>
+<rect x="210" y="250" width="200" height="44" fill="#0c0c10" stroke="#161620" rx="4"/>
+<text x="310" y="277" fill="#555566" text-anchor="middle" class="mono" font-size="14">192.168.1.45</text>
+<rect x="420" y="250" width="272" height="44" fill="#120e00" stroke="#332200" rx="4"/>
+<text x="556" y="272" fill="#886600" text-anchor="middle" class="mono" font-size="14" font-weight="bold" filter="url(#glow-gold)" opacity="0.8">192.168.1.45</text>
+<text x="556" y="272" fill="#ffee66" text-anchor="middle" class="mono" font-size="14" font-weight="bold">192.168.1.45</text>
+
+<!-- Description -->
+<text x="210" y="320" fill="#665500" class="sans" font-size="11">Votre adresse IP s'affiche dans une couleur doree</text>
+<text x="210" y="337" fill="#665500" class="sans" font-size="11">brillante avec un subtil effet lumineux, visible par</text>
+<text x="210" y="354" fill="#665500" class="sans" font-size="11">tous les participants du chat.</text>
+
+<!-- Features -->
+<text x="210" y="380" fill="#3a5a3a" class="sans" font-size="11">+ Couleur or avec effet de lueur</text>
+<text x="210" y="397" fill="#3a5a3a" class="sans" font-size="11">+ Visible de tous dans le chat public</text>
+<text x="210" y="414" fill="#3a5a3a" class="sans" font-size="11">+ Permanant, sans abonnement</text>
+<text x="210" y="431" fill="#3a5a3a" class="sans" font-size="11">+ Remplacable par un autre style</text>
+<text x="210" y="452" fill="#884422" class="sans" font-size="10">/ 1 seul style actif a la fois</text>
+<text x="210" y="468" fill="#884422" class="sans" font-size="10">/ Non remboursable apres activation</text>
+<text x="210" y="484" fill="#884422" class="sans" font-size="10">/ Stock definitif : 50 exemplaires disponibles</text>
+
+<!-- Prix + bouton -->
+<text x="210" y="530" fill="#ffdd00" class="sans" font-size="28" font-weight="bold" filter="url(#glow-gold)" opacity="0.4">9.99 €</text>
+<text x="210" y="530" fill="#ffdd00" class="sans" font-size="28" font-weight="bold">9.99 €</text>
+<text x="210" y="548" fill="#665500" class="sans" font-size="9">Achat unique · Permanent</text>
+<rect x="210" y="558" width="280" height="46" fill="#664400" rx="23"/>
+<rect x="211" y="559" width="278" height="44" fill="none" stroke="#cc8800" stroke-width="1" rx="22"/>
+<text x="350" y="586" fill="#ffdd00" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Acheter le Style Dore</text>
+
+<!-- ════════════════════════════════════════════
+     SECTION DROITE : PETS
+     x=721, y=152, w=551, h=490
+     ════════════════════════════════════════════ -->
+<rect x="721" y="152" width="551" height="490" fill="#060c08" stroke="#0e2010" rx="6"/>
+<!-- En-tete section -->
+<rect x="721" y="152" width="551" height="48" fill="#081410" stroke="#102018" rx="6"/>
+<line x1="721" y1="198" x2="1272" y2="198" stroke="#0e1e14" stroke-width="1"/>
+<text x="818" y="174" fill="#44cc88" class="sans" font-size="16" font-weight="bold">Pets de Nom</text>
+<text x="940" y="174" fill="#226644" class="sans" font-size="10">7.99 € / pet · Max 3 actifs</text>
+<!-- Badge NEW -->
+<rect x="1148" y="159" width="66" height="22" fill="#113322" stroke="#226644" rx="4"/>
+<text x="1181" y="174" fill="#44cc88" text-anchor="middle" class="sans" font-size="9" font-weight="bold">NOUVEAU</text>
+
+<!-- GRILLE DES PETS : 3 cols x 3 rows -->
+<!-- Pet 1 — Coeur (selected) -->
+<rect x="733" y="208" width="158" height="80" fill="#0a1810" stroke="#226644" stroke-width="2" rx="5"/>
+<text x="812" y="254" fill="#33aa66" text-anchor="middle" class="sans" font-size="32">&#9829;</text>
+<text x="812" y="278" fill="#33aa66" text-anchor="middle" class="sans" font-size="9" font-weight="bold">Coeur</text>
+<rect x="812" y="208" width="0" height="0"/>
+<!-- Selection marker -->
+<circle cx="877" cy="214" r="7" fill="#226644" stroke="#44aa66" stroke-width="1"/>
+<text x="877" y="218" fill="#44ff88" text-anchor="middle" class="sans" font-size="8" font-weight="bold">✓</text>
+
+<!-- Pet 2 — Etoile -->
+<rect x="899" y="208" width="158" height="80" fill="#101008" stroke="#332200" stroke-width="1" rx="5"/>
+<text x="978" y="254" fill="#cc8800" text-anchor="middle" class="sans" font-size="32">&#9733;</text>
+<text x="978" y="278" fill="#665500" text-anchor="middle" class="sans" font-size="9">Etoile</text>
+
+<!-- Pet 3 — Croix de diamant -->
+<rect x="1065" y="208" width="158" height="80" fill="#101008" stroke="#222230" stroke-width="1" rx="5"/>
+<text x="1144" y="254" fill="#4488cc" text-anchor="middle" class="sans" font-size="32">&#9830;</text>
+<text x="1144" y="278" fill="#334466" text-anchor="middle" class="sans" font-size="9">Diamant</text>
+
+<!-- Pet 4 — Trefle -->
+<rect x="733" y="298" width="158" height="80" fill="#101008" stroke="#222230" stroke-width="1" rx="5"/>
+<text x="812" y="344" fill="#22aa44" text-anchor="middle" class="sans" font-size="32">&#9827;</text>
+<text x="812" y="368" fill="#226644" text-anchor="middle" class="sans" font-size="9">Trefle</text>
+
+<!-- Pet 5 — Couronne -->
+<rect x="899" y="298" width="158" height="80" fill="#101008" stroke="#332200" stroke-width="1" rx="5"/>
+<text x="978" y="344" fill="#cc8800" text-anchor="middle" class="sans" font-size="28">&#9818;</text>
+<text x="978" y="368" fill="#665500" text-anchor="middle" class="sans" font-size="9">Couronne</text>
+
+<!-- Pet 6 — Feu -->
+<rect x="1065" y="298" width="158" height="80" fill="#100808" stroke="#330000" stroke-width="1" rx="5"/>
+<text x="1144" y="344" fill="#cc3300" text-anchor="middle" class="sans" font-size="32">&#9762;</text>
+<text x="1144" y="368" fill="#662200" text-anchor="middle" class="sans" font-size="9">Crane</text>
+
+<!-- Options position -->
+<text x="733" y="402" fill="#226644" class="sans" font-size="11" font-weight="bold">Position du pet</text>
+<rect x="733" y="410" width="148" height="30" fill="#0e1e12" stroke="#226644" stroke-width="1" rx="4"/>
+<text x="807" y="430" fill="#44aa66" text-anchor="middle" class="sans" font-size="10" font-weight="bold">A gauche du nom</text>
+<rect x="889" y="410" width="148" height="30" fill="#080e0a" stroke="#183020" rx="4"/>
+<text x="963" y="430" fill="#335544" text-anchor="middle" class="sans" font-size="10">A droite du nom</text>
+<rect x="1045" y="410" width="178" height="30" fill="#080e0a" stroke="#183020" rx="4"/>
+<text x="1134" y="430" fill="#335544" text-anchor="middle" class="sans" font-size="10">Des deux cotes</text>
+
+<!-- Limites pets -->
+<rect x="733" y="452" width="490" height="72" fill="#080e08" stroke="#112211" rx="4"/>
+<text x="748" y="472" fill="#226644" class="sans" font-size="10" font-weight="bold">Limites d'achat</text>
+<text x="748" y="490" fill="#445544" class="sans" font-size="10">/ Maximum 3 pets actifs simultanement par compte</text>
+<text x="748" y="506" fill="#445544" class="sans" font-size="10">/ Chaque pet occupe un slot (gauche, droite, haut)</text>
+<text x="748" y="522" fill="#445544" class="sans" font-size="10">/ Non remboursable apres activation · Transfert impossible</text>
+
+<!-- Prix + Bouton pet -->
+<text x="733" y="556" fill="#44cc88" class="sans" font-size="22" font-weight="bold" filter="url(#glow-pet)" opacity="0.4">7.99 €</text>
+<text x="733" y="556" fill="#44cc88" class="sans" font-size="22" font-weight="bold">7.99 €</text>
+<text x="733" y="572" fill="#226644" class="sans" font-size="9">par pet · Achat unique · Permanent</text>
+<rect x="733" y="580" width="274" height="44" fill="#113322" rx="22"/>
+<rect x="734" y="581" width="272" height="42" fill="none" stroke="#336644" stroke-width="1" rx="21"/>
+<text x="870" y="607" fill="#44cc88" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Ajouter ce pet — 7.99 €</text>
+
+<!-- ── OFFRE BUNDLE (bas, pleine largeur) ── -->
+<rect x="193" y="650" width="1079" height="56" fill="#100c00" stroke="#664400" stroke-width="1.5" rx="6"/>
+<!-- Icone pack -->
+<rect x="193" y="650" width="130" height="56" fill="#1a1200" rx="6"/>
+<text x="258" y="678" fill="#cc8800" text-anchor="middle" class="sans" font-size="12" font-weight="bold">PACK</text>
+<text x="258" y="695" fill="#886600" text-anchor="middle" class="sans" font-size="9">Bundle</text>
+<line x1="323" y1="656" x2="323" y2="700" stroke="#332200" stroke-width="1"/>
+<!-- Texte bundle -->
+<text x="340" y="672" fill="#ffcc00" class="sans" font-size="13" font-weight="bold">Style Dore + 1 Pet au choix</text>
+<text x="340" y="691" fill="#cc8800" class="sans" font-size="10">9.99 € + 7.99 € =</text>
+<text x="455" y="691" fill="#ee4444" class="sans" font-size="10" text-decoration="line-through">17.98 €</text>
+<text x="500" y="691" fill="#44cc44" class="sans" font-size="10">→ seulement 14.99 € (-3 €)</text>
+<!-- Timer bundle -->
+<text x="780" y="672" fill="#ff8800" class="sans" font-size="10">Offre Flash :</text>
+<text x="860" y="672" fill="#ffaa00" class="mono" font-size="12" font-weight="bold">02:47:33</text>
+<!-- Bouton bundle -->
+<rect x="990" y="660" width="272" height="36" fill="#664400" rx="18"/>
+<rect x="991" y="661" width="270" height="34" fill="none" stroke="#cc8800" stroke-width="0.5" rx="17"/>
+<text x="1126" y="683" fill="#ffdd00" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Acheter le Pack 14.99 €</text>
+
+<!-- FOOTER -->
+<rect x="0" y="710" width="1280" height="10" fill="#080810" stroke="#141420" stroke-width="1"/>
+<text x="640" y="718" fill="#222233" text-anchor="middle" class="sans" font-size="7">XIP Shop · Les cosmetiques sont definitifs sauf mention contraire · CGV sur xip.local</text>
+</svg>
diff --git a/package.json b/package.json
index 2441ad0..e25abf1 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
-{
-  "name": "xip",
-  "private": true,
-  "workspaces": ["frontend", "backend"],
-  "scripts": {
-    "dev:stack": "bun run scripts/dev-stack.ts",
-    "dev:backend": "bun run --cwd backend dev",
-    "dev:frontend": "bun run --cwd frontend dev"
-  }
-}
+{
+  "name": "xip",
+  "private": true,
+  "workspaces": ["frontend", "backend"],
+  "scripts": {
+    "dev:stack": "bun run scripts/dev-stack.ts",
+    "dev:backend": "bun run --cwd backend dev",
+    "dev:frontend": "bun run --cwd frontend dev"
+  }
+}
diff --git a/scripts/dev-stack.ts b/scripts/dev-stack.ts
index f5e9dd2..fcb51d5 100644
--- a/scripts/dev-stack.ts
+++ b/scripts/dev-stack.ts
@@ -1,88 +1,88 @@
-#!/usr/bin/env bun
-import { spawn } from "bun";
-import { resolve } from "path";
-
-const ROOT = resolve(import.meta.dir, "..");
-const BACKEND = resolve(ROOT, "backend");
-const FRONTEND = resolve(ROOT, "frontend");
-
-function run(cmd: string[], cwd = ROOT): Promise<void> {
-  console.log(`  → ${cmd.join(" ")}`);
-  const proc = spawn(cmd, { cwd, stdout: "inherit", stderr: "inherit" });
-  return proc.exited.then((code) => {
-    if (code !== 0) throw new Error(`Command failed (exit ${code}): ${cmd.join(" ")}`);
-  });
-}
-
-async function waitForService(
-  label: string,
-  check: string[],
-  retries = 30,
-  delayMs = 2000
-): Promise<void> {
-  for (let i = 1; i <= retries; i++) {
-    const proc = spawn(check, { cwd: ROOT, stdout: "pipe", stderr: "pipe" });
-    if ((await proc.exited) === 0) {
-      console.log(`✅  ${label} is ready`);
-      return;
-    }
-    console.log(`⏳  Waiting for ${label}... (${i}/${retries})`);
-    await Bun.sleep(delayMs);
-  }
-  throw new Error(`${label} did not become ready in time`);
-}
-
-async function main() {
-  console.log("\n🐳  Starting Docker containers...");
-  await run(["docker", "compose", "up", "-d"]);
-
-  console.log("\n⏳  Waiting for services...");
-  await waitForService("PostgreSQL", [
-    "docker", "compose", "exec", "postgres", "pg_isready", "-U", "xip",
-  ]);
-  await waitForService("Redis", [
-    "docker", "compose", "exec", "redis", "redis-cli", "ping",
-  ]);
-
-  console.log("\n🔧  Generating Prisma client...");
-  await run(["bunx", "prisma", "generate"], BACKEND);
-
-  console.log("\n🗄️   Applying database migrations...");
-  await run(
-    ["bunx", "prisma", "migrate", "dev", "--name", "init", "--skip-seed"],
-    BACKEND
-  );
-
-  console.log("\n🌱  Seeding database...");
-  await run(["bun", "run", "prisma/seed.ts"], BACKEND);
-
-  console.log("\n✅  Stack ready! Starting dev servers...\n");
-  console.log("   Backend  → http://localhost:3000");
-  console.log("   Frontend → http://localhost:5173\n");
-
-  const backend = spawn(["bun", "run", "dev"], {
-    cwd: BACKEND,
-    stdout: "inherit",
-    stderr: "inherit",
-  });
-  const frontend = spawn(["bun", "run", "dev"], {
-    cwd: FRONTEND,
-    stdout: "inherit",
-    stderr: "inherit",
-  });
-
-  const cleanup = () => {
-    backend.kill();
-    frontend.kill();
-    process.exit(0);
-  };
-  process.on("SIGINT", cleanup);
-  process.on("SIGTERM", cleanup);
-
-  await Promise.all([backend.exited, frontend.exited]);
-}
-
-main().catch((err: Error) => {
-  console.error("\n❌ ", err.message);
-  process.exit(1);
-});
+#!/usr/bin/env bun
+import { spawn } from "bun";
+import { resolve } from "path";
+
+const ROOT = resolve(import.meta.dir, "..");
+const BACKEND = resolve(ROOT, "backend");
+const FRONTEND = resolve(ROOT, "frontend");
+
+function run(cmd: string[], cwd = ROOT): Promise<void> {
+  console.log(`  → ${cmd.join(" ")}`);
+  const proc = spawn(cmd, { cwd, stdout: "inherit", stderr: "inherit" });
+  return proc.exited.then((code) => {
+    if (code !== 0) throw new Error(`Command failed (exit ${code}): ${cmd.join(" ")}`);
+  });
+}
+
+async function waitForService(
+  label: string,
+  check: string[],
+  retries = 30,
+  delayMs = 2000
+): Promise<void> {
+  for (let i = 1; i <= retries; i++) {
+    const proc = spawn(check, { cwd: ROOT, stdout: "pipe", stderr: "pipe" });
+    if ((await proc.exited) === 0) {
+      console.log(`✅  ${label} is ready`);
+      return;
+    }
+    console.log(`⏳  Waiting for ${label}... (${i}/${retries})`);
+    await Bun.sleep(delayMs);
+  }
+  throw new Error(`${label} did not become ready in time`);
+}
+
+async function main() {
+  console.log("\n🐳  Starting Docker containers...");
+  await run(["docker", "compose", "up", "-d"]);
+
+  console.log("\n⏳  Waiting for services...");
+  await waitForService("PostgreSQL", [
+    "docker", "compose", "exec", "postgres", "pg_isready", "-U", "xip",
+  ]);
+  await waitForService("Redis", [
+    "docker", "compose", "exec", "redis", "redis-cli", "ping",
+  ]);
+
+  console.log("\n🔧  Generating Prisma client...");
+  await run(["bunx", "prisma", "generate"], BACKEND);
+
+  console.log("\n🗄️   Applying database migrations...");
+  await run(
+    ["bunx", "prisma", "migrate", "dev", "--name", "init", "--skip-seed"],
+    BACKEND
+  );
+
+  console.log("\n🌱  Seeding database...");
+  await run(["bun", "run", "prisma/seed.ts"], BACKEND);
+
+  console.log("\n✅  Stack ready! Starting dev servers...\n");
+  console.log("   Backend  → http://localhost:3000");
+  console.log("   Frontend → http://localhost:5173\n");
+
+  const backend = spawn(["bun", "run", "dev"], {
+    cwd: BACKEND,
+    stdout: "inherit",
+    stderr: "inherit",
+  });
+  const frontend = spawn(["bun", "run", "dev"], {
+    cwd: FRONTEND,
+    stdout: "inherit",
+    stderr: "inherit",
+  });
+
+  const cleanup = () => {
+    backend.kill();
+    frontend.kill();
+    process.exit(0);
+  };
+  process.on("SIGINT", cleanup);
+  process.on("SIGTERM", cleanup);
+
+  await Promise.all([backend.exited, frontend.exited]);
+}
+
+main().catch((err: Error) => {
+  console.error("\n❌ ", err.message);
+  process.exit(1);
+});