/* =========================
   BASE GLOBALE
========================= */

body{
margin:0;
font-family:Arial, sans-serif;
background:#121212;
color:white;
}

.container{
padding:20px;
min-height:80vh;
}

h4{ color:blueviolet; }
/* =========================
   LINKS GLOBAL
========================= */

a{
color:white;
text-decoration:none;
}

/* =========================
   BOX LOGIN / REGISTER
========================= */

.form-box{
max-width:380px;
margin:40px auto;
background:#1e1e1e;
padding:25px;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.5);
text-align:center;
}

.form-box input{
width:100%;
padding:12px;
margin:10px 0;
border-radius:6px;
border:none;
outline:none;
}

.form-box button{
width:100%;
padding:12px;
margin-top:10px;
border:none;
border-radius:6px;
background:#1db954;
color:black;
font-weight:bold;
cursor:pointer;
}

.form-box button:hover{
background:#17a74a;
}

/* =========================
   NAVBAR
========================= */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;

padding:12px 25px;
background:#1c1c1c;
border-bottom:1px solid #333;
}

.nav-logo{
font-weight:bold;
color:#1db954;
font-size:18px;
}

.nav-links{
display:flex;
gap:10px;
align-items:center;
}

.nav-links a{
padding:6px 10px;
border-radius:6px;
transition:.2s;
}

.nav-links a:hover{
background:#1db954;
color:black;
}

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

.site-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 20px;
background:#1b1b1b;
border-bottom:1px solid #333;
flex-wrap:wrap;
}

/* LOGO */
.logo-img{
max-height:50px;
}

/* WELCOME */
.welcome-box{
display:flex;
align-items:center;
gap:12px;
}

.welcome-text{
font-size:13px;
color:#aaa;
}

/* AVATAR HEADER */
.avatar-header{
width:50px;
height:50px;
border-radius:50%;
object-fit:cover;
border:2px solid #1db954;
}

/* =========================
   SOCIAL ICONS HEADER
========================= */

#social-networks{
display:flex;
gap:12px;
align-items:center;
justify-content:flex-end;
list-style:none;
padding:0;
margin:0;
}

#social-networks li{
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

#social-networks a{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:22px;
transition:.3s;
}

/* HOVER SCALE */
#social-networks a:hover{
transform:scale(1.15);
}

/* =========================
   COLORS ICONS
========================= */

