nav {
    display: flex;
    gap: 1em;
    align-items: baseline;
    font-family: sans-serif;
    strong { flex: 1; font-size: 1.5em;}
    span {
        text-transform: uppercase;
        font-size: 1em    ;
    }
}
#timeline {
    --percent: 100%;
    height: 100px;
    width: 100%;
    display: flex;
    clip-path: inset(0 var(--percent) 0 0);
    transition: all 150ms;
}
.periode {
    height: 100px;
}
.periode1 { background: yellow; }
.periode2 { background: yellowgreen; }
.periode3 { background: lime; }
.periode4 { background: blue; }

[id^="detail"] *{
    display: none;
}
[id^="detail"].active *{
    display: revert;
}
[id^="detail"].visible h2{
    display: revert;
}