.timelineContainer {
    background: url(../img/body-bg.webp) no-repeat center; 
}

.timeline {
    display: block;
    width: 80%;
    margin: 150px auto;
}

.timeline .heading {
    margin-bottom: 150px;
}

.card {
    width: 45%; /* Largeur pour les ordinateurs */
    padding: 30px;
    border-radius: 10px;
    color: #000; /* Couleur du texte */
    display: block;
    margin: -53px 0; /* Ajustement de la marge */
    position: relative;
    min-height: 220px; /* Hauteur minimale */
    background: #fff; /* Fond blanc pour les cartes */
    border: 1px solid #ccc; /* Bordure fine */
}

.card p {
    text-align: left;
}

.card-title {
    font-size: 30px; /* Taille de police pour les ordinateurs */
    font-weight: 300;
    margin-bottom: 14px;
}

/* Couleurs homogènes pour les cartes */
.card:nth-child(6n+1):before {
    background: #4fa0ff; /* Bleu clair */
}
.card:nth-child(6n+2):before {
    background: #ff4f4f; /* Rouge clair */
}
.card:nth-child(6n+3):before {
    background: #ffb84f; /* Jaune */
}
.card:nth-child(6n+4):before {
    background: #3dca5c; /* Vert */
}
.card:nth-child(6n+5):before {
    background: #a79d9d; /* Gris */
}
.card:nth-child(6n):before {
    background: #ae68dae1; /* Violet clair */
}

/* Styles pour les petits ronds */
.card:nth-child(6n+1):before,
.card:nth-child(6n+2):before,
.card:nth-child(6n+3):before,
.card:nth-child(6n+4):before,
.card:nth-child(6n+5):before,
.card:nth-child(6n):before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 2;
}

.card:nth-child(6n+1):before {
    right: -14%; /* Positionné à droite */
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid #4fa0ff; /* Couleur du rond pour la carte 1 */
}

.card:nth-child(6n+2):before {
    right: -14%; /* Positionné à droite */
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid #ff4f4f; /* Couleur du rond pour la carte 2 */
}

.card:nth-child(6n+3):before {
    right: -14%; /* Positionné à droite */
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid #ffb84f; /* Couleur du rond pour la carte 3 */
}

.card:nth-child(6n+4):before {
    right: -14%; /* Positionné à droite */
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid #3dca5c; /* Couleur du rond pour la carte 4 */
}

.card:nth-child(6n+5):before {
    right: -14%; /* Positionné à droite */
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid #a79d9d; /* Couleur du rond pour la carte 5 */
}

.card:nth-child(6n):before {
    right: -14%; /* Positionné à droite */
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid #ae68dae1; /* Couleur du rond pour la carte 6 */
}

@media (min-width: 991px) {
    .card:nth-child(even) {
        margin-left: auto; /* Alignement des cartes paires */
    }

    /* Right side dash */
    .card:nth-child(even):after {
        content: '';
        position: absolute;
        left: -8.5%;
        top: 50%;
        transform: translateY(-50%);
        width: 7%;
        height: 100%; /* Hauteur ajustée */
        background: #4e2222; /* Couleur du trait */
        z-index: 1;
    }

    /* Left side dash */
    .card:nth-child(odd):after {
        content: '';
        position: absolute;
        right: -8.5%;
        top: 50%;
        transform: translateY(-50%);
        width: 7%;
        height: 100%; /* Hauteur ajustée */
        background: #000; /* Couleur du trait */
        z-index: 1;
    }

    /* Dash line */
    .card:nth-child(even) .card-body::before {
        content: '';
        position: absolute;
        left: -12%;
        top: 0;
        width: 1px; /* Largeur ajustée */
        height: 100%; /* Hauteur ajustée */
        border: 1px dashed #000; /* Trait en pointillé */
        z-index: 1;
    }
}

/* Styles spécifiques pour les appareils mobiles */
@media (max-width: 991px) {
    .timeline {
        margin: 100px auto; /* Réduire la marge pour les mobiles */
        width: 90%; /* Ajuster la largeur pour les mobiles */
    }

    .card {
        width: 100%; /* Prendre toute la largeur sur mobile */
        padding: 15px; /* Réduire le padding pour les mobiles */
        margin: 10px 0; /* Ajuster la marge pour les mobiles */
    }

    .card .title {
        font-size: 20px; /* Réduire la taille de la police pour les mobiles */
    }

    .card p {
        font-size: 14px; /* Ajuster la taille de la police pour les paragraphes */
    }
}