/* =========================
   GLOBAL
========================= */

body{
    margin:0;
    font-family:Segoe UI, Arial, sans-serif;
    background:#f4f6f9;
}

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

.layout{
    display:flex;
    height:100vh;
}

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

.sidebar{
    width:360px;
    background:#ffffff;
    border-right:1px solid #e6e6e6;

    overflow-y:auto;
    overflow-x:hidden;

    padding-bottom:120px;

    position:relative;
    z-index:10;

    -webkit-overflow-scrolling: touch;
}

/* HEADER */
.header{
    background:#217346;
    color:white;
    padding:18px;
    font-size:20px;
    font-weight:bold;
    letter-spacing:0.5px;
}

/* =========================
   CHAPITRES
========================= */

.chapter{
    border-bottom:1px solid #f0f0f0;
}

/* TITRE CHAPITRE */
.chapter-title{
    padding:14px 16px;
    font-weight:600;
    background:linear-gradient(#fafafa, #f3f3f3);
    cursor:pointer;

    display:flex;
    justify-content:space-between;
    align-items:center;

    transition:all 0.2s ease;

    user-select:none;
    -webkit-user-select:none;
}

.chapter-title:hover{
    background:#e9f5ee;
    color:#217346;
}

/* flèche */
.chapter-title::after{
    content:"▾";
    font-size:12px;
    color:#888;
}

/* LISTE VIDEOS */
.chapter-videos{
    display:none;
    background:#fff;
    animation: fadeIn 0.2s ease;
}

/* ANIMATION */
@keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}

/* =========================
   VIDEO ITEMS
========================= */

.video-item{
    padding:10px 18px;
    font-size:14px;
    cursor:pointer;

    border-left:3px solid transparent;

    transition:all 0.2s ease;

    user-select:none;
    -webkit-user-select:none;

    position:relative;
    z-index:20;
}

.video-item:hover{
    background:#e8f5ea;
    border-left:3px solid #217346;
}

/* ACTIVE */
.video-item.active{
    background:#217346;
    color:white;
    border-left:3px solid #145c2e;
}

/* =========================
   CONTENT
========================= */

.content{
    flex:1;
    padding:25px;

    position:relative;
    z-index:5;

    pointer-events:auto;
}

video{
    width:100%;
    max-height:70vh;
    background:black;
    border-radius:10px;
}

.title{
    margin-top:15px;
    font-size:24px;
    color:#217346;
}

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

.footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;

    background:#217346;
    color:white;

    text-align:center;
    padding:8px 10px;

    font-size:14px;
    font-weight:500;

    z-index:999;
}

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

@media(max-width:900px){

    .layout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        height:40vh;

        overflow-y:auto;
        padding-bottom:120px;

        position:relative;
        z-index:10;
    }

    .content{
        flex:1;
        padding:15px;
    }
}