/* =========================================================
   xqxb.lol — feuille de style
   Couleur d'accent réglable plus bas (--ring / --glow)
   ========================================================= */

:root{
  --bg:        #050506;   /* couleur de fond générale */
  --ring:      rgba(255,255,255,0.65);   /* anneau / accents (argent par défaut) */
  --glow:      rgba(255,255,255,0.30);   /* halo lumineux */
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  background:var(--bg);
  color:#e9e9ec;
  font-family:'JetBrains Mono', monospace;
  min-height:100vh;
  overflow-x:hidden;
}

::selection{ background:rgba(255,255,255,0.85); color:#000; }

/* =========================================================
   FOND D'ÉCRAN
   ========================================================= */
.bg{
  position:fixed; inset:0; z-index:0;
  background-image:url('bg-girl-hair.jpg');
  background-size:cover;
  background-position:center;
  /* noir & blanc + un peu plus sombre */
  filter:grayscale(1) contrast(1.12) brightness(0.62);
  /* léger zoom lent ; translateX recentre le sujet entre les 2 cartes */
  animation:kenburns 28s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%   { transform:translateX(-24%) scale(1.07); }
  100% { transform:translateX(-24%) scale(1.14); }
}

/* voile sombre par-dessus le fond pour la lisibilité */
.bg-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,
    rgba(5,5,6,0.25), rgba(5,5,6,0.78) 70%, rgba(5,5,6,0.96));
}

/* grain animé (effet pellicule) */
.bg-grain{
  position:fixed; inset:-40%; z-index:2; pointer-events:none;
  opacity:0.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 0.9s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)}
  30%{transform:translate(3%,-6%)} 50%{transform:translate(-5%,3%)}
  70%{transform:translate(4%,5%)} 90%{transform:translate(-3%,4%)} 100%{transform:translate(0,0)}
}

/* =========================================================
   ÉCRAN D'ENTRÉE
   ========================================================= */
.enter{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; text-align:center; cursor:pointer;
  background:rgba(3,3,4,0.62);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:opacity .6s ease, visibility .6s ease;
}
.enter.hidden{ opacity:0; visibility:hidden; }

.enter__name{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:clamp(64px,11vw,150px); line-height:0.9;
  letter-spacing:0.04em; text-transform:uppercase;
  color:#f4f4f6; text-shadow:0 0 40px var(--glow);
}
.enter__hint{
  display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:0.5em; text-transform:uppercase;
  color:rgba(255,255,255,0.62);
  animation:flicker 2.4s ease-in-out infinite;
}
.enter__line{ width:26px; height:1px; background:rgba(255,255,255,0.4); }
@keyframes flicker{ 0%,100%{opacity:.9} 50%{opacity:.55} }

/* =========================================================
   MISE EN PAGE GÉNÉRALE
   ========================================================= */
.stage{
  position:relative; z-index:10;
  min-height:100vh;
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; padding:80px 6vw; flex-wrap:wrap;
}

/* =========================================================
   MA CARTE
   ========================================================= */
.card{
  position:relative; width:368px; max-width:100%;
  border-radius:20px; overflow:hidden;
  background:rgba(9,9,11,0.55);
  backdrop-filter:blur(22px) saturate(1.1); -webkit-backdrop-filter:blur(22px) saturate(1.1);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}

.card__banner{
  position:relative; height:128px;
  background-image:url('banner.jpg');
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.08);
}
.card__banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,9,11,0.1), rgba(9,9,11,0.95));
}

.card__body{ position:relative; padding:0 22px 22px; margin-top:-46px; }

.card__top{ display:flex; align-items:flex-end; justify-content:space-between; }

