/*!
 * Riftbound Price Hub — feuille du widget autonome du calculateur d'EV (WiziShop) v1.0.1
 *
 * Fusion de ev-critical.css + ev-calculator.css du plugin WordPress (mêmes classes
 * .rbph-ev__*), entièrement SCOPÉE .rbph-ev, avec des jetons --rbph-* sombres par défaut
 * (mode « Onyx » du site) et redéfinis sous html[data-theme="light"] (« Parchemin »).
 * Les couleurs de rareté et de l'histogramme restent AUSSI en style= inline (filet de
 * sécurité si la feuille ne charge pas).
 */

/* ==========================================================================
   Jetons de thème — préfixés --rbph-*, SCOPÉS .rbph-ev (aucune fuite sur la page).
   Défaut = mode sombre « Onyx » de shop-tcg.fr (fond #0B0F14, texte #F0E9D6, accent
   #7A1F1F) ; redéfinis sous html[data-theme="light"] (« Parchemin »). Contrastes texte
   vérifiés ≥ 4,5:1 (AA) dans les deux modes. Les --stcg-* du site ne sont pas lus : le
   widget garde son identité même si le thème du site change de noms de variables.
   ========================================================================== */

.rbph-ev {
	/* Surfaces */
	--rbph-surface: #141a22;
	--rbph-surface-2: #0f141b;
	--rbph-surface-3: #222b37;
	--rbph-border: #2b3542;
	--rbph-border-2: #3b4757;

	/* Encre / texte */
	--rbph-ink: #f0e9d6;
	--rbph-ink-2: #cfc6b0;
	--rbph-ink-3: #a99f8a;

	/* Accent marque (bordeaux Onyx) */
	--rbph-accent: #7a1f1f;
	--rbph-accent-hover: #932828;
	--rbph-accent-ink: #f0a08c;
	--rbph-accent-soft: #3a1d1d;
	--rbph-on-accent: #ffffff;

	/* Sémantique gain/perte (toujours + icône + libellé, jamais la couleur seule) */
	--rbph-positive: #6fd39a;
	--rbph-positive-soft: #15291e;
	--rbph-negative: #ff9a85;
	--rbph-negative-soft: #341a16;
	--rbph-warn-bg: #33270f;
	--rbph-warn-ink: #f3c766;
	--rbph-warn-border: #5a4418;

	/* Data-viz (histogramme Monte Carlo) */
	--rbph-data: #8fa6cf;
	--rbph-data-soft: #2f3c52;
	--rbph-data-median: #f0b43c;
	--rbph-data-price: #ff7a5c;

	/* Rareté (séquence ordonnée, faible → forte) — littéraux aussi portés en style= inline */
	--rbph-rar-common: #8b95a3;
	--rbph-rar-uncommon: #3e8e7e;
	--rbph-rar-rare: #2f6fb0;
	--rbph-rar-epic: #7a4fb0;
	--rbph-rar-legendary: #d99100;
	--rbph-rar-overnumber: #e8552b;

	/* Forme / rythme / typo (polices du site, JAMAIS chargées ici : repli système) */
	--rbph-radius: 8px;
	--rbph-radius-sm: 6px;
	--rbph-gap: 16px;
	--rbph-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--rbph-font-head: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--rbph-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 16px rgba(0, 0, 0, .25);

	/* ---- Cadre du conteneur ---- */
	color-scheme: dark;
	box-sizing: border-box;
	max-width: 47.5rem;
	min-width: 0;
	margin: 2em 0;
	padding: var(--rbph-gap);
	background: var(--rbph-surface-2);
	color: var(--rbph-ink);
	border-radius: var(--rbph-radius);
	font-family: var(--rbph-font);
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}

