feat: guide — 4 nouvelles zones + onglet Dao du Courant (voies, combat tactique, compagnons)

frontend/src/pages/GuidePage.tsx

@@ -7,14 +7,21 @@ import { RARITY_COLORS, FORGE_TABLE, ZONE_INFO } from '../constants';
 import { RarityBadge } from '../components/RarityBadge';
 
 const ZONES = [
-  { id: 'marais', ...ZONE_INFO.marais, desc: 'Zone de départ. Monstres niv. 1-9. Terre de boue et de brume.' },
+  // Acte I — L'Étang
+  { id: 'marais', ...ZONE_INFO.marais, desc: 'Zone de départ. Monstres niv. 1-5. Terre de boue et de brume.' },
   { id: 'egouts', ...ZONE_INFO.egouts, desc: 'Sous-terrain infesté. Monstres niv. 4-10. Rats, slimes et croco.' },
   { id: 'desert', ...ZONE_INFO.desert, desc: 'Sable brûlant. Monstres niv. 8-15. Scorpions, momies et le Sphinx.' },
+  // Acte II — L'Odyssée (débloqué après le Serment des Trois)
+  { id: 'ruisseau_miroir', ...ZONE_INFO.ruisseau_miroir, desc: 'Eau cristalline qui reflète vos peurs. Monstres niv. 12-17. Combat tactique.' },
+  { id: 'marais_murmures', ...ZONE_INFO.marais_murmures, desc: 'Marais hanté de murmures anciens. Monstres niv. 15-20. La Batracienne vous attend.' },
+  { id: 'torrent_brise', ...ZONE_INFO.torrent_brise, desc: 'Eaux violentes où la force ne suffit pas. Monstres niv. 18-23. Apprenez la résonance.' },
+  { id: 'source_courant', ...ZONE_INFO.source_courant, desc: 'Lieu légendaire où le Chant est né. Monstres niv. 21-25. Le Dao du Courant.' },
 ];
 
 const TABS = [
   { id: 'start',    label: 'Démarrer',  icon: BookOpen },
   { id: 'zones',    label: 'Zones',     icon: MapIcon },
+  { id: 'dao',      label: 'Dao',       icon: Gamepad2 },
   { id: 'bestiary', label: 'Bestiaire', icon: Swords },
   { id: 'items',    label: 'Équipement', icon: Shield },
   { id: 'craft',    label: 'Artisanat', icon: Hammer },
@@ -105,6 +112,66 @@ function ZonesTab() {
   );
 }
 
