/* MarocBoursier Valorisation v0.2.0 — charte mb-design « terminal financier ».
   Tokens uniquement, espacement strict 4/8/12/16/24/32/48, hairlines 1px,
   profondeur par paliers de surface (jamais d'ombres). Layout 2 colonnes :
   hypothèses (gauche, sticky) | rapport (hero → football field → méthodes →
   sensibilité). Scopé #mbval-root, couleurs en !important (thème WP — établi). */

#mbval-root {
	--mb-bg: #050A12;
	--mb-surface: #0D1422;
	--mb-surface-2: #0f1928;
	--mb-raise: #131d2c;
	--mb-line: #1e2d45;
	--mb-line-strong: #2e4468;
	--mb-gold: #C9A84C;
	--mb-gold-light: #E8C96A;
	--mb-gold-dim: rgba(201, 168, 76, 0.12);
	--mb-text: #F0EAE0;
	--mb-text-2: #C4BBA8;
	--mb-text-3: #8A8478;
	--mb-up: #3DDB9F;
	--mb-down: #FF8585;
	--mb-r: 10px;
	--mb-r-lg: 14px;
	--mb-ease: cubic-bezier(0.4, 0, 0.2, 1);

	background: var(--mb-bg) !important;
	color: var(--mb-text) !important;
	font-family: 'Inter Tight', -apple-system, sans-serif;
	font-size: 14px;
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-r-lg);
	padding: 24px;
	max-width: 1180px;
	margin: 0 auto;
}
#mbval-root * { box-sizing: border-box; }

/* ── Utilitaires ── */
#mbval-root .pos { color: var(--mb-up) !important; }
#mbval-root .neg { color: var(--mb-down) !important; }
#mbval-root .num, #mbval-root input.num, #mbval-root td, #mbval-root th.num {
	font-family: 'JetBrains Mono', monospace;
	font-variant-numeric: tabular-nums;
}
#mbval-root .mbval-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mb-text-3) !important;
	font-weight: 500;
}
#mbval-root .mbval-degraded {
	color: var(--mb-text-2) !important;
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-r);
	background: var(--mb-surface);
	padding: 24px;
	text-align: center;
	margin: 0;
}

/* ── Layout 2 colonnes (DOM : main puis aside → mobile = résultat d'abord) ── */
#mbval-root .mbval-cols { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
	#mbval-root .mbval-cols {
		display: grid;
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}
	#mbval-root .mbval-aside {
		order: -1;
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 4px;
	}
}

/* ── Héros ── */
#mbval-root .mbval-hero {
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-r-lg);
	background: linear-gradient(180deg, var(--mb-surface-2), var(--mb-surface));
	padding: 24px;
	margin: 0 0 16px;
	position: relative;
	overflow: hidden;
}
#mbval-root .mbval-hero::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--mb-gold), transparent);
}
#mbval-root .mbval-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#mbval-root .mbval-title {
	font-family: 'Fraunces', Georgia, serif;
	color: var(--mb-text) !important;
	font-size: 24px; margin: 0 0 4px; font-weight: 600; letter-spacing: -0.02em;
}
#mbval-root .mbval-tickertag {
	font-family: 'JetBrains Mono', monospace; font-size: 12px;
	color: var(--mb-gold-light) !important;
	border: 1px solid var(--mb-line-strong); border-radius: 999px;
	padding: 4px 12px; background: var(--mb-gold-dim);
	white-space: nowrap;
}
#mbval-root .mbval-hero-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#mbval-root .mbval-price { font-size: 15px; color: var(--mb-text-2) !important; }
#mbval-root .mbval-hero-value { margin-top: 16px; }
#mbval-root .mbval-hero-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
#mbval-root .mbval-hero-num {
	font-family: 'Fraunces', Georgia, serif;
	font-variant-numeric: tabular-nums;
	font-size: clamp(38px, 5vw, 60px);
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
	color: var(--mb-gold-light) !important;
}
#mbval-root .mbval-hero-sub { font-size: 13px; color: var(--mb-text-3) !important; margin-top: 8px; }

/* Badge pill up/down : fond rgba .14, texte plein */
#mbval-root .mbval-pill {
	font-family: 'JetBrains Mono', monospace;
	font-variant-numeric: tabular-nums;
	font-size: 12px; border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
#mbval-root .mbval-pill.up { background: rgba(61, 219, 159, 0.14) !important; color: var(--mb-up) !important; }
#mbval-root .mbval-pill.down { background: rgba(255, 133, 133, 0.14) !important; color: var(--mb-down) !important; }