html[data-theme="light"] .rbph-ev {
	--rbph-surface: #fffdf8;
	--rbph-surface-2: #f5efe1;
	--rbph-surface-3: #e9e0cb;
	--rbph-border: #ddd2ba;
	--rbph-border-2: #c9bc9e;

	--rbph-ink: #1f1a12;
	--rbph-ink-2: #4a4234;
	--rbph-ink-3: #655b48;

	--rbph-accent: #7a1f1f;
	--rbph-accent-hover: #5f1717;
	--rbph-accent-ink: #7a1f1f;
	--rbph-accent-soft: #f4e2dc;
	--rbph-on-accent: #ffffff;

	--rbph-positive: #1b6b3c;
	--rbph-positive-soft: #e2f1e6;
	--rbph-negative: #9e2f18;
	--rbph-negative-soft: #f8e4de;
	--rbph-warn-bg: #f9ecc9;
	--rbph-warn-ink: #6e4b00;
	--rbph-warn-border: #e8d39a;

	--rbph-data: #2b3a55;
	--rbph-data-soft: #c7d0de;
	--rbph-data-median: #9a6400;
	--rbph-data-price: #a3321a;

	--rbph-shadow: 0 1px 2px rgba(40, 30, 10, .06), 0 4px 16px rgba(40, 30, 10, .07);

	color-scheme: light;
}

/* Conteneur hôte posé dans la page WiziShop (<div class="rbph-ev" data-rbph-api>) :
   il ne porte que les jetons ; le cadre visuel est celui des <section class="rbph-ev">
   injectées dedans (pas de double cadre). */
.rbph-ev[data-rbph-api] {
	max-width: 47.5rem;
	margin: 2em 0;
	padding: 0;
	background: none;
	border-radius: 0;
}

.rbph-ev[data-rbph-api] > .rbph-ev {
	margin: 0 0 var(--rbph-gap);
}

.rbph-ev[data-rbph-api] > .rbph-ev:last-child {
	margin-bottom: 0;
}


.rbph-ev *,
.rbph-ev *::before,
.rbph-ev *::after {
	box-sizing: border-box;
}

/* --- Cadre des sections en cartes (DESIGN-02) : doivent rester distinctes même sans la
   feuille externe (surface blanche, bordure, ombre, radius). --- */

.rbph-ev__section {
	background: var(--rbph-surface);
	border: 1px solid var(--rbph-border);
	border-radius: var(--rbph-radius);
	box-shadow: var(--rbph-shadow);
	padding: 18px;
	margin-bottom: var(--rbph-gap);
}

.rbph-ev__section:last-child {
	margin-bottom: 0;
}

/* --- Espacement libellé↔valeur (anti « Médiane132,18 € », DESIGN-01) : les gaps flex/grid
   sont critiques pour que libellé et valeur ne se collent jamais sans la feuille complète. --- */

.rbph-ev__headline {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px 14px;
}

.rbph-ev__rarity-item {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	align-items: center;
	gap: 10px;
}

.rbph-ev__sim-stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px;
}

/* --- Barres de rareté : piste + remplissage. La COULEUR du remplissage est AUSSI portée
   en attribut style= inline direct (ev-rarity.php) → survit même si ce bloc est vidé. --- */

.rbph-ev__rarity-bar {
	display: block;
	height: 14px;
	background: var(--rbph-surface-3);
	border-radius: 999px;
	overflow: hidden;
}

.rbph-ev__rarity-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
}

/* --- Accessibilité : prefers-reduced-motion (DESIGN-06, AA) ---
   Garantie A11y CRITIQUE : hérité du bloc critique du plugin.
   Vit ICI (source unique) et NON dans ev-calculator.css, conformément à la disjonction
   stricte critique↔raffinement. */

@media (prefers-reduced-motion: reduce) {
	.rbph-ev *,
	.rbph-ev *::before,
	.rbph-ev *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* --- En-tête --- */

.rbph-ev__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: var(--rbph-gap);
}

.rbph-ev__title {
	margin: 0;
	color: var(--rbph-ink);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.25;
}

/* --- Badges --- */

.rbph-ev__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0.25rem 0.5625rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
}

