/* Timeline container */
.astrachild-flp-historique-container {
    width: 80%;
    margin: 40px auto;
    padding: 0 20px;
    position: relative;
}

/* Ligne verticale */
.astrachild-flp-historique-container::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom,
            var(--pride-noir) 0%,
            var(--pride-brun) 9.09%,
            var(--pride-rose) 18.18%,
            var(--pride-bleu-clair) 27.27%,
            var(--pride-blanc) 36.36%,
            var(--pride-rouge) 45.45%,
            var(--pride-orange) 54.54%,
            var(--pride-jaune) 63.63%,
            var(--pride-vert) 72.72%,
            var(--pride-bleu) 81.81%,
            var(--pride-violet) 100%);
    border-radius: 2px;
}

/* Liste */
.astrachild-flp-historique-container ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Item */
.astrachild-flp-historique-container li {
    position: relative;
    margin: 20px 0 20px 60px;
    padding: 15px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform .3s ease, box-shadow .3s ease, border-left-color .3s ease;
    border-left: 4px solid transparent;
}

.astrachild-flp-historique-container li:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Point sur la ligne */
.astrachild-flp-historique-container li::before {
    content: "";
    position: absolute;
    left: -42px;
    top: 20px;
    width: 16px;
    height: 16px;
    background: var(--pride-rose);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px var(--pride-rose);
    transition: all .3s ease;
}

/* Variation avec  les 11 couleurs */
.astrachild-flp-historique-container li:nth-child(11n+1)::before {
    background: var(--pride-noir);
    box-shadow: 0 0 0 3px var(--pride-noir);
}

.astrachild-flp-historique-container li:nth-child(11n+1):hover {
    border-left-color: var(--pride-noir);
}

.astrachild-flp-historique-container li:nth-child(11n+2)::before {
    background: var(--pride-brun);
    box-shadow: 0 0 0 3px var(--pride-brun);
}

.astrachild-flp-historique-container li:nth-child(11n+2):hover {
    border-left-color: var(--pride-brun);
}

.astrachild-flp-historique-container li:nth-child(11n+3)::before {
    background: var(--pride-rose);
    box-shadow: 0 0 0 3px var(--pride-rose);
}

.astrachild-flp-historique-container li:nth-child(11n+3):hover {
    border-left-color: var(--pride-rose);
}

.astrachild-flp-historique-container li:nth-child(11n+4)::before {
    background: var(--pride-bleu-clair);
    box-shadow: 0 0 0 3px var(--pride-bleu-clair);
}

.astrachild-flp-historique-container li:nth-child(11n+4):hover {
    border-left-color: var(--pride-bleu-clair);
}

.astrachild-flp-historique-container li:nth-child(11n+5)::before {
    background: var(--pride-blanc);
    box-shadow: 0 0 0 3px var(--pride-blanc);
}

.astrachild-flp-historique-container li:nth-child(11n+5):hover {
    border-left-color: var(--pride-blanc);
}

.astrachild-flp-historique-container li:nth-child(11n+6)::before {
    background: var(--pride-rouge);
    box-shadow: 0 0 0 3px var(--pride-rouge);
}

.astrachild-flp-historique-container li:nth-child(11n+6):hover {
    border-left-color: var(--pride-rouge);
}

.astrachild-flp-historique-container li:nth-child(11n+7)::before {
    background: var(--pride-orange);
    box-shadow: 0 0 0 3px var(--pride-orange);
}

.astrachild-flp-historique-container li:nth-child(11n+7):hover {
    border-left-color: var(--pride-orange);
}

.astrachild-flp-historique-container li:nth-child(11n+8)::before {
    background: var(--pride-jaune);
    box-shadow: 0 0 0 3px var(--pride-jaune);
}

.astrachild-flp-historique-container li:nth-child(11n+8):hover {
    border-left-color: var(--pride-jaune);
}

.astrachild-flp-historique-container li:nth-child(11n+9)::before {
    background: var(--pride-vert);
    box-shadow: 0 0 0 3px var(--pride-vert);
}

.astrachild-flp-historique-container li:nth-child(11n+9):hover {
    border-left-color: var(--pride-vert);
}

.astrachild-flp-historique-container li:nth-child(11n+10)::before {
    background: var(--pride-bleu);
    box-shadow: 0 0 0 3px var(--pride-bleu);
}

.astrachild-flp-historique-container li:nth-child(11n+10):hover {
    border-left-color: var(--pride-bleu);
}

.astrachild-flp-historique-container li:nth-child(11n+11)::before {
    background: var(--pride-violet);
    box-shadow: 0 0 0 3px var(--pride-violet);
}

.astrachild-flp-historique-container li:nth-child(11n+11):hover {
    border-left-color: var(--pride-violet);
}

/* Lien */
.astrachild-flp-historique-container a {
    color: #222;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

.astrachild-flp-historique-container a:hover {
    text-decoration: underline;
}

@media (max-width: 782px) {
    .astrachild-flp-historique-container {
        width: 100%;
    }
}