/* R35 — uniquement : popup filtre iOS et matière bois du tourne-disque. */

/* Même couche modale que le questionnaire, sans filtre résiduel dans la page. */
.all-filter-sheet-layer {
  animation: r35FilterBackdropIn .2s ease both;
}

.route-stage--all .all-filter-sheet-layer .all-filter-panel {
  position: relative !important;
  z-index: 1 !important;
  inset: auto !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-height: min(84dvh, 680px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 30px 18px max(22px, env(safe-area-inset-bottom)) !important;
  transform: none !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 80px rgba(18, 9, 4, .27), inset 0 1px rgba(255, 255, 255, .98), inset 0 0 0 1px rgba(31, 35, 40, .035) !important;
  animation: r35FilterSheetIn .22s cubic-bezier(.22, .72, .2, 1) both !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.route-stage--all .all-filter-sheet-layer .all-filter-panel::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(63, 44, 32, .18);
  transform: translateX(-50%);
}

.all-filter-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 22px;
  line-height: 1;
}

.all-filter-actions {
  align-items: center;
  justify-content: space-between !important;
  gap: 10px;
}

.all-filter-actions .all-filter-apply {
  color: #fff !important;
  background: var(--caramel) !important;
  box-shadow: 0 9px 22px rgba(184, 110, 50, .18), inset 0 1px rgba(255, 255, 255, .25) !important;
}

@keyframes r35FilterBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes r35FilterSheetIn {
  from { opacity: 0; translate: 0 18px; scale: .985; }
  to { opacity: 1; translate: none; scale: none; }
}

/* Noyer mat : fibres irrégulières horizontales, sans trame croisée. */
.source-deck.turntable {
  background:
    radial-gradient(ellipse at 18% 2%, rgba(255, 228, 201, .065), transparent 35%),
    radial-gradient(ellipse at 82% 98%, rgba(0, 0, 0, .35), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 24% 72%, rgba(0, 0, 0, .12)),
    url("/assets/r35-walnut-horizontal.svg") center / 100% 100% no-repeat,
    linear-gradient(101deg, #382a23, #2b1e19 46%, #160e0c) !important;
}

.source-deck.turntable::before {
  background: linear-gradient(112deg, rgba(255, 241, 222, .04), transparent 31% 73%, rgba(0, 0, 0, .19)) !important;
}

.source-deck .wood-specular {
  opacity: .028 !important;
  background: linear-gradient(109deg, transparent 31%, rgba(255, 239, 217, .04) 41%, rgba(255, 255, 255, .02) 44%, transparent 55%) !important;
}

.source-deck .record-shadow {
  filter: blur(8px) !important;
  opacity: .88 !important;
}

.source-deck .platter {
  box-shadow:
    0 15px 26px rgba(0, 0, 0, .67),
    0 4px 7px rgba(0, 0, 0, .52),
    inset 0 0 0 1px rgba(255, 229, 195, .30),
    inset 0 -3px 8px rgba(0, 0, 0, .48) !important;
}

.source-deck .tonearm {
  filter: saturate(.96) contrast(1.04) drop-shadow(0 5px 4px rgba(0, 0, 0, .50)) !important;
}

@media (max-width: 600px) {
  .route-stage--all .all-filter-sheet-layer .all-filter-panel {
    width: min(100%, 390px) !important;
    max-height: min(84dvh, 620px) !important;
    padding: 30px 14px max(20px, env(safe-area-inset-bottom)) !important;
    border-radius: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .all-filter-sheet-layer,
  .route-stage--all .all-filter-sheet-layer .all-filter-panel {
    animation: none !important;
  }
}