/* L'Atelier du Lutin Horloger — thème bois et laiton */
:root {
    --kc-bg: radial-gradient(circle at 50% 0%, #7a4a26 0%, #3b2414 60%, #1e120a 100%);
    --kc-ink: #fff7ea;
    --kc-muted: #f3dfc1;
    --kc-card: #4a2e1a;
    --kc-line: rgba(233, 196, 106, .4);
    --kc-accent: #e9c46a;
    --kc-accent-2: #c0392b;
    --kc-accent-ink: #3b2414;
    --kc-scene: #6b4423;
}

/* --- Engrenages --- */
.workshop { background: repeating-linear-gradient(90deg, #8b5a2b 0 60px, #7f5226 60px 120px); }
.gear-board { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.peg { fill: #c9a46a; stroke: #3b2414; stroke-width: 6; }
.peg-ghost { fill: rgba(255, 255, 255, .08); stroke: #fff; stroke-width: 5; stroke-dasharray: 16 12; }
.crank-rot { cursor: grab; }
.crank-grip { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .35); stroke-width: 4; stroke-dasharray: 14 12; cursor: grab; }
.box-label { font-size: 56px; fill: #fff7ea; font-weight: 700; }
.placed-gear { cursor: pointer; }
.bad .placed-gear path, .bad .peg { stroke: #ff3b30; stroke-width: 12; }
.bad { animation: kc-shake .45s ease; }
.singing { animation: kc-bounce .6s ease infinite; }
.gear-tray { align-items: center; }
.tray-gear svg { width: 100%; height: 100%; display: block; }

/* --- Défilé --- */
.parade-scene { background: linear-gradient(180deg, #5e1f2b 0%, #8b2d3b 40%, #3b2414 41%, #5a3818 100%); }
.curtain { position: absolute; inset: 0 0 auto 0; height: 14%; background: repeating-linear-gradient(90deg, #a5283b 0 30px, #c0392b 30px 60px); border-bottom: 6px solid #e9c46a; border-radius: 0 0 50% 50% / 0 0 40% 40%; }
.parade-stage { position: absolute; left: 3%; right: 3%; bottom: 8%; height: 62%; display: flex; align-items: flex-end; justify-content: center; gap: 1.5%; }
.p-slot { flex: 1 1 0; min-width: 0; max-width: 110px; aspect-ratio: 1; border-radius: 18px; border: 3px dashed rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .2); display: grid; place-items: center; position: relative; }
.p-slot[data-filled] { border-style: solid; border-color: rgba(233, 196, 106, .6); }
.p-slot.stair { max-width: 150px; aspect-ratio: auto; height: calc(30% + var(--step) * 22%); align-items: start; padding-top: 6px; background: linear-gradient(180deg, #c9a46a, #8b5a2b); border: 3px solid #3b2414; }
.p-slot.numbered::before { content: attr(data-n); position: absolute; top: -1.7rem; font-weight: 700; font-size: 1.3rem; color: #e9c46a; }
.toy { font-size: clamp(1.4rem, 5.5vw, 3rem); line-height: 1; }
@media (max-width: 640px) { .parade-scene { --kc-ar: 1.1; } .parade-stage { gap: 3px; left: 2%; right: 2%; } .p-slot { border-radius: 10px; border-width: 2px; } }
.toy.piece { padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.toy.in-slot { background: none; }
.stair .toy.in-slot { translate: 0 -85%; }
.marching .toy { animation: kc-bounce .6s ease infinite; }
.marching .p-slot:nth-child(2n) .toy { animation-delay: .3s; }
.clue-box { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: .8rem; }
.clue-card { display: flex; flex-direction: column; align-items: center; gap: .2rem; max-width: 210px; padding: .5rem .8rem; border-radius: 16px; background: #fffaf0; color: #3b2414; box-shadow: 0 5px 12px rgba(0, 0, 0, .3); cursor: pointer; border: 4px solid transparent; }
.clue-card.ok { border-color: #52b788; }
.clue-pic { font-size: 1.8rem; }
.clue-card small { font-size: .85rem; text-align: center; line-height: 1.25; }

/* --- Horloge --- */
.clock-scene { --kc-ar: 1.4; background: radial-gradient(circle at 50% 40%, #a8754a, #5a3818); display: flex; align-items: center; justify-content: center; gap: 4%; }
@media (max-width: 640px) { .clock-scene { --kc-ar: .85; flex-direction: column; } }
.clock-wrap { height: 86%; aspect-ratio: 1; }
@media (max-width: 640px) { .clock-wrap { height: auto; width: 82%; } }
.big-clock { width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.face { fill: #fffaf0; stroke: #3b2414; stroke-width: 6; }
.num { font-size: 20px; font-weight: 700; fill: #3b2414; font-family: 'Fredoka', sans-serif; }
.tick { stroke: #3b2414; stroke-width: 2; }
.hand { stroke-linecap: round; }
.hand.hour { stroke: #c0392b; stroke-width: 9; }
.hand.minute { stroke: #2a6f97; stroke-width: 6; }
.knob.hour-k { fill: #c0392b; }
.knob.min-k { fill: #2a6f97; }
.cuckoo-house { position: relative; font-size: 4.5rem; line-height: 1; }
.cuckoo-bird { position: absolute; left: 50%; top: 40%; font-size: 2.4rem; translate: -50% 0; opacity: 0; }
.cuckoo-house.pop .cuckoo-bird { animation: cuckoo 1.6s ease; }
@keyframes cuckoo { 20%, 70% { opacity: 1; translate: -50% -80%; scale: 1.3; } 100% { opacity: 0; translate: -50% 0; } }
.clock-target { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.clock-target .digital { font-size: 2.6rem; font-family: 'Courier New', monospace; background: #1e120a; color: #ffd166; letter-spacing: .1em; }
.clock-target .story { max-width: 620px; font-size: 1.1rem; line-height: 1.4; }
.mini-clock { width: 90px; height: 90px; display: inline-block; }
.small-clock { width: 100%; height: 100%; }
.small-clock .knob { display: none; }
.clock-round { font-weight: 700; opacity: .75; }

/* ---------- Niveaux 8-9 et 9-10 ans ---------- */
.gear-question { margin-top: .9rem; display: grid; gap: .6rem; text-align: center; }
.gear-question .kc-btn { min-width: 70px; font-size: 1.3rem; }
.clue-card.sort-rule { background: #fff3c4; }