/* =========================
  KOMET-4 BLOG TERMINAL
========================= */


:root{
   --Noir :#121519;
   --panel:#162b47;
   --panel-2:#0b111c;
   --white:#fff;
   --green:#97ed27;
   --green-soft:#abeba5;
   --cyan:#6ee7ff;
   --violet:#9b6dff;
   --text:#d7fff0;
   --muted:#7a8f89;
   --danger:#ff4f8b;
   --border:#fff;
   --glow:0 0 18px rgba(0,255,153,0.35);
}


/* LAYOUT */


.blog-layout{
   display:flex;
   width:100%;
   height:100vh;
   position:relative;
}


/* SIDEBAR */


.post-list{
   width:340px;
   padding:14px;
   overflow-y:auto;
   background:var(--Noir);
   border-right:1px solid var(--border);
   z-index:2;
}


/* TITRE SIDEBAR */


.post-list::before{
   content:"KOMET-4 // ARCHIVES";
   display:block;
   color:var(--white);
   font-size:13px;
   letter-spacing:2px;
   margin-bottom:14px;
   padding:10px;
}


/* SCROLLBAR */


.post-list::-webkit-scrollbar,
.post-content::-webkit-scrollbar{
   width:8px;
}


.post-list::-webkit-scrollbar-track,
.post-content::-webkit-scrollbar-track{
   background:#020308;
}


.post-list::-webkit-scrollbar-thumb,
.post-content::-webkit-scrollbar-thumb{
   background:linear-gradient(var(--green), var(--cyan));
}


/* ARTICLES */


.post{
   width:100%;
   padding:14px;
   margin-bottom:12px;
   text-align:left;
   cursor:pointer;
   color:var(--text);
   background:
       linear-gradient(135deg, rgba(0,255,153,0.06), rgba(155,109,255,0.05)),
       var(--panel);
   border:1px solid rgba(110,231,255,0.18);
   transition:0.2s ease;
   display:flex;
   flex-direction:column;
   gap:5px;
   position:relative;
}


.post::before{
   content:"";
   position:absolute;
   left:0;
   top:0;
   bottom:0;
   width:3px;
   background:var(--muted);
}


.post:hover{
   transform:translateX(4px);
   border-color:var(--white);
   box-shadow:
       0 0 18px rgba(0,255,153,0.22),
       inset 0 0 20px rgba(0,255,153,0.04);
}


.post:hover::before{
   background:var(--white);
   box-shadow:0 0 10px var(--white);
}


.post.active{
   background:
       linear-gradient(135deg, rgba(0,255,153,0.18), rgba(155,109,255,0.12)),
       #07130f;
   border-color:var(--white);
   box-shadow:
       0 0 22px rgba(0,255,153,0.35),
       inset 0 0 18px rgba(0,255,153,0.12);
}


.post.active::before{
   background:var(--white);
   box-shadow:0 0 14px var(--green);
}


.post-date{
   font-size:11px;
   color:var(--cyan);
   opacity:0.75;
   letter-spacing:1.5px;
}


.post-title{
   font-size:15px;
   color:var(--white);
   text-transform:uppercase;
   letter-spacing:1px;
}


.post-tag{
   font-size:10px;
   color:var(--noir);
   background:var(--green-soft);
   padding:3px 7px;
   width:fit-content;
   margin-top:5px;
   letter-spacing:1px;
}


/* CONTENU */


.post-content{
   flex:1;
   padding:42px;
   overflow-y:auto;
   position:relative;
   z-index:2;
   background:
       linear-gradient(90deg, rgba(2,3,8,0.25), rgba(2,3,8,0.82));
}


/* HEADER ARTICLE */


#post-title{
   font-size:38px;
   margin-bottom:10px;
   color:var(--white);
   text-transform:uppercase;
   letter-spacing:3px;
}


#post-title::before{
   content:"> ";
   color:var(--green);
}


#post-date{
   display:inline-block;
   font-size:13px;
   color:var(--violet);
   opacity:0.9;
   margin-bottom:30px;
   letter-spacing:2px;
   border:1px solid rgba(155,109,255,0.45);
   padding:6px 10px;
   background:rgba(155,109,255,0.08);
}


/* CORPS ARTICLE */


#post-body{
   max-width:900px;
   line-height:1.8;
   font-size:16px;
   color:var(--text);
   padding:26px;
   background:rgba(7,11,18,0.62);
   border:1px solid rgba(0,255,153,0.18);
   box-shadow:
       0 0 30px rgba(0,0,0,0.35),
       inset 0 0 30px rgba(0,255,153,0.03);
}


#post-body p{
   margin-bottom:20px;
}


#post-body strong{
   color:var(--green);
}


#post-body em{
   color:var(--cyan);
}


/* CURSEUR */


#post-body::after{
   content:"█";
   color:var(--green);
   animation:blink 1s infinite;
   margin-left:4px;
}


@keyframes blink{
   0%,100%{opacity:1;}
   50%{opacity:0;}
}


/* TEXTE CORROMPU OPTIONNEL */


.corrupt{
   color:var(--danger);
   text-shadow:0 0 8px rgba(255,79,139,0.7);
   animation:glitch 0.8s infinite;
}


@keyframes glitch{
   0%{transform:translate(0);}
   25%{transform:translate(1px,-1px);}
   50%{transform:translate(-1px,1px);}
   75%{transform:translate(1px,1px);}
   100%{transform:translate(0);}
}


/* RESPONSIVE */


@media(max-width:900px){


   body{
       overflow:auto;
   }


   .blog-layout{
       flex-direction:column;
       height:auto;
       min-height:100vh;
   }


   .post-list{
       width:100%;
       max-height:260px;
       border-right:none;
       border-bottom:1px solid var(--border);
   }


   .post-content{
       padding:24px;
   }


   #post-title{
       font-size:26px;
   }


   #post-body{
       padding:18px;
       font-size:15px;
   }
}