/* ============================================================
 *  Peerly — Interrupteur Material 3
 *  v8.2.0 — switch arrondi
 * ============================================================ */

.md-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.md-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* ---- Piste du switch (arrondie) ---- */
.md-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--md-surface-container-highest);
  border: 1.5px solid var(--md-outline);
  transition:
    background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

/* ---- Curseur (rond) ---- */
.md-switch-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--md-outline);
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  transition:
    transform var(--duration-base) var(--ease-spring),
    background var(--duration-base) var(--ease-out),
    width var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out);
}

/* ---- État coché ---- */
.md-switch input:checked + .md-switch-slider {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.md-switch input:checked + .md-switch-slider::before {
  transform: translateY(-50%) translateX(18px);
  background: var(--md-on-primary);
  width: 20px;
  height: 20px;
}

/* ---- État désactivé ---- */
.md-switch input:disabled + .md-switch-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Hover ---- */
.md-switch:hover .md-switch-slider {
  box-shadow: 0 0 0 6px var(--md-primary-soft);
}