/* F—08 · Branchements & API — maquettes de templates/landing/features/branchements.html.twig.
   États : .k1…kN / [data-s="n"] (timelines) ; [data-active="n"] / .a0…a3 (scène au scroll).
   Préfixe bn- (et bz-/wp-/sf-/an-/hb-/sc-/iso- dans le bento). */

/* ============================ Hero : le schéma vivant ============================ */
.bn{width:1080px}
.bn-fitbox.clip{justify-content:center}
.bn .win-top .dots{margin-right:2px}
.bn .bn-bc b{font-weight:400;color:var(--tx-3)}
.bn-body{background:var(--bg-2)}
.bn-map{position:relative;height:360px;overflow:hidden;border-bottom:1px solid var(--bd);
  background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.3px);background-size:22px 22px;background-position:11px 11px}
.bn-halo{position:absolute;left:540px;top:180px;width:420px;height:250px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:var(--grad);filter:blur(70px);opacity:calc(.2 * var(--tex))}

/* Tracés */
.bn-wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.bn-wd{width:1080px;height:360px}
.bn-wm{display:none;width:540px;height:500px}
.bn-wires .g1{stop-color:var(--br-1)}.bn-wires .g2{stop-color:var(--br-2)}.bn-wires .g3{stop-color:var(--br-3)}
.bn-wires .b{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.4;stroke-dasharray:2 6;stroke-linecap:round;animation:bnDash 1.5s linear infinite}
.bn-wires .b.rv{animation-direction:reverse}
/* WordPress et Shopify : des alternatives à PrestaShop (une boutique par espace), sans événement */
.bn-wires .b.alt{stroke:rgba(255,255,255,.11)}
@keyframes bnDash{to{stroke-dashoffset:-16}}
.bn-wires .l{fill:none;stroke:url(#bnGd);stroke-width:2.4;stroke-linecap:round;opacity:0;transition:opacity .6s var(--ez)}
.bn-wm .l{stroke:url(#bnGm)}
.bn[data-s="1"] .l-ps,.bn[data-s="2"] .l-ps,.bn[data-s="3"] .l-ps,.bn[data-s="6"] .l-ps,.bn[data-s="4"] .l-api,
.bn[data-s="5"] .l-api,.bn[data-s="7"] .l-hs,.bn[data-s="8"] .l-sc,.bn[data-s="9"] .l-sc{opacity:calc(.35 + .65 * var(--tex))}

/* Les outils */
.bn-n{position:absolute;z-index:2;width:208px;height:60px;display:flex;align-items:center;gap:11px;padding:0 13px;border:1px solid var(--bd-2);border-radius:12px;background:var(--bg-3);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);transition:border-color .45s,box-shadow .6s,transform .6s var(--ez-b)}
.bn-n .q{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--bd-2);display:grid;place-items:center;background:var(--bg-2);color:var(--tx-2);transition:background .45s,color .45s,border-color .45s}
.bn-n .q .ico{width:16px;height:16px}
.bn-n>span:last-child{min-width:0}
.bn-n b{display:block;font-size:13px;color:var(--tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-n small{display:block;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3);margin-top:2px;white-space:nowrap}
.n-ps{left:20px;top:30px}.n-wp{left:20px;top:150px}.n-sh{left:20px;top:270px}
.n-hs{left:852px;top:30px}.n-sc{left:852px;top:150px}.n-api{left:852px;top:270px}
.bn-n.alt{border-style:dashed;background:var(--bg-2);box-shadow:none}
.bn-n.alt b{color:var(--tx-2)}
.bn-n.alt .q{background:transparent;color:var(--tx-3)}
/* Le nœud qui parle s'allume (au départ s'il émet, à l'arrivée s'il reçoit) */
.bn[data-s="1"] .n-ps,.bn[data-s="2"] .n-ps,.bn[data-s="3"] .n-ps,.bn[data-s="6"] .n-ps,.bn[data-s="4"] .n-api,.bn[data-s="5"] .n-api,.bn[data-s="9"] .n-sc,
.bn[data-s="7"] .n-hs,.bn[data-s="8"] .n-sc{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 4px rgba(255,255,255,.05),0 0 44px -8px rgba(123,77,255,calc(.85 * var(--tex))),0 18px 40px -22px #000}
.bn[data-s="1"] .n-ps .q,.bn[data-s="2"] .n-ps .q,.bn[data-s="3"] .n-ps .q,.bn[data-s="6"] .n-ps .q,.bn[data-s="4"] .n-api .q,.bn[data-s="5"] .n-api .q,.bn[data-s="9"] .n-sc .q,
.bn[data-s="7"] .n-hs .q,.bn[data-s="8"] .n-sc .q{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.bn[data-s="7"] .n-hs,.bn[data-s="8"] .n-sc,.bn[data-s="7"] .n-hs .q,.bn[data-s="8"] .n-sc .q{transition-delay:1.05s}

/* Le cœur */
.bn-core{position:absolute;z-index:3;left:465px;top:122px;width:150px;height:116px;border-radius:20px;border:1px solid rgba(255,255,255,.3);background:var(--bg-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  box-shadow:0 0 0 6px rgba(255,255,255,.03),0 0 70px -10px rgba(123,77,255,calc(.7 * var(--tex))),0 30px 60px -26px #000}
.bn-core .mark{height:24px;color:var(--tx);margin-bottom:3px}
.bn-core b{font-family:'Schibsted Grotesk';font-size:16px;font-weight:600;letter-spacing:-.01em}
.bn-core small{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.bn-core .rg{position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid rgba(255,255,255,.75);opacity:0;pointer-events:none}
@keyframes bnPulseA{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}
@keyframes bnPulseB{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}
/* Deux noms en alternance : la pulsation repart à chaque étape. Arrivée ≈ 1,2 s ; départ = tout de suite. */
.bn[data-s="1"] .bn-core .rg,.bn[data-s="3"] .bn-core .rg,.bn[data-s="5"] .bn-core .rg,.bn[data-s="9"] .bn-core .rg{animation:bnPulseA .95s var(--ez) 1.2s forwards}
.bn[data-s="2"] .bn-core .rg,.bn[data-s="4"] .bn-core .rg,.bn[data-s="6"] .bn-core .rg{animation:bnPulseB .95s var(--ez) 1.2s forwards}
.bn[data-s="7"] .bn-core .rg{animation:bnPulseA .95s var(--ez) .05s forwards}
.bn[data-s="8"] .bn-core .rg{animation:bnPulseB .95s var(--ez) .05s forwards}

/* Les paquets : une étiquette lumineuse qui suit son tracé */
.bn-pk{position:absolute;left:0;top:0;z-index:4;offset-rotate:0deg;offset-distance:0%;opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:'Spline Sans Mono';font-size:10.5px;line-height:1;color:var(--bg);background:var(--tx);
  border-radius:999px;padding:5px 10px 5px 7px;box-shadow:0 0 0 3px rgba(255,255,255,.09),0 0 26px -2px rgba(123,77,255,calc(.95 * var(--tex))),0 10px 20px -10px #000}
.bn-pk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad)}
.r-ps{offset-path:path("M228 60 C 340 60, 352 162, 465 162")}
.r-wp{offset-path:path("M228 180 C 300 180, 390 180, 465 180")}
.r-sh{offset-path:path("M228 300 C 340 300, 352 198, 465 198")}
.r-hs{offset-path:path("M615 162 C 728 162, 740 60, 852 60")}
.r-sc{offset-path:path("M615 180 C 690 180, 780 180, 852 180")}
.r-api{offset-path:path("M615 198 C 728 198, 740 300, 852 300")}
@keyframes bnGo{0%{offset-distance:0%;opacity:0;transform:scale(.7)}14%{opacity:1;transform:none}84%{opacity:1;transform:none}100%{offset-distance:100%;opacity:0;transform:scale(.85)}}
@keyframes bnBack{0%{offset-distance:100%;opacity:0;transform:scale(.7)}14%{opacity:1;transform:none}84%{opacity:1;transform:none}100%{offset-distance:0%;opacity:0;transform:scale(.85)}}
.bn.k1 .pk1,.bn.k2 .pk2,.bn.k3 .pk3,.bn.k6 .pk6,.bn.k7 .pk7,.bn.k8 .pk8{animation:bnGo 1.4s cubic-bezier(.5,0,.3,1) .1s forwards}
.bn.k4 .pk4,.bn.k5 .pk5,.bn.k9 .pk9{animation:bnBack 1.4s cubic-bezier(.5,0,.3,1) .1s forwards}

/* Le journal */
.bn-jr{padding:10px 18px 12px}
.bn-jh{display:flex;align-items:center;gap:10px;height:26px;margin-bottom:4px}
.bn-jh .sp{flex:1}
.bn-jc{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
.bn-jc b{color:var(--tx-2);font-weight:500;font-size:9px;letter-spacing:.04em;text-transform:uppercase}
.bn-jv{position:relative;height:130px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 34%);mask-image:linear-gradient(180deg,transparent,#000 34%)}
.bn-jl{transition:transform .8s var(--ez) .95s}
.bn-jl>div{height:26px;display:grid;grid-template-columns:62px 56px 92px 124px minmax(0,1fr);gap:10px;align-items:center;padding:0 10px;border-radius:7px;
  font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-3);white-space:nowrap;transition:opacity .5s .95s,background .5s,color .5s}
.bn-jl>div>span{overflow:hidden;text-overflow:ellipsis}
.bn-jl .src{color:var(--tx-2)}
.bn-jl .ev{color:var(--tx)}
.bn-jl .dir{font-size:9px;letter-spacing:.04em;text-transform:uppercase}
.bn .jn{opacity:0}
.bn.k1 .j1,.bn.k2 .j2,.bn.k3 .j3,.bn.k4 .j4,.bn.k5 .j5,.bn.k6 .j6,.bn.k7 .j7,.bn.k8 .j8,.bn.k9 .j9{opacity:1}
.bn[data-s="1"] .j1,.bn[data-s="2"] .j2,.bn[data-s="3"] .j3,.bn[data-s="4"] .j4,.bn[data-s="5"] .j5,.bn[data-s="6"] .j6,.bn[data-s="7"] .j7,.bn[data-s="8"] .j8,.bn[data-s="9"] .j9{background:rgba(255,255,255,.06);color:var(--tx-2);transition-delay:.95s}
.bn.k1 .bn-jl{transform:translateY(-26px)}.bn.k2 .bn-jl{transform:translateY(-52px)}.bn.k3 .bn-jl{transform:translateY(-78px)}
.bn.k4 .bn-jl{transform:translateY(-104px)}.bn.k5 .bn-jl{transform:translateY(-130px)}.bn.k6 .bn-jl{transform:translateY(-156px)}
.bn.k7 .bn-jl{transform:translateY(-182px)}.bn.k8 .bn-jl{transform:translateY(-208px)}.bn.k9 .bn-jl{transform:translateY(-234px)}

/* --- Téléphone : le même schéma, en colonne (sites en haut, outils en bas) --- */
@media(max-width:660px){
  .bn-fit{width:540px!important}
  .bn{width:540px}
  .bn .win-top{height:56px;gap:12px}
  .bn .win-top .lg{font-size:20px}.bn .win-top .lg .mark{height:17px}
  .bn .bn-bc,.bn .win-top .dots{display:none}
  .bn-map{height:500px;background-size:26px 26px}
  .bn-halo{left:270px;top:250px;width:320px;height:300px}
  .bn-wd{display:none}.bn-wm{display:block}
  .bn-wires .b{stroke-width:2.2;stroke-dasharray:3 8}
  .bn-wires .l{stroke-width:3.4}
  .bn-n{width:164px;height:70px;padding:0 10px;gap:9px}
  .bn-n .q{width:32px;height:32px}
  .bn-n .q .ico{width:18px;height:18px}
  .bn-n b{font-size:16px;white-space:normal;line-height:1.15}
  .bn-n small{display:none}
  .n-ps{left:8px;top:10px}.n-wp{left:188px;top:10px}.n-sh{left:368px;top:10px}
  .n-hs{left:8px;top:420px}.n-sc{left:188px;top:420px}.n-api{left:368px;top:420px}
  .bn-core{left:185px;top:195px;width:170px;height:110px}
  .bn-core .mark{height:28px}.bn-core b{font-size:22px}.bn-core small{font-size:13px}
  .bn-pk{font-size:15px;padding:6px 12px 6px 9px}
  .r-ps{offset-path:path("M90 80 C 90 140, 248 135, 248 195")}
  .r-wp{offset-path:path("M270 80 C 270 120, 270 155, 270 195")}
  .r-sh{offset-path:path("M450 80 C 450 140, 292 135, 292 195")}
  .r-hs{offset-path:path("M248 305 C 248 365, 90 360, 90 420")}
  .r-sc{offset-path:path("M270 305 C 270 345, 270 380, 270 420")}
  .r-api{offset-path:path("M292 305 C 292 365, 450 360, 450 420")}
  .bn-jr{padding:12px 16px 14px}
  .bn-jh .mk-lbl{font-size:13px}
  .bn-jc{display:none} /* la colonne entrant / sortant est masquée sur téléphone */
  .bn-jv{height:150px}
  .bn-jl>div{height:30px;grid-template-columns:82px 112px minmax(0,1fr);font-size:14px}
  .bn-jl .dir,.bn-jl .dt{display:none}
  .bn.k1 .bn-jl{transform:translateY(-30px)}.bn.k2 .bn-jl{transform:translateY(-60px)}.bn.k3 .bn-jl{transform:translateY(-90px)}
  .bn.k4 .bn-jl{transform:translateY(-120px)}.bn.k5 .bn-jl{transform:translateY(-150px)}.bn.k6 .bn-jl{transform:translateY(-180px)}
  .bn.k7 .bn-jl{transform:translateY(-210px)}.bn.k8 .bn-jl{transform:translateY(-240px)}.bn.k9 .bn-jl{transform:translateY(-270px)}
}

/* ============================ Scène : brancher la boutique ============================ */
.cx{position:relative;height:452px}
.lay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  opacity:0;transform:translateY(18px) scale(.975);transition:opacity .55s var(--ez),transform .8s var(--ez);pointer-events:none}
[data-active="0"] .lay0,[data-active="1"] .lay1,[data-active="2"] .lay2,[data-active="3"] .lay3{opacity:1;transform:none;transition-delay:.12s}
[data-active="0"] .fx-dots button:nth-child(1),[data-active="1"] .fx-dots button:nth-child(2),[data-active="2"] .fx-dots button:nth-child(3),[data-active="3"] .fx-dots button:nth-child(4){background:#fff;width:34px}
.rc-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* Bascule de texte : .xs > .v0 / .v1 (même case, fondu) */
.xs{display:grid}
.xs>span{grid-area:1/1;transition:opacity .4s,transform .5s var(--ez)}
.xs>.v1,.xs>.v2{opacity:0;transform:translateY(5px)}

/* A0 — le module PrestaShop (îlot clair : c'est chez vous) */
.bn-mod{width:460px;padding:16px 18px 14px;display:flex;flex-direction:column;gap:11px}
.bn-mod .rc-h .mk-lbl{font-family:'Hanken Grotesk';font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--tx-2)}
.bn-drop{position:relative;height:50px;border:1.5px dashed var(--bd-2);border-radius:10px;display:grid;place-items:center;background:var(--bg-2)}
.bn-dz{font-size:12px;color:var(--tx-3);transition:opacity .3s}
.bn-zip{position:absolute;display:inline-flex;align-items:center;gap:7px;font-family:'Spline Sans Mono';font-size:11px;color:var(--tx);border:1px solid var(--bd-2);border-radius:8px;padding:6px 10px;background:#fff;
  box-shadow:0 10px 20px -12px rgba(0,0,0,.4);opacity:0;transform:translate(60px,-34px) rotate(4deg);transition:opacity .4s,transform .8s var(--ez-b)}
.bn-zip .ico{width:13px;height:13px}
.a0 .bn-zip{opacity:1;transform:none;transition-delay:.25s}
.a0 .bn-dz{opacity:0;transition-delay:.3s}
.bn-mrow{display:flex;gap:12px;align-items:flex-start}
.bn-mq{flex:none;width:38px;height:38px;border-radius:10px;background:#141418;color:#fff;display:grid;place-items:center}
.bn-mq .ico{width:18px;height:18px}
.bn-mt b{display:block;font-size:13.5px;color:var(--tx)}
.bn-mt b small{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3);font-weight:400;margin-left:4px}
.bn-mt>span{display:block;font-size:11.5px;color:var(--tx-2);line-height:1.45;margin-top:2px}
.bn-pg{height:4px}
.bn-pg i{background:#141418;transition-duration:1.1s}
.a0 .bn-pg i{--v:1;transition-delay:.85s}
.bn-chk{display:flex;flex-direction:column;gap:6px}
.bn-chk span{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--tx);opacity:.25;transition:opacity .4s;transition-delay:calc(1.5s + var(--i) * .38s)}
.bn-chk i{width:18px;height:18px;border-radius:50%;border:1px solid var(--bd-2);display:grid;place-items:center;color:transparent;transition:background .35s,color .35s,border-color .35s;transition-delay:inherit}
.bn-chk i .ico{width:11px;height:11px;stroke-width:2.6}
.a0 .bn-chk span{opacity:1}
.a0 .bn-chk i{background:#141418;border-color:#141418;color:#fff}
.bn-stat{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:11px;border-top:1px solid var(--bd);font-size:12px;color:var(--tx-2)}
.bn-stat b{color:var(--tx)}
.bn-stat code{font-family:'Spline Sans Mono';font-size:10.5px;background:var(--bg-4);border-radius:4px;padding:1px 5px;color:var(--tx)}
.bn-stat>span:first-child{position:relative}
.bn-stat .s1{position:absolute;left:52px;top:0;white-space:nowrap;opacity:0;color:var(--tx);font-weight:600;transition:opacity .4s 2.75s}
.bn-stat .s0{transition:opacity .3s 2.7s}
.a0 .bn-stat .s0{opacity:0}
.a0 .bn-stat .s1{opacity:1}
.bn-rc{font-size:11px;padding:6px 10px;opacity:.35;transition:opacity .4s 2.9s}
.a0 .bn-rc{opacity:1}

/* A1 — « Ma boutique » */
.bn-shop{width:500px;padding:16px 18px;display:flex;flex-direction:column}
.bn-sh-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bn-sh-h .mk-h{font-size:19px}
.bn-sh-h .mk-chip.solid .d{background:var(--bg)}
.bn-acts{display:flex;gap:8px;margin-top:12px}
.bn-sync .ico{transition:transform 1.1s var(--ez)}
.a1 .bn-sync{box-shadow:0 0 0 4px rgba(255,255,255,.12);transition-delay:.45s}
.a1 .bn-sync .ico{transform:rotate(360deg);transition-delay:.45s}
.bn-kpis{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;margin-top:8px}
.bn-kpis>div{border:1px solid var(--bd);border-radius:10px;padding:10px 11px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:4px;min-width:0}
.bn-kpis b{font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--tx);line-height:1.05}
.bn-kpis .bn-ls b{font-family:'Hanken Grotesk';font-size:16px;letter-spacing:0;padding:4px 0 3px}
.bn-kpis small{font-size:10.5px;color:var(--tx-3);line-height:1.35}
.a1 .bn-ls .v0{opacity:0;transform:translateY(-5px);transition-delay:1s}
.a1 .bn-ls .v1{opacity:1;transform:none;transition-delay:1.1s}
.bn-ls small .v1{color:var(--tx-2)}
.bn-per{margin-top:10px;border:1px solid var(--bd);border-radius:10px;padding:11px 12px;background:rgba(255,255,255,.02);opacity:.3;transition:opacity .6s 1.9s}
.a1 .bn-per{opacity:1}
.bn-per-t{font-size:12.5px;font-weight:600;color:var(--tx)}
.bn-per p{font-size:11.5px;line-height:1.55;color:var(--tx-2);margin:8px 0 9px}
.bn-per .mk-btn{font-size:11px;padding:5px 10px}
.bn-toast{right:-16px;bottom:-4px;max-width:330px}
.a1 .bn-toast{opacity:1;transform:none;transition-delay:.7s}

/* A2 — temps réel */
.bn-rt{display:flex;align-items:center}
.bn-pe,.bn-pf{width:190px;padding:13px 14px;display:flex;flex-direction:column;gap:3px}
.bn-pe>b,.bn-pf>b{font-size:13.5px;color:var(--tx)}
.bn-pf small{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.bn-pin{height:32px;margin-top:4px;font-weight:600;gap:4px}
.bn-pin .o{color:var(--tx)}
.bn-pin .u{color:var(--tx-3);font-weight:400}
.a2 .bn-pin .o{display:none}
.bn-pin .n:empty{display:none}
.bn-save{align-self:flex-start;margin-top:9px;font-size:11px;padding:6px 11px;transition:box-shadow .3s}
.a2 .bn-save{box-shadow:0 0 0 4px rgba(20,20,24,.14);transition-delay:1s}
.bn-rw{position:relative;width:110px;height:40px;flex:none}
.bn-rw svg{position:absolute;inset:0;width:110px;height:40px;overflow:visible}
.bn-rw path{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:2 6;animation:bnDash 1.5s linear infinite}
.bn-rp{position:absolute;left:0;top:50%;white-space:nowrap;font-family:'Spline Sans Mono';font-size:10px;line-height:1;color:var(--bg);background:var(--tx);border-radius:999px;padding:5px 9px;
  box-shadow:0 0 22px -2px rgba(123,77,255,calc(.95 * var(--tex)));opacity:0;transform:translate(-40%,-50%)}
@keyframes bnRp{0%{opacity:0;transform:translate(-40%,-50%) scale(.8)}15%{opacity:1;transform:translate(-30%,-50%)}85%{opacity:1}100%{opacity:0;transform:translate(60%,-50%)}}
.a2 .bn-rp{animation:bnRp 1.3s cubic-bezier(.5,0,.3,1) 1.25s forwards}
.bn-pv{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}
.bn-pv b{font-size:15px;color:var(--tx)}
.a2 .bn-pv .v0{opacity:0;transform:translateY(-5px);transition-delay:2.4s}
.a2 .bn-pv .v1{opacity:1;transform:none;transition-delay:2.5s}
.bn-ok{align-self:flex-start;margin-top:8px;opacity:0;transform:scale(.7);transition:opacity .3s,transform .5s var(--ez-b),background .3s,color .3s}
.a2 .bn-ok{opacity:1;transform:none;background:var(--tx);color:var(--bg);border-color:var(--tx);transition-delay:2.6s}
.a2 .bn-pf{border-color:rgba(255,255,255,.4);transition:border-color .5s 2.4s}
.bn-mj{width:490px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.bn-mj .r{display:grid;grid-template-columns:58px 74px 112px minmax(0,1fr);gap:8px;align-items:center;height:24px;padding:0 6px;border-radius:6px;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3);white-space:nowrap}
.bn-mj .r>span{overflow:hidden;text-overflow:ellipsis}
.bn-mj .ev{color:var(--tx)}
.bn-mj .nw{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez),background .4s}
.a2 .bn-mj .nw{opacity:1;transform:none;background:rgba(255,255,255,.06);color:var(--tx-2);transition-delay:2.7s}

/* A3 — la console API */
.bn-con{width:520px;border:1px solid var(--bd-2);border-radius:12px;background:#08090B;overflow:hidden}
.bn-con-h{display:flex;align-items:center;gap:12px;height:32px;padding:0 12px;border-bottom:1px solid var(--bd);background:rgba(255,255,255,.02)}
.bn-con-h .dots{display:flex;gap:5px}.bn-con-h .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.bn-con-b{padding:12px 14px 14px}
.bn-con .cmd{font-family:'Spline Sans Mono';font-size:12px;color:var(--tx);min-height:18px}
.bn-con .cmd .m{display:inline-block;font-size:10px;font-weight:600;color:var(--bg);background:var(--tx);border-radius:4px;padding:1px 6px;margin-right:4px;vertical-align:1px}
.bn-js,.bn-res pre{margin:0;font-family:'Spline Sans Mono';font-size:10.2px;line-height:1.62;color:var(--tx-2);white-space:pre}
.bn-js{margin-top:8px}
.bn-js>span{display:inline-block;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ez);transition-delay:calc(1.3s + var(--i) * .09s)}
.bn-js .k{color:var(--tx-3)}
.bn-js em{font-style:normal;letter-spacing:-.05em}
.a3 .bn-js>span{opacity:1;transform:none}
.bn-res{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding-top:10px;border-top:1px dashed var(--bd-2);opacity:0;transform:translateY(8px);transition:opacity .4s 2.6s,transform .6s var(--ez) 2.6s}
.a3 .bn-res{opacity:1;transform:none}
.bn-res .mk-chip{flex:none}
.bn-res pre{color:var(--tx-2)}
.bn-res b{color:var(--tx);font-weight:600}
.bn-eps{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}

/* ============================ Section : un espace en quelques secondes ============================ */
.bn-sp{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:22px;align-items:start}
.bn-spw{position:relative;isolation:isolate}
.bn-spw::before{content:"";position:absolute;left:8%;right:8%;top:10%;height:70%;z-index:-1;border-radius:50%;background:var(--grad);filter:blur(80px);opacity:calc(.18 * var(--tex));pointer-events:none}
.bn-on{width:640px}
.bn-on .win-url{max-width:300px;position:relative}
.bn-on .win-url .u1{position:absolute;left:50%;transform:translateX(-30%);opacity:0;transition:opacity .3s}
.bn-on .win-url .u0{transition:opacity .3s}
.bn-on.k5 .win-url .u0{opacity:0}
.bn-on.k5 .win-url .u1{opacity:1}
.bn-on-b{position:relative;height:500px}
.bn-va,.bn-vb{position:absolute;inset:0;transition:opacity .5s var(--ez),transform .7s var(--ez)}
.bn-va{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px);background-size:22px 22px}
.bn-on.k5 .bn-va{opacity:0;transform:scale(.97);pointer-events:none}
.bn-vb{padding:16px 24px 18px;opacity:0;transform:translateY(14px);display:flex;flex-direction:column}
.bn-on.k5 .bn-vb{opacity:1;transform:none;transition-delay:.25s}
.bn-brand{display:flex;flex-direction:column;align-items:center;gap:8px}
.bn-brand .mark{height:20px;color:var(--tx)}
.bn-brand span{font-family:'Spline Sans Mono';font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);display:flex;align-items:center;gap:8px}
.bn-brand span::before,.bn-brand span::after{content:"";width:18px;height:1px;background:var(--bd-2)}
.bn-reg{width:330px;padding:22px 22px 18px;background:var(--bg-3)}
.bn-reg .h{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em;text-align:center}
.bn-reg>p{font-size:12px;color:var(--tx-3);text-align:center;margin:3px 0 16px}
.bn-reg label{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.bn-reg label>span:first-child{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--tx-2)}
.bn-reg label>span:first-child .ico{width:12px;height:12px;color:var(--tx-3)}
.bn-reg .mk-in{height:34px;transition:border-color .3s,box-shadow .3s}
.bn-reg em{font-style:normal;font-size:10.5px;color:var(--tx-3)}
.bn-on[data-s="1"] .f1 .mk-in,.bn-on[data-s="2"] .f2 .mk-in,.bn-on[data-s="3"] .f3 .mk-in{border-color:var(--tx-2);box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.bn-go{display:flex;align-items:center;justify-content:center;height:38px;margin-top:4px;border-radius:8px;background:var(--tx);color:var(--bg);font-size:13px;font-weight:600;transition:opacity .2s,transform .2s}
.bn-on[data-s="4"] .bn-go{opacity:.7;transform:scale(.98);transition-delay:.85s}
.bn-reg .sw2{text-align:center;margin-top:12px;font-size:11.5px;color:var(--tx-3)}
.bn-reg .sw2 b{color:var(--tx)}
/* Démarrage */
.bn-tn{display:flex;gap:16px;border-bottom:1px solid var(--bd);margin:0 -24px;padding:0 24px}
.bn-tn span{font-size:11.5px;color:var(--tx-3);padding:0 0 9px;border-bottom:2px solid transparent;margin-bottom:-1px}
.bn-tn .on{color:var(--tx);border-bottom-color:var(--tx)}
.bn-ot{margin-top:16px}
.bn-ot .h{font-family:'Schibsted Grotesk';font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--tx)}
.bn-ot p{font-size:12px;line-height:1.55;color:var(--tx-3);margin-top:5px;max-width:52ch}
.bn-on.k9 .bn-ot .v0{opacity:0;transform:translateY(-5px)}
.bn-on.k9 .bn-ot .v1{opacity:1;transform:none;transition-delay:.15s}
.bn-jg{display:flex;align-items:center;gap:12px;margin:14px 0 6px}
.bn-jg .mk-bar{flex:1;height:5px}
.bn-jg .mk-bar i{--v:0;transition-duration:.9s}
.bn-on.k6 .bn-jg .mk-bar i{--v:.333}.bn-on.k7 .bn-jg .mk-bar i{--v:.667}.bn-on.k8 .bn-jg .mk-bar i{--v:1}
.bn-et{display:flex;gap:13px;padding:11px 0;border-top:1px solid var(--bd)}
.bn-et.e3{border-bottom:1px solid var(--bd)}
.bn-et .nm{flex:none;position:relative;width:24px;height:24px;border-radius:50%;border:1px solid var(--bd-2);display:grid;place-items:center;font-family:'Spline Sans Mono';font-size:11px;color:var(--tx-3);transition:background .4s,border-color .4s,transform .5s var(--ez-b)}
.bn-et .nm>span{grid-area:1/1;transition:opacity .3s}
.bn-et .n1{opacity:0;color:var(--bg)}
.bn-et .n1 .ico{width:12px;height:12px;stroke-width:2.6}
.bn-et b{display:block;font-size:13px;color:var(--tx);font-weight:600}
.bn-et small{display:grid;font-size:11px;line-height:1.5;color:var(--tx-3);margin-top:3px}
.bn-et small b{display:inline;font-size:11px;color:var(--tx)}
.bn-et small u{color:var(--tx);text-underline-offset:2px}
.bn-on.k6 .e1 .nm,.bn-on.k7 .e2 .nm,.bn-on.k8 .e3 .nm{background:var(--tx);border-color:var(--tx)}
.bn-on.k6 .e1 .n0,.bn-on.k7 .e2 .n0,.bn-on.k8 .e3 .n0{opacity:0}
.bn-on.k6 .e1 .n1,.bn-on.k7 .e2 .n1,.bn-on.k8 .e3 .n1{opacity:1}
.bn-on[data-s="6"] .e1 .nm,.bn-on[data-s="7"] .e2 .nm,.bn-on[data-s="8"] .e3 .nm{transform:scale(1.15)}
.bn-on.k6 .e1 .v0,.bn-on.k8 .e3 .v0{opacity:0;transform:translateY(-4px)}
.bn-on.k6 .e1 .v1,.bn-on.k8 .e3 .v1{opacity:1;transform:none;transition-delay:.15s}
.bn-tons{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.bn-tons span{font-size:10.5px;color:var(--tx-3);border:1px solid var(--bd);border-radius:7px;padding:4px 8px;transition:all .35s}
.bn-on.k7 .bn-tons .on{color:var(--tx);border-color:var(--tx-2);background:rgba(255,255,255,.05);font-weight:600}
.bn-of{margin-top:auto;display:flex;justify-content:flex-end;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez)}
.bn-of .mk-btn .ico{width:12px;height:12px}
.bn-on.k9 .bn-of{opacity:1;transform:none;transition-delay:.35s}
/* Curseur (coordonnées mesurées dans la fenêtre de 640 px) */
.bn-on .mk-cur{--cx:600px;--cy:600px;opacity:0}
.bn-on.k1 .mk-cur{--cx:404px;--cy:250px;opacity:1}
.bn-on.k2 .mk-cur{--cx:412px;--cy:318px}
.bn-on.k3 .mk-cur{--cx:394px;--cy:386px}
.bn-on.k4 .mk-cur{--cx:334px;--cy:456px}
.bn-on.k5 .mk-cur{--cx:600px;--cy:600px;opacity:0}
.bn-on.k9 .mk-cur{--cx:562px;--cy:516px;opacity:1}
.bn-on[data-s="4"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}

/* Colonne de droite : l'équipe */
.bn-spr{display:flex;flex-direction:column;gap:20px}
.bn-team{border:1px solid var(--bd);border-radius:18px;background:var(--bg-2);padding:20px 20px 18px}
.bn-team>.mk-h{font-size:18px}
.bn-tm{position:relative;margin-top:16px;min-height:356px}
.bn-tm>.tl-body{display:flex;flex-direction:column;gap:10px}
.bn-if{display:grid;grid-template-columns:1fr auto;gap:8px}
.bn-ie{grid-column:1 / -1;transition:border-color .3s}
.bn-tm[data-s="1"] .bn-ie{border-color:var(--tx-2)}
.bn-sel{position:relative}
.bn-sel .mk-in{justify-content:space-between;display:grid;grid-template-columns:1fr auto;gap:8px}
.bn-sel .mk-in>span{grid-area:1/1;transition:opacity .25s}
.bn-sel .mk-in .ico{grid-column:2}
.bn-sel .r1{opacity:0}
.bn-tm.k2 .bn-sel .r0{opacity:0;transition-delay:1.1s}
.bn-tm.k2 .bn-sel .r1{opacity:1;transition-delay:1.15s}
.bn-dd{position:absolute;left:0;right:0;top:38px;z-index:5;display:flex;flex-direction:column;padding:4px;border:1px solid var(--bd-2);border-radius:9px;background:var(--bg-3);
  opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--ez);pointer-events:none}
.bn-dd span{font-size:12px;color:var(--tx-2);padding:7px 9px;border-radius:6px;transition:background .3s}
.bn-tm[data-s="2"] .bn-dd{opacity:1;transform:none;transition-delay:.2s}
.bn-tm[data-s="2"] .bn-dd .hl{background:rgba(255,255,255,.08);color:var(--tx);transition-delay:.7s}
.bn-tm.k3 .bn-dd{opacity:0}
.bn-inv{transition:box-shadow .3s,opacity .3s}
.bn-tm[data-s="3"] .bn-inv{box-shadow:0 0 0 4px rgba(255,255,255,.14);transition-delay:.3s}
.bn-lk{display:grid;grid-template-rows:0fr;opacity:0;margin:-5px 0;transition:grid-template-rows .6s var(--ez),opacity .5s,margin .6s var(--ez)}
.bn-lk>div{overflow:hidden;min-height:0}
.bn-lk>div>*:first-child{display:block;margin-top:10px}
.bn-lk>div>*:last-child{margin-bottom:10px}
.bn-lk{border:1px solid var(--bd-2);border-radius:10px;padding:0 12px;background:rgba(255,255,255,.03)}
.bn-tm.k4 .bn-lk{grid-template-rows:1fr;opacity:1;margin:0;transition-delay:.15s}
.bn-lk small{display:block;font-size:11px;color:var(--tx-3);margin-top:4px}
.bn-lk code{display:block;margin-top:7px;font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:6px 9px}
.bn-ms{border-top:1px solid var(--bd);padding-top:8px}
.bn-ms>.mk-lbl{display:flex;justify-content:space-between}
.bn-pc{justify-items:end}
.bn-tm.k4 .bn-pc .v0{opacity:0;transform:translateY(-5px)}
.bn-tm.k4 .bn-pc .v1{opacity:1;transform:none;transition-delay:.35s}
.bn-ms .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)}
.bn-ms .r:last-child{border-bottom:none}
.bn-ms .r b{display:block;font-size:12.5px;color:var(--tx)}
.bn-ms .r small{display:block;font-size:10.5px;color:var(--tx-3);margin-top:2px}
.bn-ms .r .mk-btn{font-size:10.5px;padding:4px 9px}
.bn-ms .nw{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .6s var(--ez-b)}
.bn-tm.k4 .bn-ms .nw{opacity:1;transform:none;transition-delay:.35s}
.bn-sl{list-style:none;display:flex;flex-direction:column;gap:13px;padding:0 4px}
.bn-sl li{font-size:14px;color:var(--tx-2);line-height:1.55;padding-left:18px;position:relative}
.bn-sl li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--tx);transform:rotate(45deg)}
.bn-sl b{color:var(--tx)}
.bn-spw,.bn-spr{min-width:0}
@media(max-width:960px){.bn-sp{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ============================ Bento ============================ */
.viz>.tl-body{position:absolute;inset:0;padding:14px}
/* WordPress */
.bz-wp .mk-lbl{font-family:'Hanken Grotesk';text-transform:none;letter-spacing:0;font-size:11px;color:var(--tx-2)}
.bz-wp>.tl-body{padding:12px 14px}
.wp-r{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:6px 8px 6px 10px;border:1px solid var(--bd);border-radius:9px}
.wp-f{display:inline-flex;align-items:center;gap:7px;font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx)}
.wp-f .ico{width:12px;height:12px}
.wp-a{display:grid;font-size:10.5px;padding:4px 10px}
.wp-a>span{grid-area:1/1;transition:opacity .3s}
.wp-a .a1{opacity:0}
.bz-wp.k1 .wp-a{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.bz-wp.k1 .wp-a .a0{opacity:0;transition-delay:.5s}.bz-wp.k1 .wp-a .a1{opacity:1;transition-delay:.55s}
.wp-d{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--tx-2);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez)}
.wp-d i{width:16px;height:16px;border-radius:50%;background:var(--tx);color:var(--bg);display:grid;place-items:center}
.wp-d .ico{width:10px;height:10px;stroke-width:2.6}
.bz-wp.k2 .wp-d{opacity:1;transform:none}
/* Shopify : le code dans le thème */
.bz-sf .tl-body{padding:10px 12px}
.sf-h{display:flex;justify-content:space-between;align-items:center;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx);padding-bottom:7px;border-bottom:1px solid var(--bd)}
.sf-h .mk-lbl{font-family:'Hanken Grotesk';text-transform:none;letter-spacing:0;font-size:10px}
.bz-sf pre{margin:7px 0 0;font-family:'Spline Sans Mono';font-size:9.6px;line-height:1.75;color:var(--tx);white-space:pre;overflow:hidden}
.bz-sf .c{color:var(--tx-3)}
.bz-sf .nw2{opacity:0;transition:opacity .4s 1.6s}
.bz-sf.k1 .nw2{opacity:1}
.bz-sf .nw,.bz-sf .nw2{background:rgba(255,255,255,.05)}
/* Tout autre site */
.an-pg{position:absolute;left:14px;right:14px;top:12px;bottom:12px;border:1px solid var(--bd);border-radius:8px;padding:36px 10px 10px;display:flex;flex-direction:column;gap:6px}
.an-pg::before{content:"";position:absolute;left:0;right:0;top:28px;height:1px;background:var(--bd)}
.an-pg>i{height:5px;border-radius:3px;background:rgba(255,255,255,.08)}
.an-pg .w6{width:60%}.an-pg .w9{width:90%}.an-pg .w4{width:40%}
.an-b{display:flex;gap:6px;margin-top:4px}.an-b i{width:34px;height:26px;border-radius:5px;background:rgba(255,255,255,.05)}
.an-l{position:absolute;right:22px;bottom:20px;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--tx);background:var(--bg-3);border:1px solid var(--bd-2);border-radius:999px;padding:6px 11px;
  box-shadow:0 10px 24px -10px #000,0 0 26px -6px rgba(123,77,255,calc(.7 * var(--tex)));opacity:0;transform:translateY(10px) scale(.95);transition:opacity .4s,transform .6s var(--ez-b)}
