/* Mixeurs audio : disposition téléphone (même identité : fond sombre, halo rouge, verre dépoli, curseurs bleus). */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body {
    position: static !important;
    display: block !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-tap-highlight-color: transparent;
  }
  .main-container {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    padding: 25px 12px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* menu : le seul réglage est le jour/nuit, on l'affiche directement */
  #menuBtn { display: none !important; }
  #menu {
    opacity: 1 !important; visibility: visible !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important; right: 12px !important; left: auto !important;
    width: auto !important; padding: 6px 14px !important;
    border-radius: 999px !important;
    z-index: 900;
  }
  #menu .day-night { margin: 0 !important; transform: none !important; opacity: .7; padding: 6px; }

  /* halo : reste en fond pendant le défilement */
  .gradient { position: fixed !important; left: 50%; top: 42%; margin: -125px 0 0 -125px; pointer-events: none; }

  .equalizer {
    position: relative; z-index: 2;
    width: 100% !important; max-width: 460px; margin: 0 auto;
    padding: 18px 14px 20px !important;
    border-radius: 22px !important;
    background: var(--card-border-color) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--card-icon-border-color);
  }
  .equalizer > p { font-size: 1.5rem !important; padding: 4px 0 14px !important; letter-spacing: .02em; }

  /* curseurs : plus hauts, plus faciles à attraper, une étiquette de fréquence dessous */
  .slider-container { display: flex !important; justify-content: space-between !important; gap: 2px !important; }
  .slider-block { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .slider-block .slider { margin: 0 !important; }
  .slider { width: 34px !important; height: 210px !important; touch-action: none; }
  .slider::-webkit-slider-thumb { width: 28px !important; height: 28px !important; margin-top: -14px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
  .slider::-moz-range-thumb { width: 28px !important; height: 28px !important; }
  .hz { font-size: 10px; line-height: 1; opacity: .65; color: var(--text-color); white-space: nowrap; }

  .mod { align-items: stretch !important; gap: 14px !important; margin-top: 14px; }

  /* lecture */
  .pp {
    margin: 0 !important; width: 100%; min-height: 54px; font-size: 18px !important; border-radius: 16px !important;
    background: linear-gradient(135deg, #7b10b9, #c600f8) !important; color: #fff !important;
    box-shadow: 0 6px 20px rgba(150, 20, 220, .35);
  }
  .pp:active { transform: scale(.98); }

  /* ambiances : grille de 2 colonnes, boutons égaux */
  .button-container {
    max-width: none !important; width: 100%;
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important;
  }
  .preset {
    flex: none !important; width: 100%; min-height: 48px; padding: 8px 10px !important;
    font-size: 15px !important; border-radius: 14px !important;
    display: flex !important; align-items: center; justify-content: center;
    border: 1px solid var(--card-icon-border-color) !important;
  }
  #savePresetBtn, #myPresetsBtn { background: transparent !important; border-style: dashed !important; font-size: 14px !important; }

  /* volume et minuteur : pleine largeur */
  .volume-general { width: 100%; margin: 0 !important; }
  .volume-general label { display: block; font-size: 14px; margin-bottom: 6px; opacity: .85; }
  .volume-general .volume { width: 100%; height: 32px; margin: 0; accent-color: #007BFF; }
  #timer { width: 100%; min-height: 48px; font-size: 16px !important; border-radius: 14px !important; border: 1px solid var(--card-icon-border-color) !important; }

  /* fenêtre « My Presets » */
  .popup-content { width: 92% !important; margin: 14vh auto 0 !important; padding: 18px 14px !important; max-height: 70dvh; overflow-y: auto; }
  #savedPresetsList li { flex-wrap: wrap; gap: 8px; }
  #savedPresetsList li button, .popup-content button { min-height: 44px; margin: 4px !important; }
  .popup .close { top: 10px; right: 16px; font-size: 34px; padding: 4px 8px; }
}