.pfp{
  width:96px; height:96px; border-radius:50%; overflow:hidden;
  border:2px solid var(--ring); background:#111;
  box-shadow:0 0 26px var(--glow);
  animation:pulsering 3.2s ease-out infinite;
}
.pfp img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); display:block; }
@keyframes pulsering{
  0%   { box-shadow:0 0 0 0 var(--glow); }
  70%  { box-shadow:0 0 0 10px rgba(0,0,0,0); }
  100% { box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

.status-badge{
  display:flex; align-items:center; gap:6px; margin-bottom:6px;
  padding:5px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03);
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.status-dot{ width:6px; height:6px; border-radius:50%; background:#747f8d; }

.card__name{
  display:flex; align-items:center; gap:9px; margin-top:30px;
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:25px; line-height:1; letter-spacing:0.02em; text-transform:uppercase;
  color:#f5f5f7;
}
.verified path:first-child{ fill:var(--ring); }

.card__bio{
  margin-top:8px; min-height:19px;
  font-size:13px; letter-spacing:0.02em; color:rgba(255,255,255,0.62);
}
.caret{
  display:inline-block; width:7px; height:14px; margin-left:2px;
  vertical-align:-2px; background:var(--ring);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.tags{ display:flex; gap:8px; margin-top:16px; }
.tag{
  padding:4px 8px; border:1px solid rgba(255,255,255,0.09); border-radius:6px;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}

.divider{
  border:none; height:1px; margin:18px 0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}

/* --- Carte de présence Discord --- */
.discord{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:14px;
  background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.07);
}
.discord__avatar{ position:relative; flex:none; }
.discord__avatar img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.discord__dot{
  position:absolute; right:-2px; bottom:-2px;
  width:13px; height:13px; border-radius:50%;
  background:#747f8d; border:2.5px solid #0c0c0e;
}
.discord__info{ flex:1; min-width:0; }
.discord__name{
  font-size:12px; font-weight:500; color:#ececed;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.discord__activity{
  display:flex; align-items:center; gap:7px; margin-top:3px;
  font-size:10.5px; color:rgba(255,255,255,0.5);
}
.discord__activity > span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.discord__label{
  font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.32); text-align:right;
}
/* petites barres "égaliseur" quand tu écoutes de la musique */
.eq{ display:flex; align-items:flex-end; gap:1.5px; height:11px; flex:none; }
.eq span{ width:2px; height:11px; background:var(--ring); transform-origin:bottom; animation:eq 0.8s ease-in-out infinite; }
.eq span:nth-child(2){ animation-delay:.2s; }
.eq span:nth-child(3){ animation-delay:.4s; }
.eq span:nth-child(4){ animation-delay:.1s; }
@keyframes eq{ 0%,100%{transform:scaleY(0.3)} 50%{transform:scaleY(1)} }

/* --- Réseaux --- */
.socials{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.socials a{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.78); text-decoration:none;
  transition:all .18s ease;
}
.socials a:hover{
  background:rgba(255,255,255,0.1); border-color:var(--ring);
  color:#fff; transform:translateY(-2px);
}
/* icône sans lien = grisée et non cliquable */
.socials a.disabled{ color:rgba(255,255,255,0.28); cursor:default; pointer-events:none; }

/* =========================================================
   SLOT DU POTE
   ========================================================= */
.slot{
  position:relative; width:368px; max-width:100%; min-height:360px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center;
  border:1px dashed rgba(255,255,255,0.13); border-radius:20px;
  color:rgba(255,255,255,0.28);
  animation:floaty 5s ease-in-out infinite;
}
.slot__num{ font-family:'Anton', sans-serif; font-size:64px; line-height:1; color:rgba(255,255,255,0.14); }
.slot__title{ font-size:11px; letter-spacing:0.32em; text-transform:uppercase; }
.slot__sub{ font-size:11px; letter-spacing:0.18em; color:rgba(255,255,255,0.2); }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* =========================================================
   COMPTEUR DE VUES
   ========================================================= */
.views{
  position:fixed; left:22px; bottom:18px; z-index:30;
  display:flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:0.1em; color:rgba(255,255,255,0.62);
  text-shadow:0 1px 8px rgba(0,0,0,0.8);
}
.views__label{ color:rgba(255,255,255,0.34); }
#viewsCount{ font-variant-numeric:tabular-nums; }

/* =========================================================
   LECTEUR AUDIO
   ========================================================= */
.player{
  position:fixed; right:22px; bottom:46px; z-index:31;
  display:flex; align-items:center; gap:11px;
  padding:8px 14px 8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.14); background:rgba(10,10,12,0.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
}
.player__mute{
  flex:none; width:26px; height:26px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.82);
}
.player__vol{
  -webkit-appearance:none; appearance:none;
  width:92px; height:4px; border-radius:999px;
  background:rgba(255,255,255,0.22); outline:none; cursor:pointer;
}
.player__vol::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%;
  background:#f4f4f6; box-shadow:0 0 8px rgba(255,255,255,0.55); cursor:pointer;
}
.player__vol::-moz-range-thumb{
  width:12px; height:12px; border:none; border-radius:50%;
  background:#f4f4f6; cursor:pointer;
}

/* =========================================================
   SIGNATURE
   ========================================================= */
.signature{
  position:fixed; right:22px; bottom:18px; z-index:30;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.34); text-shadow:0 1px 8px rgba(0,0,0,0.8);
}

/* sur petit écran, on empile les cartes */
@media (max-width:860px){
  .stage{ justify-content:center; gap:28px; padding:64px 5vw; }
}