/* ===============================
   CONTAINER
================================ */
.timeline__section{
  position: relative;
}

/* ===============================
   NAV TIMELINE
   (IMPORTANT: neutralise l'ancien code)
================================ */
.timeline__nav{
  position: absolute;   /* base = dans le bloc */
  top: 0;
  left: 0;
  z-index: 99;
}

/* pendant le scroll (sticky) */
.timeline__nav.is-fixed{
  position: fixed;
}

/* bloquée en bas */
.timeline__nav.is-bottom{
  position: absolute;
}

/* ===============================
   LISTE
================================ */
.timeline__nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  position: relative;
}

.timeline__nav li{
  margin: 15px 0;
  padding: 0;
  color: #242424;
  border-bottom: 1px dotted rgba(0,0,0,.3);
  cursor: pointer;
  transition: color .25s ease, transform .25s ease, border-color .25s ease;
}

.timeline__nav li:hover{
  color: #000;
}

/* ta couleur active */
.timeline__nav li.active{
  color: #a6cf02;
  font-weight: bold;
}

/* ===============================
   SPACER anti-saut
================================ */
.timeline__spacer{
  display: none;
  width: 90px;
}

.timeline__nav.is-fixed + .timeline__spacer{
  display: block;
}

/* ===============================
   CONTENU
================================ */
.timeline__section .wrapper{
  padding-left: 140px; /* espace colonne */
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px){
  .timeline__nav,
  .timeline__spacer{
    display: none !important;
  }
  .timeline__section .wrapper{
    padding-left: 0;
  }
}