/*
====================================================
RaspiPhil V2
Réseau Social
CSS
====================================================
*/


/* ==========================
CONTENEUR GENERAL
========================== */

.rs-container{

    max-width:1000px;

    margin:30px auto;

    padding:10px;

    color:white;

}



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

.rs-header{

    text-align:center;

    margin-bottom:30px;

}


.rs-header h1{

    color:white;

    margin-bottom:10px;

}


.rs-header p{

    color:#aaa;

}





/* ==========================
BOUTONS
========================== */

.rs-actions{

    margin-top:20px;

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}



.rs-btn{

    display:inline-block;

    padding:10px 18px;

    background:#1db954;

    color:white;

    text-decoration:none;

    border-radius:20px;

    transition:.3s;

}



.rs-btn:hover{

    background:#17a64a;

}





/* ==========================
STATISTIQUES INDEX
========================== */


.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin:25px 0;

}



.stat-card{

    background:#1e1e1e;

    padding:20px;

    border-radius:12px;

    text-align:center;

}



.stat-number{

    font-size:32px;

    font-weight:bold;

    color:#1db954;

}



.stat-label{

    margin-top:8px;

    color:#ccc;

}





/* ==========================
MENU INDEX
========================== */


.menu-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:20px;

}



.menu-card{

    background:#1e1e1e;

    padding:25px;

    border-radius:12px;

    text-align:center;

    color:white;

    text-decoration:none;

    transition:.3s;

}



.menu-card:hover{

    transform:translateY(-5px);

    background:#2b2b2b;

}



.menu-icon{

    font-size:35px;

}



.menu-card h3{

    margin-top:15px;

}



.menu-card p{

    color:#aaa;

}






/* ==========================
POST CARD
========================== */


.post-card{

    background:#1e1e1e;

    border-radius:15px;

    padding:20px;

    margin-bottom:25px;

}




/* HEADER POST */


.post-header{

    display:flex;

    align-items:center;

    gap:12px;

}



.post-avatar{

    width:50px;

    height:50px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #1db954;

}



.post-user{

    font-weight:bold;

    font-size:17px;

}



.post-date{

    font-size:12px;

    color:#aaa;

}






/* CONTENU */


.post-content{

    margin-top:20px;

    line-height:1.5;

    font-size:15px;

}






/* IMAGE */


.post-media{

    margin-top:15px;

    text-align:center;

}



.post-media img{

    max-width:80%;

    max-height:450px;

    border-radius:12px;

    object-fit:cover;

}





/* STATS */


.post-stats{

    margin-top:15px;

    padding-top:10px;

    border-top:1px solid #333;

    color:#aaa;

}





/* ACTIONS */


.post-actions{

    display:flex;

    gap:15px;

    margin-top:15px;

    flex-wrap:wrap;

}



.post-actions a{

    color:#1db954;

    text-decoration:none;

}



.post-actions a:hover{

    text-decoration:underline;

}





/* ==========================
VIDE
========================== */


.rs-empty{

    background:#1e1e1e;

    padding:30px;

    text-align:center;

    border-radius:12px;

    color:#aaa;

}






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


@media(max-width:700px){


.rs-container{

    margin:10px auto;

    padding:5px;

}



.post-card{

    padding:15px;

}



.post-media img{

    max-width:100%;

}



.post-actions{

    justify-content:center;

}



.menu-grid{

    grid-template-columns:1fr;

}



.stats-grid{

    grid-template-columns:1fr 1fr;

}


}



@media(max-width:450px){


.stats-grid{

    grid-template-columns:1fr;

}


.post-user{

    font-size:15px;

}


}