/* ============================================================
   Wizefive Strategies — composants d'affichage des stratégies.
   Réutilise les tokens du thème wizefive (var --ink, --accent, …)
   avec des fallbacks pour fonctionner même hors du thème.
   ============================================================ */

.wf-block {
	--wf-ink: var(--ink, 55 53 47);
	--wf-muted: var(--ink-muted, 120 119 116);
	--wf-line: var(--line, rgba(55, 53, 47, 0.09));
	--wf-up: var(--viz-equity, 79 157 107);
	--wf-down: var(--viz-warn, 194 107 90);
	font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	color: rgb(var(--wf-ink));
	margin: 1.5rem 0;
}

.wf-block__head {
	margin-bottom: 0.75rem;
}

.wf-block__title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.15rem;
	margin: 0 0 0.25rem;
}

.wf-block__meta {
	color: rgb(var(--wf-muted));
	font-size: 0.875rem;
	margin: 0;
}

/* --- Tables ------------------------------------------------- */
.wf-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	background: rgb(var(--paper, 255 255 255));
}

.wf-table th,
.wf-table td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--wf-line);
	vertical-align: middle;
}

.wf-table thead th {
	font-weight: 600;
	color: rgb(var(--wf-muted));
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wf-table .wf-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wf-table tbody tr:hover {
	background: rgba(var(--wf-ink), 0.02);
}

.wf-ticker-logo {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	object-fit: contain;
	background: #fff;
}

.wf-logo-cell {
	width: 44px;
}

/* --- Indicateurs de performance ----------------------------- */
.wf-perf {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	white-space: nowrap;
}

.wf-perf--up {
	color: rgb(var(--wf-up));
}
.wf-perf--up::after {
	content: " \2197"; /* ↗ */
}

.wf-perf--down {
	color: rgb(var(--wf-down));
}
.wf-perf--down::after {
	content: " \2198"; /* ↘ */
}

.wf-perf--flat,
.wf-perf--na {
	color: rgb(var(--wf-muted));
}

/* --- Graphes ------------------------------------------------ */
.wf-chart__canvas {
	width: 100%;
	max-height: 320px;
}

/* --- Simulation --------------------------------------------- */
.wf-simulation__form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.wf-simulation__form label {
	display: block;
	font-size: 0.85rem;
	color: rgb(var(--wf-muted));
	width: 100%;
}

.wf-simulation__form input[type="number"] {
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--wf-line);
	border-radius: var(--radius, 10px);
	font-size: 1rem;
	min-width: 180px;
}

.wf-simulation__form button {
	padding: 0.55rem 1.1rem;
	border: 0;
	border-radius: var(--radius, 10px);
	background: rgb(var(--accent, 35 131 226));
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wf-simulation__form button:hover {
	background: rgb(var(--accent-hover, 26 117 209));
}

.wf-simulation__summary {
	font-size: 0.95rem;
	margin: 0.5rem 0 1rem;
}

/* --- Notices & disclaimer ----------------------------------- */
.wf-disclaimer {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: rgb(var(--wf-muted));
	border-top: 1px solid var(--wf-line);
	padding-top: 0.6rem;
}

.wf-notice {
	padding: 0.75rem 1rem;
	border-radius: var(--radius, 10px);
	font-size: 0.9rem;
	background: var(--paper-alt, #f7f6f3);
	color: rgb(var(--wf-muted));
}

.wf-notice--error {
	background: rgba(var(--wf-down), 0.08);
	color: rgb(var(--wf-down));
}

/* --- Admin -------------------------------------------------- */
.wf-badge {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.05rem 0.4rem;
	font-size: 0.7rem;
	font-family: monospace;
	background: #e7e7e7;
	border-radius: 4px;
	color: #555;
	vertical-align: middle;
}

.wf-registry input[type="text"],
.wf-registry input[type="number"] {
	width: 100%;
}

/* --------------------------------------------------------------------- */
/* [wf_invest] — moteur d'investissement interactif (onglets + live)       */
/* --------------------------------------------------------------------- */
.wf-invest {
	margin: 1.5rem 0;
	color: rgb(var(--wf-ink));
}

.wf-invest__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid rgb(var(--wf-line));
}

.wf-invest__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0.5rem 0.85rem;
	font: inherit;
	font-size: 0.92rem;
	color: rgb(var(--wf-muted));
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.wf-invest__tab:hover {
	color: rgb(var(--wf-ink));
}

.wf-invest__tab.is-active {
	color: rgb(var(--wf-ink));
	border-bottom-color: rgb(var(--wf-up));
	font-weight: 600;
}

.wf-invest__panel {
	display: none;
}

.wf-invest__panel.is-active {
	display: block;
}

.wf-invest__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1rem;
}

.wf-invest__amount-box {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.wf-invest__amount-label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.wf-invest__amount-title {
	font-size: 0.85rem;
	color: rgb(var(--wf-muted));
}

.wf-invest__field {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wf-line);
	border-radius: var(--radius, 10px);
	background: rgb(var(--paper, 255 255 255));
	transition: border-color 0.15s var(--ease, ease), box-shadow 0.15s var(--ease, ease);
}

.wf-invest__field:focus-within {
	border-color: rgb(var(--accent, 35 131 226));
	box-shadow: 0 0 0 3px rgba(var(--accent, 35 131 226), 0.18);
}

.wf-invest__currency {
	flex: none;
	font-family: var(--font-display, "Source Serif 4", serif);
	font-size: 1.5rem;
	line-height: 1;
	color: rgb(var(--wf-muted));
	pointer-events: none;
}

