html.cz-scene {
  --c1: hsl(var(--c-hue, 338), 72%, 52%);
  --c2: hsl(calc(var(--c-hue, 338) + 28), 78%, 62%);
  --c-pale: hsl(var(--c-hue, 338), 75%, 96%);
  --c-texte: hsl(var(--c-hue, 338), 60%, 36%);
  --cadre: min(760px, calc(100vw - 32px));
}




html.cz-scene .container {
  position: relative; z-index: 1;
  max-width: var(--cadre) !important; width: auto !important; margin: 0 auto !important;
  padding: 86px 0 56px !important; box-sizing: content-box;
}
html.cz-scene body #contenu .chanzons-shell {
  background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; overflow: visible !important;
}
html.cz-scene body #contenu .chanzons-shell-body { padding: 0 !important; display: flex; flex-direction: column; gap: 0; }


html.cz-scene body #contenu .chanzons-shell-banner {
  position: relative !important; overflow: hidden;
  display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: "bc heart" "title title" !important;
  gap: 4px 10px !important; padding: 18px 22px 8px !important; margin: 0 !important; min-height: 0 !important;
  background: #fff !important; background-image: none !important;
  border: 0 !important; border-radius: 26px 26px 0 0 !important; box-shadow: none !important;
  color: var(--texte) !important; text-align: center !important;
}
html.cz-scene body #contenu .chanzons-shell-banner::before { display: none !important; }
html.cz-scene body #contenu .chanzons-shell-banner::after {
  content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; height: 6px !important;
  bottom: auto !important; background: var(--bandes) !important; border: 0 !important;
}
html.cz-scene body #contenu .chanzons-shell-banner > * { position: relative; z-index: 1; }
html.cz-scene body #contenu .chanzons-shell-bc-slot { grid-area: bc; display: flex !important; align-items: center; justify-self: start !important; }
html.cz-scene body #contenu .chanzons-shell-heart-slot { grid-area: heart; display: flex !important; align-items: center; gap: 6px; justify-self: end !important; }
html.cz-scene body #contenu .chanzons-shell-bc-slot a, html.cz-scene body #contenu .chanzons-shell-bc-slot button,
html.cz-scene body #contenu .chanzons-shell-heart-slot button {
  background: var(--c-pale) !important; color: var(--c-texte) !important; border: 0 !important;
  box-shadow: none !important; border-radius: 999px !important; text-shadow: none !important; font-weight: 800 !important;
}
html.cz-scene body #contenu .chanzons-shell-bc-slot svg, html.cz-scene body #contenu .chanzons-shell-heart-slot svg { color: currentColor !important; }
html.cz-scene body #contenu .chanzons-shell-title-col { grid-area: title; display: flex !important; flex-direction: column; align-items: center !important; text-align: center !important; padding: 0 !important; background: none !important; }


.cz-emoji {
  position: relative; display: inline-block; margin: 6px 0 12px; font-size: clamp(54px, 9vw, 70px); line-height: 1;
  filter: drop-shadow(0 8px 20px hsla(var(--c-hue, 338), 80%, 50%, .3));
  animation: cz-emoji-pop .8s cubic-bezier(.34, 1.56, .64, 1), cz-flotte 4s ease-in-out .8s infinite;
}
.cz-emoji::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; filter: blur(18px);
  background: radial-gradient(circle, hsla(var(--c-hue, 338), 85%, 60%, .3) 0%, transparent 65%);
  animation: cz-halo 3s ease-in-out infinite;
}
@keyframes cz-emoji-pop { 0% { transform: scale(.3) rotate(-180deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes cz-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cz-halo { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

html.cz-scene body #contenu .chanzons-shell-title {
  margin: 0 !important; color: var(--texte) !important; text-shadow: none !important; text-align: center !important;
  font-size: clamp(26px, 4.4vw, 38px) !important; line-height: 1.12 !important; font-weight: 900 !important; letter-spacing: -.025em !important; max-width: 18ch;
}
html.cz-scene body #contenu .chanzons-shell-banner p.chanzons-shell-sub, html.cz-scene body #contenu .chanzons-shell-banner p#game-subheading {
  display: block !important; margin: 10px auto 0 !important; max-width: 46ch; color: var(--gris) !important; text-shadow: none !important;
  font-size: clamp(15px, 2vw, 17px) !important; font-weight: 600 !important; line-height: 1.5 !important; text-align: center !important;
}

.cz-pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 4px; }
.cz-pastilles span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: var(--c-pale); color: var(--c-texte); border: 1px solid hsla(var(--c-hue, 338), 70%, 50%, .2);
  font-size: 13px; font-weight: 800;
}


