@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

* {padding: 0px; margin: 0px;}
body {display: flex;}
main {margin-left: clamp(240px, 20vw, 300px);}

/* Main */
main {width: 100%;display: flex;justify-content: center;}
main section {width: clamp(400px, 44vw, 800px);padding: 80px 0;display: flex; gap: 16px;flex-direction: column;}
main code {color: #3374FF; font-family: Inter; font-size: 14px; font-weight: 400; line-height: 160%; padding: 2px 8px; justify-content: center; align-items: center; gap: 10px; border-radius: 6px; border: 1px solid #E0E1E9; width: fit-content; margin: 0 4px;background-color: #eceefe55;}
main h3 {color: #121624; font-family: Inter; font-size: 40px; font-weight: 700; line-height: normal; margin-bottom: 12px;}
main p {color: #121624; font-family: Inter; font-size: 16px; font-weight: 400; line-height: 160%;}
main a {color: #3374FF;}
main a:hover {opacity: .4;}
main ul {list-style: inside; margin-left: 8px; display: flex; flex-direction: column; gap: 8px;}
main li {color: #121624; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%;}
main h4 {color: #121624; font-family: Inter; font-size: 24px;  font-weight: 600; line-height: normal; margin-top: 20px;}
main b {font-weight: 700;}
main .astuce {font-size: 14px; background-color: red; padding: 12px; border-radius: 8px;border: 1px solid #E0E1E9;background-color: #eceefe55;}
main video {border-radius: 20px; margin: 20px 0px;}


/* Sidebar */
#sidebar {
    background-color: blue;
    width: clamp(240px, 20vw, 300px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    flex-shrink: 0;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0;
    background-color: #0C0D0F;
}

#side {padding: 40px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 60px; width: calc(100% - 40px); overflow: scroll;}
#side::-webkit-scrollbar {display: none;}
#side_title {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; align-self: stretch;}
#side_title img {height: 32px;}
#side_title h3 {color: #6E707C; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 400; line-height: 28px;}
#side_title hr {width: 40px; height:1px; background: #404350; border: none}

#side_content {display: flex; flex-direction: column; align-items: flex-start; gap: 20px; align-self: stretch; height: 100vh;}
#side_content ul {list-style: none; padding: 0; width: 100%;}
#side_content ul li {font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal;}
#side_content li {color:#9B9DA7; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; border-radius: 8px; margin-bottom: 6px;}
#side_content li {cursor: pointer; position: relative; padding: 12px; width: calc(100% - 24px);}
#side_content li:hover {background-color: rgba(255, 255, 255, 0.04); color: #F7F7FF !important;}
#side_content li.active {background-color: rgba(255, 255, 255, 0.06);}
.submenu {max-height: 0; overflow: hidden; padding-left: 20px; transition: max-height 0.3s ease-out; margin-left: 14px; width: calc(100% - 14px) !important;}
.submenu.open {max-height: 500px; transition: max-height 0.3s ease-in;}
.arrow {width: 24px; position: absolute; right: 8px; top: calc(50% - 12px); fill: #9B9DA7; transition: transform 0.3s ease; pointer-events: none; transform: rotate(90deg);}
#side_content li:hover .arrow {fill: #F7F7FF;}
#side_content li.open .arrow {transform: rotate(270deg); fill: #F7F7FF;}
#side_content li.open {color: #F7F7FF;}


.link {display: flex; padding: 20px; justify-content: space-between; align-items: center; border-radius: 8px; border: 1px solid #ECECF4; cursor: pointer;}
.link-text {display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;}
.link label {color: #3374FF; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 500; line-height: normal;}
.link p {color: #121624; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%; /* 25.6px */}
.link svg {width: 24px; height: 24px;color: #C9CAD3; transition: all .4s;}

.link:hover {background-color: #ECECF4; transition: all .2s; border: 1px solid #E0E1E9;}
.link:hover svg{color: #3374FF; rotate: 360deg; transition: all .4s; scale: 1.2;}

a {text-decoration: none; color: inherit; font-family: Inter, sans-serif; cursor: pointer;}
#side_back {color: #6E707C; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 16px 8px 12px; border-radius: 12px; display: flex; gap: 8px; margin-top: auto; margin: auto;}
#side_back svg {width: 16px;}
#side_back:hover {color: white; background-color: rgba(255, 255, 255, 0.2); transition: all .2s; border: none}

/* --- Responsive Design --- */
    #menu-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1100;
    background: #0C0D0F;
    color: white;
    border: none;
    padding: 8px 8px;
    border-radius: 4px;
    cursor: pointer;
}

#menu-toggle.transparent {
    background-color: transparent;
    box-shadow: none;
}

#menu-toggle svg {width: 20px; height: 20px;}


@media (max-width: 1024px) {
    #menu-toggle {
        display: block;
    }
}


@media (max-width: 1024px) {
    #sidebar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }

    #sidebar.open {
        transform: translateX(0);
    }

    body {
        flex-direction: column;
    }

    main {
        margin-left: 0;
        width: 100%;
    }

    main section {
        width: 90%;
        padding: 60px 16px;
    }
}

@media (max-width: 768px) {
    main h3 {
        font-size: 28px;
    }

    main h4 {
        font-size: 20px;
    }

    main p,
    main li {
        font-size: 14px;
    }

    .link {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .link svg {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    main section {
        padding: 80px 12px;
    }

    .link {
        padding: 16px;
    }

    #side_title h3 {
        font-size: 16px;
    }

    #side_content li {
        font-size: 13px;
        padding: 10px;
    }

    .arrow {
        width: 20px;
        right: 4px;
    }
}