Add SVG designs for shop interface: shop3 and shop4

- Created shop3.svg featuring a subscription model with monthly and annual options, including a comparison of features.
- Developed shop4.svg focusing on cosmetic options, showcasing pets and styles with a bundle offer.

maquettes/shop/shop1.svg

@@ -0,0 +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>

maquettes/shop/shop2.svg

@@ -0,0 +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>

maquettes/shop/shop3-.svg

@@ -0,0 +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>

maquettes/shop/shop4.svg

@@ -0,0 +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>