html.cz-scene body #contenu .chanzons-shell-body > .chanzons-card:has(.levels-card) {
  background: #fff !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 0 26px 26px !important; margin: 0 !important; padding: 8px clamp(18px, 4vw, 40px) 30px !important;
}
html.cz-scene body #contenu .chanzons-shell { filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .35)); }
html.cz-scene body #contenu .chanzons-card::before, html.cz-scene body #contenu .chanzons-card::after { display: none !important; }
html.cz-scene body #contenu .levels-card, html.cz-scene body #contenu .game-card { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
html.cz-scene body #contenu .levels-card::before, html.cz-scene body #contenu .levels-card::after { display: none !important; }


html.cz-scene body #contenu .chanzons-shell-body > .chanzons-card + .chanzons-card {
  margin-top: 22px !important; background: #fff !important; background-image: none !important; border: 0 !important;
  border-radius: 26px !important; box-shadow: none !important; padding: 26px clamp(18px, 4vw, 40px) !important;
}


html.cz-scene body #contenu .levels-card h2 {
  display: inline-flex !important; align-items: center; gap: 12px; margin: 10px 0 8px !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 900 !important; letter-spacing: .2em !important; text-transform: uppercase !important;
  color: var(--c-texte) !important; background: none !important; border: 0 !important;
}
html.cz-scene body #contenu .levels-card h2::before, html.cz-scene body #contenu .levels-card h2::after {
  content: "" !important; display: inline-block !important; width: 26px; height: 1px; position: static !important;
  background: linear-gradient(90deg, transparent, hsla(var(--c-hue, 338), 70%, 50%, .6), transparent) !important;
}
html.cz-scene body #contenu .levels-card { text-align: center; }

html.cz-scene body #contenu .levels-card > h2 { display: none !important; }

html.cz-scene body #contenu .qs-opts:not(:has(> .qs-opt:nth-child(4))) { flex-wrap: nowrap !important; }
html.cz-scene body #contenu .qs-opts:not(:has(> .qs-opt:nth-child(4))) > .qs-opt { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
html.cz-scene body #contenu .qs-wrap, html.cz-scene body #contenu .qs-etiquette { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html.cz-scene body #contenu .qs-pitch { color: var(--gris) !important; font-size: 16px !important; line-height: 1.55 !important; max-width: 48ch; margin: 0 auto 20px !important; text-align: center !important; }
html.cz-scene body #contenu .qs-pitch b { color: var(--texte) !important; }
html.cz-scene body #contenu .qs-field {
  display: flex !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between !important; gap: 10px 16px !important;
  padding: 14px 0 !important; border: 0 !important; border-top: 1px solid var(--trait) !important; background: transparent !important; text-align: left;
}
html.cz-scene body #contenu .qs-label { color: var(--texte) !important; font-weight: 800 !important; }
html.cz-scene body #contenu .qs-aide { color: var(--gris) !important; }
html.cz-scene body #contenu .qs-opt {
  border: 2px solid hsla(var(--c-hue, 338), 50%, 50%, .2) !important; background: #fff !important; color: var(--texte) !important;
  border-radius: 999px !important; font-weight: 800 !important; box-shadow: none !important; transition: transform .15s, border-color .15s, background .15s;
}
html.cz-scene body #contenu .qs-opt:hover { border-color: var(--c1) !important; transform: translateY(-1px); }
html.cz-scene body #contenu .qs-opt.qs-on { background: var(--c1) !important; border-color: var(--c1) !important; color: #fff !important; }

