feat: toast system — feedback visuel global (react-hot-toast)

- Toaster dark theme (bottom-right, 3s/4s)
- Combat: erreur cooldown/endurance en toast
- Craft: toast start + collect + erreurs
- Forge: toast succès/échec + erreurs
- Shop: toast achat + erreurs
- Inventaire: toast vente + erreurs
- Fix forge costs frontend (200/400/700)

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from 'react-hot-toast';
 import { AuthProvider, useAuth } from './context/AuthContext';
 import { Layout } from './components/Layout';
 import { LoginPage }     from './pages/LoginPage';
@@ -54,6 +55,15 @@ export default function App() {
           <AppRoutes />
         </BrowserRouter>
       </AuthProvider>
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          duration: 3000,
+          style: { background: '#1e2535', color: '#dce4f0', border: '1px solid #2a3448', fontSize: 13 },
+          success: { iconTheme: { primary: '#3ddc84', secondary: '#1e2535' } },
+          error: { iconTheme: { primary: '#e84040', secondary: '#1e2535' }, duration: 4000 },
+        }}
+      />
     </QueryClientProvider>
   );
 }

frontend/src/pages/CombatPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import toast from 'react-hot-toast';
 import { combatApi, characterApi } from '../api/endpoints';
 import type { Monster, CombatResult, MultiCombatResult, CombatLog } from '../api/types';
 import { Swords, Trophy, Skull, Clock, Zap, Heart, Lock } from 'lucide-react';
@@ -196,7 +197,7 @@ export function CombatPage() {
       qc.invalidateQueries({ queryKey: ['materialsInventory'] });
       startCooldown();
     },
-    onError: () => startCooldown(),
+    onError: (err: Error) => { toast.error(err.message); startCooldown(); },
   });
 
   if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement des monstres…</div>;

frontend/src/pages/CraftPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import toast from 'react-hot-toast';
 import { craftApi, materialApi } from '../api/endpoints';
 import type { Recipe, CraftJob } from '../api/types';
 import { Hammer, Clock, CheckCircle } from 'lucide-react';
@@ -99,12 +100,20 @@ export function CraftPage() {
 
   const startMut = useMutation({
     mutationFn: (recipeId: string) => craftApi.start(recipeId),
-    onSuccess: () => { qc.invalidateQueries({ queryKey: ['activeCraft'] }); qc.invalidateQueries({ queryKey: ['character'] }); qc.invalidateQueries({ queryKey: ['materials'] }); },
+    onSuccess: () => {
+      toast.success('Craft lancé !');
+      qc.invalidateQueries({ queryKey: ['activeCraft'] }); qc.invalidateQueries({ queryKey: ['character'] }); qc.invalidateQueries({ queryKey: ['materials'] });
+    },
+    onError: (err: Error) => toast.error(err.message),
   });
 
   const collectMut = useMutation({
     mutationFn: (jobId: string) => craftApi.collect(jobId),
-    onSuccess: () => { qc.invalidateQueries({ queryKey: ['activeCraft'] }); qc.invalidateQueries({ queryKey: ['inventory'] }); refetchActive(); },
+    onSuccess: () => {
+      toast.success('Item récupéré !');
+      qc.invalidateQueries({ queryKey: ['activeCraft'] }); qc.invalidateQueries({ queryKey: ['inventory'] }); refetchActive();
+    },
+    onError: (err: Error) => toast.error(err.message),
   });
 
   const hasActive = activeCraft && 'id' in activeCraft;

frontend/src/pages/ForgePage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import toast from 'react-hot-toast';
 import { itemApi, forgeApi, characterApi } from '../api/endpoints';
 import type { CharacterItem } from '../api/types';
 import { Shield, CheckCircle, XCircle, AlertTriangle, Zap, Coins } from 'lucide-react';
@@ -7,7 +8,7 @@ import { Shield, CheckCircle, XCircle, AlertTriangle, Zap, Coins } from 'lucide-
 const FORGE_RISK = [0, 0, 0, 20, 30, 40];
 const FORGE_LABEL = ['—', '—', 'Garanti', '20% échec', '30% échec', '40% échec'];
 const FORGE_ENDURANCE_COST = 10;
-const FORGE_GOLD_COST: Record<number, number> = { 1: 50, 2: 100, 3: 250, 4: 500, 5: 1000 };
+const FORGE_GOLD_COST: Record<number, number> = { 1: 50, 2: 100, 3: 200, 4: 400, 5: 700 };
 
 function ForgePanel({ nextLevel, risk, endurance, gold, isPending, onForge }: {
   nextLevel: number; risk: number; endurance: number; gold: number; isPending: boolean; onForge: () => void;
@@ -75,13 +76,16 @@ export function ForgePage() {
     mutationFn: () => forgeApi.upgrade(selected!.id),
     onSuccess: (res) => {
       setLastResult({ success: res.success, newLevel: res.forgeLevel });
-      // Update selected item forgeLevel locally for immediate UI refresh
       if (res.success) {
+        toast.success(`Forge réussie ! +${res.forgeLevel}`);
         setSelected(prev => prev ? { ...prev, forgeLevel: res.forgeLevel } : null);
+      } else {
+        toast.error('Forge échouée — or et endurance perdus');
       }
       qc.invalidateQueries({ queryKey: ['inventory'] });
       qc.invalidateQueries({ queryKey: ['character'] });
     },
+    onError: (err: Error) => toast.error(err.message),
   });
 
   if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>;

frontend/src/pages/InventoryPage.tsx

@@ -1,4 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import toast from 'react-hot-toast';
 import { itemApi, materialApi } from '../api/endpoints';
 import { api } from '../api/client';
 import type { CharacterItem } from '../api/types';
@@ -91,9 +92,11 @@ export function InventoryPage() {
   const sellMut = useMutation({
     mutationFn: (charItemId: string) => api.post<any>(`/shop/sell/${charItemId}`),
     onSuccess: () => {
+      toast.success('Item vendu !');
       qc.invalidateQueries({ queryKey: ['inventory'] });
       qc.invalidateQueries({ queryKey: ['character'] });
     },
+    onError: (err: Error) => toast.error(err.message),
   });
 
   if (loadInv || loadMat) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>;

frontend/src/pages/ShopPage.tsx

@@ -1,4 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import toast from 'react-hot-toast';
 import { characterApi } from '../api/endpoints';
 import { api } from '../api/client';
 import { Coins, ShoppingBag, Sword, Shield, Heart, Zap } from 'lucide-react';
@@ -97,10 +98,12 @@ export function ShopPage() {
   const buyMut = useMutation({
     mutationFn: (itemId: string) => api.post<any>(`/shop/buy/${itemId}`),
     onSuccess: () => {
+      toast.success('Achat effectué !');
       qc.invalidateQueries({ queryKey: ['character'] });
       qc.invalidateQueries({ queryKey: ['shop'] });
       qc.invalidateQueries({ queryKey: ['inventory'] });
     },
+    onError: (err: Error) => toast.error(err.message),
   });
 
   if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>;