.wf-invest__amount {
	width: 9rem;
	max-width: 100%;
	padding: 0.2rem 0.3rem;
	font-family: var(--font-display, "Source Serif 4", serif);
	font-size: 1.65rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: rgb(var(--wf-ink));
	border: 0;
	background: transparent;
}

.wf-invest__amount:focus {
	outline: none;
}

.wf-invest__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.wf-invest__preset {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.8rem;
	font: inherit;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	color: rgb(var(--wf-ink));
	background: rgb(var(--paper, 255 255 255));
	border: 1px solid var(--wf-line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.15s var(--ease, ease), color 0.15s var(--ease, ease), background-color 0.15s var(--ease, ease);
}

.wf-invest__preset:hover {
	border-color: rgb(var(--accent, 35 131 226));
	color: rgb(var(--accent, 35 131 226));
}

.wf-invest__preset:focus-visible {
	outline: none;
	border-color: rgb(var(--accent, 35 131 226));
	box-shadow: 0 0 0 3px rgba(var(--accent, 35 131 226), 0.18);
}

.wf-invest__preset.is-active {
	color: rgb(var(--paper, 255 255 255));
	background: rgb(var(--accent, 35 131 226));
	border-color: rgb(var(--accent, 35 131 226));
}

.wf-invest__meta {
	margin: 0;
	font-size: 0.85rem;
	color: rgb(var(--wf-muted));
}

.wf-invest__table .wf-invest__amt,
.wf-invest__table .wf-invest__cash-amt {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wf-invest__cash-row {
	color: rgb(var(--wf-muted));
	border-top: 1px solid rgb(var(--wf-line));
}

.wf-invest__summary {
	margin: 0.85rem 0 0;
	font-size: 0.95rem;
}

.wf-invest__summary .wf-invest__invested,
.wf-invest__summary .wf-invest__cashv {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* Onglets génériques (wf-tabs) — réutilisés par la performance mensuelle  */
/* --------------------------------------------------------------------- */
.wf-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--wf-line);
}

.wf-tabs__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0.5rem 0.8rem;
	font: inherit;
	font-size: 0.9rem;
	color: rgb(var(--wf-muted));
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.wf-tabs__tab:hover {
	color: rgb(var(--wf-ink));
}

.wf-tabs__tab.is-active {
	color: rgb(var(--wf-ink));
	border-bottom-color: var(--wf-dot, rgb(var(--wf-up)));
	font-weight: 600;
}

.wf-tabs__panel {
	display: none;
}

.wf-tabs__panel.is-active {
	display: block;
}

/* Pastille de couleur de stratégie (titre + onglets). */
.wf-dot {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wf-dot, rgb(var(--wf-up)));
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------- */
/* Performance mensuelle — heatmap année × mois                            */
/* --------------------------------------------------------------------- */
.wf-monthly-block .wf-block__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.wf-monthly__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: center;
	margin: 0 0 0.85rem;
	font-size: 0.75rem;
	color: rgb(var(--wf-muted));
}

.wf-monthly__legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.wf-monthly__swatch {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 3px;
	display: inline-block;
}

.wf-monthly__swatch--up {
	background: rgb(var(--wf-up) / 0.4);
}

.wf-monthly__swatch--down {
	background: rgb(var(--wf-down) / 0.4);
}

.wf-monthly {
	font-size: 0.82rem;
}

.wf-monthly th,
.wf-monthly td {
	padding: 0.4rem 0.45rem;
	text-align: center;
	white-space: nowrap;
	border-bottom: 1px solid var(--wf-line);
	vertical-align: middle;
}

.wf-monthly thead th {
	font-size: 0.7rem;
}

/* On neutralise le hover générique de .wf-table : la heatmap porte déjà le sens. */
.wf-monthly tbody tr:hover {
	background: transparent;
}

/* Colonne "Année" figée à gauche au scroll horizontal. */
.wf-monthly__year {
	font-weight: 600;
	text-align: left;
	position: sticky;
	left: 0;
	background: rgb(var(--paper, 255 255 255));
	z-index: 1;
}

.wf-monthly thead .wf-monthly__year {
	color: rgb(var(--wf-muted));
}

.wf-monthly__cell {
	font-variant-numeric: tabular-nums;
	color: rgb(var(--wf-ink));
}

.wf-monthly__cell--empty {
	color: rgb(var(--wf-muted) / 0.5);
}

/* Intensité par paliers (amplitude du rendement). */
.wf-monthly__cell.pos-1 { background: rgb(var(--wf-up) / 0.1); }
.wf-monthly__cell.pos-2 { background: rgb(var(--wf-up) / 0.24); }
.wf-monthly__cell.pos-3 { background: rgb(var(--wf-up) / 0.42); }
.wf-monthly__cell.neg-1 { background: rgb(var(--wf-down) / 0.1); }
.wf-monthly__cell.neg-2 { background: rgb(var(--wf-down) / 0.24); }
.wf-monthly__cell.neg-3 { background: rgb(var(--wf-down) / 0.42); }
.wf-monthly__cell.is-flat { color: rgb(var(--wf-muted)); }

/* Colonne du total annuel, figée à droite. */
.wf-monthly__annual {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	border-left: 1px solid var(--wf-line);
	position: sticky;
	right: 0;
	background: rgb(var(--paper, 255 255 255));
}

.wf-monthly thead .wf-monthly__annual {
	color: rgb(var(--wf-muted));
	font-weight: 600;
}

.wf-monthly__annual.is-pos { color: rgb(var(--wf-up)); }
.wf-monthly__annual.is-neg { color: rgb(var(--wf-down)); }