/* début style timeline */
    .timeline {
        position: relative;
        height: 25px; /* Augmentez la hauteur pour inclure la sur-hauteur */
        width: 100%; /* Assurez-vous que la timeline occupe toute la largeur disponible */
        background-color: none;
        margin-top: 0px;
        margin-bottom: 25px;
        margin-left: 0px;
        margin-right: 0px;
        z-index: 1;
        animation: slideIn 2s forwards;
        display: flex; /* Active Flexbox */
        align-items: center; /* Centre verticalement les enfants */
        box-sizing: border-box; /* Inclut le padding et les bordures dans la largeur totale */
    }
    .milestone, .phase {
        cursor: help;
    }
    .milestone {
        position: absolute;
        height: 20px;
        width: 10px;
        background-color: var(--PromoColorFondMoyen2);
        z-index: 3;
        transition: opacity 0.3s; /* Ajoute une transition pour l'opacité */
    }
    .milestone-today {
        position: absolute;
        height: 40px; /* Hauteur plus grande */
        width: 5px;
        background-color: black;
        z-index: 4;
        cursor: help;
        transition: opacity 0.3s; /* Ajoute une transition pour l'opacité */
    }
    .phase {
        position: absolute;
        height: 20px;
        background-color: var(--PromoColorFondMoyen);
        z-index: 2;
        transition: opacity 0.3s; /* Ajoute une transition pour l'opacité */
    }
	
    .milestone:hover, .milestone-today:hover, .phase:hover {
        opacity: 0.5; /* Opacité de 80% au survol */
    }
    @keyframes slideIn {
        from {
            width: 0;
        }
        to {
            width: calc(100% - 40px);
        }
    }

    /* Style pour le texte "permis" */
    .permis-text {
        position: absolute;
        bottom: -80px; /* Ajustez cette valeur pour positionner le texte en dessous du milestone */
        transform: rotate(-90deg) translate(0px,13px);
        transform-origin: left bottom;
        white-space: nowrap;
		z-index: 4;
		/*font-family: Jost;*/
		font-family:var(--PromoFontFamily);
		font-size:14px;
    }
	
    /* Style pour le texte "permis" */
    .today-text {
        position: absolute;
        bottom: -80px; /* Ajustez cette valeur pour positionner le texte en dessous du milestone */
        transform: rotate(-90deg) translate(0px,13px);
        transform-origin: left bottom;
        white-space: nowrap;
		z-index: 5;
		/*font-family: Jost;*/
		font-family:var(--PromoFontFamily);
		font-size:14px;
		background-color:var(--PromoColorFondClair);
    }
	
    /* Style pour le texte "enquête" et "construction" */
    .enquete-text {
        position: absolute;
        bottom: -7px; /* Ajustez cette valeur pour positionner le texte en dessous du milestone */
        transform: rotate(0deg) translate(0px,0px);
        transform-origin: left bottom;
        white-space: nowrap;
		z-index: 5;
		/*font-family: Jost;*/
		font-family:var(--PromoFontFamily);
		font-size:14px;
    }
	
    /* Style pour le texte "enquête" et "construction" */
    .construction-text {
        position: absolute;
        bottom: -27px; /* Ajustez cette valeur pour positionner le texte en dessous du milestone */
        transform: rotate(0deg) translate(0px,0px);
        transform-origin: left bottom;
        white-space: nowrap;
		z-index: 5;
		/*font-family: Jost;*/
		font-family:var(--PromoFontFamily);
		font-size:14px;
    }
    /* fin style timeline */