/* ============================================================
   PADEL COLLECTION — Pastille de scroll
   Sépare le hero du bloc concept par une bande sand de 12px,
   sur laquelle vient s'inscrire un cercle sand de 96px qui
   chevauche au-dessus et en dessous (effet "encoche").
   ============================================================ */

.scroll-cue {
  position: relative;
  z-index: 5;
  /* Bande sand de 12px de haut qui crée la séparation visible
     entre le hero et le bloc concept. */
  height: 12px;
  background: var(--color-sand);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Pas d'overflow:hidden : le cercle doit pouvoir déborder. */
}

.scroll-cue__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Cercle de 96px (96pt typo ≈ 96px web). */
  width: 96px;
  height: 96px;
  background: var(--color-sand);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: var(--color-noir);
  /* Centré verticalement sur la bande de 12px : le cercle dépasse
     de 42px de chaque côté et masque proprement la jonction. */
  transition: transform var(--duration-base) var(--ease);
}

.scroll-cue__pill:hover {
  transform: scale(1.06);
}

.scroll-cue__pill:focus-visible {
  outline: 2px solid var(--color-rouille);
  outline-offset: 4px;
}

/* ---- SVG souris ---- */
.scroll-cue__mouse {
  width: 24px;
  height: 40px;
}

.scroll-cue__mouse-dot {
  /* Animation de la roulette : descend dans le corps de la souris,
     fade in/out pour suggérer un défilement vertical en boucle. */
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue__mouse-dot {
    animation: scroll-cue-wheel 1.8s var(--ease) infinite;
  }
}

@keyframes scroll-cue-wheel {
  0%   { transform: translateY(-3px); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translateY(7px);  opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}

/* ---- Mobile : on garde le ratio mais on rétrécit légèrement ---- */
@media (max-width: 640px) {
  .scroll-cue__pill {
    width: 72px;
    height: 72px;
  }
  .scroll-cue__mouse {
    width: 20px;
    height: 34px;
  }
}