#double-scroll{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* La colonne inversée est translatée : on la masque hors du bloc (sinon elle déborde sur le pied de page) */
  overflow: hidden;
  /* Timeline liée à la visibilité du bloc dans la fenêtre (0 = entre par le bas, 1 = sort par le haut) */
  view-timeline: --double-scroll block;
}

.column-scroll{
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.column-scroll img{
  width: 100%;
  height: auto;
  font-size: 12px;
  color: var(--bleu);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column-scroll a{
  display: block;
  overflow: hidden;
  border-radius: 20px;
  margin: 5px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

@media only screen and (min-width: 600px) {
  .column-scroll a{
    border-radius: 40px;
    margin: 10px 20px;
  }

}

@media only screen and (min-width: 600px) {
  .scroll-reverse{
    transform: translateY(calc(-100% + 100vh));
    flex-direction: column-reverse;
    /* Animation pilotée par le défilement du document (CSS natif Chrome/Edge/Firefox récents).
       Sans support : fallback JS (loki.js + polyfill scroll-timeline). */
    animation: adjust-position linear both;
    animation-timeline: --double-scroll;
  }
}



/* Set up Animation */
@keyframes adjust-position {
  /* Start position: shift entire column up, but not so that it goes out of view */
  from {
    transform: translateY(calc(-100% + 50vh));
  }
  /* End position: shift entire column down, but not so that it goes out of view */
  to {
    transform: translateY(calc(100% - 50vh));
  }
}