/* Lumiko : styles propres à chaque activité */
/* ---------- Jeu « Couleurs et formes » ---------- */
.game { gap: 6px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.topbar-end { display: flex; gap: 12px; }
.top-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.level-chip { font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); }
.progress { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.progress i { width: 14px; height: 14px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); transition: background .3s, transform .3s; }
.progress i.done { background: var(--leaf); box-shadow: none; transform: scale(1.15); }
/* Plus de six étapes : points plus petits pour rester sur une ligne */
.progress:has(i:nth-child(7)) { gap: 5px; }
.progress:has(i:nth-child(7)) i { width: 10px; height: 10px; }

.baskets { flex: none; display: flex; justify-content: space-evenly; gap: 12px; padding-top: 10px; }
.basket { position: relative; border: 0; background: none; padding: 0; width: var(--basket-w); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .25s; touch-action: manipulation; }
.basket-art { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.basket-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.basket-art .front { z-index: 2; }
.basket-in { position: absolute; z-index: 1; left: 16%; right: 16%; top: 0; height: 40%; display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.basket-word { font-family: var(--font-display); font-weight: 600; font-size: calc(1rem * var(--scale)); color: var(--c); }
.basket.over { transform: scale(1.08); }
.basket.hint .basket-art { animation: hint 0.9s ease-in-out 2; }
@keyframes hint { 50% { transform: translateY(-8px); filter: drop-shadow(0 0 12px var(--sun)); } }
.mini { display: block; width: calc(var(--basket-w) * .26); height: calc(var(--basket-w) * .26); transform: translateY(45%); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.basket-in .mini + .mini { margin-left: -8%; }
@keyframes pop { from { transform: translateY(45%) scale(0); } }

.guide { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding-block: 8px; }
.guide .lumi-wrap { width: calc(64px * var(--scale)); height: calc(104px * var(--scale)); }
.bubble {
  position: relative;
  margin: 0;
  max-width: 30ch;
  padding: 12px 18px;
  background: var(--card);
  border-radius: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(1.15rem * var(--scale));
  line-height: 1.3;
  box-shadow: 0 4px 0 var(--line);
}
.bubble::before { content: ""; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; background: var(--card); transform: translateY(-50%) rotate(45deg); border-radius: 3px; }
.bubble em { font-style: normal; font-weight: 700; color: var(--accent, var(--ink)); }

.play { flex: 1 0 auto; min-height: calc(var(--shape-size) + 48px); display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: center; align-items: center; row-gap: 4px; }
.slot { width: calc(var(--shape-size) * 1.22); height: calc(var(--shape-size) * 1.22); display: grid; place-items: center; }
.shape {
  position: relative;
  width: var(--shape-size);
  height: var(--shape-size);
  border: 0;
  padding: 0;
  background: none;
  filter: drop-shadow(0 8px 8px var(--shadow));
  touch-action: none;
  cursor: grab;
  will-change: transform;
}
.shape svg, .mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shape.held { z-index: 20; }
.shape.dragging { z-index: 30; cursor: grabbing; filter: drop-shadow(0 20px 14px var(--shadow)); }
.shape.selected { outline: 6px solid var(--sun); outline-offset: 8px; border-radius: 22%; }
.shape.pulse { animation: pulse .5s ease-out; }
@keyframes pulse { 40% { transform: scale(1.16); } }
.shape.gone { visibility: hidden; }

.zoo { flex: 1 0 auto; width: 100%; max-width: 560px; margin-inline: auto; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; align-content: center; padding-block: 8px; }
.animal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10% 8% 8%;
  border: 0;
  border-radius: 30px;
  background: var(--tint);
  box-shadow: 0 5px 0 rgba(59, 57, 80, .08);
  transition: transform .2s, opacity .4s;
  touch-action: manipulation;
}
.animal svg { display: block; width: 100%; height: auto; overflow: visible; }
.animal-name { font-family: var(--font-display); font-weight: 600; font-size: calc(1rem * var(--scale)); }
.animal:active { transform: scale(.97); }
.animal.bounce { animation: bounce .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bounce { 35% { transform: scale(1.1) translateY(-6px); } }
.animal.wiggle { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.animal.hint { animation: hint-card 1s ease-in-out 2; }
@keyframes hint-card { 50% { box-shadow: 0 0 0 6px var(--sun); } }
.animal.faded { opacity: .3; }
.animal .seen { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.count-area { flex: 1 0 auto; width: 100%; max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding-block: 8px; }
.tray, .mat {
  width: 100%;
  min-height: calc(var(--fruit) + 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 10px;
  padding: 18px;
  border-radius: 32px;
  box-sizing: border-box;
}
.tray { background: repeating-linear-gradient(45deg, var(--yellow-soft) 0 10px, var(--sand) 10px 20px); box-shadow: inset 0 0 0 4px var(--peach); }
.tray.pile { background: none; box-shadow: none; padding-block: 4px; }
.mat { position: relative; background: repeating-linear-gradient(-45deg, var(--mint) 0 10px, var(--sky) 10px 20px); box-shadow: inset 0 0 0 4px var(--leaf); }
.mat-label { position: absolute; left: 16px; top: -12px; padding: 2px 12px; border-radius: 999px; background: var(--leaf); color: var(--card); font-weight: 800; font-size: .8rem; letter-spacing: .05em; }
.fruit { position: relative; width: var(--fruit); height: var(--fruit); flex: none; border: 0; padding: 0; background: none; filter: drop-shadow(0 6px 5px var(--shadow)); touch-action: manipulation; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.fruit svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fruit.bounce { animation: bounce .55s cubic-bezier(.3, 1.5, .5, 1); }
.badge { position: absolute; top: -6px; right: -6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: var(--card); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.numbers { display: flex; gap: 14px; justify-content: center; }
.num { width: calc(84px * var(--scale)); height: calc(84px * var(--scale)); border: 0; border-radius: 26px; background: var(--card); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: calc(2.6rem * var(--scale)); box-shadow: 0 5px 0 var(--line); transition: transform .15s, background .3s; }
.num:active { transform: translateY(3px); }
.num.right { background: var(--mint); }
.num.wiggle { animation: wiggle .5s ease-in-out; }
.num.hint { animation: hint-card 1s ease-in-out 2; }
.lumi-btn { border: 0; background: none; padding: 0; border-radius: 50%; }
.game-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-block: 8px 14px; }
.pill.alt { color: var(--ink); background: var(--mint); box-shadow: 0 5px 0 var(--leaf), 0 8px 16px var(--shadow); }
.basket-emblem { position: absolute; z-index: 3; left: 50%; top: 68%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--card); border-radius: 30%; padding: 3%; box-sizing: content-box; }

/* ---------- Écriture ---------- */
.screen-title { font-family: var(--font-display); font-weight: 600; font-size: calc(1.3rem * var(--scale)); }
.board-wrap { flex: none; width: 100%; max-width: 760px; margin-inline: auto; }
.board { display: block; width: 100%; height: auto; background: var(--card); border-radius: 28px; box-shadow: 0 5px 0 var(--line); touch-action: none; cursor: crosshair; }
.t-line { stroke: var(--line); stroke-width: 3; }
.t-guide { fill: none; stroke: var(--lilac); stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; }
.t-dots { fill: none; stroke: var(--ink-soft); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0.1 26; }
.t-cps circle { fill: transparent; }
.t-cps circle.on { fill: var(--sun); }
.t-ink path { fill: none; stroke: var(--blue); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.t-start circle { fill: var(--leaf); }
.t-start text { fill: var(--card); font-family: var(--font-display); font-weight: 600; font-size: 30px; text-anchor: middle; }
.chooser { flex: none; display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px; width: 100%; max-width: 760px; margin-inline: auto; scrollbar-width: none; }
.chooser button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 18px; background: var(--card); font-weight: 800; font-size: .8rem; }
.chooser button[aria-pressed="true"] { border-color: var(--leaf); background: var(--mint); }
.chooser svg { width: calc(64px * var(--scale)); height: calc(38px * var(--scale)); }
.chooser .th-path { fill: none; stroke: var(--ink); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Coloriage ---------- */
.color-hint { margin: 0; text-align: center; color: var(--ink-soft); font-weight: 700; }
.canvas-wrap { flex: none; width: 100%; max-width: 520px; margin-inline: auto; }
.coloring { display: block; width: 100%; height: auto; background: var(--card); border-radius: 28px; box-shadow: 0 5px 0 var(--line); touch-action: manipulation; }
.coloring .r { fill: #fff; stroke: #2E2B3A; stroke-width: 5; stroke-linejoin: round; cursor: pointer; transition: fill .2s; }
.coloring .deco, .sheet .deco { fill: none; stroke: #2E2B3A; stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.coloring .deco-fill, .sheet .deco-fill { fill: #2E2B3A; stroke: none; pointer-events: none; }
.palette { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 12px; max-width: 520px; margin-inline: auto; }
.swatch { width: calc(42px * var(--scale)); height: calc(42px * var(--scale)); border-radius: 50%; border: 3px solid var(--card); background: var(--sw); box-shadow: 0 2px 6px var(--shadow); }
.swatch[aria-pressed="true"] { outline: 4px solid var(--ink); outline-offset: 2px; }
.swatch.eraser { background: var(--card); display: grid; place-items: center; }
.swatch.eraser svg { width: 60%; height: 60%; }
.tools { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-block: 12px; }
.tool { display: inline-flex; align-items: center; gap: 8px; min-height: calc(48px * var(--scale)); padding-inline: 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 800; }
.tool svg { width: 22px; height: 22px; }
.tool:disabled { opacity: .45; cursor: default; }

/* ---------- Lettres et premiers mots ---------- */
.letter-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.letter-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; border: 0; border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.letter-card b { font-family: var(--font-display); font-weight: 600; font-size: calc(2.6rem * var(--scale)); line-height: 1; color: var(--blue); }
.letter-card svg { width: 62%; height: auto; }
.letter-card .script { font-size: .75em; color: var(--ink-soft); }
.letter-card .seen { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.letter-card.bounce { animation: bounce .55s cubic-bezier(.3, 1.5, .5, 1); }
.big-pic { width: min(42vw, 180px); }
.big-pic svg { display: block; width: 100%; height: auto; }
.word-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.slot-l { width: calc(44px * var(--scale)); height: calc(54px * var(--scale)); display: grid; place-items: center; border: 3px dashed var(--line); border-radius: 12px; background: var(--card); font-family: var(--font-display); font-weight: 600; font-size: calc(1.9rem * var(--scale)); }
.slot-l.shown { border-color: transparent; background: none; }
.slot-l.filled { border-style: solid; border-color: var(--leaf); animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tile-l { width: calc(58px * var(--scale)); height: calc(58px * var(--scale)); border: 0; border-radius: 16px; background: var(--sun); color: var(--on-sun); font-family: var(--font-display); font-weight: 600; font-size: calc(2rem * var(--scale)); box-shadow: 0 4px 0 var(--sun-deep); }
.tile-l:disabled { visibility: hidden; }
.tile-l.wiggle { animation: wiggle .5s ease-in-out; }
.tile-l.hint { animation: hint-card 1s ease-in-out 2; }
.calm .letter-card.bounce, .calm .slot-l.filled { animation: none; }

/* ---------- Logique et associations ---------- */
.model { width: calc(110px * var(--scale)); padding: 10px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 4px var(--sun); }
.model svg, .pick svg, .seq-item svg { display: block; width: 100%; height: auto; }
.picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pick { width: calc(92px * var(--scale)); padding: 10px; border: 0; border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); transition: background .3s; }
.picks.four { display: grid; grid-template-columns: repeat(2, calc(110px * var(--scale))); gap: 14px; }
.picks.four .pick { width: 100%; }
.pick.right { background: var(--mint); }
.pick.wiggle { animation: wiggle .5s ease-in-out; }
.pick.hint { animation: hint-card 1s ease-in-out 2; }
.seq { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 12px; border-radius: 24px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.seq-item { width: calc(46px * var(--scale)); height: calc(46px * var(--scale)); display: grid; place-items: center; }
.seq-slot { border: 3px dashed var(--line); border-radius: 12px; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--ink-soft); }
.seq-slot.filled { border-color: var(--leaf); border-style: solid; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.calm .seq-slot.filled { animation: none; }

/* ---------- Histoires ---------- */
.section-title { font-size: 1.1rem; color: var(--ink-soft); }
.story { flex: 1 0 auto; width: 100%; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; padding-block: 8px 12px; }
.story-art { border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, var(--art-sky), var(--art-card)); box-shadow: 0 5px 0 var(--line); }
.story-art svg { display: block; width: 100%; height: auto; }
.story-art [data-part] { cursor: pointer; transition: filter .2s; }
.story-art [data-part].lit { filter: drop-shadow(0 0 10px var(--sun)) brightness(1.06); }
.story-text { margin: 0; padding: 14px 18px; border-radius: 22px; background: var(--card); font-family: var(--font-display); font-weight: 500; font-size: calc(1.2rem * var(--scale)); line-height: 1.45; box-shadow: 0 4px 0 var(--line); user-select: text; -webkit-user-select: text; }
.story-text.fact { background: var(--mint); }
.story-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.story-choices:empty { display: none; }
.story-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: calc(130px * var(--scale)); padding: 10px 14px; border: 3px solid var(--sun); border-radius: 22px; background: var(--card); font-weight: 800; font-size: calc(1rem * var(--scale)); }
.story-choice svg { width: calc(90px * var(--scale)); height: calc(63px * var(--scale)); }
.story-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.story-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-btn.big { width: calc(68px * var(--scale)); height: calc(68px * var(--scale)); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* Onglets de l'écriture */
.trace-tabs { flex: none; justify-content: center; padding-top: 10px; }

/* Niveau conseillé pour l'âge indiqué par le parent */
.level-btn.rec { border-color: var(--sun); box-shadow: 0 0 0 2px var(--sun) inset; }
.rec-chip { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--sun); color: var(--on-sun); font-size: .72rem; font-weight: 800; letter-spacing: .03em; }