/* Historique SAME — KPI BRUT / étape 3 : état pression-clic uniquement. */
[data-testid='history-mobile-finance-kpi-brut']:active {
  transform: translateY(0) scale(0.985) !important;
  border-color: rgba(255, 210, 118, 0.98) !important;
  background:
    radial-gradient(circle at 18% -6%, rgba(255, 196, 72, 0.23), transparent 44%),
    linear-gradient(150deg, rgba(20, 22, 43, 0.995), rgba(6, 11, 24, 0.998)) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.28),
    inset 3px 0 0 rgba(255, 202, 91, 1),
    0 5px 14px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(255, 181, 45, 0.13) !important;
  transition-duration: 70ms !important;
}

[data-testid='history-mobile-finance-kpi-brut']:active::after {
  color: rgba(255, 220, 147, 0.28);
  transform: translateY(1px) scale(0.98);
}

[data-testid='history-mobile-finance-kpi-brut']:active > strong {
  color: #ffd06d !important;
  text-shadow: 0 0 12px rgba(255, 199, 87, 0.24);
  transform: translateX(0) scale(0.99);
}

[data-testid='history-mobile-finance-kpi-brut']:active .op390-mini-trend {
  transform: translateY(0) scale(0.99);
  opacity: 1;
}

[data-testid='history-mobile-finance-kpi-brut']:active .op390-mini-trend polyline {
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 3px rgba(255, 192, 68, 0.55)) !important;
}

/* Les cinq autres KPI reprennent la même grammaire premium que BRUT :
   flèche toujours visible, éclairage au survol, pression et focus clavier.
   Aucun changement de dimensions ni de layout. */
.op390-kpi-button:nth-child(1) { --same-kpi-accent-rgb: 255, 189, 37; }
.op390-kpi-button:nth-child(2) { --same-kpi-accent-rgb: 98, 213, 239; }
.op390-kpi-button:nth-child(3) { --same-kpi-accent-rgb: 44, 212, 155; }
.op390-kpi-button:nth-child(4) { --same-kpi-accent-rgb: 177, 129, 255; }
.op390-kpi-button:nth-child(5) { --same-kpi-accent-rgb: 168, 121, 255; }
.op390-kpi-button:nth-child(6) { --same-kpi-accent-rgb: 244, 248, 252; }

.op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']) {
  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    background 180ms ease,
    box-shadow 180ms ease,
    color 160ms ease !important;
}

.op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut'])::after {
  content: '↗';
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  color: rgba(var(--same-kpi-accent-rgb), 0.56);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transition:
    color 160ms ease,
    transform 180ms cubic-bezier(.2,.8,.2,1),
    text-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):hover {
    transform: translateY(-2px);
    background:
      radial-gradient(circle at 18% -4%, rgba(var(--same-kpi-accent-rgb), 0.11), transparent 47%),
      linear-gradient(145deg, rgba(14, 29, 47, 0.995), rgba(6, 16, 28, 0.998)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      inset 0 0 0 1px rgba(var(--same-kpi-accent-rgb), 0.28),
      0 12px 26px rgba(0, 0, 0, 0.24),
      0 0 18px rgba(var(--same-kpi-accent-rgb), 0.09) !important;
  }

  .op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):hover > span {
    color: rgba(247, 241, 229, 0.94) !important;
  }

  .op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):hover > strong {
    text-shadow: 0 0 12px rgba(var(--same-kpi-accent-rgb), 0.28);
  }

  .op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):hover .op390-mini-trend {
    opacity: 1;
    transform: translateY(-1px) scale(1.04);
  }

  .op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):hover .op390-mini-trend polyline {
    stroke-width: 2.05 !important;
    filter: drop-shadow(0 0 3px rgba(var(--same-kpi-accent-rgb), 0.66)) !important;
  }

  .op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):hover::after {
    color: rgba(var(--same-kpi-accent-rgb), 0.96);
    text-shadow: 0 0 8px rgba(var(--same-kpi-accent-rgb), 0.32);
    transform: translate(1px, -1px);
  }
}

.op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):active {
  transform: translateY(0) scale(0.985) !important;
  background:
    radial-gradient(circle at 18% -2%, rgba(var(--same-kpi-accent-rgb), 0.12), transparent 44%),
    linear-gradient(145deg, rgba(10, 22, 37, 0.998), rgba(4, 12, 22, 1)) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.28),
    inset 3px 0 0 rgba(var(--same-kpi-accent-rgb), 0.82),
    inset 0 0 0 1px rgba(var(--same-kpi-accent-rgb), 0.18),
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 0 12px rgba(var(--same-kpi-accent-rgb), 0.08) !important;
  transition-duration: 70ms !important;
}

.op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):active > strong {
  transform: translateY(1px);
  text-shadow: 0 0 8px rgba(var(--same-kpi-accent-rgb), 0.22);
}

.op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):active .op390-mini-trend {
  transform: translateY(1px) scale(0.99);
}

.op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):active::after {
  color: rgba(var(--same-kpi-accent-rgb), 0.72);
  transform: translate(0, 0) scale(0.94);
}

.op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(var(--same-kpi-accent-rgb), 0.24),
    0 0 0 2px rgba(5, 14, 25, 1),
    0 0 0 4px rgba(var(--same-kpi-accent-rgb), 0.66),
    0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

.op390-kpi-button:not([data-testid='history-mobile-finance-kpi-brut']):focus-visible::after {
  color: rgba(var(--same-kpi-accent-rgb), 0.96);
}