/* ============================================================
   STEPS STRIP CONTROLS (PC)
   Flèches discrètes + grab/drag pour déplacer les pills
   Perf-safe: pas de blur/backdrop-filter, pas d’ombres multiples
============================================================ */

.steps-band-strip-wrap{
  position: relative; /* nécessaire pour placer les flèches */
}

/* Rend le strip "grab" sur desktop */
@media (min-width: 821px){
  .steps-band-strip{
    cursor: grab;
  }
  .steps-band-strip.is-dragging{
    cursor: grabbing;
  }
}

/* Flèches discrètes, au-dessus du strip, hors du contenu */
.steps-strip-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.98);
  z-index: 6; /* au-dessus des fades (souvent z-index 2) */

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(230,214,158,0.28);
  background: rgba(15, 8, 3, 0.22);
  color: rgba(230,214,158,0.85);

  display: grid;
  place-items: center;

  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;

  opacity: 0;
  transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.steps-strip-arrow svg{
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* Placement */
.steps-strip-prev{ left: 8px; }
.steps-strip-next{ right: 8px; }

/* Les flèches apparaissent seulement quand on survole ou focus dans la zone */
@media (min-width: 821px){
  .steps-band-strip-wrap:hover .steps-strip-arrow,
  .steps-band-strip-wrap:focus-within .steps-strip-arrow{
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Hover doux */
.steps-strip-arrow:hover{
  background: rgba(230,214,158,0.14);
  border-color: rgba(230,214,158,0.55);
  color: rgba(230,214,158,1);
}

/* Focus clavier visible */
.steps-strip-arrow:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,214,158,0.20);
}

/* Disabled */
.steps-strip-arrow:disabled{
  opacity: 0.25 !important;
  cursor: not-allowed;
}

/* Mobile: on masque (tu scroll au doigt naturellement) */
@media (max-width: 820px){
  .steps-strip-arrow{
    display: none;
  }
}