h5 {
    color: black;
}

.box {
    padding-bottom: 60px;
}

.message {
    background-color: #E4E4E4FF;
    border-radius: 10px;
}
/* classes pour la timeline */
.main-timeline-5 {
    position: relative;
    max-width: 80%;
    margin: 0 auto;
    z-index: 0 !important; /* Contexte d'empilement de base */
}

/* trait vertical */
.main-timeline-5::after {
    content: "";
    position: absolute;
    width: 3px;
    background-color: #fff;
    top: 0;
    bottom: 0;
    left: auto;
    margin-left: -3px;
    z-index: 0 !important ; /* La ligne doit être derrière les points */
}

/* conteneur de texte */
.timeline-5 {
    position: relative;
    background-color: inherit;
    width: 100%;
}

/* points sur le trait */
.timeline-5::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    right: 10px;
    background-color: #2e82fd;
    top: 18px;
    border-radius: 50%;
    z-index: 2; /* Les points sont au-dessus de la ligne */
}

/* placer les conteneurs sur la droite */
.right-5 {
    padding: 0px 0px 20px 40px;
    left: auto;
}

/* flèches vers la ligne */
.right-5::before {
    content: " ";
    position: absolute;
    top: 18px;
    z-index: 1;
    left: 30px;
    border: medium solid #fff;
    border-width: 10px 10px 10px 0;
    border-color: transparent #fff transparent transparent;
}

/* mettre les cercles sur la gauche des conteneurs */
.right-5::after {
    left: -10px;
    z-index: 2; /* S'assurer que les cercles sont visibles */
}

@media (max-width: 991px) {
    .main-timeline-5 {
        max-width: 100%;
    }
}