body {

    background: #0e0e10;

    color: white;

    font-family: Arial, Helvetica, sans-serif;

    margin: 0;

    padding: 30px;

}


/* HEADER */

header {

    text-align: center;

    margin-bottom: 30px;

}


header h1 {

    color: #9147ff;

    font-size: 38px;

    margin-bottom: 5px;

}


header p {

    color: #aaa;

    font-size: 18px;

}





/* STATISTIQUES */

.stats {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 40px;

}



.stat {

    background: #18181b;

    border-radius: 15px;

    padding: 20px;

    width: 180px;

    text-align: center;

    box-shadow:
    0 5px 20px rgba(0,0,0,0.4);

}



.stat h3 {

    margin: 0 0 10px;

    color: #ccc;

    font-size: 16px;

}



.stat span {

    font-size: 35px;

    font-weight: bold;

    color: #9147ff;

}





/* TITRES */

h2 {

    text-align: center;

    margin-bottom: 25px;

}





/* GRILLE DES LIVES */

.grid {


    display: grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(280px, 320px)
    );


    gap: 20px;


    justify-content: center;


}





/* CARTE LIVE */

.live-card {


    background: #18181b;


    border-radius: 15px;


    overflow: hidden;


    max-width: 320px;


    box-shadow:

    0 5px 20px rgba(0,0,0,0.5);


    transition: 0.2s;


}



.live-card:hover {


    transform: translateY(-5px);


}





/* MINIATURE */

.thumbnail {


    width: 100%;


    height: 180px;


    object-fit: cover;


    display: block;


}





/* CONTENU */

.content {


    padding: 15px;


}





.badge {


    color: #ff4b4b;


    font-weight: bold;


    font-size: 14px;


    margin-bottom: 10px;


}





.content h2 {


    text-align: left;


    margin: 5px 0 15px;


    font-size: 22px;


}





.content p {


    color: #ccc;


    font-size: 14px;


    margin: 8px 0;


}





.viewers {


    margin-top: 15px;


    font-size: 20px;


    font-weight: bold;


    color: #9147ff;


}





/* BOUTON TWITCH */

a {


    display: block;


    margin-top: 15px;


    text-align: center;


    background: #9147ff;


    color:white;


    padding: 10px;


    border-radius: 10px;


    text-decoration:none;


    font-weight:bold;


    transition:0.2s;


}



a:hover {


    background:#772ce8;


}





/* RESPONSIVE */

@media(max-width:600px){


    body {

        padding:15px;

    }



    .grid {

        grid-template-columns:

        1fr;

    }


    .live-card {

        max-width:100%;

    }


}

.history-card {

    min-height:250px;

}


.date {

    color:#888;

    font-size:13px;

}
/* CLASSEMENT */


.ranking-list {


    display:flex;

    flex-direction:column;

    gap:15px;

    max-width:900px;

    margin:auto;


}



.rank-card {


    background:#18181b;


    border-radius:15px;


    padding:20px;


    display:flex;


    align-items:center;


    gap:25px;


    box-shadow:

    0 5px 20px rgba(0,0,0,0.4);


}



.rank-card:hover {


    transform:translateY(-3px);

}



.position {


    font-size:35px;

    min-width:70px;

    text-align:center;


}



.rank-info {


    flex:1;


}



.rank-info h2 {


    margin:0 0 10px;

    text-align:left;


}



.rank-info p {


    margin:5px 0;

    color:#ccc;


}



.rank-card a {


    width:150px;

}




@media(max-width:700px){


.rank-card{


    flex-direction:column;

    text-align:center;


}


.rank-info h2{

    text-align:center;

}


}
/* STREAMERS */


.streamer-card {


    text-align:center;


}



.avatar {


    width:120px;


    height:120px;


    border-radius:50%;


    object-fit:cover;


    margin:25px auto 0;


}



.streamer-card h2 {


    text-align:center;


}





.empty {


    background:#18181b;


    padding:40px;


    border-radius:15px;


    text-align:center;


    width:100%;


}



.empty h2 {


    color:#9147ff;


}
/* PROFIL STREAMER */


.small-stat {


    font-size:22px !important;


}



.profile-header {


    text-align:center;


}



.profile-avatar {


    width:150px;


    height:150px;


    border-radius:50%;


}




.live-card .content h2 {


    color:white;


}