.rbph-ev__badge--stale {
	background: var(--rbph-warn-bg);
	color: var(--rbph-warn-ink);
	border: 1px solid var(--rbph-warn-border);
}

.rbph-ev__badge--partial {
	background: var(--rbph-accent-soft);
	color: var(--rbph-accent-ink);
	border: 1px solid var(--rbph-accent-soft);
}

/* --- Titre de section (carte) --- */

.rbph-ev__section-title {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rbph-ink-2);
}

/* --- 1. RÉSULTAT (carte héro) ---
   .rbph-ev__headline (flex+wrap+gap) : règle plus haut (bloc « critique » du plugin). */

.rbph-ev__label {
	font-size: 0.8125rem;
	color: var(--rbph-ink-2);
	font-weight: 600;
}

.rbph-ev__amount {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--rbph-ink);
	letter-spacing: -0.01em;
}

.rbph-ev__eur {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--rbph-ink-2);
	margin-left: 0.125rem;
}

.rbph-ev__coverage {
	font-size: 0.75rem;
	color: var(--rbph-ink-3);
	margin-left: auto;
}

.rbph-ev__coverage-line {
	margin: 0.4rem 0 0;
	color: var(--rbph-ink-3);
	font-size: 0.8125rem;
}

/* --- Fourchette d'EV (emplacement rempli en Phase 11) --- */

.rbph-ev__range {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-top: 1rem;
}

.rbph-ev__range-item {
	background: var(--rbph-surface-2);
	border: 1px solid var(--rbph-border);
	border-radius: var(--rbph-radius-sm);
	padding: 0.625rem 0.75rem;
	text-align: center;
}

.rbph-ev__range-label {
	display: block;
	font-size: 0.6875rem;
	color: var(--rbph-ink-2);
	font-weight: 600;
	margin-bottom: 0.1875rem;
}

.rbph-ev__range-value {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rbph-ink);
}

.rbph-ev__range-item--floor {
	border-bottom: 3px solid var(--rbph-data-price);
}

.rbph-ev__range-item--mid {
	border-bottom: 3px solid var(--rbph-data-median);
}

.rbph-ev__range-item--high {
	border-bottom: 3px solid var(--rbph-positive);
}

/* --- ROI + prix d'achat ---
   SCOPÉ .rbph-ev__summary (UI WR-03) : .rbph-ev__roi-row et .rbph-ev__shown-price
   sont AUSSI utilisées dans ev-breakdown.php sur des <tr>/<th> de tableau ; un
   display:flex appliqué à ces <tr> casserait l'alignement des colonnes. On restreint
   donc les règles flex/inline-flex du résumé au contexte .rbph-ev__summary. */

.rbph-ev__summary .rbph-ev__roi-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
	margin-top: 1rem;
}

.rbph-ev__roi {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font-size: 0.9375rem;
	font-weight: 700;
	padding: 0.5rem 0.8125rem;
	border-radius: var(--rbph-radius-sm);
}

.rbph-ev__roi--positive {
	background: var(--rbph-positive-soft);
	color: var(--rbph-positive);
}

.rbph-ev__roi--negative {
	background: var(--rbph-negative-soft);
	color: var(--rbph-negative);
}

.rbph-ev__roi--even {
	background: var(--rbph-surface-3);
	color: var(--rbph-ink-2);
}

.rbph-ev__roi-sign {
	font-size: 0.8125rem;
}

.rbph-ev__summary .rbph-ev__shown-price {
	font-size: 0.8125rem;
	color: var(--rbph-ink-2);
}

.rbph-ev__summary .rbph-ev__shown-price strong {
	color: var(--rbph-ink);
}

/* --- Tendance 7j/30j (emplacement rempli en Phase 11) --- */

.rbph-ev__trend {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	margin-left: auto;
}

.rbph-ev__trend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.3125rem 0.5625rem;
	border-radius: 999px;
	background: var(--rbph-surface-2);
	border: 1px solid var(--rbph-border);
}

