/* BlackFox · Galerie 3D des réalisations + cartes holographiques */
.bfx{--bfx-p:1;position:relative;margin:0 auto 10px;max-width:1440px;font-family:"Space Grotesk",system-ui,sans-serif;outline:none}
.bfx-scene{position:relative;height:clamp(300px,44vw,560px);perspective:1600px;perspective-origin:50% 40%;touch-action:pan-y;user-select:none;
  transform:rotateX(calc((1 - var(--bfx-p))*16deg)) scale(calc(.86 + var(--bfx-p)*.14));opacity:calc(.25 + var(--bfx-p)*.75);transform-origin:50% 100%;will-change:transform}
.bfx-ring{position:absolute;inset:0;transform-style:preserve-3d}
.bfx-c{position:absolute;left:50%;top:46%;margin:0;width:clamp(260px,52vw,760px);aspect-ratio:16/9;transform-style:preserve-3d;cursor:pointer;
  transition:transform .9s cubic-bezier(.16,.84,.24,1),opacity .7s ease;-webkit-box-reflect:below 14px linear-gradient(transparent 62%,rgba(255,255,255,.16))}
.bfx-m{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#05070c;transition:transform .35s ease,box-shadow .6s;
  box-shadow:0 0 0 1px rgba(34,228,255,.16),0 30px 70px -24px rgba(0,0,0,.9)}
.bfx-m video,.bfx-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bfx-c:not(.on) .bfx-m{filter:saturate(.7) brightness(.62)}
.bfx-c.on .bfx-m{box-shadow:0 0 0 1px rgba(34,228,255,.55),0 0 34px rgba(34,228,255,.28),0 0 90px -10px rgba(236,72,153,.35),0 40px 90px -30px rgba(0,0,0,.95)}
.bfx-c.on .bfx-m:before{content:"";position:absolute;inset:-2px;z-index:2;border-radius:24px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--bfx-a,0deg),#22e4ff,#a855f7,#ec4899,#22e4ff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:bfxSpin 6s linear infinite;opacity:.85}
@property --bfx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes bfxSpin{to{--bfx-a:360deg}}
.bfx-glare{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.16),transparent 50%)}
.bfx-c.on:hover .bfx-glare{opacity:1}
.bfx-c figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(14px,2.4vw,26px);border-radius:0 0 22px 22px;
  background:linear-gradient(0deg,rgba(4,6,12,.9),transparent);display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(10px);transition:opacity .5s .25s,transform .5s .25s}
