/* QTouch — page Communauté, lot B (21/09) : chargé APRÈS community.css et community-a.css.
   - vote des lots : visuels de scène avec un QOYU (images/qoyu/vote/*.jpg)
   - compagnons : plus de petit texte gris sous les noms (les pattes complètes viennent des nouvelles images crew/*.webp)
   - quêtes du jour : plateau animé (préfixe qq-)
   - ouverture du pack QOYU : boîte, éclat, figurine, carte de rareté (préfixe qp-) */

/* ============ VOTE : de vraies scènes avec un QOYU ============ */
.qy-gv-card.k-scene .qy-gv-vis{height:auto;aspect-ratio:3/2;margin:12px 0 12px;overflow:hidden;border-radius:18px;box-shadow:0 16px 30px -18px rgba(60,20,120,.65)}
.qy-gv-card.k-scene .qy-gv-vis img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0;box-shadow:none;filter:none;transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.qy-gv-card.k-scene:hover .qy-gv-vis img{transform:scale(1.08)}
.qy-gv-card.k-scene .qy-gv-vis::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none}

/* ============ COMPAGNONS : le nom seul, sans texte gris ============ */
.qy-mate-btn{padding-bottom:22px}
.qy-mate-name{margin-top:14px}

/* ============ QUÊTES DU JOUR : plateau animé ============ */
.qq{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:18px}
.qq-top{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:22px;background:linear-gradient(135deg,#FFF3F9,#F1E9FF)}
.qq-mascot{position:relative;display:block;width:68px;height:68px;flex:none}
.qq-mascot img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);transform-origin:50% 100%;filter:drop-shadow(0 8px 10px rgba(60,20,120,.25))}
.qq-mascot.is-hop img{animation:qqHop .7s cubic-bezier(.3,.7,.4,1)}
.qq-mascot.is-party img{animation:qqParty 1.1s cubic-bezier(.3,.7,.4,1) 2}
@keyframes qqHop{0%{transform:translateX(-50%) scale(1,1)}20%{transform:translateX(-50%) scale(1.08,.9)}55%{transform:translateX(-50%) translateY(-22%) scale(.95,1.07)}100%{transform:translateX(-50%) scale(1,1)}}
@keyframes qqParty{0%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) translateY(-28%) rotate(-10deg)}50%{transform:translateX(-50%) translateY(-4%) rotate(0) scale(1.05,.94)}75%{transform:translateX(-50%) translateY(-28%) rotate(10deg)}100%{transform:translateX(-50%) rotate(0)}}
.qq-hi small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--qy-mut)}
.qq-hi b{display:block;margin-top:2px;font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--qy-ink);white-space:nowrap}
.qq-hi b i{font-style:normal;font-variant-numeric:tabular-nums}
.qq-tally{justify-self:end;display:flex;gap:8px}
.qq-t{min-width:66px;padding:8px 10px 7px;border-radius:15px;background:#fff;text-align:center;box-shadow:0 10px 20px -14px rgba(60,20,120,.6)}
.qq-t b{display:block;font-size:18px;font-weight:900;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;background:var(--qy-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.qq-t small{display:block;margin-top:3px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--qy-mut)}
.qq-t.bump{animation:qqBump .55s cubic-bezier(.3,.7,.4,1)}
@keyframes qqBump{0%{transform:scale(1)}35%{transform:scale(1.16);box-shadow:0 0 0 3px rgba(255,46,147,.35),0 14px 24px -12px rgba(255,46,147,.6)}100%{transform:scale(1)}}

.qq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qq-q{--qc:#FF4F8B;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ring tx" "ring prog";align-items:center;column-gap:12px;row-gap:2px;padding:12px 12px 12px 12px;border-radius:20px;background:var(--qy-soft);border:1.5px solid #EFEAF7;transition:transform .45s cubic-bezier(.3,.7,.4,1),box-shadow .45s,background .45s,border-color .45s}
.qq-q.a{--qc:#F0498A}.qq-q.b{--qc:#4B2C8C}.qq-q.c{--qc:#FF7A3C}.qq-q.d{--qc:#7B2FF7}
.qq-ring{grid-area:ring;position:relative;display:grid;place-items:center;width:58px;height:58px}
.qq-ring>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.qq-ring .t{fill:none;stroke:#E7E1F2;stroke-width:4}
.qq-ring .p{fill:none;stroke:var(--qc);stroke-width:4;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--pv,0))}
.qq-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;margin:auto;color:#fff;background:var(--qc);transition:transform .35s,opacity .25s}
.qq-ic svg{width:19px;height:19px}
.qq-ok{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;display:grid;place-items:center;background:#22C55E;color:#fff;transform:scale(0);box-shadow:0 8px 16px -6px rgba(34,197,94,.7)}
.qq-ok svg{width:20px;height:20px}
.qq-tx{grid-area:tx;min-width:0;padding-right:66px}
.qq-tx b{display:block;font-size:14px;font-weight:900;letter-spacing:-.01em;line-height:1.15;color:var(--qy-ink)}
.qq-tx small{display:block;margin-top:2px;font-size:12px;font-weight:600;line-height:1.3;color:var(--qy-mut)}
.qq-prog{grid-area:prog;font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--qc)}
.qq-prog i{font-style:normal}
.qq-rew{position:absolute;right:10px;top:10px;padding:5px 9px;border-radius:12px;background:#fff;border:1px solid #EFEAF7;font-size:12px;font-weight:900;line-height:1.1;color:var(--qy-violet);text-align:center;white-space:nowrap;transition:opacity .3s,transform .3s}
.qq-rew small{display:block;margin-top:2px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--qy-mut)}
.qq-q.is-act{background:#fff;border-color:var(--qc);transform:translateY(-3px);box-shadow:0 18px 30px -18px var(--qc),0 0 0 4px color-mix(in srgb,var(--qc) 14%,transparent)}
.qq-q.is-act .qq-ic svg{animation:qqWiggle .9s ease-in-out infinite;transform-origin:50% 50%}
@keyframes qqWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.qq-q.is-done{background:linear-gradient(135deg,#F3FCF6,#fff);border-color:#BFE9CB}
.qq-q.is-done .qq-ring .p{stroke:#22C55E}
.qq-q.is-done .qq-ic{transform:scale(0);opacity:0}
.qq-q.is-done .qq-ok{animation:qqPop .55s cubic-bezier(.3,1.5,.5,1) both}
.qq-q.is-done .qq-prog{color:#16A34A}
.qq-q.is-done .qq-rew{opacity:.35;transform:scale(.9)}
@keyframes qqPop{0%{transform:scale(0)}100%{transform:scale(1)}}

.qq-fly{position:absolute;left:0;top:0;z-index:5;padding:6px 11px;border-radius:99px;background:var(--qy-grad-d);color:#fff;font-size:12.5px;font-weight:900;white-space:nowrap;pointer-events:none;box-shadow:0 12px 22px -8px rgba(255,46,147,.7);will-change:transform,opacity}
.qq-c{position:absolute;left:50%;top:40%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;z-index:4}
.qq-c.s{border-radius:2px}
.qq-end{margin:0;min-height:22px;text-align:center;font-size:14px;font-weight:800;color:var(--qy-violet);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.qq.is-all .qq-end{opacity:1;transform:none}
.qq.is-all .qq-top{box-shadow:0 0 0 3px rgba(139,44,245,.18)}

@media (max-width:560px){
  .qq-grid{grid-template-columns:1fr}
  .qq-top{grid-template-columns:auto 1fr;row-gap:10px}
  .qq-tally{grid-column:1 / -1;justify-self:stretch}
  .qq-t{flex:1;min-width:0}
}

/* plateau plus grand sur ordinateur : il remplit la carte, chaque quête est une grande tuile */
.qy-day-card .qq{flex:1}
@media (min-width:561px){
  .qq-top{padding:14px 18px 14px 14px;gap:16px}
  .qq-mascot{width:84px;height:84px}
  .qq-hi b{font-size:24px}
  .qq-t{min-width:72px;padding:9px 12px 8px}
  .qq-t b{font-size:20px}
  .qq-grid{flex:1;grid-auto-rows:1fr;gap:12px}
  .qq-q{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:34px 12px 16px}
  .qq-ring{width:88px;height:88px}
  .qq-ring .t,.qq-ring .p{stroke-width:3.6}
  .qq-ic{width:60px;height:60px;border-radius:50%}
  .qq-ic svg{width:27px;height:27px}
  .qq-ok{width:56px;height:56px;margin:-28px 0 0 -28px}
  .qq-ok svg{width:28px;height:28px}
  .qq-tx{padding:0}
  .qq-tx b{font-size:16px}
  .qq-tx small{font-size:12.5px}
  .qq-prog{font-size:13px}
  .qq-rew{right:12px;top:12px;padding:5px 10px;font-size:12.5px}
}

/* ============ PACK QOYU : ouverture ============ */
.qy-brand-img.qp-wrap{position:relative;background:linear-gradient(165deg,#F3ECFF 0%,#FFE9F4 58%,#FFF1DE 100%);border-radius:32px}
.qp{--rc:#8B2CF5;--fy:-58%;position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/5;cursor:pointer;outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.qp:focus-visible{box-shadow:inset 0 0 0 3px var(--qy-violet)}
.qp[data-r=common]{--rc:#8F8AA8}.qp[data-r=rare]{--rc:#3B82F6}.qp[data-r=epic]{--rc:#8B2CF5}.qp[data-r=legend]{--rc:#F5A000}
.qp-glow{position:absolute;left:50%;top:46%;width:86%;aspect-ratio:1;margin:-43% 0 0 -43%;border-radius:50%;background:radial-gradient(closest-side,var(--rc) 0%,transparent 70%);filter:blur(6px);opacity:0;z-index:0;pointer-events:none}
.qp-rays{position:absolute;left:50%;top:44%;width:170%;aspect-ratio:1;margin:-85% 0 0 -85%;background:repeating-conic-gradient(from 0deg,transparent 0 8deg,color-mix(in srgb,var(--rc) 34%,transparent) 8deg 12deg);-webkit-mask-image:radial-gradient(closest-side,#000 6%,transparent 68%);mask-image:radial-gradient(closest-side,#000 6%,transparent 68%);opacity:0;z-index:0;pointer-events:none;animation:qpSpin 16s linear infinite}
@keyframes qpSpin{to{transform:rotate(360deg)}}
.qp-fx{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.qp-stage{position:absolute;left:50%;bottom:11%;width:76%;aspect-ratio:2/3;transform:translateX(-50%);z-index:2}
.qp-stage img{position:absolute;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.qp-shadow{position:absolute;left:14%;right:8%;bottom:2%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,15,90,.34),transparent);filter:blur(3px)}
.qp .qp-stage .qp-box,.qp .qp-stage .qp-boxo{left:0;top:0;width:100%;height:100%;transform-origin:50% 92%;filter:drop-shadow(0 22px 22px rgba(60,20,120,.28))}
.qp-boxo{opacity:0}
.qp .qp-stage .qp-fig{left:50%;top:50%;width:68%;height:auto;opacity:0;transform:translate(-50%,-24%) scale(.3);transform-origin:50% 60%;filter:drop-shadow(0 0 0 transparent);z-index:3}

/* attente : la boîte flotte doucement */
.qp.is-idle .qp-box{animation:qpBob 3.6s ease-in-out infinite}
@keyframes qpBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.2%) rotate(.6deg)}}

/* 1. secousse, de plus en plus forte */
.qp.s-shake .qp-glow{opacity:.35;animation:qpPulse .42s ease-in-out infinite alternate}
.qp.s-shake .qp-box{animation:qpShake 1.15s cubic-bezier(.4,0,.6,1) both}
@keyframes qpPulse{from{transform:scale(.92);opacity:.22}to{transform:scale(1.06);opacity:.5}}
@keyframes qpShake{
  0%{transform:translate(0,0) rotate(0) scale(1)}
  10%{transform:translate(-1%,0) rotate(-1.5deg) scale(1.005)}
  20%{transform:translate(1.2%,0) rotate(1.8deg) scale(1.01)}
  30%{transform:translate(-1.6%,0) rotate(-2.6deg) scale(1.015)}
  40%{transform:translate(1.8%,0) rotate(3deg) scale(1.02)}
  50%{transform:translate(-2.2%,0) rotate(-3.6deg) scale(1.03)}
  60%{transform:translate(2.4%,0) rotate(4deg) scale(1.04)}
  70%{transform:translate(-2.6%,0) rotate(-4.4deg) scale(1.05)}
  80%{transform:translate(2.8%,0) rotate(4.8deg) scale(1.06)}
  90%{transform:translate(-1.5%,0) rotate(-2.5deg) scale(1.1)}
  100%{transform:translate(0,0) rotate(0) scale(1.12)}}

/* 2. éclat : la boîte s'ouvre, la lumière jaillit, la figurine est projetée */
.qp.s-burst .qp-box{opacity:0;animation:none}
.qp.s-burst .qp-boxo{opacity:1;animation:qpBoxo 1.6s cubic-bezier(.3,.7,.4,1) both}
@keyframes qpBoxo{
  0%{opacity:1;transform:scale(1.12) rotate(0)}
  16%{transform:scale(.96,1.05) rotate(-1.5deg)}
  32%{transform:scale(1.03) rotate(.8deg)}
  46%{opacity:1;transform:scale(1) rotate(0) translateY(0)}
  100%{opacity:0;transform:scale(.9) translateY(20%)}}
.qp.s-burst .qp-glow{opacity:.6;animation:none;transition:opacity .4s}
.qp.s-burst .qp-rays{opacity:1;transition:opacity .5s}
.qp.s-burst .qp-flash{animation:qpFlash .8s ease-out both}
.qp.s-burst .qp-ring{animation:qpRing .95s cubic-bezier(.2,.7,.3,1) both}
.qp-flash{position:absolute;inset:0;z-index:5;background:radial-gradient(circle at 50% 44%,#fff 0%,rgba(255,255,255,.75) 30%,rgba(255,255,255,0) 72%);opacity:0;pointer-events:none}
@keyframes qpFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.qp-ring{position:absolute;left:50%;top:44%;width:26%;aspect-ratio:1;margin:-13% 0 0 -13%;border-radius:50%;border:5px solid #fff;box-shadow:0 0 30px 6px var(--rc),inset 0 0 20px var(--rc);opacity:0;z-index:4;pointer-events:none}
@keyframes qpRing{0%{opacity:.95;transform:scale(.2)}100%{opacity:0;transform:scale(4.2)}}
.qp.s-burst .qp-fig{opacity:1;transform:translate(-50%,var(--fy)) scale(1.02);filter:drop-shadow(0 0 22px color-mix(in srgb,var(--rc) 65%,transparent));animation:qpFig 1.5s cubic-bezier(.25,.9,.35,1) .1s both,qpFloat 3.4s ease-in-out 1.6s infinite}
@keyframes qpFig{
  0%{opacity:0;transform:translate(-50%,-24%) scale(.3) rotate(0)}
  10%{opacity:1}
  45%{transform:translate(-50%,-80%) scale(1.14) rotate(-14deg)}
  70%{transform:translate(-50%,-62%) scale(.98) rotate(7deg)}
  100%{opacity:1;transform:translate(-50%,var(--fy)) scale(1.02) rotate(0)}}
@keyframes qpFloat{0%,100%{transform:translate(-50%,var(--fy)) scale(1.02) rotate(0)}50%{transform:translate(-50%,calc(var(--fy) - 2.6%)) scale(1.03) rotate(1.5deg)}}

/* 3. la carte de rareté */
.qp-card{position:absolute;right:5%;bottom:12%;z-index:7;width:30%;aspect-ratio:3/4.15;padding:8px 7px 9px;border-radius:15px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;overflow:hidden;box-shadow:0 0 0 3px var(--rc),0 26px 40px -18px rgba(40,10,90,.65),0 0 34px -4px var(--rc);opacity:0;transform:perspective(600px) rotateY(90deg) scale(.6);transform-origin:50% 60%;pointer-events:none}
.qp-card::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 46%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.qp[data-r=legend] .qp-card{background:linear-gradient(150deg,#FFFBEA,#FFE7A3)}
.qp[data-r=epic] .qp-card{background:linear-gradient(150deg,#fff,#F0E5FF)}
.qp[data-r=rare] .qp-card{background:linear-gradient(150deg,#fff,#E5EFFF)}
.qp-rar{padding:3px 8px;border-radius:99px;background:var(--rc);color:#fff;font-size:clamp(8px,1.5vw,10.5px);font-weight:900;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.qp-stars{display:flex;gap:2px}
.qp-stars i{width:clamp(8px,1.5vw,11px);aspect-ratio:1;background:#E4DDF1;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%);transition:background .3s,transform .3s}
.qp-stars i.on{background:var(--rc);transform:scale(1.15)}
.qp[data-r=legend] .qp-stars i.on{background:#F5A000}
.qp-cimg{position:relative;flex:1;min-height:0;width:100%}
.qp .qp-cimg img{position:absolute;inset:0;margin:auto;max-width:92%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(40,10,90,.25))}
.qp-cn{font-size:clamp(8.5px,1.6vw,11.5px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--qy-ink);white-space:nowrap}
.qp-cno{font-size:clamp(7.5px,1.3vw,9.5px);font-weight:800;letter-spacing:.06em;color:var(--qy-mut)}
.qp.s-reveal .qp-card{animation:qpCard .85s cubic-bezier(.3,1.25,.5,1) both;opacity:1;transform:none}
.qp.s-reveal .qp-card::after{animation:qpShine 1.3s ease-out .7s both}
@keyframes qpCard{0%{opacity:0;transform:perspective(600px) translateY(40%) rotateY(90deg) scale(.5)}60%{opacity:1;transform:perspective(600px) translateY(-4%) rotateY(-12deg) scale(1.08)}100%{opacity:1;transform:perspective(600px) rotateY(0) scale(1)}}
@keyframes qpShine{to{transform:translateX(120%)}}

/* interface : aide et « Rouvrir » */
.qp-ui{position:absolute;left:0;right:0;bottom:14px;z-index:8;display:flex;justify-content:center;pointer-events:none}
.qp-hint{padding:9px 16px;border-radius:99px;background:rgba(15,11,30,.86);color:#fff;font-size:13px;font-weight:800;letter-spacing:.01em;animation:qpHint 2.2s ease-in-out infinite}
@keyframes qpHint{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.qp.s-shake .qp-hint,.qp.s-done .qp-hint,.qp.s-reset .qp-hint{display:none}
.qp-again{display:none;align-items:center;justify-content:center;height:42px;padding:0 20px;border:0;border-radius:99px;background:var(--qy-grad-d);color:#fff;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;pointer-events:auto;box-shadow:0 16px 28px -14px rgba(255,46,147,.7);animation:qpAgain .5s cubic-bezier(.3,1.4,.5,1) both}
.qp.s-done .qp-again{display:inline-flex}
@keyframes qpAgain{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}

/* retour à la boîte fermée */
.qp.s-reset .qp-fig,.qp.s-reset .qp-card,.qp.s-reset .qp-rays,.qp.s-reset .qp-glow{opacity:0 !important;transition:opacity .3s;animation:none}
.qp.s-reset .qp-box{animation:qpDrop .65s cubic-bezier(.3,1.2,.5,1) both}
@keyframes qpDrop{0%{opacity:0;transform:translateY(-40%) scale(.9)}70%{opacity:1;transform:translateY(2%) scale(1.02,.97)}100%{opacity:1;transform:none}}

@media (max-width:900px){ .qy-brand-img.qp-wrap{width:100%;max-width:440px} .qp{aspect-ratio:1/1.05} .qp-stage{width:64%;bottom:12%} .qp-card{width:31%;bottom:18%} }
@media (prefers-reduced-motion:reduce){
  .qp *,.qp-rays,.qq *{animation:none !important}
  .qp.s-burst .qp-box{opacity:0}
}