/* ==========================================================================
   Portefeuille simulé
   ========================================================================== */
.pf-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pf-zone { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pf-summary { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); padding: 28px; border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 760px) { .pf-summary { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.pf-total { margin: 4px 0; font-family: var(--display); font-size: clamp(40px, 7vw, 64px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; color: var(--t0); font-variant-numeric: tabular-nums; }
.pf-day { font-family: var(--mono); font-size: 14px; color: var(--t2); }
.up { color: var(--bull-text) !important; }
.down { color: var(--bear-text) !important; }
.pf-cash { display: grid; gap: 6px; position: relative; z-index: 1; }
.pf-cash strong { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--t0); }
.pf-cash-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pf-cash-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4C6EF5, #B79CFF, #F5B8DA); }
.pf-table-wrap { padding: 20px 0 8px; }
.pf-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 8px; }
.pf-table-head h2, .pf-chart h2 { font-size: 20px; }
.pf-scroll { position: relative; overflow-x: auto; }
.pf-table td:first-child, .pf-table th:first-child { padding-left: 20px; }
.pf-table .pnl small { font-size: 12px; opacity: 0.85; }
.pf-table td { height: 64px; }
.pf-chart { padding: 22px; display: grid; gap: 12px; }
#pf-svg { width: 100%; height: 220px; display: block; }


.pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pf-head-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* Scénarios « Et si… ? » */
.pf-scenarios { padding: 22px; display: grid; gap: 12px; }
.pf-scenarios h2 { font-size: 20px; }
.sc-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-scenario-view { padding: 22px; display: grid; gap: 14px; }
.sc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sc-head h2 { font-size: clamp(22px, 3vw, 28px); }
#sc-svg { width: 100%; height: 240px; display: block; }
.sc-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: sc-draw 900ms var(--ease) forwards; }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sc-line { animation: none; stroke-dashoffset: 0; } }
.sc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--t2); }
.sc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sc-legend i { width: 18px; height: 3px; border-radius: 2px; }
.sc-legend i.dash { background: repeating-linear-gradient(90deg, #CFC4FF 0 5px, transparent 5px 9px); }
.sc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-stats div { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); }
.sc-stats strong { font-family: var(--mono); font-weight: 500; color: var(--t0); }
.sc-stats small { font-family: var(--mono); font-size: 12px; color: var(--t2); }
@media (max-width: 480px) { .sc-stats { grid-template-columns: 1fr; } }

/* Démonstration (visiteur, compte gratuit) */
.pf-perf { display: inline-block; white-space: nowrap; font-family: var(--mono); font-size: 0.42em; vertical-align: middle; }

/* Répartition, comparaison à un ETF monde, versements */
.pf-mix, .pf-versements { padding: 22px; display: grid; gap: 12px; }
.pf-mix h2, .pf-versements h2 { font-size: 20px; }
.pf-mix h3 { margin-top: 8px; font-size: 16px; font-weight: 500; }
.pf-bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pf-bench div { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); }
.pf-bench strong { font-family: var(--mono); font-weight: 500; color: var(--t0); }
.pf-bench small { font-family: var(--mono); font-size: 12px; color: var(--t2); }
.pf-versements-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.pf-versements-form .input { height: 48px; }
.pf-versements a { color: var(--blue-text); }