html.cz-scene body #contenu .qs-play {
  position: relative; overflow: hidden; display: inline-flex !important; align-items: center; justify-content: center; gap: 12px;
  margin: 22px auto 0 !important; padding: 18px 56px !important; width: auto !important; min-width: min(320px, 100%);
  border: 0 !important; border-radius: 18px !important; color: #fff !important;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c1) 35%, var(--c2) 100%) !important; background-size: 200% 100% !important;
  font-size: 19px !important; font-weight: 900 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
  box-shadow: 0 14px 34px hsla(var(--c-hue, 338), 80%, 45%, .45) !important;
  animation: cz-respire 2.4s ease-in-out infinite; transition: transform .2s, background-position .5s;
}
html.cz-scene body #contenu .qs-play::after { content: "→"; font-size: 1.3em; transition: transform .2s; }
html.cz-scene body #contenu .qs-play::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: cz-reflet 3.2s ease-in-out infinite;
}
html.cz-scene body #contenu .qs-play:hover { transform: translateY(-2px); background-position: 100% 50% !important; }
html.cz-scene body #contenu .qs-play:hover::after { transform: translateX(5px); }
@keyframes cz-respire { 0%, 100% { box-shadow: 0 14px 34px hsla(var(--c-hue, 338), 80%, 45%, .45), 0 0 0 0 hsla(var(--c-hue, 338), 80%, 55%, .45); } 50% { box-shadow: 0 16px 40px hsla(var(--c-hue, 338), 80%, 45%, .55), 0 0 0 12px hsla(var(--c-hue, 338), 80%, 55%, 0); } }
@keyframes cz-reflet { 0%, 55% { transform: translateX(-150%) skewX(-22deg); } 100% { transform: translateX(350%) skewX(-22deg); } }



html.cz-scene body #contenu #screen-game .chanzons-shell-banner { padding: 14px 18px 4px !important; grid-template-areas: "bc heart" "title title" !important; }
html.cz-scene body #contenu #screen-game .chanzons-shell-title { font-size: 17px !important; color: var(--gris) !important; font-weight: 800 !important; letter-spacing: 0 !important; max-width: none; }
html.cz-scene body #contenu #screen-game .chanzons-shell-sub, html.cz-scene body #contenu #screen-game .cz-emoji, html.cz-scene body #contenu #screen-game .cz-pastilles { display: none !important; }
.cz-points {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 12px;
  background: #FFF3D2; color: #8A5A00; font-weight: 900; font-size: 14px;
}
.cz-points.bump { animation: cz-bump .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cz-bump { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-4deg); } 100% { transform: scale(1); } }


html.cz-scene body #contenu #screen-game .chanzons-shell-body > .chanzons-card.chanzons-mode-container {
  background: #fff !important; border-radius: 0 !important; padding: 6px clamp(18px, 4vw, 40px) 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; position: relative; z-index: 2;
  box-shadow: 0 4px 0 #fff !important; 
}
html.cz-scene body #contenu #screen-game .chanzons-shell-body > .chanzons-card.chanzons-mode-container + .chanzons-card {
  margin-top: 0 !important; border-radius: 0 0 26px 26px !important; padding-top: 10px !important;
}
html.cz-scene body #contenu #zen-ui, html.cz-scene body #contenu #zen-ui .zen-wrapper, html.cz-scene body #contenu #zen-ui .zen-dots-slot {
  background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
  height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
}
html.cz-scene body #contenu #zen-ui .zen-wrapper { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
html.cz-scene body #contenu #zen-ui .zen-dots-slot { align-self: stretch !important; width: 100% !important; padding-left: 0 !important; }
html.cz-scene body #contenu #zen-ui .zen-wrapper::before, html.cz-scene body #contenu #zen-ui .zen-wrapper::after { display: none !important; }
html.cz-scene body #contenu #zen-ui .zen-avatar, html.cz-scene body #contenu #zen-ui .zen-bubble { display: none !important; }
.cz-compteur { font-size: 13px; font-weight: 900; color: var(--c-texte); letter-spacing: .02em; }
html.cz-scene body #contenu #zen-ui .ga-progress { display: flex !important; gap: 4px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
html.cz-scene body #contenu #zen-ui .ga-dot {
  flex: 1 !important; width: auto !important; height: 8px !important; border-radius: 999px !important; margin: 0 !important;
  background: hsla(var(--c-hue, 338), 60%, 50%, .14) !important; border: 0 !important; box-shadow: none !important; transform: none !important; outline: 0 !important;
  transition: background .4s;
}
html.cz-scene body #contenu #zen-ui .ga-dot.ok { background: linear-gradient(90deg, #0F91A6, #2BC3B6) !important; }
html.cz-scene body #contenu #zen-ui .ga-dot.bad { background: linear-gradient(90deg, #C2106C, #E8559A) !important; }

