/* Bloc quiz (intégré dans une page hôte), repris de design/css/quiz.css. Mêmes écarts
   volontaires que les autres gabarits : @container → @media, pas de container. */
.qz-wrap{padding:0 var(--space-4)}
.qz-hl{box-shadow:inset 0 -.32em 0 var(--logo-yellow)}

/* Départ */
.qz-start{padding-top:var(--space-5);text-align:center}
.qz-promise{display:inline-flex;align-items:center;height:36px;margin:var(--space-3) 0 0;padding:0 16px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--logo-yellow);font:600 17px/1 var(--font-display)}
.qz-start__ask{margin:var(--space-6) 0 var(--space-3);font:600 20px/26px var(--font-display)}
.qz-species{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3)}
.qz-sp{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-2);background:var(--accent-tint);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 6px 0 var(--accent);color:var(--ink);font:600 24px/30px var(--font-display);cursor:pointer}
.qz-sp:hover{background:var(--surface)}
.qz-sp:active{transform:translateY(3px);box-shadow:0 3px 0 var(--accent)}
.qz-sp svg{width:96px;height:96px}
.qz-note{margin:var(--space-6) auto 0;max-width:36ch;font-size:16px;line-height:24px;color:var(--ink-muted)}

/* Question */
.qz-top{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-3)}
.qz-back{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 16px 0 10px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:600 16px/20px var(--font-display);cursor:pointer}
.qz-back:hover{border-color:var(--ink)}
.qz-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.qz-progress{flex:1;height:16px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--surface);overflow:hidden}
.qz-progress__fill{height:100%;background:var(--accent);border-right:1.5px solid var(--ink);border-radius:var(--radius-pill);transition:width 160ms ease-out}
.qz-step{flex:none;font:600 16px/20px var(--font-display);color:var(--ink-muted)}
.qz-q{margin:var(--space-5) 0 var(--space-4);font:400 30px/34px "Lilita One",var(--font-display);letter-spacing:.01em}
.qz-answers{display:grid;gap:var(--space-3);padding-bottom:var(--space-2)}
.qz-a{display:flex;align-items:center;gap:var(--space-4);min-height:80px;padding:var(--space-2) var(--space-4);background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 4px 0 var(--accent);color:var(--ink);font:600 20px/26px var(--font-display);text-align:left;cursor:pointer}
.qz-a:hover,.qz-a[aria-pressed="true"]{background:var(--accent-tint)}
.qz-a:active{transform:translateY(2px);box-shadow:0 2px 0 var(--accent)}
.qz-a svg{flex:none;width:52px;height:52px}
.qz-a small{display:block;font:400 16px/22px var(--font-text);color:var(--ink-muted)}
@media (prefers-reduced-motion:reduce){.qz-body{animation:none !important}.qz-progress__fill{transition:none}}

