@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-dark: #020514;
    --neon-cyan: #00f2fe;
    --neon-pink: #d946ef;
    --neon-purple: #8900C9;
    --glass: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.15);
    --text: #ffffff;
    --radius: 24px;
}

/* ============================================================
   1. FOND DÉGRADÉ ANIMÉ & PUISSANT
============================================================ */
body {
    background: linear-gradient(-45deg, #050510, #1a0b2e, #360033, #0b102b);
    background-size: 400% 400%;
    animation: gradientBG 12s ease infinite;
    font-family: 'Poppins', sans-serif; color: var(--text); margin: 0; min-height: 100vh;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.cosmic-background { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* ORBS (Bulles) */
.bubbles-layer { position: absolute; inset: 0; }
.orb {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.8;
    mix-blend-mode: screen; animation: floatOrb 10s infinite ease-in-out alternate;
}
.orb-1 { width: 500px; height: 500px; background: var(--neon-purple); top: -10%; left: -10%; animation-duration: 15s; }
.orb-2 { width: 400px; height: 400px; background: var(--neon-cyan); bottom: 0%; right: -5%; animation-duration: 12s; animation-delay: -2s; }
.orb-3 { width: 300px; height: 300px; background: var(--neon-pink); top: 40%; left: 40%; animation-duration: 18s; animation-delay: -5s; }

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, -50px) scale(1.1); }
}

/* ETOILES */
.stars-container { position: absolute; inset: 0; }
.star { position: absolute; background: white; border-radius: 50%; animation: twinkle 3s infinite ease-in-out; }
.star:nth-child(1) { top: 10%; left: 20%; width: 2px; height: 2px; }
.star:nth-child(2) { top: 30%; left: 80%; width: 3px; height: 3px; animation-delay: 1s; }
.star:nth-child(3) { top: 70%; left: 10%; width: 2px; height: 2px; animation-delay: 2s; }
/* ... Ajoutez plus d'étoiles si voulu ... */
@keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 10px white; } }

/* ============================================================
   2. UI ELEMENTS
============================================================ */
.profile-ultimate-wrapper { padding-top: 100px; position: relative; z-index: 1; }

.glass-panel {
    background: var(--glass); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* HEADER */
.avatar-wrapper-pro {
    width: 90px; height: 90px; border-radius: 50%;
    border: 2px solid var(--neon-cyan);
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 242, 254, 0.1); box-shadow: 0 0 25px var(--neon-cyan);
}
.avatar-icon-placeholder { font-size: 2rem; color: var(--neon-cyan); }
.user-name { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; }
.badge-vip { background: linear-gradient(45deg, var(--neon-purple), var(--neon-pink)); padding: 5px 12px; border-radius: 12px; font-weight: bold; font-size: 0.75rem; color: #fff; }
.badge-mood { border: 1px solid var(--border); padding: 5px 12px; border-radius: 12px; background: rgba(0,0,0,0.3); font-size: 0.75rem; }

/* NAV */
.nav-item {
    background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.7);
    padding: 10px 25px; border-radius: 40px; font-weight: 600;
    transition: 0.3s; text-decoration: none; border: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
.nav-item:hover, .nav-item.active {
    background: linear-gradient(90deg, rgba(0,242,254,0.3), rgba(137,0,201,0.3));
    color: #fff; border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0,242,254,0.2);
}

/* KPI BOX */
.kpi-box {
    background: rgba(0,0,0,0.3); border: 1px solid var(--border);
    border-radius: var(--radius); transition: 0.3s;
}
.kpi-box:hover { background: rgba(255,255,255,0.1); border-color: var(--neon-cyan); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,242,254,0.1); }
.icon { font-size: 1.5rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 12px; flex-shrink: 0; }
.icon.cyan { color: var(--neon-cyan); } .icon.purple { color: var(--neon-purple); } .icon.pink { color: var(--neon-pink); }

/* INPUTS */
.input-field {
    background: rgba(0,0,0,0.2); border: 1px solid var(--border);
    border-radius: 12px; transition: 0.3s;
}
.input-field:focus-within {
    border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0,242,254,0.2); background: rgba(0,0,0,0.4);
}
.input-field input:focus, .input-field textarea:focus { outline: none; }

/* BOUTON */
.btn-submit {
    background: var(--neon-cyan); color: #000; border: none; transition: 0.3s;
}
.btn-submit:hover {
    background: #fff; transform: translateY(-2px); box-shadow: 0 0 30px var(--neon-cyan);
}
.btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }

/* UTILS */
.fade-in-up { opacity: 0; transform: translateY(30px); transition: 0.8s ease; }
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.2s; }