feat: strategy builder

frontend/src/pages/StrategyBuilder.tsx

@@ -72,14 +72,14 @@ function PayoffChart({ priced, spot, scenarioSpot }: { priced: PriceCombo; spot:
           tickFormatter={(v) => `${v}`} />
         <Tooltip
           contentStyle={{ background: '#0f1623', border: '1px solid #1e2d4d', fontSize: 11 }}
-          labelFormatter={(v) => `Sous-jacent: ${Number(v).toFixed(2)}`}
+          labelFormatter={(v) => `Sous-jacent: ${Number(v).toFixed(decimals)}`}
           formatter={(v: number, name: string) => [fmtMoney(v), name]}
         />
         <Legend wrapperStyle={{ fontSize: 11 }} />
         <ReferenceLine y={0} stroke="#475569" strokeDasharray="4 4" />
         <ReferenceLine x={spot} stroke="#3b82f6" strokeDasharray="2 2" label={{ value: 'Spot', fill: '#3b82f6', fontSize: 9, position: 'top' }} />
         <ReferenceLine x={scenarioSpot} stroke="#f59e0b" strokeDasharray="2 2" label={{ value: 'Scénario J+8', fill: '#f59e0b', fontSize: 9, position: 'insideTopRight' }} />
-        <Line type="monotone" dataKey="expiry" name="À échéance" stroke="#3b82f6" strokeWidth={2} dot={false} />
+        <Line type="monotone" dataKey="expiry" name="À échéance jambe proche" stroke="#3b82f6" strokeWidth={2} dot={false} />
         <Line type="monotone" dataKey="scenario" name="À J+8 (scénario)" stroke="#f59e0b" strokeWidth={2} dot={false} />
       </LineChart>
     </ResponsiveContainer>
@@ -818,6 +818,9 @@ export default function StrategyBuilder() {
           <div className="card">
             <div className="stat-label mb-2">Diagramme payoff</div>
             <PayoffChart priced={priced} spot={priced.spot} scenarioSpot={priced.scenario_spot} />
+            <p className="text-[11px] text-slate-500 mt-1">
+              Les deux courbes utilisent la même vue de volatilité (celle du scénario) — seule la date diffère : bleu = à l'échéance de la jambe la plus proche, orange = à J+{horizonDays}.
+            </p>
           </div>
 
           <div className="grid grid-cols-2 md:grid-cols-4 gap-3">