/* =====================================================================
   PAGE PROFIL — design neon/glass elevee
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --accent:#8b5cf6; --accent-2:#22d3ee;
  --text:#f5f5fc; --text-dim:#9fa0bd;
  --card-bg:rgba(17,16,28,.5); --card-border:rgba(255,255,255,.09);
  --bg-overlay:rgba(5,4,11,.55); --radius:26px;
  --font-display:'Sora','Segoe UI',sans-serif;
  --font-body:'Plus Jakarta Sans','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-body);color:var(--text);background:#07060f;-webkit-font-smoothing:antialiased;cursor:var(--cursor,auto)}

/* Fond + couches d'atmosphere */
#bg,#bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#bg{background-size:cover;background-position:center}
#bg-overlay{position:fixed;inset:0;z-index:1;background:
  radial-gradient(60% 50% at 18% 12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
  radial-gradient(55% 45% at 100% 100%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 70%),
  var(--bg-overlay);
  backdrop-filter:blur(3px)}
#fx{position:fixed;inset:0;z-index:2;pointer-events:none}
/* grain subtil */
body::after{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Ecran d'entree */
#enter{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;
  background:rgba(4,3,9,.45);backdrop-filter:blur(16px);cursor:pointer;transition:opacity .9s,visibility .9s;text-align:center}
#enter.hidden{opacity:0;visibility:hidden}
#enter h1{font-family:var(--font-display);font-size:clamp(1.7rem,5vw,2.8rem);font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(120deg,#fff,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 50px color-mix(in srgb,var(--accent) 60%,transparent);animation:pulse 2.6s ease-in-out infinite}
#enter p{color:var(--text-dim);font-size:.78rem;letter-spacing:4px;text-transform:uppercase}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* Scene + carte */
#stage{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;perspective:1200px;opacity:0;transition:opacity 1s ease .15s}
#stage.show{opacity:1}
.card{width:min(430px,92vw);background:var(--card-bg);border-radius:var(--radius);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 90px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.10);
  padding:34px 28px 26px;text-align:center;transform-style:preserve-3d;transition:transform .15s ease-out;position:relative;overflow:hidden}
/* halo anime derriere le contenu de la carte */
.card::before{content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--accent) 50%,transparent),transparent 40%,color-mix(in srgb,var(--accent-2) 50%,transparent),transparent);
  animation:spin 12s linear infinite;opacity:.22;pointer-events:none}
/* bordure degradee fine */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.30),transparent 35%,transparent 65%,color-mix(in srgb,var(--accent) 60%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes spin{to{transform:rotate(360deg)}}

/* Variantes de carte : fond */
.card.cs-solid{background:#0e0d18}
.card.cs-none{background:transparent;backdrop-filter:none;box-shadow:none}
.card.cs-none::before,.card.cs-none::after{display:none}
/* Variantes de carte : forme (coins) */
.card.csh-square{--radius:8px}
.card.csh-round{--radius:40px}

/* Avatar : initiale quand pas de photo */
.avatar-fallback{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-weight:800;font-size:2.6rem;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));user-select:none}
.avatar-wrap.av-rounded .avatar-fallback{border-radius:26px}
.avatar-wrap.av-square .avatar-fallback{border-radius:14px}
.avatar-wrap.avsz-sm .avatar-fallback{font-size:2rem}
.avatar-wrap.avsz-xl .avatar-fallback{font-size:3.4rem}
/* Halo anime autour de l'avatar */
.avatar-wrap.av-glow{animation:avglow 2.4s ease-in-out infinite}
@keyframes avglow{0%,100%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 70%,transparent))}
  50%{filter:drop-shadow(0 0 22px var(--accent))}}