html.cz-scene body #contenu #zen-ui .ga-dot.current { background: var(--texte) !important; animation: cz-pouls 1.4s ease-in-out infinite; }

html.cz-scene body #contenu #zen-ui .cz-en-correction .ga-dot.current,
html.cz-scene body #contenu #zen-ui.cz-en-correction .ga-dot.current,
html.cz-scene body #contenu #zen-ui .zen-wrapper.cz-en-correction .ga-dot.current { background: hsla(var(--c-hue, 338), 60%, 50%, .14) !important; animation: none; }
@keyframes cz-pouls { 50% { opacity: .55; } }


html.cz-scene body #contenu .chanzons-consigne-bar {
  display: block !important; text-align: left !important; padding: 0 !important; margin: 14px 0 6px !important; background: none !important; border: 0 !important;
  font-size: 12px !important; font-weight: 900 !important; letter-spacing: .14em !important; color: var(--gris) !important; text-transform: uppercase;
}
html.cz-scene body #contenu .chanzons-consigne-bar::before, html.cz-scene body #contenu .chanzons-consigne-bar::after { display: none !important; }
html.cz-scene body #contenu .statement-box { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 18px !important; margin: 0 !important; }
html.cz-scene body #contenu .statement-text {
  text-align: left !important; font-size: clamp(20px, 3vw, 27px) !important; line-height: 1.28 !important;
  font-weight: 900 !important; color: var(--texte) !important; letter-spacing: -.015em;
}


html.cz-scene body #contenu .choices-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; max-width: none !important; margin: 0 !important; counter-reset: cz-rep; }
html.cz-scene body #contenu .choice-btn {
  counter-increment: cz-rep; position: relative; display: flex !important; align-items: center !important; gap: 14px; width: 100% !important;
  text-align: left !important; justify-content: flex-start !important; padding: 13px 48px 13px 14px !important; min-height: 58px;
  border: 2px solid hsla(var(--c-hue, 338), 50%, 50%, .16) !important; border-radius: 16px !important;
  background: linear-gradient(180deg, #fff, var(--c-pale)) !important; color: var(--texte) !important;
  box-shadow: 0 3px 0 hsla(var(--c-hue, 338), 50%, 50%, .14), 0 6px 16px hsla(var(--c-hue, 338), 60%, 40%, .07) !important;
  font-size: 17px !important; font-weight: 800 !important; line-height: 1.3 !important;
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s, opacity .16s;
}
html.cz-scene body #contenu .choice-btn::before {
  content: counter(cz-rep, upper-alpha); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: hsla(var(--c-hue, 338), 75%, 55%, .14); color: var(--c-texte); font-size: 14px; font-weight: 900; transition: background .16s, color .16s, transform .16s;
}
html.cz-scene body #contenu .cz-entree .choice-btn { animation: cz-rep-in .42s cubic-bezier(.34, 1.3, .64, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
html.cz-scene body #contenu .cz-entree .statement-box { animation: cz-q-in .45s cubic-bezier(.34, 1.3, .64, 1) backwards; }
@keyframes cz-rep-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cz-q-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  html.cz-scene body #contenu .choice-btn:hover:not(:disabled):not(.correct):not(.wrong):not(.reveal) {
    transform: translateY(-3px); border-color: var(--c1) !important;
    box-shadow: 0 6px 0 hsla(var(--c-hue, 338), 60%, 45%, .25), 0 12px 26px hsla(var(--c-hue, 338), 70%, 45%, .18) !important;
  }
  html.cz-scene body #contenu .choice-btn:hover:not(:disabled):not(.correct):not(.wrong):not(.reveal)::before { background: var(--c1); color: #fff; transform: scale(1.08); }
}
html.cz-scene body #contenu .choice-btn:active { transform: translateY(2px); }
html.cz-scene body #contenu .choice-btn.correct, html.cz-scene body #contenu .choice-btn.reveal, html.cz-scene body #contenu .choice-btn.right {
  background: linear-gradient(135deg, #0F91A6, #2BC3B6) !important; border-color: #0F91A6 !important; color: #fff !important;
  box-shadow: 0 5px 0 #0B6E7E, 0 12px 28px rgba(15, 145, 166, .35) !important; animation: cz-juste .5s cubic-bezier(.34, 1.56, .64, 1);
}

