section.diploma {
    color: #fff;
    width: 100dvi;
    height: 100dvh;
    
    .time {
        position: relative;
        width: 100dvi;
        /*margin: 30px auto;*/
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin-top: 50px;
    
        .timeline {
            position: absolute;
            top: 0; left: 50%;
            width: 2px;
            height: 100%;
            transform: translateX(-50%);
            background: var(--bg-lighter);
            border-radius: 20px;
        }

        .curr-pos-time {
            position: absolute;
            top: 0; left: 50%;
            width: 25px;
            height: 25px;
            background: var(--bg-lighter);
            border-radius: 50%;
            transform: translate(-50%, 0);
            z-index: 1;

            transition: width .3s ease, height .3s ease, top .1s ease;
        }

        .card {
            display: flex;
            align-items: center;
            justify-content: center;

            .content {
                width: 325px;
                margin: 10px 0;
                padding: 20px 30px;
                border-radius: 10px;
                background: var(--bg-lighter);
                min-height: 230px;
                text-align: center;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                transition: transform .3s ease;

                h2 { font-weight: bold; color: var(--nav-after); text-shadow: 0 0 0 rgb(0, 0, 0); }

                .separator_card {
                    width: 80%;
                    height: 2px;
                    margin: 10px auto 30px;
                    background-color: var(--bg-darkgrey);
                }

                .information {
                    p { text-align: justify; color: black; }
                    .type { margin-bottom: 10px; }
                    .adress {
                        p { margin-bottom: 5px; }
                    }
                }
            }

            .date {
                position: absolute;
                margin-top: 50px;
                left: 50%;
                width: fit-content;
                height: 20px;
                transform: translate(-50%, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                width: 20px;
                height: 20px;
                background: var(--bg-lighter);
                border-radius: 50%;
                transform: translate(-50%, -50%);
                transition: all .3s ease; /* ou left .3s ease, transform .3s ease */
            }
            .content.active {
                transform: scale(1.1);
                z-index: 2;
                &::after {
                    left: 40%; /* exemple de changement */
                    transform: translate(-50%, -50%) scale(1.2);
                }
            }

            &:nth-child(2n) {
                margin-left: 50%;
            }

            &:nth-child(2n+1) {
                margin-left: -50%;
            }
        }
    }
}

@media screen and (max-width: 1000px) {
    section.diploma {
        .time {
            margin-top: 100px;
            .timeline {
                display: none;
            }

            .curr-pos-time {
                display: none;
            }
            
            .card {
                margin: 10px 0 !important;
                flex-direction: column;

                .date {
                    position: relative;
                    left: 0;

                    margin-top: 0;

                    color: black;
                    transform: translateY(-40px);
                }

                &::after {
                    display: none;
                }
            }
        }
    }
}