#profil-main{
    flex: 1;
    min-height: 0;
    border-radius: var(--border-radius-one);
    gap: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    position: relative;

    
    > #upper-part{
        width: 100%;
        height: 70%;
        display: flex;
        gap: var(--gap);

        > #about{
            display: none;
        }

        > #presentation{
            width: 70%;
            height: 100%;
            min-height: 0px;
            display: flex;
            flex-direction: column;
            overflow: scroll;

            > h1 {
                margin: var(--margin-two) 0px var(--margin-two) var(--margin);
                font-size: 3em;
                line-height: 1% !important;
            }

            > p{
                margin-left: var(--margin);
                font-size: 1.1em;
                width: 75%;
                line-height: 140%;
            }
        }
        > #picture{
            flex: 1;
            padding: 0px;
            background-color: var(--background-color-two);
            
            > img{
                border-radius: var(--border-radius-one);
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    
    > #lower-part{
        min-height: 0;
        flex: 1;
        width: 100%;
        display: flex;
        gap: var(--gap);
        min-height: 0px;
        
        > #skills{
            flex: 1;
            background-color: var(--secondary-color);
            color: var(--secondary-text-color);
            position: relative;
            padding: 0px;
        }

        #experience {
            flex: 1;
            height: fit-content !important;
            display: flex;
            flex-direction: column;
            gap: var(--gap);

            > h2 {
                font-size: 2em;
            }

            > .timeline {
                display: flex;
                flex-direction: column;
                gap: 28px;
                position: relative;

                > .exp-container {
                    display: flex;
                    gap: 18px;
                    height: fit-content;
                    position: relative;

                    /* Marker (point + ligne verticale) */
                    > .exp-marker {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        flex-shrink: 0;
                        padding-top: 6px;

                        > .dot {
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                            background: currentColor;
                            border: 2px solid currentColor;
                            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
                            flex-shrink: 0;
                            transition: transform 0.2s ease;
                            color: var(--secondary-color);
                        }

                        > .line {
                            flex: 1;
                            width: 2px;
                            background: linear-gradient(
                                to bottom,
                                currentColor 0%,
                                rgba(0, 0, 0, 0.15) 100%
                            );
                            opacity: 0.3;
                            margin-top: 6px;
                        }
                    }

                    /* Cache la ligne sur la dernière expérience */
                    &:last-child > .exp-marker > .line {
                        display: none;
                    }

                    /* Hover effect */
                    &:hover > .exp-marker > .dot {
                        transform: scale(1.2);
                    }

                    /* Contenu */
                    > .exp-content {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 6px;
                        padding-right: var(--padding-one);
                        padding-bottom: 4px;
                        flex: 1;

                        > .exp-header {
                            display: flex;
                            align-items: baseline;
                            flex-wrap: wrap;
                            gap: 10px;
                            width: 100%;

                            > h4 {
                                font-weight: 700;
                                font-size: 1.15em;
                                margin: 0;
                                letter-spacing: -0.01em;
                            }

                            > .exp-date {
                                font-size: 0.85em;
                                font-weight: 500;
                                opacity: 0.65;
                                padding: 2px 10px;
                                border-radius: 12px;
                                background: rgba(0, 0, 0, 0.05);
                                white-space: nowrap;
                            }
                        }

                        > .exp-role {
                            font-weight: 500;
                            font-size: 1em;
                            font-style: italic;
                            opacity: 0.85;
                            margin-bottom: 2px;
                        }

                        > ul {
                            margin: 6px 0 0 0;
                            padding-left: 18px;
                            display: flex;
                            flex-direction: column;
                            gap: 4px;

                            > li {
                                font-size: 0.95em;
                                line-height: 1.5;
                                opacity: 0.9;
                            }
                        }
                    }
                }
            }
        }
    }
    
}

#overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-one);
    background-color: var(--background-color-two);
    pointer-events: none;
}

.slider-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 0px;

    > .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        opacity: 0;
        animation: fadeSlide 16s infinite; /* 4 slides × 4s = 16s */

        > .logo-wrapper {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            justify-content: space-between;

            

        }
    }
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }
.slide:nth-child(4) { animation-delay: 12s; }

.logo-wrapper {
    > svg{
        height: 100px;
        width: 100px;
    }
}

/* Responsive */
@media (max-width: 600px) {
    #experience > .timeline > .exp-container > .exp-content > .exp-header {
        flex-direction: column;
        gap: 4px;

        > .exp-date {
            font-size: 0.8em;
        }
    }
}

@media  (max-width: 768px) {
    

    #profil-main{
        display: flex;
        min-height: none !important;
        height: fit-content !important;
        flex-direction: column;
    }
    
    #upper-part{
        min-height: none !important;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        height: auto !important;

        > #about{
            padding: calc(2*var(--padding-one));
            display: flex !important;
            flex-direction: column;
            justify-content: space-between;
            height: 30vh;
            min-height: 30vh;

            > img{
                width: 10vw;
                height: 10vw;
            }

            > div{
                font-size: 2.4em !important;
            }
        }
        
        > #presentation{
            /* order: 3; */
            flex: none;
            height: auto !important;
            width: 100% !important;
            position: static;
            
            > h1{
                display: none;
            }
            
            > p {
                box-sizing: border-box;
                width: 100% !important;
                margin-left: 0px !important;
                padding: var(--padding-one);

                > .italic{
                    font-family: var(--font-primary);
                    font-style: normal;
                    font-weight: 400 !important;
                    font-size: 1em;
                }
            }
        }
        > #picture{
            flex: none !important;
            height: 55vh !important;
            width: 100% !important;
            order: 2;
        }
    }
    
    #lower-part{
        box-sizing: border-box;
        flex: none !important;
        min-height: none !important;
        /* display: none !important; */
        flex-direction: column;
        height: auto !important;
        padding-bottom: var(--padding-one);

        > #skills{
            flex: none !important;
            height: 20vh !important;

        }
        
    }

    .logo-wrapper {
        > svg{
            height: 60px;
            width: 60px;
        }
    }

    .nav-links{
        top: calc(10vh + var(--margin) * 2);
        left: var(--margin);
    }

    @media  (max-height: 768px) {
        #about{
            height: 35vh !important;
            > h1{
                font-size: 2.2em !important;
            }
        }
    }
    
}