.an-l .ico{width:11px;height:11px}
.bz-any.k1 .an-l{opacity:1;transform:none}
.an-c{position:absolute;left:22px;top:17px;display:grid}
.an-c span{grid-area:1/1;font-family:'Spline Sans Mono';font-size:9.5px;line-height:1.2;color:var(--tx-2);border:1px solid var(--bd-2);border-radius:5px;padding:2px 7px;background:var(--bg);opacity:0;animation:anCy 8s infinite}
.an-c span:nth-child(2){animation-delay:2s}.an-c span:nth-child(3){animation-delay:4s}.an-c span:nth-child(4){animation-delay:6s}
@keyframes anCy{0%,2%{opacity:0;transform:translateY(4px)}6%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-4px)}}
/* HubSpot */
.hb-d{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 11px;border:1px solid var(--bd-2);border-radius:9px;background:var(--bg-3)}
.hb-d b{display:block;font-size:11.5px}
.hb-d small{font-size:10px;color:var(--tx-3)}
.hb-s{display:grid;font-family:'Spline Sans Mono';font-size:9.5px;border-radius:5px;border:1px solid var(--bd-2);padding:3px 7px;transition:background .4s,color .4s,border-color .4s}
.hb-s>span{grid-area:1/1;transition:opacity .3s}
.hb-s .a1{opacity:0}
.bz-hb.k2 .hb-s{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.bz-hb.k2 .hb-s .a0{opacity:0}.bz-hb.k2 .hb-s .a1{opacity:1}
.hb-r{display:flex;align-items:center;gap:8px;margin-top:12px}
.hb-r .mk-chip .ico{width:10px;height:10px}
.hb-ar{display:grid;color:var(--tx-3)}.hb-ar .ico{width:13px;height:13px}
.hb-r>*{opacity:.3;transition:opacity .4s}
.bz-hb.k1 .hb-r>*{opacity:1}
.bz-hb.k1 .hb-r>*:nth-child(2){transition-delay:.25s}.bz-hb.k1 .hb-r>*:nth-child(3){transition-delay:.5s}
.bz-hb.k2 .hb-w{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.hb-f{margin-top:9px;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
/* Pastille « activé à la mise en route » sous le titre de carte (HubSpot, SendCloud) */
.fx-card>.bn-onb{align-self:flex-start;margin-top:9px}
/* SendCloud */
.sc-l{display:flex;gap:8px}
.sc-e{flex:1;display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:7px;background:#F4F4F1;color:#141418;opacity:0;transform:translateY(-14px) rotate(-1.5deg);transition:opacity .4s,transform .6s var(--ez-b)}
.sc-e b{font-size:10.5px}
.sc-e small{font-family:'Spline Sans Mono';font-size:8.5px;color:#5c5f66}
.sc-e .bar{display:block;height:11px;margin-top:3px;background:repeating-linear-gradient(90deg,#141418 0 1.5px,transparent 1.5px 3px,#141418 3px 5px,transparent 5px 6.5px)}
.bz-sc.k1 .sc-e{opacity:1;transform:none}
.bz-sc.k1 .c2{transition-delay:.2s}
.sc-t{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:8px;border-top:1px solid var(--bd);font-size:11px;color:var(--tx)}
.sc-t .xs{font-family:'Spline Sans Mono';font-size:10px;justify-items:end}
.sc-t .xs>.v0{opacity:0}
.bz-sc.k1 .sc-t .v0{opacity:1;transform:none}
.bz-sc.k2 .sc-t .v0{opacity:0}.bz-sc.k2 .sc-t .v1{opacity:1;transform:none}
.bz-sc.k3 .sc-t .v1{opacity:0}.bz-sc.k3 .sc-t .v2{opacity:1;transform:none;background:var(--tx);color:var(--bg);border-radius:4px;padding:1px 6px}
/* Isolation */
.iso-q{height:28px;font-size:11.5px}
.iso-q .ico{color:var(--tx)}
.iso-c{display:grid;grid-template-columns:minmax(0,1.24fr) 20px minmax(0,.76fr);gap:6px;margin-top:8px}
.iso-a,.iso-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.iso-a .mk-lbl,.iso-b .mk-lbl{font-size:8.5px}
.iso-a span:not(.mk-lbl),.iso-b span:not(.mk-lbl){font-size:10.5px;color:var(--tx-3);border:1px solid var(--bd);border-radius:5px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .4s}
.iso-w{display:grid;place-items:center;color:var(--tx-3);border-left:1px dashed var(--bd-2);border-right:1px dashed var(--bd-2)}
.iso-w .ico{width:12px;height:12px}
.bz-iso.k2 .iso-a .hit{color:var(--tx);border-color:var(--tx-2);background:rgba(255,255,255,.06)}
.bz-iso.k2 .iso-a .hit:nth-child(3){transition-delay:.12s}
.bz-iso.k2 .iso-b{opacity:.35}
.bz-iso.k2 .iso-w{color:var(--tx)}
.iso-b{transition:opacity .5s}
@media(max-width:480px){.iso-a span:not(.mk-lbl),.iso-b span:not(.mk-lbl){font-size:10px}}

/* Sous 900 px, base.css pose sous le visuel collant un cache opaque qui déborde de 80 px vers le
   haut (.fx-vis::after) alors que l'en-tête de section n'a que 56 px de marge : la dernière ligne
   du chapeau de « Brancher votre boutique » passait dessous. On écarte l'en-tête de ce cache. */
@media(max-width:900px){.fx-branchements #installer .fx-shead{margin-bottom:100px}}