html.cz-scene body #contenu .choice-btn.correct::before, html.cz-scene body #contenu .choice-btn.reveal::before { background: #0B6E7E; color: #fff; }
html.cz-scene body #contenu .choice-btn.correct::after, html.cz-scene body #contenu .choice-btn.reveal::after {
  content: "✓"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 20px; font-weight: 900;
}
html.cz-scene body #contenu .choice-btn.wrong {
  background: #FDEAF2 !important; border-color: var(--magenta) !important; color: #9A0D56 !important; box-shadow: none !important; animation: cz-faux .45s ease;
}
html.cz-scene body #contenu .choice-btn.wrong::before { background: var(--magenta); color: #fff; }
html.cz-scene body #contenu .choice-btn.wrong::after { content: "✕"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--magenta); font-size: 17px; font-weight: 900; }
html.cz-scene body #contenu .choice-btn:disabled:not(.correct):not(.wrong):not(.reveal) { opacity: .5; }
html.cz-scene body #contenu .choice-btn > [class*="badge"], html.cz-scene body #contenu .choice-btn > [class*="tag"], html.cz-scene body #contenu .choice-btn > [class*="reveal"] { display: none !important; }
@keyframes cz-juste { 0% { transform: scale(1); } 45% { transform: scale(1.04) translateY(-3px); } 100% { transform: scale(1.01); } }
@keyframes cz-faux { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }


.cz-envol {
  position: fixed; z-index: 900; pointer-events: none; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 22px; color: #F5A90B; text-shadow: 0 2px 10px rgba(255, 255, 255, .9), 0 0 18px rgba(245, 197, 24, .5);
  animation: cz-envol 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes cz-envol { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 18% { opacity: 1; transform: translate(-50%, -95%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -220%) scale(1); } }


html.cz-scene body #contenu .chanzons-explanation {
  display: flex !important; gap: 10px; align-items: flex-start; margin: 16px 0 0 !important; padding: 14px 16px !important;
  background: var(--creme) !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; color: var(--texte) !important;
  animation: cz-rep-in .35s ease backwards;
}
html.cz-scene body #contenu .chanzons-explanation .chanzons-expl-tag { display: none !important; }
html.cz-scene body #contenu .chanzons-explanation .chanzons-expl-body { font-size: 16px !important; line-height: 1.45 !important; }
html.cz-scene body #contenu .chanzons-actions-bar { border: 0 !important; padding: 18px 0 0 !important; margin: 0 !important; background: transparent !important; position: static !important; display: flex !important; justify-content: center !important; width: 100% !important; box-sizing: border-box; }
html.cz-scene body #contenu .btn-go {
  box-sizing: border-box; max-width: 100%; padding: 15px 34px !important; border: 0 !important; border-radius: 16px !important; color: #fff !important;
  background: linear-gradient(135deg, var(--c1), var(--c2)) !important; box-shadow: 0 10px 24px hsla(var(--c-hue, 338), 80%, 45%, .35) !important;
  font-size: 17px !important; font-weight: 900 !important; transition: transform .15s;
}
html.cz-scene body #contenu .btn-go:hover { transform: translateY(-2px); }


html.cz-scene .gui-particle, html.cz-scene .chanzons-attempt-badge { display: none !important; }


