/* GOONS - section /piano-for-kids/ : piano arc-en-ciel (goons-kids-piano.js), bulles des
   chansons, ballons, missions. Couleurs des notes : includes/piano-kids.php (KIDS_NOTES). */

.kids-page { --kids-round: 'Inter', 'Helvetica Neue', Arial, sans-serif; }
.kids-head h1 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.02em; margin-bottom: 6px; }
.kids-lead { max-width: 760px; margin: 4px 0 14px; color: var(--play-text); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; text-shadow: 0 1px 10px rgba(5, 5, 10, 0.9); }

/* ---------- scène ---------- */
.kids-stage {
    position: relative;
    margin-top: 6px;
    margin-bottom: 26px;
    padding: 16px;
    border: 1px solid var(--play-border);
    border-radius: 26px;
    background: rgba(8, 9, 20, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--play-shadow);
}
.kids-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.kids-bar--top { margin: 0 0 14px; }
.kids-hint { margin: 0; color: var(--play-muted); font-size: 14px; }

.kids-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    border: 1px solid var(--play-border-strong); border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); color: var(--play-text);
    font: 700 15px/1 var(--play-font); text-decoration: none; cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.kids-btn:hover { background: rgba(255, 255, 255, 0.12); }
.kids-btn:active { transform: scale(0.96); }
.kids-btn:disabled { opacity: 0.45; cursor: default; }
.kids-btn--big { min-height: 54px; padding: 0 24px; font-size: 18px; }
.kids-btn--go { border-color: transparent; background: linear-gradient(135deg, #ff2bd6, #ff8a3d 55%, #ffd23f); color: #12061a; box-shadow: 0 8px 26px rgba(255, 43, 214, 0.35); }
.kids-btn--go:hover { background: linear-gradient(135deg, #ff4fdf, #ff9a52 55%, #ffdc5c); }
.kids-btn.is-on { background: var(--play-cyan); color: #04121a; border-color: transparent; }
.kids-btn--rec.is-on { background: #ef2b2d; color: #fff; animation: kids-pulse 1s ease-in-out infinite; }
.kids-speed { display: inline-flex; align-items: center; gap: 6px; color: var(--play-muted); font-weight: 600; font-size: 14px; cursor: pointer; }
.kids-speed input { width: 18px; height: 18px; accent-color: var(--play-cyan); }

/* icônes CSS */
.kids-ico { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor; }
.kids-ico--play { clip-path: polygon(18% 8%, 92% 50%, 18% 92%); }
.kids-ico--rec { border-radius: 50%; background: #ef2b2d; }
.kids-btn--rec.is-on .kids-ico--rec { background: #fff; border-radius: 3px; }
.kids-ico--again { -webkit-mask: radial-gradient(circle at 50% 50%, transparent 38%, #000 40% 62%, transparent 64%); mask: radial-gradient(circle at 50% 50%, transparent 38%, #000 40% 62%, transparent 64%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 55%, 50% 50%, 0 40%); }
.kids-ico--hand { border-radius: 40% 40% 45% 45%; clip-path: polygon(20% 100%, 20% 30%, 30% 20%, 40% 30%, 40% 10%, 50% 0, 60% 10%, 60% 25%, 70% 18%, 80% 28%, 80% 70%, 70% 100%); }
.kids-ico--speak { clip-path: polygon(0 35%, 30% 35%, 60% 8%, 60% 92%, 30% 65%, 0 65%); }
.kids-ico--piano { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px); border-radius: 3px; }
.kids-ico--xylo { background: linear-gradient(90deg, #ef2b2d 0 20%, #fdc80a 20% 40%, #77c737 40% 60%, #07c2da 60% 80%, #ae68e6 80%); clip-path: polygon(0 10%, 20% 10%, 20% 90%, 0 90%, 0 10%, 20% 18%, 40% 18%, 40% 82%, 20% 82%, 20% 18%, 40% 25%, 60% 25%, 60% 75%, 40% 75%, 40% 25%, 60% 32%, 80% 32%, 80% 68%, 60% 68%, 60% 32%, 80% 38%, 100% 38%, 100% 62%, 80% 62%); }
.kids-ico--box { border-radius: 4px; background: linear-gradient(180deg, #ffd23f 0 35%, #c97a1f 35%); }

/* ---------- boutons de son et d'étiquettes ---------- */
.kids-tools { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; }
.kids-stage .kids-tools:last-child { margin: 14px 0 0; }
.kids-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.kids-chip {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 0 14px;
    border: 1px solid var(--play-border-strong); border-radius: 999px;
    background: rgba(255, 255, 255, 0.05); color: var(--play-text);
    font: 700 14px/1.1 var(--play-font); cursor: pointer;
}
.kids-chip img { width: 22px; height: 22px; border-radius: 50%; }
.kids-chip--small { min-height: 34px; padding: 0 12px; font-size: 13px; color: var(--play-muted); }
.kids-chip[aria-pressed="true"] { background: #fff; color: #10101a; border-color: #fff; }

/* ---------- piano ---------- */
.kp {
    --kp-h: clamp(170px, 34vw, 300px);
    position: relative;
    user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}
.kp-keys {
    --kp-pad: 10px;
    --kp-gap: clamp(3px, 0.5vw, 6px);
    position: relative;
    display: flex;
    gap: var(--kp-gap);
    height: var(--kp-h);
    padding: 10px var(--kp-pad) 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, #1a1530, #0b0a18);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 14px 40px rgba(0, 0, 0, 0.5);
}
.kp--pending .kp-keys { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 calc(100% / var(--kp-whites) - 6px), transparent 0 calc(100% / var(--kp-whites))), linear-gradient(180deg, #1a1530, #0b0a18); }
.kp-key { -webkit-tap-highlight-color: transparent; cursor: pointer; font-family: var(--play-font); }
.kp-white {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0 0 clamp(8px, 1.4vw, 16px);
    border: 0;
    border-radius: 10px 10px 18px 18px;
    background: var(--kc);
    background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 82%, #fff) 0%, var(--kc) 58%, color-mix(in srgb, var(--kc) 78%, #000) 100%);
    box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.3), 0 3px 0 rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 -7px 0 color-mix(in srgb, var(--kc) 60%, #000), 0 3px 0 rgba(0, 0, 0, 0.35);
    transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.1s ease;
}
.kp-white:focus-visible, .kp-black:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.kp-face { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.kp-ani { width: clamp(28px, 4.4vw, 54px); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
.kp-let, .kp-sol { display: none; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28); line-height: 1; }
.kp-white .kp-let, .kp-white .kp-sol { font-size: clamp(18px, 3vw, 34px); }
.kp--animals .kp-white .kp-let { display: block; font-size: clamp(13px, 1.7vw, 18px); }
.kp--letters .kp-let, .kp--solfege .kp-sol { display: block; }
.kp--letters .kp-ani, .kp--solfege .kp-ani, .kp--colors .kp-ani { display: none; }
.kp-black {
    position: absolute;
    top: 10px;
    height: 58%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 8px;
    border: 0;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #2b2840, #0d0c18 70%);
    box-shadow: inset 0 -5px 0 #000, inset 0 0 0 2px color-mix(in srgb, var(--kc) 45%, transparent), 0 4px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.06s ease, filter 0.1s ease;
}
.kp-black .kp-let, .kp-black .kp-sol { font-size: clamp(9px, 1.1vw, 12px); color: rgba(255, 255, 255, 0.8); }
.kp--letters .kp-black .kp-let, .kp--solfege .kp-black .kp-sol { display: block; }
.kp--animals .kp-black .kp-let { display: none; }

.kp-white.kp-on { transform: translateY(4px) scale(0.985); filter: brightness(1.22) saturate(1.1); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--kc) 60%, #000), 0 0 26px color-mix(in srgb, var(--kc) 80%, transparent); }
.kp-black.kp-on { transform: translateX(-50%) translateY(3px); filter: brightness(1.8); }
.kp-next { animation: kp-glow 0.9s ease-in-out infinite; z-index: 1; }
.kp-white.kp-next::before {
    content: '';
    position: absolute; left: 50%; top: -2px;
    width: 0; height: 0;
    border: 12px solid transparent; border-top-color: #fff;
    transform: translate(-50%, 0);
    animation: kp-bounce 0.7s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.kp-black.kp-next { box-shadow: 0 0 0 3px #fff, 0 0 22px #fff; animation: none; }
.kp-hint { filter: brightness(1.15); }
.kp-wrong { animation: kp-shake 0.4s ease; }
.kp-good { filter: brightness(1.4); }
.kp--locked .kp-keys { cursor: default; }
.kp--plain .kp-white { --kc: #f4f4fa !important; }
.kp--plain .kp-white .kp-let { color: #2a2a3a; text-shadow: none; }
.kp--plain .kp-ani { display: none; }
.kp--plain.kp--animals .kp-white .kp-let { display: block; font-size: clamp(18px, 3vw, 34px); }

@keyframes kp-glow { 0%, 100% { filter: brightness(1.05); } 50% { filter: brightness(1.45) drop-shadow(0 0 14px #fff); } }
@keyframes kp-bounce { 0%, 100% { transform: translate(-50%, -6px); } 50% { transform: translate(-50%, 4px); } }
@keyframes kp-shake { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 3px; } }
@keyframes kp-float { from { opacity: 1; transform: translate(-50%, 0) scale(0.8); } to { opacity: 0; transform: translate(-50%, -90px) scale(1.3) rotate(18deg); } }
@keyframes kids-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 43, 45, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(239, 43, 45, 0); } }

/* ---------- bulles de la chanson ---------- */
.kids-track {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 10px 6px;
    max-height: 214px; overflow-y: auto;
    margin: 0 0 14px; padding: 14px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    scroll-behavior: smooth;
}
.kb-br { flex-basis: 100%; height: 0; }
.kb { display: grid; grid-template-rows: 46px auto; justify-items: center; align-items: center; min-width: 38px; }
.kb-dot {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--kc);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22);
    color: #fff; font-size: 16px; font-weight: 900; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.kb--long .kb-dot { width: 62px; border-radius: 19px; }
.kb--short .kb-dot { width: 32px; height: 32px; font-size: 14px; }
.kb--black .kb-dot { box-shadow: inset 0 0 0 4px #14121f; }
.kb-sol { display: none; font-size: 12px; }
.kids-track.show-sol .kb-let { display: none; }
.kids-track.show-sol .kb-sol { display: block; }
.kb-syl { font-style: normal; font-weight: 700; font-size: 15px; color: var(--play-text); white-space: nowrap; }
.kb.is-done .kb-dot { opacity: 0.45; transform: scale(0.88); }
.kb.is-done .kb-syl { opacity: 0.55; }
.kb.is-now .kb-dot { transform: scale(1.28); box-shadow: 0 0 0 4px #fff, 0 0 22px var(--kc); }
.kb.is-now .kb-syl { color: #fff; text-decoration: underline 3px var(--kc); text-underline-offset: 4px; }

.kids-stage[data-kids="song"] .kp, .kids-stage--game .kp, .kids-stage[data-kids="lessons"] .kp { --kp-h: clamp(150px, 24vw, 236px); }

/* ---------- résultat ---------- */
.kids-result {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 20px;
    border-radius: 26px;
    background: rgba(8, 8, 20, 0.88);
    text-align: center;
}
.kids-result[hidden] { display: none; }
.kids-result-stars { display: flex; gap: 10px; }
.kids-result-stars i, .kids-stars i {
    display: block; width: 64px; height: 64px;
    background: rgba(255, 255, 255, 0.14);
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.kids-result-stars i.on { background: linear-gradient(180deg, #ffe066, #f9b204); animation: kids-star 0.5s cubic-bezier(.2, 1.6, .5, 1) both; }
.kids-result-stars i:nth-child(2).on { animation-delay: 0.15s; }
.kids-result-stars i:nth-child(3).on { animation-delay: 0.3s; }
.kids-result-text { margin: 0; font-size: clamp(20px, 3vw, 30px); font-weight: 900; }
.kids-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@keyframes kids-star { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

.kids-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; border-radius: 26px; }
.kids-confetti i { position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 2px; animation: kids-fall 1.8s ease-in forwards; }
@keyframes kids-fall { to { transform: translateY(520px) rotate(540deg); opacity: 0.2; } }

/* ---------- cartes ---------- */
.kids-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.kids-card {
    position: relative;
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--play-border); border-radius: 20px;
    background: var(--play-surface);
    color: var(--play-text); text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.kids-card:hover { transform: translateY(-3px); border-color: var(--play-border-strong); }
.kids-card-img { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0a18; }
.kids-card-img > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.kids-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.kids-card-body strong { font-size: 17px; line-height: 1.25; }
.kids-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--play-muted); font-size: 13px; font-weight: 600; }
.kids-card-n { white-space: nowrap; }
.kids-card-blurb { color: var(--play-muted); font-size: 14px; line-height: 1.45; }
.kids-dots { display: inline-flex; gap: 3px; }
.kids-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--kc); }
.kids-dots i.is-black { box-shadow: inset 0 0 0 2px #14121f; }
.kids-stars { display: inline-flex; gap: 2px; }
.kids-stars i { width: 18px; height: 18px; }
.kids-stars i.on { background: #f9b204; }
.kids-card-img .kids-stars { position: absolute; right: 8px; bottom: 8px; padding: 4px 6px; border-radius: 999px; background: rgba(5, 5, 10, 0.7); }
.kids-stars:not(.has) { display: none; }
.kids-card--game, .kids-card--lessons { flex-direction: row; align-items: center; gap: 4px; padding: 10px; }
.kids-card-sticker img { width: 72px; height: 72px; display: block; }
.kids-card--game .kids-card-body, .kids-card--lessons .kids-card-body { padding: 4px 6px; }
.kids-cards--games { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kids-card-stickers { display: grid; grid-template-columns: repeat(3, 32px); gap: 2px; flex: none; }
.kids-card-stickers img { width: 32px; height: 32px; }
.kids-more-link { margin: 14px 0 0; color: var(--play-muted); }
.kids-more-link a { color: var(--play-cyan); }

/* ---------- légende, textes ---------- */
.kids-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.kids-legend li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; background: color-mix(in srgb, var(--kc) 20%, transparent); border: 1px solid color-mix(in srgb, var(--kc) 45%, transparent); }
.kids-legend img { width: 40px; height: 40px; }
.kids-legend b { font-size: 22px; color: var(--kc); }
.kids-legend span { font-weight: 700; font-size: 14px; }
.kids-prose { max-width: 820px; color: var(--play-muted); line-height: 1.7; }
.kids-prose h2 { margin: 22px 0 8px; color: var(--play-text); font-size: 21px; }
.kids-prose a { color: var(--play-cyan); }
.kids-prose li { margin: 4px 0; }
.kids-prose strong { color: var(--play-text); }

/* ---------- jeux ---------- */
.kids-rules { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: r; }
.kids-rules li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.kids-rules img { width: 40px; height: 40px; }
.kids-levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.kids-levels .kids-chip { min-height: 48px; border-radius: 16px; text-align: left; }
.kids-levels .kids-chip b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.kids-levels .kids-chip[aria-pressed="true"] b { background: #10101a; color: #fff; }
.kids-levels small { display: block; font-weight: 500; font-size: 11px; opacity: 0.75; }
.kids-score { display: flex; justify-content: space-between; align-items: center; min-height: 30px; margin-bottom: 6px; font-weight: 800; font-size: 17px; }
.kids-hearts { letter-spacing: 3px; color: #ff4f6d; font-size: 20px; }
.kids-arena {
    position: relative;
    height: clamp(200px, 30vw, 300px);
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 20px;
    background: radial-gradient(ellipse at 50% 120%, rgba(0, 229, 255, 0.16), transparent 60%), linear-gradient(180deg, #0d1030, #12082a);
}
.kids-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
.kids-start:active { transform: translate(-50%, -50%) scale(0.96); }
.kids-balloon {
    position: absolute; bottom: -90px;
    width: clamp(46px, 6vw, 68px); aspect-ratio: 4 / 5;
    transform: translateX(-50%);
    pointer-events: none;
}
.kids-balloon b {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.65), transparent 22%), var(--kc);
    box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.18);
    color: #fff; font-weight: 900; font-size: clamp(18px, 2.6vw, 26px); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.kids-balloon b img { width: 62%; height: auto; border-radius: 50%; }
.kids-balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 34px; background: rgba(255, 255, 255, 0.5); }
.kids-balloon.is-letter b img { display: none; }
.kids-balloon.is-popped { animation: kids-pop 0.25s ease-out forwards; }
@keyframes kids-pop { to { transform: translateX(-50%) scale(1.7); opacity: 0; } }
.kids-floatnote { position: absolute; z-index: 2; font-size: 30px; font-weight: 900; color: #fff; pointer-events: none; animation: kp-float 0.9s ease-out forwards; }

.kids-answers { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 40px); }
.kids-answers[hidden] { display: none; }
.kids-answer {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 18px; border: 2px solid var(--play-border-strong); border-radius: 22px;
    background: rgba(255, 255, 255, 0.06); color: var(--play-text);
    font: 800 18px/1 var(--play-font); cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease;
}
.kids-answer img { width: clamp(70px, 11vw, 110px); height: auto; }
.kids-answer:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.kids-answer.is-right { background: rgba(119, 199, 55, 0.35); border-color: #77c737; }
.kids-answer.is-wrong { animation: kp-shake 0.4s ease; border-color: #ef2b2d; }
.kids-answer:disabled { cursor: default; }
.kids-again-btn { position: absolute; right: 12px; bottom: 12px; z-index: 3; }
.kids-again-btn[hidden] { display: none; }
.kids-bubble-msg { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 3; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #12121c; font-weight: 800; font-size: 17px; white-space: nowrap; }

/* ---------- missions ---------- */
.kids-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.kids-slot {
    position: relative;
    display: grid; place-items: center;
    width: 58px; height: 58px; padding: 0;
    border: 2px dashed var(--play-border-strong); border-radius: 50%;
    background: transparent; cursor: pointer;
}
.kids-slot img { width: 48px; height: 48px; filter: grayscale(1) brightness(0.45); opacity: 0.55; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; }
.kids-slot span { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #23213a; color: #fff; font-size: 11px; font-weight: 800; }
.kids-slot.is-done { border-style: solid; border-color: #f9b204; }
.kids-slot.is-done img { filter: none; opacity: 1; }
.kids-slot.is-current { border-color: #fff; }
.kids-slot.is-new img { animation: kids-star 0.6s cubic-bezier(.2, 1.6, .5, 1) both; }
.kids-mission { margin-bottom: 12px; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); }
.kids-mission-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.kids-mission-head h2 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); }
.kids-mission-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ff2bd6, #ffd23f); color: #12061a; font-weight: 900; }
.kids-say { margin-left: auto; min-height: 38px; }
.kids-say[hidden] { display: none; }
.kids-mission-say { margin: 10px 0 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.5; font-weight: 600; }
.kids-mission-status { min-height: 26px; margin: 8px 0 0; font-weight: 800; color: #9be26a; }
.kids-mission-hand { margin-top: 8px; }
.kids-mission-hand[hidden] { display: none; }
.kids-hand { width: 130px; height: auto; display: block; }

.kp--dense .kp-ani { display: none; }
.kp--dense.kp--animals .kp-white .kp-let { font-size: clamp(11px, 1.4vw, 16px); }

@media (max-width: 720px) {
    .kp--wide .kp-ani { display: none; }
    .kp--wide.kp--animals .kp-white .kp-let { font-size: 12px; }
    .kids-stage { padding: 10px; border-radius: 20px; }
    .kids-cards:not(.kids-cards--games) { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kids-card-body { padding: 10px 10px 12px; }
    .kids-card-body strong { font-size: 15px; }
    .kp { --kp-h: clamp(150px, 48vw, 230px); }
    .kp-keys { --kp-pad: 6px; padding: 6px var(--kp-pad) 10px; border-radius: 16px; }
    .kp-white { border-radius: 7px 7px 12px 12px; }
    .kids-btn--big { min-height: 48px; font-size: 16px; padding: 0 16px; }
    .kids-track { max-height: 220px; gap: 8px 4px; }
    .kb { min-width: 30px; grid-template-rows: 38px auto; }
    .kb-dot { width: 30px; height: 30px; font-size: 13px; }
    .kb--long .kb-dot { width: 46px; border-radius: 15px; }
    .kb--short .kb-dot { width: 26px; height: 26px; font-size: 12px; }
    .kb-syl { font-size: 13px; }
    .kids-result-stars i { width: 50px; height: 50px; }
    .kids-rules li { font-size: 14px; }
    .kids-say { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kp-next, .kp-white.kp-next::before, .kids-btn--rec.is-on, .kids-result-stars i.on { animation: none; }
    .kids-confetti, .kids-floatnote { display: none; }
}

/* ============================================================
   2e passe design : police arrondie, ruban arc-en-ciel, rayons,
   cartes, tête de chanson, jauge, encouragements
   ============================================================ */
.kids-page h1, .kids-page h2, .kids-page h3,
.kids-btn, .kids-chip, .kids-card-body strong, .kids-result-text, .kids-quick b,
.kb-dot, .kp-let, .kp-sol, .kids-level span, .kids-needed b, .kids-words, .kids-toast span, .kids-score {
    font-family: 'Fredoka', var(--play-font);
}
.kids-page h1 { font-weight: 700; letter-spacing: -0.01em; }
.kids-page .play-section-head h2 { font-weight: 700; }

/* ruban arc-en-ciel en haut de la scène */
.kids-stage { overflow: visible; }
.kids-stage::before {
    content: '';
    position: absolute; left: 22px; right: 22px; top: -1px; height: 5px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #ef2b2d, #fb7c03, #fdc80a, #77c737, #07c2da, #ae68e6, #fc5a86);
    opacity: 0.9;
}

/* raccourcis du hub */
.kids-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.kids-quick a, .kids-progress {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--play-border); border-radius: 18px;
    background: rgba(8, 9, 20, 0.72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--play-text); text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.kids-quick a:hover { transform: translateY(-2px) rotate(-0.6deg); border-color: var(--play-border-strong); }
.kids-quick img { width: 46px; height: 46px; flex: none; }
.kids-quick span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kids-quick b { font-size: 17px; font-weight: 600; }
.kids-quick small { color: var(--play-muted); font-size: 12.5px; line-height: 1.3; }
.kids-progress { border-color: rgba(249, 178, 4, 0.5); background: rgba(249, 178, 4, 0.12); }
.kids-progress[hidden] { display: none; }
.kids-progress b { font-size: 24px; color: #ffd23f; }

/* filtres et rayons */
.kids-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.kids-filters .kids-chip img { width: 22px; height: 22px; }
.kids-shelf { margin: 0 0 30px; }
.kids-shelf[hidden] { display: none; }
.kids-shelf-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.kids-shelf-head img { width: 44px; height: 44px; flex: none; }
.kids-shelf-head h3 { margin: 0; font-size: 22px; font-weight: 600; }
.kids-shelf-head h3 small { margin-left: 6px; color: var(--play-faint); font-size: 14px; font-weight: 500; }
.kids-shelf-head p { margin: 2px 0 0; color: var(--play-muted); font-size: 14px; }
.kids-shelf-all { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--play-border-strong); color: var(--play-text); font-weight: 700; font-size: 14px; text-decoration: none; }
.kids-shelf-all:hover { background: rgba(255, 255, 255, 0.08); }
.kids-shelfpage { margin-bottom: 30px; }

/* cartes : niveau, animal de la première note, étiquette */
.kids-card { border-radius: 22px; }
.kids-card:hover { transform: translateY(-4px) rotate(-0.4deg); }
.kids-card:hover .kids-card-ani { transform: rotate(-8deg) scale(1.08); }
.kids-card-img { overflow: visible; }
.kids-card-img > img:first-child { border-radius: 21px 21px 0 0; }
.kids-card-ani {
    position: absolute; left: 12px; bottom: -22px;
    width: 52px; height: 52px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}
.kids-card-body { padding-top: 26px; }
.kids-tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--play-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.kids-level {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    background: rgba(5, 5, 10, 0.72); color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1;
}
.kids-card-img .kids-level { position: absolute; left: 8px; top: 8px; }
.kids-level i { width: 5px; height: 12px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
.kids-level i:nth-child(1) { height: 7px; }
.kids-level i:nth-child(2) { height: 10px; }
.kids-level span { margin-left: 5px; }
.kids-level--1 i:nth-child(1) { background: #77c737; }
.kids-level--2 i:nth-child(-n+2) { background: #fdc80a; }
.kids-level--3 i { background: #fb7c03; }
.sheet-facts .kids-level { background: rgba(255, 255, 255, 0.1); }

/* tête de chanson : illustration, notes à connaître */
.kids-head--song { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 360px); gap: 22px; align-items: center; padding-top: 6px; margin-bottom: 14px; }
.kids-head--song h1 { margin-bottom: 6px; font-size: clamp(30px, 4.6vw, 52px); text-shadow: 0 2px 18px rgba(5, 5, 10, 0.85); }
.kids-head--song .sheet-facts { align-items: center; }
.kids-art { position: relative; margin: 0; padding: 8px; border-radius: 26px; background: #fff; transform: rotate(2deg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
.kids-art img { display: block; width: 100%; height: auto; border-radius: 19px; }
.kids-art .kids-stars { position: absolute; right: 16px; bottom: 16px; padding: 4px 6px; border-radius: 999px; background: rgba(5, 5, 10, 0.72); }
.kids-needed-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 4px; }
.kids-needed-label { color: var(--play-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.kids-needed { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kids-needed li { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--kc) 30%, rgba(8, 9, 20, 0.8)); border: 1px solid color-mix(in srgb, var(--kc) 60%, transparent); }
.kids-needed li.is-black { background: #14121f; }
.kids-needed img { width: 30px; height: 30px; }
.kids-needed b { font-size: 16px; font-weight: 600; }

/* jauge et encouragements */
.kids-meter { height: 8px; margin: 0 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.kids-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ef2b2d, #fb7c03, #fdc80a, #77c737, #07c2da, #ae68e6, #fc5a86); background-size: 900px 100%; transition: width 0.25s ease; }
.kids-toast {
    position: absolute; left: 50%; top: 120px; z-index: 4;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 18px 8px 8px; border-radius: 999px;
    background: #fff; color: #14121f; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
    pointer-events: none;
}
.kids-toast[hidden] { display: none; }
.kids-toast span { font-size: 22px; font-weight: 700; }
.kids-toast.is-on { animation: kids-toast 1.1s ease forwards; }
@keyframes kids-toast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }

/* paroles en lignes */
.kids-words { max-width: 720px; padding: 18px 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--play-border); }
.kids-words p { margin: 0 0 6px; font-size: clamp(17px, 2vw, 21px); font-weight: 500; line-height: 1.5; color: var(--play-text); }

@media (max-width: 860px) {
    .kids-head--song { grid-template-columns: 1fr; }
    .kids-art { max-width: 360px; transform: rotate(1.5deg); order: -1; margin: 0 auto 4px; }
}
@media (max-width: 720px) {
    .kids-quick { grid-template-columns: 1fr 1fr; }
    .kids-quick a, .kids-progress { padding: 8px 10px; gap: 8px; }
    .kids-quick img { width: 38px; height: 38px; }
    .kids-quick b { font-size: 15px; }
    .kids-shelf-head p { display: none; }
    .kids-shelf-head h3 { font-size: 19px; }
    .kids-card-ani { width: 40px; height: 40px; bottom: -16px; left: 8px; }
    .kids-card-body { padding-top: 20px; }
    .kids-card-img .kids-level span { display: none; }
    .kids-tag { display: none; }
    .kids-toast { top: 90px; }
    .kids-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kids-toast.is-on { animation: none; }
    .kids-card:hover, .kids-quick a:hover { transform: none; }
}

/* ---------- Note Rain ---------- */
.kids-rain-line { position: absolute; left: 0; right: 0; bottom: 18px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 14px rgba(0, 229, 255, 0.7); pointer-events: none; }
.kids-drop {
    position: absolute; top: 0; z-index: 2;
    width: clamp(34px, 4.6vw, 54px); aspect-ratio: 1;
    display: grid; place-items: center;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.7), transparent 24%), var(--kc);
    box-shadow: inset -4px -6px 0 rgba(0, 0, 0, 0.18), 0 0 12px var(--kc);
    pointer-events: none; will-change: transform;
}
.kids-drop img { width: 64%; height: auto; border-radius: 50%; }
.kids-drop.is-hit { animation: kids-drop-hit 0.35s ease-out forwards; }
@keyframes kids-drop-hit { to { scale: 1.8; opacity: 0; } }
.kids-drop.is-missed { opacity: 0.3; filter: grayscale(1); }
.kids-floatnote--word { font-size: 20px; transform: translateX(-50%); white-space: nowrap; }

/* ---------- Color Composer ---------- */
.kids-stage--game[data-kids="color-composer"] .kids-arena { height: auto; padding: 12px; }
.kids-compose-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.kids-compose-bar .kids-btn.is-on { box-shadow: 0 0 0 3px #fff inset; }
.kids-tempo { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-weight: 800; color: var(--play-text-muted, #b9b6d3); }
.kids-tempo input { width: 120px; accent-color: #fdc80a; }
.kids-grid { display: grid; grid-template-columns: repeat(var(--steps, 8), minmax(0, 1fr)); gap: clamp(3px, 0.6vw, 6px); }
.kids-cell {
    aspect-ratio: 1; min-height: 22px; max-height: 64px; padding: 0; border: 0; border-radius: 10px;
    display: grid; place-items: center; cursor: pointer;
    background: color-mix(in srgb, var(--kc) 16%, rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kc) 45%, transparent);
    transition: transform 0.1s ease, background 0.12s ease;
}
.kids-cell.is-beat { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kc) 70%, transparent); }
.kids-cell img, .kids-cell span { opacity: 0; transform: scale(0.6); transition: opacity 0.12s, transform 0.12s; }
.kids-cell img { width: 70%; height: auto; border-radius: 50%; }
.kids-cell span { font-size: clamp(14px, 2vw, 22px); color: #2a2340; font-weight: 900; }
.kids-cell[aria-pressed="true"] { background: var(--kc); box-shadow: inset -3px -4px 0 rgba(0, 0, 0, 0.18); }
.kids-cell[aria-pressed="true"] img, .kids-cell[aria-pressed="true"] span { opacity: 1; transform: none; }
.kids-cell.is-now { transform: translateY(-3px); outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 1px; }
.kids-cell:focus-visible { outline: 3px solid #fff; }

/* ---------- Guess the Instrument ---------- */
.kids-answers--cards { flex-wrap: wrap; gap: clamp(8px, 2vw, 18px); padding: 10px 12px 54px; align-content: center; }
.kids-answer--card { width: clamp(108px, 18vw, 150px); padding: 10px 8px; font-size: 16px; }
.kids-answer-ico { display: block; width: clamp(56px, 9vw, 84px); aspect-ratio: 1; }
.kids-answer-ico svg { width: 100%; height: 100%; }
.kids-stage--game[data-kids="guess-the-instrument"] .kids-arena { height: clamp(250px, 32vw, 320px); }
@media (max-width: 600px) {
    .kids-answer--card { width: calc(50% - 16px); }
    .kids-stage--game[data-kids="guess-the-instrument"] .kids-arena { height: 380px; }
    .kids-tempo { margin-left: 0; }
    /* 16 pas : la grille défile plutôt que des cases trop petites pour un doigt */
    .kids-grid { grid-template-columns: repeat(var(--steps, 8), 34px); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
    .kids-cell { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .kids-drop.is-hit { animation: none; opacity: 0; } }

/* ============================================================
   3e passe : micro-animations. Chaque appui répond (la touche
   rebondit, l'animal saute, une note s'envole), la touche
   suivante appelle, les bulles éclatent, la jauge avance avec
   son étoile, le résultat s'ouvre sur des rayons. Tout s'arrête
   avec prefers-reduced-motion (bloc à la fin).
   ============================================================ */

/* ---------- touches : appui sec, retour à ressort ---------- */
.kp-white { transition: transform 0.42s cubic-bezier(.28, 1.9, .5, 1), box-shadow 0.2s ease, filter 0.2s ease; }
.kp-black { transition: transform 0.36s cubic-bezier(.28, 1.9, .5, 1), filter 0.2s ease, box-shadow 0.2s ease; }
.kp-white.kp-on, .kp-black.kp-on { transition-duration: 0.05s; }
.kp-white.kp-on { z-index: 1; }
.kp-face { transform-origin: 50% 100%; }

/* la touche suivante appelle : anneau qui pulse, animal qui fait coucou */
.kp-white.kp-next::after {
    content: '';
    position: absolute; inset: -5px;
    border: 3px solid #fff; border-radius: 14px 14px 22px 22px;
    pointer-events: none;
    animation: kp-ring 1.1s ease-out infinite;
}
.kp-white.kp-next .kp-face { animation: kp-call 1.1s ease-in-out infinite; }
.kp-black.kp-next { animation: kp-black-call 1s ease-in-out infinite; }

/* appui : l'animal (ou la lettre) saute */
.kp-white.kp-on .kp-face, .kp-black.kp-on .kp-let, .kp-black.kp-on .kp-sol { animation: kp-hop 0.42s cubic-bezier(.3, 1.4, .5, 1); }
/* fausse note : la touche pâlit, l'animal a la tête qui tourne */
.kp-white.kp-wrong { filter: saturate(0.55) brightness(0.85); }
.kp-key.kp-wrong .kp-face { animation: kp-dizzy 0.45s ease; }

/* effet d'appui (goons-kids-piano.js, burst) */
.kp-fx { position: absolute; left: 50%; bottom: clamp(34px, 5.6vw, 70px); width: 0; height: 0; pointer-events: none; z-index: 3; }
.kp-black .kp-fx { bottom: 22px; }
.kp-fx b {
    position: absolute; left: 0; top: 0;
    color: #fff; font: 900 clamp(26px, 3.4vw, 40px)/1 var(--play-font);
    text-shadow: 0 0 12px var(--kc), 0 2px 0 rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: kp-fly 0.95s cubic-bezier(.2, .7, .3, 1) forwards;
}
.kp-fx s {
    position: absolute; left: 0; top: 0;
    width: clamp(44px, 6vw, 72px); aspect-ratio: 1;
    border: 3px solid color-mix(in srgb, var(--kc) 35%, #fff); border-radius: 50%;
    opacity: 0;
    animation: kp-ripple 0.5s ease-out forwards;
}
.kp-fx i {
    position: absolute; left: -4px; top: -4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 8px var(--kc);
    opacity: 0;
    animation: kp-spark 0.55s ease-out forwards;
}
.kp-fx i:nth-of-type(even) { left: -3px; top: -3px; width: 6px; height: 6px; background: color-mix(in srgb, var(--kc) 50%, #fff); }
.kp-black .kp-fx s { width: 34px; }

@keyframes kp-hop {
    0% { transform: translateY(0) scale(1, 1); }
    18% { transform: translateY(2px) scale(1.14, 0.84); }
    45% { transform: translateY(-16px) scale(0.92, 1.1) rotate(-6deg); }
    72% { transform: translateY(0) scale(1.07, 0.93); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes kp-call {
    0%, 55%, 100% { transform: rotate(0) translateY(0); }
    15% { transform: rotate(-9deg) translateY(-4px); }
    32% { transform: rotate(8deg) translateY(-4px); }
}
@keyframes kp-ring { 0% { opacity: 0.95; transform: scale(0.97); } 100% { opacity: 0; transform: scale(1.07, 1.03); } }
@keyframes kp-black-call {
    0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 18px #fff; }
    50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.55), 0 0 32px #fff; }
}
@keyframes kp-dizzy { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 50% { transform: rotate(13deg); } 75% { transform: rotate(-6deg); } }
@keyframes kp-fly {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    14% { opacity: 1; transform: translate(-50%, -120%) scale(1.2) rotate(var(--tilt)); }
    55% { opacity: 1; transform: translate(calc(-50% + var(--dx)), -270%) scale(1) rotate(calc(var(--tilt) * -1)); }
    100% { opacity: 0; transform: translate(calc(-50% - var(--dx)), -430%) scale(0.85) rotate(var(--tilt)); }
}
@keyframes kp-ripple { 0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.45); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
@keyframes kp-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-10px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-48px) scale(0.3); } }

/* ---------- bulles de la chanson ---------- */
.kb-dot { position: relative; }
.kb.is-now .kb-dot { animation: kb-bob 0.9s ease-in-out infinite; }
.kb.is-now .kb-syl { animation: kb-syl 0.35s cubic-bezier(.2, 1.6, .5, 1); }
.kb.is-done .kb-dot { animation: kb-pop 0.4s cubic-bezier(.2, 1.5, .5, 1); }
.kb.is-done .kb-dot::after {
    content: '';
    position: absolute; inset: -5px;
    border: 3px solid var(--kc); border-radius: inherit;
    opacity: 0; pointer-events: none;
    animation: kb-ring 0.45s ease-out;
}
@keyframes kb-bob { 0%, 100% { transform: scale(1.28) translateY(0); } 50% { transform: scale(1.28) translateY(-4px); } }
@keyframes kb-syl { from { transform: translateY(-7px) scale(1.15); } to { transform: none; } }
@keyframes kb-pop { 0% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(0.88); opacity: 0.45; } }
@keyframes kb-ring { 0% { opacity: 1; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.7); } }

/* ---------- jauge : reflet qui court, étoile en tête ---------- */
.kids-meter { position: relative; height: 10px; overflow: visible; }
.kids-meter i { position: relative; }
.kids-meter i::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.6) 45%, transparent 60%) 0 0 / 300% 100% no-repeat;
    opacity: 0;
}
.kids-meter i::after {
    content: '';
    position: absolute; right: -12px; top: 50%;
    width: 24px; height: 24px; margin-top: -12px;
    background: linear-gradient(180deg, #ffe066, #f9b204);
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: 0; transform: scale(0);
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(.2, 1.6, .5, 1);
}
.kids-meter.is-going i::before { opacity: 1; animation: kids-shine 1.6s linear infinite; }
.kids-meter.is-going i::after { opacity: 1; transform: scale(1); animation: kids-spin 2.4s linear infinite; }
@keyframes kids-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes kids-spin { to { rotate: 360deg; } }

/* ---------- bravo de fin de ligne ---------- */
.kids-toast.is-on img { animation: kids-toast-star 0.6s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes kids-toast-star { from { transform: rotate(-200deg) scale(0); } to { transform: none; } }

/* ---------- résultat : rayons qui tournent, étoiles qui atterrissent ---------- */
.kids-result { overflow: hidden; isolation: isolate; animation: kids-in 0.25s ease-out; }
.kids-result::before {
    content: '';
    position: absolute; left: 50%; top: 40%; z-index: -1;
    width: max(140%, 640px); aspect-ratio: 1;
    translate: -50% -50%;
    background: repeating-conic-gradient(rgba(255, 210, 63, 0.17) 0 9deg, transparent 9deg 18deg);
    -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 72%);
    mask: radial-gradient(closest-side, #000 15%, transparent 72%);
    animation: kids-spin 18s linear infinite;
    pointer-events: none;
}
.kids-result-stars { align-items: flex-end; }
.kids-result-stars i:nth-child(2) { width: 82px; height: 82px; margin-bottom: 14px; }
.kids-result-stars i.on { animation: kids-star-land 0.6s cubic-bezier(.2, 1.6, .5, 1) both; }
.kids-result-text { animation: kids-rise 0.45s 0.4s cubic-bezier(.2, 1.4, .5, 1) both; }
.kids-result-actions { animation: kids-rise 0.45s 0.55s cubic-bezier(.2, 1.4, .5, 1) both; }
@keyframes kids-in { from { opacity: 0; } }
@keyframes kids-rise { from { opacity: 0; transform: translateY(14px) scale(0.9); } }
@keyframes kids-star-land {
    0% { transform: scale(0) rotate(-120deg); }
    60% { transform: scale(1.25) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}

/* confettis : ronds, rubans et étoiles qui volettent */
.kids-confetti i { animation-name: kids-flutter; animation-timing-function: cubic-bezier(.3, .1, .6, 1); }
.kids-confetti i:nth-child(3n) { width: 9px; height: 9px; border-radius: 50%; }
.kids-confetti i:nth-child(4n) { width: 6px; height: 20px; }
.kids-confetti i:nth-child(5n) { width: 15px; height: 15px; border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes kids-flutter {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    25% { transform: translate(var(--sx, 20px), 160px) rotate(150deg); }
    50% { transform: translate(calc(var(--sx, 20px) * -0.6), 330px) rotate(300deg); }
    75% { transform: translate(var(--sx, 20px), 500px) rotate(450deg); opacity: 1; }
    100% { transform: translate(0, 680px) rotate(600deg); opacity: 0; }
}

/* ---------- boutons : petit écrasement, retour à ressort ---------- */
.kids-btn { transition: transform 0.35s cubic-bezier(.3, 1.8, .5, 1), background 0.15s ease, box-shadow 0.15s ease; }
.kids-btn:not(.kids-start):active { transform: scale(0.92); transition-duration: 0.06s; }
.kids-btn--go { overflow: hidden; }
.kids-btn--go:not(.kids-start) { position: relative; }
.kids-btn--go::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: kids-gleam 3.8s ease-in-out 1.2s infinite;
}
.kids-btn--go.is-on::after { display: none; }
.kids-chip { transition: transform 0.3s cubic-bezier(.3, 1.8, .5, 1), background 0.15s ease; }
.kids-chip:active { transform: scale(0.92); transition-duration: 0.06s; }
.kids-chip[aria-pressed="true"] { animation: kids-chip-pop 0.32s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes kids-gleam { 0%, 68% { left: -60%; } 100% { left: 130%; } }
@keyframes kids-chip-pop { from { transform: scale(0.84); } to { transform: none; } }

/* ---------- cartes : les notes dansent, l'animal saute ---------- */
.kids-card-img > img:first-child { transform-origin: 50% 100%; transition: transform 0.5s cubic-bezier(.2, .8, .2, 1); }
.kids-card:hover .kids-card-img > img:first-child { transform: scale(1.05); }
.kids-card:hover .kids-card-ani { animation: kp-hop 0.5s cubic-bezier(.3, 1.4, .5, 1); }
.kids-card:hover .kids-dots i { animation: kids-dot-hop 0.45s cubic-bezier(.3, 1.6, .5, 1) both; }
.kids-card:hover .kids-dots i:nth-child(2) { animation-delay: 0.06s; }
.kids-card:hover .kids-dots i:nth-child(3) { animation-delay: 0.12s; }
.kids-card:hover .kids-dots i:nth-child(4) { animation-delay: 0.18s; }
.kids-card:hover .kids-dots i:nth-child(5) { animation-delay: 0.24s; }
.kids-card:hover .kids-dots i:nth-child(6) { animation-delay: 0.3s; }
.kids-card:hover .kids-dots i:nth-child(7) { animation-delay: 0.36s; }
.kids-card:hover .kids-dots i:nth-child(8) { animation-delay: 0.42s; }
.kids-quick a:hover img, .kids-shelf-head:hover img { animation: kids-wiggle 0.5s ease; }
.kids-art { transition: transform 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.kids-art:hover { transform: rotate(-1deg) scale(1.02); }
@keyframes kids-dot-hop { 50% { transform: translateY(-6px) scale(1.3); } }
@keyframes kids-wiggle { 25% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(8deg) scale(1.08); } }

/* ---------- jeux ---------- */
.kids-balloon b { transform-origin: 50% 130%; animation: kids-sway 1.9s ease-in-out infinite alternate; }
.kids-balloon:nth-child(2n) b { animation-duration: 2.3s; animation-direction: alternate-reverse; }
.kids-balloon:nth-child(3n) b { animation-duration: 1.6s; }
.kids-balloon::before {
    content: '';
    position: absolute; left: 50%; top: 45%;
    width: 200%; aspect-ratio: 1;
    translate: -50% -50%; scale: 0.3;
    background: repeating-conic-gradient(var(--kc) 0 7deg, transparent 7deg 36deg);
    -webkit-mask: radial-gradient(closest-side, transparent 42%, #000 46% 70%, transparent 74%);
    mask: radial-gradient(closest-side, transparent 42%, #000 46% 70%, transparent 74%);
    opacity: 0; pointer-events: none;
}
/* l'élément garde sa montée (Web Animations) : on fait éclater le ballon et ses rayons */
.kids-balloon.is-popped { animation: kids-pop-fade 0.26s ease-out forwards; }
.kids-balloon.is-popped b { animation: kids-pop-b 0.2s ease-out forwards; }
.kids-balloon.is-popped::before { animation: kids-pop-rays 0.26s ease-out forwards; }
.kids-balloon.is-popped::after { opacity: 0; }
@keyframes kids-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes kids-pop-fade { 60% { opacity: 1; } to { opacity: 0; } }
@keyframes kids-pop-b { to { transform: scale(1.6); opacity: 0; } }
@keyframes kids-pop-rays { 0% { opacity: 1; scale: 0.4; } 100% { opacity: 0; scale: 1.2; } }

.kids-answer { transition: transform 0.3s cubic-bezier(.3, 1.8, .5, 1), background 0.15s ease; }
.kids-answer.is-right { animation: kids-yay 0.5s cubic-bezier(.2, 1.6, .5, 1); }
.kids-bubble-msg { animation: kids-msg 0.35s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes kids-yay { 40% { transform: scale(1.12) rotate(-3deg); } }
@keyframes kids-msg { from { opacity: 0; transform: translate(-50%, 8px) scale(0.8); } }

.kids-cell img, .kids-cell span { transition: opacity 0.12s ease, transform 0.3s cubic-bezier(.3, 1.8, .5, 1); }
.kids-cell.is-now[aria-pressed="true"] img, .kids-cell.is-now[aria-pressed="true"] span { animation: kp-hop 0.35s cubic-bezier(.3, 1.4, .5, 1); }

/* ---------- missions ---------- */
.kids-slot { transition: transform 0.3s cubic-bezier(.3, 1.8, .5, 1); }
.kids-slot:hover { transform: scale(1.08); }
.kids-slot.is-current { border-color: transparent; }
.kids-slot.is-current::before {
    content: '';
    position: absolute; inset: -2px;
    border: 2px dashed #fff; border-radius: 50%;
    animation: kids-spin 8s linear infinite;
}
.kids-slot.is-done.is-current::before { border: 2px solid #f9b204; animation: none; }
.kids-mission.is-swap { animation: kids-swap 0.4s cubic-bezier(.2, 1.3, .5, 1); }
.kids-mission.is-swap .kids-mission-num { animation: kids-chip-pop 0.45s 0.1s cubic-bezier(.2, 1.6, .5, 1) both; }
.kids-mission-status.is-pop { animation: kids-rise 0.45s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes kids-swap { from { opacity: 0; transform: translateX(18px) scale(0.98); } }

@media (max-width: 720px) {
    .kids-result-stars i:nth-child(2) { width: 64px; height: 64px; margin-bottom: 10px; }
    .kp-fx i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .kp-fx { display: none; }
    .kp-white, .kp-black, .kids-btn, .kids-chip, .kids-answer, .kids-slot, .kids-art,
    .kids-card-img > img:first-child, .kids-cell img, .kids-cell span { transition-duration: 0.01ms; }
    .kp-white.kp-next::after { animation: none; opacity: 1; }
    .kp-white.kp-next .kp-face, .kp-black.kp-next,
    .kp-white.kp-on .kp-face, .kp-black.kp-on .kp-let, .kp-black.kp-on .kp-sol, .kp-key.kp-wrong .kp-face,
    .kb.is-now .kb-dot, .kb.is-now .kb-syl, .kb.is-done .kb-dot, .kb.is-done .kb-dot::after,
    .kids-meter.is-going i::before, .kids-meter.is-going i::after, .kids-toast.is-on img,
    .kids-result, .kids-result::before, .kids-result-stars i.on, .kids-result-text, .kids-result-actions,
    .kids-btn--go::after, .kids-chip[aria-pressed="true"],
    .kids-card:hover .kids-card-ani, .kids-card:hover .kids-dots i, .kids-quick a:hover img, .kids-shelf-head:hover img,
    .kids-balloon b, .kids-balloon.is-popped::before, .kids-answer.is-right, .kids-bubble-msg,
    .kids-cell.is-now[aria-pressed="true"] img, .kids-cell.is-now[aria-pressed="true"] span,
    .kids-slot.is-current::before, .kids-mission.is-swap, .kids-mission.is-swap .kids-mission-num, .kids-mission-status.is-pop { animation: none; }
    .kb.is-now .kb-dot { transform: scale(1.28); }
    .kids-btn--go::after { display: none; }
    .kids-card:hover .kids-card-img > img:first-child, .kids-art:hover, .kids-slot:hover { transform: none; }
    .kp-black.kp-next { box-shadow: 0 0 0 3px #fff, 0 0 22px #fff; }
}

/* vague d'accueil (goons-kids-piano.js, wave) : les touches s'allument et les animaux sautent en cascade */
.kp--wave .kp-white { animation: kp-wave-glow 0.5s calc(var(--i, 0) * 55ms) ease-out both; }
.kp--wave .kp-white .kp-face { animation: kp-hop 0.5s calc(var(--i, 0) * 55ms) cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes kp-wave-glow { 40% { filter: brightness(1.35) saturate(1.15); transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .kp--wave .kp-white, .kp--wave .kp-white .kp-face { animation: none; } }

/* Repère d'octave (pages chanson) : quand une touche revient deux fois sur le clavier
   (Frère Jacques : deux G et deux A de la même couleur), la plus grave porte ▼ et la
   plus aiguë ▲, sur la touche ET sur la bulle de la partition. Visible dans tous les
   modes d'étiquettes, « Colors only » compris. Règle : kids_octave_mark() / octaveMark(). */
.kp-oct, .kb-oct {
    display: block; flex: none; position: relative;
    border-radius: 50%; background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
.kp-oct::before, .kb-oct::before {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 52%; height: 44%; background: #1d1b2b;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.kp-oct--low::before, .kb-oct--low::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.kp-oct { width: clamp(16px, 2.2vw, 24px); height: clamp(16px, 2.2vw, 24px); }
.kp-oct--high { order: -1; }                        /* ▲ en haut de la touche, ▼ en bas */
.kp-black .kp-oct { width: 14px; height: 14px; margin: 4px auto 0; }
.kb-dot .kb-oct { position: absolute; right: -6px; width: 17px; height: 17px; }
.kb-dot .kb-oct--high { top: -7px; }
.kb-dot .kb-oct--low { bottom: -7px; }
.kids-oct-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    margin: -4px 0 14px; font-size: 14px; font-weight: 700; color: var(--play-text); opacity: 0.8;
}
.kids-oct-legend span { display: inline-flex; align-items: center; gap: 7px; }
.kids-oct-legend .kb-oct { width: 18px; height: 18px; }
@media (max-width: 640px) {
    .kb-dot .kb-oct { width: 14px; height: 14px; right: -5px; }
    .kb-dot .kb-oct--high { top: -6px; }
    .kb-dot .kb-oct--low { bottom: -6px; }
}