.bfx-c.on figcaption{opacity:1;transform:none}
.bfx-c figcaption span{font:500 11px "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:#22e4ff}
.bfx-c figcaption b{font-size:clamp(18px,2.2vw,28px);color:#fff;letter-spacing:-.01em}
.bfx-open{position:absolute;inset:0;z-index:4;background:none;border:0;border-radius:22px;cursor:zoom-in}
.bfx-open:focus-visible{outline:2px solid #22e4ff;outline-offset:4px}
.bfx-floor{position:absolute;left:8%;right:8%;bottom:0;height:42%;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 20%,rgba(34,228,255,.18),transparent 70%),repeating-linear-gradient(90deg,rgba(34,228,255,.07) 0 1px,transparent 1px 60px);
  -webkit-mask:linear-gradient(transparent,#000 30%,transparent);mask:linear-gradient(transparent,#000 30%,transparent);transform:perspective(500px) rotateX(62deg);transform-origin:50% 100%}
.bfx-ui{display:flex;align-items:center;justify-content:center;gap:18px;margin:clamp(6px,2vw,20px) 0 4px}
.bfx-nav{width:48px;height:48px;border-radius:50%;border:1px solid rgba(34,228,255,.35);background:rgba(6,10,18,.7);color:#e6f6ff;font-size:20px;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s}
.bfx-nav:hover{transform:scale(1.08);background:rgba(34,228,255,.14);box-shadow:0 0 22px rgba(34,228,255,.35)}
.bfx-nav:focus-visible,.bfx-dots button:focus-visible{outline:2px solid #22e4ff;outline-offset:3px}
.bfx-dots{display:flex;gap:8px}
.bfx-dots button{appearance:none;border:0;padding:0;width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);cursor:pointer;transition:width .35s,background .35s}
.bfx-dots button.on{width:46px;background:linear-gradient(90deg,#22e4ff,#ec4899)}
.bfx-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bfx-lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:4vw;background:rgba(3,4,8,.94);animation:bfxIn .35s ease}
.bfx-lb video,.bfx-lb img{max-width:100%;max-height:100%;border-radius:18px;box-shadow:0 0 0 1px rgba(34,228,255,.35),0 0 80px rgba(34,228,255,.18)}
.bfx-lb button{position:absolute;top:18px;right:24px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font-size:26px;cursor:pointer}
@keyframes bfxIn{from{opacity:0}}
@media (max-width:720px){.bfx-scene{height:clamp(260px,62vw,420px)}.bfx-c{width:78vw;-webkit-box-reflect:none}.bfx-nav{width:42px;height:42px}}
/* cartes tarifaires holographiques */
.bfw-pack{transform-style:preserve-3d;will-change:transform}
.bfx-holo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;mix-blend-mode:color-dodge;
  background:radial-gradient(520px circle at var(--hx,50%) var(--hy,0%),rgba(255,255,255,.14),transparent 45%),
  linear-gradient(var(--ha,120deg),rgba(34,228,255,.0) 20%,rgba(34,228,255,.16) 35%,rgba(168,85,247,.16) 50%,rgba(236,72,153,.14) 65%,rgba(34,228,255,0) 80%);
  background-size:100% 100%,240% 240%;background-position:center,var(--hx,50%) var(--hy,50%)}
.bfw-pack:hover .bfx-holo,.bfw-pack:focus-within .bfx-holo{opacity:1}
.bfw-pack>*:not(.bfx-holo){position:relative;z-index:1}
.bfw-pack .bfw-badge{position:absolute;z-index:2}
.bfw-pack:after{z-index:0}
.bfw-neon .bfx-holo{opacity:.45}
.bfw-pack .bfw-price{transition:text-shadow .4s}
.bfw-pack:hover .bfw-price{text-shadow:0 0 18px rgba(34,228,255,.55)}
@media (prefers-reduced-motion:reduce){.bfx-scene{transform:none;opacity:1}.bfx-c{transition:none}.bfx-c.on .bfx-m:before{animation:none}.bfx-c figcaption{transition:none}}
.bfx-c{-webkit-box-reflect:none}
.bfx-m{-webkit-box-reflect:below 14px linear-gradient(transparent 64%,rgba(255,255,255,.14))}
.bfx-in .bfa-mini.on{opacity:0;pointer-events:none}
@media (max-width:720px){.bfx-m{-webkit-box-reflect:none}}
.bfw-packs{position:relative;isolation:isolate}
.bfx-pbg{position:absolute;inset:-70px -6vw -50px;z-index:-1;pointer-events:none;background:center 30%/cover no-repeat;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask:radial-gradient(ellipse 60% 70% at 50% 45%,#000 30%,transparent 75%);mask:radial-gradient(ellipse 60% 70% at 50% 45%,#000 30%,transparent 75%);filter:saturate(1.1)}
.bfx-pbg.on{opacity:.32}
.bfx-m{-webkit-box-reflect:none}
.bfx-c.on:after{content:"";position:absolute;left:8%;right:8%;bottom:-38px;height:40px;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(34,228,255,.35),rgba(236,72,153,.12) 45%,transparent 70%);filter:blur(10px)}
.bfx-c figcaption{background:linear-gradient(0deg,rgba(4,6,12,.94) 20%,rgba(4,6,12,.55) 60%,transparent)}
/* 11/11 : le carrousel 3D ne fait plus déborder la page sur mobile */
.bfx{overflow-x:clip}
@media (max-width:900px){#main{overflow-x:clip}}