.rbph-ev__trend-item--up {
	color: var(--rbph-positive);
}

.rbph-ev__trend-item--down {
	color: var(--rbph-negative);
}

.rbph-ev__trend-win {
	font-size: 0.625rem;
	color: var(--rbph-ink-3);
	font-weight: 600;
}

/* --- 2. SAISIES --- */

.rbph-ev__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1.125rem;
	align-items: flex-end;
}

.rbph-ev__unit {
	border: 0;
	padding: 0;
	margin: 0;
}

.rbph-ev__unit-legend {
	font-size: 0.75rem;
	color: var(--rbph-ink-2);
	font-weight: 600;
	margin-bottom: 0.375rem;
	padding: 0;
}

.rbph-ev__unit-options {
	display: inline-flex;
	border: 1px solid var(--rbph-border-2);
	border-radius: var(--rbph-radius-sm);
	overflow: hidden;
}

.rbph-ev__unit-option {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.5rem;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	cursor: pointer;
	background: var(--rbph-surface);
}

/* État actif du toggle d'unité (WR-01) : porté par le radio coché.
   - `:has(:checked)` dérive l'état sans JS (suit la sélection nativement) ;
   - `--active` est (re)posé par ev-calculator.js (syncActiveUnit) comme repli
     pour les navigateurs sans `:has()`. Les deux décrivent le MÊME style. */
.rbph-ev__unit-option--active,
.rbph-ev__unit-option:has(.rbph-ev__unit-radio:checked) {
	background: var(--rbph-accent);
	color: var(--rbph-on-accent);
	font-weight: 700;
}

.rbph-ev__price-label {
	display: block;
	font-size: 0.75rem;
	color: var(--rbph-ink-2);
	font-weight: 600;
	margin-bottom: 0.375rem;
}

.rbph-ev__price-field {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border: 1px solid var(--rbph-border-2);
	border-radius: var(--rbph-radius-sm);
	padding: 0.4375rem 0.6875rem;
	background: var(--rbph-surface);
}

.rbph-ev__price {
	min-height: 2.5rem;
	border: 0;
	width: 5.625rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--rbph-ink);
	background: transparent;
}

/* --- 3. DÉCOMPOSITION : rareté ---
   .rbph-ev__rarity-item (grille), .rbph-ev__rarity-bar/.rbph-ev__rarity-fill : règles plus haut. */

.rbph-ev__rarity-title,
.rbph-ev__top-title {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--rbph-ink-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rbph-ev__rarity-list {
	list-style: none;
	margin: 0 0 0.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5625rem;
}

.rbph-ev__rarity-label {
	font-size: 0.8125rem;
	color: var(--rbph-ink);
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
}

.rbph-ev__rarity-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 3px;
	flex: none;
}

.rbph-ev__rarity-value {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--rbph-ink);
	text-align: right;
	min-width: 6rem;
	white-space: nowrap;
}

.rbph-ev__rarity-share {
	color: var(--rbph-ink-3);
	font-weight: 600;
	font-size: 0.75rem;
}

/* --- Top contributeurs (zébrure) --- */

.rbph-ev__top {
	margin-top: 1.125rem;
	border-top: 1px solid var(--rbph-border);
	padding-top: 1rem;
}

.rbph-ev__top-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
}

.rbph-ev__top-item {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.875rem;
	padding: 0.375rem 0.5rem;
	border-radius: var(--rbph-radius-sm);
}

.rbph-ev__top-item:nth-child(odd) {
	background: var(--rbph-surface-2);
}

.rbph-ev__top-name {
	color: var(--rbph-ink);
}

.rbph-ev__top-value {
	color: var(--rbph-ink);
	font-weight: 700;
	white-space: nowrap;
}

/* --- Détail repliable --- */

.rbph-ev__detail {
	margin-top: 0.875rem;
}

.rbph-ev__detail-toggle {
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--rbph-accent-ink);
	padding: 0.5rem 0;
	list-style-position: inside;
}