html.cz-scene #overlay-result.overlay { background: rgba(16, 6, 30, .62) !important; backdrop-filter: blur(6px); }
html.cz-scene .res-card { border: 0 !important; border-radius: 26px !important; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45) !important; background: #fff !important; }
html.cz-scene .res-banner { background: radial-gradient(ellipse 120% 90% at 50% -10%, #3B1868 0%, var(--nuit-fond) 70%) !important; border: 0 !important; position: relative; }
html.cz-scene .res-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bandes); }
html.cz-scene .res-banner *, html.cz-scene .res-banner-game-title { color: var(--creme) !important; text-shadow: none !important; }
html.cz-scene .res-actbtns > * {
  background: var(--c-pale) !important; background-image: none !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important;
  transition: transform .15s;
}
html.cz-scene .res-actbtns > * * { color: var(--c-texte) !important; text-shadow: none !important; }
html.cz-scene .res-actbtns > *:hover { transform: translateY(-2px); }
html.cz-scene .res-actbtns > .res-act-replay { background: linear-gradient(135deg, var(--c1), var(--c2)) !important; }

html.cz-scene #overlay-result .res-actbtns > .res-actbtn.res-act-home { background: var(--c-pale) !important; background-image: none !important; }

html.cz-scene #overlay-result .ga-breadcrumb { display: none !important; }
html.cz-scene .res-actbtns > .res-act-replay * { color: #fff !important; }


html.cz-scene body #contenu .chanzons-section-divider { color: var(--texte) !important; font-weight: 900 !important; }

html.cz-scene body #contenu .seo-tabs { gap: 0 !important; margin: 0 0 20px !important; border-bottom: 1px solid var(--trait); }
html.cz-scene body #contenu .seo-tab-btn {
  border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; margin-bottom: -1px;
  background: none !important; color: var(--gris) !important; box-shadow: none !important; padding: 12px 14px !important; font-size: 15px !important;
}
html.cz-scene body #contenu .seo-tab-btn:hover { color: var(--texte) !important; }
html.cz-scene body #contenu .seo-tab-btn.active { color: var(--texte) !important; border-bottom-color: var(--c1) !important; }

html.cz-scene body #contenu .seo-an { background: var(--c-pale) !important; color: var(--c1) !important; }
html.cz-scene body #contenu .seo-other-games-inner a[href$="index.html"], html.cz-scene body #contenu a[href="../index.html"] { color: var(--c1) !important; }
html.cz-scene body #contenu .seo-tab-content { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; padding: 0 4px !important; }


html.cz-scene body #contenu #ql2-in {
  width: auto !important; height: 52px !important; margin: 0 !important; text-align: left !important;
  font-size: 17px !important; font-weight: 700 !important; border-width: 2px !important; border-radius: 14px !important;
}


@media (max-width: 1024px), (pointer: coarse) {
  
  html.cz-scene.cz-scene body.is-game { padding-top: 0 !important; }
  html.cz-scene .container { padding: calc(var(--barre-h) + 8px) 0 32px !important; }
  
  html.cz-scene body #contenu .chanzons-shell { filter: none !important; }
  html.cz-scene body #contenu .chanzons-shell-body > .chanzons-card:last-child,
  html.cz-scene body #contenu .chanzons-shell-body > .chanzons-card:has(.levels-card) { box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important; }
  
  html.cz-scene body #contenu #screen-game :is(.chanzons-actions-bar, .qd-actions, .qf-actions, .qg-actions, .qi-actions, .ql-actions, .ql2-actions, .qk-actions, .qp-actions, .qt-actions, .qv-actions) {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 500 !important;
    display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 8px !important;
    margin: 0 !important; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    background: none !important; border: 0 !important; pointer-events: none; width: auto !important;
  }
  html.cz-scene body #contenu #screen-game :is(.chanzons-actions-bar, .qd-actions, .qf-actions, .qg-actions, .qi-actions, .ql-actions, .ql2-actions, .qk-actions, .qp-actions, .qt-actions, .qv-actions) > * {
    pointer-events: auto; flex: 1 1 0; max-width: 360px !important; min-height: 52px; margin: 0 !important; padding: 12px 14px !important; font-size: 16px !important; line-height: 1.2 !important;
    box-shadow: 0 10px 28px rgba(16, 6, 30, .45) !important;
  }
  
  html.cz-scene body #contenu #screen-game :is(.chanzons-actions-bar, .qd-actions, .qf-actions, .qg-actions, .qi-actions, .ql-actions, .ql2-actions, .qk-actions, .qp-actions, .qt-actions, .qv-actions) > :disabled {
    opacity: 1 !important; background: #EDE7F2 !important; color: #8E829E !important; box-shadow: 0 6px 18px rgba(16, 6, 30, .3) !important;
  }
  
  html.cz-scene body #contenu #screen-game .chanzons-shell-body { padding-bottom: 76px !important; }
}


