refacto: migration Tailwind — composants (6 fichiers)

- RarityBadge, RarityDot → Tailwind classes
- MonsterCard → flex/text-rpg-* classes
- CreateCharacter → full Tailwind (max-w, grid, gap)
- Onboarding → Tailwind + responsive grid-cols-1 mobile
- CombatViews (Log+Multi+History) → Tailwind
- NotFoundPage → full Tailwind
- Pattern posé : couleurs dynamiques en style, layout en classes

frontend/src/components/CombatViews.tsx

@@ -4,31 +4,31 @@ import { Trophy, Skull } from 'lucide-react';
 export function CombatLogView({ result }: { result: CombatResult }) {
   const won = result.winner === 'player';
   return (
-    <div className="card" style={{ marginTop: '1rem' }}>
-      <div style={{ textAlign: 'center', padding: '0.75rem 0', marginBottom: '0.75rem', borderBottom: '1px solid #2a3448' }}>
+    <div className="card mt-4">
+      <div className="text-center py-3 mb-3 border-b border-rpg-border">
         {won
-          ? <div style={{ color: '#3ddc84', fontWeight: 800, fontSize: 18 }}>
-              <Trophy size={20} style={{ display: 'inline', marginRight: 8 }} />
+          ? <div className="text-rpg-green font-extrabold text-lg">
+              <Trophy size={20} className="inline mr-2" />
               Victoire ! +{result.rewards.xp} XP  +{result.rewards.gold} or
             </div>
-          : <div style={{ color: '#e84040', fontWeight: 800, fontSize: 18 }}>
-              <Skull size={20} style={{ display: 'inline', marginRight: 8 }} />
+          : <div className="text-rpg-red font-extrabold text-lg">
+              <Skull size={20} className="inline mr-2" />
               Défaite… Retour à l'auberge
             </div>
         }
         {result.rewards.loot && (
-          <div style={{ fontSize: 13, color: '#f4c94e', marginTop: 4 }}>
+          <div className="text-sm text-rpg-gold mt-1">
             🎁 Loot : {result.rewards.loot.name} ×{result.rewards.loot.quantity}
           </div>
         )}
         {result.rewards.levelUp && (
-          <div style={{ fontSize: 13, color: '#a78bfa', marginTop: 4 }}>
+          <div className="text-sm text-rpg-purple mt-1">
             🎉 LEVEL UP ! Niveau {result.rewards.newLevel} — +{result.rewards.statPointsGained} points de stats
           </div>
         )}
       </div>
 
-      <p style={{ margin: '0 0 6px', fontSize: 12, fontWeight: 700, color: '#6b7a99' }}>
+      <p className="text-xs font-bold text-rpg-muted mb-1.5">
         Log — {result.rounds.length} tour{result.rounds.length > 1 ? 's' : ''}
       </p>
       <div className="combat-log">
@@ -37,15 +37,11 @@ export function CombatLogView({ result }: { result: CombatResult }) {
             const cls = line.includes('CRITIQUE') ? 'log-crit'
               : line.includes('esquive') ? 'log-crit'
               : line.includes('HP') ? 'log-system'
-              : i === 0 ? 'log-player'
-              : 'log-monster';
+              : i === 0 ? 'log-player' : 'log-monster';
             return <div key={`${r.round}-${i}`} className={cls}>[T{r.round}] {line}</div>;
           })
         )}
-        {won
-          ? <div className="log-system">══ Victoire ══</div>
-          : <div className="log-monster">══ Défaite ══</div>
-        }
+        <div className={won ? 'log-system' : 'log-monster'}>══ {won ? 'Victoire' : 'Défaite'} ══</div>
       </div>
     </div>
   );
