/* QTouch — QBOX animée (JS : lib/site/qbox7.js) */
.qk-stage{container-type:inline-size;width:min(300px,70%)}
.qk{position:relative;width:100%;font-family:'Figtree',sans-serif;--led:#8B5CF6}
.qk .body{position:relative;border-radius:22cqw 22cqw 6cqw 6cqw;background:linear-gradient(180deg,#17151E,#0B0A10);padding:7cqw 6cqw 6cqw;box-shadow:0 0 0 1.4cqw #1E1B26,0 0 0 2.2cqw var(--led),0 0 9cqw rgba(139,92,246,.55),0 50px 80px -40px rgba(20,10,50,.7);transition:box-shadow .5s}
.qk[data-s="3"] .body{animation:qkLed 1.2s ease-in-out infinite}
@keyframes qkLed{50%{box-shadow:0 0 0 1.4cqw #1E1B26,0 0 0 2.6cqw #C4B5FD,0 0 18cqw rgba(167,139,250,.95),0 50px 80px -40px rgba(20,10,50,.7)}}
.qk .lg{display:flex;justify-content:center;margin-bottom:4cqw}.qk .lg img{height:8cqw!important;width:auto!important;max-width:60%}
.qk .qs{position:relative;aspect-ratio:9/12.5;border-radius:3cqw;overflow:hidden;background:radial-gradient(80% 60% at 50% 70%,#5B21B6,#1E1038 70%);color:#fff;text-align:center}
.qk .qs>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .5s}
.qk .ad{justify-content:flex-end!important}
.qk .ad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qk .ad .at{position:relative;width:100%;padding:6cqw 5cqw;background:linear-gradient(transparent,rgba(190,24,93,.95) 40%);text-align:left}
.qk .ad small{display:block;font-size:3.6cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.qk .ad b{display:block;font-size:8cqw;line-height:1;letter-spacing:-.03em}
.qk .ad span{display:block;margin-top:1.5cqw;font-size:4cqw;font-weight:700}
.qk .pl b{font-size:8cqw;letter-spacing:-.02em}.qk .pl small{font-size:4cqw;opacity:.8;margin-top:1cqw}
.qk .pl svg{width:46cqw;margin:6cqw 0;fill:none;stroke:#C4B5FD;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 3cqw #8B5CF6)}
.qk .pl .bt{padding:2.6cqw 6cqw;border-radius:2.5cqw;background:linear-gradient(90deg,#7C3AED,#A855F7);font-size:4.2cqw;font-weight:800}
.qk .pl .tap{position:absolute;left:58%;top:80%;width:10cqw;height:10cqw;border-radius:50%;background:rgba(255,255,255,.55);opacity:0}
.qk .wn b{font-size:11cqw;letter-spacing:-.03em;background:linear-gradient(90deg,#FDBA74,#F472B6);-webkit-background-clip:text;background-clip:text;color:transparent}
.qk .wn small{font-size:4cqw;opacity:.85}
/* état 0 : la pub, puis l'invitation à jouer avec un toucher */
.qk[data-s="0"] .ad{animation:qkAd 3.6s infinite}
.qk[data-s="0"] .pl{animation:qkPl 3.6s infinite}
.qk[data-s="0"] .pl .tap{animation:qkTap 3.6s infinite}
@keyframes qkAd{0%,45%{opacity:1}55%,100%{opacity:0}}
@keyframes qkPl{0%,45%{opacity:0}55%,100%{opacity:1}}
@keyframes qkTap{0%,70%{opacity:0;transform:scale(.4)}80%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
.qk[data-s="1"] .pl,.qk[data-s="3"] .ad,.qk[data-s="4"] .ad{opacity:1}
.qk[data-s="2"] .wn{opacity:1}
/* modules : imprimante, scanner, lecteur */
.qk .mods{display:flex;justify-content:space-between;gap:3cqw;margin:5cqw 0}
.qk .m{position:relative;flex:1;height:14cqw;border-radius:2cqw;background:#08070C;box-shadow:inset 0 0 0 .6cqw #2A2633;display:grid;place-items:center;transition:box-shadow .4s}
.qk .pr i{width:70%;height:2.4cqw;border-radius:1cqw;background:#2A2633}
.qk .sc i{width:5cqw;height:5cqw;border-radius:1cqw;background:#fff;box-shadow:0 0 0 1.4cqw #1E1B26}
.qk .cr i{width:60%;height:60%;border-radius:1.4cqw;box-shadow:inset 0 0 0 .6cqw #3A3545}
.qk[data-s="1"] .m{box-shadow:inset 0 0 0 .6cqw #A78BFA,0 0 6cqw rgba(167,139,250,.55)}
.qk .tk{position:absolute;left:12%;top:60%;width:76%;padding:2cqw;border-radius:1cqw;background:#fff;color:#141218;font-style:normal;text-align:center;transform-origin:top;transform:scaleY(0);transition:transform .9s cubic-bezier(.22,1,.36,1) .5s;z-index:3;box-shadow:0 4cqw 6cqw -3cqw rgba(0,0,0,.6)}
.qk .tk b{display:block;font-size:3cqw}.qk .tk small{display:block;font-size:2.4cqw}.qk .tk u{display:block;height:5cqw;margin-top:1cqw;background:repeating-linear-gradient(90deg,#141218 0 .5cqw,#fff .5cqw 1.1cqw)}
.qk[data-s="1"] .tk{transform:scaleY(1)}
.qk .bm{position:absolute;left:50%;bottom:100%;width:.8cqw;height:0;margin-left:-.4cqw;background:linear-gradient(#ef4444,transparent);opacity:0}
.qk[data-s="1"] .bm{animation:qkBeam 1.2s ease-in-out infinite}
@keyframes qkBeam{0%{height:0;opacity:0}40%{height:12cqw;opacity:1}100%{height:12cqw;opacity:0}}
/* distributeur */
.qk .dsp{position:relative;height:40cqw;border-radius:3cqw;background:#08070C;box-shadow:inset 0 0 0 .6cqw #2A2633;display:flex;flex-direction:column;align-items:center;padding-top:4cqw;overflow:hidden;transition:box-shadow .4s}
.qk .dsp>svg{width:9cqw;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.qk .ch{width:6cqw;height:6cqw;border-right:.9cqw solid #fff;border-bottom:.9cqw solid #fff;transform:rotate(45deg);margin-top:1cqw;opacity:.8}
.qk .bk{position:absolute;left:12%;right:12%;bottom:3cqw;height:11cqw;border-radius:1cqw 1cqw 2.5cqw 2.5cqw;background:repeating-linear-gradient(90deg,#6D28D9 0 1.4cqw,#5B21B6 1.4cqw 2.4cqw);box-shadow:inset 0 2cqw 0 #7C3AED}
.qk .gift{position:absolute;left:50%;top:-14cqw;width:13cqw;height:12cqw;margin-left:-6.5cqw;border-radius:1.5cqw;background:linear-gradient(90deg,transparent 42%,#FDE68A 42% 58%,transparent 58%),linear-gradient(135deg,#F97316,#EC4899);box-shadow:0 2cqw 4cqw rgba(0,0,0,.4);z-index:2}
.qk[data-s="2"] .gift{animation:qkDrop 1.6s cubic-bezier(.5,0,.6,1) forwards .3s}
@keyframes qkDrop{70%{top:21cqw;transform:rotate(-8deg)}85%{top:18cqw;transform:rotate(4deg)}100%{top:20cqw;transform:rotate(0)}}
.qk[data-s="2"] .dsp{box-shadow:inset 0 0 0 .6cqw #F472B6,0 0 7cqw rgba(244,114,182,.55)}
/* coffre */
.qk .cab{position:relative;width:86%;margin:0 auto;height:40cqw;border-radius:0 0 3cqw 3cqw;background:linear-gradient(180deg,#121017,#0A090D);box-shadow:inset 0 0 0 .6cqw #1E1B26;display:flex;align-items:flex-end;justify-content:space-between;padding:5cqw;transition:box-shadow .4s}
.qk .lk{width:10cqw;height:10cqw;border-radius:2.5cqw;background:#1E1B26;display:grid;place-items:center}
.qk .lk svg{width:6cqw;fill:none;stroke:#A1A1AA;stroke-width:2;stroke-linecap:round}
.qk .stk{width:52%;opacity:0;transition:opacity .4s}
.qk .stk small{display:block;font-size:3.2cqw;color:#D4D4D8;font-weight:700}
.qk .stk i{display:block;height:2cqw;border-radius:2cqw;background:#2A2633;margin-top:1.4cqw;overflow:hidden}
.qk .stk u{display:block;height:100%;width:0;background:linear-gradient(90deg,#22C55E,#86EFAC);transition:width 1.2s .3s}
.qk[data-s="4"] .cab{box-shadow:inset 0 0 0 .6cqw #22C55E,0 0 7cqw rgba(34,197,94,.45)}
.qk[data-s="4"] .stk{opacity:1}.qk[data-s="4"] .stk u{width:72%}
.qk[data-s="4"] .lk svg{stroke:#86EFAC}
.qk .ped{width:120%;margin:-2cqw -10% 0;height:12cqw;border-radius:50%;background:radial-gradient(closest-side,#DDD6FE,rgba(221,214,254,0));position:relative;z-index:-1}
@media(prefers-reduced-motion:reduce){.qk *{animation:none!important}}
.qk .qs{background:radial-gradient(80% 60% at 50% 70%,#5B21B6,#1E1038 70%)!important;color:#fff!important}
.qk .body{border-radius:12cqw 12cqw 5cqw 5cqw}

.qk .qs>.pl,.qk .qs>.wn{background:transparent!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important}