.avatar-wrap.av-rounded .avatar,.avatar-wrap.av-rounded::before{border-radius:26px}
.avatar-wrap.av-square .avatar,.avatar-wrap.av-square::before{border-radius:14px}
.avatar-wrap.av-rounded .status,.avatar-wrap.av-square .status{right:-2px;bottom:-2px}
/* Variantes d'avatar : taille */
.avatar-wrap.avsz-sm{width:84px;height:84px}.avatar-wrap.avsz-sm .avatar{width:84px;height:84px}
.avatar-wrap.avsz-md{width:116px;height:116px}.avatar-wrap.avsz-md .avatar{width:116px;height:116px}
.avatar-wrap.avsz-lg{width:140px;height:140px}.avatar-wrap.avsz-lg .avatar{width:140px;height:140px}
.avatar-wrap.avsz-xl{width:168px;height:168px}.avatar-wrap.avsz-xl .avatar{width:168px;height:168px}
/* UID en infobulle sur le pseudo */
.username.has-uid{position:relative;cursor:pointer}
.username.has-uid::after{content:attr(data-uid);position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(6px);background:#0c0b15;color:#fff;-webkit-text-fill-color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:1.5px;padding:5px 11px;border-radius:9px;white-space:nowrap;
  border:1px solid var(--card-border);box-shadow:0 8px 22px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.18s;font-family:'Sora',sans-serif}
.username.has-uid::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%) translateY(6px);
  border:5px solid transparent;border-top-color:#0c0b15;opacity:0;transition:.18s}
.username.has-uid:hover::after,.username.has-uid.uid-open::after,
.username.has-uid:hover::before,.username.has-uid.uid-open::before{opacity:1;transform:translateX(-50%) translateY(0)}

/* apparition en cascade */
#stage.show .card>*{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
#stage.show .card>*:nth-child(1){animation-delay:.10s}
#stage.show .card>*:nth-child(2){animation-delay:.16s}
#stage.show .card>*:nth-child(3){animation-delay:.22s}
#stage.show .card>*:nth-child(4){animation-delay:.28s}
#stage.show .card>*:nth-child(5){animation-delay:.34s}
#stage.show .card>*:nth-child(6){animation-delay:.40s}
#stage.show .card>*:nth-child(7){animation-delay:.46s}
#stage.show .card>*:nth-child(8){animation-delay:.52s}
#stage.show .card>*:nth-child(9){animation-delay:.58s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* Avatar avec anneau degrade */
.avatar-wrap{position:relative;width:116px;height:116px;margin:4px auto 16px}
.avatar-wrap::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent));animation:spin 7s linear infinite;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 70%,transparent))}
.avatar{position:relative;z-index:1;width:116px;height:116px;border-radius:50%;object-fit:cover;
  border:4px solid #0c0b15;background:#1a1826;animation:float 5.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.status{position:absolute;z-index:2;right:8px;bottom:8px;width:22px;height:22px;border-radius:50%;background:#22c55e;border:4px solid #0c0b15;box-shadow:0 0 14px #22c55e}

/* Pseudo + badges */
.username{font-family:var(--font-display);font-size:1.85rem;font-weight:800;letter-spacing:-.5px;display:inline-flex;align-items:center;gap:9px;justify-content:center}
.badges{display:inline-flex;gap:6px;vertical-align:middle}
.badges-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px;min-height:0}
.badges-row:empty{display:none}
.badge{position:relative;width:27px;height:27px;display:grid;place-items:center;border-radius:9px;
  background:rgba(255,255,255,.07);transition:transform .2s,box-shadow .2s,background .2s;cursor:default}
