/* =============================================================================
   Scroll To Top (Premium) — MageStock
   - Bouton rond + anneau de progression
   - Position bas-droite alignée footer, sans masquer la bottom-nav mobile
   ============================================================================= */

#scrollTopProgress{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  z-index: 90; /* < bottom-nav(100) / < modals(>1000) */
  cursor: pointer;

  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}

#scrollTopProgress.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

#scrollTopProgress::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

#scrollTopProgress svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

#scrollTopProgress circle.bg{
  stroke: var(--border);
  stroke-width: 4;
  fill: none;
  opacity: .7;
}

#scrollTopProgress circle.progress{
  stroke: var(--blue);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset .08s linear;
  filter: drop-shadow(0 2px 6px rgba(59,130,246,.25));
}

#scrollTopProgress .arrow{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.15);
}

@media (hover:hover){
  #scrollTopProgress:hover{
    transform: translateY(0) scale(1.04);
  }
  #scrollTopProgress:active{
    transform: translateY(0) scale(.98);
  }
}

/* Mobile/tablette : éviter la bottom-nav */
@media (max-width: 1024px){
  #scrollTopProgress{
    bottom: calc(var(--bottom-nav-height) + 14px + env(safe-area-inset-bottom));
    right: 14px;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  #scrollTopProgress{
    transition: none;
  }
  #scrollTopProgress circle.progress{
    transition: none;
  }
}
