/* Timeline actuel (verticale) */
.timeline {
  position: relative;
  max-width: 950px;
  margin: 0 auto;
}

/* Timeline actuelle */
.timeline::after {
  content: ' ';
  position: absolute;
  width: 6px;
  background-color: grey;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Contenant des textes */
.chrono {
  padding: 6px 10px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* Cercle de la ligne du temps */
.chrono::after {
  content: ' ';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: lightgrey;
  border: 4px solid #C9B462;
  top: 2px;
  border-radius: 50%;
  z-index: 1;
}

/* Contenant à gauche */
.gauche {
  left: 0;
}

/* Contenant à droite */
.droite {
  left: 50%;
}

/* Cercle du côté droit */
.droite::after {
  left: -16px;
}

/* Texte chrono */
.chronotexte {
  padding: 2px 4px;
  border: 2px solid #C9B462;
  position: relative;
  border-radius: 6px;
}

/* Responsive */
@media screen and (max-width: 600px) {
  /* Déplacement à gauche */
  .timeline::after {
  left: 25px;
  }
  
  /* contenant plein */
  .chrono {
  width: 90%;
  padding-left: 35px;
  padding-right: 10px;
  }
  
  /* Cercles au bon endroit */
  .gauche::after, .droite::after {
  left: 5px;
  }
  
  /* rediriger le contenant */
  .droite {
  left: 0%;
  }
}