@media (max-width: 640px) {
  html.cz-scene { --cadre: calc(100vw - 16px); }
  html.cz-scene body #contenu .chanzons-shell-banner { padding: 16px 14px 6px !important; border-radius: 20px 20px 0 0 !important; }
  html.cz-scene body #contenu .chanzons-shell-body > .chanzons-card:has(.levels-card) { border-radius: 0 0 20px 20px !important; }
  html.cz-scene body #contenu .qs-field { flex-direction: column; align-items: stretch !important; }
  html.cz-scene body #contenu .qs-opts:not(:has(> .qs-opt:nth-child(4))) { gap: 5px !important; }
  html.cz-scene body #contenu .qs-opts:not(:has(> .qs-opt:nth-child(4))) > .qs-opt { flex: 1 1 auto; padding: 10px 4px !important; font-size: 15px !important; }
  html.cz-scene body #contenu .qs-multi .qs-opts:not(:has(> .qs-opt:nth-child(4))) > .qs-opt::before { margin-right: 5px; }
  html.cz-scene body #contenu .qs-play { padding: 16px 30px !important; font-size: 17px !important; width: 100% !important; }

  
  html.cz-scene body #contenu #screen-game .chanzons-shell-banner { padding: 12px 12px 2px !important; gap: 2px 8px !important; }
  html.cz-scene body #contenu #screen-game .chanzons-shell-title {
    font-size: 15px !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.cz-scene body #contenu #screen-game .chanzons-shell-body > .chanzons-card.chanzons-mode-container { padding: 4px 14px 0 !important; }
  html.cz-scene body #contenu #screen-game .chanzons-shell-body > .chanzons-card.chanzons-mode-container + .chanzons-card {
    padding: 6px 14px 20px !important; border-radius: 0 0 20px 20px !important;
  }
  html.cz-scene body #contenu .chanzons-consigne-bar { margin: 10px 0 6px !important; font-size: 11px !important; letter-spacing: .1em !important; line-height: 1.35 !important; }
  
  html.cz-scene body #contenu .statement-box { padding: 0 0 14px !important; }
  html.cz-scene body #contenu .statement-text { font-size: 21px !important; line-height: 1.25 !important; text-wrap: wrap !important; hyphens: manual !important; }
  html.cz-scene body #contenu .choices-grid { gap: 8px !important; }
  html.cz-scene body #contenu .choice-btn { gap: 12px; min-height: 52px; padding: 10px 42px 10px 12px !important; font-size: 16px !important; line-height: 1.25 !important; }
  html.cz-scene body #contenu .choice-btn::before { width: 28px; height: 28px; font-size: 13px; }
  html.cz-scene body #contenu .chanzons-explanation { margin-top: 12px !important; padding: 12px 14px !important; }
  html.cz-scene body #contenu .chanzons-explanation .chanzons-expl-body { font-size: 15px !important; }

  
  html.cz-scene body #contenu #game-area .ql-grille { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  html.cz-scene body #contenu #game-area .ql-t { min-height: 46px !important; padding: 8px 10px !important; font-size: 15px !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; }
  
  html.cz-scene body #contenu #game-area .qt-col { min-height: 96px !important; padding: 8px !important; }
  
  html.cz-scene #overlay-result .res-actbtns { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  html.cz-scene #overlay-result .res-actbtns > * { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-emoji, .cz-emoji::before, html.cz-scene body #contenu .qs-play, html.cz-scene body #contenu .qs-play::before,
  html.cz-scene body #contenu .cz-entree .choice-btn, html.cz-scene body #contenu .cz-entree .statement-box, html.cz-scene body #contenu .choice-btn.correct, html.cz-scene body #contenu .choice-btn.wrong,
  html.cz-scene body #contenu #zen-ui .ga-dot.current, .cz-points.bump { animation: none !important; }
}


