From 4692ffe1eb0f20d1a4c029af9ef8ecdc5172a322 Mon Sep 17 00:00:00 2001
From: Mathis <gameurpro12gg@gmail.com>
Date: Sun, 4 Oct 2026 23:12:07 +0200
Subject: [PATCH] =?UTF-8?q?fix=20:=20nav=20'Plus'=20au=20lieu=20de=20'Para?=
 =?UTF-8?q?m=C3=A8tres'=20(trop=20long),=20illustrations=20temp=C3=AAte=20?=
 =?UTF-8?q?et=20fin=20du=20monde=20am=C3=A9lior=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nav : label 'Paramètres' → 'Plus' (débordait dans la grille)
- Tempête : tourbillon CSS animé (2 anneaux + noyau) au lieu d'un radial-gradient moche
- Fin du monde : champignon nucléaire CSS avec glow, plus lisible
- Gradient hero tempête aligné sur la nouvelle illustration
---
 web/src/main.ts              |  2 +-
 web/src/styles.css           |  5 +++++
 web/src/views/weather-art.ts | 18 ++++++++++++++----
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/src/main.ts b/web/src/main.ts
index 9a526cd..48f3e9d 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -19,7 +19,7 @@ const TABS: { id: Tab; label: string; icon: string }[] = [
   { id: 'meteo', label: 'Météo', icon: 'cloud-sun' },
   { id: 'radar', label: 'Radar', icon: 'satellite-dish' },
   { id: 'bilan', label: 'Bilan', icon: 'journal-bookmark' },
-  { id: 'parametres', label: 'Paramètres', icon: 'gear' },
+  { id: 'parametres', label: 'Plus', icon: 'gear' },
 ]
 
 function svgIcon(name: string): string {
diff --git a/web/src/styles.css b/web/src/styles.css
index 8c13cf8..392605d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -547,6 +547,11 @@ h1, h2, h3, h4, h5, h6 {
   to { opacity: 1; transform: none; }
 }
 
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 .tab-enter { animation: enter .2s ease; }
 
 /* Overlay modals */
diff --git a/web/src/views/weather-art.ts b/web/src/views/weather-art.ts
index cb085bc..f44547b 100644
--- a/web/src/views/weather-art.ts
+++ b/web/src/views/weather-art.ts
@@ -32,9 +32,19 @@ export function weatherArt(kind: WeatherKind, size: 'mini' | 'hero' = 'mini'): H
       h('div', { class: 'simple-cloud', style: 'background:#5464A9' }),
       h('div', { class: 'bolt-shape' }),
     ),
-    tempete: () => h('div', { class: cls, style: `${style};background:radial-gradient(circle at 50% 50%,#FBAE45 0 5%,#F04464 6% 12%,#7E2BD5 13% 21%,#11194B 22% 36%,#F04464 37% 43%,#11194B 44%)` }),
-    fin_du_monde: () => h('div', { class: cls, style: `${style};background:linear-gradient(#281846,#B33C33 55%,#F59337)` },
-      h('div', { class: 'mushroom-shape' }),
+    tempete: () => h('div', { class: cls, style: `${style};background:linear-gradient(145deg,#1a1040,#2d1b69 40%,#1a1040)` },
+      h('div', { style: 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center' },
+        h('div', { style: 'width:50px;height:50px;border-radius:50%;border:4px solid #f472b6;border-top-color:#fbbf24;border-right-color:#a78bfa;animation:spin 2s linear infinite' }),
+        h('div', { style: 'position:absolute;width:24px;height:24px;border-radius:50%;border:3px solid #f472b6;border-bottom-color:#fbbf24;border-left-color:#a78bfa;animation:spin 1.2s linear infinite reverse' }),
+        h('div', { style: 'position:absolute;width:10px;height:10px;border-radius:50%;background:#fbbf24' }),
+      ),
+    ),
+    fin_du_monde: () => h('div', { class: cls, style: `${style};background:linear-gradient(180deg,#1a0a2e 0%,#4a1942 30%,#b33c33 60%,#f59337 100%)` },
+      h('div', { style: 'position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px' },
+        h('div', { style: 'width:30px;height:40px;background:#FF8A3D;border-radius:50% 50% 30% 30%;box-shadow:0 0 20px #FFD43B,0 0 40px #FF8A3D,0 8px 0 -4px #FFA640' }),
+        h('div', { style: 'position:absolute;width:14px;height:24px;background:#FF8A3D;left:calc(50% - 7px);bottom:0;border-radius:0 0 6px 6px' }),
+        h('div', { style: 'position:absolute;width:20px;height:20px;background:#FFD43B;border-radius:50%;top:25%;box-shadow:0 0 12px #FFD43B' }),
+      ),
     ),
   }
 
@@ -57,7 +67,7 @@ export function heroGradient(kind: WeatherKind): string {
     nuageux: 'linear-gradient(145deg,#2D86ED 0%,#57B7FF 50%,#89D0FF 100%)',
     pluie: 'linear-gradient(145deg,#092E64 0%,#14589B 50%,#1E6FD4 100%)',
     orage: 'linear-gradient(145deg,#152758 0%,#291B69 50%,#3D2B8A 100%)',
-    tempete: 'radial-gradient(circle at 50% 50%,#FBAE45 0 5%,#F04464 6% 12%,#7E2BD5 13% 21%,#11194B 22% 36%,#F04464 37% 43%,#11194B 44%)',
+    tempete: 'linear-gradient(145deg,#1a1040 0%,#2d1b69 50%,#4c1d95 100%)',
     fin_du_monde: 'linear-gradient(#281846,#B33C33 55%,#F59337)',
   }
   return gradients[kind]