/**
 * BlueVisa - Curseurs des simulateurs Services (/services/comptabilite et /en/services/accounting)
 *
 * Habillage des <input type="range"> du bloc .sim : piste fine remplie en bleu marque jusqu'au bouton,
 * bouton blanc cerclé de bleu, halo au survol et au focus clavier. Le remplissage lit la variable --pct
 * (0 % à 100 %) posée par le script du simulateur à chaque mise à jour ; sans elle la piste reste grise.
 * Le champ garde 22 px de haut (zone tactile) : seule la piste dessinée fait 6 px.
 */
.sim input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  --pct: 0%;
}

/* Piste */
.sim input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #06a0f7 var(--pct), #e2e8f0 var(--pct));
}
.sim input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #06a0f7 var(--pct), #e2e8f0 var(--pct));
}

/* Bouton */
.sim input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px; /* (6 px de piste - 22 px de bouton) / 2 */
  border-radius: 50%;
  background: #fff;
  border: 2px solid #06a0f7;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sim input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #06a0f7;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Survol, focus clavier, saisie */
.sim input[type="range"]:hover::-webkit-slider-thumb,
.sim input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(6, 160, 247, 0.16), 0 1px 3px rgba(15, 23, 42, 0.18);
}
.sim input[type="range"]:hover::-moz-range-thumb,
.sim input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(6, 160, 247, 0.16), 0 1px 3px rgba(15, 23, 42, 0.18);
}
.sim input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.1);
  cursor: grabbing;
}
.sim input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.1);
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .sim input[type="range"]::-webkit-slider-thumb,
  .sim input[type="range"]::-moz-range-thumb {
    transition: none;
  }
}