/* Quizzo Live : créateur, solo, écran animateur, écran joueur, champ PIN. */
.qz-app { position: relative; color: var(--qz-ink); }
.qz-app *, .qz-pinform * { box-sizing: border-box; }
.qz-app__loading { display: flex; justify-content: center; gap: 8px; padding: 80px 0; }
.qz-app__loading span, .qz-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--qz-lav); animation: qz-dot 1s ease-in-out infinite; display: inline-block; }
.qz-app__loading span:nth-child(2), .qz-dots i:nth-child(2) { animation-delay: .15s; }
.qz-app__loading span:nth-child(3), .qz-dots i:nth-child(3) { animation-delay: .3s; }
.qz-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.qz-dots i { width: 6px; height: 6px; }
@keyframes qz-dot { 50% { transform: translateY(-6px); background: var(--qz-violet); } }
.qz-sr, .qz-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Éléments communs */
.qz-stagecard { position: relative; background: #fff; border-radius: 32px; box-shadow: var(--qz-shadow); padding: clamp(20px, 4vw, 48px); overflow: hidden; }
.qz-center { text-align: center; }
.qz-big-emoji { font-size: clamp(64px, 10vw, 96px); line-height: 1; margin-bottom: 8px; }
.qz-h { font-family: var(--qz-display); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.qz-muted { color: var(--qz-muted); }
.qz-small { font-size: .95rem; }
.qz-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.qz-row--center { justify-content: center; }
.qz-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--qz-violet); cursor: pointer; text-decoration: none; }
.qz-linkbtn:hover { text-decoration: underline; }
.qz-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--qz-lilac); color: var(--qz-violet); font-weight: 800; font-family: var(--qz-display); border-radius: 999px; padding: 6px 14px; font-size: 1rem; white-space: nowrap; }
.qz-pill--score { background: var(--qz-ink); color: #fff; }
.qz-pill--soft { background: #fff; color: var(--qz-ink); box-shadow: inset 0 0 0 1.5px var(--qz-line); }
.qz-iconbtn { width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(255,255,255,.14); color: inherit; font-size: 1.2rem; cursor: pointer; }
.qz-iconbtn:hover { background: rgba(255,255,255,.26); }

/* ---------- Tuiles de réponse (4 couleurs + formes) ---------- */
.qz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qz-tile {
	--c: var(--qz-a1);
	position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 18px; border: 0; border-radius: 20px;
	background: var(--c); color: #fff; font: inherit; font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.2; text-align: left;
	box-shadow: inset 0 -6px 0 rgba(0,0,0,.15), 0 10px 22px rgba(61,18,70,.10);
	transition: transform .14s ease, opacity .25s ease, filter .15s ease, box-shadow .14s ease;
}
.qz-tile--1 { --c: var(--qz-a2); }
.qz-tile--2 { --c: var(--qz-a3); }
.qz-tile--3 { --c: var(--qz-a4); }
button.qz-tile { cursor: pointer; }
button.qz-tile:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.06); }
button.qz-tile:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.qz-shape { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.qz-shape svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
.qz-tile__txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.qz-tile__n { font-family: var(--qz-display); font-size: 1.4rem; font-weight: 900; background: rgba(255,255,255,.25); border-radius: 12px; padding: 2px 12px; }
.qz-tiles.is-revealed .qz-tile:not(.is-right), .qz-tile.is-dim { opacity: .3; }
.qz-tile.is-right { opacity: 1; box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--qz-mint), 0 14px 30px rgba(34,195,142,.35); }
.qz-tile.is-right::after { content: "✓"; position: absolute; top: -12px; right: -10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--qz-mint); color: #fff; font-size: 1.1rem; box-shadow: 0 0 0 3px #fff; }
.qz-tile.is-wrong { opacity: .85 !important; animation: qz-shake .4s ease; }
.qz-tile.is-wrong::after { content: "✕"; position: absolute; top: -12px; right: -10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E5484D; color: #fff; font-size: 1rem; box-shadow: 0 0 0 3px #fff; }
.qz-tile.is-picked { opacity: 1; transform: scale(1.02); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--c); }
@media (max-width: 560px) { .qz-tiles:not(.qz-tiles--phone) { grid-template-columns: 1fr; } .qz-tile { min-height: 64px; } }

/* Chrono (barre) */
.qz-timer { display: block; height: 10px; border-radius: 999px; background: var(--qz-lilac); overflow: hidden; flex: 1; }
.qz-timer span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--qz-coral), var(--qz-violet)); transform-origin: left center; }