+// ── Tab: Dao du Courant ──
+
+function DaoTab() {
+  return (
+    <div>
+      <h3 style={{ color: '#d4af37', margin: '0 0 1rem', fontSize: 18 }}>Le Dao du Courant</h3>
+
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <p style={{ color: '#dce4f0', fontSize: 13, lineHeight: 1.6, margin: 0 }}>
+          Après avoir complété les 3 arcs de l'Acte I et prêté <strong style={{ color: '#f4c94e' }}>Le Serment des Trois</strong>,
+          le jeu se transforme. Le combat devient <strong>tactique tour par tour</strong> avec sorts, compagnons et stratégie.
+        </p>
+      </div>
+
+      <h4 style={{ color: '#dce4f0', margin: '1rem 0 0.5rem', fontSize: 14 }}>Les 3 voies</h4>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
+        {[
+          { name: 'Écoute', color: '#88c8e8', desc: 'Contrôle et perception. Révèle faiblesses, chant offensif, ancrage.', archetype: 'Le stratège' },
+          { name: 'Résonance', color: '#f4c94e', desc: 'Force amplifiée. Onde de choc, bouclier, contre-attaque, stun.', archetype: 'Le protecteur' },
+          { name: 'Harmonie', color: '#3ddc84', desc: 'Support et guérison. Heal, purge, buff équipe, symphonie ultime.', archetype: 'L\'harmoniste' },
+        ].map(v => (
+          <div key={v.name} className="card" style={{ padding: '0.75rem', borderLeft: `3px solid ${v.color}` }}>
+            <div style={{ fontSize: 14, fontWeight: 700, color: v.color }}>{v.name}</div>
+            <div style={{ fontSize: 10, color: '#6b7a99', marginBottom: 6 }}>{v.archetype}</div>
+            <div style={{ fontSize: 11, color: '#9ca3af' }}>{v.desc}</div>
+          </div>
+        ))}
+      </div>
+
+      <h4 style={{ color: '#dce4f0', margin: '1rem 0 0.5rem', fontSize: 14 }}>Combat tactique</h4>
+      <div className="card" style={{ fontSize: 12, lineHeight: 1.8, color: '#9ca3af' }}>
+        <p style={{ margin: '0 0 4px' }}><strong style={{ color: '#dce4f0' }}>Tour par tour</strong> — Chaque tour : [Attaque] [Sorts] [Items] [Fuir]. Fini l'auto-attaque.</p>
+        <p style={{ margin: '0 0 4px' }}><strong style={{ color: '#dce4f0' }}>Mana</strong> — Les sorts consomment du Mana (base 50 + Intelligence ×2). Régénération : +5/tour.</p>
+        <p style={{ margin: '0 0 4px' }}><strong style={{ color: '#dce4f0' }}>Buffs & Debuffs</strong> — Bouclier, poison, confusion, regen... la stratégie compte.</p>
+        <p style={{ margin: 0 }}><strong style={{ color: '#dce4f0' }}>Grind rapide</strong> — Les zones 1-3 gardent le combat simple (×1/×5/×10) pour farmer.</p>
+      </div>
+
+      <h4 style={{ color: '#dce4f0', margin: '1rem 0 0.5rem', fontSize: 14 }}>Compagnons</h4>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+        <div className="card" style={{ padding: '0.75rem', borderLeft: '3px solid #88c8e8' }}>
+          <div style={{ fontSize: 14, fontWeight: 700, color: '#88c8e8' }}>Mira</div>
+          <div style={{ fontSize: 11, color: '#9ca3af' }}>Heal si HP bas, buff défensif, purge debuffs. Elle chante pour vous protéger.</div>
+        </div>
+        <div className="card" style={{ padding: '0.75rem', borderLeft: '3px solid #f4c94e' }}>
+          <div style={{ fontSize: 14, fontWeight: 700, color: '#f4c94e' }}>Vell</div>
+          <div style={{ fontSize: 11, color: '#9ca3af' }}>Tank et protège. Taunt, contre-attaque, onde de choc. Sa force est devenue sagesse.</div>
+        </div>
+      </div>
+
+      <h4 style={{ color: '#dce4f0', margin: '1rem 0 0.5rem', fontSize: 14 }}>Ce qui change à l'Acte II</h4>
+      <div className="card" style={{ fontSize: 12, lineHeight: 1.8, color: '#9ca3af' }}>
+        <p style={{ margin: '0 0 4px' }}><strong style={{ color: '#f4c94e' }}>Combat</strong> — Auto → Tour par tour stratégique</p>
+        <p style={{ margin: '0 0 4px' }}><strong style={{ color: '#f4c94e' }}>Sorts</strong> — 15 sorts (5 par voie), débloqués avec des points de voie</p>
+        <p style={{ margin: '0 0 4px' }}><strong style={{ color: '#f4c94e' }}>Compagnons</strong> — Mira et Vell combattent à vos côtés (IA auto)</p>
+        <p style={{ margin: 0 }}><strong style={{ color: '#f4c94e' }}>L'histoire</strong> — Chaque zone raconte un chapitre de l'Odyssée</p>
+      </div>
+    </div>
+  );
+}
+
 // ── Tab: Bestiaire ──
 
 function BestiaryTab({ monsters, materials }: { monsters: (Monster & { zone: string })[]; materials: any[] }) {
@@ -483,6 +550,7 @@ export function GuidePage() {
       {/* Tab content */}
       {tab === 'start'    && <StartTab />}
       {tab === 'zones'    && <ZonesTab />}
+      {tab === 'dao'      && <DaoTab />}
       {tab === 'bestiary' && <BestiaryTab monsters={filteredMonsters} materials={materials} />}
       {tab === 'items'    && <ItemsTab items={filteredItems} />}
       {tab === 'craft'    && <CraftTab recipes={filteredRecipes} materials={materials} />}