.badge svg{width:19px;height:19px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.badge:hover{transform:translateY(-3px);background:rgba(255,255,255,.12);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 45%,transparent)}
.badge-glyph{width:15px;height:15px;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.link-logo{width:22px;height:22px;object-fit:contain}
/* Effets de pseudo */
.username.ue-gradient #uname-text,.username.ue-gradient{background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ueflow 4s linear infinite}
@keyframes ueflow{to{background-position:200% center}}
.username.ue-glow{text-shadow:0 0 12px var(--accent),0 0 28px var(--accent)}
.username.ue-shine{position:relative}
.username.ue-shine #uname-text{background:linear-gradient(110deg,var(--text) 35%,#fff 50%,var(--text) 65%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ueshine 3s linear infinite}
@keyframes ueshine{to{background-position:-200% center}}
/* bulle au survol */
.badge[data-tip]::after{content:attr(data-tip);position:absolute;bottom:135%;left:50%;transform:translateX(-50%) translateY(6px);
  background:#0c0b15;color:#fff;font-size:.72rem;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;
  border:1px solid var(--card-border);box-shadow:0 6px 18px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.18s}
.badge[data-tip]::before{content:"";position:absolute;bottom:135%;left:50%;transform:translateX(-50%) translateY(6px);
  border:5px solid transparent;border-top-color:#0c0b15;margin-bottom:-9px;opacity:0;transition:.18s}
.badge[data-tip]:hover::after,.badge[data-tip]:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
.title{color:var(--text-dim);font-size:.86rem;margin-top:5px;letter-spacing:.3px}

/* Bio */
.bio{min-height:1.4em;margin:18px 0 6px;font-size:.96rem;color:var(--text);opacity:.96}
.bio .cursor-blink{display:inline-block;width:2px;background:var(--accent);margin-left:2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Vues + localisation */
.views{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);font-size:.78rem;margin-top:6px}
.views svg{width:14px;height:14px;opacity:.8}

/* Badges de competences */
.skills{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:16px 0 4px}
.skill-chip{display:inline-flex;align-items:center;gap:7px;font-size:.73rem;font-weight:500;padding:6px 12px;border-radius:30px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);color:var(--text);transition:.2s}
.skill-chip img{width:15px;height:15px;object-fit:contain}
.skill-chip:hover{border-color:var(--accent);color:#fff}

/* Liens sociaux */
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 6px}
.link{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);color:var(--text);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,color .25s;cursor:pointer}
.link svg{width:22px;height:22px}
.link:hover{transform:translateY(-6px) scale(1.1);background:var(--accent);color:#fff;box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 70%,transparent)}

/* Boutons texte */
.btn-links{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.btn-link{display:flex;align-items:center;gap:10px;justify-content:center;padding:12px 14px;border-radius:14px;font-size:.9rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--text);transition:.25s;cursor:pointer}
.btn-link:hover{background:var(--accent);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-2px)}

/* Widgets (horloge, Discord) */
#widgets{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.widget{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:16px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);position:relative;color:var(--widget-text,var(--text))}
.widget-label{font-size:.74rem;color:var(--text-dim)}
.widget-main{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:.2px}
.discord-widget{transition:.25s;text-decoration:none}
.discord-widget:hover{border-color:var(--accent);box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 30%,transparent)}
.discord-join{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:var(--accent);color:#fff;font-size:.78rem;font-weight:700;padding:7px 14px;border-radius:10px}

/* Lecteur audio */
#player{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;width:min(390px,90vw);
  background:rgba(13,12,22,.62);backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:18px;
  padding:11px 15px;display:flex;align-items:center;gap:12px;opacity:0;transition:opacity .8s ease .6s;pointer-events:none;
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
#player.show{opacity:1;pointer-events:auto}
.pp{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:none;cursor:pointer;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 0 20px color-mix(in srgb,var(--accent) 70%,transparent);transition:.2s}
.pp:hover{transform:scale(1.09)}
.pp svg{width:16px;height:16px}
.track{flex:1;min-width:0}
.track .name{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress{height:4px;background:rgba(255,255,255,.13);border-radius:4px;margin-top:7px;cursor:pointer}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:4px}
.vol{display:flex;align-items:center;gap:6px}
.vol svg{width:16px;height:16px;color:var(--text-dim)}
.vol input{width:62px;accent-color:var(--accent)}

/* Curseurs personnalises animes */
#cursor{position:fixed;left:0;top:0;width:30px;height:30px;border-radius:50%;pointer-events:none;z-index:99;
  transform:translate(-50%,-50%);mix-blend-mode:screen;display:none;transition:transform .12s ease,width .15s,height .15s,background .15s,opacity .15s}
#cursor[data-style="glow"]{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 80%,transparent),transparent 70%);
  width:36px;height:36px;animation:cpulse 1.8s ease-in-out infinite}
#cursor[data-style="ring"]{border:2px solid var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 0 8px color-mix(in srgb,var(--accent) 50%,transparent)}
#cursor[data-style="dot"]{width:14px;height:14px;background:var(--accent);box-shadow:0 0 16px var(--accent)}
#cursor[data-style="neon"]{width:30px;height:30px;border:2px solid var(--accent-2);
  box-shadow:0 0 10px var(--accent-2),0 0 22px var(--accent),inset 0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);
  animation:cpulse 1.3s ease-in-out infinite}