/* ---------- Créateur ---------- */
.qz-mine { background: #fff; border-radius: 22px; box-shadow: var(--qz-shadow); padding: 4px 20px; margin-bottom: 20px; }
.qz-mine summary { cursor: pointer; font-family: var(--qz-display); font-weight: 800; padding: 12px 0; list-style: none; }
.qz-mine summary::-webkit-details-marker { display: none; }
.qz-mine summary span { background: var(--qz-lilac); color: var(--qz-violet); border-radius: 999px; padding: 1px 9px; font-size: .9rem; margin-left: 6px; }
.qz-mine ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.qz-mine li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--qz-line); }
.qz-mine__links { display: flex; gap: 6px; flex-wrap: wrap; }

.qz-maker { background: #fff; border-radius: 32px; box-shadow: var(--qz-shadow); overflow: hidden; }
.qz-maker__head { display: flex; gap: 16px; align-items: center; padding: clamp(16px, 3vw, 28px); background: var(--wp--preset--gradient--soft, #F1EBFF); }
.qz-maker__emoji { flex: none; width: 72px; height: 72px; border-radius: 22px; border: 0; background: #fff; font-size: 40px; cursor: pointer; box-shadow: var(--qz-shadow); }
.qz-maker__emoji:hover { transform: rotate(-6deg); }
.qz-maker__titlewrap { flex: 1; min-width: 0; display: grid; gap: 10px; }
.qz-maker__title { width: 100%; border: 0; background: transparent; font-family: var(--qz-display); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--qz-ink); padding: 4px 0; border-bottom: 2px dashed var(--qz-lav); outline: 0; }
.qz-maker__title:focus { border-bottom-color: var(--qz-violet); }
.qz-maker__colors { display: flex; gap: 8px; }
.qz-dot { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px #fff; }
.qz-dot.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--qz-ink); }
.qz-emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--qz-line); }
.qz-emoji-pick[hidden] { display: none; }
.qz-emoji-pick button { font-size: 26px; width: 46px; height: 46px; border-radius: 12px; border: 0; background: var(--qz-lilac); cursor: pointer; }
.qz-emoji-pick button:hover { background: var(--qz-lav); }

