.container-timeline {
    font-family: "Segoe UI Light","Helvetica Neue","Segoe UI","Segoe WP",sans-serif;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.container-timeline .box-left {
    position: absolute;
    left: 0;
    width: 40%;
    margin-left: 5%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-timeline .box-right {
    position: absolute;
    right: 0;
    width: 40%;
    margin-left: 55%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-period {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    font-size: 1.2vh;
    align-items: center;
    justify-content: center; /* Changer space-between en center */
}

.container-period:hover .line {
    width: 10px;
}

.container-period:hover .text-left {
    font-size: 1.5em;
    opacity: 1 !important;
}

.container-period:hover .text-right {
    font-size: 1.5em;
    opacity: 1 !important;
}

.text-left, .text-right {
    flex-basis: 50%; /* Ajouter cette propriété pour prendre la moitié de la place disponible */
    display: flex; /* Ajouter cette propriété pour utiliser Flexbox à l'intérieur des textes */
    align-items: center; /* Ajouter cette propriété pour centrer verticalement le texte */
}

.text-left {
    position: relative;
    font-size: 1em;
    justify-content: flex-end; /* Ajouter cette propriété pour aligner le texte à gauche */
    padding-right: 10px; /* Ajouter cette propriété pour créer un espace entre le texte et la ligne */
}

.text-right {
    position: relative;
    font-size: 1em;
    justify-content: flex-start; /* Ajouter cette propriété pour aligner le texte à droite */
    padding-left: 10px; /* Ajouter cette propriété pour créer un espace entre le texte et la ligne */
}

.line {
    width: 3px;
    height: 100%;
    border-radius: 10px;
    margin: 0 auto;
    transition: width 0.25s;
}