@@ -54,30 +50,24 @@ export function CombatLogView({ result }: { result: CombatResult }) {
 export function MultiCombatView({ result }: { result: MultiCombatResult }) {
   const t = result.totals;
   return (
-    <div className="card" style={{ marginTop: '1rem' }}>
-      <div style={{ textAlign: 'center', padding: '0.75rem 0', marginBottom: '0.75rem', borderBottom: '1px solid #2a3448' }}>
-        <div style={{ fontWeight: 800, fontSize: 18, color: t.losses > 0 ? '#e84040' : '#3ddc84' }}>
-          {t.losses > 0 ? <Skull size={20} style={{ display: 'inline', marginRight: 8 }} /> : <Trophy size={20} style={{ display: 'inline', marginRight: 8 }} />}
+    <div className="card mt-4">
+      <div className="text-center py-3 mb-3 border-b border-rpg-border">
+        <div className={`font-extrabold text-lg ${t.losses > 0 ? 'text-rpg-red' : 'text-rpg-green'}`}>
+          {t.losses > 0 ? <Skull size={20} className="inline mr-2" /> : <Trophy size={20} className="inline mr-2" />}
           {result.count} combat{result.count > 1 ? 's' : ''} — {t.wins}V / {t.losses}D
         </div>
-        <div style={{ fontSize: 14, color: '#dce4f0', marginTop: 6 }}>
+        <div className="text-sm text-rpg-text mt-1.5">
           +{t.xp} XP  +{t.gold} Or
-          {t.goldLost > 0 && <span style={{ color: '#e84040' }}>  −{t.goldLost} Or</span>}
+          {t.goldLost > 0 && <span className="text-rpg-red">  −{t.goldLost} Or</span>}
         </div>
         {t.levelsGained > 0 && (
-          <div style={{ fontSize: 13, color: '#a78bfa', marginTop: 4 }}>
-            🎉 {t.levelsGained} level up{t.levelsGained > 1 ? 's' : ''} !
-          </div>
+          <div className="text-sm text-rpg-purple mt-1">🎉 {t.levelsGained} level up{t.levelsGained > 1 ? 's' : ''} !</div>
         )}
         {t.loot.length > 0 && (
-          <div style={{ fontSize: 13, color: '#f4c94e', marginTop: 4 }}>
-            🎁 Loot : {t.loot.reduce((sum, l) => sum + l.quantity, 0)} matériaux
-          </div>
+          <div className="text-sm text-rpg-gold mt-1">🎁 Loot : {t.loot.reduce((sum, l) => sum + l.quantity, 0)} matériaux</div>
         )}
         {t.losses > 0 && (
-          <div style={{ fontSize: 11, color: '#6b7a99', marginTop: 4 }}>
-            Série interrompue par une défaite
-          </div>
+          <div className="text-[11px] text-rpg-muted mt-1">Série interrompue par une défaite</div>
         )}
       </div>
     </div>
@@ -86,11 +76,11 @@ export function MultiCombatView({ result }: { result: MultiCombatResult }) {
 
 export function HistoryEntry({ h }: { h: CombatLog }) {
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', borderBottom: '1px solid #1e2535' }}>
-      <span style={{ color: h.winner === 'player' ? '#3ddc84' : '#e84040' }}>
+    <div className="flex justify-between text-xs py-0.5 border-b border-[#1e2535]">
+      <span className={h.winner === 'player' ? 'text-rpg-green' : 'text-rpg-red'}>
         {h.winner === 'player' ? '✓' : '✗'} {h.monster.name}
       </span>
-      <span style={{ color: '#6b7a99' }}>
+      <span className="text-rpg-muted">
         {h.winner === 'player'
           ? `+${h.xpEarned}xp +${h.goldEarned}or${h.lootQuantity > 0 ? ` 🎁×${h.lootQuantity}` : ''}`
           : `${h.totalRounds} tours`

frontend/src/components/CreateCharacter.tsx

@@ -25,45 +25,43 @@ export function CreateCharacter() {
   };
 
   return (
-    <div style={{ maxWidth: 420, margin: '4rem auto' }}>
-      <div className="card card-gold" style={{ padding: '1.5rem' }}>
-        <h2 style={{ margin: '0 0 4px', color: '#f4c94e', fontSize: 20 }}>Créer ton personnage</h2>
-        <p style={{ margin: '0 0 1.25rem', color: '#6b7a99', fontSize: 13 }}>
+    <div className="max-w-md mx-auto mt-16">
+      <div className="card card-gold p-6">
+        <h2 className="text-rpg-gold text-xl font-bold mb-1">Créer ton personnage</h2>
+        <p className="text-rpg-muted text-sm mb-5">
           {remaining > 0 ? `${remaining} point${remaining > 1 ? 's' : ''} à répartir` : 'Tous les points répartis'}
         </p>
 
         <input
-          className="input-rpg"
+          className="input-rpg mb-4"
           placeholder="Nom du personnage"
           value={name}
           onChange={e => setName(e.target.value)}
-          style={{ marginBottom: '1rem' }}
           maxLength={30}
         />
 
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: '1.25rem' }}>
+        <div className="flex flex-col gap-2 mb-5">
           {STATS.map(s => (
-            <div key={s} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <span style={{ fontSize: 13, width: 110, color: '#dce4f0' }}>{STAT_LABELS[s]}</span>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <button className="btn btn-ghost" style={{ padding: '0.15rem 0.5rem', fontSize: 14 }} onClick={() => adjust(s, -1)}>−</button>
-                <span style={{ width: 20, textAlign: 'center', fontWeight: 700, color: '#f4c94e' }}>{pts[s]}</span>
-                <button className="btn btn-ghost" style={{ padding: '0.15rem 0.5rem', fontSize: 14 }} onClick={() => adjust(s, +1)}>+</button>
+            <div key={s} className="flex items-center justify-between">
+              <span className="text-sm text-rpg-text w-28">{STAT_LABELS[s]}</span>
+              <div className="flex items-center gap-2">
+                <button className="btn btn-ghost px-2 py-0.5 text-sm" onClick={() => adjust(s, -1)}>−</button>
+                <span className="w-5 text-center font-bold text-rpg-gold">{pts[s]}</span>
+                <button className="btn btn-ghost px-2 py-0.5 text-sm" onClick={() => adjust(s, +1)}>+</button>
               </div>
             </div>
           ))}
         </div>
 
         <button
-          className="btn btn-gold"
-          style={{ width: '100%' }}
+          className="btn btn-gold w-full"
           disabled={!name.trim() || remaining !== 0 || mut.isPending}
           onClick={() => mut.mutate()}
         >
           {mut.isPending ? 'Création…' : 'Commencer l\'aventure ⚔️'}
         </button>
 
-        {mut.isError && <p style={{ color: '#e84040', fontSize: 12, marginTop: 8 }}>{(mut.error as Error).message}</p>}
+        {mut.isError && <p className="text-rpg-red text-xs mt-2">{(mut.error as Error).message}</p>}
       </div>
     </div>
   );

frontend/src/components/MonsterCard.tsx

@@ -7,24 +7,23 @@ export function MonsterCard({ m, selected, onSelect, playerLevel }: {
 
   return (
     <div
-      className={`card card-hover ${selected ? 'card-gold' : ''}`}
+      className={`card card-hover ${selected ? 'card-gold' : ''} cursor-pointer transition-all ${tooHard ? 'opacity-40' : ''}`}
       onClick={onSelect}
-      style={{ cursor: 'pointer', transition: 'all 0.15s', opacity: tooHard ? 0.4 : 1 }}
     >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
-        <span style={{ fontWeight: 700, fontSize: 14, color: selected ? '#f4c94e' : '#dce4f0' }}>{m.name}</span>
-        <span className={tooHard ? 'badge badge-red' : 'badge badge-green'} style={{ fontSize: 10 }}>
+      <div className="flex justify-between items-start mb-1.5">
+        <span className={`font-bold text-sm ${selected ? 'text-rpg-gold' : 'text-rpg-text'}`}>{m.name}</span>
+        <span className={`badge ${tooHard ? 'badge-red' : 'badge-green'} text-[10px]`}>
           Niv. {m.minLevel}–{m.maxLevel}
         </span>
       </div>
-      <div style={{ display: 'flex', gap: 12, fontSize: 12, color: '#6b7a99' }}>
+      <div className="flex gap-3 text-xs text-rpg-muted">
         <span>❤️ {m.hp}</span>
         <span>⚔️ {m.attack}</span>
         <span>🛡️ {m.defense}</span>
         <span>⭐ {m.xpReward} XP</span>
         <span>💰 {m.goldMin}–{m.goldMax}</span>
       </div>
-      {tooHard && <div style={{ fontSize: 10, color: '#e84040', marginTop: 4 }}>Niveau trop élevé</div>}
+      {tooHard && <div className="text-[10px] text-rpg-red mt-1">Niveau trop élevé</div>}
     </div>
   );
 }

frontend/src/components/Onboarding.tsx

@@ -3,84 +3,48 @@ import { useNavigate } from 'react-router-dom';
 import { Swords, Scroll, Hammer, BookOpen, ChevronRight } from 'lucide-react';
 
 const STEPS = [
-  {
-    icon: Scroll,
-    title: 'Accepte une quête',
-    desc: 'Les quêtes te guident dans ton aventure et donnent le plus d\'XP. Commence par les quêtes des Marais.',
-    cta: 'Voir les quêtes',
-    to: '/quests',
-  },
-  {
-    icon: Swords,
-    title: 'Combats un monstre',
-    desc: 'Chaque combat coûte 5 endurance. Tu gagneras de l\'XP, de l\'or et des matériaux pour crafter.',
-    cta: 'Aller au combat',
-    to: '/combat',
-  },
-  {
-    icon: Hammer,
-    title: 'Craft ton équipement',
-    desc: 'Avec les matériaux droppés, fabrique des armes et armures plus puissantes que celles de la boutique.',
-    cta: 'Voir l\'artisanat',
-    to: '/craft',
-  },
-  {
-    icon: BookOpen,
-    title: 'Consulte le guide',
-    desc: 'Le guide contient tout : bestiaire, recettes, zones, forge. Accessible depuis le bouton 📖 en bas de la sidebar.',
-    cta: 'Ouvrir le guide',
-    to: '/guide',
-  },
+  { icon: Scroll,   title: 'Accepte une quête',    desc: 'Les quêtes te guident et donnent le plus d\'XP. Commence par les Marais.', cta: 'Voir les quêtes',    to: '/quests' },
+  { icon: Swords,   title: 'Combats un monstre',   desc: 'Chaque combat coûte 5 endurance. Tu gagneras XP, or et matériaux.',         cta: 'Aller au combat',    to: '/combat' },
+  { icon: Hammer,   title: 'Craft ton équipement',  desc: 'Avec les matériaux droppés, fabrique des armes plus puissantes.',            cta: 'Voir l\'artisanat',  to: '/craft' },
+  { icon: BookOpen, title: 'Consulte le guide',     desc: 'Bestiaire, recettes, zones, forge — tout est dans le guide.',               cta: 'Ouvrir le guide',    to: '/guide' },
 ];
 
 export function Onboarding({ level, onDismiss }: { level: number; onDismiss: () => void }) {
   const navigate = useNavigate();
   const [dismissed, setDismissed] = useState(false);
 
-  // Ne montrer que pour les joueurs niveau 1-3
   if (level > 3 || dismissed) return null;
 
   return (
-    <div className="card" style={{ marginBottom: '1rem', borderLeft: '3px solid #f4c94e' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
-        <h3 style={{ margin: 0, fontSize: 15, color: '#f4c94e' }}>
-          Bienvenue, aventurier !
-        </h3>
+    <div className="card mb-4 border-l-3 border-l-rpg-gold">
+      <div className="flex justify-between items-center mb-3">
+        <h3 className="text-rpg-gold text-[15px] font-bold m-0">Bienvenue, aventurier !</h3>
         <button
           onClick={() => { setDismissed(true); onDismiss(); }}
-          style={{ background: 'none', border: 'none', color: '#6b7a99', cursor: 'pointer', fontSize: 11 }}
+          className="bg-transparent border-none text-rpg-muted cursor-pointer text-[11px]"
         >
           Masquer
         </button>
       </div>
 
-      <p style={{ margin: '0 0 1rem', fontSize: 12, color: '#9ca3af' }}>
+      <p className="text-rpg-muted text-xs mb-4">
         Voici les premières étapes pour bien démarrer ton aventure dans les Marais.
       </p>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+      <div className="grid grid-cols-2 gap-2 max-sm:grid-cols-1">
         {STEPS.map((step, i) => {
           const Icon = step.icon;
           return (
             <button
               key={i}
               onClick={() => navigate(step.to)}
-              style={{
-                display: 'flex', alignItems: 'flex-start', gap: 10,
-                padding: '0.75rem', background: '#111620', border: '1px solid #2a3448',
-                borderRadius: 8, cursor: 'pointer', textAlign: 'left',
-                transition: 'border-color 0.15s',
-              }}
-              onMouseEnter={e => (e.currentTarget.style.borderColor = '#f4c94e')}
-              onMouseLeave={e => (e.currentTarget.style.borderColor = '#2a3448')}
+              className="flex items-start gap-2.5 p-3 bg-[#111620] border border-rpg-border rounded-lg cursor-pointer text-left transition-colors hover:border-rpg-gold"
             >
-              <Icon size={18} color="#f4c94e" style={{ flexShrink: 0, marginTop: 2 }} />
-              <div style={{ flex: 1 }}>
-                <div style={{ fontSize: 12, fontWeight: 700, color: '#dce4f0', marginBottom: 2 }}>
-                  {i + 1}. {step.title}
-                </div>
-                <div style={{ fontSize: 10, color: '#6b7a99', lineHeight: 1.4 }}>{step.desc}</div>
-                <div style={{ fontSize: 10, color: '#f4c94e', marginTop: 4, display: 'flex', alignItems: 'center', gap: 2 }}>
+              <Icon size={18} className="text-rpg-gold shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <div className="text-xs font-bold text-rpg-text mb-0.5">{i + 1}. {step.title}</div>
+                <div className="text-[10px] text-rpg-muted leading-snug">{step.desc}</div>
+                <div className="text-[10px] text-rpg-gold mt-1 flex items-center gap-0.5">
                   {step.cta} <ChevronRight size={10} />
                 </div>
               </div>

frontend/src/components/RarityBadge.tsx

@@ -1,12 +1,12 @@
 import { RARITY_COLORS, RARITY_LABELS } from '../constants';
 
 export function RarityBadge({ rarity }: { rarity: string }) {
+  const color = RARITY_COLORS[rarity] ?? '#6b7a99';
   return (
-    <span style={{
-      fontSize: 10, fontWeight: 700, padding: '2px 6px', borderRadius: 4,
-      background: (RARITY_COLORS[rarity] ?? '#6b7a99') + '22',
-      color: RARITY_COLORS[rarity] ?? '#6b7a99',
-    }}>
+    <span
+      className="text-[10px] font-bold px-1.5 py-0.5 rounded"
+      style={{ background: color + '22', color }}
+    >
       {RARITY_LABELS[rarity] ?? rarity}
     </span>
   );
@@ -14,9 +14,9 @@ export function RarityBadge({ rarity }: { rarity: string }) {
 
 export function RarityDot({ rarity }: { rarity: string }) {
   return (
-    <span style={{
-      display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
-      background: RARITY_COLORS[rarity] ?? '#6b7a99', marginRight: 4,
-    }} />
+    <span
+      className="inline-block w-1.5 h-1.5 rounded-full mr-1"
+      style={{ background: RARITY_COLORS[rarity] ?? '#6b7a99' }}
+    />
   );
 }

frontend/src/pages/NotFoundPage.tsx

@@ -5,38 +5,24 @@ export function NotFoundPage() {
   const navigate = useNavigate();
 
   return (
-    <div style={{
-      minHeight: '100vh', display: 'flex', flexDirection: 'column',
-      alignItems: 'center', justifyContent: 'center',
-      background: '#0d0f14', color: '#dce4f0', textAlign: 'center',
-      padding: '2rem',
-    }}>
-      <div style={{ fontSize: 80, marginBottom: '0.5rem' }}>🐸</div>
-      <h1 style={{ fontSize: 48, fontWeight: 800, color: '#f4c94e', margin: '0 0 0.5rem' }}>404</h1>
-      <p style={{ fontSize: 16, color: '#6b7a99', maxWidth: 400, marginBottom: '2rem' }}>
+    <div className="min-h-screen flex flex-col items-center justify-center bg-rpg-bg text-rpg-text text-center p-8">
+      <div className="text-7xl mb-2">🐸</div>
+      <h1 className="text-5xl font-extrabold text-rpg-gold mb-2">404</h1>
+      <p className="text-rpg-muted max-w-sm mb-8">
         Ce chemin ne mène nulle part… Le têtard s'est perdu dans les marais.
       </p>
 
-      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
-        <button
-          onClick={() => navigate('/dashboard')}
-          className="btn btn-gold"
-          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0.75rem 1.5rem', fontSize: 14 }}
-        >
+      <div className="flex gap-3 flex-wrap justify-center">
+        <button onClick={() => navigate('/dashboard')} className="btn btn-gold flex items-center gap-1.5 px-6 py-3 text-sm">
           <Gamepad2 size={16} /> Retour au jeu
         </button>
-        <button
-          onClick={() => navigate('/guide')}
-          className="btn btn-ghost"
-          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0.75rem 1.5rem', fontSize: 14 }}
-        >
+        <button onClick={() => navigate('/guide')} className="btn btn-ghost flex items-center gap-1.5 px-6 py-3 text-sm">
           <BookOpen size={16} /> Guide
         </button>
       </div>
 
-      <p style={{ fontSize: 11, color: '#2a3448', marginTop: '3rem' }}>
-        <MapPin size={10} style={{ display: 'inline', marginRight: 4 }} />
-        Zone inconnue — coordonnées introuvables
+      <p className="text-[11px] text-rpg-border mt-12 flex items-center gap-1">
+        <MapPin size={10} /> Zone inconnue — coordonnées introuvables
       </p>
     </div>
   );