/* ==========================================================================
   Peerly Draw — Inputs (Material 3)
   ==========================================================================
   Variantes : Outlined text field (recommandé M3), Slider, Switch
   ========================================================================== */

/* ==========================================================================
   OUTLINED TEXT FIELD
   ========================================================================== */

.input {
  width: 100%;
  height: 56px;
  padding: 0 var(--md-sys-spacing-2);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-xs);
  font-family: var(--md-sys-typescale-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  transition:
    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.6;
}

.input:hover {
  border-color: var(--md-sys-color-on-surface);
}

.input:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: 0 calc(var(--md-sys-spacing-2) - 1px);
}

.input:disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-opacity), transparent);
  cursor: not-allowed;
}

.input--mono {
  font-family: var(--md-sys-typescale-mono);
  font-size: var(--md-sys-typescale-title-large-size);
  letter-spacing: 0.24em;
  text-align: center;
  font-weight: 500;
}

/* Label flottant M3 */
.input-label {
  display: block;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-sys-spacing-half);
  padding-left: var(--md-sys-spacing-half);
}

.input-hint {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: var(--md-sys-spacing-half);
  padding-left: var(--md-sys-spacing-1);
}

/* ==========================================================================
   SLIDER (Material 3)
   ==========================================================================
   Spécifications M3 :
   - Track          : 4dp height, radius full
   - Track inactive : surface-container-highest
   - Track active   : primary (géré par ::-webkit-slider-runnable-track + overlay)
   - Thumb          : 20dp, primary
   - Thumb halo     : 8dp au hover, 12dp au press (primary à 12/16% d'opacité)
   - Touch target   : 44dp min (hauteur du conteneur)
   ========================================================================== */

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: block;
  touch-action: manipulation;
}

/* ——— WebKit / Blink (Chrome, Edge, Safari, Opera) ——— */

.slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-full);
  border: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--md-sys-shape-full);
  background: var(--md-sys-color-primary);
  border: none;
  margin-top: -8px; /* (4 - 20) / 2 pour centrer sur la track */
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  cursor: pointer;
}

.slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}

.slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

.slider:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

/* ——— Firefox ——— */

.slider::-moz-range-track {
  width: 100%;
  height: 4px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-full);
  border: none;
}

.slider::-moz-range-progress {
  height: 4px;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-full);
  border: none;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--md-sys-shape-full);
  background: var(--md-sys-color-primary);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.slider:hover::-moz-range-thumb {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}

.slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

.slider:active::-moz-range-thumb {
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

/* ——— Valeur affichée sous le slider ——— */

.slider-value {
  display: block;
  font-family: var(--md-sys-typescale-mono);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  text-align: right;
  padding-right: var(--md-sys-spacing-half);
  margin-top: calc(var(--md-sys-spacing-half) * -1);
}

/* ==========================================================================
   SWITCH (M3) — optionnel, pour usage futur
   ========================================================================== */

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 52px;
  height: 32px;
  cursor: pointer;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__track {
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-full);
  transition: all var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
}

.switch__thumb {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: var(--md-sys-shape-full);
  background: var(--md-sys-color-outline);
  transform: translateY(-50%);
  transition: all var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}

.switch input:checked + .switch__track {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.switch input:checked + .switch__track + .switch__thumb {
  left: 26px;
  width: 24px;
  height: 24px;
  background: var(--md-sys-color-on-primary);
}