.timeline {
    display: grid;
    grid-template-columns: 4rem 6rem 3rem 1fr;
    row-gap: 0.5rem;
    column-gap: 0.5rem;
    max-width: 80ch;
    margin: 0 auto;
}

/* Empêche les blocs internes de casser la grille */
.timeline .year,
.timeline .month,
.timeline .day,
.timeline .list {
    display: contents;
}

.timeline .year>span {
    grid-column: 1;
    font-weight: bold;
    color: var(--text-softest);
    background: var(--surface-contrast);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    position: sticky;
    top: 3rem;
    z-index: 3;
    text-align: center;
    align-self: start;
    height: auto;
    max-height: none;
}

.timeline .month>span {
    grid-column: 2;
    font-style: italic;
    color: var(--accent-blue-light);
    background: var(--surface-accent);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    position: sticky;
    top: 3rem;
    z-index: 2;
    align-self: start;
    height: auto;
    max-height: none;
    text-align: center;
}

.timeline .day>span {
    grid-column: 3;
    color: var(--text-light);
    background: var(--surface-muted);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    position: sticky;
    top: 3rem;
    z-index: 1;
    align-self: start;
    height: auto;
    max-height: none;
    text-align: center;
}

/* Articles */
.timeline .day>.list {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
}

.timeline ul {
    margin: 0 !important;

    li {
        margin: 0 !important;
        padding: 0 0 0 1rem !important;
    }
}

.timeline .day>.list a {
    text-decoration: none;
    color: var(--text-softer);
    font-weight: 500;
    display: block;
}

.timeline .day>.list a:hover {
    color: var(--accent-blue-hover);
    text-decoration: underline;
}