/* 
██████╗ ██╗   ██╗██╗      █████╗ ███╗   ██╗   ██████╗ ███████╗██╗   ██╗
██╔══██╗╚██╗ ██╔╝██║     ██╔══██╗████╗  ██║   ██╔══██╗██╔════╝██║   ██║
██║  ██║ ╚████╔╝ ██║     ███████║██╔██╗ ██║   ██║  ██║█████╗  ██║   ██║
██║  ██║  ╚██╔╝  ██║     ██╔══██║██║╚██╗██║   ██║  ██║██╔══╝  ╚██╗ ██╔╝
██████╔╝   ██║   ███████╗██║  ██║██║ ╚████║██╗██████╔╝███████╗ ╚████╔╝ 
╚═════╝    ╚═╝   ╚══════╝╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝╚═════╝ ╚══════╝  ╚═══╝                                                                                                                                                                                     
Système développer par dylanpointdev.fr | © DylanPointDev tout droit réservé. 
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face{
	font-family: 'Lexend Variable';
	src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'Staroff Demo';
	src: url('../fonts/StaroffDemoRegular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Styles personnalisés pour le thème dark */
:root {
	--bg:#0b0b0c;
	--card:#111214;
	--muted:#9aa0a6;
	--primary:#250152;
}

* {
	font-family: 'Montserrat', sans-serif !important;
}

html,body{
	height:100%;
 	background:var(--bg);
 	color:#e9eef2;
}

.banner{
	height:220px;
	background-image: url('../img/banner.png');
	background-size:cover;
	background-position:center;
	filter:saturate(.9) brightness(.5);
	position:relative;
	z-index:0;
	overflow:visible;
}

.banner-live{
	background-image:none;
	overflow:hidden;
}
.banner-live video{
	filter:saturate(.9) brightness(.5);
}

.profile-container{
	max-width:720px;
	margin-top:-70px;
	padding-bottom:40px;
	position:relative;
	z-index:1;
}

.avatar-wrapper{
	width:120px;
	height:120px;
	border-radius:999px;
	background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
	box-shadow:0 6px 20px rgba(0,0,0,0.6);
	margin-top:-90px;
	position:relative;
	z-index:1;
}

.avatar{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:999px;
	/* border:3px solid rgba(0,0,0,0.6); */
	position:relative;
	z-index:3;
}

@media (max-width:576px){
	.avatar-wrapper::after{ width:140px; height:28px; bottom:-8px; filter: blur(5px); }
}

.badges {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.badges .badge{
	background: rgba(255,255,255,0.02);
	padding:8px 12px;
	border:1px solid rgba(255,255,255,0.04);
	color:#f4ecec;
}

.badge img{
	width:16px;
	height:16px;
	object-fit:contain;
	border-radius: 10px;
}

.links-list .list-group-item{
	background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
	border: 1px solid rgba(255,255,255,0.03);
	margin-bottom:10px;
	border-radius:8px;
}

.links-list .link-icon{
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	color:#fff;
	border-radius:8px;
}

.links-list .list-group-item:hover{
	transform:translateY(-2px);
	transition:all .12s ease;
	box-shadow:0 6px 20px rgba(0,0,0,0.6);
}

.bg-link {
    background-image: url('../img/banner.png');
	background-size: cover;
    background-position: -25px;
}

.footer a{
	color:var(--muted);
	text-decoration:none;
}

@media (max-width:576px){
	.profile-container{ padding: 0 12px; margin-top:-40px }
	.banner{height:140px}
}

/* petits ajustements visuels */
.h1, h1{
	font-size:1.6rem; 
	letter-spacing:0.2px
}
.text-muted{
	color:var(--muted) !important
}

/* Live badge shown when streamer is live */

/* small badge overlay on avatar */
.avatar-wrapper{ 
	position:relative; 
}
.avatar-live-badge{
	position:absolute;
	right:-6px;
	bottom:-6px;
	background:#ff2e5a;
	color:#fff;
	padding:4px 8px;
	border-radius:999px;
	font-size:0.7rem;
	font-weight:700;
	display:flex;
	align-items:center;
	gap:6px;
	box-shadow:0 6px 18px rgba(0,0,0,0.4);
	z-index:5;
}
.avatar-live-badge .dot{ 
	width:8px; 
	height:8px; 
	background:#fff; 
	border-radius:50%; 
}

/* animation/transition for avatar badge */
.avatar-live-badge{
	opacity:0;
	transform:translateY(6px) scale(0.96);
	transition:transform 260ms cubic-bezier(.2,.9,.3,1), opacity 260ms ease;
}
.avatar-live-badge.show{
	opacity:1;
	transform:translateY(0) scale(1);
}

@keyframes avatarDotPulse {
	0%{ transform:scale(1); opacity:1 }
	50%{ transform:scale(1.2); opacity:0.85 }
	100%{ transform:scale(1); opacity:1 }
}
.avatar-live-badge .dot{ animation: avatarDotPulse 1.2s infinite ease-in-out; }