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

.header{

    height:56px;
    width:100%;

    position:fixed;
    top:0;
    left:0;

    z-index:1000;

    background:#fff;

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

    padding:0 16px;

    border-bottom:1px solid #ddd;

}


/* GROUPES */

.header-left,
.header-center,
.header-right{

    display:flex;
    align-items:center;

}


/* =========================
   BUTTONS
========================= */


.icon-btn{

    width:40px;
    height:40px;

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

    border:none;
    background:none;

    border-radius:50%;

    cursor:pointer;

}


.icon-btn:hover{

    background:#f2f2f2;

}


.icon-btn svg{

    width:22px;
    height:22px;

}



/* =========================
   LOGO
========================= */


.youtube-logo{

    display:flex;
    align-items:center;

    margin-left:15px;

    font-size:22px;
    font-weight:600;

}


.youtube-logo i{

    color:red;
    fill:red;

    margin-right:4px;

}



/* =========================
   SEARCH
========================= */


.header-center{

    flex:1;

    justify-content:center;

}


.search-box{

    height:40px;

    width:550px;

    display:flex;

}


.search-box input{

    flex:1;

    border:1px solid #ccc;

    border-right:none;

    border-radius:20px 0 0 20px;

    padding:0 18px;

    font-size:16px;

}


.search-box input:focus{

    outline:1px solid #065fd4;

}


.search-btn{

    width:65px;

    border:1px solid #ccc;

    background:#f8f8f8;

    border-radius:0 20px 20px 0;

}



.voice-btn{

    margin-left:12px;

    background:#f2f2f2;

}



/* =========================
   RIGHT
========================= */


.header-right{
    position: relative;
    right: 3%;
    gap:8px;

}


.avatar{

    width:34px;
    height:34px;

    border-radius:50%;

    background:#673ab7;

    color:white;

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

    margin-left:8px;

}

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


.sidebar{

    position:fixed;

    top:56px;
    left:0;

    width:240px;

    height:calc(100vh - 56px);

    background:white;

    padding:12px;

    overflow-y:auto;

}



/* MENU */


.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:4px;

}



/* ITEM */


.sidebar-item{

    height:40px;

    display:flex;

    align-items:center;

    gap:24px;

    padding:0 12px;

    border-radius:10px;

    color:#0f0f0f;

    text-decoration:none;

    font-size:14px;

}



.sidebar-item i{

    width:24px;

    text-align:center;

    font-size:18px;

}



.sidebar-item:hover{

    background:#f2f2f2;

}



.sidebar-item.active{

    background:#f2f2f2;

    font-weight:600;

}



.sidebar hr{

    border:none;

    border-top:1px solid #ddd;

    margin:12px 0;

}



.sidebar h3{

    font-size:16px;

    margin:10px 12px;

}



/* CHAINE */


.channel-avatar{

    width:24px;

    height:24px;

    border-radius:50%;

    background:#673ab7;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

}

.main-content{

    margin-left:240px;

    padding:70px 24px 30px;

}

/* =========================
   CATEGORIES
========================= */


.categories{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding-bottom:20px;

}


.categories::-webkit-scrollbar{

    display:none;

}



.category{

    border:none;

    background:#f2f2f2;

    padding:8px 16px;

    border-radius:8px;

    font-size:14px;

    white-space:nowrap;

    cursor:pointer;

}



.category:hover{

    background:#e5e5e5;

}



.category.active{

    background:#0f0f0f;

    color:white;

}

/* =========================
   VIDEOS GRID
========================= */


.videos-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:24px 16px;

}

/* =========================
   VIDEO CARD
========================= */
.video-card{
    text-decoration: none;
}

.thumbnail{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:12px;

}



.thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.duration{

    position:absolute;

    right:8px;

    bottom:8px;


    background:rgba(0,0,0,.8);

    color:white;

    font-size:12px;

    padding:3px 6px;

    border-radius:4px;

}




.video-info{

    display:flex;

    gap:12px;

    margin-top:12px;

}



.channel-picture img{

    width:36px;

    height:36px;

    border-radius:50%;

    object-fit:cover;

}




.video-text h3{

    font-size:16px;

    line-height:22px;

    font-weight:600;

    margin-bottom:6px;

    color:black;

    display:-webkit-box;
    display:box;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;

    overflow:hidden;

}



.video-text p{

    color:#606060;

    font-size:14px;

    margin-top:4px;

}




/* =========================
   TABLET
========================= */

@media(max-width:1200px){


    .sidebar{

        width:80px;

    }


    .sidebar-item{

        justify-content:center;

        gap:0;

    }


    .sidebar-item span,
    .sidebar h3{

        display:none;

    }


    .sidebar-item i{

        font-size:20px;

    }

    .main-content{

        margin-left:80px;

    }

    .videos-grid{

        grid-template-columns:
        repeat(3,1fr);

    }

}


@media(max-width:900px){


    .search-box{

        width:350px;

    }


    .youtube-logo span{

        display:none;

    }


}



/* =========================
   MOBILE
========================= */
@media(max-width:900px){


    .videos-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}

@media(max-width:768px){


    .sidebar{

        display:none;

    }

    .main-content{

        margin-left:0;

    }

}

@media(max-width:600px){


    .header{

        padding:0 10px;

    }



    .header-center{

        flex:initial;

    }



    .search-box{

        width:40px;

    }



    .search-box input{

        display:none;

    }



    .search-btn{

        width:40px;

        border-radius:50%;

        border:0;

        background:none;

    }



    .voice-btn{

        display:none;

    }



    .create-btn{

        display:none;

    }



    .header-right{

        gap:0;

    }


    .main-content{

        margin-left:0;

        padding:70px 12px 20px;

    }



    .videos-grid{

        grid-template-columns:1fr;

    }



    .video-text h3{

        font-size:15px;

    }


}