/**
 * Indicateur de défilement — chevron discret qui invite à descendre.
 * Amplitude et vitesse pilotées par les réglages (--cue-distance, --cue-speed).
 */

.bejoy-cue {
  --cue-distance: 8px;
  --cue-speed: 1.8s;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: #1e1b16;
  display: flex;
  width: 100%;
  justify-content: center;
  transition: color 0.3s ease, opacity 0.5s ease;
}

.bejoy-cue__inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bejoy-cue__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.bejoy-cue__icon {
  display: inline-flex;
  line-height: 1;
  font-size: 26px;
}
.bejoy-cue__icon i,
.bejoy-cue__icon svg {
  font-size: inherit;
  width: 1em;
  height: 1em;
  fill: currentColor;
  line-height: 1;
}

/* Va-et-vient : l'icône seule bouge, le texte reste stable. */
.bejoy-cue-anim-bounce .bejoy-cue__icon {
  animation: bejoy-cue-bounce var(--cue-speed, 1.8s) ease-in-out infinite;
}
@keyframes bejoy-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--cue-distance, 8px)); }
}

/* Descente en fondu : l'icône glisse vers le bas et s'efface, puis repart. */
.bejoy-cue-anim-fade .bejoy-cue__icon {
  animation: bejoy-cue-fade var(--cue-speed, 1.8s) ease-out infinite;
}
@keyframes bejoy-cue-fade {
  0%   { transform: translateY(calc(var(--cue-distance, 8px) * -0.6)); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(var(--cue-distance, 8px)); opacity: 0; }
}

/* Effacement une fois la page défilée (posé par le script). */
.bejoy-cue.is-gone {
  opacity: 0;
  pointer-events: none;
}

/* Neutralise les fonds / ombres que le thème ou Elementor posent sur les
   boutons, tout en gardant un anneau de focus clavier propre. */
.bejoy-cue,
.bejoy-cue:hover,
.bejoy-cue:focus,
.bejoy-cue:active {
  background: none !important;
  box-shadow: none !important;
  outline: none;
  text-decoration: none;
}
.bejoy-cue:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .bejoy-cue__icon { animation: none !important; }
}