/*==================================
  STREAMING RASPIPHIL V2
==================================*/
.streaming-banner{
    position:relative;
    width:100%;
    height:300px;
    overflow:hidden;
    border-radius:15px;
    margin-bottom:40px;
    background:#000;
}


.streaming-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.banner-text{
    position:absolute;
    left:30px;
    bottom:30px;
    color:white;
    background:rgba(0,0,0,0.5);
    padding:20px;
    border-radius:10px;
}


.banner-text h1{
    margin:0 0 10px 0;
    font-size:32px;
}


.banner-text p{
    margin:0;
    font-size:18px;
}

.streaming-container{
    width:95%;
    margin:auto;
    padding:20px 0;
}

.streaming-menu{
    display:flex;
    gap:20px;
    padding:15px;
    background:#111;
    border-radius:10px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.streaming-menu a{
    color:white;
    text-decoration:none;
    font-weight:bold;
    padding:10px 15px;
    border-radius:8px;
    background:#222;
}

.streaming-menu a:hover{
    background:#0d6efd;
}


.streaming-section{
    margin-bottom:40px;
}

.streaming-section h2{
    color:white;
    margin-bottom:15px;
}

.media-link{
    text-decoration:none;
    color:white;
}


.media-link:hover{
    color:white;
}

/* FILMS POPULAIRES */

.popular-row{
    display:flex;
    gap:15px;
    overflow-x:auto;
    padding-bottom:10px;
}

.popular-row .media-card{
    min-width:180px;
    flex-shrink:0;
}



/* GRILLES */

.media-grid,
.category-grid{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:15px;
}



/* CARTE */

.media-card{
    background:#181818;
    border-radius:10px;
    overflow:hidden;
    color:white;
    text-align:center;
    padding-bottom:10px;
}


.media-card h3{
    font-size:15px;
    margin:10px 5px;
}


.media-card p{
    font-size:13px;
    color:#aaa;
}



/* IMAGE */

.media-image{
    width:100%;
    height:180px;
    background:#000;
}


.media-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}



/* BOUTON VOIR PLUS */

.btn-more{
    display:inline-block;
    margin-top:20px;
    padding:10px 20px;
    background:#0d6efd;
    color:white;
    text-decoration:none;
    border-radius:8px;
    font-weight:bold;
}


.btn-more:hover{
    background:#084298;
}



/* RESPONSIVE */

@media(max-width:1200px){

    .media-grid,
    .category-grid{
        grid-template-columns:repeat(5,1fr);
    }

}


@media(max-width:700px){

    .media-grid,
    .category-grid{
        grid-template-columns:repeat(2,1fr);
    }


    .streaming-menu{
        gap:10px;
    }

}

/* =====================================
   DETAIL MEDIA
===================================== */

.detail-container{
    width:95%;
    margin:auto;
    padding:20px 0;
}


/* RETOUR */

.btn-back{
    display:inline-block;
    margin-bottom:20px;
    padding:10px 18px;
    background:#222;
    color:white;
    text-decoration:none;
    border-radius:8px;
}

.btn-back:hover{
    background:#0d6efd;
}



/* BANDEAU */

.detail-banner{
    position:relative;
    height:350px;
    overflow:hidden;
    border-radius:15px;
    background:#000;
    margin-bottom:30px;
}


.detail-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}



.detail-overlay{
    position:absolute;
    left:30px;
    bottom:30px;
    color:white;
    background:rgba(0,0,0,0.65);
    padding:20px;
    border-radius:12px;
}


.detail-overlay h1{
    margin:0 0 15px 0;
    font-size:32px;
}



/* BADGES */

.badges{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}


.badge{
    padding:7px 12px;
    border-radius:8px;
    font-weight:bold;
    color:white;
}


.type{
    background:#0d6efd;
}


.age{
    background:#dc3545;
}


.genre{
    background:#198754;
}




/* CONTENU */

.detail-content{
    display:flex;
    gap:30px;
    background:#181818;
    padding:25px;
    border-radius:15px;
    color:white;
}



.poster{
    width:250px;
    flex-shrink:0;
}


.poster img{
    width:100%;
    border-radius:12px;
}



.info{
    flex:1;
}


.info h2{
    margin-top:0;
}


.info p{
    line-height:1.5;
}




/* INFORMATIONS */

.metadata{
    margin-top:20px;
    padding:15px;
    background:#111;
    border-radius:10px;
}


/* BOUTONS ACTION */

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:25px;
}


.actions a{
    padding:12px 18px;
    border-radius:10px;
    text-decoration:none;
    color:white;
    font-weight:bold;
}



.btn-play{
    background:#198754;
}


.btn-favori{
    background:#ffc107;
    color:#000 !important;
}


.btn-like{
    background:#dc3545;
}


.btn-comment{
    background:#0d6efd;
}



.actions a:hover{
    transform:scale(1.05);
}


/* SIMILAIRES */

.similar{
    margin-top:40px;
}


.similar h2{
    color:white;
}


.similar-grid{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:15px;
}



.media-card{
    background:#181818;
    color:white;
    border-radius:10px;
    overflow:hidden;
    text-align:center;
    padding-bottom:10px;
}


.media-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}



.media-card h3{
    font-size:15px;
}




/* RESPONSIVE */

@media(max-width:1200px){

    .similar-grid{
        grid-template-columns:repeat(5,1fr);
    }

}



@media(max-width:800px){

    .detail-content{
        flex-direction:column;
    }


    .poster{
        width:100%;
        max-width:300px;
        margin:auto;
    }


    .similar-grid{
        grid-template-columns:repeat(2,1fr);
    }


    .detail-overlay{
        left:15px;
        bottom:15px;
    }


    .detail-overlay h1{
        font-size:24px;
    }

}

/* =====================================
   PAGE CATEGORIE
===================================== */


.category-description{
    color:#aaa;
    margin-bottom:25px;
}



.streaming-section h1{
    color:white;
    margin-bottom:15px;
}



/* PAGE COMPLETE CATEGORIE */

.category-grid{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:15px;
}



/* CARTE MEDIA */

.media-card{
    background:#181818;
    border-radius:10px;
    overflow:hidden;
    color:white;
    text-align:center;
    padding-bottom:10px;
}


.media-card:hover{
    transform:scale(1.03);
    transition:0.2s;
}


.media-card p{
    color:#aaa;
    font-size:13px;
}



/* RESPONSIVE */

@media(max-width:1200px){

    .category-grid{
        grid-template-columns:repeat(5,1fr);
    }

}


@media(max-width:700px){

    .category-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/*=====================================
=            FAVORIS                 =
=====================================*/

.media-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.media-link:hover{
    text-decoration:none;
    color:inherit;
}

.media-link .media-card{
    transition:.25s;
}

.media-link:hover .media-card{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.media-card{
    cursor:pointer;
}

.media-card h3{
    margin:10px 8px 5px;
}

.media-card p{
    margin:0 8px 10px;
}