@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&display=swap');
:root{
  --bg:#000000;
  --text:#fafafa;
  --text-dim:#e5e5ea;
  --muted:#6d6d78;
  --muted-2:#4a4a55;
  --accent:#7c3aed;
  --accent-2:#a855f7;
  --accent-3:#5b21b6;
  --discord:#5865F2;
  --youtube:#FF0000;
  --minecraft:#4CAF50;
  --roblox:#E2231A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
/* ============================================================ */
/* EMPÊCHE LA SÉLECTION DE TEXTE (copier uniquement via boutons)*/
/* ============================================================ */
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* Autorise la sélection uniquement dans les champs de saisie */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}
/* ============================================================ */
/* CURSEUR PREMIUM — DOT + RING (discret)                       */
/* ============================================================ */
body,
a, button, .link-btn, .mini-discord-btn, .intro-btn, .ctrl-btn,
.play-btn, .progress-track, .intro-screen, .volume-btn, .lang-btn,
.theme-toggle, .volume-slider {
  cursor: none;
}
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
  transition: width 0.15s ease, height 0.15s ease, background-color 0.15s ease;
  will-change: top, left;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
  will-change: top, left;
}
/* Hover : ring légèrement plus grand + violet subtil */
body.cursor-hover .cursor-ring {
  width: 16px; height: 16px;
  border-color: rgba(168, 85, 247, 0.8);
  background-color: rgba(168, 85, 247, 0.06);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}
