/* QOYU — page Community, lot « traversée du portail + cartes vivantes » (21/09) — voir community-a.js
   1. canvas de la traversée (#portail)
   2. compteur « 41 286 » : le dernier chiffre n'est plus rogné
   3. vitrine #show : cartes QOYU (.tq) et mini-jeux animés (.tg) */

/* ---------- 1. portail : la traversée ---------- */
.qy-pt-warp{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;opacity:0}

/* ---------- 2. compteur de pré-inscription ----------
   Le dégradé « background-clip:text » s'arrête à la boîte du texte ; avec un interlettrage négatif,
   l'arrondi du dernier « 6 » dépasse de cette boîte et se retrouve rogné. On rend de la place à droite. */
.qy-goal-now{display:inline-block;padding:.06em .12em .1em 0;margin-right:-.12em;letter-spacing:-.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- 3. cartes de la vitrine ---------- */
.tile.tq,.tile.tg{position:relative;display:block;width:240px;height:240px;overflow:hidden;isolation:isolate;text-align:left}
@media(max-width:900px){.tile.tq,.tile.tg{width:170px;height:170px}}
.tq-in,.tg-in{position:absolute;left:0;top:0;width:240px;height:240px;transform-origin:0 0}
@media(max-width:900px){.tq-in,.tg-in{transform:scale(.7083)}}
.tq{background:linear-gradient(160deg,var(--c1,#FFF1E4),var(--c2,#FFD9BD))}
.tq-lbl,.tg-lbl{position:absolute;left:0;right:0;bottom:0;padding:0 16px 14px;font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.12;color:#1B1035;z-index:3}
.tq-lbl small,.tg-lbl small{display:block;margin-top:3px;font-size:12.5px;font-weight:600;letter-spacing:0;color:rgba(27,16,53,.58)}
.tq-art{position:absolute;inset:0 0 56px;overflow:hidden}
.tq-qy{position:absolute;left:50%;bottom:6px;translate:-50% 0;height:132px;width:auto;transform-origin:50% 100%;filter:drop-shadow(0 8px 7px rgba(50,10,100,.22));animation:tqHop 1.7s ease-in-out infinite;user-select:none;-webkit-user-drag:none}
.tq-sh{position:absolute;left:50%;bottom:0;translate:-50% 0;width:88px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,20,110,.28),transparent);animation:tqSh 1.7s ease-in-out infinite}
@keyframes tqHop{0%,100%{transform:translateY(0) scale(1.03,.97)}18%{transform:translateY(-5px) scale(.97,1.03)}40%{transform:translateY(-16px) rotate(-3deg) scale(.98,1.03)}62%{transform:translateY(0) scale(1.05,.95)}78%{transform:translateY(-3px) scale(.99,1.01)}}
@keyframes tqSh{0%,100%{transform:scale(1);opacity:1}40%{transform:scale(.72);opacity:.55}62%{transform:scale(1.05);opacity:1}}
.tq-pill{position:absolute;z-index:4;display:inline-flex;align-items:center;padding:5px 11px;border-radius:99px;background:rgba(27,16,53,.86);color:#fff;font-size:13px;font-weight:800;letter-spacing:-.1px;font-variant-numeric:tabular-nums;box-shadow:0 6px 14px rgba(27,16,53,.18)}
.tq-pop{position:absolute;z-index:4;left:50%;top:34px;translate:-50% 0;padding:4px 10px;border-radius:99px;background:linear-gradient(135deg,#FF6B2C,#FF2E93);color:#fff;font-size:13px;font-weight:900;opacity:0;animation:tqPop 3.2s ease-out infinite;animation-delay:var(--d,0s);white-space:nowrap}
@keyframes tqPop{0%,55%{opacity:0;transform:translateY(16px) scale(.6)}62%{opacity:1;transform:translateY(0) scale(1.08)}78%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-26px) scale(1)}}

/* Q-Points : pièces qui volent vers le compteur */
.tq-pts{--c1:#FFF3E6;--c2:#FFD2A8}
.tq-pts .tq-pill{right:12px;top:12px}
.tq-coin{position:absolute;left:44%;bottom:78px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFF3B0,#FFC933 55%,#E89A0C);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 3px 6px rgba(160,90,0,.35);opacity:0;animation:tqCoin 2.6s ease-out infinite;animation-delay:var(--d)}
.tq-coin::after{content:'';position:absolute;inset:6px 8px;border-radius:50%;background:rgba(194,110,0,.35)}
@keyframes tqCoin{0%{opacity:0;transform:translate(0,10px) scale(.4)}12%{opacity:1;transform:translate(0,-6px) scale(1)}70%{opacity:1;transform:translate(calc(var(--dx)*.85),calc(var(--dy)*.9)) scale(.9)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5)}}

/* Resto : l'assiette et la vapeur */
.tq-resto{--c1:#FFEDEA;--c2:#FFC9C0}
.tq-resto .tq-qy{height:118px;bottom:26px;animation:tqEat 1.5s ease-in-out infinite}
@keyframes tqEat{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(9px) rotate(-6deg)}55%{transform:translateY(9px) rotate(-6deg)}80%{transform:translateY(-3px) rotate(2deg)}}
.tq-steam{position:absolute;bottom:56px;width:10px;height:24px;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(4px);opacity:0;animation:tqSteam 2.4s ease-out infinite;animation-delay:var(--d)}
@keyframes tqSteam{0%{opacity:0;transform:translateY(8px) scaleY(.6)}30%{opacity:.85}100%{opacity:0;transform:translateY(-42px) scaleY(1.4)}}

/* Marche : le décor défile */
.tq-walk{--c1:#EAF6FF;--c2:#C7E4FF}
.tq-walk .tq-pill{left:12px;top:12px}
.tq-hills,.tq-hills2,.tq-track{position:absolute;left:0;right:0}
.tq-hills{bottom:34px;height:58px;background:radial-gradient(60px 46px at 40px 100%,#BFE3C8 98%,transparent 100%) 0 0/120px 100% repeat-x;opacity:.9;animation:tqScroll 6s linear infinite}
.tq-hills2{bottom:30px;height:40px;background:radial-gradient(44px 32px at 26px 100%,#98D4AC 98%,transparent 100%) 0 0/88px 100% repeat-x;animation:tqScroll2 3.6s linear infinite}
.tq-track{bottom:0;height:34px;background:#8CCB9E;box-shadow:inset 0 3px 0 #7BBE90}
.tq-track::after{content:'';position:absolute;left:0;right:0;top:15px;height:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 16px,transparent 16px 34px);animation:tqScroll3 1s linear infinite}
@keyframes tqScroll{to{background-position:-120px 0}}
@keyframes tqScroll2{to{background-position:-88px 0}}
@keyframes tqScroll3{to{transform:translateX(-34px)}}
.tq-walk .tq-qy{height:120px;bottom:16px;animation:tqWalk .7s ease-in-out infinite}
.tq-walk .tq-sh{bottom:12px}
@keyframes tqWalk{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}

/* Carnet fidélité : les tampons se remplissent */
.tq-loyal{--c1:#FFF6D9;--c2:#FFE08A}
.tq-card{position:absolute;left:14px;top:34px;width:124px;height:86px;padding:12px 10px;border-radius:14px;background:#fff;box-shadow:0 10px 18px rgba(120,80,0,.18);transform:rotate(-7deg);display:grid;grid-template-columns:repeat(3,1fr);gap:8px 6px;align-content:center;z-index:2}
.tq-card::before{content:'';position:absolute;left:10px;top:8px;width:38px;height:5px;border-radius:3px;background:#E8D9FF}
.tq-card i{display:block;width:26px;height:26px;margin:6px auto 0;border-radius:50%;border:2px dashed #D9C9F5;animation:tqStamp 9s ease-in-out infinite;animation-delay:calc(var(--i)*1s)}
@keyframes tqStamp{0%{background:#fff;border-color:#D9C9F5;border-style:dashed;transform:scale(1)}3%{transform:scale(1.35)}5%,84%{background:linear-gradient(135deg,#FF9148,#FF3D8B);border-color:#fff;border-style:solid;transform:scale(1);box-shadow:0 0 0 2px #FFB07A}92%,100%{background:#fff;border-color:#D9C9F5;border-style:dashed;box-shadow:none}}
.tq-loyal .tq-qy{left:auto;right:8px;translate:0 0;height:112px;bottom:8px}
.tq-loyal .tq-sh{left:auto;right:16px;translate:0 0;width:70px}
.tq-loyal .tq-pop{left:auto;right:18px;translate:0 0;top:16px;--d:.4s}

/* Bagel : il tourne, le QOYU saute dessus */
.tq-bagel{--c1:#E9F0FF;--c2:#C4D5FF}
.tq-bagel .tq-pill{left:12px;top:12px;background:linear-gradient(135deg,#FF6B2C,#FF2E93)}
.tq-bagel .tq-qy{left:16px;translate:0 0;height:118px;bottom:8px;animation:tqJumpTo 2.2s ease-in-out infinite}
.tq-bagel .tq-sh{left:30px;translate:0 0}
@keyframes tqJumpTo{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(26px,-26px) rotate(8deg)}50%{transform:translate(34px,-10px) rotate(4deg)}75%{transform:translate(8px,0) rotate(-3deg)}}

/* Q Tag : le scan */
.tq-tag{--c1:#FCEBFF;--c2:#F1C6FF}
.tq-box{position:absolute;left:50%;top:22px;translate:-50% 0;width:104px;height:104px;z-index:2}
.tq-qr{position:absolute;inset:12px;border-radius:8px;background:#fff;box-shadow:0 10px 18px rgba(90,20,120,.2);overflow:hidden}
.tq-qr::before{content:'';position:absolute;inset:8px;background:repeating-conic-gradient(#1B1035 0 25%,#fff 0 50%) 0 0/12px 12px;-webkit-mask:linear-gradient(#000,#000);opacity:.92}
.tq-qr::after{content:'';position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(180deg,transparent,rgba(255,46,147,.55) 90%,#FF2E93 96%,transparent);animation:tqScan 2.2s ease-in-out infinite}
@keyframes tqScan{0%{transform:translateY(-22px)}55%{transform:translateY(80px)}100%{transform:translateY(80px)}}
.tq-box i{position:absolute;width:18px;height:18px;border:3px solid #7B2FF7;animation:tqBr 2.2s ease-in-out infinite}
.tq-box i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.tq-box i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.tq-box i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.tq-box i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
@keyframes tqBr{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}
.tq-tag .tq-qy{left:6px;translate:0 0;height:96px;bottom:2px;animation:tqPeek 2.2s ease-in-out infinite;z-index:3}
.tq-tag .tq-sh{display:none}
@keyframes tqPeek{0%,100%{transform:translateY(4px) rotate(-4deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.tq-tag .tq-pop{left:auto;right:12px;translate:0 0;top:58px;--d:0s;animation-duration:2.2s}

/* ----- mini-jeux ----- */
.tg{background:linear-gradient(160deg,#FFFFFF,#F1EBFF)}
.tg.dark{background:linear-gradient(160deg,#2A1358,#160A33)}
.tg.dark .tg-lbl{color:#fff}
.tg.dark .tg-lbl small{color:rgba(255,255,255,.62)}
.tg-chip{position:absolute;z-index:4;padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;background:#EFE6FF;color:#5B2BD0}
.tg.dark .tg-chip{background:rgba(255,255,255,.14);color:#fff}

/* quiz */
.tgq-top{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;gap:8px;z-index:2}
.tgq-n{font-size:11.5px;font-weight:800;color:#7B5BD0;min-width:24px}
.tgq-t{display:block;flex:1;height:6px;border-radius:3px;background:#E7DDFB;overflow:hidden}
.tgq-t b{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,#FF6B2C,#FF2E93,#7B2FF7)}
.tgq-s{font-size:11.5px;font-weight:900;color:#5B2BD0;min-width:22px;text-align:right}
.tgq-q{position:absolute;left:14px;right:14px;top:32px;height:34px;display:flex;align-items:center;font-size:13px;font-weight:800;line-height:1.15;color:#1B1035;letter-spacing:-.2px}
.tgq-o{position:absolute;left:12px;right:12px;top:72px;display:flex;flex-direction:column;gap:5px}
.tgq-o span{display:block;height:26px;line-height:26px;padding:0 12px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1.5px #E7DDFB;font-size:12px;font-weight:700;color:#3B2A66;transition:background .2s,box-shadow .2s,color .2s}
.tgq-o span.pick{background:#EFE6FF;box-shadow:inset 0 0 0 1.5px #A78BFA}
.tgq-o span.ok{background:#DDF8E6;box-shadow:inset 0 0 0 2px #22C55E;color:#116B33}
.tgq-o span.bad{background:#FFE3E6;box-shadow:inset 0 0 0 2px #F43F5E;color:#9F1239;animation:tgShake .35s}
@keyframes tgShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.tgq-tap{position:absolute;left:250px;top:90px;width:22px;height:22px;border-radius:50%;border:3px solid #7B2FF7;background:rgba(123,47,247,.18);z-index:3;transition:left .5s cubic-bezier(.3,.8,.3,1);pointer-events:none}
.tgq-tap.go{left:170px}
.tgq-tap.press{transform:scale(.7);background:rgba(123,47,247,.5)}
.tgq-pop{position:absolute;right:14px;top:52px;z-index:4;padding:4px 10px;border-radius:99px;background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;font-size:13px;font-weight:900;opacity:0}
.tgq-pop.on{animation:tgPopUp 1.3s ease-out}
@keyframes tgPopUp{0%{opacity:0;transform:translateY(10px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}

/* roue */
.tg-wheel{background:linear-gradient(160deg,#FFF8E6,#FFE7C2)}
.tgw-cv{position:absolute;left:50%;top:14px;translate:-50% 0;width:150px;height:150px;z-index:1}
.tgw-pin{position:absolute;left:50%;top:6px;translate:-50% 0;z-index:3;width:0;height:0;border:9px solid transparent;border-top:18px solid #1B1035;border-bottom:0;transform-origin:50% 0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.tgw-pin.tick{animation:tgTick .14s ease-out}
@keyframes tgTick{0%{transform:rotate(16deg)}100%{transform:rotate(0)}}
.tgw-pop{position:absolute;left:50%;top:70px;translate:-50% 0;z-index:4;padding:6px 14px;border-radius:99px;background:#1B1035;color:#fff;font-size:16px;font-weight:900;opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);white-space:nowrap;box-shadow:0 10px 20px rgba(27,16,53,.3)}
.tgw-pop.on{opacity:1;transform:scale(1)}
.tgw-qy{position:absolute;left:2px;bottom:52px;height:58px;width:auto;z-index:2;animation:tqHop 1.7s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 4px 4px rgba(50,10,100,.2))}

/* memory */
.tg-mem{background:linear-gradient(160deg,#F4F0FF,#E3D8FF)}
.tgm-s{left:12px;top:12px}
.tgm-g{position:absolute;left:12px;right:12px;top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;perspective:500px}
.tgm-c{position:relative;display:block;height:56px;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.9,.3,1)}
.tgm-c.up,.tgm-c.ok{transform:rotateY(180deg)}
.tgm-c b{position:absolute;inset:0;border-radius:11px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tgm-c .f{background:linear-gradient(135deg,#A78BFA,#7C3AED);box-shadow:0 4px 8px rgba(91,43,208,.25),inset 0 0 0 2px rgba(255,255,255,.35)}
.tgm-c .f::after{content:'Q';position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:900;color:rgba(255,255,255,.55)}
.tgm-c .b{transform:rotateY(180deg);background:#fff center 6px/158% auto no-repeat;box-shadow:0 4px 8px rgba(91,43,208,.18),inset 0 0 0 2px #E7DDFB}
.tgm-c.ok .b{box-shadow:0 4px 8px rgba(34,197,94,.3),inset 0 0 0 2.5px #22C55E;animation:tgOk .5s .3s}
@keyframes tgOk{50%{filter:brightness(1.12)}}
.tgm-pop{position:absolute;left:50%;top:76px;translate:-50% 0;z-index:5;padding:6px 14px;border-radius:99px;background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;font-size:16px;font-weight:900;opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);box-shadow:0 10px 20px rgba(22,101,52,.3)}
.tgm-pop.on{opacity:1;transform:scale(1)}

/* réflexe */
.tgr-st{left:12px;top:12px}
.tgr-b{right:12px;top:12px}
.tgr-pad{position:absolute;left:12px;top:40px;width:216px;height:104px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);overflow:hidden;transition:background .15s,box-shadow .15s}
.tgr-pad.go{background:rgba(34,197,94,.16);box-shadow:inset 0 0 0 1.5px rgba(74,222,128,.6)}
.tgr-t{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FF9CB0,#F43F5E 60%,#BE123C);box-shadow:0 0 0 0 rgba(244,63,94,.6);transform:scale(0);opacity:0}
.tgr-t.on{opacity:1;transform:scale(1);transition:transform .16s cubic-bezier(.3,1.6,.5,1);animation:tgPulse 1s ease-out infinite}
.tgr-t.hit{animation:none;transform:scale(1.5);opacity:0;transition:transform .3s,opacity .3s}
@keyframes tgPulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.6)}100%{box-shadow:0 0 0 16px rgba(244,63,94,0)}}
.tgr-cur{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid #fff;background:rgba(255,255,255,.28);z-index:3;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.tgr-cur.tap{transform:scale(.7);transition:transform .08s}
.tgr-ms{position:absolute;left:12px;right:12px;top:146px;text-align:center;font-size:20px;font-weight:900;color:#4ADE80;font-variant-numeric:tabular-nums;height:24px}

/* rythme */
.tgy-c{right:12px;top:12px}
.tgy-f{position:absolute;left:50%;top:44px;translate:-50% 0;z-index:4;font-size:15px;font-weight:900;color:#FDE68A;opacity:0;text-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.tgy-f.on{animation:tgPopUp .7s ease-out}
.tgy-cv{position:absolute;left:12px;top:32px;width:216px;height:132px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04)}
.tgy-qy{position:absolute;left:14px;top:2px;height:34px;width:auto;z-index:4;animation:tgBeat .535s ease-in-out infinite;transform-origin:50% 100%}
@keyframes tgBeat{0%,100%{transform:scale(1,1)}50%{transform:scale(.94,1.08) translateY(-2px)}}

@media(prefers-reduced-motion:reduce){
  .tq *,.tg *{animation:none !important}
  .tq-coin,.tq-steam{display:none}
  .tq-pop{opacity:1;animation:none !important}
}

.tgw-cv canvas,.tgy-cv canvas{display:block;width:100%;height:100%}

.tgq-s{transition:color .2s,transform .25s cubic-bezier(.3,1.8,.5,1)}
.tgq-s.up{color:#16A34A;transform:scale(1.5)}
.tgq-pop{display:none}