.youtube{color:#ff0000;filter:drop-shadow(0 0 5px #ff0000);}
.twitter{color:#1da1f2;filter:drop-shadow(0 0 5px #1da1f2);}
.github{color:#f3cbb1;filter:drop-shadow(0 0 5px #f3cbb1);}
.linkedin{color:#0077b5;filter:drop-shadow(0 0 5px #0077b5);}
.bell{color:#ff9800;filter:drop-shadow(0 0 5px #ff9800);}
.envelope{color:silver;filter:drop-shadow(0 0 5px silver);position:relative;}

/* =========================
   CIRCLE HOVER EFFECT
========================= */

.youtube:hover{box-shadow:0 0 0 8px #ff0000;}
.twitter:hover{box-shadow:0 0 0 8px #1da1f2;}
.github:hover{box-shadow:0 0 0 8px #f3cbb1;}
.linkedin:hover{box-shadow:0 0 0 8px #0077b5;}
.bell:hover{box-shadow:0 0 0 8px #ff9800;}
.envelope:hover{box-shadow:0 0 0 8px silver;}

/* =========================
   MESSAGE BADGE
========================= */

.msg-badge{
position:absolute;
top:-6px;
right:-6px;

background:#e74c3c;
color:white;

font-size:11px;
font-weight:bold;

min-width:18px;
height:18px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;
border:2px solid #111;
}

/* =========================
   FOOTER
========================= */

.footer{
background:#1c1c1c;
padding:25px;
border-top:1px solid #333;
margin-top:40px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.footer-bottom{
text-align:center;
margin-top:20px;
color:#aaa;
}

/* =========================
   ADMIN / CARDS
========================= */

.dashboard-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:20px;
}

.card{
background:#1e1e1e;
padding:20px;
border-radius:12px;
text-align:center;
transition:.2s;
}

.card:hover{
transform:translateY(-5px);
background:#343f60;
color:black;
}

/* =========================
   FORMULAIRE PROFIL
========================= */
form{
    max-width:700px;
    margin:auto;
}

.box{
    background:#1b1b1b;
    padding:12px;
    margin-bottom:10px;
    border-radius:10px;
}

input, select, textarea{
    width:100%;
    padding:10px;
    margin-top:5px;
    border:none;
    border-radius:6px;
    background:#222;
    color:white;
}


/* =========================
   PROFIL USER MODERNE
========================= */

.profile-container{
max-width:900px;
margin:30px auto;
display:grid;
gap:20px;
}

/* CARD PRINCIPALE */
.profile-card{
background:#1e1e1e;
padding:25px;
border-radius:15px;
text-align:center;
box-shadow:0 0 15px rgba(0,0,0,0.5);
}

.profile-avatar{
width:110px;
height:110px;
border-radius:50%;
object-fit:cover;
border:3px solid #1db954;
margin-bottom:10px;
}

/* ONLINE POINT */
.online-dot{
    width:10px;
    height:10px;
    background:#00ff5a;
    border-radius:50%;
    position:absolute;
    top:12px;
    right:12px;
    box-shadow:0 0 6px #00ff5a;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.3); opacity:.6; }
    100%{ transform:scale(1); opacity:1; }
}

.status{
    font-size:11px;
    margin-top:5px;
    display:block;
}

.online{background: #068306; color:#11037a; }
.offline{background: #5c1229; color:#870931; }

/* ROLE */
.role{
  background: #4ba317;
  color:#301520;
  font-weight:bold;
}

/* BIO */
.bio{
color:#aaa;
margin-top:10px;
}

/* BOX INFOS */
.profile-box{
background:#1b1b1b;
padding:20px;
border-radius:12px;
border:1px solid #333;
}

/* ACTIONS */
.profile-actions{
display:flex;
gap:10px;
justify-content:center;
}

.btn{
padding:10px 15px;
border-radius:8px;
background:#1db954;
color:black;
font-weight:bold;
text-decoration:none;
transition:.2s;
}

.btn:hover{
transform:scale(1.05);
}

.btn.danger{
background:#e74c3c;
color:white;
}

/* SEARCH */
.search-box{
    text-align:center;
    padding:20px;
}

.search-box input{
    width:60%;
    padding:10px;
    border-radius:8px;
    border:none;
    outline:none;
}
/*=====================
    page liste users  
=====================*/
/* GRID */
.user-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
    padding:20px;
}

@media(max-width:1200px){
    .user-grid{ grid-template-columns:repeat(4,1fr); }
}

@media(max-width:900px){
    .user-grid{ grid-template-columns:repeat(3,1fr); }
}

@media(max-width:600px){
    .user-grid{ grid-template-columns:repeat(2,1fr); }
}

/* CARD */
.user-card{
    background:#1c1c1c;
    border-radius:12px;
    padding:15px;
    text-align:center;
    cursor:pointer;
    transition:.2s;
    position:relative;
    text-decoration:none;
    color:white;
}

.user-card:hover{
    transform:scale(1.05);
    background:#1db954;
    color:black;
}

/* AVATAR */
.avatar{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #1db954;
}

/* ONLINE POINT */
.online-dot{
    width:12px;
    height:12px;
    background:#00ff5a;
    border-radius:50%;
    position:absolute;
    top:10px;
    right:10px;
    box-shadow:0 0 8px #00ff5a;
}

/* PSEUDO */
.pseudo{
    margin-top:10px;
    font-weight:bold;
}

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

.friend-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}

.friend{
    background:#1c1c1c;
    padding:8px 12px;
    border-radius:20px;
    color:white;
    text-decoration:none;
    border:1px solid #333;
    transition:.2s;
}

.friend:hover{
    background:#1db954;
    color:black;
}
.tcenter{text-align:center}.tright{text-align:right}

/*=====================
 Les bouton et bare  
=====================*/

.chat-form button{
    background:#1db954;
    color:#000;
    border:none;
    border-radius:10px;
    padding:12px 20px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:all .3s ease;
    min-width:140px;
    box-shadow:0 0 10px rgba(29,185,84,.4);
}

.chat-form button:hover{
    background:#23d160;
    transform:translateY(-2px);
    box-shadow:0 0 15px rgba(29,185,84,.8);
}

.chat-form button:active{
    transform:scale(.95);
}

/**/
.send-btn{
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#1db954;
    color:black;
    font-size:22px;
    cursor:pointer;
    transition:.3s;
}

.send-btn:hover{
    transform:scale(1.1);
    box-shadow:0 0 15px #1db954;
}
/* Bouton retour */
.back{
    display:inline-block;
    margin:10px 0;
    padding:8px 12px;
    background:#1c1c1c;
    color:white;
    border-radius:8px;
    text-decoration:none;
}
.back:hover{
    background:#1db954;
    color:black;
}

/* hr: ligne couleur */
.hr-blue {
    border: 0;
    height: 1px;
    background: #4da3ff;
    margin: 10px 0;
}

.hr-orange {
    border: 0;
    height: 1px;
    background: #d97916;
    margin: 10px 0;
}
.hr-green {
    border: 0;
    height: 1px;
    background: #3c971f;
    margin: 10px 0;
}
.hr-yellow {
    border: 0;
    height: 1px;
    background: #d9ca16;
    margin: 10px 0;
}
.hr-red {
    border: 0;
    height: 1px;
    background: #ff4d4d;
    margin: 10px 0;
}
hr.small{border-style:dashed;width:50%}
/* =========================
   PAGE : / ACCEUIL
========================= */
/* === Main : section + aside === */

 main{margin:auto;max-width:1440px}
 section{padding-top:25px}
 section h2,section h3,section h4,section p{
    padding-left:16px;padding-right:16px}
 section h2,section h3,section h4
 {text-align:center}section h2
 {color:#4d7cd2;padding-bottom:32px}section h3
 {color:#3576dced;padding-bottom:20px;padding-top:10px}
 section h4
 {color:#549d6e}
 section a{color:#8118c1}
 section a:hover{color:#dfc9eb;text-decoration:underline}
 section img{border:3px solid #4f4c63;margin-bottom:16px;margin-top:16px}
 section img.profile{border-radius:50%}
 section ul{margin-left:16px}
 section details{background-color:#393747;border-radius:0 0 15% 15%;margin:16px;padding:8px}
 section details.no-around{border-radius:0}
 section summary{color:#fff}
 section div.center-table{display:flex;justify-content:center}
 section table{align-self:center;overflow:auto}
 section table th{color:#8abff1;font-weight:400;text-align:center}
 section table td{border:1px solid #484755;padding:8px}
 section table tr.disabled{background-color:#000;cursor:not-allowed;opacity:.25}.content-history{display:block;list-style-type:none;margin:16px;padding:0}.content-history li{border-bottom:2px solid #484755;list-style:none}.content-history li:last-child{border-bottom:none}.content-history a:hover{text-decoration:none}.edito-block{background-color:#3e3e4d;border-radius:16px;font-size:1rem;margin-left:16px;margin-right:16px;padding:16px}.breadcrumb{border-bottom:2px solid #444;margin-bottom:32px}.article-views{color:#cd88f3;text-align:center}


main aside {
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
}

main aside .tcenter {
  text-align: center;
  margin-top: 10px;
  padding: 10px;
  background: #333;
  border-radius: 6px;
}

aside{
  margin-bottom:32px;
  margin-top:24px
}

aside h2{
  background-color:#13233c;
  border-top:2px solid #198754;
  color: #00D6D6;
  border-radius:0 0 25% 25%;
  font-variant:small-caps;
  text-align:center
}

aside p{
  text-align:center;padding:8px
}