body.cursor-hover .cursor-dot {
  width: 3px; height: 3px;
  background-color: #a855f7;
}
/* Click : ring rétrécit + devient blanc */
body.cursor-click .cursor-ring {
  width: 6px; height: 6px;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
body.cursor-click .cursor-dot {
  width: 3px; height: 3px;
  background-color: #ffffff;
}
@media (max-width: 720px) {
  .cursor-dot, .cursor-ring { display: none; }
  body, a, button, .link-btn, .mini-discord-btn, .intro-btn,
  .ctrl-btn, .play-btn, .progress-track, .intro-screen,
  .volume-btn, .lang-btn, .theme-toggle, .volume-slider {
    cursor: auto;
  }
}
/* ============================================================ */
/* PRELOADER                                                    */
/* ============================================================ */
.preloader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 45%, rgba(88,28,135,0.35), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(76,29,149,0.25), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(124,58,237,0.2), transparent 50%),
    #000000;
  transition:opacity 0.8s ease, visibility 0.8s ease;
}
.preloader.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.preloader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  width:280px;
}
.preloader-logo-wrap{
  position:relative;
  width:140px;
  height:140px;
  display:grid;
  place-items:center;
}
.preloader-logo{
  grid-area: 1 / 1;
  position:relative;
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg, #a855f7, #7c3aed);
  display:grid;
  place-items:center;
  font-size:30px;
  font-weight:900;
  color:#ffffff;
  box-shadow:
    0 0 30px rgba(168,85,247,0.6),
    0 0 60px rgba(124,58,237,0.4),
    inset 0 0 20px rgba(255,255,255,0.15);
  animation:preloaderLogoPulse 2.2s ease-in-out infinite;
  z-index:2;
}
@keyframes preloaderLogoPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 30px rgba(168,85,247,0.6), 0 0 60px rgba(124,58,237,0.4), inset 0 0 20px rgba(255,255,255,0.15); }
  50%    { transform:scale(1.06); box-shadow:0 0 45px rgba(168,85,247,0.9), 0 0 90px rgba(124,58,237,0.6), inset 0 0 25px rgba(255,255,255,0.25); }
}
.preloader-ring{
  grid-area: 1 / 1;
  position:relative;
  width:90px;
  height:90px;
  border:1.5px solid rgba(168,85,247,0.35);
  border-top-color:transparent;
  border-right-color:transparent;
  border-radius:50%;
  margin:auto;
  animation:preloaderSpin 1.6s linear infinite;
  z-index:1;
}
.preloader-ring-2{
  width:120px;
  height:120px;
  border-color:rgba(139,92,246,0.25);
  border-bottom-color:transparent;
  border-left-color:transparent;
  animation-duration:2.4s;
  animation-direction:reverse;
}
@keyframes preloaderSpin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
.preloader-bar{
  width:100%;
  height:3px;
  background:rgba(255,255,255,0.08);
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 20px rgba(124,58,237,0.3);
}
.preloader-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #5b21b6, #7c3aed, #a855f7);
  border-radius:2px;
  box-shadow:0 0 15px rgba(168,85,247,0.9);
  transition:width 0.3s ease;
}
.preloader-text{
  color:rgba(168,85,247,0.75);
  font-size:11px;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  margin:0;
  animation:preloaderTextFade 1.8s ease-in-out infinite;
}
@keyframes preloaderTextFade{
  0%,100%{ opacity:0.5; }
  50%    { opacity:1; }
}
body.light-theme .preloader{
  background:
    radial-gradient(circle at 50% 45%, rgba(196,181,253,0.5), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(168,85,247,0.3), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(124,58,237,0.25), transparent 50%),
    #f5f3ff;
}
body.light-theme .preloader-bar{ background:rgba(124,58,237,0.12); }
body.light-theme .preloader-text{ color:rgba(124,58,237,0.8); }
/* ============================================================ */
/* FOND — aurores + étoiles                                     */
/* ============================================================ */
body{
  background:#000;
  color:var(--text);
  font:15px Outfit, system-ui, sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 20%, rgba(168, 85, 247, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(91, 33, 182, 0.14), transparent 60%),
    radial-gradient(ellipse 30% 30% at 90% 70%, rgba(139, 92, 246, 0.1), transparent 60%);
  z-index:0;
  pointer-events:none;
  animation:auroraMove 20s ease-in-out infinite alternate;
  filter:blur(40px);
}
@keyframes auroraMove{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(3%, -2%) scale(1.08); }
  100% { transform: translate(-2%, 3%) scale(1.05); }
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='50' cy='80' r='0.8' fill-opacity='0.5'/%3E%3Ccircle cx='200' cy='150' r='1' fill-opacity='0.7'/%3E%3Ccircle cx='350' cy='60' r='0.6' fill-opacity='0.4'/%3E%3Ccircle cx='500' cy='220' r='1.2' fill-opacity='0.6'/%3E%3Ccircle cx='680' cy='130' r='0.9' fill-opacity='0.5'/%3E%3Ccircle cx='120' cy='400' r='0.7' fill-opacity='0.4'/%3E%3Ccircle cx='320' cy='480' r='1.1' fill-opacity='0.6'/%3E%3Ccircle cx='560' cy='420' r='0.8' fill-opacity='0.5'/%3E%3Ccircle cx='720' cy='560' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='180' cy='680' r='0.9' fill-opacity='0.5'/%3E%3Ccircle cx='440' cy='720' r='0.7' fill-opacity='0.4'/%3E%3Ccircle cx='620' cy='700' r='1.1' fill-opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
  z-index:0;
  pointer-events:none;
  animation:twinkle 8s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes twinkle{
  0%   { opacity:0.5; }
  100% { opacity:1; }
}
/* ============================================================ */
/* INTRO SCREEN                                                 */
/* ============================================================ */
.intro-screen{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.9s ease, transform 0.9s ease;
  overflow:hidden;
  background:#000000;
}
.intro-screen.intro-hidden{
  opacity:0;
  transform:scale(1.06);
  pointer-events:none;
}
.intro-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(88, 28, 135, 0.25), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(76, 29, 149, 0.18), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.15), transparent 50%),
    #000000;
  animation:introBgPulse 6s ease-in-out infinite;
}
@keyframes introBgPulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.25);}
}
.intro-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.intro-particles span{
  position:absolute;
  width:3px;
  height:3px;
  background:#a855f7;
  border-radius:50%;
  box-shadow:0 0 10px #a855f7, 0 0 20px #7c3aed;
  bottom:-10px;
  animation:floatUp linear infinite;
  opacity:0;
}
.intro-particles span:nth-child(1){left:5%; animation-duration:10s; animation-delay:0s;}
.intro-particles span:nth-child(2){left:15%; animation-duration:12s; animation-delay:1s;}
.intro-particles span:nth-child(3){left:25%; animation-duration:9s; animation-delay:2s;}
.intro-particles span:nth-child(4){left:35%; animation-duration:13s; animation-delay:0.5s;}
.intro-particles span:nth-child(5){left:45%; animation-duration:11s; animation-delay:3s;}
.intro-particles span:nth-child(6){left:55%; animation-duration:14s; animation-delay:1.5s;}
.intro-particles span:nth-child(7){left:65%; animation-duration:10.5s; animation-delay:2.5s;}
.intro-particles span:nth-child(8){left:75%; animation-duration:12.5s; animation-delay:0.8s;}
.intro-particles span:nth-child(9){left:85%; animation-duration:9.5s; animation-delay:3.5s;}
.intro-particles span:nth-child(10){left:95%; animation-duration:11.5s; animation-delay:1.2s;}
.intro-particles span:nth-child(11){left:10%; animation-duration:15s; animation-delay:4s;}
.intro-particles span:nth-child(12){left:30%; animation-duration:13s; animation-delay:5s;}
.intro-particles span:nth-child(13){left:50%; animation-duration:11s; animation-delay:2.2s;}
.intro-particles span:nth-child(14){left:70%; animation-duration:14s; animation-delay:4.5s;}
.intro-particles span:nth-child(15){left:90%; animation-duration:12s; animation-delay:3.8s;}
@keyframes floatUp{
  0%{transform:translateY(0) scale(1); opacity:0;}
  10%{opacity:0.9;}
  90%{opacity:0.9;}
  100%{transform:translateY(-110vh) scale(0.3); opacity:0;}
}
.intro-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:20px;
  animation:introFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes introFadeIn{
  from{opacity:0; transform:translateY(40px);}
  to{opacity:1; transform:translateY(0);}
}
.intro-avatar{
  position:relative;
  width:140px;
  height:140px;
  margin-bottom:14px;
}
.intro-avatar img{
  position:relative;
  width:140px;
  height:140px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(168, 85, 247, 0.5);
  z-index:2;
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.4),
    0 0 80px rgba(88, 28, 135, 0.25),
    inset 0 0 20px rgba(168, 85, 247, 0.15);
  animation:avatarPulse 4s ease-in-out infinite;
}
@keyframes avatarPulse{
  0%,100%{box-shadow:0 0 40px rgba(124, 58, 237, 0.4), 0 0 80px rgba(88, 28, 135, 0.25), inset 0 0 20px rgba(168, 85, 247, 0.15);}
  50%{box-shadow:0 0 60px rgba(168, 85, 247, 0.6), 0 0 110px rgba(124, 58, 237, 0.4), inset 0 0 25px rgba(168, 85, 247, 0.25);}
}
.intro-ring{
  position:absolute;
  inset:-14px;
  border:1px solid rgba(168, 85, 247, 0.35);
  border-radius:50%;
  border-top-color:transparent;
  border-right-color:transparent;
  animation:ringSpin 4s linear infinite;
}
.intro-ring-2{
  inset:-26px;
  border-color:rgba(139, 92, 246, 0.3);
  border-bottom-color:transparent;
  border-left-color:transparent;
  animation:ringSpin 6s linear infinite reverse;
}
.intro-ring-3{
  inset:-38px;
  border-color:rgba(88, 28, 135, 0.35);
  border-top-color:transparent;
  border-left-color:transparent;
  animation:ringSpin 8s linear infinite;
}
@keyframes ringSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.intro-title{
  font-size:56px;
  font-weight:900;
  letter-spacing:-2.5px;
  background:linear-gradient(135deg, #ffffff 0%, #d8b4fe 40%, #a855f7 60%, #ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 30px rgba(168, 85, 247, 0.5));
}
@keyframes titleShine{
  to{background-position:200% center;}
}
.intro-subtitle{
  color:#a855f7;
  font-size:13px;
  font-weight:600;
  letter-spacing:6px;
  margin-bottom:28px;
  text-transform:uppercase;
  opacity:0.85;
  text-shadow:0 0 20px rgba(168, 85, 247, 0.6);
}
.intro-btn{
  position:relative;
  padding:18px 52px;
  border-radius:14px;
  border:1px solid rgba(168, 85, 247, 0.4);
  background:linear-gradient(180deg, rgba(24, 16, 40, 0.9) 0%, rgba(12, 8, 24, 0.95) 100%);
  color:#ffffff;
  font-size:14px;
  font-weight:700;
  font-family:inherit;
  letter-spacing:2.5px;
  text-transform:uppercase;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.1) inset,
    0 20px 50px rgba(0, 0, 0, 0.8),
    0 0 50px rgba(88, 28, 135, 0.35);
  animation:btnPulse 3s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(168, 85, 247, 0.1) inset, 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 50px rgba(88, 28, 135, 0.35);}
  50%{box-shadow:0 0 0 1px rgba(168, 85, 247, 0.15) inset, 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 80px rgba(124, 58, 237, 0.55);}
}
.intro-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  padding:1px;
  background:linear-gradient(135deg, rgba(168, 85, 247, 0.7), transparent 40%, transparent 60%, rgba(88, 28, 135, 0.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.intro-btn:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:rgba(168, 85, 247, 0.7);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.25) inset,
    0 25px 60px rgba(0, 0, 0, 0.9),
    0 0 80px rgba(124, 58, 237, 0.55);
}
.intro-btn-text{position:relative; z-index:2;}
.intro-btn-shine{
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation:shineSweep 4s ease-in-out infinite;
}
@keyframes shineSweep{
  0%{left:-100%;}
  50%{left:100%;}
  100%{left:100%;}
}
.intro-hint{
  color:rgba(168, 85, 247, 0.55);
  font-size:10px;
  letter-spacing:3px;
  margin-top:12px;
  text-transform:uppercase;
  animation:hintFade 3s ease-in-out infinite;
}
@keyframes hintFade{
  0%,100%{opacity:0.4;}
  50%{opacity:1;}
}
/* ============================================================ */
/* PROFILE PAGE                                                 */
/* ============================================================ */
.profile-page{
  width:100%;
  max-width:460px;
  position:relative;
  z-index:1;
  margin:0 auto;
  padding:40px 20px 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1.1s ease 0.3s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.profile-page.revealed{
  opacity:1;
  transform:translateY(0);
}
.profile-card{
  width:100%;
  background:linear-gradient(180deg, rgba(10, 8, 16, 0.75) 0%, rgba(6, 4, 12, 0.92) 100%);
  border:1px solid rgba(255, 255, 255, 0.05);
  border-radius:26px;
  padding:52px 32px 36px;
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 100px rgba(88, 28, 135, 0.15);
  text-align:center;
  position:relative;
}
.profile-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:26px;
  padding:1px;
  background:linear-gradient(135deg, rgba(168, 85, 247, 0.35), transparent 30%, transparent 70%, rgba(88, 28, 135, 0.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
/* ============================================================ */
/* TOP CONTROLS                                                 */
/* ============================================================ */
.top-controls{
  position:absolute;
  top:18px;
  left:18px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:4;
}
.theme-toggle{
  width:32px;
  height:32px;
  border-radius:9px;
  border:1px solid rgba(168,85,247,0.22);
  background:rgba(168,85,247,0.08);
  color:#d8b4fe;
  display:grid;
  place-items:center;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  padding:0;
}
.theme-toggle:hover{
  background:rgba(168,85,247,0.18);
  border-color:rgba(168,85,247,0.5);
  box-shadow:0 0 20px rgba(124,58,237,0.5);
  transform:translateY(-2px);
}
.theme-toggle svg{transition:transform 0.4s ease;}
.theme-toggle .icon-sun{display:none;}
.theme-toggle .icon-moon{display:block;}
body.light-theme .theme-toggle .icon-sun{display:block;}
body.light-theme .theme-toggle .icon-moon{display:none;}
.lang-switch{
  display:inline-flex;
  align-items:center;
  padding:3px;
  border-radius:9px;
  border:1px solid rgba(168,85,247,0.22);
  background:rgba(168,85,247,0.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  gap:2px;
}
.lang-btn{
  font-family:inherit;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  padding:5px 10px;
  border-radius:6px;
  border:none;
  background:transparent;
  color:rgba(168,85,247,0.6);
  transition:all 0.25s ease;
  text-transform:uppercase;
}
.lang-btn:hover{color:#d8b4fe;}
.lang-btn.active{
  background:rgba(168,85,247,0.25);
  color:#ffffff;
  box-shadow:0 0 15px rgba(124,58,237,0.4);
}
/* ============================================================ */
/* VISITS BADGE                                                 */
/* ============================================================ */
.visits-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
  font-size: 11px;
  font-weight: 600;
  color: #d8b4fe;
  letter-spacing: 0.4px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  z-index: 3;
}
.visits-badge:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 25px rgba(124, 58, 237, 0.5);
  transform: translateY(-2px);
}
.visits-icon {
  font-size: 11px;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.7));
}
.visits-count {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
}
.visits-label {
  color: rgba(168, 85, 247, 0.75);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
/* ============================================================ */
/* AVATAR                                                       */
/* ============================================================ */
.avatar-wrapper{position:relative; width:120px; height:120px; margin:0 auto 26px;}
.avatar-glow{
  position:absolute; inset:-16px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(168, 85, 247, 0.7), transparent, rgba(88, 28, 135, 0.7), transparent);
  filter:blur(20px); opacity:0.75;
  animation:rotate 8s linear infinite;
}
.avatar-ring{
  position:absolute; inset:-8px; border-radius:50%;
  border:1px solid rgba(168, 85, 247, 0.3);
  border-top-color:rgba(168, 85, 247, 0.9);
  border-right-color:transparent;
  animation:ringSpin 6s linear infinite;
  z-index:0;
}
@keyframes rotate{to{transform:rotate(360deg);}}
.avatar{
  position:relative;
  width:120px; height:120px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(168, 85, 247, 0.35);
  z-index:1;
  display:block;
  box-shadow:
    0 0 30px rgba(124, 58, 237, 0.3),
    inset 0 0 20px rgba(168, 85, 247, 0.1);
}
.status-dot{
  position:absolute; bottom:6px; right:6px;
  width:18px; height:18px;
  background:#4ade80; border-radius:50%;
  border:3px solid #030305;
  box-shadow:0 0 15px rgba(74, 222, 128, 0.9), 0 0 30px rgba(74, 222, 128, 0.5);
  z-index:2;
  animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
/* ============================================================ */
/* USERNAME — avec effet machine à écrire                       */
/* ============================================================ */
.username{
  font-size:32px; font-weight:800; letter-spacing:-1px; margin-bottom:8px;
  background:linear-gradient(135deg, #ffffff 0%, #e9d5ff 50%, #ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 25px rgba(168, 85, 247, 0.35));
}
.username,
.intro-title {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  border-right: 3px solid #a855f7;
  padding-right: 4px;
  animation:
    typingName 1.6s steps(6, end) 0.4s forwards,
    blinkCaret 0.8s step-end infinite,
    titleShine 6s linear infinite;
}
@keyframes typingName {
  from { max-width: 0; }
  to   { max-width: 12ch; }
}
@keyframes blinkCaret {
  0%, 100% { border-color: #a855f7; }
  50%      { border-color: transparent; }
}
.username.typed,
.intro-title.typed {
  animation:
    typingName 1.6s steps(6, end) 0.4s forwards,
    blinkCaret 0.8s step-end 3,
    titleShine 6s linear infinite,
    hideCaret 0.1s ease 2.6s forwards;
}
@keyframes hideCaret {
  to { border-color: transparent; }
}
body.light-theme .username{
  background:linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #4c1d95 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
}
body.light-theme .intro-title{
  background:linear-gradient(135deg, #4c1d95 0%, #7c3aed 40%, #a855f7 60%, #4c1d95 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
}
.handle{
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  margin-bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  letter-spacing:0.5px;
}
.mini-discord-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:6px;
  border:1px solid rgba(88, 101, 242, 0.35);
  background:rgba(88, 101, 242, 0.1);
  color:rgba(124, 133, 245, 0.9);
  padding:0;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.mini-discord-btn:hover{
  background:var(--discord);
  border-color:var(--discord);
  color:white;
  transform:scale(1.15);
  box-shadow:0 0 25px rgba(88, 101, 242, 0.8);
}
.mini-discord-btn.copied{
  background:#4ade80 !important;
  border-color:#4ade80 !important;
  color:#ffffff !important;
  box-shadow:0 0 25px rgba(74, 222, 128, 0.7) !important;
}
.bio{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  margin-bottom:34px;
  padding:0 10px;
  letter-spacing:0.2px;
}
/* ============================================================ */
/* LIENS                                                        */
/* ============================================================ */
.links{display:flex; flex-direction:column; gap:11px; margin-bottom:26px;}
.link-btn{
  display:flex; align-items:center; gap:14px;
  padding:15px 18px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%);
  border:1px solid rgba(255, 255, 255, 0.05);
  text-decoration:none; color:var(--text);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative; overflow:hidden;
}
.link-btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.08), transparent);
  transform:translateX(-100%); transition:transform 0.8s;
}
.link-btn:hover::before{transform:translateX(100%);}
.link-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color:rgba(255, 255, 255, 0.1);
}
.link-icon{
  width:42px;
  height:42px;
  border-radius:11px;
  display:grid;
  place-items:center;
  flex:none;
  background:rgba(255, 255, 255, 0.03);
  border:1px solid rgba(255, 255, 255, 0.05);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow:hidden;
  position:relative;
}
.link-text{flex:1; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:3px;}
.link-text strong{font-size:14px; font-weight:600; letter-spacing:0.3px;}
.link-text small{
  font-size:11.5px; color:var(--muted); font-weight:400;
  display:inline-flex; align-items:center; gap:5px;
  letter-spacing:0.2px;
}
.link-arrow{
  font-size:16px;
  color:var(--muted-2);
  transition:all 0.4s;
  font-weight:500;
  opacity:0.7;
}
.link-btn:hover .link-arrow{
  transform:translateX(4px);
  color:var(--text);
  opacity:1;
}
/* === DISCORD === */
.link-btn.discord:hover{
  border-color:rgba(88, 101, 242, 0.5);
  box-shadow: 0 12px 40px rgba(88, 101, 242, 0.2), 0 0 50px rgba(88, 101, 242, 0.12);
}
.link-btn.discord:hover .link-icon{
  background:var(--discord);
  border-color:var(--discord);
  color:white;
  box-shadow:0 0 30px rgba(88, 101, 242, 0.7);
  transform:scale(1.08);
}
/* === YOUTUBE === */
.link-btn.youtube:hover{
  border-color:rgba(255, 0, 0, 0.5);
  box-shadow: 0 12px 40px rgba(255, 0, 0, 0.18), 0 0 50px rgba(255, 0, 0, 0.1);
}
.link-btn.youtube:hover .link-icon{
  background:var(--youtube);
  border-color:var(--youtube);
  color:white;
  box-shadow:0 0 30px rgba(255, 0, 0, 0.6);
  transform:scale(1.08);
}
/* === MINECRAFT === */
.link-btn.minecraft .link-icon svg{
  display: block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.link-btn.minecraft:hover{
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 12px 40px rgba(76, 175, 80, 0.18), 0 0 50px rgba(76, 175, 80, 0.1);
}
.link-btn.minecraft:hover .link-icon{
  background: var(--minecraft);
  border-color: var(--minecraft);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(76, 175, 80, 0.7);
  transform: scale(1.08);
}
.link-btn.minecraft:hover .link-icon svg{
  transform: scale(1.1);
}
/* === ROBLOX === */
.link-btn.roblox:hover{
  border-color:rgba(226, 35, 26, 0.5);
  box-shadow: 0 12px 40px rgba(226, 35, 26, 0.18), 0 0 50px rgba(226, 35, 26, 0.1);
}
.link-btn.roblox:hover .link-icon{
  background:var(--roblox);
  border-color:var(--roblox);
  color:white;
  box-shadow:0 0 30px rgba(226, 35, 26, 0.7);
  transform:scale(1.08);
}
.link-btn.roblox .link-icon svg{
  width:22px;
  height:22px;
  display:block;
}
.footer-text{
  color:var(--muted-2);
  font-size:10.5px;
  opacity:0.6;
  margin-top:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
/* ============================================================ */
/* SPOTLIGHT EFFECT                                             */
/* ============================================================ */
[data-spotlight] { position: relative; overflow: hidden; }
[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(168, 85, 247, 0.2),
    rgba(124, 58, 237, 0.08) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
[data-spotlight]:hover::after { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 2; }
.link-btn.discord:hover::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(88, 101, 242, 0.3), rgba(88, 101, 242, 0.1) 30%, transparent 60%);
}
.link-btn.youtube:hover::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.08) 30%, transparent 60%);
}
.link-btn.minecraft:hover::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.08) 30%, transparent 60%);
}
.link-btn.roblox:hover::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(226, 35, 26, 0.25), rgba(226, 35, 26, 0.08) 30%, transparent 60%);
}
/* ============================================================ */
/* COPY MINI BUTTONS                                            */
/* ============================================================ */
.link-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.copy-mini {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
  display: grid;
  place-items: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  opacity: 0.55;
}
.copy-mini svg { display: block; width: 13px; height: 13px; }
.copy-mini:hover {
  opacity: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.copy-mini:active { transform: translateY(0) scale(0.94); }
.copy-mini.copied {
  opacity: 1;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.4);
}
.link-btn .copy-mini { opacity: 0; transform: translateX(4px); }
.link-btn:hover .copy-mini,
.copy-mini.copied { opacity: 0.85; transform: translateX(0); }
.link-btn:hover .copy-mini:hover { opacity: 1; }
/* ============================================================ */
/* DISCORD LIVE MEMBERS                                         */
/* ============================================================ */
.live-members {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.2px;
}
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5865F2;
  box-shadow: 0 0 10px rgba(88, 101, 242, 1);
  animation: livePulse 1.8s ease-in-out infinite;
  flex: none;
}
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}
/* ============================================================ */
/* LECTEUR VINYLE                                               */
/* ============================================================ */
.player-bar{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(120px);
  width:min(680px, calc(100% - 30px));
  display:flex;
  align-items:center;
  gap:20px;
  padding:16px 22px;
  background:linear-gradient(180deg, rgba(10, 8, 16, 0.88) 0%, rgba(4, 2, 8, 0.96) 100%);
  border:1px solid rgba(255, 255, 255, 0.06);
  border-radius:20px;
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 100px rgba(88, 28, 135, 0.18);
  z-index:50;
  opacity:0;
  transition:opacity 0.9s ease 0.7s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
}
.player-bar::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg, rgba(168, 85, 247, 0.3), transparent 40%, transparent 60%, rgba(88, 28, 135, 0.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.player-bar.revealed{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.vinyl-wrapper{flex:none; width:74px; height:74px; position:relative;}
.tonearm{
  position:absolute;
  top:-4px;
  right:-8px;
  width:3px;
  height:36px;
  background:linear-gradient(180deg, #a855f7 0%, #4c1d95 100%);
  border-radius:2px;
  transform-origin:top right;
  transform:rotate(-15deg);
  transition:transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:3;
  box-shadow:0 0 10px rgba(168, 85, 247, 0.6);
}
.tonearm::before{
  content:"";
  position:absolute;
  top:-4px;
  left:-3px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:radial-gradient(circle, #a855f7, #4c1d95);
  box-shadow:0 0 10px rgba(168, 85, 247, 0.8);
}
.player-bar:has(.vinyl.spinning) .tonearm{
  transform:rotate(15deg);
}
.vinyl{
  width:74px; height:74px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #000000 0%, #000000 18%, #0d0d0d 19%, #000000 22%, #0d0d0d 24%, #000000 27%, #0d0d0d 30%, #000000 33%, #0d0d0d 36%, #000000 39%, #0d0d0d 42%, #000000 45%, #0d0d0d 48%, #000000 51%, #0d0d0d 54%, #000000 57%, #0d0d0d 60%, #000000 63%, #0d0d0d 66%, #000000 69%, #0d0d0d 72%, #000000 75%, #0d0d0d 78%, #000000 81%, #0d0d0d 84%, #000000 87%, #0d0d0d 90%, #000000 93%, #0d0d0d 96%, #000000 100%);
  display:grid;
  place-items:center;
  position:relative;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.9),
    inset 0 0 25px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.vinyl.spinning{animation:spin 5s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.vinyl-cover{
  width:36px; height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, #1a0a2e, #4c1d95, #7c3aed);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  z-index:2;
  box-shadow:0 0 20px rgba(124, 58, 237, 0.7);
}
.vinyl-cover img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:2;}
.vinyl-letter{font-size:16px; font-weight:900; color:white; text-shadow:0 0 10px rgba(0,0,0,0.7); z-index:1;}
.vinyl-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:5px; height:5px;
  border-radius:50%;
  background:#000;
  border:1px solid #222;
  z-index:3;
}
.vinyl-loading{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:#a855f7;
  border-right-color:rgba(168,85,247,0.3);
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
  z-index:4;
}
.vinyl.buffering .vinyl-loading{
  opacity:1;
  animation:spin 1s linear infinite;
}
.vinyl.buffering{ animation-play-state:paused; }
.player-info{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0;}
.np-label{
  font-size:9px;
  letter-spacing:3px;
  color:rgba(168, 85, 247, 0.8);
  font-weight:700;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(168, 85, 247, 0.5);
}
.np-title{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:0.2px;
}
.time-row{display:flex; align-items:center; gap:12px; margin-top:2px;}
.time{
  font-size:10.5px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  font-weight:500;
  min-width:38px;
  text-align:center;
  letter-spacing:0.5px;
}
.progress-track{
  flex:1;
  height:4px;
  background:rgba(255, 255, 255, 0.06);
  border-radius:2px;
  overflow:hidden;
  position:relative;
  transition:height 0.3s;
}
.progress-track:hover,
.progress-track.dragging{ height:6px; }
.progress-track.dragging{ cursor:grabbing; }
.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #5b21b6, #7c3aed, #a855f7);
  border-radius:2px;
  transition:width 0.1s linear;
  box-shadow:0 0 15px rgba(168, 85, 247, 1);
}
.player-controls{display:flex; align-items:center; gap:8px; flex:none;}
.ctrl-btn{
  width:38px; height:38px;
  border-radius:11px;
  border:1px solid rgba(255, 255, 255, 0.06);
  background:rgba(255, 255, 255, 0.025);
  color:var(--muted);
  display:grid; place-items:center;
  flex:none;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ctrl-btn:hover{
  color:var(--text);
  border-color:rgba(168, 85, 247, 0.5);
  background:rgba(124, 58, 237, 0.12);
  transform:scale(1.08);
  box-shadow:0 0 25px rgba(124, 58, 237, 0.4);
}
.play-btn{
  width:46px; height:46px;
  border-radius:13px;
  border:1px solid rgba(168, 85, 247, 0.5);
  background:linear-gradient(180deg, #4c1d95 0%, #2e1065 100%);
  color:white;
  display:grid; place-items:center;
  flex:none;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(124, 58, 237, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.play-btn:hover{
  transform:scale(1.1);
  background:linear-gradient(180deg, #5b21b6 0%, #4c1d95 100%);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.7),
    0 0 55px rgba(168, 85, 247, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* ============================================================ */
/* VOLUME — fix hover qui disparaît                             */
/* ============================================================ */
.volume-wrap{
  position:relative;
  display:flex;
  align-items:center;
  padding-top: 14px;
  margin-top: -14px;
}
.volume-btn{
  width:38px;
  height:38px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.025);
  color:var(--muted);
  display:grid;
  place-items:center;
  flex:none;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.volume-btn:hover{
  color:var(--text);
  border-color:rgba(168,85,247,0.5);
  background:rgba(124,58,237,0.12);
  box-shadow:0 0 25px rgba(124,58,237,0.4);
}
.volume-btn.muted{
  color:#ef4444;
  border-color:rgba(239,68,68,0.4);
}
.volume-slider-wrap{
  position:absolute;
  bottom:calc(100% + 4px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  padding:14px 12px;
  padding-bottom: 20px;
  margin-bottom: -20px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(10,8,16,0.95) 0%, rgba(4,2,8,0.98) 100%);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 0 40px rgba(88,28,135,0.3);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1);
  display:flex;
  justify-content:center;
  z-index:10;
}
.volume-wrap:hover .volume-slider-wrap,
.volume-slider-wrap:hover,
.volume-slider-wrap:focus-within{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.volume-slider-wrap::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:10px;
  height:10px;
  background:rgba(4,2,8,0.98);
  border-right:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.volume-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100px;
  height:4px;
  border-radius:2px;
  background:linear-gradient(to right, #a855f7 0%, #a855f7 var(--vol,30%), rgba(255,255,255,0.1) var(--vol,30%), rgba(255,255,255,0.1) 100%);
  outline:none;
  cursor:none;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(180deg, #a855f7, #7c3aed);
  border:2px solid #0a0810;
  box-shadow:0 0 15px rgba(168,85,247,0.9);
  transition:transform 0.15s ease;
  cursor:none;
}
.volume-slider::-webkit-slider-thumb:hover{ transform:scale(1.2); }
.volume-slider::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(180deg, #a855f7, #7c3aed);
  border:2px solid #0a0810;
  box-shadow:0 0 15px rgba(168,85,247,0.9);
  cursor:none;
}
/* ============================================================ */
/* THÈME CLAIR                                                  */
/* ============================================================ */
body.light-theme{
  --bg:#f5f3ff;
  --text:#0a0810;
  --text-dim:#2e1065;
  --muted:#6d6d78;
  --muted-2:#8b8b96;
  background:#f5f3ff;
  color:var(--text);
}
body.light-theme::before{
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(168,85,247,0.25), transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 20%, rgba(139,92,246,0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(196,181,253,0.22), transparent 60%);
  filter:blur(50px);
}
body.light-theme::after{ mix-blend-mode:multiply; opacity:0.3; }
body.light-theme .profile-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(250,245,255,0.95) 100%);
  border-color:rgba(124,58,237,0.15);
  box-shadow: 0 30px 80px rgba(124,58,237,0.15), 0 0 0 1px rgba(255,255,255,0.5) inset, 0 0 100px rgba(168,85,247,0.15);
}
body.light-theme .link-btn{
  background:linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(250,245,255,0.5) 100%);
  border-color:rgba(124,58,237,0.12);
}
body.light-theme .link-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(250,245,255,0.8) 100%);
  border-color:rgba(124,58,237,0.3);
}
body.light-theme .link-icon{
  background:rgba(124,58,237,0.06);
  border-color:rgba(124,58,237,0.12);
}
body.light-theme .link-text small{ color:#6d28d9; opacity:0.7; }
body.light-theme .link-arrow{ color:rgba(124,58,237,0.5); }
body.light-theme .link-btn:hover .link-arrow{ color:#4c1d95; }
body.light-theme .player-bar{
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(250,245,255,0.98) 100%);
  border-color:rgba(124,58,237,0.15);
  box-shadow: 0 25px 70px rgba(124,58,237,0.2), 0 0 0 1px rgba(255,255,255,0.5) inset, 0 0 100px rgba(168,85,247,0.15);
}
body.light-theme .ctrl-btn,
body.light-theme .volume-btn{
  background:rgba(124,58,237,0.05);
  border-color:rgba(124,58,237,0.12);
  color:#6d28d9;
}
body.light-theme .ctrl-btn:hover,
body.light-theme .volume-btn:hover{
  color:#4c1d95;
  background:rgba(124,58,237,0.15);
}
body.light-theme .progress-track{ background:rgba(124,58,237,0.1); }
body.light-theme .time{ color:#6d28d9; opacity:0.7; }
body.light-theme .np-title{ color:#1e1b4b; }
body.light-theme .intro-screen{ background:#f5f3ff; }
body.light-theme .intro-bg{
  background:
    radial-gradient(circle at 50% 45%, rgba(196,181,253,0.6), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(168,85,247,0.35), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(124,58,237,0.3), transparent 50%),
    #f5f3ff;
}
body.light-theme .intro-subtitle{ color:#7c3aed; text-shadow:0 0 20px rgba(124,58,237,0.4); }
body.light-theme .intro-btn{
  background:linear-gradient(180deg, #ffffff 0%, #f3e8ff 100%);
  color:#4c1d95;
  border-color:rgba(124,58,237,0.4);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.1) inset, 0 20px 50px rgba(124,58,237,0.15), 0 0 50px rgba(168,85,247,0.2);
}
body.light-theme .intro-btn:hover{
  border-color:rgba(124,58,237,0.7);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.25) inset, 0 25px 60px rgba(124,58,237,0.25), 0 0 80px rgba(168,85,247,0.4);
}
body.light-theme .intro-hint{ color:rgba(124,58,237,0.7); }
body.light-theme .visits-badge{
  background:rgba(124,58,237,0.1);
  border-color:rgba(124,58,237,0.25);
  color:#4c1d95;
}
body.light-theme .visits-count{ color:#4c1d95; text-shadow:none; }
body.light-theme .visits-label{ color:rgba(124,58,237,0.75); }
body.light-theme .handle{ color:#6d28d9; }
body.light-theme .bio{ color:#6d28d9; opacity:0.8; }
body.light-theme .copy-mini:hover{
  background:rgba(124,58,237,0.1);
  border-color:rgba(124,58,237,0.2);
  color:#4c1d95;
}
body.light-theme .volume-slider-wrap{
  background:linear-gradient(180deg, #ffffff 0%, #f3e8ff 100%);
  border-color:rgba(124,58,237,0.2);
}
body.light-theme .volume-slider-wrap::after{
  background:#ffffff;
  border-color:rgba(124,58,237,0.2);
}
body.light-theme .theme-toggle,
body.light-theme .lang-switch{
  background:rgba(124,58,237,0.08);
  border-color:rgba(124,58,237,0.22);
  color:#4c1d95;
}
body.light-theme .theme-toggle:hover{ background:rgba(124,58,237,0.18); }
body.light-theme .lang-btn{ color:rgba(124,58,237,0.6); }
body.light-theme .lang-btn:hover{ color:#4c1d95; }
body.light-theme .lang-btn.active{ background:rgba(124,58,237,0.2); color:#4c1d95; }
body.light-theme .intro-particles span{
  background:#7c3aed;
  box-shadow:0 0 10px #7c3aed, 0 0 20px #a855f7;
}
body.light-theme .status-dot{ border-color:#f5f3ff; }
body.light-theme .footer-text{ color:#6d28d9; opacity:0.5; }
body.light-theme .vinyl{
  background:
    radial-gradient(circle at center, #1a1a1a 0%, #1a1a1a 18%, #2a2a2a 19%, #1a1a1a 22%, #2a2a2a 24%, #1a1a1a 27%, #2a2a2a 30%, #1a1a1a 33%, #2a2a2a 36%, #1a1a1a 39%, #2a2a2a 42%, #1a1a1a 45%, #2a2a2a 48%, #1a1a1a 51%, #2a2a2a 54%, #1a1a1a 57%, #2a2a2a 60%, #1a1a1a 63%, #2a2a2a 66%, #1a1a1a 69%, #2a2a2a 72%, #1a1a1a 75%, #2a2a2a 78%, #1a1a1a 81%, #2a2a2a 84%, #1a1a1a 87%, #2a2a2a 90%, #1a1a1a 93%, #2a2a2a 96%, #1a1a1a 100%);
}
body.light-theme .volume-slider{
  background:linear-gradient(to right, #7c3aed 0%, #7c3aed var(--vol,30%), rgba(124,58,237,0.15) var(--vol,30%), rgba(124,58,237,0.15) 100%);
}
body.light-theme .cursor-dot{
  background-color:#7c3aed;
  box-shadow:0 0 8px rgba(124,58,237,0.9), 0 0 14px rgba(124,58,237,0.5);
}
body.light-theme .cursor-ring{
  border-color:rgba(124,58,237,0.6);
}
body.light-theme.cursor-hover .cursor-ring{
  border-color:rgba(124,58,237,1);
  background-color:rgba(124,58,237,0.1);
  box-shadow:0 0 15px rgba(124,58,237,0.5);
}
body.light-theme.cursor-hover .cursor-dot{ background-color:#4c1d95; }
/* ============================================================ */
/* RESPONSIVE                                                   */
/* ============================================================ */
@media(max-width:720px){
  .intro-avatar, .intro-avatar img{width:110px; height:110px;}
  .intro-title{font-size:42px; letter-spacing:-2px;}
  .intro-btn{padding:16px 38px; font-size:12px;}
  .intro-ring-3{display:none;}
  .profile-page{padding:20px 15px 190px; max-width:100%;}
  .profile-card{padding:56px 24px 30px; border-radius:22px;}
  .username{font-size:28px;}
  .avatar-wrapper, .avatar{width:104px; height:104px;}
  .link-btn{padding:14px 16px;}
  .link-icon{width:40px; height:40px;}
  .top-controls{ top:14px; left:14px; gap:6px; }
  .theme-toggle{width:28px;height:28px;}
  .lang-btn{padding:4px 8px;font-size:9px;}
  .visits-badge { top: 14px; right: 14px; padding: 5px 10px; font-size: 10px; }
  .visits-label { display: none; }
  .copy-mini { width: 26px; height: 26px; opacity: 0.7 !important; transform: none !important; }
  .link-actions { gap: 4px; }
  .player-bar{
    bottom:12px;
    left:12px;
    right:12px;
    transform:translateY(120px);
    width:auto;
    padding:14px 16px;
    gap:14px;
  }
  .player-bar.revealed{transform:translateY(0);}
  .vinyl-wrapper, .vinyl{width:58px; height:58px;}
  .vinyl-cover{width:28px; height:28px;}
  .vinyl-letter{font-size:13px;}
  .tonearm{height:28px; right:-4px;}
  .np-title{font-size:12.5px;}
  .play-btn{width:42px; height:42px;}
  .ctrl-btn{width:36px; height:36px;}
  .volume-btn{width:36px; height:36px;}
  .volume-slider{width:70px;}
  .volume-slider-wrap{padding:10px 8px; padding-bottom:16px; margin-bottom:-16px;}
  .username, .intro-title {
    border-right: none;
    max-width: none !important;
    animation: titleShine 6s linear infinite;
  }
}