/* ===== RESET & BASE ===== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    height:100%;
    font-family:Arial, sans-serif;
    background:#f4f6f8;
    font-size:14px;
}

/* ===== CONTAINER PRINCIPAL ===== */

.main-container{
    display:flex;
    flex-direction:column;
    height:100vh;
}

/* ===== HEADER ===== */

.header{
    height:60px;
    background:linear-gradient(135deg,#0a6d4d,#128c7e);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2000;
}

.header h1{
    font-size:20px;
}

/* ===== LAYOUT PRINCIPAL ===== */

.layout{
    flex:1;
    display:flex;
    height:calc(100vh - 60px);
}

/* ===== SIDEBAR DESKTOP ===== */

.sidebar{
    width:260px;
    background:#1f2937;
    overflow-y:auto;
}

/* ===== MENU ITEMS ===== */

.menu-item{
    padding:12px 15px;
    color:white;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.menu-item span{
    font-weight:bold;
}

/* ===== ETATS ===== */

.menu-item.active span{
    color:#c00000;
}

.menu-item.completed span{
    color:#2e8b57;
}

.menu-item.locked span{
    color:#999;
}

/* ===== SUBMENU ===== */

.submenu{
    display:none;
    background:#374151;
}

.menu-item.active .submenu{
    display:block;
}

.submenu a{
    display:block;
    padding:8px 15px;
    text-decoration:none;
    color:white;
    font-size:13px;
}

.submenu a:hover{
    background:#128c7e;
}

/* ===== COURS ACTIF ===== */

.submenu a.active-course{
    background:#ffe5e5;
    color:#c00000;
    font-weight:bold;
    border-left:4px solid #c00000;
}

/* ===== ZONE CONTENU ===== */

.content{
    flex:1;
    display:flex;
    height:100%;
    background:#f4f6f9;
}

.viewer-frame{
    width:100%;
    height:100%;
    border:none;
    position:relative;
    z-index:1;
}

/* ===== PROGRESS BAR ===== */

.progress-container{
    height:6px;
    background:#e0e0e0;
}

.progress-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#2e8b57,#3cb371);
    transition:width 0.4s ease;
}

/* ===== FOOTER ===== */

footer{
    text-align:center;
    padding:12px;
    background:#222;
    color:white;
}

/* ===================================================== */
/* ================== MODE MOBILE ====================== */
/* ===================================================== */

@media (max-width:1000px){

    /* ===== HAMBURGER ===== */

    .hamburger-menu{
        position:fixed;
        right:15px;
        top:15px;
        width:40px;
        height:40px;
        background:#128c7e;
        border-radius:50%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;
        cursor:pointer;
        z-index:5000;
        pointer-events:auto;
    }

    .hamburger-menu span{
        width:22px;
        height:3px;
        background:white;
        border-radius:3px;
        transition:0.3s;
    }

    /* Animation hamburger */

    .hamburger-menu.open span:nth-child(1){
        transform:rotate(45deg) translate(5px,5px);
    }

    .hamburger-menu.open span:nth-child(2){
        opacity:0;
    }

    .hamburger-menu.open span:nth-child(3){
        transform:rotate(-45deg) translate(6px,-6px);
    }

    /* ===== SIDEBAR MOBILE ===== */

    .sidebar{
        position:fixed;
        left:-260px;
        top:60px;
        width:260px;

        height:calc(100dvh - 60px);

        background:#1f2937;

        overflow-y:auto;
        -webkit-overflow-scrolling:touch;

        transition:left 0.4s ease;

        z-index:4000;
    }

    .sidebar.open{
        left:0;
    }

    /* ===== OVERLAY ===== */

    .menu-overlay{
        position:fixed;
        top:60px;
        left:0;
        right:0;
        bottom:0;

        background:rgba(0,0,0,0.4);

        display:none;

        z-index:3000;
    }

    .menu-overlay.show{
        display:block;
    }

    /* ===== CONTENU ===== */

    .content{
        width:100%;
    }

}

/* ===== PETITS TELEPHONES ===== */

@media (max-width:480px){

    .header h1{
        font-size:16px;
    }

    .menu-item span{
        font-size:13px;
    }

}