/* ============================================================
   neon.css — JARVISCLAW NEON OVERLAY (v1 2026-09-29)
   Refonte futuriste : mêmes teintes, plus vives + glow.
   Perf-safe : transitions transform/opacity uniquement (GPU),
   aucun blur lourd, aucun JS requis.
   ============================================================ */

/* --- 1. Palette néon : on surcharge les variables du thème --- */
:root{
  --neon-cyan:#22e8ff;
  --neon-purple:#b45bff;
  --neon-blue:#4d8dff;
  --neon-green:#00ffa3;
  --neon-amber:#ffc400;
  --neon-red:#ff4d6d;
  --brightened:1;
}

/* Teintes de base boostées (sans changer les couleurs : saturation+) */
body{
  background:
    radial-gradient(1000px 520px at 12% 0%, rgba(180,91,255,.10), transparent 60%),
    radial-gradient(900px 500px at 88% 8%, rgba(34,232,255,.10), transparent 60%),
    linear-gradient(180deg,#07070c 0%,#05050a 45%,#080812 100%);
  background-attachment:local;
}

/* --- 2. Légère grille "cockpit" en filigrane (pure CSS, très léger) --- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(rgba(34,232,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(180,91,255,.028) 1px,transparent 1px);
  background-size:44px 44px;opacity:.35;
}

/* --- 3. Onglets : état actif néon + transitions fluides --- */
.tab-btn{
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, color .15s ease, border-color .15s ease;
  will-change:transform;
}
.tab-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 12px rgba(34,232,255,.25), 0 1px 0 rgba(180,91,255,.2);
}
.tab-btn.active{
  box-shadow:
    inset 0 -2px 0 rgba(34,232,255,.9),
    0 0 14px rgba(34,232,255,.35),
    0 0 30px rgba(180,91,255,.18);
  text-shadow:0 0 8px rgba(34,232,255,.55);
}

/* --- 4. Panneaux : accélération de l'apparition (mouvement fluide) --- */
@keyframes ne-enter{0%{opacity:.35;transform:translateY(10px) scale(.985)}100%{opacity:1;transform:none}}
.tab-panel.active{
  animation:ne-enter .20s cubic-bezier(.16,.9,.28,1) both !important;
  will-change:opacity,transform;
}
.tab-panel{transition:opacity .15s ease}

/* --- 5. Cartes : glow néon + hover lumineux --- */
.card{
  border:1px solid rgba(89,229,255,.28);
  box-shadow:0 0 0 1px rgba(7,7,14,.6), 0 0 18px rgba(34,232,255,.10), 0 0 44px rgba(180,91,255,.07);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .2s ease;
  will-change:transform;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(34,232,255,.55);
  box-shadow:0 0 0 1px rgba(7,7,14,.5), 0 0 22px rgba(34,232,255,.28), 0 0 60px rgba(180,91,255,.16);
}
.card-title{
  background:linear-gradient(90deg,#cfe9ff,#22e8ff 55%,#b45bff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:rgba(9,10,16,.001);
  color:#9ee6ff;
  text-shadow:0 0 10px rgba(34,232,255,.35);
  font-weight:800;letter-spacing:.02em;
}

/* --- 6. Boutons : bordures lumineuses --- */
button,.btn{
  transition:transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background-color .15s ease;
  will-change:transform;
}
button:hover,.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 14px rgba(34,232,255,.28), 0 0 34px rgba(180,91,255,.14);
}
.btn-red{box-shadow:0 0 14px rgba(255,77,109,.35);border-color:rgba(255,77,109,.6)}
.btn-green{box-shadow:0 0 14px rgba(0,255,163,.3);border-color:rgba(0,255,163,.55)}

/* --- 7. Champs : focus lumineux --- */
input,textarea,select{
  transition:border-color .18s ease, box-shadow .18s ease;
  border-color:rgba(89,229,255,.25);
}
input:focus,textarea:focus,select:focus{
  border-color:rgba(34,232,255,.7);
  box-shadow:0 0 10px rgba(34,232,255,.25), inset 0 0 6px rgba(34,232,255,.15);
}

/* --- 8. Barres de progression / compteurs : teinte vive + glow --- */
.progress-bar,progress,[class*="progress"]{
  box-shadow:0 0 8px rgba(34,232,255,.4), 0 0 20px rgba(0,255,163,.2);
}

/* --- 9. Scrollbar néon (webkit) --- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#22e8ff,#b45bff);border-radius:6px;box-shadow:0 0 6px rgba(34,232,255,.4)}
*::-webkit-scrollbar-track{background:rgba(9,10,16,.5)}

/* --- 10. Textes-clés : halo discret (lisibilité conservée) --- */
h1,h2,h3,.section-title,.panel-title{
  text-shadow:0 0 14px rgba(34,232,255,.22), 0 0 34px rgba(180,91,255,.12);
}

/* --- 11. Fluidité globale des transitions UI existantes --- */
*{scroll-behavior:smooth;transition:background-color .14s ease, border-color .14s ease, color .12s ease}
/* ===== POWER PACK FAB : position iOS-safe (ajout arsenal 2026-09-29) ===== */
#pp-fab{
  position:fixed !important;
  right:14px !important;
  bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  z-index:99999 !important;
  width:60px !important;
  height:60px !important;
  border-radius:50% !important;
  border:2px solid #22e8ff !important;
  background:linear-gradient(135deg,#7b2bff,#00c8ff) !important;
  color:#fff !important;
  font-size:26px !important;
  cursor:pointer !important;
  box-shadow:0 0 20px rgba(123,43,255,.95), 0 0 48px rgba(34,232,255,.5) !important;
  animation:pp-pulse 2.2s infinite !important;
}
@keyframes pp-pulse{
  0%,100%{box-shadow:0 0 20px rgba(123,43,255,.95),0 0 48px rgba(34,232,255,.5)}
  50%{box-shadow:0 0 30px rgba(123,43,255,1),0 0 70px rgba(34,232,255,.85)}
}
/* ===== ARSENAL OPEN BUTTON ===== */
#pp-arsenal-open{
  position:fixed !important; right:14px !important;
  bottom:calc(160px + env(safe-area-inset-bottom)) !important;
  z-index:99998 !important; padding:8px 12px !important;
  border:1px solid #ff4d6d !important; border-radius:20px !important;
  background:linear-gradient(135deg,rgba(40,8,60,.95),rgba(120,20,80,.9)) !important;
  color:#ffb3c1 !important; font-size:11px !important; font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 0 16px rgba(255,77,109,.6) !important;
  text-shadow:0 0 8px rgba(255,77,109,.7) !important;
  letter-spacing:.06em !important;
}