/* KAZAKOM — page Systèmes de commande : tourniquet Quick Kebab (kz-qk-tour.js)
   L'application Quick Kebab (téléphone) et le site internet Quick Kebab (ordinateur)
   tournent ensemble, comme le tourniquet « Nos applications » de l'accueil et de la formation.
   Classes propres (kzq-*) : rien n'est partagé avec les autres carrousels. */
.kzq{--kzq-c:#27b4f5;--kzq-c2:#8ad8ff;--kzq-t:#f3f7fd;--kzq-m:#a3b4cc;position:relative;display:block;max-width:none;width:100%;clear:both;isolation:isolate;margin:0;padding:clamp(36px,5vw,72px) 0 clamp(40px,5vw,72px);text-align:center;background:radial-gradient(ellipse at 50% 58%,rgba(22,75,117,.16),transparent 63%);border-block:1px solid rgba(138,216,255,.08)}
.kzq::before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#8ad8ff77,transparent);pointer-events:none}
.kzq-head{display:block;position:relative;max-width:1080px;margin:auto;padding:0;text-align:center}
.kzq-k{margin:0 0 12px;font-size:12px;letter-spacing:.22em;color:var(--kzq-c2);opacity:.85;text-transform:uppercase}
.kzq-h{margin:0;font-family:var(--display,'Plus Jakarta Sans',Arial,sans-serif);font-weight:800;font-size:clamp(34px,5.4vw,72px);line-height:1;letter-spacing:-.04em}
.kzq-h span{display:inline-block;padding:.04em .06em .14em;color:transparent;background:linear-gradient(100deg,#f3f7fd 0%,#f3f7fd 38%,#8ad8ff 47%,#27b4f5 50%,#8ad8ff 53%,#f3f7fd 62%,#f3f7fd 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.75,0,.2,1)}
.kzq-h[data-in] span{clip-path:inset(-10% -2% -10% -2%);animation:kzqSweep 2.4s .8s cubic-bezier(.45,0,.2,1) forwards}
@keyframes kzqSweep{to{background-position:0 0}}
html[dir=rtl] .kzq-h{letter-spacing:0;line-height:1.3}
html[dir=rtl] .kzq-h span{clip-path:inset(0 0 0 100%)}
html[dir=rtl] .kzq-h[data-in] span{clip-path:inset(-10% -2% -10% -2%)}
.kzq-lead{max-width:34em;margin:20px auto 0;padding:0 20px;color:var(--kzq-m);font-size:clamp(16px,1.5vw,19px);line-height:1.6}

.kzq-stage{position:relative;width:var(--kzq-vw,100vw);height:var(--kzq-sh,720px);margin:clamp(20px,3vw,40px) calc(50% - var(--kzq-vw,100vw) / 2) 0;overflow:hidden;perspective:1850px;perspective-origin:50% 42%;direction:ltr;outline:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.kzq-stage:focus-visible{box-shadow:inset 0 0 0 2px rgba(39,180,245,.6)}
.kzq-floor{position:absolute;left:50%;bottom:calc(var(--kzq-base,104px) - 85px);width:min(1100px,96vw);height:170px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(39,180,245,.32) 0%,rgba(39,180,245,.08) 42%,rgba(39,180,245,0) 70%)}
.kzq-floor::before,.kzq-floor::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.kzq-floor::before{width:min(760px,90vw);height:54px;border:1px solid rgba(138,216,255,.5);box-shadow:0 0 26px rgba(39,180,245,.45),inset 0 0 22px rgba(39,180,245,.3)}
.kzq-floor::after{width:min(1080px,100vw);height:84px;border:1px solid rgba(120,175,235,.14)}
.kzq-orbit-glow{display:none;position:absolute;left:50%;bottom:calc(var(--kzq-base,104px) - 80px);width:min(1200px,140vw);height:190px;border:1px solid #8ad8ff70;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 70px #27b4f550,inset 0 0 65px #27b4f530;pointer-events:none}

.kzq-dev{position:absolute;left:50%;bottom:var(--kzq-base,104px);transform-origin:50% 100%;transition:transform .95s cubic-bezier(.22,.9,.2,1),opacity .95s ease;will-change:transform,opacity;cursor:pointer}
.kzq-dev[data-on]{cursor:default}
.kzq-body{position:relative;padding:var(--b);border-radius:var(--r);background:linear-gradient(150deg,#34415e 0%,#0b1220 42%,#070b15 70%,#1d2840 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 4px #04070d,0 50px 90px -40px rgba(39,180,245,.55),0 30px 60px rgba(0,0,0,.55)}
.kzq-screen{position:relative;width:var(--sw);height:var(--sh);overflow:hidden;border-radius:var(--sr);background:#0d0d0d;isolation:isolate}
.kzq-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.kzq-screen iframe{position:absolute;left:0;top:0;border:0;margin:0;transform-origin:0 0;pointer-events:none;background:#0d0d0d;opacity:0;transition:opacity .45s ease}
.kzq-screen iframe[data-ready]{opacity:1}
.kzq-island{position:absolute;left:50%;top:calc(var(--b) + var(--sw) * .03);width:calc(var(--sw) * .3);height:calc(var(--sw) * .085);transform:translateX(-50%);border-radius:99px;background:#000;z-index:9;pointer-events:none}
.kzq-shade{position:absolute;inset:0;border-radius:var(--r);background:#030712;opacity:0;transition:opacity .95s ease;pointer-events:none;z-index:10}
.kzq-ring{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none;opacity:0;transition:opacity .35s;z-index:11}
.kzq-dev[data-on] .kzq-ring{opacity:1}
.kzq-ring rect{fill:none;stroke:#8ad8ff;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(39,180,245,.95))}

/* Ordinateur portable : écran avec barre d'adresse, puis le socle. */
.kzq-laptop .kzq-chrome{display:flex;align-items:center;gap:calc(var(--sw) * .008);height:var(--ch);padding:0 calc(var(--sw) * .012);background:#1a1d24;border-radius:var(--sr) var(--sr) 0 0;box-sizing:border-box}
.kzq-laptop .kzq-chrome i{width:calc(var(--ch) * .32);height:calc(var(--ch) * .32);border-radius:50%;background:#3b414d;flex:0 0 auto}
.kzq-laptop .kzq-chrome i:nth-child(1){background:#ff5f57}.kzq-laptop .kzq-chrome i:nth-child(2){background:#febc2e}.kzq-laptop .kzq-chrome i:nth-child(3){background:#28c840}
.kzq-laptop .kzq-chrome span{flex:1;max-width:58%;margin:0 auto;height:calc(var(--ch) * .62);border-radius:99px;background:#0e1015;color:#c9d2df;font:500 calc(var(--ch) * .34)/calc(var(--ch) * .62) system-ui,sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 1em}
.kzq-laptop .kzq-chrome span b{color:#8f99a8;font-weight:500}
.kzq-laptop .kzq-screen{border-radius:0 0 var(--sr) var(--sr)}
.kzq-laptop .kzq-cam{position:absolute;left:50%;top:calc(var(--b) / 2);width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4c6e,#05080f 70%);pointer-events:none}
.kzq-deck{position:relative;height:var(--dh);margin:0;border-radius:0 0 calc(var(--dh) * 1.4) calc(var(--dh) * 1.4);background:linear-gradient(180deg,#56637e 0%,#2a3348 38%,#121827 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 22px 40px -18px rgba(39,180,245,.45)}
.kzq-deck::before{content:"";position:absolute;left:50%;top:0;width:16%;height:42%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:#0c111c}

/* Doigt de démonstration. */
.kzq-touch{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.kzq-finger{position:absolute;left:0;top:0;width:var(--kzq-f,40px);height:var(--kzq-f,40px);margin:calc(var(--kzq-f,40px) / -2) 0 0 calc(var(--kzq-f,40px) / -2);opacity:0;transition:transform .5s cubic-bezier(.3,.8,.3,1),opacity .3s ease;will-change:transform}
.kzq-finger.on{opacity:1}
.kzq-dev:not([data-on]) .kzq-finger{opacity:0}
.kzq-finger i{display:block;width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.34);border:2px solid rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 6px rgba(39,180,245,.22);box-sizing:border-box;transition:transform .14s ease}
.kzq-finger.down i{transform:scale(.76);background:rgba(138,216,255,.55)}
.kzq-finger b{position:absolute;inset:0;border-radius:50%;border:2px solid #8ad8ff;opacity:0}
.kzq-finger.hit b{animation:kzqRip .6s ease-out}
@keyframes kzqRip{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(2.1)}}
.kzq-laptop .kzq-finger i{background:none;border:0;box-shadow:none;border-radius:0;position:absolute;left:50%;top:50%;width:calc(var(--kzq-f,40px) * .62);height:calc(var(--kzq-f,40px) * .62);transform-origin:0 0}
.kzq-laptop .kzq-finger i svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.65))}
.kzq-laptop .kzq-finger.down i{transform:scale(.86);background:none}

/* Écran d'accueil du téléphone : on ouvre l'appli Quick Kebab comme un client. */
.kzq-home{position:absolute;inset:0;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);align-content:start;gap:calc(var(--sw) * .07) calc(var(--sw) * .045);padding:calc(var(--sw) * .3) calc(var(--sw) * .07) 0;background:radial-gradient(circle at 25% 15%,#3b1d4f 0%,transparent 55%),radial-gradient(circle at 85% 75%,#0e3a5a 0%,transparent 60%),linear-gradient(160deg,#151a2e,#06080f);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.kzq-home.on{opacity:1;visibility:visible;transition:opacity .5s ease}
.kzq-home .ic{display:flex;flex-direction:column;align-items:center;gap:calc(var(--sw) * .02);color:#e8edf6;font:600 calc(var(--sw) * .032)/1.2 system-ui,sans-serif}
.kzq-home .ic i{display:block;width:calc(var(--sw) * .16);height:calc(var(--sw) * .16);border-radius:calc(var(--sw) * .042);background:var(--g);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.kzq-home .ic img{width:calc(var(--sw) * .16);height:calc(var(--sw) * .16);border-radius:calc(var(--sw) * .042);display:block;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(216,35,42,.55)}
.kzq-home .ic.qk{animation:kzqPulse 1.6s ease-in-out infinite}
@keyframes kzqPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.kzq-home .dock{position:absolute;left:calc(var(--sw) * .05);right:calc(var(--sw) * .05);bottom:calc(var(--sw) * .06);height:calc(var(--sw) * .22);border-radius:calc(var(--sw) * .07);background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.kzq-splash{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:#0d0d0d;opacity:0;visibility:hidden;transform:scale(.18);transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease,visibility 0s .55s}
.kzq-splash.on{opacity:1;visibility:visible;transform:scale(1);transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.kzq-splash.out{opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform .6s ease}
.kzq-splash img{width:58%;filter:drop-shadow(0 0 22px rgba(216,35,42,.55))}

.kzq-cap{position:relative;min-height:104px;margin:6px auto 0;padding:0 20px;max-width:640px}
.kzq-cap>div{transition:opacity .45s ease,transform .45s ease}
.kzq-cap>div[data-out]{opacity:0;transform:translateY(8px)}
.kzq-name{margin:0;color:var(--kzq-t);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em}
.kzq-kind{margin:6px 0 0;color:var(--kzq-c2);font-weight:600;font-size:15px}
.kzq-line{margin:10px auto 0;max-width:30em;color:var(--kzq-m);font-size:16px;line-height:1.6}
html[dir=rtl] .kzq-name{letter-spacing:0}

.kzq-nav{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:14px;direction:ltr}
.kzq-nav button{display:grid;place-items:center;width:54px;height:54px;padding:0;border-radius:50%;border:1px solid rgba(120,175,235,.28);background:rgba(8,19,40,.75);color:#f3f7fd;cursor:pointer;transition:border-color .25s,background-color .25s,transform .25s}
.kzq-nav button:hover{border-color:#27b4f5;background:rgba(39,180,245,.16)}
.kzq-nav button:active{transform:scale(.94)}
.kzq-nav button:focus-visible{outline:2px solid #8ad8ff;outline-offset:3px}
.kzq-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kzq-count{min-width:84px;color:#a3b4cc;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.kzq-count b{color:#fff;font-weight:700}
.kzq-nav .kzq-pause{width:42px;height:42px}
.kzq-nav .kzq-pause svg{width:18px;height:18px}

/* Le tour complet du plateau, comme sur l'accueil. */
.kzq-spinning .kzq-orbit-glow{display:block;animation:kzqOrbitGlow 4.4s ease-in-out both}
.kzq-spinning .kzq-dev,.kzq-spinning .kzq-shade{transition:none!important}
.kzq-spinning .kzq-ring{opacity:0}
.kzq-spinning .kzq-finger{opacity:0!important}
.kzq-spinning .kzq-floor{animation:kzqOrbitFloor 4.4s ease-in-out both}
.kzq-motion-paused .kzq-orbit-glow,.kzq-motion-paused .kzq-floor{animation-play-state:paused}
@keyframes kzqOrbitGlow{0%,100%{opacity:0;transform:translateX(-50%) scale(.68)}20%{opacity:.7}55%{opacity:1;transform:translateX(-50%) scale(1.04)}85%{opacity:.65}}
@keyframes kzqOrbitFloor{0%,100%{filter:brightness(1);transform:translateX(-50%) scale(1)}50%{filter:brightness(1.75);transform:translateX(-50%) scale(1.12)}}

@media (max-width:760px){
  .kzq-nav button{width:48px;height:48px}
  .kzq-cap{min-height:124px}
  .kzq-line{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .kzq-dev,.kzq-shade,.kzq-cap>div{transition-duration:.01s}
  .kzq-h span{transition:none}
  .kzq-h[data-in] span{animation:none;background-position:0 0}
  .kzq-finger{transition-duration:.15s}
  .kzq-orbit-glow{display:none!important}
  .kzq-floor{animation:none!important}
}
.kzq-home .ic i{display:grid;place-items:center}
.kzq-home .ic i svg{width:62%;height:62%;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kzq-home .ic>span{max-width:calc(var(--sw) * .21);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.kzq-home .ic.qk>span{font-weight:800}
/* Échange des deux appareils : un demi-tour du plateau. */
.kzq-swapping .kzq-dev,.kzq-swapping .kzq-shade{transition:none!important}
.kzq-swapping .kzq-ring{opacity:0}
.kzq-swapping .kzq-finger{opacity:0!important}