/* ContraGo - style du slider à deux segments (split-slider.js).
   Fichier commun à la racine (déplacé depuis medecin-generaliste.css le
   24/08/2026 - le composant n'a rien de spécifique au médecin, il est repris
   tel quel par d'autres pages). Utilise uniquement les tokens de couleur
   définis dans shared.css : le rendu suit donc automatiquement le mode
   sombre, comme le reste du site. */

.split-slider {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: var(--color-border);
  cursor: pointer;
  touch-action: none;
  margin: 6px 0 0;
}
.split-slider:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.split-slider-track-empty {
  background-image: repeating-linear-gradient(135deg, var(--color-border), var(--color-border) 6px, var(--color-surface) 6px, var(--color-surface) 12px);
}
.split-slider-fill-remplacant {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--color-accent);
  border-radius: 999px 0 0 999px;
  pointer-events: none;
}
.split-slider-fill-cabinet {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--color-primary);
  opacity: 0.35;
  border-radius: 0 999px 999px 0;
  pointer-events: none;
}
.split-slider-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--color-accent);
  box-shadow: 0 1px 4px rgba(30, 40, 50, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.split-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 10px;
}
.split-slider-labels strong { color: var(--color-primary); }
.split-slider-numeric {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.split-slider-numeric label { flex: 0 0 auto; margin: 0; }
.split-slider-numeric input { max-width: 100px; }

/* ---------- Zone tactile mobile (44 px minimum) ----------
   La piste visible garde ses 16 px de hauteur habituels ; seule la zone qui
   réagit au doigt s'agrandit, via une bordure transparente verticale
   (n'affecte pas la largeur, donc pas le calcul du pourcentage au clic).
   background-clip: padding-box empêche le fond (plein ou hachuré) de déborder
   dans cette marge invisible. Les enfants positionnés en absolu (remplissages,
   curseur) se calent sur la boîte de padding, donc restent alignés sur les
   16 px visuels, inchangés par cet ajout. */
@media (max-width: 640px) {
  .split-slider {
    /* box-sizing: border-box (reset global de shared.css) : la bordure
       s'ajoute à height plutôt qu'au-dessus, donc height passe à 44px pour
       que la boîte de padding (44 - 14 - 14) reste à 16px, identique au
       tracé desktop. */
    height: 44px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    background-clip: padding-box;
  }
}