#cursor[data-style="comet"]{width:16px;height:16px;background:#fff;box-shadow:0 0 14px var(--accent),0 0 26px var(--accent-2)}
#cursor[data-style="trail"]{width:15px;height:15px;background:var(--accent);box-shadow:0 0 18px var(--accent)}
#cursor[data-style="sparkle"]{width:12px;height:12px;background:var(--accent);box-shadow:0 0 14px var(--accent)}
#cursor[data-style="fire"],#cursor[data-style="hearts"],#cursor[data-style="stars"],#cursor[data-style="bubbles"],#cursor[data-style="snowtrail"],#cursor[data-style="petals"],#cursor[data-style="droplets"]{width:10px;height:10px;background:var(--accent);box-shadow:0 0 12px var(--accent);opacity:.8}
#cursor[data-style="rainbow"]{width:15px;height:15px;box-shadow:0 0 16px currentColor}
#cursor[data-style="orbit"]{width:11px;height:11px;background:var(--accent);box-shadow:0 0 14px var(--accent)}
#cursor[data-style="cross"]{width:26px;height:26px;background:none;box-shadow:none;mix-blend-mode:normal}
#cursor[data-style="cross"]::before,#cursor[data-style="cross"]::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);box-shadow:0 0 8px var(--accent)}
#cursor[data-style="cross"]::before{width:26px;height:2px}
#cursor[data-style="cross"]::after{width:2px;height:26px}
#cursor[data-style="image"],#cursor[data-style="image-trail"]{box-shadow:none;mix-blend-mode:normal}
#cursor[data-style="magnet"]{width:38px;height:38px;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 0 10px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .18s ease,background .18s,border-color .18s,width .18s,height .18s}
/* anneau qui grossit au survol d'un element interactif */
#cursor.hovering{transform:translate(-50%,-50%) scale(1.7);background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:var(--accent-2);box-shadow:0 0 26px color-mix(in srgb,var(--accent) 60%,transparent)}
#cursor.down{transform:translate(-50%,-50%) scale(1.6)}
@keyframes cpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.22)}}
/* suiveurs (trail / comet) : couleur par defaut */
.cursor-follow{background:var(--accent);box-shadow:0 0 10px var(--accent)}
@media(max-width:480px){.card{padding:28px 22px 22px}#player{bottom:14px}}

/* ===== Banniere ===== */
.banner{height:120px;margin:-34px -28px 0;background-size:cover;background-position:center;position:relative;z-index:1}
.card.has-banner .avatar-wrap{margin-top:-52px;position:relative;z-index:2}

/* ===== Animations d'entree ===== */
#stage.show.anim-zoom .card{animation:enZoom .7s cubic-bezier(.2,.8,.2,1)}
@keyframes enZoom{from{transform:scale(.82);opacity:0}to{transform:none;opacity:1}}
#stage.show.anim-slide .card{animation:enSlide .7s cubic-bezier(.2,.8,.2,1)}
@keyframes enSlide{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
#stage.show.anim-blur .card{animation:enBlur .8s ease}
@keyframes enBlur{from{filter:blur(20px);opacity:0}to{filter:blur(0);opacity:1}}
#stage.show.anim-flip .card{animation:enFlip .8s cubic-bezier(.2,.8,.2,1)}
@keyframes enFlip{from{transform:perspective(1000px) rotateX(40deg);opacity:0}to{transform:none;opacity:1}}

/* Intensite du flou de la carte */
.card.cb-none{backdrop-filter:saturate(140%)}
.card.cb-light{backdrop-filter:blur(8px) saturate(150%)}
.card.cb-medium{backdrop-filter:blur(16px) saturate(150%)}
.card.cb-strong{backdrop-filter:blur(26px) saturate(150%)}

/* Bouton Like */
.like-btn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 16px;border-radius:30px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text);cursor:pointer;
  font-family:inherit;font-size:.9rem;font-weight:600;transition:.2s}
.like-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.like-btn.liked{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent)}
.like-btn:active{transform:scale(.94)}