/* BlackFox · section « De l'idée au site web » */
.bfi{position:relative;margin:clamp(30px,6vw,80px) 0;font-family:"Space Grotesk",system-ui,sans-serif;--cy:#22e4ff;--mg:#ec4899;--rd:#ff2a3d}
.bfi-pin{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.bfi-pin:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 50% at 38% 62%,rgba(34,228,255,.14),transparent 70%),radial-gradient(ellipse 40% 50% at 85% 60%,rgba(236,72,153,.12),transparent 70%)}
.bfi-grid{position:relative;width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(260px,.8fr) 1.7fr;grid-template-rows:auto;align-items:center;gap:20px}
.bfi-txt{position:relative;z-index:5}
.bfi-eye{font:500 12px "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--cy)}.bfi-eye span{color:var(--mg)}
.bfi h3{margin:12px 0 14px;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.03em;color:#fff;font-weight:700}
.bfi h3 span{display:block;background:linear-gradient(90deg,#ff4d6d,var(--mg) 50%,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(236,72,153,.45))}
.bfi-txt p{color:#a7b0c2;line-height:1.6;max-width:420px;margin:0 0 20px}
.bfi-steps{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:10px;counter-reset:b}
.bfi-steps li{counter-increment:b;display:flex;align-items:center;gap:12px;color:#5d6678;font:500 13px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;transition:color .4s}
.bfi-steps li:before{content:"0" counter(b);display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.12);transition:all .4s}
.bfi-steps li.on{color:#e6f6ff}.bfi-steps li.on:before{border-color:var(--cy);color:var(--cy);box-shadow:0 0 16px rgba(34,228,255,.5);background:rgba(34,228,255,.08)}
.bfi-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bfi-btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:15px 26px;border-radius:14px;text-decoration:none;font-weight:600;color:#fff;
  background:linear-gradient(90deg,rgba(255,42,61,.18),rgba(236,72,153,.12));border:1px solid rgba(255,42,61,.8);box-shadow:0 0 0 1px rgba(255,42,61,.25) inset,0 0 26px rgba(255,42,61,.35);transition:box-shadow .3s,transform .3s}
.bfi-btn i{font-style:normal;color:var(--rd);font-size:20px;transition:transform .3s}
.bfi-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,42,61,.5) inset,0 0 44px rgba(255,42,61,.6)}.bfi-btn:hover i{transform:translateX(5px)}
.bfi-btn2{color:#cfe9ff;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(34,228,255,.5);padding:4px 0}
.bfi-btn:focus-visible,.bfi-btn2:focus-visible,.bfi-mk:focus-visible{outline:2px solid var(--cy);outline-offset:4px}
.bfi-note{display:block;margin-top:18px;color:#6b7487;font-size:12px;line-height:1.5;max-width:380px}
.bfi-stage{position:relative;height:clamp(380px,46vw,620px);perspective:1400px;perspective-origin:50% 40%;transform-style:preserve-3d;z-index:3}
.bfi-plate{position:absolute;left:6%;right:6%;bottom:2%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(34,228,255,.35),rgba(34,228,255,.06) 45%,transparent 70%);box-shadow:0 0 0 2px rgba(34,228,255,.25),0 0 0 14px rgba(34,228,255,.05),0 0 0 30px rgba(236,72,153,.05);transform:rotateX(70deg)}
.bfi-mk{all:unset;box-sizing:border-box;position:absolute;top:8%;width:46%;cursor:pointer;transform-style:preserve-3d;--rx:0deg;--ry:0deg}
.bfi-hotel{left:0;top:12%}.bfi-resto{left:27%;top:2%;z-index:2;width:48%}.bfi-entreprise{right:0;top:14%}
.bfi-in{display:block;border-radius:14px;overflow:hidden;background:rgba(6,10,20,.85);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s ease,box-shadow .5s;
  box-shadow:0 0 0 1.5px var(--c),0 0 26px color-mix(in srgb,var(--c) 55%,transparent),0 30px 70px -20px rgba(0,0,0,.9),inset 0 0 30px color-mix(in srgb,var(--c) 18%,transparent)}
.bfi-mk:hover .bfi-in,.bfi-mk:focus-visible .bfi-in{box-shadow:0 0 0 2px var(--c),0 0 50px color-mix(in srgb,var(--c) 75%,transparent),0 40px 90px -20px rgba(0,0,0,.95)}
.bfi-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(10,14,26,.95);border-bottom:1px solid rgba(255,255,255,.06)}
.bfi-bar i{width:8px;height:8px;border-radius:50%;background:#ff5f57}.bfi-bar i:nth-child(2){background:#febc2e}.bfi-bar i:nth-child(3){background:#28c840}
.bfi-bar span{margin-left:10px;flex:1;max-width:60%;padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.06);color:#8a95a8;font:500 10px "JetBrains Mono",monospace;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bfi-shot{position:relative;display:block;aspect-ratio:690/440;overflow:hidden}
.bfi-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.bfi-mk:hover .bfi-shot img{transform:scale(1.05)}
.bfi-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(34,228,255,.06) 0 1px,transparent 1px 3px);mix-blend-mode:screen;pointer-events:none}
.bfi-scan:after{content:"";position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c) 30%,transparent),transparent);animation:bfiScan 4.5s linear infinite}
@keyframes bfiScan{to{top:110%}}
.bfi-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 14px;background:linear-gradient(180deg,rgba(8,12,22,.95),rgba(4,6,12,.98))}
.bfi-meta b{color:#fff;font-size:15px}.bfi-meta em{font-style:normal;color:#8a95a8;font-size:12.5px}
.bfi-go{margin-left:auto;color:var(--c);font:600 11px "JetBrains Mono",monospace;letter-spacing:.08em;opacity:.7;transition:opacity .3s}
.bfi-mk:hover .bfi-go{opacity:1}
.bfi-fox{position:absolute;right:-2%;bottom:-4%;width:min(34vw,520px);margin:0;z-index:2;pointer-events:none;
  -webkit-mask:radial-gradient(ellipse 72% 80% at 55% 55%,#000 45%,transparent 78%);mask:radial-gradient(ellipse 72% 80% at 55% 55%,#000 45%,transparent 78%)}
.bfi-fox img{width:100%;height:auto;display:block}
.bfi-eye-l,.bfi-eye-r{position:absolute;top:44.6%;width:4.2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,#ff2a3d 35%,rgba(255,42,61,0) 70%);mix-blend-mode:screen;opacity:.0;transition:opacity .6s}
.bfi-eye-l{left:22.2%}.bfi-eye-r{left:34.6%}
.bfi-lit .bfi-eye-l,.bfi-lit .bfi-eye-r{opacity:1;animation:bfiEye 2.4s ease-in-out infinite}
@keyframes bfiEye{50%{transform:scale(1.6);filter:brightness(1.4)}}
.bfi-grid>.bfi-fox{grid-column:2;grid-row:1}
.bfi-stage{grid-column:2;grid-row:1;margin-right:min(22vw,330px)}
.bfi-pre .bfi-mk{opacity:0}
/* version mobile et mouvement réduit : simple, accessible, sans épinglage */
.bfi-lite .bfi-mk{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.bfi-lite .bfi-mk.in{opacity:1;transform:none}
@media (max-width:899px){
  .bfi-pin{min-height:0;display:block;padding:20px 0}
  .bfi-grid{grid-template-columns:1fr}
  .bfi-stage{grid-column:1;grid-row:auto;margin:0;height:auto;perspective:none;display:flex;flex-direction:column;gap:18px}
  .bfi-mk,.bfi-resto,.bfi-hotel,.bfi-entreprise{position:relative;inset:auto;left:auto;right:auto;top:auto;width:100%}
  .bfi-plate{display:none}
  .bfi-fox{position:relative;grid-row:1;grid-column:1;width:72%;margin:-10px auto -40px;right:auto;bottom:auto}
  .bfi-txt{grid-row:2}.bfi-stage{grid-row:3}
  .bfi-eye-l,.bfi-eye-r{opacity:1}
}
@media (prefers-reduced-motion:reduce){.bfi-scan:after,.bfi-lit .bfi-eye-l,.bfi-lit .bfi-eye-r{animation:none}.bfi-in,.bfi-shot img{transition:none}.bfi-lite .bfi-mk{opacity:1;transform:none}}
/* démonstration détaillée */
.bfi-demo{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;padding:3vw;background:rgba(2,3,7,.9);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.bfi-demo.on{opacity:1}
.bfi-win{position:relative;width:min(1100px,100%);max-height:92vh;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#070a12;
  box-shadow:0 0 0 1.5px var(--c),0 0 60px color-mix(in srgb,var(--c) 45%,transparent);transform:translateY(20px) scale(.97);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.bfi-demo.on .bfi-win{transform:none}
.bfi-x{position:absolute;top:5px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff;font-size:22px;cursor:pointer}
.bfi-page{overflow:auto;font-family:"Space Grotesk",system-ui,sans-serif}
.bfi-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px clamp(14px,3vw,30px);border-bottom:1px solid rgba(255,255,255,.06)}
.bfi-nav b{color:#fff;font-family:Georgia,serif;letter-spacing:.06em}
.bfi-nav span{display:flex;gap:16px;flex-wrap:wrap}.bfi-nav i{font-style:normal;color:#a7b0c2;font-size:14px}
.bfi-nav i.cta{color:#05070c;background:var(--c);padding:6px 14px;border-radius:999px;font-weight:600}
.bfi-hero img{width:100%;max-height:52vh;object-fit:cover;display:block}
.bfi-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:clamp(16px,3vw,30px)}
.bfi-col{border-radius:14px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.bfi-col span{display:block;aspect-ratio:16/9;background:center/cover}
.bfi-col:nth-child(2) span{background-position:30% 60%}.bfi-col:nth-child(3) span{background-position:80% 40%}
.bfi-col b{display:block;padding:12px 14px 2px;color:#fff}.bfi-col p{margin:0;padding:0 14px 14px;color:#a7b0c2;font-size:14px;line-height:1.5}
.bfi-band{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding:0 clamp(16px,3vw,30px) clamp(16px,3vw,30px)}
.bfi-band img{width:100%;border-radius:14px;display:block}
.bfi-band ul{margin:12px 0 0;padding:0;list-style:none}.bfi-band li{color:#dbe7f5;padding:8px 0 8px 24px;position:relative;border-bottom:1px solid rgba(255,255,255,.06)}
.bfi-band li:before{content:"";position:absolute;left:0;top:14px;width:10px;height:10px;border-radius:3px;background:var(--c);box-shadow:0 0 10px var(--c)}
.bfi-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px clamp(16px,3vw,30px) 26px;border-top:1px solid rgba(255,255,255,.06)}
.bfi-end p{margin:0;color:#8a95a8;font-size:13px;max-width:480px}
@media (max-width:700px){.bfi-cols,.bfi-band{grid-template-columns:1fr}.bfi-nav span{display:none}}
@media (min-width:900px){
 .bfi-grid{grid-template-columns:minmax(280px,.62fr) 2fr}
 .bfi-stage{height:min(66vh,600px);margin-right:min(15vw,240px)}
 .bfi-mk{width:52%}.bfi-hotel{left:-4%;top:24%}.bfi-resto{left:22%;top:12%;width:56%}.bfi-entreprise{right:4%;top:28%;width:46%}
 .bfi-fox{width:min(38vw,560px);right:-4%;bottom:-6%}
 .bfi-plate{bottom:0;height:26%}
}
.bfi-col span{background-size:260%!important;background-position:50% 92%!important}
.bfi-col:nth-child(2) span{background-size:220%!important;background-position:15% 85%!important}
.bfi-col:nth-child(3) span{background-position:85% 95%!important}
.bfx-in .bfa-mini.on,.bfi-on .bfa-mini.on{opacity:0;pointer-events:none}