/* BlackFox · couche premium : cadres HUD, timeline néon, décors des sections (additif, sans toucher au contenu) */
:root{--px-c:rgba(34,228,255,.9);--px-m:rgba(236,72,153,.9)}
.bfx-hud{position:relative}
.bfx-hud.absolute{position:absolute}
.bfx-hud::after{content:"";position:absolute;inset:9px;pointer-events:none;z-index:3;border-radius:0;opacity:.5;transition:opacity .45s,inset .45s;
  background:linear-gradient(var(--px-c),var(--px-c)) 0 0/16px 1.5px,linear-gradient(var(--px-c),var(--px-c)) 0 0/1.5px 16px,
  linear-gradient(var(--px-c),var(--px-c)) 100% 0/16px 1.5px,linear-gradient(var(--px-c),var(--px-c)) 100% 0/1.5px 16px,
  linear-gradient(var(--px-m),var(--px-m)) 0 100%/16px 1.5px,linear-gradient(var(--px-m),var(--px-m)) 0 100%/1.5px 16px,
  linear-gradient(var(--px-m),var(--px-m)) 100% 100%/16px 1.5px,linear-gradient(var(--px-m),var(--px-m)) 100% 100%/1.5px 16px;background-repeat:no-repeat}
.bfx-hud:hover::after{opacity:1;inset:6px}
.glass.bfx-hud{transition:box-shadow .5s}
.glass.bfx-hud:hover{box-shadow:inset 0 1px #ffffff12,0 0 0 1px rgba(34,228,255,.18),0 30px 80px -34px rgba(34,228,255,.32),0 0 60px -30px rgba(236,72,153,.35)}
.text-grad-neon,.text-grad-cyan,.text-grad-fox,.bfw-grad{filter:drop-shadow(0 0 22px rgba(34,228,255,.22))}
/* méthode J0 → J+7 : timeline néon */
#bfw-process .bfa-steps{position:relative;padding-top:34px}
#bfw-process .bfa-steps:before{content:"";position:absolute;left:22px;right:22px;top:14px;height:2px;border-radius:2px;background:rgba(255,255,255,.08)}
#bfw-process .bfa-steps:after{content:"";position:absolute;left:22px;top:14px;height:2px;border-radius:2px;width:calc((100% - 44px)*var(--px-p,0));background:linear-gradient(90deg,#22e4ff,#a855f7,#ec4899);box-shadow:0 0 16px rgba(34,228,255,.7);transition:width .2s linear}
#bfw-process .bfa-steps li{background:linear-gradient(180deg,rgba(14,20,34,.85),rgba(6,8,14,.7));backdrop-filter:blur(10px);border-color:rgba(34,228,255,.16)}
#bfw-process .bfa-steps li:after{display:none}
#bfw-process .bfa-steps li:before{content:"";position:absolute;left:22px;top:-26px;width:12px;height:12px;border-radius:50%;background:#05070c;border:2px solid #22e4ff;box-shadow:0 0 0 4px rgba(34,228,255,.12),0 0 18px rgba(34,228,255,.8);transition:background .4s,transform .4s}
#bfw-process .bfa-steps li.px-on:before{background:#22e4ff;transform:scale(1.15)}
#bfw-process .bfa-sd{display:inline-block;align-self:flex-start;padding:5px 10px;border-radius:8px;border:1px solid rgba(34,228,255,.35);background:rgba(34,228,255,.08);text-shadow:0 0 12px rgba(34,228,255,.7)}
.bfa-gar{background:linear-gradient(90deg,rgba(61,255,168,.06),rgba(34,228,255,.04));box-shadow:inset 0 0 40px rgba(61,255,168,.05)}
.bfa-gar b{text-shadow:0 0 14px rgba(61,255,168,.45)}
/* modules : icônes néon */
.bfw-ico{position:relative;box-shadow:0 0 22px -6px rgba(34,228,255,.55);transition:transform .35s,box-shadow .35s}
.bfw-mod:hover .bfw-ico{transform:translateY(-2px) rotate(-4deg);box-shadow:0 0 30px -4px rgba(34,228,255,.9),0 0 0 4px rgba(34,228,255,.08)}
/* FAQ */
.bfa-faq details{transition:background .35s;border-radius:0}
.bfa-faq details[open]{background:linear-gradient(90deg,rgba(34,228,255,.07),transparent 70%);box-shadow:inset 2px 0 0 #22e4ff}
.bfa-faq details[open] summary,.bfa-faq details[open] p{padding-left:18px}
.bfa-faq summary:hover{color:#7af0ff;text-shadow:0 0 18px rgba(34,228,255,.45)}
/* décors des sections, chargés à l'approche */
.bfx-deco{position:absolute;z-index:-1;pointer-events:none;background:center/cover no-repeat;opacity:0;transition:opacity 1.4s ease}
.bfx-deco.on{opacity:var(--px-o,.22)}
.bfx-host{position:relative;isolation:isolate}
@media (max-width:900px){#bfw-process .bfa-steps:before,#bfw-process .bfa-steps:after,#bfw-process .bfa-steps li:before{display:none}#bfw-process .bfa-steps{padding-top:0}.bfx-deco.on{opacity:calc(var(--px-o,.22)*.7)}}
@media (prefers-reduced-motion:reduce){.bfx-hud::after,.bfx-deco{transition:none}#bfw-process .bfa-steps{--px-p:1}}
/* JARVIS : orbe seul au repos, bouton « Parlez à JARVIS » aligné à sa gauche, plus de chevauchement */
div.fixed.bottom-3.right-3 [data-testid="voice-picker"],div.fixed.bottom-3.right-3 [data-testid="sound-toggle"]{max-width:0;opacity:0;overflow:hidden;transition:max-width .35s ease,opacity .25s ease}
div.fixed.bottom-3.right-3:hover [data-testid="voice-picker"],div.fixed.bottom-3.right-3:focus-within [data-testid="voice-picker"],
div.fixed.bottom-3.right-3:hover [data-testid="sound-toggle"],div.fixed.bottom-3.right-3:focus-within [data-testid="sound-toggle"]{max-width:90px;opacity:1}
div.fixed.bottom-3.right-3>.glass.rounded-full{gap:0!important;box-shadow:0 0 0 1px rgba(34,228,255,.25),0 10px 30px -8px rgba(0,0,0,.8),0 0 26px -6px rgba(34,228,255,.45)!important}
#bfChatBtn{right:104px!important;bottom:36px!important;height:44px;display:inline-flex!important;align-items:center;gap:8px;padding:0 18px!important;border-radius:999px!important;font-size:11px!important;letter-spacing:.16em;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 8px 26px -6px rgba(34,228,255,.6)!important;transition:right .35s ease,opacity .6s ease,transform .6s ease!important}
html:has(div.fixed.bottom-3.right-3:hover) #bfChatBtn{right:270px!important}
@media (max-width:639px){#bfChatBtn{right:88px!important;bottom:24px!important;height:40px;padding:0 14px!important;font-size:10px!important}
  html:has(div.fixed.bottom-3.right-3:hover) #bfChatBtn{right:88px!important;opacity:0!important}}
.bfa-mini{right:auto}