.roadmap {
  position: relative;
  padding-bottom: 50px;
  font-family: var(--font-title);
}



/* --- Titre Sticky --- */
.roadmap-title {
  position: -webkit-sticky; /* Pour la compatibilité Safari */
  position: sticky;
  top: 8vh;
  z-index: 10;
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-title);
  font-size: 2.5rem;
  text-align: center;
  margin: 0;
  padding: 20px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Effet d'ombre discret au défilement */
}



.roadmap-text h2{
  padding-left: 10px;
  border-radius: 150px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: normal;
  font-family: var(--font-title);
  font-size: medium;
  position:sticky;
  background-color: var(--color-light);
  border: 1px solid var(--color-mid-light);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.roadmap-text .wrapper-titre{
    position: sticky;
  /*top: 56px;*/
  top: var(--nav-height, 56px);
  z-index: 1;
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 2px;
  width:100%;
  background-color: #ffffff;
}

/* --- Conteneur de la Roadmap --- */
.roadmap-container {
    position: relative;
    max-width: 100%;
    margin: 10vh auto 0 auto;
    z-index: 0;
    padding:5px;
}

/* La ligne centrale en pointillés */
.roadmap-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px dashed var(--color-medium);
}

/* --- Style des Étapes (Desktop / Paysage) --- */
.step-left, .step-right {
  position: relative;
  width: 50%; /* Occupe la moitié de l'espace */
  margin-bottom: 40px;
  box-sizing: border-box;
}

/* Alignement alterné */
.step-left {
  left: 0;
  padding-right: 40px;
}

.step-right {
  left: 50%;
  padding-left: 40px;
}


/* Le contenu textuel */
.content {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-left: 5px solid var(--color-mid-dark);
}

.content h2 {
  margin-top: 0;
  color: var(--color-dark);
  font-family: var(--font-title);

}

.content p {
  margin-bottom: 0;
  color: var(--color-mid-dark);
  line-height: 1.6;
}

/* --- Les puces (noeuds) sur la ligne --- */
.step-left::after, .step-right::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--color-dark);
  border: 4px solid var(--color-complementary);
  border-radius: 50%;
  top: 38%;
  z-index: 1;
}

.step-left::after {
    right: calc(0vw - 14px);/* Centré sur la ligne de droite */
}

.step-right::after {
    left: calc(0vw - 14px);
}

/* --- Responsive (Mobile / Mode Portrait) --- */

@media (max-width: 768px) {
  /* Déplacement de la ligne en pointillés sur le côté gauche */
  .roadmap-container::before {
    left: 5vw;
  }

  /* Les étapes prennent toute la largeur */
  .step-right, .step-left{
    width: 95%;
    padding-left: 10vw; 
    padding-right: 0;
    left: 0px;
  }

  /* Repositionnement des puces sur la ligne de gauche */
  .step-right::after, .step-left::after {
    left: calc(5vw - 19px);
  }
}