html.cz-scene body #contenu #game-area :is(
  .qi-c:not(.qi-fait):not(.qi-ecartee):not(.qi-grp),
  .qp-c:not(.qp-pale),
  .qd-c:not(.qd-fait):not(.qd-pale),
  .qv-b:not(.qv-choisi):not(.qv-fait):not(.qv-pale),
  .qk-i:not(.qk-sel),
  .qg-c:not(.qg-fait):not(.qg-ouverte),
  .qt-etiq:not(.qt-choisi):not(.qt-fait):not(.qt-fixe):not(.dragging),
  .qf-carte:not(.qf-fait):not(.qf-fixe):not(.dragging)
) {
  background: linear-gradient(180deg, #fff, var(--c-pale));
  border: 2px solid hsla(var(--c-hue, 338), 50%, 50%, .18);
  border-radius: 16px;
  box-shadow: 0 3px 0 hsla(var(--c-hue, 338), 50%, 50%, .14), 0 6px 16px hsla(var(--c-hue, 338), 60%, 40%, .07);
  color: var(--texte); font-weight: 800;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
@media (hover: hover) and (pointer: fine) {
  html.cz-scene body #contenu #game-area :is(
    .qi-c:not(.qi-fait):not(.qi-ecartee):not(.qi-grp), .qp-c:not(.qp-pale), .qd-c:not(.qd-fait):not(.qd-pale),
    .qv-b:not(.qv-choisi):not(.qv-fait):not(.qv-pale), .qk-i:not(.qk-sel), .qg-c:not(.qg-fait):not(.qg-ouverte),
    .qt-etiq:not(.qt-choisi):not(.qt-fait):not(.qt-fixe), .qf-carte:not(.qf-fait):not(.qf-fixe)
  ):hover {
    transform: translateY(-3px); border-color: var(--c1);
    box-shadow: 0 6px 0 hsla(var(--c-hue, 338), 60%, 45%, .25), 0 12px 26px hsla(var(--c-hue, 338), 70%, 45%, .18);
  }
}

html.cz-scene body #contenu #game-area .qv-b.qv-vrai:not(.qv-choisi):not(.qv-fait):not(.qv-pale) { border-color: rgba(15, 145, 166, .45); color: #0B6E7E; }
html.cz-scene body #contenu #game-area .qv-b.qv-faux:not(.qv-choisi):not(.qv-fait):not(.qv-pale) { border-color: rgba(194, 16, 108, .4); color: #9A0D56; }

html.cz-scene body #contenu #game-area :is(.qt-btn, .qp-btn, .qf-btn, .qg-annule) {
  border: 0; border-radius: 16px; color: #fff; padding: 13px 28px;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 24px hsla(var(--c-hue, 338), 80%, 45%, .3);
  font-weight: 900; transition: transform .15s;
}
html.cz-scene body #contenu #game-area :is(.qt-btn, .qp-btn, .qf-btn, .qg-annule):hover:not(:disabled) { transform: translateY(-2px); }
html.cz-scene body #contenu #game-area :is(.qt-btn, .qp-btn, .qf-btn, .qg-annule):disabled { opacity: .45; box-shadow: none; }

html.cz-scene body #contenu .cz-entree :is(.qi-c, .qp-c, .qd-c, .qv-b, .qk-i, .qg-c, .qt-etiq, .qf-carte) {
  animation: cz-rep-in .42s cubic-bezier(.34, 1.3, .64, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}
@media (prefers-reduced-motion: reduce) {
  html.cz-scene body #contenu .cz-entree :is(.qi-c, .qp-c, .qd-c, .qv-b, .qk-i, .qg-c, .qt-etiq, .qf-carte) { animation: none; }
}


html.cz-scene .ms-bc-pill[href$="index.html"], html.cz-scene .ms-bc-pill[href$="index.html"] + .ms-bc-sep { display: none !important; }