/* Résultat */
.qz-res{margin-top:var(--space-4);padding:var(--space-5) var(--space-4);background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 8px 0 var(--accent);text-align:center}
.qz-res__k{margin:0;font:600 17px/24px var(--font-display);color:var(--ink-muted)}
.qz-res__name{margin:var(--space-2) 0 var(--space-3);font:400 68px/76px "Lilita One",var(--font-display);letter-spacing:.01em;overflow-wrap:anywhere}
.qz-res__hl{box-shadow:inset 0 -.3em 0 var(--accent)}
.qz-res__meta{justify-content:center;margin:0}
.qz-res__meaning{margin:var(--space-3) auto 0;max-width:46ch}
.qz-res__why{margin:var(--space-4) auto 0;padding:var(--space-3) var(--space-4);max-width:46ch;background:var(--accent-tint);border-radius:var(--radius-md);font:600 18px/26px var(--font-display)}
.qz-actions{display:grid;gap:var(--space-3);margin-top:var(--space-5)}
.qz-actions .home-go{margin-top:0}
.qz-actions__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
.qz-actions__row .pcc-btn{padding:0 10px;font-size:16px}
.qz-fav svg,.qz-ico{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qz-fav[aria-pressed="true"] svg{fill:var(--logo-red);stroke:var(--logo-red)}
.qz-shared{margin:0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.qz-others{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2);margin:0;padding:0;list-style:none}
.qz-mini{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);padding:var(--space-3) var(--space-2) var(--space-3) var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.qz-mini__name{display:inline-flex;align-items:center;min-height:32px;font:600 20px/26px var(--font-display);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.qz-mini__meta{margin:var(--space-1) 0 0}
.qz-listbtn{margin-top:var(--space-4)}
.qz-ad .pcc-ad{min-height:274px;margin-bottom:0}

@media (min-width:1024px){
  .qz-wrap{max-width:944px;margin-left:auto;margin-right:auto;padding:0 32px}
  .qz-start{padding-top:var(--space-8)}
  .qz-species{gap:var(--space-5);max-width:640px;margin:0 auto}
  .qz-sp{padding:var(--space-6) var(--space-4);font-size:28px;line-height:34px}
  .qz-sp svg{width:128px;height:128px}
  .qz-top{padding-top:var(--space-5)}
  .qz-q{margin:var(--space-7) 0 var(--space-6);font-size:48px;line-height:52px;text-align:center}
  .qz-answers{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-4)}
  .qz-a{flex-direction:column;justify-content:center;gap:var(--space-3);min-height:220px;padding:var(--space-5) var(--space-3);text-align:center}
  .qz-a svg{width:88px;height:88px}
  .qz-res{margin-top:var(--space-6);padding:var(--space-7)}
  .qz-res__mascot{width:120px;margin:0 auto var(--space-3)}
  .qz-res__k{font-size:20px;line-height:26px}
  .qz-res__name{font-size:128px;line-height:136px}
  .qz-res__meaning{font-size:19px;line-height:29px}
  .qz-res__why{font-size:21px;line-height:30px}
  .qz-actions{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:var(--space-4)}
  .qz-actions .home-go{width:auto;padding:0 32px}
  .qz-actions__row{display:flex}
  .qz-actions__row .pcc-btn{padding:0 20px;font-size:17px}
  .qz-shared{grid-column:1 / -1}
  .qz-others{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
  .qz-listbtn{display:inline-flex;width:auto}
  .qz-ad .pcc-ad{min-height:114px;align-items:stretch}
  .qz-ad .pcc-ad__label{text-align:center}
  .qz-ad .pcc-ad__slot{width:100%;height:var(--ad-leaderboard-h)}
}

/* Intégration dans une page : le bloc vit dans un cadre, sans marges de page */
.qz-embed{background:transparent}
.qz-box{padding:var(--space-5) var(--space-3);background:var(--surface-sunken);border-radius:var(--radius-lg)}
.qz-embed .qz-wrap{max-width:none;padding-left:0;padding-right:0}
.qz-embed .qz-start,.qz-embed .qz-top{padding-top:0}
.qz-title{margin:0;font:400 28px/32px "Lilita One",var(--font-display);letter-spacing:.01em;text-wrap:balance}
.qz-embed .qz-start__ask{margin-top:var(--space-5)}
.qz-embed .qz-note{margin-top:var(--space-5)}
.qz-embed .qz-q{font-size:26px;line-height:30px}
.qz-embed .qz-res{margin-top:0}
.qz-embed .qz-res__name{font-size:56px;line-height:64px}
.qz-embed .qz-others{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .qz-box{padding:var(--space-7) var(--space-6)}
  .qz-title{font-size:44px;line-height:48px}
  .qz-embed .qz-q{margin:var(--space-6) 0 var(--space-5);font-size:40px;line-height:44px}
  .qz-embed .qz-a{min-height:190px}
  .qz-embed .qz-res{padding:var(--space-6)}
  .qz-embed .qz-res__name{font-size:104px;line-height:112px}
  .qz-embed .qz-others{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.qz-startbtn{max-width:420px;margin:var(--space-5) auto 0}
.qz-startbtn .home-go{margin-top:0}

.qz-res__mascot{width:88px;margin:0 auto var(--space-2)}
.qz-res__mascot img{display:block;width:100%;height:auto}

/* Transitions entre questions : arrivée par la droite (suivante) ou la gauche (retour) */
@keyframes qzIn0{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes qzIn1{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes qzBack0{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes qzBack1{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes qzRes{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.qz-res{animation:qzRes 260ms ease-out}