/* --- Tableau de détail (collapse mobile data-label, zéro JS) --- */

.rbph-ev__breakdown {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.75rem;
	font-size: 0.9375rem;
}

.rbph-ev__breakdown caption {
	text-align: left;
}

.rbph-ev__breakdown th,
.rbph-ev__breakdown td {
	padding: 0.45rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--rbph-border);
	vertical-align: top;
}

.rbph-ev__breakdown thead th {
	color: var(--rbph-ink-2);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.rbph-ev__slot-label {
	display: block;
	color: var(--rbph-ink-3);
	font-size: 0.75rem;
	font-weight: 400;
}

.rbph-ev__row--unpriced {
	color: var(--rbph-ink-3);
}

.rbph-ev__total td,
.rbph-ev__total th {
	font-weight: 700;
	color: var(--rbph-ink);
}

.rbph-ev .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- 4. SIMULATION Monte Carlo --- */

.rbph-ev__sim-title {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--rbph-ink-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rbph-ev__sim-hint {
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	color: var(--rbph-ink-3);
}

.rbph-ev__sim-note,
.rbph-ev__sim-empty,
.rbph-ev__sim-hits-note {
	margin: 0.5rem 0 0;
	color: var(--rbph-ink-3);
	font-size: 0.8125rem;
}

.rbph-ev__sim-results {
	margin-top: 1rem;
}

.rbph-ev__sim-heading {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: var(--rbph-ink);
}

.rbph-ev__sim-hist {
	width: 100%;
	margin-bottom: 1rem;
}

.rbph-ev__sim-hist-svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Couleurs data-viz : la classe surcharge l'attribut style= littéral (fallback sans-CSS, Phase 8). */
.rbph-ev__sim-bar {
	fill: var(--rbph-data);
}

.rbph-ev__sim-median {
	stroke: var(--rbph-data-median);
	stroke-width: 2;
}

.rbph-ev__sim-priceline {
	stroke: var(--rbph-data-price);
	stroke-width: 2;
	stroke-dasharray: 4 3;
}

/* --- Légende de l'histogramme (DESIGN-04) --- */

.rbph-ev__sim-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-top: 0.625rem;
	font-size: 0.75rem;
	color: var(--rbph-ink-2);
}

.rbph-ev__sim-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.rbph-ev__sim-legend-swatch {
	width: 0.875rem;
	height: 3px;
	border-radius: 2px;
	display: inline-block;
}

/* --- Statistiques de simulation ---
   .rbph-ev__sim-stat (display/flex/gap/padding) : règle plus haut. */

.rbph-ev__sim-stats,
.rbph-ev__sim-hits-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
	margin-top: 1rem;
}

.rbph-ev__sim-profit {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.rbph-ev__sim-stat {
	background: var(--rbph-surface-2);
	border: 1px solid var(--rbph-border);
	border-radius: var(--rbph-radius-sm);
	text-align: center;
}

.rbph-ev__sim-stat-label {
	font-size: 0.6875rem;
	color: var(--rbph-ink-2);
	margin-bottom: 0.1875rem;
}

.rbph-ev__sim-stat-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--rbph-ink);
	font-variant-numeric: tabular-nums;
}

.rbph-ev__sim-hits-title {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--rbph-ink-2);
}

.rbph-ev__sim-run {
	margin-top: 0.875rem;
	min-height: 2.5rem;
	padding: 0.625rem 1.125rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--rbph-on-accent);
	background: var(--rbph-accent);
	border: 0;
	border-radius: var(--rbph-radius-sm);
	cursor: pointer;
}

.rbph-ev__sim-run:hover {
	background: var(--rbph-accent-hover);
}

.rbph-ev__sim-run[disabled] {
	opacity: 0.7;
	cursor: progress;
}

/* --- 5. CADRAGE --- */