/* ── Chips d'origine des données (spécifique MBVAL) ── */
#mbval-root .mbval-chip {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; letter-spacing: 0.04em;
	border-radius: 999px; padding: 2px 8px; margin-top: 4px;
	border: 1px solid var(--mb-line);
	color: var(--mb-text-3) !important; background: transparent;
	white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#mbval-root .chip-auto { color: var(--mb-up) !important; border-color: rgba(61, 219, 159, 0.22); }
#mbval-root .chip-analyse { color: var(--mb-gold-light) !important; border-color: rgba(201, 168, 76, 0.35); background: var(--mb-gold-dim); }
#mbval-root .chip-user { color: var(--mb-text) !important; border-color: rgba(61, 219, 159, 0.5); }
#mbval-root .chip-warn { color: var(--mb-text-3) !important; border-style: dashed; border-color: var(--mb-text-3); }

/* ── Barre presets + reset (haut de l'aside) ── */
#mbval-root .mbval-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
#mbval-root .mbval-presets { display: flex; gap: 4px; flex: 1; }
#mbval-root .mbval-pillbtn {
	font: inherit; font-size: 12px; cursor: pointer; flex: 1;
	color: var(--mb-text-2) !important; background: var(--mb-surface) !important;
	border: 1px solid var(--mb-line); border-radius: 999px; padding: 8px 8px;
	min-height: 36px;
	transition: border-color 160ms var(--mb-ease), background 160ms var(--mb-ease), color 160ms var(--mb-ease);
}
#mbval-root .mbval-pillbtn:hover:not(:disabled) { border-color: var(--mb-line-strong); color: var(--mb-text) !important; }
#mbval-root .mbval-pillbtn.is-on {
	color: var(--mb-gold-light) !important; background: var(--mb-gold-dim) !important;
	border-color: var(--mb-gold);
}
#mbval-root .mbval-pillbtn:disabled { opacity: 0.35; cursor: not-allowed; }
#mbval-root .mbval-reset {
	font: inherit; font-size: 11px; cursor: pointer;
	color: var(--mb-text-3) !important; background: transparent !important;
	border: 1px solid var(--mb-line); border-radius: var(--mb-r); padding: 8px 12px;
	min-height: 36px;
	transition: border-color 160ms var(--mb-ease), color 160ms var(--mb-ease);
}
#mbval-root .mbval-reset:hover { color: var(--mb-text) !important; border-color: var(--mb-line-strong); }

/* ── Panneaux d'hypothèses (aside) ── */
#mbval-root .mbval-panel {
	background: var(--mb-surface);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-r);
	margin: 0 0 8px;
	transition: border-color 160ms var(--mb-ease);
}
#mbval-root .mbval-panel[open] { border-color: var(--mb-line); }
#mbval-root .mbval-panel summary {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	cursor: pointer; list-style: none; padding: 12px 16px;
	transition: background 160ms var(--mb-ease);
}
#mbval-root .mbval-panel summary::-webkit-details-marker { display: none; }
#mbval-root .mbval-panel summary:hover { background: var(--mb-surface-2); border-radius: var(--mb-r); }
#mbval-root .mbval-panel summary .mbval-label::before { content: '▸ '; color: var(--mb-gold) !important; }
#mbval-root .mbval-panel[open] summary .mbval-label::before { content: '▾ '; }
#mbval-root .mbval-panel-val { font-size: 12px; color: var(--mb-gold-light) !important; }
#mbval-root .mbval-panel-body { padding: 4px 16px 16px; display: grid; gap: 8px; }
#mbval-root .mbval-panel.is-flash { border-color: var(--mb-gold); }

/* Champs */
#mbval-root .mbval-field { display: block; margin: 0; }
#mbval-root .mbval-flabel {
	display: block; font-size: 11px; color: var(--mb-text-2) !important; margin-bottom: 4px;
}
#mbval-root .mbval-field.is-info input { opacity: 0.7; }
#mbval-root .mbval-inputwrap { display: flex; align-items: stretch; }
#mbval-root .mbval-field input {
	width: 100%; font-size: 13px; color: var(--mb-text) !important;
	background: var(--mb-surface-2) !important;
	border: 1px solid var(--mb-line); border-radius: var(--mb-r) 0 0 var(--mb-r);
	padding: 8px 12px; outline: none; min-width: 0; min-height: 40px;
	transition: border-color 160ms var(--mb-ease);
}
#mbval-root .mbval-field input:focus { border-color: var(--mb-gold); }
#mbval-root .mbval-unit {
	display: flex; align-items: center;
	font-size: 11px; color: var(--mb-text-3) !important;
	background: var(--mb-raise); border: 1px solid var(--mb-line); border-left: 0;
	border-radius: 0 var(--mb-r) var(--mb-r) 0; padding: 0 8px;
	white-space: nowrap; flex: 0 0 auto;
}

