/* BlackFox — accueil apaisé et deux portes (lots 1 et 2, 08/11/2026). Additif, réversible : retirer bf-accueil.* suffit. */

/* Démarrage direct : l'écran BFX-OS n'est plus une barrière (entrée silencieuse automatique). */
html.bf-direct #root > div.fixed.inset-0:has([data-testid="boot-silent"]){opacity:0!important;pointer-events:none!important;transition:opacity .35s}

html.bf-direct.is-locked,html.bf-direct.is-locked body{overflow:auto!important}

/* Un seul point d'entrée flottant, qui n'apparaît qu'après un moment. */
#bfChatBtn{transition:opacity .6s ease,transform .6s ease!important}
html:not(.bf-chat-ok) #bfChatBtn{opacity:0!important;pointer-events:none!important;transform:translateY(14px)!important}
@media (max-width:640px){#bfChatBtn{padding:9px 13px!important;font-size:10.5px!important;right:12px!important;bottom:72px!important}}

/* Effets de fond allégés sur mobile et pour qui demande moins d'animations. */
@media (max-width:768px){.bg-fx.bg-grain,.bg-fx.bg-scan{display:none!important}}
@media (prefers-reduced-motion:reduce){.bg-fx{animation:none!important}.bg-fx.bg-grain,.bg-fx.bg-scan{display:none!important}}

/* Menu d'en-tête épuré (ordinateur) */
header .bfa-hide{display:none!important}
header .bfa-navnew{position:relative}

/* Choix dans l'accueil */
.bfa-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bfa-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;font:500 14px/1.2 "Space Grotesk",system-ui,sans-serif;color:#e8ecf4;text-decoration:none;background:rgba(10,14,22,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);transition:border-color .25s,background .25s,transform .25s}
.bfa-chip:hover{transform:translateY(-1px)}
.bfa-chip i{font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.14em;font-style:normal}
.bfa-chip.c i{color:#22e4ff}.bfa-chip.c:hover{border-color:rgba(34,228,255,.55);background:rgba(34,228,255,.08)}
.bfa-chip.p i{color:#ff4d66}.bfa-chip.p:hover{border-color:rgba(255,77,102,.55);background:rgba(255,77,102,.08)}

/* Section « Deux portes » */
#portes{position:relative;padding:clamp(64px,8vw,110px) 20px;background:#05060a;color:#e8ecf4;font-family:"Space Grotesk",system-ui,sans-serif}
#portes *{box-sizing:border-box}
#portes .bfa-wrap{max-width:1180px;margin:0 auto}
#portes .bfa-eye{font:500 12px "JetBrains Mono",monospace;letter-spacing:.18em;color:#8a95a8;text-transform:uppercase}
#portes h2{margin:14px 0 34px;font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em;font-weight:700}
#portes .bfa-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#portes .bfa-door{position:relative;display:flex;flex-direction:column;min-height:440px;padding:30px;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,.08);background:#0a0d14;isolation:isolate;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
#portes .bfa-door:before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.32;transition:opacity .5s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
#portes .bfa-door:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,6,10,.35) 0%,rgba(5,6,10,.92) 62%)}
#portes .bfa-door.c:before{background-image:var(--img-c)}
#portes .bfa-door.p:before{background-image:var(--img-p)}
#portes .bfa-door:hover{transform:translateY(-4px)}
#portes .bfa-door:hover:before{opacity:.5;transform:scale(1.04)}
#portes .bfa-door.c:hover{border-color:rgba(34,228,255,.5);box-shadow:0 24px 70px rgba(34,228,255,.12)}
#portes .bfa-door.p:hover{border-color:rgba(255,77,102,.5);box-shadow:0 24px 70px rgba(255,46,77,.12)}
#portes .bfa-k{font:600 12px "JetBrains Mono",monospace;letter-spacing:.2em}
#portes .c .bfa-k{color:#22e4ff}#portes .p .bfa-k{color:#ff4d66}
#portes h3{margin:10px 0 10px;font-size:clamp(26px,3vw,36px);line-height:1.1;font-weight:700}
#portes .bfa-door p{margin:0 0 18px;color:#aab3c5;font-size:16px;line-height:1.55;max-width:30em}
#portes ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px;font-size:15px;color:#d6dce8}
#portes li{display:flex;gap:10px;align-items:baseline}
#portes li:before{content:"";flex:0 0 6px;height:6px;border-radius:50%;transform:translateY(-2px)}
#portes .c li:before{background:#22e4ff;box-shadow:0 0 8px #22e4ff}#portes .p li:before{background:#ff4d66;box-shadow:0 0 8px #ff4d66}
#portes .bfa-go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
#portes .bfa-go b{display:inline-block;transition:transform .3s}
#portes .bfa-door:hover .bfa-go b{transform:translateX(5px)}
#portes .bfa-price{font:500 13px "JetBrains Mono",monospace;color:#8a95a8;margin-bottom:6px}
#portes .bfa-foot{margin-top:22px;color:#6f7a8d;font-size:14px}
#portes .bfa-foot a{color:#c9f6ff}
@media (max-width:860px){#portes .bfa-grid{grid-template-columns:1fr}#portes .bfa-door{min-height:0}}

/* ===== Menus rangés en trois chapitres (08/11/2026) ===== */
header [data-bfa-orig]>*:not(.bfa-own){display:none!important}
header .bfa-top{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;font:500 14px "Space Grotesk",system-ui,sans-serif;color:#cfd6e3;background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
header .bfa-top:hover{color:#fff;background:rgba(255,255,255,.05)}
header .bfa-top i{font-style:normal;font-size:10px;opacity:.7;transition:transform .2s}
header .bfa-contact{color:#03121a!important;background:#e8ecf4!important;font-weight:600!important;margin-left:6px}
header .bfa-contact:hover{background:#fff!important}
header .bfa-dd{position:relative}
header .bfa-dd.open .bfa-top i,header .bfa-dd:hover .bfa-top i{transform:rotate(180deg)}
header .bfa-pan{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;padding:10px;border-radius:14px;background:rgba(8,11,18,.97);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.55);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s}
header .bfa-dd:hover .bfa-pan,header .bfa-dd.open .bfa-pan{opacity:1;visibility:visible;transform:none}
header .bfa-pan:before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
header .bfa-pk{font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.16em;padding:6px 10px 10px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:6px}
header .bfa-dd.c .bfa-pk{color:#22e4ff}header .bfa-dd.p .bfa-pk{color:#ff4d66}
header .bfa-pan a{display:block;padding:9px 10px;border-radius:9px;font:500 14px "Space Grotesk",system-ui,sans-serif;color:#d6dce8;text-decoration:none}
header .bfa-pan a:hover{background:rgba(255,255,255,.06);color:#fff}

/* Menu mobile / tablette */
#mnav ol[data-bfa-orig]{display:none!important}
.bfa-mnav{display:grid;gap:26px;margin-bottom:26px}
.bfa-mg{display:flex;flex-direction:column}
.bfa-mk{font:600 11px "JetBrains Mono",monospace;letter-spacing:.2em;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px;display:flex;gap:10px;align-items:baseline}
.bfa-mk span{font:500 12px "Space Grotesk",sans-serif;letter-spacing:0;color:#8a95a8}
.bfa-mg.c .bfa-mk{color:#22e4ff}.bfa-mg.p .bfa-mk{color:#ff4d66}.bfa-mg.b .bfa-mk{color:#c9d2e3}
.bfa-mg a{display:block;padding:11px 0;font:600 22px/1.2 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.01em;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05)}
.bfa-mg a.bfa-contact{margin-top:12px;border:0;border-radius:14px;padding:15px 18px;text-align:center;background:#e8ecf4;color:#03121a;font-size:18px}

/* Annonces de chapitre dans la page */
.bfa-chap{position:relative;z-index:1;padding:clamp(56px,7vw,96px) 20px 0;font-family:"Space Grotesk",system-ui,sans-serif}
.bfa-cw{max-width:1440px;margin:0 auto;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:0 clamp(0px,2vw,32px) 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.bfa-cn{font:600 13px "JetBrains Mono",monospace;letter-spacing:.2em}
.bfa-ct{font-size:clamp(28px,3.6vw,44px);font-weight:700;letter-spacing:-.02em;color:#fff}
.bfa-cd{color:#8a95a8;font-size:15px}
.bfa-chap.c .bfa-cn{color:#22e4ff}.bfa-chap.p .bfa-cn{color:#ff4d66}.bfa-chap.b .bfa-cn{color:#c9d2e3}

.bfa-mnav .bfw-navnew,.bfa-mnav a:not([href]){display:none!important}
html:has(#mnav[aria-hidden="false"]) #bfChatBtn,html:has(#mnav[aria-hidden="false"]) #bfPill,html:has(#mnav[aria-hidden="false"]) div.fixed.bottom-3.right-3{opacity:0!important;pointer-events:none!important}

/* ===== 08/11 · diagnostic 2 : contact et tarifs web ===== */
.bfa-sub{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.bfa-sub a{font:500 13px "JetBrains Mono",monospace;letter-spacing:.06em;color:#c9f6ff;text-decoration:none;padding:8px 13px;border-radius:999px;border:1px solid rgba(34,228,255,.3);background:rgba(34,228,255,.05)}
.bfa-sub a:hover{background:rgba(34,228,255,.14)}
.bfa-sub a:last-child{color:#03121a;background:#e8ecf4;border-color:#e8ecf4;font-weight:600}
.bfa-ask{margin:22px 0 10px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:20px 22px;border-radius:16px;border:1px solid rgba(34,228,255,.28);background:linear-gradient(90deg,rgba(34,228,255,.07),rgba(168,85,247,.05));font-family:"Space Grotesk",system-ui,sans-serif}
.bfa-ask b{display:block;color:#fff;font-size:18px}.bfa-ask span{color:#aab3c5;font-size:15px}
.bfa-ask-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bfa-ask-b a{text-decoration:none;font-weight:600;font-size:15px;padding:12px 18px;border-radius:12px}
.bfa-ask-b .go{color:#03121a;background:linear-gradient(90deg,#22e4ff,#7ae8ff)}
.bfa-ask-b .ct{color:#03121a;background:#e8ecf4}
.bfa-ask-b .ml{color:#c9f6ff;font:500 13px "JetBrains Mono",monospace;padding:12px 4px;overflow-wrap:anywhere}
header .bfa-mct{display:none}
@media (max-width:1279px){header .bfa-mct{display:inline-flex;align-items:center;margin-right:6px;padding:8px 14px;border-radius:10px;background:#e8ecf4;color:#03121a;font:600 13px "Space Grotesk",system-ui,sans-serif;text-decoration:none}}
@media (max-width:1279px){header a.btn-primary[href="#diagnostic"]{display:none!important}}

/* 9. Titre d'accueil */
.bfa-off{display:none!important}
.bfa-h1{margin:20px 0 0;font-family:"Space Grotesk",system-ui,sans-serif;font-weight:600;font-size:clamp(40px,7vw,112px);line-height:.94;letter-spacing:-.045em;color:#fff}
.bfa-h1>span{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.bfa-h1 i{display:inline-block;font-style:normal;animation:bfaRise 1.1s cubic-bezier(.2,.75,.15,1) both}
.bfa-h1>span:nth-child(2) i{animation-delay:.12s}.bfa-h1>span:nth-child(3) i{animation-delay:.24s}.bfa-h1>span:nth-child(4) i{animation-delay:.36s}
.bfa-h1 em{font-style:normal;-webkit-background-clip:text;background-clip:text;color:transparent}
.bfa-h1 em.c{background-image:linear-gradient(90deg,#22e4ff,#a855f7)}.bfa-h1 em.p{background-image:linear-gradient(90deg,#ff2e4d,#ff8fa0)}
@keyframes bfaRise{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
/* 10. Approfondissements repliés */
[data-bfa-fold="1"]{display:none!important}
.bfa-more{position:relative;z-index:1;padding:clamp(48px,6vw,80px) 20px;font-family:"Space Grotesk",system-ui,sans-serif}
.bfa-more .bfa-wrap{max-width:1180px;margin:0 auto}
.bfa-mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.bfa-mc{appearance:none;text-align:left;cursor:pointer;font:inherit;color:#e8ecf4;background:linear-gradient(180deg,#0c111b,#07090f);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:6px;transition:border-color .3s,transform .3s}
.bfa-mc:hover{border-color:rgba(34,228,255,.4);transform:translateY(-2px)}
.bfa-mc b{font-size:19px}.bfa-mc span{color:#8a95a8;font-size:14px;line-height:1.5}
.bfa-mc i{font:500 12px "JetBrains Mono",monospace;font-style:normal;letter-spacing:.12em;color:#22e4ff;margin-top:6px}
.bfa-mc.on{border-color:rgba(61,255,168,.4)}.bfa-mc.on i{color:#3dffa8}
/* 11. Vitrine */
#bfv{max-width:1440px;margin:clamp(40px,6vw,70px) auto clamp(30px,5vw,60px);font-family:"Space Grotesk",system-ui,sans-serif}
.bfv-head{padding:0 20px;margin-bottom:22px}#bfv .bfv{max-width:none}#bfv .bfa-eye{font:500 12px "JetBrains Mono",monospace;letter-spacing:.18em;color:#22e4ff;text-transform:uppercase}
.bfv-head h3{margin:10px 0 6px;font-size:clamp(28px,3.6vw,42px);line-height:1.05;letter-spacing:-.02em;color:#fff;font-weight:700}
.bfv-head h3 em{font-style:normal;background:linear-gradient(90deg,#22e4ff,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.bfv-head p{color:#8a95a8;margin:0;max-width:620px}
#bfv-mount{min-height:0}
/* 12. Chapitres illustrés */
.bfa-chap.bfa-bg{overflow:hidden;padding-top:clamp(140px,16vw,230px)}
.bfa-cimg{position:absolute;inset:0;background-size:cover;background-position:70% 35%;opacity:0;transition:opacity 1.2s ease;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 60%,transparent 100%)}
.bfa-cimg.on{opacity:.42}
.bfa-cimg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05060a 0,rgba(5,6,10,.55) 45%,rgba(5,6,10,.1) 100%)}
.bfa-chap .bfa-cw{position:relative}
@media (prefers-reduced-motion:reduce){.bfa-h1 i{animation:none}.bfa-cimg{transition:none}}
#portes .bfa-door.c:before{background-size:cover;background-position:60% 30%}

/* 13. Méthode, garanties, FAQ */
.bfa-pn{color:#8a95a8;font-size:14px;margin:0;max-width:340px}
.bfa-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.bfa-steps li{position:relative;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));padding:22px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.bfa-steps li:after{content:"";position:absolute;top:34px;right:-14px;width:14px;height:1px;background:linear-gradient(90deg,#22e4ff,transparent)}
.bfa-steps li:last-child:after{display:none}
.bfa-sd{font:600 13px "JetBrains Mono",monospace;letter-spacing:.14em;color:#22e4ff}
.bfa-steps b{font-size:19px;color:#fff}.bfa-steps span:last-child{color:#a7b0c2;font-size:14.5px;line-height:1.5}
.bfa-gar{list-style:none;margin:14px 0 0;padding:16px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-radius:18px;border:1px solid rgba(61,255,168,.22);background:rgba(61,255,168,.04)}
.bfa-gar b{display:block;color:#3dffa8;font-size:15px}.bfa-gar span{color:#a7b0c2;font-size:13.5px}
.bfa-faq{max-width:900px}
.bfa-faq details{border-bottom:1px solid rgba(255,255,255,.08)}
.bfa-faq details:first-of-type{margin-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.bfa-faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-size:18px;font-weight:500;color:#fff;position:relative}
.bfa-faq summary::-webkit-details-marker{display:none}
.bfa-faq summary:after{content:"+";position:absolute;right:6px;top:16px;font:300 26px "Space Grotesk";color:#22e4ff;transition:transform .3s}
.bfa-faq details[open] summary:after{transform:rotate(45deg)}
.bfa-faq details p{margin:0 0 20px;color:#a7b0c2;line-height:1.6;max-width:720px}
.bfa-fq{color:#8a95a8;margin-top:20px}.bfa-fq a{color:#22e4ff}
@media (max-width:900px){.bfa-steps,.bfa-gar{grid-template-columns:1fr 1fr}.bfa-steps li:after{display:none}}
@media (max-width:520px){.bfa-steps,.bfa-gar{grid-template-columns:1fr}}
/* 14. Projecteur */
.bfa-spot{background-image:radial-gradient(420px circle at var(--mx) var(--my),rgba(34,228,255,.09),transparent 60%)!important}

/* 15. Finitions */
[data-bfa-hide="1"]{display:none!important}
.bfa-fmsg{margin:4px 0 0;color:#ffb3c0;font-size:14px}
.bfa-sent{border:1px solid rgba(61,255,168,.35);background:rgba(61,255,168,.06);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:6px;font-family:"Space Grotesk",system-ui,sans-serif}
.bfa-sent b{color:#3dffa8;font-size:20px}.bfa-sent span{color:#c9d2e2}
/* 11 bis. Le clip en ouverture du chapitre web */
.bfv-film{position:relative;margin:0 20px;border-radius:26px;overflow:hidden;aspect-ratio:16/9;max-height:78vh;width:calc(100% - 40px);background:#000;box-shadow:0 40px 120px -30px rgba(34,228,255,.35),0 0 0 1px rgba(34,228,255,.2)}
.bfv-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bfv-over{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,4vw,48px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;background:linear-gradient(0deg,rgba(5,6,10,.85),rgba(5,6,10,0));font-family:"Space Grotesk",system-ui,sans-serif}
.bfv-over .bfv-k{width:100%;font:500 11px "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:#22e4ff}
.bfv-over b{font-size:clamp(26px,4vw,54px);line-height:1;letter-spacing:-.02em;color:#fff;font-weight:700}
.bfv-over b em{font-style:normal;background:linear-gradient(90deg,#22e4ff,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.bfv-cta{text-decoration:none;font-weight:600;font-size:15px;padding:14px 22px;border-radius:12px;color:#03121a;background:linear-gradient(90deg,#22e4ff,#7ae8ff)}
@media (max-width:620px){.bfv-film{aspect-ratio:4/5;margin:0 12px;width:calc(100% - 24px)}.bfv-film video{object-position:50% 50%}}
.bfv-film video{transition:opacity .35s ease}.bfv-film.sw video{opacity:0}
.bfv-dots{width:100%;display:flex;gap:8px;margin-top:4px}
.bfv-dots button{appearance:none;border:0;cursor:pointer;width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);padding:0;transition:background .3s,width .3s}
.bfv-dots button.on{background:#22e4ff;width:54px}
.bfv-film:before{content:"";position:absolute;inset:-40px;background:var(--bk) center/cover no-repeat;filter:blur(36px) brightness(.45) saturate(1.3);opacity:0;transition:opacity .4s}
.bfv-film.vert:before{opacity:1}
.bfv-film.vert video{object-fit:contain}
@media (max-width:620px){.bfv-film.vert{aspect-ratio:9/14}.bfv-film.vert video{object-fit:cover}}
/* 16. En-tête du chapitre web : une seule colonne, lisible */
#creation-web .bfw-head{display:flex!important;flex-direction:column;align-items:flex-start;gap:18px;grid-template-columns:none}
#creation-web .bfw-head .bfw-h2{order:1;margin:0;text-align:left}
#creation-web .bfw-head .bfw-lead{order:2;max-width:640px;margin:0}
#creation-web .bfw-head .bfa-sub{order:3;margin:6px 0 0}
/* 17. Le renard de la création web, à droite du titre */
#creation-web .bfw-head{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(24px,4vw,64px);row-gap:18px;align-items:center}
#creation-web .bfw-head>*:not(.bfa-wfox){grid-column:1}
.bfa-wfox{grid-column:2;grid-row:1/span 3;margin:0;position:relative;border-radius:28px;overflow:hidden;aspect-ratio:1/1;max-width:520px;justify-self:end;box-shadow:0 30px 100px -20px rgba(255,46,140,.35),0 0 0 1px rgba(34,228,255,.22)}
.bfa-wfox img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.bfa-wfox:hover img{transform:scale(1.09)}
.bfa-wfox:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,6,10,.55))}
@media (max-width:900px){#creation-web .bfw-head{grid-template-columns:1fr}.bfa-wfox{grid-column:1;grid-row:auto;justify-self:stretch;max-width:none;aspect-ratio:4/3}.bfa-wfox img{object-position:50% 35%}}
#creation-web .bfw-quote{font-size:clamp(22px,2vw,28px)!important;line-height:1.2;letter-spacing:-.01em;color:#c9d2e2;-webkit-text-fill-color:#c9d2e2;background:none}
/* 18. Bande de clips qui défile en continu */
.bfv-strip{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bfv-track{display:flex;gap:16px;width:max-content;animation:bfvRun 48s linear infinite}
.bfv-strip:hover .bfv-track{animation-play-state:paused}
.bfv-still .bfv-track{animation:none}
@keyframes bfvRun{to{transform:translateX(calc(-50% - 8px))}}
.bfv-t{margin:0;flex:0 0 auto;width:clamp(280px,40vw,620px);aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(34,228,255,.18),0 24px 60px -20px rgba(0,0,0,.8);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.bfv-t:hover{transform:scale(1.03);box-shadow:0 0 0 1px rgba(34,228,255,.5),0 30px 80px -20px rgba(34,228,255,.35)}
.bfv-t video{width:100%;height:100%;object-fit:cover;display:block}
.bfv-cap{max-width:1440px;margin:26px auto 0;padding:0 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;font-family:"Space Grotesk",system-ui,sans-serif}
.bfv-cap .bfv-k{display:block;font:500 11px "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:#22e4ff;margin-bottom:8px}
.bfv-cap b{font-size:clamp(26px,3.6vw,48px);line-height:1;letter-spacing:-.02em;color:#fff;font-weight:700}
.bfv-cap b em{font-style:normal;background:linear-gradient(90deg,#22e4ff,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:620px){.bfv-t{width:78vw}.bfv-track{animation-duration:36s;gap:12px}}
@media (prefers-reduced-motion:reduce){.bfv-track{animation:none}.bfv-strip{overflow-x:auto}}
.bfv-t.bfv-i img{width:100%;height:100%;object-fit:cover;display:block}
.bfv-track{animation-duration:70s}
@media (max-width:620px){.bfv-track{animation-duration:52s}}
/* 19. Accroche visible dès l'affichage (meilleur temps d'affichage mobile) */
#top p[data-hero-fade][data-bfa]{opacity:1!important;transform:none!important;filter:none!important}
/* 20. Effets primés */
.bfa-w{transition:opacity .25s linear}
.bfa-px{position:absolute;left:0;right:0;bottom:0;height:28px;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(2,1fr);pointer-events:none;z-index:2}
.bfa-px i{background:#05060a;transform:scaleY(0);transform-origin:bottom;transition:transform .3s steps(4) var(--d)}
.bfa-px.on i{transform:scaleY(1)}
.bfa-chap.c .bfa-px i:nth-child(3n){background:rgba(34,228,255,.35)}.bfa-chap.p .bfa-px i:nth-child(3n){background:rgba(255,46,77,.35)}.bfa-chap.b .bfa-px i:nth-child(3n){background:rgba(168,85,247,.35)}
.bfa-clock{font:500 12px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#3dffa8;margin-bottom:10px}
.bfa-clock:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#3dffa8;box-shadow:0 0 10px #3dffa8;margin-right:9px;vertical-align:1px;animation:bfgP 1.6s infinite}
@media (prefers-reduced-motion:reduce){.bfa-px i{transform:none;transition:none}}
/* 21. Mini-lecteur */
.bfa-mini{position:fixed;left:22px;bottom:72px;z-index:55;width:190px;aspect-ratio:16/9;padding:0;border:0;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;box-shadow:0 0 0 1px rgba(34,228,255,.35),0 18px 50px rgba(0,0,0,.6);opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .4s,transform .4s}
.bfa-mini.on{opacity:1;transform:none;pointer-events:auto}
.bfa-mini video{width:100%;height:100%;object-fit:cover;display:block}
.bfa-mini span{position:absolute;left:8px;bottom:6px;font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:#fff;background:rgba(5,6,10,.6);padding:4px 7px;border-radius:6px}
.bfa-mini:hover{box-shadow:0 0 0 1px #22e4ff,0 18px 60px rgba(34,228,255,.3)}
.bfa-lb{position:fixed;inset:0;z-index:200;background:rgba(3,4,8,.92);display:flex;align-items:center;justify-content:center;padding:4vw}
.bfa-lb video{max-width:100%;max-height:100%;border-radius:16px;box-shadow:0 0 0 1px rgba(34,228,255,.3)}
.bfa-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}
@media (max-width:1023px){.bfa-mini{display:none}}

.bfa-fq a{text-decoration:underline;text-underline-offset:3px}

/* ===== 11/11 · cartes « Que voulez-vous faire » : visuels nets, dégradé localisé sous les libellés ===== */
#portes .bfa-door{min-height:0;padding:calc(50% - 64px) 30px 30px}
#portes .bfa-door:before{inset:0 0 auto 0;aspect-ratio:2/1;opacity:1;background-size:cover;filter:none;transform:none}
#portes .bfa-door.c:before{background-position:50% 28%}
#portes .bfa-door.p:before{background-position:50% 50%}
#portes .bfa-door:after{inset:0 0 auto 0;aspect-ratio:2/1;background:linear-gradient(180deg,rgba(10,13,20,0) 0,rgba(10,13,20,0) 52%,rgba(10,13,20,.72) 78%,#0a0d14 100%)}
#portes .bfa-door:hover:before{opacity:1;transform:scale(1.03);filter:brightness(1.06)}
#portes .bfa-k,#portes .bfa-door h3{text-shadow:0 2px 14px rgba(5,6,10,.85)}
@media (max-width:860px){#portes .bfa-door{padding:calc(50% - 44px) 22px 24px}}

/* ===== 11/11 · retour visuel des cartes : survol et focus clavier (bordure lumineuse, image qui glisse) ===== */
#portes .bfa-door{--bfa-glow:34,228,255;outline:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s}
#portes .bfa-door.p{--bfa-glow:255,77,102}
#portes .bfa-door:before{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .5s}
#portes .bfa-door .bfa-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;opacity:0;transition:opacity .4s;
 background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(var(--bfa-glow),.95),rgba(var(--bfa-glow),.18) 45%,transparent 70%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#portes .bfa-door:hover,#portes .bfa-door:focus-visible{transform:translateY(-4px);border-color:rgba(var(--bfa-glow),.45);box-shadow:0 22px 60px -18px rgba(var(--bfa-glow),.35)}
#portes .bfa-door:hover .bfa-ring,#portes .bfa-door:focus-visible .bfa-ring{opacity:1}
#portes .bfa-door:hover:before,#portes .bfa-door:focus-visible:before{transform:scale(1.04) translate3d(var(--px,0px),var(--py,0px),0);filter:brightness(1.06)}
#portes .bfa-door:focus-visible{box-shadow:0 0 0 2px #05060a,0 0 0 4px rgba(var(--bfa-glow),.9),0 22px 60px -18px rgba(var(--bfa-glow),.35)}
#portes .bfa-door:focus-visible .bfa-go b,#portes .bfa-door:hover .bfa-go b{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
 #portes .bfa-door,#portes .bfa-door:before,#portes .bfa-go b{transition:border-color .2s,box-shadow .2s,opacity .2s}
 #portes .bfa-door:hover,#portes .bfa-door:focus-visible{transform:none}
 #portes .bfa-door:hover:before,#portes .bfa-door:focus-visible:before{transform:none}
 #portes .bfa-door:hover .bfa-go b,#portes .bfa-door:focus-visible .bfa-go b{transform:none}
}
#portes .bfa-door:before{transform-origin:50% 0;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 97%);mask-image:linear-gradient(180deg,#000 72%,transparent 97%)}

/* ===== 11/11 · premier écran : hiérarchie du titre et trois accès directs ===== */
.bfa-h1{font-size:clamp(40px,6.1vw,96px);line-height:.98;max-width:13ch;text-shadow:0 2px 30px rgba(3,3,5,.7)}
#top p[data-bfa]{color:#c3cad6;max-width:34em}
.bfa-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;font-family:"Space Grotesk",system-ui,sans-serif}
.bfa-act{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;border-radius:14px;font-weight:600;font-size:15.5px;color:#eef1f6;text-decoration:none;background:rgba(10,11,15,.72);border:1px solid #2e333d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.bfa-act i{font-style:normal;font-size:11px;color:#ff4d66}
.bfa-act.cy i{width:8px;height:8px;border-radius:50%;background:#ff2e4d;box-shadow:0 0 10px #ff2e4d}
.bfa-act:hover,.bfa-act:focus-visible{border-color:#ff2e4d;background:rgba(255,46,77,.08);transform:translateY(-1px)}
.bfa-act.pri{background:#d91f3a;border-color:#d91f3a;color:#fff;box-shadow:0 14px 40px -14px rgba(255,46,77,.7)}
.bfa-act.pri b{transition:transform .25s}
.bfa-act.pri:hover,.bfa-act.pri:focus-visible{background:#ea2a45;border-color:#ff5a70}.bfa-act.pri:hover b{transform:translateX(4px)}
.bfa-act:focus-visible,.bfa-sim:focus-visible,.bfa-demo:focus-visible{outline:2px solid #fff;outline-offset:3px}
#top .bfa-xp{margin-top:14px!important;align-items:center}
.bfa-sim{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#aab3c5;font:500 14px "Space Grotesk",system-ui,sans-serif;text-decoration:underline;text-decoration-color:rgba(255,46,77,.5);text-underline-offset:5px}
.bfa-sim:hover{color:#fff}
@media (max-width:640px){.bfa-act{flex:1 1 100%;justify-content:center}#top .bfa-xp{gap:8px}}
@media (prefers-reduced-motion:reduce){.bfa-act,.bfa-act.pri b{transition:none}.bfa-act:hover,.bfa-act:focus-visible{transform:none}.bfa-act.pri:hover b{transform:none}}

/* ===== 11/11 · sélection de démos près de l'entrée Créer ===== */
#portes .bfa-demos{margin-top:22px;padding:22px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:#080a10}
#portes .bfa-dh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:16px}
#portes .bfa-dh .bfa-eye{color:#ff4d66}
#portes .bfa-dh h3{margin:0;font-size:clamp(20px,2vw,24px);font-weight:700}
#portes .bfa-dh p{margin:0;color:#8a95a8;font-size:13.5px;flex:1 1 280px}
#portes .bfa-demos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#portes .bfa-demos li{display:block}#portes .bfa-demos li:before{display:none}
.bfa-demo{display:flex;flex-direction:column;gap:3px;height:100%;padding:0 0 14px;border-radius:16px;overflow:hidden;text-decoration:none;color:#e8ecf4;background:#0c0f16;border:1px solid #262b34;transition:border-color .25s,transform .25s}
.bfa-dimg{position:relative;display:block;aspect-ratio:690/440;overflow:hidden;margin-bottom:10px}
.bfa-dimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bfa-dtag{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:999px;background:rgba(5,6,10,.85);border:1px solid rgba(255,77,102,.55);color:#ffd5db;font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.bfa-demo b{padding:0 14px;font-size:16.5px}
.bfa-demo em{padding:0 14px;font-style:normal;color:#9aa3b5;font-size:13.5px}
.bfa-demo>i{margin-top:auto;padding:8px 14px 0;font:600 12.5px "JetBrains Mono",monospace;font-style:normal;color:#ff6b80}
.bfa-demo:hover,.bfa-demo:focus-visible{border-color:#ff2e4d;transform:translateY(-2px)}
.bfa-demo:hover .bfa-dimg img,.bfa-demo:focus-visible .bfa-dimg img{transform:scale(1.04)}
@media (max-width:860px){#portes .bfa-demos{padding:16px}#portes .bfa-demos ul{grid-template-columns:1fr;gap:12px}
 .bfa-demo{display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto auto 1fr;column-gap:12px;row-gap:3px;padding:0}
 .bfa-dimg{grid-row:1/4;aspect-ratio:auto;height:100%;min-height:104px;margin:0}
 .bfa-demo b{padding:12px 12px 0 0;font-size:15.5px}.bfa-demo em{padding:0 12px 0 0;font-size:13px}.bfa-demo>i{padding:4px 12px 12px 0;align-self:end}}
@media (prefers-reduced-motion:reduce){.bfa-demo,.bfa-dimg img{transition:none}.bfa-demo:hover,.bfa-demo:focus-visible{transform:none}.bfa-demo:hover .bfa-dimg img,.bfa-demo:focus-visible .bfa-dimg img{transform:none}}
/* mobile : les trois accès remontent dans le premier écran, le globe reste entier */
@media (max-width:767px){#top>div.relative.min-h-\[100svh\]{padding-top:min(400px,47svh)!important;padding-bottom:40px!important}#top .bfa-h1{margin-top:12px}#top p[data-bfa]{font-size:15.5px;line-height:1.55}.bfa-acts{margin-top:22px;gap:10px}.bfa-act{min-height:48px}}