:root{
  --bg:#0b0f14;
  --panel:#121826;
  --text:#d8e1ff;
  --muted:#93a4c3;
  --blue:#00c0ff;        /* bleu électrique */
  --orange:#ff7a00;      /* orange signature */
  --glow:0 0 24px;
}

*{box-sizing:border-box} body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 70% -10%, rgba(0,192,255,.1), transparent 60%),
             radial-gradient(1000px 500px at -10% 120%, rgba(255,122,0,.08), transparent 60%),
             var(--bg); color:var(--text);
}

.hero{padding:48px 20px 24px; text-align:center}
.brand{height:72px; margin-bottom:12px; filter:drop-shadow(var(--glow) rgba(0,192,255,.35))}
h1{margin:0 0 8px; font-size:40px; letter-spacing:.5px}
.tagline{margin:0 auto; max-width:820px; font-size:18px; color:var(--muted)}
.neon-orange{color:var(--orange); text-shadow:var(--glow) rgba(255,122,0,.35)}
.neon-blue{color:var(--blue); text-shadow:var(--glow) rgba(0,192,255,.35)}

.grid{display:grid; gap:16px; padding:20px; max-width:1024px; margin:0 auto;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.0));
      border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:18px}
.card h2{margin:0 0 10px; color:#fff}
.card p{margin:0; color:var(--muted)}
.avatar{width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.08);
        box-shadow:0 8px 32px rgba(0,0,0,.35)}

.footer{padding:28px 16px 48px; text-align:center; color:var(--muted)}

/* TEST-BANNER */
body::after{
  content:""; position:fixed; inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 180px rgba(0,192,255,.12), inset 0 0 220px rgba(255,122,0,.12);
}

/* ===== PU additions (safe) ===== */
#pu-banner {
  position: sticky; top: 0; z-index: 9999;
  background: rgba(5,10,20,0.9);
  border-bottom: 1px solid rgba(255,165,0,0.25);
  backdrop-filter: blur(6px);
  padding: 10px 14px; text-align: center;
  font-weight: 700; letter-spacing: .3px;
}
#pu-banner .line { display: inline-block; font-size: 16px; }
#pu-banner .line .orange { color: #FFA21A; }      /* orange PU */
#pu-banner .line .blue   { color: #19B5FE; }      /* bleu électrique */

#pu-avatar-section{
  max-width: 980px; margin: 28px auto; padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; background: rgba(255,255,255,0.02);
}
#pu-avatar-wrap{ display:flex; align-items:center; gap:18px; }
#pu-avatar-wrap img { width:120px; height:auto; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
#pu-avatar-wrap .txt h3 { margin:0 0 6px; font-size: 20px; }
#pu-avatar-wrap .txt p  { margin:0; opacity:.85; }
@media (max-width:680px){ #pu-avatar-wrap{flex-direction:column; text-align:center;} }

/* ===== PU additions (safe) ===== */
#pu-banner { position: sticky; top:0; z-index:9999; background: rgba(5,10,20,.9);
  border-bottom:1px solid rgba(255,165,0,.25); backdrop-filter: blur(6px);
  padding:10px 14px; text-align:center; font-weight:700; letter-spacing:.3px; }
#pu-banner .line{ display:inline-block; font-size:16px; }
#pu-banner .orange{ color:#FFA21A; }   /* orange PU */
#pu-banner .blue{   color:#19B5FE; }   /* bleu électrique */

#pu-avatar-section{ max-width:980px; margin:28px auto; padding:16px 18px;
  border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.02); }
#pu-avatar-wrap{ display:flex; align-items:center; gap:18px; }
#pu-avatar-wrap img{ width:120px; height:auto; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.35); }
#pu-avatar-wrap .txt h3{ margin:0 0 6px; font-size:20px; }
#pu-avatar-wrap .txt p{  margin:0; opacity:.85; }
@media (max-width:680px){ #pu-avatar-wrap{flex-direction:column; text-align:center;} }