.rbph-ev__framing {
	background: var(--rbph-surface-2);
	border: 1px solid var(--rbph-border);
	border-radius: var(--rbph-radius);
	padding: 1rem;
}

.rbph-ev__framing-title {
	margin: 0 0 0.375rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--rbph-ink);
}

.rbph-ev__framing p {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	color: var(--rbph-ink-2);
}

.rbph-ev__disclaimer,
.rbph-ev__freshness {
	font-size: 0.75rem;
	color: var(--rbph-ink-3);
}

.rbph-ev__source {
	color: var(--rbph-accent-ink);
	text-decoration: none;
	font-weight: 600;
}

/* --- Placeholder indisponible --- */

.rbph-ev__unavailable {
	color: var(--rbph-ink);
}

/* ============================================================
   ACCESSIBILITÉ (DESIGN-06, AA)
   ============================================================ */

/* Focus visible global : outline accent sur tout élément focusable du widget. */
.rbph-ev :focus-visible {
	outline: 2px solid var(--rbph-accent-ink);
	outline-offset: 2px;
}

/* prefers-reduced-motion : voir le bloc @media plus haut (début de feuille). */

/* ============================================================
   RESPONSIVE (empilement mobile + collapse tableau)
   ============================================================ */

@media (max-width: 35rem) {
	.rbph-ev__amount {
		font-size: 2rem;
	}

	.rbph-ev__range,
	.rbph-ev__sim-stats,
	.rbph-ev__sim-hits-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.rbph-ev__rarity-item {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.rbph-ev__rarity-value {
		text-align: left;
	}

	.rbph-ev__trend {
		margin-left: 0;
		width: 100%;
	}

	.rbph-ev__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.rbph-ev__breakdown thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.rbph-ev__breakdown tr {
		display: block;
		margin-bottom: 0.75rem;
		border: 1px solid var(--rbph-border);
		border-radius: var(--rbph-radius-sm);
		padding: 0.25rem 0.5rem;
	}

	.rbph-ev__breakdown td,
	.rbph-ev__breakdown th {
		display: block;
		border-bottom: 0;
		padding: 0.25rem 0;
	}

	.rbph-ev__breakdown td::before {
		content: attr(data-label) " : ";
		font-weight: 600;
		color: var(--rbph-ink-2);
	}
}

/* ==========================================================================
   Ajouts du widget WiziShop (absents du plugin)
   ========================================================================== */

/* Titres en Space Grotesk (police du site, héritée si chargée — jamais chargée ici). */
.rbph-ev__title,
.rbph-ev__amount,
.rbph-ev__section-title,
.rbph-ev__framing-title {
	font-family: var(--rbph-font-head);
}

/* Le thème de la boutique peut styler globalement h2/p/table/input : on neutralise les
   marges/couleurs héritées qui casseraient la carte. */
.rbph-ev p {
	color: inherit;
}

.rbph-ev input,
.rbph-ev select,
.rbph-ev button {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.rbph-ev table {
	background: transparent;
	color: inherit;
}

.rbph-ev__message {
	margin: 0;
	color: var(--rbph-ink);
}

.rbph-ev--loading .rbph-ev__message {
	color: var(--rbph-ink-2);
}

/* Sélecteur de display */
.rbph-ev__selector {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: flex-end;
	margin: 0;
}

.rbph-ev__selector-label {
	flex: 1 1 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--rbph-ink-2);
}

.rbph-ev__selector-select {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 2.5rem;
	padding: 0.4375rem 0.6875rem;
	color: var(--rbph-ink);
	background: var(--rbph-surface);
	border: 1px solid var(--rbph-border-2);
	border-radius: var(--rbph-radius-sm);
}

.rbph-ev__selector-submit {
	min-height: 2.5rem;
	padding: 0.5rem 1.125rem;
	font-weight: 700;
	color: var(--rbph-on-accent);
	background: var(--rbph-accent);
	border: 0;
	border-radius: var(--rbph-radius-sm);
	cursor: pointer;
}

.rbph-ev__selector-submit:hover {
	background: var(--rbph-accent-hover);
}

/* Nombre de displays à simuler */
.rbph-ev__sim-count-label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--rbph-ink-2);
}

