.line {
    background-color: var(--darkline);
    flex: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    height: 0;
    width: 1px;
    /*z-index: 2;*/
}
.line1 {
    left: 11.6%;
}
.line2 {
    left: 50.85%;
}
.line3 {
    left: 58.6%;
}
.line4 {
    right: 3%;
}

/* Animation différée */
.line1.animate { animation: grow1 2s forwards; }
.line2.animate { animation: grow2 2s forwards; }
.line3.animate { animation: grow3 2s forwards; }
.line4.animate { animation: grow4 2s forwards; }

/* Keyframes pour les animations */
@keyframes grow1 {
    from { height: 0; }
    to { height: 100vh; }
}

@keyframes grow2 {
    from { height: 0; }
    to { height: 100vh; }
}

@keyframes grow3 {
    from { height: 0; }
    to { height: 100vh; }
}

@keyframes grow4 {
    from { height: 0; }
    to { height: 100vh; }
}





@media (max-width: 480px) {

}
@media (max-width: 767px) {

}
@media (max-width: 991px) {
    .line2 {
        display: none;
    }
    .line3 {
        display: none;
    }
}
@media (max-width: 1199px) {
    .date{
        display: none;
    }
}
@media (max-width: 1599px) {

}