/* ===== scrollcue.css — la flèche « défiler » =====
 *
 * Remplace le petit trait qui tombait sous les « Défiler » du site.
 * Trois chevrons empilés qui descendent en cascade puis s'effacent : le
 * décalage entre eux fait lire un MOUVEMENT vers le bas, ce qu'un trait qui
 * s'allonge ne disait qu'à moitié.
 *
 * ⚠️ La flèche n'a pas de couleur à elle : elle hérite de `currentColor`,
 * donc de la couleur du « Défiler » qui la porte — et comme ces mots
 * clignotent en alternant deux teintes, la flèche clignote avec eux, sans une
 * ligne de plus. C'est la raison d'être du `border-color: currentColor`.
 *
 * Usage : <span class="scroll-cue" aria-hidden="true"><i></i><i></i><i></i></span>
 * posé DANS l'élément « Défiler » (qui est déjà en flex-direction: column).
 */

.scroll-cue {
  display: block;
  margin-top: 10px;
  /* les chevrons se chevauchent : sans hauteur imposée, la boîte ferait la
     somme des trois au lieu de leur superposition */
  height: 22px;
  position: relative;
  width: 20px;
  margin-inline: auto;
}

.scroll-cue i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  /* un chevron = un carré tourné de 45° dont on ne garde que deux côtés */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  animation: scroll-cue-fall 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
/* le décalage est TOUT l'effet : les trois partent en file indienne */
.scroll-cue i:nth-child(2) { animation-delay: 0.18s; }
.scroll-cue i:nth-child(3) { animation-delay: 0.36s; }

@keyframes scroll-cue-fall {
  0%   { opacity: 0; transform: translateY(-6px) rotate(45deg); }
  35%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue i {
    animation: none;
    opacity: 1;
  }
  /* sans animation les trois se superposeraient en un seul chevron épais :
     on n'en garde qu'un */
  .scroll-cue i:nth-child(2),
  .scroll-cue i:nth-child(3) { display: none; }
}