/* ══════════════════════════════════════════════════════
   Sliders — style unifié pour toute l'app
   Moderne, épuré, cohérent avec le thème sombre
   ══════════════════════════════════════════════════════ */

/* ── Reset complet natif ── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

/* ════════════════════════════
   TRACK (la barre)
   ════════════════════════════ */

/* Webkit (Chrome, Safari, Edge, iOS) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #2d333b;   /* gris sombre, discret */
  border: none;          /* ← supprime le border blanc */
}

/* Firefox */
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #2d333b;
  border: none;
}

/* ════════════════════════════
   THUMB (le disque à attraper)
   ════════════════════════════ */

/* Webkit */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-blue, #388bfd);  /* bleu accent */
  border: none;                              /* ← pas de border blanc */
  box-shadow: none;                          /* ← pas d'ombre */
  margin-top: -5px;   /* centre verticalement sur la track */
  transition: transform .15s ease,
              background .15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  background: #5ba3ff;   /* légèrement plus clair au survol */
}

input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.35);
  background: var(--accent-blue, #388bfd);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-blue, #388bfd);
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform .15s ease,
              background .15s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.25);
  background: #5ba3ff;
}

/* Firefox : partie gauche de la track (avant le thumb) */
input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--accent-blue, #388bfd);
}

/* Focus : anneau discret, pas la box blanche native */
input[type="range"]:focus {
  outline: none;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.35);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.35);
}

/* ════════════════════════════
   Variante désactivée
   ════════════════════════════ */
input[type="range"]:disabled {
  opacity: .35;
  cursor: not-allowed;
}
input[type="range"]:disabled::-webkit-slider-thumb { transform: none; }
input[type="range"]:disabled::-moz-range-thumb     { transform: none; }

/* ════════════════════════════
   Mobile : thumb plus grand
   pour faciliter le touch
   ════════════════════════════ */
@media (max-width: 900px) {
  input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
  }
  input[type="range"]::-moz-range-track {
    height: 5px;
    border-radius: 3px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -9px;
    /* Ombre très subtile pour le relief */
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  }
  input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  }
  input[type="range"]::-moz-range-progress {
    height: 5px;
  }
}

@media (max-width: 480px) {
  input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    margin-top: -11px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
  }
}