/* QTouch — fiche QTOTEM : « Sur le comptoir » (lib/site/tt9.js)
   Photo recadrée images/site/scenes/qtotem-counter-bg.jpg + QTotem détouré plus petit, posé sur le comptoir (tiers droit).
   Ordinateur : section collante, la caméra s'approche du QTotem et l'écran joue le parcours de la démo
   (pub Fresko + bannière QR → 200 points à collecter → e-mail ou QR).
   Téléphone / mouvement réduit : photo fixe + les 3 écrans côte à côte. */
.tt9{position:relative;margin-top:40px}
.p6-sh-situ.tt9{overflow:visible;border-radius:0}
.p6-sh-situ.tt9::after{display:none}
.tt9.anim{height:340vh}
.tt9-pin{position:relative}
.tt9.anim .tt9-pin{position:sticky;top:63px;height:calc(100vh - 63px);display:grid;place-items:center}
.tt9-fr{position:relative;width:100%;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#2B2A24;box-shadow:0 40px 80px -40px rgba(20,16,10,.55);isolation:isolate}
.tt9.anim .tt9-fr{width:min(100%,calc((100vh - 150px) * 16 / 9))}
.tt9-cam{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
.tt9-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:filter .2s linear}
.tt9-dev{position:absolute;display:block;max-width:none;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));pointer-events:none}
.tt9-scr{position:absolute;left:0;top:0;width:260px;height:500px;transform-origin:0 0;border-radius:10px;overflow:hidden;background:#111;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tt9-fr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.18));z-index:2}

/* écrans (style de la démo établissement) */
.t9p{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px 16px;text-align:center;opacity:0;transition:opacity .25s;font-family:'Figtree',sans-serif;color:#0E1A5C}
.t9p.on{opacity:1}
.t9-ad{padding:0;background:#F4C9C3}
.t9-ad>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% 64%;max-width:none}
.t9-ban{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;padding:7px;border-radius:12px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 16px rgba(30,60,40,.25);color:#1E5B3F;text-align:left;transition:transform .15s}
.t9-ban.press{transform:scale(.96)}
.t9-qr{flex:none;padding:3px;border-radius:7px;background:#fff;box-shadow:0 0 0 1.5px rgba(30,91,63,.15)}
.t9-qr img{display:block;width:40px;height:40px;max-width:none}
.t9-ban small{display:block;font:800 7.5px/1 'Montserrat','Figtree',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#D7263D}
.t9-ban b{display:block;margin-top:3px;font:800 11.5px/1.15 'Montserrat','Figtree',sans-serif}
.t9-fk{background:#FFF6E6;background-image:radial-gradient(circle at 20% 12%,#FFE3A8 0 18%,transparent 19%),radial-gradient(circle at 88% 86%,#F9C6CF 0 20%,transparent 21%),radial-gradient(rgba(14,26,92,.07) 1.2px,transparent 1.6px);background-size:auto,auto,12px 12px}
.tt9 img.t9-q{width:96px;height:auto;max-width:none;filter:drop-shadow(3px 3px 0 #0E1A5C);animation:t9bob 1.8s ease-in-out infinite}
@keyframes t9bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.t9-logo{padding:4px 11px;border:2.5px solid #0E1A5C;border-radius:8px;background:#D7263D;color:#fff;font:800 11px/1 'Montserrat','Figtree',sans-serif;font-style:normal;letter-spacing:.08em;box-shadow:2px 2px 0 #0E1A5C}
.t9p h4{margin:0;font:400 23px/1.02 'Anton','Figtree',sans-serif;text-transform:uppercase;color:#0E1A5C;text-wrap:balance}
.t9p p{margin:0;font:700 11.5px/1.3 'Figtree',sans-serif;color:#0E1A5C}
.t9-big{font-size:40px!important;color:#D7263D!important;text-shadow:2px 2px 0 #0E1A5C}
.t9-btn{position:relative;display:inline-block;padding:9px 16px;border:3px solid #0E1A5C;border-radius:12px;background:#F7EE8C;color:#0E1A5C;font:400 16px/1 'Anton','Figtree',sans-serif;text-transform:uppercase;box-shadow:3px 3px 0 #0E1A5C;transition:transform .12s,box-shadow .12s}
.t9-btn.press{transform:translate(2px,2px);box-shadow:1px 1px 0 #0E1A5C}
.t9-in{width:88%;min-height:32px;padding:8px 10px;border:2.5px solid #0E1A5C;border-radius:9px;background:#fff;font:600 11.5px/1.2 'Figtree',sans-serif;text-align:left;color:#0E1A5C}
.t9-in i{display:inline-block;width:1.5px;height:12px;margin-left:1px;vertical-align:-2px;background:#0E1A5C;animation:t9car 1s steps(1) infinite}
@keyframes t9car{50%{opacity:0}}
.t9-sm{font-size:10.5px!important;opacity:.8}
.t9-qrb{padding:6px;border:3px solid #0E1A5C;border-radius:12px;background:#fff;box-shadow:4px 4px 0 #0E1A5C;transition:box-shadow .2s}
.t9-qrb img{display:block;width:84px;height:84px;max-width:none}
.t9-qrb.on{box-shadow:0 0 0 4px #F7EE8C,4px 4px 0 #0E1A5C}
.t9-cur{position:absolute;left:0;top:0;width:26px;height:26px;margin:-3px 0 0 -5px;opacity:0;pointer-events:none;z-index:5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.t9-cur svg{display:block;width:100%;height:100%}
.t9-rip{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px rgba(14,26,92,.5);opacity:0;pointer-events:none;z-index:4}

/* étiquette d'étape */
.tt9-pill{position:absolute;left:50%;top:18px;z-index:3;display:flex;align-items:center;gap:10px;max-width:calc(100% - 36px);padding:9px 16px;border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 10px 30px -10px rgba(0,0,0,.4);transform:translateX(-50%);color:#0E1A5C;white-space:nowrap;transition:opacity .25s}
.tt9-pill b{font:400 19px/1 'Anton','Figtree',sans-serif;text-transform:uppercase;letter-spacing:.01em}
.tt9-pill span{font:600 13.5px/1.2 'Figtree',sans-serif;overflow:hidden;text-overflow:ellipsis}
.tt9-dots{position:absolute;right:18px;top:50%;z-index:3;display:flex;flex-direction:column;gap:7px;transform:translateY(-50%)}
.tt9-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .2s,transform .2s}
.tt9-dots i.on{background:#F26B1D;transform:scale(1.3)}

/* téléphone / mouvement réduit : 3 écrans côte à côte */
.tt9-row{display:none;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.tt9.flat .tt9-row{display:grid}
.tt9.flat .tt9-pill,.tt9.flat .tt9-dots{display:none}
.tt9-cell{display:flex;flex-direction:column;gap:6px;align-items:center}
.tt9-mini{position:relative;width:100%;aspect-ratio:260/500;border-radius:12px;overflow:hidden;border:3px solid #15131A;background:#15131A;box-shadow:0 12px 24px -14px rgba(0,0,0,.5)}
.tt9-mini .tt9-in-box{position:absolute;left:0;top:0;width:260px;height:500px;transform-origin:0 0}
.tt9-mini .t9p{opacity:1}
.tt9-cell small{font:700 11px/1.25 'Figtree',sans-serif;color:#4A4658;text-align:center}
.tt9-cell small b{display:block;color:#1D1B26;font-size:12px}
@media (max-width:760px){.tt9{margin-top:28px}.tt9-fr{border-radius:20px}}