/* ── Cartes génériques ── */
#mbval-root .mbval-card {
	background: var(--mb-surface);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-r);
	padding: 16px;
	margin: 0 0 16px;
	transition: border-color 160ms var(--mb-ease);
}
#mbval-root .mbval-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }

/* ── Football field ── */
#mbval-root .mbval-ff-wrap { position: relative; }
#mbval-root .mbval-ff-wrap canvas { display: block; width: 100%; }
#mbval-root .mbval-tip {
	position: absolute; z-index: 5; pointer-events: none;
	background: var(--mb-raise); border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-r); padding: 8px 12px;
	font-size: 12px; line-height: 1.6; color: var(--mb-text-2) !important;
	white-space: nowrap;
}
#mbval-root .mbval-tip strong { color: var(--mb-text) !important; font-weight: 600; }
#mbval-root .mbval-tip em { color: var(--mb-text-3) !important; font-style: normal; font-size: 11px; }
#mbval-root .mbval-ff-note { font-size: 11px; color: var(--mb-text-3) !important; margin: 8px 0 0; }

/* ── Cartes méthodes DENSES : barre or 3px, valeur Fraunces 27px, sous-chiffres en ligne ── */
#mbval-root .mbval-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 0 0 16px;
}
#mbval-root .mbval-mcard {
	background: var(--mb-surface);
	border: 1px solid var(--mb-line);
	border-left: 3px solid var(--mb-gold);
	border-radius: var(--mb-r);
	padding: 12px 16px;
	transition: border-color 160ms var(--mb-ease);
}
#mbval-root .mbval-mcard:hover { border-color: var(--mb-line-strong); border-left-color: var(--mb-gold); }
#mbval-root .mbval-mcard-head { margin: 0 0 8px; }
#mbval-root .mbval-mcard-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#mbval-root .mbval-mval {
	font-family: 'Fraunces', Georgia, serif;
	font-variant-numeric: tabular-nums;
	font-size: 27px; font-weight: 600; letter-spacing: -0.02em;
	color: var(--mb-gold-light) !important;
	white-space: nowrap;
}
#mbval-root .mbval-subs {
	font-size: 12px; color: var(--mb-text-3) !important;
	margin-top: 8px; line-height: 1.6; min-height: 0;
}
#mbval-root .mbval-alert {
	font-size: 12px; border-radius: var(--mb-r); padding: 8px 12px; margin: 8px 0 0;
	border: 1px solid rgba(255, 133, 133, 0.3); color: var(--mb-down) !important;
	background: rgba(255, 133, 133, 0.06);
}
#mbval-root .mbval-alert.is-warn {
	border-color: rgba(201, 168, 76, 0.35); color: var(--mb-gold-light) !important;
	background: var(--mb-gold-dim);
}
#mbval-root .mbval-goto {
	font: inherit; font-size: 12px; cursor: pointer; margin-top: 8px;
	color: var(--mb-gold-light) !important; background: transparent !important;
	border: 1px solid var(--mb-line); border-radius: var(--mb-r); padding: 8px 12px;
	min-height: 36px;
	transition: border-color 160ms var(--mb-ease);
}
#mbval-root .mbval-goto:hover { border-color: var(--mb-gold); }

