/*
|--------------------------------------------------------------------------
| TeleBLOG
| Your Telegram chat is your CMS.
|--------------------------------------------------------------------------
*/


:root {

    --bg: #0f172a;

    --card: #172033;

    --card-hover: #1c2940;

    --text: #e5e7eb;

    --muted: #94a3b8;

    --accent: #229ED9;

    --border: rgba(255,255,255,0.08);

}



* {
    box-sizing: border-box;
}

html {
    scroll-behavior:smooth;
}



body {

    margin:0;

    background:var(--bg);

    color:var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:1.6;

}



a {

    color:inherit;

    text-decoration:none;

}



.container {

    width:min(680px,92%);

    margin:auto;

}



/*
|--------------------------------------------------------------------------
| Header TeleBLOG
|--------------------------------------------------------------------------
*/


.hero {

    text-align:center;

    padding:55px 0 35px;

}


.logo {

    font-size:38px;

    margin-bottom:10px;

}



.hero h1 {

    margin:0;

    font-size:40px;

    letter-spacing:-1px;

}



.hero p {

    color:var(--muted);

    font-size:17px;

}



/*
|--------------------------------------------------------------------------
| Feed
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Feed microblog personnel
|--------------------------------------------------------------------------
*/


.feed {

    display:flex;

    flex-direction:column;

    gap:18px;

}



.post-card {

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:20px 22px;

}



.post-date {

    color:var(--muted);
    margin-bottom: 10px;


}



.post-text {

    font-size:18px;

    line-height:1.55;

    color:var(--text);

}


/*
|--------------------------------------------------------------------------
| Post header
|--------------------------------------------------------------------------
*/


.post-meta {

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}



.avatar {

    width:44px;

    height:44px;

    border-radius:50%;

    background:#24324a;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:18px;

}



.author {

    font-weight:600;

    font-size:16px;

}



.date {

    color:var(--muted);

}



/*
|--------------------------------------------------------------------------
| Contenu du post
|--------------------------------------------------------------------------
*/


.post-text {

    font-size:18px;

    line-height:1.65;

    color:var(--text);

}



/*
|--------------------------------------------------------------------------
| Anciennes pages article
|--------------------------------------------------------------------------
*/


.article-page {

    padding-top:40px;

}



.article-content {

    background:var(--card);

    border-radius:22px;

    padding:35px;

    border:1px solid var(--border);

}



/*
|--------------------------------------------------------------------------
| Empty state
|--------------------------------------------------------------------------
*/


.empty {

    text-align:center;

    background:var(--card);

    padding:35px;

    border-radius:20px;

    color:var(--muted);

}



.empty code {

    display:inline-block;

    padding:15px;

    border-radius:12px;

    background:#020617;

}

.post-image{

    width:100%;

    display:block;

    border-radius:18px;

    margin-bottom:15px;

    border:1px solid rgba(255,255,255,.08);

}

.post-video {

    width:100%;
    border-radius:18px;
    margin-bottom:15px;

}

/*
|--------------------------------------------------------------------------
| Articles épinglés 
|--------------------------------------------------------------------------
*/

.pinned {

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:18px 20px;

    margin-bottom:20px;

}


.pinned h3 {

    margin:0 0 12px;

    font-size:16px;

}


.pinned a {

    display:block;

    padding:6px 0;

    color:var(--accent);

}



/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/


footer {

    text-align:center;

    color:var(--muted);

    padding:50px 0;

    font-size:14px;

}



/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/


@media(max-width:600px){


    .container {

        width:94%;

    }


    .hero {

        padding-top:35px;

    }


    .hero h1 {

        font-size:32px;

    }


    .post-card {

        padding:18px;

        border-radius:16px;

    }


    .post-text {

        font-size:17px;

    }

}