feat: nouveaux assets design — tadpole pixel art V5, icônes bulles, aura swamp

- tadpole.svg : pixel art kawaii 32x32 avec système de slots cosmétiques
  (slot-hat, slot-eyes, slot-body, slot-tail, slot-accessory)
- SnowOn/SnowOff.svg : icônes bulles (remplace flocons de neige)
- aura-swamp.svg : premier overlay cosmétique (algues, ripple, bulles)

Frontend/public/NavBar/SnowOff.svg

@@ -1,13 +1,15 @@
 <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="37" height="37" rx="7" stroke="#202020" stroke-width="2" stroke-miterlimit="1.78829" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="20 20"/>
+<!-- Bubbles OFF — inactive state, dashed border -->
-<path d="M6 6H32.7643V32.7643H6V6Z" fill="white" fill-opacity="0.01"/>
+<rect x="1" y="1" width="37" height="37" rx="7" stroke="#202020" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="20 20"/>
-<path d="M19.3821 8.23035V30.5339" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<!-- Big bubble -->
-<path d="M9.74951 13.8063L29.0649 24.958" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="19" cy="16" r="8" stroke="#202020" stroke-width="2" fill="none"/>
-<path d="M9.74658 24.9454L29.0181 13.819" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="16" cy="13" r="2" fill="#202020" opacity="0.3"/>
-<path d="M12.6911 11.5759L14.3639 16.5942L9.34558 17.7094" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<!-- Medium bubble -->
-<path d="M9.34558 21.0549L14.3639 22.1701L12.6911 27.1884" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="28" r="5" stroke="#202020" stroke-width="1.8" fill="none"/>
-<path d="M26.0732 11.5759L24.4004 16.5942L29.4187 17.7094" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="10.5" cy="26.5" r="1.2" fill="#202020" opacity="0.25"/>
-<path d="M29.4187 21.0549L24.4004 22.1701L26.0732 27.1884" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<!-- Small bubble -->
-<path d="M16.0366 9.90308L19.3822 13.2486L22.7277 9.90308" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="28" cy="26" r="3.5" stroke="#202020" stroke-width="1.5" fill="none"/>
-<path d="M16.0366 28.8612L19.3822 25.5156L22.7277 28.8612" stroke="#202020" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="27" cy="24.8" r="0.9" fill="#202020" opacity="0.25"/>
+<!-- Tiny bubble -->
+<circle cx="30" cy="14" r="2" stroke="#202020" stroke-width="1.2" fill="none"/>
 </svg>

Frontend/public/NavBar/SnowOn.svg

@@ -1,12 +1,15 @@
 <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- Bubbles ON — active state, filled background -->
 <rect width="39" height="39" rx="8" fill="#202020"/>
-<path d="M19.3821 8.23035V30.5339" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<!-- Big bubble -->
-<path d="M9.74951 13.8063L29.0649 24.958" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="19" cy="16" r="8" stroke="#8ecae6" stroke-width="2" fill="none"/>
-<path d="M9.74658 24.9454L29.0181 13.819" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="16" cy="13" r="2" fill="#8ecae6" opacity="0.6"/>
-<path d="M12.6911 11.5759L14.3639 16.5942L9.34558 17.7094" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<!-- Medium bubble -->
-<path d="M9.34558 21.0549L14.3639 22.1701L12.6911 27.1884" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="28" r="5" stroke="#8ecae6" stroke-width="1.8" fill="none"/>
-<path d="M26.0732 11.5759L24.4004 16.5942L29.4187 17.7094" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="10.5" cy="26.5" r="1.2" fill="#8ecae6" opacity="0.5"/>
-<path d="M29.4187 21.0549L24.4004 22.1701L26.0732 27.1884" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<!-- Small bubble -->
-<path d="M16.0366 9.90308L19.3822 13.2486L22.7277 9.90308" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="28" cy="26" r="3.5" stroke="#8ecae6" stroke-width="1.5" fill="none"/>
-<path d="M16.0366 28.8612L19.3822 25.5156L22.7277 28.8612" stroke="#EAEAEA" stroke-width="2.23035" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="27" cy="24.8" r="0.9" fill="#8ecae6" opacity="0.5"/>
+<!-- Tiny bubble -->
+<circle cx="30" cy="14" r="2" stroke="#8ecae6" stroke-width="1.2" fill="none"/>
 </svg>

Frontend/public/svg/aura-swamp.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="320" height="320" shape-rendering="crispEdges">
+  <!-- Aura: Swamp — default cosmetic overlay -->
+  <!-- Same 32x32 grid as tadpole.svg, overlaid on top -->
+
+  <!-- ===== SEAWEED LEFT ===== -->
+  <rect x="0" y="10" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="11" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="12" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="13" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="14" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="15" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="16" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="17" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="18" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="19" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="20" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="21" width="1" height="1" fill="#4a8070"/>
+
+  <!-- ===== SEAWEED RIGHT ===== -->
+  <rect x="30" y="10" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="11" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="12" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="13" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="14" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="15" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="16" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="17" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="18" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="19" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="20" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="21" width="1" height="1" fill="#4a8070"/>
+
+  <!-- ===== WATER RIPPLE ===== -->
+  <rect x="6" y="27" width="13" height="1" fill="#3888d8"/>
+  <rect x="7" y="28" width="11" height="1" fill="#58a8e8"/>
+  <rect x="8" y="29" width="9" height="1" fill="#58a8e8" opacity="0.5"/>
+
+  <!-- ===== BUBBLES ===== -->
+  <rect x="1" y="6" width="1" height="1" fill="#50aab8" opacity="0.6"/>
+  <rect x="0" y="7" width="1" height="1" fill="#50aab8" opacity="0.4"/>
+  <rect x="2" y="5" width="1" height="1" fill="#50aab8" opacity="0.35"/>
+  <rect x="29" y="5" width="1" height="1" fill="#50aab8" opacity="0.5"/>
+  <rect x="30" y="6" width="1" height="1" fill="#50aab8" opacity="0.35"/>
+</svg>