.qz-maker__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 420px; }
.qz-maker__list { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--qz-base); border-right: 1px solid var(--qz-line); max-height: 640px; overflow: auto; }
.qz-maker__list button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; border-radius: 14px; padding: 10px 12px; cursor: pointer; font: inherit; font-size: .95rem; color: var(--qz-ink); }
.qz-maker__list button b { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #fff; font-family: var(--qz-display); box-shadow: inset 0 0 0 1.5px var(--qz-line); }
.qz-maker__list button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-maker__list button:hover { background: #fff; }
.qz-maker__list button.is-on { background: #fff; box-shadow: var(--qz-shadow); }
.qz-maker__list button.is-on b { background: var(--qz-violet); color: #fff; box-shadow: none; }
.qz-maker__list button.is-todo span { color: var(--qz-muted); font-style: italic; }
.qz-maker__list .qz-maker__add { justify-content: center; font-weight: 800; color: var(--qz-violet); border: 1.5px dashed var(--qz-lav); }
.qz-maker__edit { padding: clamp(16px, 3vw, 32px); display: grid; gap: 16px; align-content: start; }
.qz-maker__qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.qz-maker__num { font-weight: 800; color: var(--qz-violet); font-family: var(--qz-display); }
.qz-maker__tools { display: flex; gap: 6px; }
.qz-maker__tools button { border: 0; background: var(--qz-lilac); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--qz-ink); }
.qz-maker__tools button:hover { background: var(--qz-lav); }
.qz-maker__q { width: 100%; resize: vertical; border: 0; border-radius: 20px; background: var(--qz-base); box-shadow: inset 0 0 0 1.5px var(--qz-line); padding: 18px 20px; font-family: var(--qz-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.6rem); text-align: center; color: var(--qz-ink); outline: 0; }
.qz-maker__q:focus { box-shadow: inset 0 0 0 2px var(--qz-violet); background: #fff; }
.qz-maker__time { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 700; }
.qz-maker__time span { margin-right: 6px; }
.qz-maker__time button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: .92rem; background: var(--qz-lilac); color: var(--qz-ink); cursor: pointer; }
.qz-maker__time button.is-on { background: var(--qz-violet); color: #fff; }
.qz-maker__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qz-maker__answers .qz-tile { min-height: 76px; padding: 10px 12px 10px 16px; }
.qz-maker__answers input { flex: 1; min-width: 0; border: 0; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-weight: 700; border-radius: 12px; padding: 10px 12px; outline: 0; }
.qz-maker__answers input::placeholder { color: rgba(255,255,255,.8); font-weight: 600; }
.qz-maker__answers input:focus { background: rgba(255,255,255,.3); }
.qz-tile__check { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); background: transparent; color: transparent; font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.qz-tile__check:hover { background: rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.qz-tile.is-right .qz-tile__check { background: #fff; color: var(--qz-mint); border-color: #fff; }
.qz-maker__answers .qz-tile.is-right { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--qz-mint); }
.qz-maker__answers .qz-tile.is-right::after { display: none; }
.qz-maker__hint { margin: 0; font-size: .92rem; color: var(--qz-muted); }
.qz-maker__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; padding: 18px clamp(16px, 3vw, 28px); border-top: 1px solid var(--qz-line); }
.qz-maker__err { flex-basis: 100%; margin: 0; background: #FFE9E7; color: #B42318; border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.qz-maker__err[hidden] { display: none; }
@media (max-width: 760px) {
	.qz-maker__body { grid-template-columns: 1fr; }
	.qz-maker__list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--qz-line); max-height: none; }
	.qz-maker__list li { flex: none; }
	.qz-maker__list button span { display: none; }
	.qz-maker__list .qz-maker__add { white-space: nowrap; }
	.qz-maker__answers { grid-template-columns: 1fr; }
	.qz-maker__foot .qz-btn { flex: 1; }
}

/* Écran « quiz créé » */
.qz-done { position: relative; text-align: center; background: #fff; border-radius: 32px; box-shadow: var(--qz-shadow); padding: clamp(24px, 5vw, 56px); overflow: hidden; }
.qz-done__emoji { width: 104px; height: 104px; margin: 0 auto 14px; border-radius: 30px; display: grid; place-items: center; font-size: 56px; background: var(--wp--preset--gradient--quizzo); box-shadow: 0 16px 36px rgba(107,43,247,.3); animation: qz-pop .6s cubic-bezier(.2,1.5,.4,1); }
.qz-done__title { font-family: var(--qz-display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 4px; }
.qz-done__meta { color: var(--qz-muted); margin: 0 0 24px; }
.qz-done__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 28px; }
.qz-done__links { display: grid; gap: 10px; max-width: 720px; margin: 0 auto 18px; text-align: left; }
.qz-linkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; background: var(--qz-base); border-radius: 18px; padding: 12px 14px; }
.qz-linkrow span { grid-column: 1 / -1; font-weight: 700; font-size: .95rem; }
.qz-linkrow code { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; border-radius: 10px; padding: 8px 10px; }
.qz-linkrow--secret { background: #FFF6E0; }
.qz-done__note { color: var(--qz-muted); font-size: .95rem; max-width: 560px; margin: 0 auto 12px; }

/* ---------- Solo ---------- */
.qz-solo-start { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.qz-solo-start__art { aspect-ratio: 1; border-radius: 28px; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.4) 0%, transparent 55%), var(--qz-accent, var(--qz-violet)); }
.qz-solo-start__art span { font-size: clamp(90px, 14vw, 170px); line-height: 1; filter: drop-shadow(0 14px 18px rgba(61,18,70,.25)); animation: qz-float 3.2s ease-in-out infinite; }
.qz-solo-start__body { display: grid; gap: 16px; justify-items: start; }
.qz-solo-start__body .qz-kicker, .qz-solo-start__body .qz-h { margin: 0; }
.qz-howto { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.qz-defi { margin: 0; background: #FFF3D6; border-radius: 16px; padding: 12px 16px; font-weight: 600; }
.qz-defi.is-win { background: #DDF7EC; }
@media (max-width: 720px) {
	.qz-solo-start { grid-template-columns: 1fr; }
	.qz-solo-start__art { aspect-ratio: 16 / 9; }
	.qz-solo-start__body { justify-items: stretch; }
}
.qz-play__top { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(16px, 3vw, 28px); }
.qz-play__q { font-family: var(--qz-display); font-weight: 900; text-align: center; font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.12; margin: 0 auto clamp(18px, 3vw, 32px); max-width: 900px; text-wrap: balance; }
.qz-feedback { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 22px; min-height: 56px; }
.qz-feedback:empty { visibility: hidden; }
.qz-verdict { display: grid; gap: 2px; padding: 10px 18px; border-radius: 16px; animation: qz-pop .4s cubic-bezier(.2,1.5,.4,1); }
.qz-verdict strong { font-family: var(--qz-display); font-size: 1.3rem; }
.qz-verdict.is-ok { background: #DDF7EC; color: #0F7A55; }
.qz-verdict.is-ko { background: #FFE9E7; color: #B42318; }
.qz-solo-end .qz-score { margin-bottom: 0; }
.qz-solo-end__sub { color: var(--qz-muted); font-weight: 600; margin: 0 0 18px; }
.qz-defi-form { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 16px; }
.qz-defi-form label { font-weight: 700; }
.qz-defi-form input { border: 0; box-shadow: inset 0 0 0 1.5px var(--qz-line); border-radius: 999px; padding: 10px 16px; font: inherit; }

/* ---------- Écran animateur ---------- */
.qz-live { position: relative; background: linear-gradient(160deg, #4A1A9E 0%, #6B2BF7 55%, #9B5CFF 100%); color: #fff; border-radius: 32px; padding: clamp(14px, 2.5vw, 28px); min-height: min(78vh, 760px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(107,43,247,.3); }
.qz-live::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -20%; bottom: -40%; border-radius: 50%; background: var(--qz-coral); filter: blur(120px); opacity: .45; pointer-events: none; }
.qz-live > * { position: relative; }
.qz-live:fullscreen { border-radius: 0; min-height: 100vh; padding: 3vw; }
.qz-live__bar { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(12px, 2vw, 24px); }
.qz-live__pin { background: #fff; color: var(--qz-ink); border-radius: 999px; padding: 6px 16px; font-weight: 700; }
.qz-live__pin b { font-family: var(--qz-display); font-size: 1.2rem; letter-spacing: .06em; }
.qz-live__title { flex: 1; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-live .qz-muted { color: rgba(255,255,255,.75); }
.qz-live .qz-h { color: #fff; text-align: center; }
.qz-live .qz-btn--ghost { background: rgba(255,255,255,.14); color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.qz-live .qz-btn--ghost:hover { background: rgba(255,255,255,.24); }
.qz-live .qz-btn:not(.qz-btn--ghost) { background: #fff; color: var(--qz-violet) !important; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.qz-live .qz-btn:not(.qz-btn--ghost):hover { background: var(--qz-yellow); color: var(--qz-ink) !important; }
.qz-live .qz-btn:disabled { opacity: .45; }

.qz-lobby { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; text-align: center; }
.qz-lobby__join { background: #fff; color: var(--qz-ink); border-radius: 28px; padding: clamp(16px, 3vw, 28px); justify-self: center; width: min(100%, 640px); box-shadow: 0 20px 50px rgba(0,0,0,.15); }
.qz-lobby__join p { margin: 0; font-size: clamp(1.05rem, 2vw, 1.4rem); }
.qz-lobby__pin { font-family: var(--qz-display); font-weight: 900; font-size: clamp(3.5rem, 11vw, 7.5rem); line-height: 1; letter-spacing: .04em; margin: 8px 0 12px; background: linear-gradient(120deg, var(--qz-violet), var(--qz-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-lobby__join .qz-btn--ghost { background: var(--qz-lilac); color: var(--qz-violet) !important; box-shadow: none; }
.qz-lobby__count { font-family: var(--qz-display); font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; }
.qz-lobby__count b { font-size: 2.2rem; }
.qz-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.qz-names li { background: rgba(255,255,255,.95); color: var(--qz-ink); font-weight: 800; font-family: var(--qz-display); font-size: clamp(1rem, 1.8vw, 1.3rem); border-radius: 999px; padding: 8px 18px; cursor: pointer; animation: qz-pop .45s cubic-bezier(.2,1.5,.4,1); }
.qz-names li:hover { background: #FFE9E7; text-decoration: line-through; }
.qz-lobby__go { display: grid; justify-items: center; gap: 8px; }

.qz-hq { flex: 1; display: flex; flex-direction: column; gap: clamp(14px, 2.4vw, 28px); }
.qz-hq__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qz-hq__q { background: #fff; color: var(--qz-ink); border-radius: 24px; padding: clamp(16px, 3vw, 32px); margin: 0; text-align: center; font-family: var(--qz-display); font-weight: 900; font-size: clamp(1.5rem, 3.8vw, 3rem); line-height: 1.1; text-wrap: balance; box-shadow: 0 16px 40px rgba(0,0,0,.15); }
.qz-hq .qz-tiles { margin-top: auto; }
.qz-hq .qz-tile { min-height: clamp(80px, 12vh, 130px); font-size: clamp(1.1rem, 2.4vw, 1.8rem); }
.qz-hq .qz-tile .qz-shape { width: clamp(34px, 4vw, 52px); height: clamp(34px, 4vw, 52px); }
.qz-hq__foot { display: flex; justify-content: flex-end; }
.qz-ring { position: relative; width: 84px; height: 84px; }
.qz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qz-ring circle { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.2); stroke-width: 4; }
.qz-ring .qz-ring__go { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; }
.qz-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--qz-display); font-size: 1.9rem; font-weight: 900; }
.qz-bars { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 36px); height: clamp(120px, 22vh, 220px); }
.qz-bars__col { width: clamp(56px, 9vw, 110px); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; opacity: .45; }
.qz-bars__col.is-right { opacity: 1; }
.qz-bars__col b { font-family: var(--qz-display); font-size: 1.5rem; }
.qz-bars__col > span:not(.qz-shape) { width: 100%; height: max(8px, var(--h)); background: var(--c); border-radius: 14px 14px 6px 6px; animation: qz-grow .7s cubic-bezier(.2,.8,.2,1); transform-origin: bottom; }
.qz-bars__col .qz-shape { color: #fff; width: 28px; height: 28px; }
@keyframes qz-grow { from { transform: scaleY(0); } }

.qz-board, .qz-podium-wrap { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.qz-ranks { list-style: none; margin: 0 auto; padding: 0; width: min(100%, 760px); display: grid; gap: 10px; }
.qz-ranks li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; background: #fff; color: var(--qz-ink); border-radius: 18px; padding: 12px 18px; font-size: clamp(1.05rem, 2vw, 1.4rem); animation: qz-slide .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
.qz-ranks li:first-child { background: var(--qz-yellow); }
@keyframes qz-slide { from { opacity: 0; transform: translateX(-30px); } }
.qz-ranks__n { font-family: var(--qz-display); font-weight: 900; font-size: 1.4em; color: var(--qz-violet); }
.qz-ranks__name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-ranks__gain { color: #0F7A55; font-weight: 800; font-size: .85em; }
.qz-ranks__pts { font-family: var(--qz-display); font-weight: 900; }
.qz-ranks--rest li { background: rgba(255,255,255,.92); padding: 8px 16px; font-size: 1rem; }
.qz-ranks--rest li:first-child { background: rgba(255,255,255,.92); }
.qz-board .qz-hq__foot, .qz-podium-wrap .qz-row { margin-top: auto; justify-content: center; }
.qz-podium { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2vw, 20px); min-height: 300px; }
.qz-podium__col { width: clamp(90px, 18vw, 200px); text-align: center; animation: qz-rise .9s cubic-bezier(.2,1.2,.4,1) both; }
.qz-podium__col--2 { animation-delay: .5s; } .qz-podium__col--3 { animation-delay: .2s; } .qz-podium__col--1 { animation-delay: .9s; }
@keyframes qz-rise { from { opacity: 0; transform: translateY(60px); } }
.qz-podium__name { font-family: var(--qz-display); font-weight: 900; font-size: clamp(1.05rem, 2.4vw, 1.7rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-podium__pts { opacity: .85; font-weight: 700; margin-bottom: 8px; }
.qz-podium__step { background: #fff; color: var(--qz-violet); border-radius: 20px 20px 8px 8px; display: grid; place-items: center; align-content: center; gap: 4px; font-size: 2.4rem; box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.qz-podium__step b { font-family: var(--qz-display); font-size: 2.6rem; line-height: 1; }
.qz-podium__col--1 .qz-podium__step { height: 210px; background: var(--qz-yellow); color: var(--qz-ink); }
.qz-podium__col--2 .qz-podium__step { height: 160px; }
.qz-podium__col--3 .qz-podium__step { height: 120px; }
.qz-pick { list-style: none; padding: 0; margin: 0 auto 20px; display: grid; gap: 8px; max-width: 480px; }
.qz-pick a { display: block; background: var(--qz-lilac); border-radius: 14px; padding: 12px 16px; font-weight: 700; text-decoration: none; }
@media (max-width: 600px) {
	.qz-live { border-radius: 24px; }
	.qz-ring { width: 64px; height: 64px; }
	.qz-ring b { font-size: 1.4rem; }
}

/* ---------- Écran joueur (téléphone) ---------- */
.qz-phone { position: relative; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 32px; box-shadow: var(--qz-shadow); padding: clamp(18px, 4vw, 32px); min-height: min(72vh, 640px); display: flex; flex-direction: column; gap: 16px; overflow: hidden; transition: background .3s ease; }
.qz-phone__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qz-phone__name { font-weight: 800; font-family: var(--qz-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-phone__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.qz-phone__center p { margin: 4px 0; }
.qz-phone__q { text-align: center; }
.qz-phone__q h2 { font-family: var(--qz-display); font-weight: 900; font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.15; margin: 4px 0 0; }
.qz-tiles--phone { flex: 1; grid-auto-rows: 1fr; }
.qz-tiles--phone .qz-tile { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 120px; font-size: 1.05rem; }
.qz-tiles--phone .qz-shape { width: 44px; height: 44px; }
.qz-joinform { display: grid; gap: 12px; width: min(100%, 360px); margin-top: 10px; }
.qz-bigin { width: 100%; border: 0; border-radius: 18px; background: var(--qz-base); box-shadow: inset 0 0 0 2px var(--qz-line); padding: 16px; text-align: center; font-family: var(--qz-display); font-weight: 900; font-size: 1.8rem; letter-spacing: .06em; color: var(--qz-ink); outline: 0; }
.qz-bigin:focus { box-shadow: inset 0 0 0 2.5px var(--qz-violet); background: #fff; }
.qz-phone.is-ok { background: linear-gradient(170deg, #2BD49B 0%, #14A673 100%); color: #fff; }
.qz-phone.is-ko { background: linear-gradient(170deg, #FF7A7A 0%, #E5484D 100%); color: #fff; }
.qz-phone.is-ok .qz-pill, .qz-phone.is-ko .qz-pill { background: rgba(255,255,255,.22); color: #fff; }
.qz-phone.is-ok .qz-pill--score, .qz-phone.is-ko .qz-pill--score { background: #fff; color: var(--qz-ink); }
.qz-phone.is-ok .qz-h, .qz-phone.is-ko .qz-h { color: #fff; }
.qz-verdict-big { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 64px; font-weight: 900; background: rgba(255,255,255,.22); animation: qz-pop .5s cubic-bezier(.2,1.5,.4,1); }
.qz-gain { font-family: var(--qz-display); font-weight: 900; font-size: clamp(2.6rem, 10vw, 3.6rem); line-height: 1; }
.qz-phone:not(.is-ok):not(.is-ko) .qz-gain { background: linear-gradient(120deg, var(--qz-violet), var(--qz-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-rank { font-size: 1.2rem; margin-top: 10px !important; }
.qz-phone.is-question { gap: 12px; }
.qz-phone.is-question .qz-timer { flex: none; }
.qz-bounce { animation: qz-float 1.6s ease-in-out infinite; }
.qz-spin { animation: qz-spin 2s linear infinite; }
@keyframes qz-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
	.qz-app--join { margin-left: -8px; margin-right: -8px; }
	.qz-phone { min-height: calc(100svh - 120px); border-radius: 26px; }
}

/* ---------- Champ « code PIN » (accueil) ---------- */
.qz-pinform { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
.qz-pinform.alignleft { align-items: flex-start; }
.qz-pinform.alignright { align-items: flex-end; }
.qz-pinform__label { font-weight: 700; color: var(--qz-muted); font-size: .98rem; }
.qz-pinform__box { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 6px 6px 6px 22px; box-shadow: var(--qz-shadow); }
.qz-pinform input { border: 0; outline: 0; background: transparent; width: 8.5ch; font-family: var(--qz-display); font-weight: 900; font-size: 1.25rem; letter-spacing: .08em; color: var(--qz-ink); }
.qz-pinform input::placeholder { color: #C9BEDA; }
.qz-pinform button { border: 0; border-radius: 999px; background: var(--qz-ink); color: #fff; font-family: var(--qz-display); font-weight: 800; font-size: 1rem; padding: 12px 20px; cursor: pointer; transition: background .15s ease; }
.qz-pinform button:hover { background: var(--qz-violet); }

@media (prefers-reduced-motion: reduce) {
	.qz-solo-start__art span, .qz-bounce, .qz-spin, .qz-app__loading span, .qz-dots i { animation: none; }
}
.qz-bars__col { --c: var(--qz-a1); }
.qz-bars__col.qz-tile--1 { --c: var(--qz-a2); } .qz-bars__col.qz-tile--2 { --c: var(--qz-a3); } .qz-bars__col.qz-tile--3 { --c: var(--qz-a4); }
.qz-live.is-reveal .qz-bars { height: clamp(90px, 16vh, 170px); }
.qz-live.is-reveal .qz-tile { min-height: clamp(60px, 9vh, 90px); }
.qz-live.is-reveal .qz-hq { gap: clamp(10px, 1.6vw, 18px); }
.qz-app { scroll-margin-top: 100px; }
.qz-linkbtn, .qz-linkbtn:hover { text-decoration: none !important; }
.qz-linkbtn:hover { opacity: .8; }
.qz-maker__edit, .qz-maker__list { min-width: 0; }
@media (max-width: 760px) {
	.qz-maker__body { grid-template-columns: minmax(0, 1fr); }
	.qz-maker__head { gap: 12px; }
	.qz-maker__emoji { width: 56px; height: 56px; font-size: 30px; border-radius: 18px; }
	.qz-maker__foot .qz-btn--big { font-size: 1.1rem; padding: 14px 20px; }
	.qz-maker__foot .qz-btn--ghost { flex: 0 0 auto; }
}
.qz-maker__edit { grid-template-columns: minmax(0, 1fr); } .qz-maker__answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .qz-maker__answers { grid-template-columns: minmax(0, 1fr); } } .qz-maker__answers input { width: 0; }

/* =====================================================================
   Personnalité Quizzo : contours encre + ombres « pop ».
   ===================================================================== */
.qz-stagecard, .qz-maker, .qz-done, .qz-phone, .qz-mine, .qz-tile, .qz-live, .qz-hq__q, .qz-lobby__join, .qz-ranks li, .qz-podium__step, .qz-pinform__box, .qz-bigin, .qz-names li, .qz-maker__emoji, .qz-maker__q, .qz-solo-start__art, .qz-done__emoji, .qz-verdict, .qz-defi, .qz-linkrow, .qz-pick a, .qz-defi-form input { border: var(--qz-b); }
.qz-stagecard, .qz-maker, .qz-done, .qz-phone { box-shadow: 8px 8px 0 var(--qz-ink); }
.qz-mine { box-shadow: 4px 4px 0 var(--qz-ink); }
.qz-pill { border: 2px solid var(--qz-ink); background: #fff; color: var(--qz-ink); }
.qz-pill--score { background: var(--qz-ink); color: #fff; }
.qz-pill--soft { box-shadow: none; }
.qz-tile { box-shadow: 4px 4px 0 var(--qz-ink); text-shadow: 0 1px 0 rgba(0,0,0,.15); }
button.qz-tile:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--qz-ink); filter: none; }
button.qz-tile:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--qz-ink); }
.qz-shape svg { filter: drop-shadow(2px 2px 0 rgba(61,18,70,.55)); }
.qz-tile.is-right { box-shadow: 4px 4px 0 var(--qz-ink), 0 0 0 5px var(--qz-mint); }
.qz-tile.is-right::after, .qz-tile.is-wrong::after { border: 2px solid var(--qz-ink); box-shadow: none; }
.qz-tile.is-picked { box-shadow: 1px 1px 0 var(--qz-ink), 0 0 0 5px #fff; transform: translate(3px, 3px); }
.qz-timer { border: 2px solid var(--qz-ink); height: 16px; background: #fff; }
.qz-timer span { border-radius: 0; background: var(--qz-coral); }
/* Créateur */
.qz-maker__head { background: var(--wp--preset--color--lilac, #EDE5FF); border-bottom: var(--qz-b); }
.qz-maker__emoji { box-shadow: 3px 3px 0 var(--qz-ink); transform: rotate(-4deg); }
.qz-maker__title { border-bottom: 2.5px dashed var(--qz-ink); }
.qz-dot { box-shadow: 0 0 0 2px var(--qz-ink); }
.qz-dot.is-on { box-shadow: 0 0 0 2px var(--qz-ink), 0 0 0 5px #fff, 0 0 0 7px var(--qz-ink); }
.qz-maker__list { border-right: var(--qz-b); }
.qz-maker__list button.is-on { box-shadow: 3px 3px 0 var(--qz-ink); border: 2px solid var(--qz-ink); }
.qz-maker__list button b { box-shadow: none; border: 2px solid var(--qz-ink); }
.qz-maker__list .qz-maker__add { border: 2px dashed var(--qz-ink); }
.qz-maker__tools button, .qz-maker__time button { border: 2px solid var(--qz-ink); background: #fff; }
.qz-maker__time button.is-on { background: var(--qz-ink); color: #fff; }
.qz-maker__q { box-shadow: none; background: #fff; }
.qz-maker__q:focus { box-shadow: 3px 3px 0 var(--qz-ink); }
.qz-maker__answers .qz-tile.is-right { box-shadow: 4px 4px 0 var(--qz-ink), 0 0 0 5px var(--qz-mint); }
.qz-maker__foot { border-top: var(--qz-b); }
.qz-maker__err { border: 2px solid #B42318; }
.qz-done__emoji { background: var(--qz-yellow); box-shadow: 4px 4px 0 var(--qz-ink); transform: rotate(-5deg); }
.qz-linkrow code { border: 2px solid var(--qz-ink); }
.qz-linkrow--secret { background: #FFF1C2; }
@media (max-width: 760px) { .qz-maker__list { border-right: 0; border-bottom: var(--qz-b); } }
/* Solo */
.qz-solo-start__art { background-image: radial-gradient(rgba(255,255,255,.25) 2px, transparent 2.5px); background-size: 24px 24px; background-color: var(--qz-accent, var(--qz-violet)); box-shadow: 5px 5px 0 var(--qz-ink); transform: rotate(-1.5deg); }
.qz-solo-start__art span { filter: drop-shadow(5px 5px 0 rgba(61,18,70,.85)); }
.qz-defi { background: var(--qz-yellow); transform: rotate(-1deg); }
/* Écran animateur : fond violet uni + trame de points */
.qz-live { background: var(--qz-violet) radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 2px) 0 0 / 24px 24px; box-shadow: 10px 10px 0 var(--qz-ink); }
.qz-live::before { display: none; }
.qz-live__pin, .qz-iconbtn { border: var(--qz-b); }
.qz-live__pin { box-shadow: 3px 3px 0 var(--qz-ink); }
.qz-iconbtn { background: #fff; color: var(--qz-ink); }
.qz-live .qz-btn:not(.qz-btn--ghost) { background: var(--qz-yellow); color: var(--qz-ink) !important; box-shadow: 5px 5px 0 var(--qz-ink); }
.qz-live .qz-btn:not(.qz-btn--ghost):hover { background: var(--qz-pink); }
.qz-live .qz-btn--ghost { background: #fff; color: var(--qz-ink) !important; box-shadow: 4px 4px 0 var(--qz-ink); }
.qz-live .qz-h { text-shadow: 3px 3px 0 var(--qz-ink); }
.qz-lobby__join, .qz-hq__q { box-shadow: 6px 6px 0 var(--qz-ink); }
.qz-lobby__join { transform: rotate(-1deg); }
.qz-lobby__pin { background: none; color: var(--qz-ink); -webkit-background-clip: border-box; background-clip: border-box; }
.qz-lobby__join .qz-btn--ghost { background: var(--qz-yellow); box-shadow: 3px 3px 0 var(--qz-ink); }
.qz-names li { box-shadow: 3px 3px 0 var(--qz-ink); background: #fff; }
.qz-names li:nth-child(3n+1) { transform: rotate(-2deg); } .qz-names li:nth-child(3n+2) { transform: rotate(1.5deg); }
.qz-ring circle { fill: #fff; stroke: var(--qz-ink); stroke-width: 3; }
.qz-ring .qz-ring__go { stroke: var(--qz-coral); stroke-width: 5; }
.qz-ring b { color: var(--qz-ink); }
.qz-bars__col > span:not(.qz-shape) { border: var(--qz-b); box-shadow: 3px 3px 0 var(--qz-ink); }
.qz-bars__col b { text-shadow: 2px 2px 0 var(--qz-ink); }
.qz-ranks li { box-shadow: 4px 4px 0 var(--qz-ink); }
.qz-ranks__n { color: var(--qz-ink); }
.qz-podium__step { box-shadow: 5px 5px 0 var(--qz-ink); }
.qz-podium__col--2 .qz-podium__step { background: #fff; }
.qz-podium__col--3 .qz-podium__step { background: var(--qz-coral); color: var(--qz-ink); }
.qz-podium__name { text-shadow: 2px 2px 0 var(--qz-ink); }
/* Écran joueur */
.qz-phone.is-ok { background: var(--qz-mint); color: var(--qz-ink); }
.qz-phone.is-ko { background: #FF6B6B; color: var(--qz-ink); }
.qz-phone.is-ok .qz-h, .qz-phone.is-ko .qz-h { color: var(--qz-ink); }
.qz-phone.is-ok .qz-pill, .qz-phone.is-ko .qz-pill { background: #fff; color: var(--qz-ink); }
.qz-verdict-big { background: #fff; color: var(--qz-ink); border: var(--qz-b); box-shadow: 4px 4px 0 var(--qz-ink); }
.qz-phone:not(.is-ok):not(.is-ko) .qz-gain { background: none; color: var(--qz-violet); -webkit-text-stroke: 2px var(--qz-ink); paint-order: stroke fill; }
.qz-bigin { box-shadow: none; background: #fff; }
.qz-bigin:focus { box-shadow: 4px 4px 0 var(--qz-ink); }
/* Champ PIN de l'accueil */
.qz-pinform__box { box-shadow: 4px 4px 0 var(--qz-ink); }
.qz-pinform button { background: var(--qz-ink); }
.qz-pinform button:hover { background: var(--qz-violet); }