.bn-grid{display:flex;flex-direction:column;align-items:center;gap:6px}
.bn-copy{order:2;position:relative;min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;width:100%}
.bn-blk{display:flex;flex-direction:column;align-items:center;width:100%}
.bn-blk.out{opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .25s ease}
.bn-blk.in{animation:bnIn .6s var(--e-out) both}
@keyframes bnIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bn-k{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vio)}
.bn-k b{white-space:nowrap;height:28px;padding:0 11px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--ln);display:inline-flex;align-items:center;letter-spacing:.04em}
.bn-k .prio{height:24px;padding:0 10px;border-radius:999px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;font-size:.66rem}
.bn-blk h3{font-family:var(--fd);font-weight:500;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.08;text-wrap:balance}
.bn-blk p{display:inline-flex;align-items:center;min-height:48px;padding:10px 22px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 12px 24px -16px rgba(23,23,26,.3);color:var(--ink);font-weight:500;font-size:1rem;line-height:1.65;text-wrap:pretty}
.bn-blk ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.bn-blk li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:.92rem;line-height:1.45;color:var(--ink2)}
.bn-blk li::before{content:"";width:22px;height:22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236d28d9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:0 0 0 1px var(--ln)}
.bn-blk li.tbc-li{display:none}html.edit .bn-blk li.tbc-li{display:grid}
.tbc-row{display:none!important}html.edit .tbc-row{display:grid!important}
.bn-right{order:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.bn-fitbox{position:relative;width:100%;max-width:620px;aspect-ratio:600/770}
#bnFit{position:absolute;left:0;top:0;width:600px;height:770px;transform-origin:0 0}
#bnStage{position:absolute;left:20px;top:46px;width:560px;height:700px;touch-action:pan-y;cursor:grab}
#bnStage:active{cursor:grabbing}
#bnFloor{position:absolute;left:50%;bottom:-40px;width:420px;height:40px;margin-left:-210px;border-radius:50%;background:radial-gradient(closest-side,rgba(64,8,36,.22),transparent);animation:bnFloor 4.4s ease-in-out infinite}
@keyframes bnFloor{0%,100%{transform:scaleX(1);opacity:.85}50%{transform:scaleX(.9);opacity:.6}}
.bn-ctrl{display:flex;align-items:center;justify-content:center;gap:26px;height:56px}
.bn-arrow{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--vio);background:#fff;box-shadow:0 8px 16px -8px rgba(64,8,36,.35),0 0 0 1px var(--ln);transition:transform var(--sp-ui-d) var(--sp-ui)}
.bn-arrow:hover{transform:scale(1.08)}.bn-arrow:active{transform:scale(.9)}
.bn-arrow svg{width:22px;height:22px}
.bn-dots{display:flex;align-items:center;gap:6px}
.bn-dots button{width:26px;height:44px;display:grid;place-items:center}
.bn-dots button i{width:10px;height:10px;border-radius:50%;background:color-mix(in oklch,var(--acc-2) 35%,#fff);transition:transform var(--sp-ui-d) var(--sp-ui),background .3s,width .4s var(--e-out)}
.bn-dots button[aria-selected="true"] i{background:var(--ink);width:24px;border-radius:999px}
/* cards */
.bcard{position:absolute;inset:0;border-radius:46px;transform-origin:50% 60%;transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(var(--dr,0deg));will-change:transform,opacity;transition:transform .85s var(--sp-box),opacity .5s ease}
.bcard .sway{position:absolute;inset:0;border-radius:46px}
.bcard .face{position:absolute;inset:0;border-radius:46px;overflow:hidden;background:linear-gradient(180deg,#fdfcfe 0%,#f8f6fb 55%,#f3f0f7 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 0 0 1px rgba(64,8,36,.1),0 40px 70px -30px rgba(64,8,36,.38),0 12px 26px -12px rgba(64,8,36,.16)}
.bcard .dim{position:absolute;inset:0;border-radius:46px;background:rgba(64,8,36,0);transition:background .8s ease;pointer-events:none;z-index:50}
.bcard[data-d="0"]{z-index:10;opacity:1}
.bcard[data-d="1"]{transform:translate3d(-24px,-28px,0) rotate(-4.5deg) scale(.955);z-index:9}
.bcard[data-d="1"] .dim{background:rgba(64,8,36,.06)}
.bcard[data-d="2"]{transform:translate3d(-40px,-50px,0) rotate(-8.5deg) scale(.91);z-index:8;opacity:.55}
.bcard[data-d="2"] .dim{background:rgba(64,8,36,.12)}
.bcard[data-d="h"]{transform:translate3d(-40px,-50px,0) rotate(-8.5deg) scale(.88);z-index:7;opacity:0}
.bcard[data-d="x"]{transform:translate3d(60px,520px,0) rotate(8deg) scale(.96);z-index:11;opacity:0;pointer-events:none;transition:transform .75s cubic-bezier(.42,0,.85,.55),opacity .22s ease .5s}
.bcard.pull{transform:translate3d(-8px,-14px,0) rotate(-1.8deg) scale(1.01)!important;transition:transform .12s ease-out!important}
.bcard.dragging{transition:none!important}
.bcard[data-d="0"] .sway{animation:bSway 4.2s ease-in-out infinite alternate}
.bcard[data-d="1"] .sway{animation:bSway2 5s ease-in-out infinite alternate}
@keyframes bSway{0%{transform:translate3d(-5px,3px,0) rotate(-.8deg)}50%{transform:translate3d(3px,-4px,0) rotate(.4deg)}100%{transform:translate3d(6px,2px,0) rotate(1deg)}}
@keyframes bSway2{0%{transform:translate3d(3px,-2px,0) rotate(.6deg)}100%{transform:translate3d(-4px,3px,0) rotate(-.7deg)}}
.b-badge{position:absolute;left:32px;top:30px;width:64px;height:64px;border-radius:50%;background:linear-gradient(145deg,color-mix(in oklch,var(--acc-2) 8%,#fff),color-mix(in oklch,var(--acc-2) 14%,#fff));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),0 6px 14px -6px rgba(64,8,36,.35);display:grid;place-items:center;color:var(--vio)}
.b-badge svg{width:28px;height:28px}
.b-tag{position:absolute;left:110px;top:44px;height:36px;padding:0 18px;border-radius:999px;display:flex;align-items:center;background:rgba(255,255,255,.85);box-shadow:0 4px 12px -6px rgba(64,8,36,.25),inset 0 0 0 1px rgba(255,255,255,.9);font-size:12.5px;font-weight:700;letter-spacing:.11em;color:color-mix(in oklch,var(--acc) 80%,#000);white-space:nowrap}
.bcard .face>.ex{position:absolute;right:30px;top:52px}
.b-title{position:absolute;left:36px;top:110px;width:488px;font-family:var(--fd);font-weight:500;font-size:34px;line-height:1.08;color:var(--ink);letter-spacing:-.01em}
.b-ring{position:absolute;left:350px;top:200px;width:230px;height:120px;animation:bRing 7s ease-in-out infinite alternate}
@keyframes bRing{100%{transform:translate(-6px,6px) rotate(-1.5deg)}}
.b-sph{position:absolute;left:430px;top:560px;width:96px;height:96px;border-radius:50%;background:radial-gradient(34% 30% at 32% 24%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(circle at 50% 45%,color-mix(in oklch,var(--acc-2) 14%,#fff) 0%,color-mix(in oklch,var(--acc-2) 36%,#fff) 60%,color-mix(in oklch,var(--acc-2) 51%,#fff) 100%);box-shadow:0 24px 30px -14px rgba(64,8,36,.5),inset 0 0 0 1.5px rgba(255,255,255,.5);animation:bSph 5s ease-in-out infinite}
@keyframes bSph{50%{transform:translateY(-12px)}}
.b-egg{position:absolute;left:44px;top:570px;width:120px;height:96px;border-radius:50% 50% 48% 52%;background:radial-gradient(70% 70% at 38% 30%,color-mix(in oklch,var(--acc-2) 8%,#fff) 0%,color-mix(in oklch,var(--acc-2) 20%,#fff) 55%,color-mix(in oklch,var(--acc-2) 31%,#fff) 100%);opacity:.7;animation:bEgg 6s ease-in-out infinite}
@keyframes bEgg{50%{transform:translateY(-7px) scale(1.03,.98)}}
.b-ph{position:absolute;left:165px;top:196px;width:230px;height:470px;border-radius:40px;padding:6px;background:linear-gradient(180deg,#fdfcfe,color-mix(in oklch,var(--acc-2) 8%,#fff));box-shadow:0 0 0 4px color-mix(in oklch,var(--acc-2) 13%,#fff),0 0 0 5.5px rgba(64,8,36,.5),0 30px 40px -16px rgba(64,8,36,.45);animation:bPh 6s ease-in-out infinite}
@keyframes bPh{50%{transform:translateY(-5px)}}
.b-scr{position:relative;width:218px;height:458px;border-radius:34px;overflow:hidden;background:#fbfafd;font-family:var(--fb);color:var(--ink)}
.b-st{position:absolute;left:20px;top:11px;right:20px;display:flex;justify-content:space-between;font-size:9px;font-weight:600;color:color-mix(in oklch,var(--acc) 70%,#000);z-index:20}
.b-notch{position:absolute;left:50%;top:9px;width:54px;height:15px;margin-left:-27px;border-radius:999px;background:#17171A;z-index:21}
.fc{position:absolute;z-index:30}
.fc .fci{display:flex;align-items:center;gap:10px;padding:12px 16px 12px 12px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 18px 28px -14px rgba(64,8,36,.38),inset 0 0 0 1px rgba(255,255,255,.95);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;animation:fcF 4.6s ease-in-out infinite}
.fc .fci i{width:26px;height:26px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none}
.fc .fci i svg{width:12px;height:12px}
@keyframes fcF{50%{transform:translateY(-7px)}}
.fc.l{left:22px;top:470px}.fc.r{right:20px;top:330px}
/* generic timed animations (only on front card). natural state = final state */
.bcard.is-front .t-pop{animation:tPop .55s var(--sp-over) var(--dl,0s) both}
.bcard.is-front .t-rise{animation:tRise .55s var(--e-out) var(--dl,0s) both}
.bcard.is-front .t-fade{animation:tFade .45s ease var(--dl,0s) both}
.bcard.is-front .t-drop{animation:tDrop .6s var(--sp-over) var(--dl,0s) both}
.bcard.is-front .t-up{animation:tUp .65s var(--sp-box) var(--dl,0s) both}
.bcard.is-front .t-grow{animation:tGrow .6s var(--e-out) var(--dl,0s) both}
.bcard.is-front .t-gy{animation:tGy .6s var(--sp-over) var(--dl,0s) both}
.bcard.is-front .t-press{animation:tPress .35s ease var(--dl,0s) both}
.bcard.is-front .t-on{animation:tOn .35s ease var(--dl,0s) both}
.bcard.is-front .t-gone{animation:tGone .5s var(--e-out) var(--dl,0s) both}
.bcard.is-front .t-type{animation:tType 1s steps(22) var(--dl,0s) both}
.bcard.is-front .t-morph{animation:tMorph .7s var(--sp-box) var(--dl,0s) both}
@keyframes tPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes tRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tFade{from{opacity:0}to{opacity:1}}
@keyframes tDrop{from{opacity:0;transform:translateY(-110%)}to{opacity:1;transform:none}}
@keyframes tUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes tGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes tGy{from{transform:scaleY(.05)}to{transform:none}}
@keyframes tPress{0%,100%{transform:none}50%{transform:scale(.86)}}
@keyframes tOn{from{background:#fff;color:var(--ink)}to{background:var(--acc);color:#fff}}
@keyframes tGone{from{opacity:1;transform:none}to{opacity:0;transform:scale(.85)}}
@keyframes tType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tMorph{from{opacity:0;transform:scale(.19);border-radius:60px}30%{opacity:1}to{opacity:1;transform:none;border-radius:34px}}
.bcur{position:absolute;left:0;top:0;width:24px;height:24px;z-index:40;opacity:0;pointer-events:none}
.bcur svg{width:100%;height:100%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
.bcard.is-front .bcur{animation:bCur var(--cd,1.2s) var(--e-io) var(--dl,0s) both}
@keyframes bCur{0%{opacity:0;transform:translate(var(--x0),var(--y0))}12%{opacity:1}62%{transform:translate(var(--x1),var(--y1))}72%{transform:translate(var(--x1),var(--y1)) scale(.8)}82%{transform:translate(var(--x1),var(--y1)) scale(1);opacity:1}100%{opacity:0;transform:translate(var(--x1),var(--y1))}}
/* scene 1 : home screen */
.hs{position:absolute;inset:0;background:linear-gradient(170deg,color-mix(in oklch,var(--acc-2) 10%,#fff),color-mix(in oklch,var(--acc-2) 7%,#fff) 50%,color-mix(in oklch,var(--acc-2) 11%,#fff))}
.hs-g{position:absolute;left:12px;top:62px;display:grid;grid-template-columns:repeat(4,38px);column-gap:14px;row-gap:22px}
.hs-i{width:38px;height:38px;border-radius:12px;background:var(--c,color-mix(in oklch,var(--acc-2) 14%,#fff));position:relative}
.hs-i::after{content:"";position:absolute;left:7px;right:7px;bottom:-12px;height:4px;border-radius:9px;background:rgba(23,23,26,.12)}
.hs-me{width:38px;height:38px;position:relative}
.hs-me .ico{width:38px;height:38px;border-radius:12px;background:var(--acc);display:grid;place-items:center;color:#fff;font:500 14px/1 var(--fd);box-shadow:0 8px 14px -6px color-mix(in oklch,var(--acc) 70%,transparent)}
.hs-me .lb{position:absolute;left:50%;top:44px;transform:translateX(-50%);font-size:7.5px;font-weight:600;white-space:nowrap;color:color-mix(in oklch,var(--acc) 70%,#000)}
.hs-dock{position:absolute;left:12px;right:12px;bottom:12px;height:58px;border-radius:26px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:space-around}
.hs-dock span{width:36px;height:36px;border-radius:12px;background:color-mix(in oklch,var(--acc-2) 17%,#fff)}
.app{position:absolute;inset:0;background:#fff;transform-origin:83px 141px;z-index:10;overflow:hidden;border-radius:34px}
.app-h{height:150px;background:var(--acc);border-radius:0 0 34px 34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:16px;gap:6px;color:#fff}
.app-h .lg{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--acc);display:grid;place-items:center;font:500 16px/1 var(--fd)}
.app-h b{font:500 18px/1 var(--fd)}
.app-b{padding:14px;display:flex;flex-direction:column;gap:10px}
.app-btn{height:38px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
.app-row{padding:10px 12px;border-radius:18px;background:color-mix(in oklch,var(--acc-2) 7%,#fff);font-size:10px;display:flex;justify-content:space-between;align-items:center}
.app-row b{display:block;font-size:10.5px}
.nt{position:absolute;left:8px;right:8px;z-index:15;display:flex;gap:9px;align-items:center;padding:10px 12px;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 14px 24px -12px rgba(64,8,36,.45),0 0 0 1px rgba(23,23,26,.05)}
.nt .ni{width:28px;height:28px;border-radius:9px;background:var(--acc);color:#fff;display:grid;place-items:center;font:500 11px/1 var(--fd);flex:none}
.nt div{min-width:0;font-size:9.5px;line-height:1.3;color:color-mix(in oklch,var(--acc) 75%,#000)}
.nt b{display:block;font-size:10px;color:var(--ink)}
.nt.n1{top:34px}.nt.n2{top:92px}
/* scene 2 : site */
.s2h{display:flex;align-items:center;gap:8px;padding:34px 14px 10px}
.s2h .lg{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font:500 11px/1 var(--fd)}
.s2h b{font:500 16px/1 var(--fd)}
.s2-svc{margin:4px 14px 0;padding:10px 12px;border-radius:18px;background:color-mix(in oklch,var(--acc-2) 7%,#fff);font-size:10px;display:flex;justify-content:space-between}
.s2-l{margin:12px 14px 8px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklch,var(--acc-2) 56%,#fff)}
.slots{position:absolute;left:14px;top:150px;width:190px;display:grid;grid-template-columns:repeat(3,58px);gap:8px}
.slot{height:30px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--acc-2) 16%,#fff);display:grid;place-items:center;font-size:10px;font-weight:600;color:color-mix(in oklch,var(--acc) 75%,#000)}
.slot.pick{background:var(--acc);color:#fff;box-shadow:none}
.s2-pay{position:absolute;left:14px;right:14px;top:330px;height:38px;border-radius:999px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center}
.sheet2{position:absolute;left:0;right:0;bottom:0;height:150px;border-radius:30px 30px 34px 34px;background:#fff;box-shadow:0 -14px 30px -16px rgba(40,6,24,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:12}
.sheet2 .ok{width:40px;height:40px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.sheet2 .ok svg{width:18px;height:18px}
.sheet2 b{font-size:12px}.sheet2 span{font-size:10px;color:color-mix(in oklch,var(--acc-2) 56%,#fff)}
/* scene 3 : agenda */
.ag-h{padding:34px 14px 8px;display:flex;justify-content:space-between;align-items:center}
.ag-h b{font:500 17px/1 var(--fd)}
.ag-tabs{display:flex;gap:4px}.ag-tabs span{height:20px;padding:0 8px;border-radius:999px;font-size:8.5px;display:grid;place-items:center;background:#f0edf6}.ag-tabs span.on{background:var(--ink);color:#fff}
.ag-d{position:absolute;left:12px;top:72px;display:grid;grid-template-columns:repeat(5,36px);gap:4px;font-size:8.5px;color:color-mix(in oklch,var(--acc-2) 56%,#fff);text-align:center}
.ag-c{position:absolute;left:12px;top:92px;width:196px;height:250px}
.ag-c::before{content:"";position:absolute;inset:0;border-radius:18px;background:repeating-linear-gradient(180deg,transparent 0 49px,rgba(23,23,26,.05) 49px 50px)}
.bk{position:absolute;width:36px;border-radius:12px;background:color-mix(in oklch,var(--acc) 22%,#fff);font-size:7.5px;font-weight:600;color:var(--ink);padding:5px 4px;text-align:center;line-height:1.2;transform-origin:50% 0}
.bk.v{background:color-mix(in oklch,var(--acc-2) 13%,#fff)}.bk.g{background:#ece9ef}
.bk.x{opacity:0}
.bk.x .cx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:16px;padding:0 6px;border-radius:999px;background:#17171A;color:#fff;font-size:7px;display:grid;place-items:center;white-space:nowrap}
.bk.n{background:var(--acc);color:#fff}
.wl{position:absolute;left:14px;right:14px;top:360px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:#fff;box-shadow:0 10px 20px -12px rgba(64,8,36,.4),0 0 0 1px rgba(23,23,26,.05);font-size:9.5px}
.wl i{height:20px;padding:0 8px;border-radius:999px;background:var(--ink);color:#fff;font-style:normal;font-size:8px;font-weight:700;display:grid;place-items:center;white-space:nowrap}
/* scene 4 : fiche */
.fi-h{padding:38px 14px 12px;display:flex;align-items:center;gap:12px}
.fi-av{width:54px;height:54px;border-radius:50%;background:color-mix(in oklch,var(--acc) 18%,#fff);color:var(--acc);display:grid;place-items:center;font:500 18px/1 var(--fd)}
.fi-h b{display:block;font:500 17px/1.1 var(--fd)}.fi-h span{font-size:9px;color:color-mix(in oklch,var(--acc-2) 56%,#fff)}
.fi-r{margin:0 14px 7px;padding:9px 12px;border-radius:16px;background:color-mix(in oklch,var(--acc-2) 7%,#fff);font-size:9.5px;display:flex;justify-content:space-between;gap:8px}
.fi-r em{font-style:normal;color:color-mix(in oklch,var(--acc-2) 56%,#fff)}
.fi-n{margin:10px 14px 0;padding:10px 12px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--acc-2) 16%,#fff);font-size:9.5px;min-height:56px}
.fi-n small{display:block;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklch,var(--acc-2) 56%,#fff);margin-bottom:4px}
.fi-n p{white-space:nowrap}
.fi-ins{position:absolute;left:14px;right:14px;top:338px;height:96px;border-radius:24px;background:radial-gradient(60px 60px at 30% 40%,color-mix(in oklch,var(--acc) 40%,#fff),transparent 70%),radial-gradient(70px 60px at 75% 65%,color-mix(in oklch,var(--acc-2) 14%,#fff),transparent 70%),color-mix(in oklch,var(--acc-2) 7%,#fff);display:flex;align-items:flex-end;padding:10px}
.fi-ins span{height:20px;padding:0 9px;border-radius:999px;background:#fff;font-size:8.5px;font-weight:700;display:grid;place-items:center}
/* scene 5 : avis */
.av-h{padding:36px 14px 6px;text-align:center}
.av-h b{display:block;font:500 17px/1.1 var(--fd)}
.av-h span{font-size:9px;color:color-mix(in oklch,var(--acc-2) 56%,#fff)}
.rv-c{margin:8px 14px 0;padding:11px 12px;border-radius:20px;background:#fff;box-shadow:0 8px 18px -12px rgba(40,6,24,.35),0 0 0 1px rgba(23,23,26,.04);display:flex;gap:9px}
.rv-c .ia{width:28px;height:28px;border-radius:50%;background:color-mix(in oklch,var(--acc-2) 12%,#fff);display:grid;place-items:center;font:500 11px/1 var(--fd);flex:none}
.rv-c .st{color:#b3873c;font-size:9px;letter-spacing:1px}
.rv-c p{font-size:9.5px;line-height:1.35;color:color-mix(in oklch,var(--acc) 75%,#000)}
.av-b{position:absolute;left:50%;top:372px;transform:translateX(-50%);height:30px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}
.av-b i{width:14px;height:14px;border-radius:50%;background:#fff;display:grid;place-items:center}
.av-b i svg{width:8px;height:8px}
/* scene 6 : dashboard */
.db-h{padding:36px 14px 8px}
.db-h b{display:block;font:500 17px/1.1 var(--fd)}.db-h span{font-size:9px;color:color-mix(in oklch,var(--acc-2) 56%,#fff)}
.db-t{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px}
.db-t div{padding:10px 12px;border-radius:18px;background:color-mix(in oklch,var(--acc-2) 7%,#fff);font-size:8.5px;color:color-mix(in oklch,var(--acc-2) 56%,#fff);line-height:1.3}
.db-t div b{display:block;font-size:17px;color:var(--ink);margin-top:3px}
.db-t .w{grid-column:span 2;background:var(--ink);color:rgba(255,255,255,.7)}
.db-t .w b{color:#fff}
.db-bars{position:absolute;left:14px;right:14px;top:256px;height:84px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 6px}
.db-bars i{width:18px;border-radius:999px;background:color-mix(in oklch,var(--acc-2) 17%,#fff);transform-origin:50% 100%}
.db-bars i.on{background:var(--acc)}
.db-team{position:absolute;left:14px;right:14px;top:356px;padding:10px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px color-mix(in oklch,var(--acc-2) 16%,#fff);display:flex;align-items:center;gap:8px;font-size:9.5px}
.db-team span{display:flex}
.db-team span i{width:22px;height:22px;border-radius:50%;background:color-mix(in oklch,var(--acc-2) 12%,#fff);display:grid;place-items:center;font:500 9px/1 var(--fd);font-style:normal;box-shadow:0 0 0 2px #fff}
.db-team span i+i{margin-left:-6px;background:color-mix(in oklch,var(--acc) 20%,#fff)}
.b-ex{position:absolute;z-index:22;right:12px;top:30px}
@media(max-width:940px){.bn-grid{grid-template-columns:minmax(0,1fr)}.bn-right{order:1}.bn-copy{text-align:center;justify-content:center}.bn-blk{align-items:center}.bn-copy{min-height:0}.bn-fitbox{max-width:460px}}
@media(prefers-reduced-motion:reduce){.bcard{transition:none!important}}

/* aperçu réel du site + logo carré */
.s2-real{position:absolute;inset:0;z-index:15;background:#1c1713;pointer-events:none}
.s2-real img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.bcard.is-front .t-out{animation:tOut .5s ease var(--dl,0s) both}
@keyframes tOut{from{opacity:1}to{opacity:0;visibility:hidden}}
.ico.img{background:#fff;padding:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),0 8px 14px -6px rgba(0,0,0,.35)}
.app-h .lg.img{padding:7px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.nt .ni.img{background:#fff;padding:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.s2h .lg.img{background:#fff;padding:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.ico.img img,.lg.img img,.ni.img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}