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/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>
   );