
/* ============================================================
   STEVEN ANGOFF — RETOUR EN HAUT
   SVG local orienté vers le haut, sans recadrage.
   Aucune police ou bibliothèque externe.
   ============================================================ */

/* Désactivation du bouton natif OceanWP */

#scroll-top,
.scroll-top-left,
.scroll-top-right,
a.site-scroll-top,
#scroll-top-icon {
  display: none !important;
}

/* ============================================================
   SPHÈRE LIQUID GLASS
   ============================================================ */

#sl-scroll-top-btn.sl-scroll-top-container {
  position: fixed !important;
  bottom: 25px !important;
  left: 25px !important;
  z-index: 99990 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 54px !important;
  height: 54px !important;

  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 1.5px solid rgba(86, 115, 255, .55) !important;
  border-radius: 50% !important;

  background: linear-gradient(
    135deg,
    rgba(22, 25, 38, .92),
    rgba(10, 12, 18, .98)
  ) !important;

  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .75),
    inset 0 1px 1.5px rgba(255, 255, 255, .6) !important;

  text-decoration: none !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translateY(15px) scale(.9) !important;

  transition:
    opacity .4s cubic-bezier(.16, 1, .3, 1),
    visibility .4s ease,
    transform .4s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease,
    box-shadow .3s ease !important;
}

/* ============================================================
   APPARITION APRÈS DÉFILEMENT
   ============================================================ */

#sl-scroll-top-btn.sl-scroll-top-container.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transform: translateY(0) scale(1) !important;
}

/* ============================================================
   CONTENEUR SVG SANS RECADRAGE
   ============================================================ */

#sl-scroll-top-btn .sl-icon-crop-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 28px !important;

  width: 28px !important;
  height: 28px !important;

  overflow: visible !important;
  pointer-events: none !important;
}

/* ============================================================
   FLÈCHE PERSONNALISÉE
   DROITE → HAUT
   ============================================================ */

#sl-scroll-top-btn .sl-scroll-top-icon {
  display: block !important;

  /* Dimension visible fixée sur le SVG lui-même. */
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;

  object-fit: contain !important;
  transform-origin: center !important;
  transform: rotate(-90deg) !important;

  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    filter .35s ease !important;
}

/* ============================================================
   SURVOL LIQUID GLASS
   ============================================================ */

#sl-scroll-top-btn.sl-scroll-top-container.is-visible:hover {
  border-color: rgba(168, 184, 255, .95) !important;

  transform: translateY(-5px) scale(1.06) !important;

  box-shadow:
    0 18px 40px rgba(0, 0, 0, .85),
    0 0 25px rgba(56, 85, 232, .65),
    inset 0 1px 2px rgba(255, 255, 255, .9) !important;
}

/* Légère mise en valeur de la flèche, sans découpe */

#sl-scroll-top-btn.sl-scroll-top-container:hover .sl-scroll-top-icon {
  transform: rotate(-90deg) scale(1.04) !important;

  filter: drop-shadow(
    0 0 4px rgba(255, 255, 255, .8)
  ) !important;
}

/* ============================================================
   CLIC
   ============================================================ */

#sl-scroll-top-btn.sl-scroll-top-container.is-visible:active {
  transform: translateY(0) scale(.96) !important;
}

/* ACCESSIBILITÉ */

#sl-scroll-top-btn.sl-scroll-top-container:focus-visible {
  outline: 2px solid #a8b8ff !important;
  outline-offset: 4px !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

  #sl-scroll-top-btn.sl-scroll-top-container {
    bottom: 18px !important;
    left: 18px !important;

    width: 48px !important;
    height: 48px !important;
  }

  #sl-scroll-top-btn .sl-icon-crop-box {
    flex-basis: 25px !important;

    width: 25px !important;
    height: 25px !important;
  }

  #sl-scroll-top-btn .sl-scroll-top-icon {
    flex-basis: 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }

}

/* ============================================================
   RÉDUCTION DES ANIMATIONS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  #sl-scroll-top-btn.sl-scroll-top-container,
  #sl-scroll-top-btn .sl-scroll-top-icon {
    transition-duration: .01ms !important;
  }

}
