.role-test-header-select {
  /* appearance:none force Chrome à utiliser son propre rendu plutôt que le
     contrôle natif macOS, qui se comporte mal au survol (bug Chrome/Mac). */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 36px;
  max-width: 170px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border, #ccc);
  border-radius: 8px;
  background-color: var(--bg, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 11px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

@media (max-width: 480px) {
  .role-test-header-select {
    max-width: 130px;
    font-size: 0.8rem;
  }
}