.rbph-ev__sim-count {
	width: 5rem;
	min-height: 2.5rem;
	padding: 0.375rem 0.5rem;
	color: var(--rbph-ink);
	background: var(--rbph-surface);
	border: 1px solid var(--rbph-border-2);
	border-radius: var(--rbph-radius-sm);
}

/* Vignette des cartes les plus contributrices (image https: de l'API, chargée en lazy) */
.rbph-ev__top-item {
	align-items: center;
}

.rbph-ev__top-name {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.rbph-ev__top-thumb {
	flex: none;
	width: 28px;
	height: 39px;
	object-fit: cover;
	border-radius: 3px;
	background: var(--rbph-surface-3);
}

/* Histogramme : axe, ligne de base et légende suivent le thème (les littéraux SVG du
   plugin sont calibrés pour un fond clair). */
.rbph-ev__sim-axis text {
	fill: var(--rbph-ink-3);
}

.rbph-ev__sim-axis line,
.rbph-ev__sim-baseline {
	stroke: var(--rbph-border-2);
}

.rbph-ev__sim-legend-item:nth-child(1) .rbph-ev__sim-legend-swatch {
	background: var(--rbph-data) !important;
}

.rbph-ev__sim-legend-item:nth-child(2) .rbph-ev__sim-legend-swatch {
	background: var(--rbph-data-median) !important;
}

.rbph-ev__sim-legend-item:nth-child(3) .rbph-ev__sim-legend-swatch {
	background: var(--rbph-data-price) !important;
}

/* Très petits écrans (≤ 375 px) : aucune largeur fixe ne doit dépasser. */
@media (max-width: 24rem) {
	.rbph-ev {
		--rbph-gap: 12px;
	}

	.rbph-ev__section {
		padding: 14px;
	}

	.rbph-ev__amount {
		font-size: 1.75rem;
	}

	.rbph-ev__unit-options {
		display: flex;
	}

	.rbph-ev__unit-option {
		flex: 1 1 50%;
		justify-content: center;
		padding: 0.5rem 0.5rem;
	}

	.rbph-ev__price-field {
		display: flex;
	}

	.rbph-ev__price {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.rbph-ev__range {
		grid-template-columns: 1fr;
	}
}

/* Montants hors headline : le chiffre porte .rbph-ev__eur (hook data-rbph-eur), qui ne doit
   pas hériter de la taille du symbole € du headline. */
.rbph-ev__rarity-value .rbph-ev__eur,
.rbph-ev__top-value .rbph-ev__eur,
.rbph-ev__breakdown .rbph-ev__eur {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin-left: 0;
}

/* Tendance : chaque pastille reste sur une ligne ; les pastilles passent à la ligne entre elles. */
.rbph-ev__trend {
	flex-wrap: wrap;
}

.rbph-ev__trend-item {
	white-space: nowrap;
}

/* Protection contre le thème de la boutique (WiziShop ajoute une puce li::before, un
   padding-left aux listes et une line-height de 44 px aux select). */
.rbph-ev ul,
.rbph-ev ol {
	padding-left: 0;
	list-style: none;
}

.rbph-ev li {
	padding-left: 0;
	margin-left: 0;
}

.rbph-ev li::before,
.rbph-ev li::after {
	content: none;
	display: none;
}

.rbph-ev select {
	line-height: 1.3;
	height: auto;
}

/* Histogramme dessiné à l'échelle 1:1 (libellés 11 px) ; barre « au-delà du 99e centile ». */
.rbph-ev__sim-hist-svg {
	max-width: 100%;
	overflow: visible;
}

.rbph-ev__sim-bar--over {
	fill-opacity: 0.55;
}

.rbph-ev__sim-over-label {
	font-weight: 700;
}