/* ── Sensibilité : heatmap discrète, première colonne collante ── */
#mbval-root .mbval-sens-scroll { overflow-x: auto; }
#mbval-root .mbval-sens { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
#mbval-root .mbval-sens th, #mbval-root .mbval-sens td {
	border: 1px solid var(--mb-line); border-left: 0; border-top: 0;
	padding: 8px 12px; text-align: center;
	color: var(--mb-text-2) !important;
}
#mbval-root .mbval-sens thead th { color: var(--mb-text-3) !important; background: var(--mb-surface-2); border-top: 1px solid var(--mb-line); }
#mbval-root .mbval-sens th:first-child, #mbval-root .mbval-sens td:first-child { border-left: 1px solid var(--mb-line); }
#mbval-root .mbval-sens tbody th, #mbval-root .mbval-sens thead th:first-child {
	background: var(--mb-surface-2);
	position: sticky; left: 0; z-index: 2;
}
#mbval-root .mbval-sens-corner { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; text-align: left !important; }
#mbval-root .mbval-sens td.hm-up { background: rgba(61, 219, 159, 0.09); color: var(--mb-up) !important; }
#mbval-root .mbval-sens td.hm-up.hm-hot { background: rgba(61, 219, 159, 0.20); }
#mbval-root .mbval-sens td.hm-down { background: rgba(255, 133, 133, 0.09); color: var(--mb-down) !important; }
#mbval-root .mbval-sens td.hm-down.hm-hot { background: rgba(255, 133, 133, 0.20); }
#mbval-root .mbval-sens td.is-current { outline: 2px solid var(--mb-gold); outline-offset: -2px; font-weight: 600; }

/* ── Méthodologie repliée ── */
#mbval-root .mbval-methodo summary {
	cursor: pointer; font-family: 'Fraunces', Georgia, serif; font-size: 15px;
	color: var(--mb-gold-light) !important; list-style: none;
}
#mbval-root .mbval-methodo summary::-webkit-details-marker { display: none; }
#mbval-root .mbval-methodo summary::before { content: '▸ '; }
#mbval-root .mbval-methodo[open] summary::before { content: '▾ '; }
#mbval-root .mbval-methodo-body { margin-top: 12px; }
#mbval-root .mbval-methodo-body p { color: var(--mb-text-2) !important; font-size: 13px; line-height: 1.7; margin: 0 0 8px; }
#mbval-root .mbval-methodo-body strong { color: var(--mb-text) !important; }

/* ── Divers ── */
#mbval-root .mbval-derived { font-size: 12px; color: var(--mb-text-3) !important; margin: 8px 0 0; line-height: 1.6; }
#mbval-root .mbval-foot { font-size: 12px; color: var(--mb-text-3) !important; margin: 0; line-height: 1.6; }

/* ── Bouton flottant mobile ── */
#mbval-root .mbval-fab {
	position: fixed; right: 16px; bottom: 16px; z-index: 50;
	font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
	color: var(--mb-gold-light) !important;
	background: var(--mb-raise) !important;
	border: 1px solid var(--mb-gold); border-radius: 999px;
	padding: 12px 16px; min-height: 48px;
	transition: border-color 160ms var(--mb-ease), background 160ms var(--mb-ease);
}
@media (min-width: 1024px) { #mbval-root .mbval-fab { display: none; } }

/* ── Squelettes shimmer (dimensions réelles, jamais de spinner) ── */
#mbval-root .mbval-skel {
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-r);
	margin: 0 0 16px;
	background: linear-gradient(90deg, var(--mb-surface) 25%, var(--mb-surface-2) 37%, var(--mb-surface) 63%);
	background-size: 400% 100%;
	animation: mbval-shimmer 1.4s var(--mb-ease) infinite;
}
@keyframes mbval-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* ── Reveal décalé ── */
@keyframes mbval-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#mbval-root .mbval-reveal.is-in { animation: mbval-in 400ms var(--mb-ease) both; }

/* ── Mobile (référence 390px) ── */
@media (max-width: 640px) {
	#mbval-root { padding: 16px; border-radius: 0; border-left: 0; border-right: 0; }
	#mbval-root .mbval-hero { padding: 16px; }
	#mbval-root .mbval-hero-num { font-size: 38px; }
	#mbval-root .mbval-methods { grid-template-columns: 1fr; gap: 12px; }
	#mbval-root .mbval-panel-body { grid-template-columns: 1fr 1fr; }
	#mbval-root .mbval-field input { min-height: 44px; }
	#mbval-root .mbval-pillbtn, #mbval-root .mbval-reset { min-height: 44px; }
	#mbval-root .mbval-sens th, #mbval-root .mbval-sens td { padding: 8px; font-size: 11px; }
}
@media (max-width: 340px) {
	#mbval-root .mbval-panel-body { grid-template-columns: 1fr; }
}

/* ── Accessibilité mouvement ── */
@media (prefers-reduced-motion: reduce) {
	#mbval-root .mbval-reveal.is-in { animation: none; }
	#mbval-root .mbval-skel { animation: none; }
	#mbval-root * { transition: none !important; }
}