import { useState, useEffect } from "react";
const sections = ["Bougies", "Timeframes", "Tendances", "S&R", "Figures"];
// --- Candle data ---
const candleTypes = [
{
id: "bullish",
name: "Bougie Haussière",
color: "#10B981",
emoji: " ",
desc: "Le prix a MONTÉ sur cette période. L'ouverture est en bas, la clôture en haut. Sig
parts: [
{ label: "Mèche haute", color: "#6EE7B7", desc: "Prix max atteint" },
{ label: "Corps", color: "#10B981", desc: "De l'ouverture à la clôture" },
{ label: "Mèche basse", color: "#6EE7B7", desc: "Prix min atteint" },
],
},
{
id: "bearish",
name: "Bougie Baissière",
color: "#EF4444",
emoji: " ",
desc: "Le prix a DESCENDU sur cette période. L'ouverture est en haut, la clôture en bas.
parts: [
{ label: "Mèche haute", color: "#FCA5A5", desc: "Prix max atteint" },
{ label: "Corps", color: "#EF4444", desc: "De l'ouverture à la clôture" },
{ label: "Mèche basse", color: "#FCA5A5", desc: "Prix min atteint" },
],
},
{
id: "doji",
name: "Doji",
color: "#F59E0B",
emoji: " ",
desc: "Ouverture ≈ Clôture. Indécision totale entre acheteurs et vendeurs. Signal d'un po
parts: [
{ label: "Mèche haute", color: "#FCD34D", desc: "Prix max atteint" },
{ label: "Corps mini", color: "#F59E0B", desc: "Ouverture ≈ Clôture" },
{ label: "Mèche basse", color: "#FCD34D", desc: "Prix min atteint" },
],
},
{
id: "hammer",
name: "Marteau",
color: "#8B5CF6",
emoji: " ",
desc: "Longue mèche basse, petit corps en haut. Les vendeurs ont poussé fort mais les ach
parts: [
{ label: "Petit corps", color: "#A78BFA", desc: "Clôture proche du haut" },
{ label: "Longue mèche basse", color: "#8B5CF6", desc: "Rejet fort à la baisse" },
],
},
];
const timeframes = [
{ tf: "M1", label: "1 Minute", use: "Scalping", color: "#EF4444", risk: " Très risqué", d
{ tf: "M5", label: "5 Minutes", use: "Scalping", color: "#F97316", risk: " Risqué", desc:
{ tf: "M15", label: "15 Minutes", use: "Day Trading", color: "#EAB308", risk: " Modéré",
{ tf: "H1", label: "1 Heure", use: "Day Trading", color: "#22C55E", risk: " Conseillé", d
{ tf: "H4", label: "4 Heures", use: "Swing Trading", color: "#10B981", risk: " Conseillé"
{ tf: "D1", label: "Daily", use: "Position", color: "#3B82F6", risk: " Sécurisé", desc: "
];
const trendData = {
up: {
label: "UPTREND (Haussier)",
color: "#10B981",
desc: "Série de sommets et creux de plus en plus hauts. Le marché monte. Tu cherches à AC
candles: [30, 45, 38, 55, 48, 68, 60, 80, 72, 95],
},
down: {
label: "DOWNTREND (Baissier)",
color: "#EF4444",
desc: "Série de sommets et creux de plus en plus bas. Le marché descend. Tu cherches à VE
candles: [95, 80, 88, 65, 75, 52, 60, 38, 48, 25],
},
range: {
label: "RANGE (Latéral)",
color: "#F59E0B",
desc: "Le prix oscille entre deux niveaux sans direction claire. Tu achètes en bas du ran
candles: [55, 70, 48, 72, 50, 68, 52, 70, 48, 65],
},
};
const figures = [
{
name: "Double Top",
emoji: " ",
color: "#EF4444",
signal: "Baissier",
desc: "Le prix teste deux fois la même résistance sans la franchir. Puis il casse le supp
points: [40, 70, 50, 70, 35],
},
{
name: "Double Bottom",
emoji: " ",
color: "#10B981",
signal: "Haussier",
desc: "Le prix teste deux fois le même support sans le franchir. Puis il casse la résista
points: [70, 35, 55, 35, 75],
},
{
name: "Triangle Ascendant",
emoji: " ",
color: "#3B82F6",
signal: "Haussier",
desc: "Résistance horizontale + creux de plus en plus hauts. La compression mène souvent
points: [30, 65, 42, 65, 52, 65, 60, 80],
},
];
export default function TradingModule2() {
const [active, setActive] = useState(0);
const [selectedCandle, setSelectedCandle] = useState(null);
const [selectedTf, setSelectedTf] = useState(null);
const [selectedTrend, setSelectedTrend] = useState("up");
const [selectedFigure, setSelectedFigure] = useState(0);
const [srLevel, setSrLevel] = useState(65);
const [animTick, setAnimTick] = useState(0);
useEffect(() => {
const t = setInterval(() => setAnimTick(x => x + 1), 1200);
return () => clearInterval(t);
}, []);
// Generate live-looking candles
const liveCandles = [Link]({ length: 14 }, (_, i) => {
const base = 50 + [Link](i * 0.7 + animTick * 0.3) * 20 + i * 1.5;
const open = base + ([Link]() - 0.5) * 8;
const close = base + ([Link]() - 0.5) * 8;
return { open, close, high: [Link](open, close) + [Link]() * 6, low: [Link](open
});
const trend = trendData[selectedTrend];
return (
<div style={{ minHeight: "100vh", background: "#060B14", color: "#E2E8F0", fontFamily: "'
{/* Header */}
<div style={{
background: "linear-gradient(180deg, #0D1526 0%, #060B14 100%)",
borderBottom: "1px solid #0F2040",
padding: "20px 16px 0",
position: "sticky", top: 0, zIndex: 10,
}}>
<div style={{ maxWidth: 720, margin: "0 auto" }}>
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
<div style={{
width: 44, height: 44, borderRadius: 10, background: "linear-gradient(135deg, #
display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22,
}}> </div>
<div>
<div style={{ fontSize: 10, letterSpacing: 4, color: "#1E3A5F", textTransform:
<div style={{ fontSize: 19, fontWeight: "bold", color: "#F0F9FF", letterSpacing
</div>
{/* Live dot */}
<div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 6 }
<div style={{ width: 8, height: 8, borderRadius: "50%", background: "#10B981",
<span style={{ color: "#10B981", fontSize: 11 }}>LIVE</span>
</div>
</div>
{/* Nav tabs */}
<div style={{ display: "flex", gap: 2, overflowX: "auto" }}>
{[Link]((s, i) => (
<button key={s} onClick={() => setActive(i)} style={{
padding: "8px 14px", background: active === i ? "rgba(29,78,216,0.3)" : "tran
color: active === i ? "#60A5FA" : "#334155",
border: active === i ? "1px solid #1D4ED8" : "1px solid transparent",
borderBottom: "none", borderRadius: "8px 8px 0 0",
cursor: "pointer", fontSize: 12, whiteSpace: "nowrap",
transition: "all 0.2s",
}}>{i + 1}. {s}</button>
))}
</div>
</div>
</div>
<div style={{ maxWidth: 720, margin: "0 auto", padding: "24px 16px" }}>
{/* ---- SECTION 1: BOUGIES ---- */}
{active === 0 && (
<div style={{ animation: "fadeIn 0.4s ease" }}>
<h2 style={{ color: "#60A5FA", fontSize: 20, marginBottom: 6 }}>Les Bougies Japon
<p style={{ color: "#64748B", fontSize: 14, lineHeight: 1.7, marginBottom: 20 }}>
Chaque bougie raconte l'histoire du prix sur une période. Elle contient 4 infor
</p>
{/* Live chart demo */}
<div style={{ background: "#0A1628", border: "1px solid #0F2040", borderRadius: 1
<div style={{ color: "#1E3A5F", fontSize: 11, marginBottom: 12 }}>EUR/USD — M15
<div style={{ display: "flex", alignItems: "flex-end", gap: 4, height: 100 }}>
{[Link]((c, i) => {
const scale = 80;
const isUp = [Link] >= [Link];
const bodyTop = [Link]([Link], [Link]);
const bodyBot = [Link]([Link], [Link]);
const bodyH = [Link](3, ((bodyTop - bodyBot) / 30) * scale);
const wickTop = (([Link] - bodyTop) / 30) * scale;
const wickBot = ((bodyBot - [Link]) / 30) * scale;
return (
<div key={i} style={{ display: "flex", flexDirection: "column", alignItem
<div style={{ width: 1, height: [Link](2, wickTop), background: isUp
<div style={{ width: "70%", height: bodyH, background: isUp ? "#10B981"
<div style={{ width: 1, height: [Link](2, wickBot), background: isUp
</div>
);
})}
</div>
</div>
{/* Candle anatomy */}
<div style={{ color: "#60A5FA", fontSize: 12, letterSpacing: 2, marginBottom: 14
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBot
{[
{ label: "OUVERTURE", color: "#F59E0B", desc: "Prix au début de la période",
{ label: "CLÔTURE", color: "#10B981", desc: "Prix à la fin de la période", po
{ label: "HAUT", color: "#60A5FA", desc: "Prix maximum atteint", pos: "Sommet
{ label: "BAS", color: "#EF4444", desc: "Prix minimum atteint", pos: "Bas des
].map((item, i) => (
<div key={i} style={{ background: "#0A1628", border: "1px solid #0F2040", bor
<div style={{ color: [Link], fontSize: 11, fontWeight: "bold", marginBo
<div style={{ color: "#94A3B8", fontSize: 12, lineHeight: 1.5 }}>{[Link]
</div>
))}
</div>
{/* Candle types */}
<div style={{ color: "#60A5FA", fontSize: 12, letterSpacing: 2, marginBottom: 14
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBot
{[Link]((c) => (
<div key={[Link]} onClick={() => setSelectedCandle(selectedCandle?.id === [Link]
style={{
background: selectedCandle?.id === [Link] ? `rgba(${[Link] === "#10B981" ?
border: `1px solid ${selectedCandle?.id === [Link] ? [Link] : "#0F2040"}`,
borderRadius: 12, padding: 16, cursor: "pointer", transition: "all 0.2s",
display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
}}>
{/* Visual candle */}
<div style={{ display: "flex", flexDirection: "column", alignItems: "center
<div style={{ width: 1, height: [Link] === "hammer" ? 4 : 10, background: c
<div style={{
width: 16,
height: [Link] === "doji" ? 3 : [Link] === "hammer" ? 8 : 30,
background: [Link], borderRadius: 2,
}} />
<div style={{ width: 1, height: [Link] === "hammer" ? 22 : 8, background: c
</div>
<div style={{ color: [Link], fontSize: 12, fontWeight: "bold", textAlign:
</div>
))}
</div>
{selectedCandle && (
<div style={{
background: `rgba(${[Link] === "#10B981" ? "16,185,129" : selec
border: `1px solid ${[Link]}`,
borderRadius: 12, padding: 16, marginBottom: 16, animation: "fadeIn 0.3s ease
}}>
<div style={{ color: [Link], fontWeight: "bold", fontSize: 15,
{[Link]} {[Link]}
</div>
<div style={{ color: "#94A3B8", fontSize: 13, lineHeight: 1.7 }}>{selectedCan
</div>
)}
<button onClick={() => setActive(1)} style={{
width: "100%", padding: "13px", background: "linear-gradient(135deg, #1D4ED8, #
color: "#fff", border: "none", borderRadius: 10, cursor: "pointer", fontWeight:
}}>Suite → Les Timeframes </button>
</div>
)}
{/* ---- SECTION 2: TIMEFRAMES ---- */}
{active === 1 && (
<div style={{ animation: "fadeIn 0.4s ease" }}>
<h2 style={{ color: "#60A5FA", fontSize: 20, marginBottom: 6 }}>Les Timeframes</h
<p style={{ color: "#64748B", fontSize: 14, lineHeight: 1.7, marginBottom: 20 }}>
Le timeframe = la durée représentée par chaque bougie. Tu peux zoomer ou dézoom
</p>
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 24
{[Link]((t) => (
<div key={[Link]} onClick={() => setSelectedTf(selectedTf?.tf === [Link] ? null :
style={{
background: selectedTf?.tf === [Link] ? "#0A1628" : "#080E1C",
border: `1px solid ${selectedTf?.tf === [Link] ? [Link] : "#0F2040"}`,
borderRadius: 12, padding: "14px 16px", cursor: "pointer", transition: "a
}}>
<div style={{ display: "flex", alignItems: "center", gap: 14 }}>
<div style={{
width: 44, height: 44, borderRadius: 8, background: `rgba(${[Link] ===
display: "flex", alignItems: "center", justifyContent: "center",
fontWeight: "bold", color: [Link], fontSize: 13,
}}>{[Link]}</div>
<div style={{ flex: 1 }}>
<div style={{ color: "#E2E8F0", fontSize: 14, fontWeight: "bold" }}>{t.
<div style={{ color: "#475569", fontSize: 12 }}>{[Link]} · {[Link]}</div
</div>
<div style={{ color: "#1E3A5F" }}>{selectedTf?.tf === [Link] ? "▲" : "▼"}</
</div>
{selectedTf?.tf === [Link] && (
<div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid #0F204
{[Link]}
</div>
)}
</div>
))}
</div>
<div style={{ background: "rgba(16,185,129,0.08)", border: "1px solid #10B981", b
<div style={{ color: "#10B981", fontWeight: "bold", marginBottom: 6 }}> Recom
<div style={{ color: "#94A3B8", fontSize: 13, lineHeight: 1.6 }}>
Commence sur <strong style={{ color: "#E2E8F0" }}>H1 (1 heure)</strong> pour
</div>
</div>
<button onClick={() => setActive(2)} style={{
width: "100%", padding: "13px", background: "linear-gradient(135deg, #1D4ED8, #
color: "#fff", border: "none", borderRadius: 10, cursor: "pointer", fontWeight:
}}>Suite → Les Tendances </button>
</div>
)}
{/* ---- SECTION 3: TENDANCES ---- */}
{active === 2 && (
<div style={{ animation: "fadeIn 0.4s ease" }}>
<h2 style={{ color: "#60A5FA", fontSize: 20, marginBottom: 6 }}>Les Tendances</h2
<p style={{ color: "#64748B", fontSize: 14, lineHeight: 1.7, marginBottom: 20 }}>
"La tendance est ton amie" — c'est la règle d'or du trading. Identifier la tend
</p>
{/* Toggle */}
<div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
{[Link](trendData).map(([key, val]) => (
<button key={key} onClick={() => setSelectedTrend(key)} style={{
flex: 1, padding: "10px 8px",
background: selectedTrend === key ? `rgba(${[Link] === "#10B981" ? "16,1
border: `1px solid ${selectedTrend === key ? [Link] : "#0F2040"}`,
color: selectedTrend === key ? [Link] : "#475569",
borderRadius: 10, cursor: "pointer", fontSize: 12, fontWeight: "bold", tran
}}>{[Link](" ")[0]}</button>
))}
</div>
{/* Chart */}
<div style={{ background: "#080E1C", border: "1px solid #0F2040", borderRadius: 1
<div style={{ color: "#1E3A5F", fontSize: 11, marginBottom: 12 }}>{[Link]}
<div style={{ position: "relative", height: 120 }}>
<svg viewBox="0 0 300 100" style={{ width: "100%", height: "100%" }}>
{/* Grid lines */}
{[25, 50, 75].map(y => (
<line key={y} x1="0" y1={y} x2="300" y2={y} stroke="#0F2040" strokeWidth=
))}
{/* Trend line */}
<polyline
points={[Link]((v, i) => `${i * 30 + 15},${100 - v}`).join(" "
fill="none" stroke={[Link]} strokeWidth="2" strokeLinecap="round" st
/>
{/* Points */}
{[Link]((v, i) => (
<circle key={i} cx={i * 30 + 15} cy={100 - v} r="3" fill={[Link]} />
))}
{/* Area fill */}
<polygon
points={`15,100 ${[Link]((v, i) => `${i * 30 + 15},${100 - v}`
fill={[Link]} opacity="0.07"
/>
</svg>
</div>
</div>
<div style={{ background: `rgba(${[Link] === "#10B981" ? "16,185,129" : tren
<div style={{ color: [Link], fontWeight: "bold", marginBottom: 6 }}>{trend
<div style={{ color: "#94A3B8", fontSize: 13, lineHeight: 1.7 }}>{[Link]}</
</div>
<div style={{ background: "#080E1C", border: "1px solid #0F2040", borderRadius: 1
<div style={{ color: "#60A5FA", fontSize: 12, marginBottom: 12 }}> COMMENT ID
{[
{ rule: "Série de hauts ET bas de plus en plus hauts", trend: "→ UPTREND", co
{ rule: "Série de hauts ET bas de plus en plus bas", trend: "→ DOWNTREND", co
{ rule: "Prix oscille entre deux niveaux fixes", trend: "→ RANGE", color: "#F
].map((r, i) => (
<div key={i} style={{ display: "flex", justifyContent: "space-between", paddi
<span style={{ color: "#94A3B8", fontSize: 13 }}>{[Link]}</span>
<span style={{ color: [Link], fontSize: 12, fontWeight: "bold", marginLeft
</div>
))}
</div>
<button onClick={() => setActive(3)} style={{
width: "100%", padding: "13px", background: "linear-gradient(135deg, #1D4ED8, #
color: "#fff", border: "none", borderRadius: 10, cursor: "pointer", fontWeight:
}}>Suite → Supports & Résistances </button>
</div>
)}
{/* ---- SECTION 4: S&R ---- */}
{active === 3 && (
<div style={{ animation: "fadeIn 0.4s ease" }}>
<h2 style={{ color: "#60A5FA", fontSize: 20, marginBottom: 6 }}>Supports & Résist
<p style={{ color: "#64748B", fontSize: 14, lineHeight: 1.7, marginBottom: 20 }}>
Ce sont les niveaux de prix où le marché a tendance à s'arrêter, rebondir ou se
</p>
{/* Interactive chart */}
<div style={{ background: "#080E1C", border: "1px solid #0F2040", borderRadius: 1
<div style={{ color: "#1E3A5F", fontSize: 11, marginBottom: 8 }}>Glisse le nive
<div style={{ position: "relative", height: 160 }}>
<svg viewBox="0 0 300 140" style={{ width: "100%", height: "100%" }}>
{[20, 40, 60, 80, 100, 120].map(y => (
<line key={y} x1="0" y1={y} x2="300" y2={y} stroke="#0F2040" strokeWidth=
))}
{/* Price path */}
<polyline
points="0,90 30,70 60,80 90,50 120,60 150,45 180,55 210,35 240,65 270,40
fill="none" stroke="#60A5FA" strokeWidth="1.5"
/>
{/* S/R line */}
<line x1="0" y1={srLevel} x2="300" y2={srLevel}
stroke={srLevel < 55 ? "#EF4444" : "#10B981"} strokeWidth="1.5" strokeDas
<text x="5" y={srLevel - 4} fill={srLevel < 55 ? "#EF4444" : "#10B981"} fon
{srLevel < 55 ? "RÉSISTANCE" : "SUPPORT"}
</text>
</svg>
</div>
<input type="range" min="20" max="110" value={srLevel} onChange={e => setSrLeve
style={{ width: "100%", accentColor: srLevel < 55 ? "#EF4444" : "#10B981" }}
<div style={{ textAlign: "center", color: srLevel < 55 ? "#EF4444" : "#10B981",
{srLevel < 55 ? " Zone de RÉSISTANCE — Le prix a du mal à monter" : " Zon
</div>
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBot
<div style={{ background: "rgba(16,185,129,0.08)", border: "1px solid #10B981",
<div style={{ color: "#10B981", fontWeight: "bold", marginBottom: 8 }}> SUP
<div style={{ color: "#94A3B8", fontSize: 13, lineHeight: 1.6 }}>
Niveau BAS où le prix rebondit souvent à la hausse. Les acheteurs sont là e
</div>
<div style={{ marginTop: 10, color: "#10B981", fontSize: 12 }}>→ Zone d'ACHAT
</div>
<div style={{ background: "rgba(239,68,68,0.08)", border: "1px solid #EF4444",
<div style={{ color: "#EF4444", fontWeight: "bold", marginBottom: 8 }}> RÉS
<div style={{ color: "#94A3B8", fontSize: 13, lineHeight: 1.6 }}>
Niveau HAUT où le prix rebondit souvent à la baisse. Les vendeurs sont là e
</div>
<div style={{ marginTop: 10, color: "#EF4444", fontSize: 12 }}>→ Zone de VENT
</div>
</div>
<div style={{ background: "#080E1C", border: "1px solid #F59E0B", borderRadius: 1
<div style={{ color: "#F59E0B", fontWeight: "bold", marginBottom: 8 }}> Le Fl
<div style={{ color: "#94A3B8", fontSize: 13, lineHeight: 1.7 }}>
Quand le prix casse un support → il devient une résistance. Quand il casse un
</div>
</div>
<button onClick={() => setActive(4)} style={{
width: "100%", padding: "13px", background: "linear-gradient(135deg, #1D4ED8, #
color: "#fff", border: "none", borderRadius: 10, cursor: "pointer", fontWeight:
}}>Suite → Figures Chartistes </button>
</div>
)}
{/* ---- SECTION 5: FIGURES ---- */}
{active === 4 && (
<div style={{ animation: "fadeIn 0.4s ease" }}>
<h2 style={{ color: "#60A5FA", fontSize: 20, marginBottom: 6 }}>Figures Chartiste
<p style={{ color: "#64748B", fontSize: 14, lineHeight: 1.7, marginBottom: 20 }}>
Certains patterns de prix se répètent et donnent des signaux prévisibles. Voici
</p>
{/* Figure selector */}
<div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
{[Link]((f, i) => (
<button key={i} onClick={() => setSelectedFigure(i)} style={{
flex: 1, padding: "10px 6px",
background: selectedFigure === i ? `rgba(${[Link] === "#EF4444" ? "239,68,
border: `1px solid ${selectedFigure === i ? [Link] : "#0F2040"}`,
color: selectedFigure === i ? [Link] : "#475569",
borderRadius: 10, cursor: "pointer", fontSize: 11, transition: "all 0.2s",
}}>{[Link]}<br />{[Link]}</button>
))}
</div>
{/* Figure chart */}
{(() => {
const f = figures[selectedFigure];
return (
<div style={{ animation: "fadeIn 0.3s ease" }}>
<div style={{ background: "#080E1C", border: "1px solid #0F2040", borderRad
<div style={{ color: "#1E3A5F", fontSize: 11, marginBottom: 10 }}>{[Link]
<svg viewBox="0 0 300 100" style={{ width: "100%", height: 120 }}>
{[25, 50, 75].map(y => (
<line key={y} x1="0" y1={y} x2="300" y2={y} stroke="#0F2040" strokeWi
))}
<polyline
points={[Link]((v, i) => `${(i / ([Link] - 1)) * 280 +
fill="none" stroke={[Link]} strokeWidth="2.5" strokeLinecap="round"
/>
<polygon
points={`10,100 ${[Link]((v, i) => `${(i / ([Link] - 1
fill={[Link]} opacity="0.06"
/>
{[Link]((v, i) => (
<circle key={i} cx={(i / ([Link] - 1)) * 280 + 10} cy={100 -
))}
</svg>
</div>
<div style={{
background: `rgba(${[Link] === "#EF4444" ? "239,68,68" : [Link] === "#1
border: `1px solid ${[Link]}`, borderRadius: 12, padding: 16, marginBott
}}>
<div style={{ display: "flex", justifyContent: "space-between", alignItem
<div style={{ color: [Link], fontWeight: "bold", fontSize: 15 }}>{[Link]
<span style={{
background: `rgba(${[Link] === "#EF4444" ? "239,68,68" : [Link] ===
color: [Link], borderRadius: 20, padding: "3px 10px", fontSize: 11,
}}>Signal {[Link]}</span>
</div>
<div style={{ color: "#94A3B8", fontSize: 13, lineHeight: 1.7 }}>{[Link]}
</div>
</div>
);
})()}
{/* Module complete */}
<div style={{ background: "rgba(16,185,129,0.08)", border: "1px solid #10B981", b
<div style={{ color: "#10B981", fontWeight: "bold", marginBottom: 6 }}> Modul
<div style={{ color: "#94A3B8", fontSize: 13, lineHeight: 1.7 }}>
Tu sais maintenant lire les bougies japonaises, choisir ton timeframe, identi
</div>
</div>
<div style={{ display: "flex", gap: 10 }}>
<button onClick={() => setActive(0)} style={{
padding: "12px 16px", background: "transparent", color: "#475569",
border: "1px solid #0F2040", borderRadius: 10, cursor: "pointer", fontSize: 1
}}>↩ Revoir</button>
<button style={{
flex: 1, padding: "12px", background: "linear-gradient(135deg, #7C3AED, #1D4E
color: "#fff", border: "none", borderRadius: 10, cursor: "pointer", fontWeigh
}}> Module 3 — Analyse Technique (bientôt)</button>
</div>
</div>
)}
</div>
<style>{`
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; tr
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
* { box-sizing: border-box; }
input[type=range] { -webkit-appearance: none; height: 4px; border-radius: 2px; backgr
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; heig
`}</style>
</div>
);
}