/* Lire & Compter — styles pensés pour un enfant de 6 ans sur iPhone :
   grosses cibles tactiles, police Andika (a et g « scolaires »), couleurs franches. */

@font-face {
  font-family: 'Andika';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/andika-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Andika';
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/andika-700.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --bg: #fff7e8;
  --ink: #2b2d42;
  --muted: #6b6f80;
  --card: #ffffff;
  --line: #eadfca;
  --lecture: #7b61ff;
  --lecture-dark: #5a40e0;
  --lecture-soft: #eee9ff;
  --maths: #e8650c;
  --maths-dark: #b94c05;
  --maths-soft: #ffeadb;
  --anglais: #1b84e8;
  --anglais-dark: #155fae;
  --anglais-soft: #e1f0ff;
  --album: #0f9d6b;
  --album-dark: #0b7a53;
  --good: #0f9d6b;
  --good-dark: #0b7a53;
  --bad: #ff5c5c;
  --hint: #ffd23f;
  --accent: var(--lecture);
  --accent-dark: var(--lecture-dark);
  --accent-soft: var(--lecture-soft);
  --radius: 22px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Andika', 'Avenir Next', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button, input, select { font: inherit; color: inherit; }
/* un prénom long sans espace (« Marie-Charlotte-Alexandrine ») passe à la ligne au lieu de déborder */
h1, h2, h3 { overflow-wrap: break-word; max-width: 100%; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; border-radius: 12px; }
.choice:focus-visible, .key:focus-visible, .palier-tile:focus-visible { outline-offset: 4px; }
.object, .stage-picture, .sticker, .sticker-big, .game-icon, .domain-icon, .big-star,
.choices-pictures .choice, .choices-claps .choice, .pattern-item, .bag-item, .basket-item, .add-emoji {
  font-family: 'Andika', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', sans-serif;
}
button { cursor: pointer; touch-action: manipulation; border: 0; background: none; padding: 0; }
input { -webkit-user-select: text; user-select: text; }

.domain-theme-francais { --accent: var(--lecture); --accent-dark: var(--lecture-dark); --accent-soft: var(--lecture-soft); }
.domain-theme-maths { --accent: var(--maths); --accent-dark: var(--maths-dark); --accent-soft: var(--maths-soft); }
.domain-theme-anglais { --accent: var(--anglais); --accent-dark: var(--anglais-dark); --accent-soft: var(--anglais-soft); }
.domain-theme-monde { --accent: #0f8a7e; --accent-dark: #0b6b62; --accent-soft: #dff5f1; }
.domain-theme-defi { --accent: #d6336c; --accent-dark: #a61e4d; --accent-soft: #ffe3ec; }

.screen {
  /* sur iPad, tout l'écran est agrandi d'un coup (--zoom) : la hauteur est corrigée d'autant */
  zoom: var(--zoom, 1);
  min-height: calc(100vh / var(--zoom, 1));
  min-height: calc(100dvh / var(--zoom, 1));
  max-width: 600px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 8px) 16px calc(var(--safe-bottom) + 16px);
  display: flex;
  flex-direction: column;
}

/* ---------- barre du haut ---------- */
.top-bar {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 56px;
}
.top-title { margin: 0; font-size: 1.35rem; text-align: center; }
.icon-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 3px 0 var(--line);
  font-size: 1.5rem;
  display: grid; place-items: center;
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
/* bouton unique de l'espace parents : pictogramme fin + libellé */
.parent-btn {
  justify-self: end; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 1rem;
  box-shadow: 0 3px 0 var(--line), 0 0 0 2px var(--line) inset;
}
.parent-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line), 0 0 0 2px var(--line) inset; }
.icon { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.icon svg { width: 100%; height: 100%; display: block; }
.star-counter {
  justify-self: end;
  background: var(--card);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 3px 0 var(--line);
  white-space: nowrap;
}

/* ---------- accueil ---------- */
/* musique et voix à côté des étoiles ; coupées, l'icône est barrée (pas seulement plus pâle) */
.home-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
.sound-toggle {
  position: relative; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); box-shadow: 0 3px 0 var(--line);
  display: grid; place-items: center; font-size: 1.35rem; line-height: 1;
}
.sound-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.sound-toggle.off > span { opacity: 0.5; }
.sound-toggle[data-toggle-music].off::after {
  content: ''; position: absolute; left: 8px; right: 8px; top: calc(50% - 2px); height: 4px;
  border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); transform: rotate(-45deg);
}
.home-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 18px; }
.home-title { margin: 6px 0 0; font-size: 2.1rem; }

/* ---------- personnages ---------- */
.avatar { display: block; border-radius: 50%; overflow: hidden; flex: none; }
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar-md { width: 96px; height: 96px; }
.avatar-sm { width: 64px; height: 64px; }
.duo { display: flex; gap: 22px; justify-content: center; }
.duo-results { gap: 14px; }
.duo-results .avatar:nth-child(2) { animation-delay: 0.3s; }
.avatar.cheer { animation: cheer 0.6s ease-in-out 2; }
.guide-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.guide-row .bubble { margin: 0; }
.bubble-left { position: relative; }
.bubble-left::before {
  content: ''; position: absolute; left: -8px; top: 50%; margin-top: -8px;
  border: 8px solid transparent; border-left: 0; border-right-color: var(--card);
}
.guide-btn { position: relative; flex: none; }
.speak-badge {
  position: absolute; left: -6px; top: -6px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card); box-shadow: 0 2px 0 var(--line);
  display: grid; place-items: center; font-size: 0.9rem;
}
.guide-btn:active .avatar { transform: scale(0.94); }
.bubble {
  margin: 6px 0 0;
  background: var(--card);
  padding: 10px 18px;
  border-radius: 18px;
  font-size: 1.2rem;
  box-shadow: 0 3px 0 var(--line);
}
.home-menu { display: flex; flex-direction: column; gap: 16px; }
.domain-btn {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  border-radius: var(--radius);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  text-align: left;
  min-height: 92px;
  transition: transform 0.08s;
}
.domain-btn:active { transform: translateY(4px); }
.domain-icon { font-size: 2.6rem; line-height: 1; }
.domain-francais { background: var(--lecture); box-shadow: 0 6px 0 var(--lecture-dark); }
.domain-anglais { background: var(--anglais); box-shadow: 0 6px 0 var(--anglais-dark); }
.domain-maths { background: var(--maths); box-shadow: 0 6px 0 var(--maths-dark); }
.domain-album { background: var(--album); box-shadow: 0 6px 0 var(--album-dark); font-size: 1.5rem; min-height: 76px; }
.domain-monde { background: #0f8a7e; box-shadow: 0 6px 0 #0b6b62; }
.domain-defi { background: #d6336c; box-shadow: 0 6px 0 #a61e4d; font-size: 1.5rem; min-height: 72px; }
.domain-defi.done { opacity: 0.85; }
.domain-btn:active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.pill { margin-left: auto; background: rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 2px 12px; font-size: 1.1rem; }


/* ---------- choix du jeu ---------- */
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.game-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 5px 0 var(--accent-soft), 0 0 0 3px var(--accent-soft) inset;
  min-height: 150px;
}
.game-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--accent-soft), 0 0 0 3px var(--accent-soft) inset; }
.game-icon { font-size: 3rem; line-height: 1.1; }
.game-title { font-weight: 700; font-size: 1.15rem; text-align: center; }
.best { font-size: 0.85rem; }
.level-dots { display: flex; gap: 5px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.dot.on { background: var(--accent); }

/* ---------- partie ---------- */
.progress { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.step { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.step.done { background: var(--accent); }
.step.current { background: var(--card); box-shadow: 0 0 0 3px var(--accent) inset; }
.level-badge {
  background: var(--accent-soft); color: var(--accent-dark);
  border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 0.95rem; white-space: nowrap;
}

.instruction { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.instruction .bubble { margin: 0; font-size: 1.15rem; line-height: 1.3; padding: 10px 14px; text-align: left; }

.stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 170px; padding: 8px 0; }
.stage-picture {
  font-size: min(150px, 38vw); line-height: 1.15;
  background: var(--card); border-radius: 32px; padding: 6px 28px;
  box-shadow: 0 6px 0 var(--line);
}
.stage-listen {
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 72px;
  box-shadow: 0 8px 0 var(--accent-dark);
  animation: pulse-ring 2s ease-out infinite;
}
.stage-listen:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--accent-dark); }

.objects { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.objects-row { display: flex; gap: 6px; }
.object { font-size: min(48px, 12vw); line-height: 1.1; }
.objects.per-10 .objects-row { gap: 2px; }
.objects.per-10 .object { font-size: min(30px, 6.8vw); }
.objects.small .object { font-size: min(28px, 7vw); }
.objects.small .objects-row { gap: 2px; }
.object.removed { opacity: 0.35; position: relative; }
.object.removed::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 50%;
  height: 4px; border-radius: 2px; background: var(--bad); transform: rotate(-35deg);
}

.stage-operation { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.operation-visual { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 20px; padding: 12px 14px; box-shadow: 0 4px 0 var(--line); }
.operation-visual .op { font-size: 2rem; font-weight: 700; color: var(--accent-dark); }
.equation { display: flex; align-items: center; gap: 10px; font-size: 3rem; font-weight: 700; }
.equation.big { font-size: 3.6rem; }
.equation .op { color: var(--accent-dark); }
.gap {
  display: inline-grid; place-items: center;
  min-width: 1.4em; padding: 0 6px;
  border: 4px dashed var(--accent); border-radius: 16px;
  color: var(--accent); background: var(--card);
}

.sequence { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.seq-item {
  min-width: 58px; height: 72px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--card); border-radius: 16px; box-shadow: 0 4px 0 var(--line);
  font-size: 2.1rem; font-weight: 700;
}
.seq-item.gap { box-shadow: none; }

.frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: var(--ink); padding: 8px; border-radius: 16px; }
.cell { width: min(56px, 14vw); aspect-ratio: 1; background: var(--card); border-radius: 10px; display: grid; place-items: center; }
.cell.full::after { content: ''; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--bad); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.15); }

/* ---------- boutons-réponses ---------- */
.choices { display: grid; gap: 12px; margin-top: 8px; }
.choices.center { flex: 1; align-content: center; }
.choices.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choices-words.n3, .choices-words.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices-words.n3 .choice:last-child { grid-column: 1 / -1; }

.choice {
  background: var(--card);
  border-radius: 20px;
  min-height: 84px;
  padding: 8px 6px;
  font-size: 2.6rem;
  font-weight: 700;
  box-shadow: 0 6px 0 var(--line), 0 0 0 3px var(--line) inset;
  display: grid; place-items: center;
  min-width: 0;
  transition: transform 0.08s, opacity 0.3s;
}
.choice:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line), 0 0 0 3px var(--line) inset; }
.choices-letters .choice { font-size: 3rem; }
.choices-letters.n4 .choice { font-size: min(2.4rem, 8.5vw); }
.choices-numbers .choice { font-size: min(2.6rem, 9vw); }
.choices .choice.digits-3 { font-size: min(2.2rem, 7.5vw); }
.choices .choice.digits-4 { font-size: min(1.8rem, 6vw); }
.choices-words .choice { font-size: min(2rem, 8vw); min-height: 76px; }
.choices-words .choice.long { font-size: min(1.6rem, 6.4vw); }
.choices-big-numbers .choice { font-size: 3.6rem; min-height: 130px; }
.choices-objects .choice { min-height: 150px; padding: 12px 4px; }
.choices-objects .objects .object { font-size: min(26px, 5.6vw); }

.choice.correct { background: var(--good); color: #fff; box-shadow: 0 6px 0 var(--good-dark); animation: pop 0.35s ease-out; }
.choice.wrong { background: #ffe3e3; color: #c43d3d; box-shadow: 0 6px 0 #f3b4b4; animation: shake 0.4s; opacity: 0.6; }
.choice.hint { animation: glow 1s ease-in-out infinite; box-shadow: 0 6px 0 #e6b800, 0 0 0 4px var(--hint) inset; }
.choices.answered .choice:not(.correct) { opacity: 0.35; }

.feedback { min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.feedback p { margin: 4px 0; }
.praise { font-size: 1.8rem; font-weight: 700; color: var(--good-dark); animation: pop 0.35s ease-out; }
.try-again { font-size: 1.4rem; font-weight: 700; color: var(--maths-dark); }
.level-up { font-size: 1.3rem; font-weight: 700; color: var(--accent-dark); animation: pop 0.5s ease-out; }
.reveal { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.04em; }
.reveal-hl { color: var(--accent); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }

/* ---------- résultats ---------- */
.results { align-items: center; justify-content: center; text-align: center; gap: 8px; overflow: hidden; position: relative; }
.results h1 { font-size: 2.4rem; margin: 8px 0 0; }
.result-stars { display: flex; gap: 10px; }
.big-star { font-size: 72px; filter: grayscale(1); opacity: 0.25; }
.big-star.on { filter: none; opacity: 1; animation: star-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.result-detail { font-size: 1.15rem; color: var(--muted); margin: 0; }
.new-sticker { background: var(--card); border-radius: var(--radius); padding: 10px 24px; box-shadow: 0 5px 0 var(--line); margin-top: 8px; }
.new-sticker p { margin: 0; font-weight: 700; color: var(--album-dark); }
.sticker-big { font-size: 64px; display: inline-block; animation: star-in 0.8s 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.result-actions { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 360px; margin-top: 18px; }

.big-btn {
  min-height: 64px; border-radius: 18px; padding: 0 20px;
  background: var(--card); font-size: 1.4rem; font-weight: 700;
  box-shadow: 0 5px 0 var(--line), 0 0 0 3px var(--line) inset;
}
.big-btn:active { transform: translateY(3px); }
.big-btn.primary { background: var(--accent); color: #fff; box-shadow: 0 5px 0 var(--accent-dark); }
.big-btn.danger { background: #fff0f0; color: #c43d3d; box-shadow: 0 5px 0 #f3b4b4; font-size: 1.1rem; min-height: 52px; }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear both; }

/* ---------- album ---------- */
.album-info { text-align: center; font-size: 1.2rem; margin: 8px 0 16px; }
.sticker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sticker {
  aspect-ratio: 1; border-radius: 18px; background: var(--card);
  display: grid; place-items: center; font-size: min(40px, 10vw);
  box-shadow: 0 4px 0 var(--line);
}
.sticker.locked { background: transparent; border: 3px dashed var(--line); box-shadow: none; color: var(--line); font-weight: 700; font-size: 1.6rem; }

/* ---------- espace parents ---------- */
.gate-form { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; font-size: 1.2rem; }
.gate-form p { margin: 0; }
.gate-question { font-size: 2.4rem; font-weight: 700; }
.gate-input, .text-input {
  font-size: 1.6rem; text-align: center; width: 160px; padding: 10px;
  border-radius: 14px; border: 3px solid var(--line); background: var(--card);
}
.text-input { font-size: 1.1rem; width: 150px; text-align: left; }
.gate-error { color: #c43d3d; min-height: 1.4em; }

.parents { gap: 14px; -webkit-user-select: text; user-select: text; }
.card { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: 0 3px 0 var(--line); }
.card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; }
.setting input[type='checkbox'] { width: 26px; height: 26px; accent-color: var(--lecture); }
.segmented { display: flex; background: var(--bg); border-radius: 12px; padding: 3px; }
.seg { padding: 6px 14px; border-radius: 10px; font-weight: 700; }
.seg.on { background: var(--lecture); color: #fff; }
.game-row { padding: 10px 0; border-top: 1px solid var(--line); }
.game-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-row-title { font-weight: 700; }
.level-ctrl { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mini-btn { width: 34px; height: 34px; border-radius: 10px; background: var(--bg); font-size: 1.3rem; font-weight: 700; }
.muted { color: var(--muted); margin: 4px 0 0; }
.small { font-size: 0.9rem; }
.tips summary { font-weight: 700; font-size: 1.1rem; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.tips ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.45; }
.tips li + li { margin-top: 6px; }

/* ---------- animations ---------- */
@keyframes cheer { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-12px) rotate(-6deg); } 60% { transform: translateY(-4px) rotate(5deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes star-in { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(110vh) rotate(720deg); } }
@keyframes pulse-ring { 0% { box-shadow: 0 8px 0 var(--accent-dark), 0 0 0 0 var(--accent-soft); } 70% { box-shadow: 0 8px 0 var(--accent-dark), 0 0 0 22px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 8px 0 var(--accent-dark), 0 0 0 0 rgba(0, 0, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* écrans peu hauts (iPhone 6/7/8, SE, Plus) : tout l'accueil tient sans défiler */
@media (max-height: 760px) {
  .home-hero { margin-bottom: 12px; }
  .home-menu { gap: 12px; }
  .domain-btn { min-height: 68px; padding: 10px 18px; font-size: 1.7rem; }
  .domain-icon { font-size: 2.1rem; }
  .domain-album { min-height: 60px; font-size: 1.4rem; }
}

/* petits écrans (iPhone SE) */
@media (max-height: 700px) {
  .avatar-md { width: 80px; height: 80px; }
  .avatar-sm { width: 56px; height: 56px; }
  .home-title { font-size: 1.8rem; }
  .domain-btn { min-height: 64px; }
  .stage { min-height: 140px; }
  .stage-picture { font-size: min(120px, 32vw); }
  .stage-listen { width: 120px; height: 120px; font-size: 56px; }
  .choice { min-height: 72px; }
  .feedback { min-height: 88px; }
}


/* =====================================================================
   Profils : « Qui joue ? »
   ===================================================================== */
.profiles { justify-content: flex-start; }
.profiles-title { text-align: center; font-size: 2.4rem; margin: 8px 0 18px; }
.profile-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 8px 16px; border-radius: 28px; background: var(--card);
  box-shadow: 0 7px 0 var(--line), 0 0 0 4px var(--line) inset;
  transition: transform 0.08s;
}
.profile-card:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--line), 0 0 0 4px var(--line) inset; }
.profile-card.look-fille { background: linear-gradient(180deg, #ffe8f1, #fff); box-shadow: 0 7px 0 #f7c2d8, 0 0 0 4px #ffd0e2 inset; }
.profile-card.look-garcon { background: linear-gradient(180deg, #e3f1ff, #fff); box-shadow: 0 7px 0 #b9d9fb, 0 0 0 4px #cfe6ff inset; }
.profile-list.n1 { grid-template-columns: minmax(0, 260px); justify-content: center; }
.profile-list.n3 .avatar-xl, .profile-list.n4 .avatar-xl, .profile-list.n5 .avatar-xl, .profile-list.n6 .avatar-xl { width: min(110px, 28vw); height: min(110px, 28vw); }
.profile-name { overflow-wrap: anywhere; text-align: center; }
.avatar-xl { width: min(150px, 36vw); height: min(150px, 36vw); box-shadow: 0 6px 16px rgba(43, 45, 66, 0.12); }
.avatar-xs { width: 32px; height: 32px; }
.profile-name { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.profile-grade { background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 0.95rem; font-weight: 700; }
.profile-stars { font-weight: 700; color: var(--muted); }
.profile-chip {
  display: flex; align-items: center; gap: 8px; justify-self: start;
  min-width: 0; max-width: 100%;
  background: var(--card); border-radius: 999px; padding: 4px 14px 4px 4px;
  font-weight: 700; box-shadow: 0 3px 0 var(--line);
}
/* un prénom très long (30 lettres) se termine par « … » ici : il est écrit en entier juste en dessous */
.profile-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home .top-bar, .pause .top-bar { grid-template-columns: minmax(0, auto) 1fr auto; }

/* sections dans la liste des jeux */
.section-title { grid-column: 1 / -1; margin: 10px 0 -4px; font-size: 1.05rem; color: var(--accent-dark); letter-spacing: 0.02em; }
.level-text { font-size: 0.9rem; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; }

/* =====================================================================
   Carte des paliers de calcul
   ===================================================================== */
.palier-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 8px; text-align: center; font-weight: 700; font-size: 0.85rem; }
.palier-head span { padding: 6px 4px; border-radius: 12px; background: var(--card); box-shadow: 0 2px 0 var(--line); }
.palier-head .op-plus { color: #b94c05; }
.palier-head .op-moins { color: #0f7896; }
.palier-head .op-mix { color: #7a3fc4; }
.palier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding-bottom: 16px; }
.palier-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 92px; border-radius: 22px; color: #fff; padding: 10px 4px 8px;
  transition: transform 0.08s;
}
.palier-tile:active { transform: translateY(4px) scale(0.98); }
.palier-tile.op-plus { background: linear-gradient(160deg, #e8650c, #cf4f08); box-shadow: 0 6px 0 #9e3f04; }
.palier-tile.op-moins { background: linear-gradient(160deg, #1592a8, #0f7896); box-shadow: 0 6px 0 #0a5a70; }
.palier-tile.op-mix { background: linear-gradient(160deg, #8a4fd6, #c2408a); box-shadow: 0 6px 0 #67309f; }
.palier-tile::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 5px; height: 22%;
  border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.palier-label { display: flex; align-items: baseline; gap: 2px; font-size: 1.5rem; font-weight: 700; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); }
.palier-label b { font-size: 2rem; }
.palier-stars { display: inline-flex; gap: 1px; font-size: 0.95rem; line-height: 1; }
.pstar { color: rgba(255, 255, 255, 0.45); }
.pstar.on { color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, 0.8), 0 1px 0 rgba(0, 0, 0, 0.2); }
.palier-tile.done { box-shadow: 0 6px 0 #c99a00, 0 0 0 4px #ffd23f inset; }
.palier-trophy { position: absolute; top: -10px; right: -6px; font-size: 1.6rem; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.palier-tile.recommended { animation: glow 1.4s ease-in-out infinite; z-index: 1; }
.palier-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.palier-result { font-size: 1.15rem; font-weight: 700; margin: 4px 0 0; }
.palier-result .pstar { color: var(--line); font-size: 1.4rem; }
.palier-result .pstar.on { color: #ffb800; text-shadow: none; }

/* =====================================================================
   Pavé numérique
   ===================================================================== */
.keypad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.key {
  min-height: 62px; border-radius: 20px; font-size: 2rem; font-weight: 700;
  background: var(--card); color: var(--ink);
  box-shadow: 0 5px 0 var(--accent-soft), 0 0 0 3px var(--accent-soft) inset;
}
.key:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--accent-soft), 0 0 0 3px var(--accent-soft) inset; }
.key-del { background: #fff0ec; color: #e0553a; box-shadow: 0 5px 0 #ffd2c6; font-size: 1.6rem; }
.key-ok { background: var(--good); color: #fff; box-shadow: 0 5px 0 var(--good-dark); }
.keypad.answered .key { opacity: 0.5; }
.gap.typed { color: var(--ink); border-style: solid; }
.gap.right { background: var(--good); border-color: var(--good); color: #fff; }
.play-keypad .stage { min-height: 150px; }
.play-keypad .feedback { min-height: 70px; }

/* =====================================================================
   Relie
   ===================================================================== */
.match { position: relative; grid-template-columns: 1fr 1fr; column-gap: 64px; flex: 1; align-content: center; }
.match-col { display: flex; flex-direction: column; gap: 12px; }
.match-item {
  position: relative; z-index: 1; min-height: 64px; border-radius: 20px;
  background: var(--card); font-size: 1.7rem; font-weight: 700;
  box-shadow: 0 5px 0 var(--line), 0 0 0 3px var(--line) inset;
}
.match-item.right { font-size: 2rem; }
.match-item.selected { box-shadow: 0 5px 0 var(--accent-dark), 0 0 0 4px var(--accent) inset; transform: translateY(-2px); }
.match-item.matched { background: var(--pair); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18); }
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.match-lines line { stroke-width: 6; stroke-linecap: round; }

/* =====================================================================
   Complète
   ===================================================================== */
.fill { display: flex; flex-direction: column; gap: 18px; flex: 1; justify-content: center; }
.fill-rows { display: flex; flex-direction: column; gap: 12px; }
.fill-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--card); border-radius: 22px; padding: 8px 10px;
  box-shadow: 0 4px 0 var(--line);
  font-size: 1.9rem; font-weight: 700;
}
.fill-row .op { color: var(--accent-dark); }
.fill-row .num { min-width: 1.6em; text-align: center; }
.fill-row.right { background: #e3f8ee; box-shadow: 0 4px 0 #b6e8cf; }
.fill-box {
  width: min(68px, 17vw); height: min(64px, 16vw); border-radius: 16px;
  border: 3px dashed var(--accent); background: var(--accent-soft);
  font-size: 1.8rem; font-weight: 700; color: var(--ink);
}
.fill-box.filled { border-style: solid; background: #fff; }
.fill-box.selected { box-shadow: 0 0 0 4px var(--hint); }
.tile-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile {
  min-height: 60px; border-radius: 18px; font-size: 1.9rem; font-weight: 700; color: #fff;
  background: var(--accent); box-shadow: 0 5px 0 var(--accent-dark);
}
.tile:nth-child(3n + 2) { background: #22b07d; box-shadow: 0 5px 0 #16855d; }
.tile:nth-child(3n) { background: #7b61ff; box-shadow: 0 5px 0 #5a40e0; }
.tile.used { opacity: 0.2; transform: scale(0.9); }

/* =====================================================================
   Le panier
   ===================================================================== */
.stage-build { flex-direction: column; gap: 6px; }
.basket {
  width: 100%; min-height: 150px; padding: 12px;
  border-radius: 26px; background: #fff3dc; border: 4px dashed #e9c98f;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.basket-empty { font-size: 64px; opacity: 0.5; }
.basket-singles { display: grid; grid-template-columns: repeat(5, auto); gap: 4px; justify-content: center; }
.basket.per-10 .basket-singles { grid-template-columns: repeat(10, auto); }
.basket-item { font-size: min(34px, 8vw); line-height: 1.1; }
.basket.per-10 .basket-item { font-size: min(26px, 6.4vw); }
.bag-item {
  display: grid; grid-template-columns: repeat(10, auto); gap: 1px;
  background: #fff; border-radius: 999px; padding: 4px 10px; font-size: min(18px, 4.4vw);
  box-shadow: 0 3px 0 #e9c98f;
}
.basket-count { margin: 0; font-weight: 700; color: var(--maths-dark); }
.shopping-list { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.shopping-item {
  background: var(--card); border-radius: 999px; padding: 4px 14px; font-size: 1.5rem;
  box-shadow: 0 3px 0 var(--line); white-space: nowrap;
}
.shopping-item b { font-size: 1.6rem; }
.basket.mixed { gap: 6px; }
.basket.mixed .basket-singles { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding-bottom: 4px; border-bottom: 2px dashed #ecd7ad; }
.basket.mixed .basket-singles:last-child { border-bottom: 0; }
.basket.mixed .basket-item { font-size: min(26px, 6.4vw); }
.build-buttons .add-btn { min-width: 0; flex: 1; max-width: 160px; padding: 0 10px; }
.build { display: flex; flex-direction: column; gap: 12px; }
.build-buttons { display: flex; gap: 12px; justify-content: center; }
.add-btn {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  min-width: 120px; min-height: 70px; border-radius: 22px; padding: 0 18px;
  background: var(--card); font-size: 1.6rem; font-weight: 700;
  box-shadow: 0 5px 0 var(--line), 0 0 0 3px var(--line) inset;
}
.add-btn:active { transform: translateY(3px); }
.add-emoji { font-size: 2rem; }
.add-btn.bag { background: var(--accent-soft); }

/* =====================================================================
   Dénombrement : éparpillé, dé, boîtes, dizaines, vue éclair
   ===================================================================== */
.stage { position: relative; }
.scatter { position: relative; width: min(100%, 380px); aspect-ratio: 5 / 4; background: var(--card); border-radius: 26px; box-shadow: 0 5px 0 var(--line); }
.scatter { overflow: hidden; }
.scatter .object { position: absolute; transform: translate(-50%, -50%); font-size: min(38px, 9vw); }
.object { cursor: pointer; }
.object.counted { opacity: 0.4; position: relative; }
.object.counted::after {
  content: attr(data-n); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--accent); color: #fff; font-family: 'Andika', sans-serif; font-size: 0.42em; font-weight: 700;
  min-width: 1.6em; height: 1.6em; border-radius: 999px; display: grid; place-items: center; opacity: 1;
}
.scatter .object.counted { position: absolute; }
.count-reset {
  position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); box-shadow: 0 3px 0 var(--line); font-size: 1.3rem; font-weight: 700;
}
.count-reset[hidden] { display: none; }
.dice {
  width: 160px; height: 160px; padding: 18px; border-radius: 30px; background: #fff;
  box-shadow: 0 6px 0 var(--line), 0 0 0 3px var(--line) inset;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.pip { border-radius: 50%; }
.pip.on { background: var(--ink); box-shadow: inset -3px -3px 0 rgba(255, 255, 255, 0.25); }
.frames { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.blocks { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; justify-content: center; background: var(--card); padding: 14px; border-radius: 22px; box-shadow: 0 5px 0 var(--line); }
.bars { display: flex; gap: 4px; align-items: flex-end; }
.bar { display: flex; flex-direction: column; gap: 1px; padding: 2px; background: #2f6fd6; border-radius: 5px; }
.bar .cube { width: 14px; height: 14px; }
.cube { display: block; width: 18px; height: 18px; background: #6aa8ff; border-radius: 3px; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12); }
.loose-cubes { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 3px; }
.plates { display: flex; gap: 6px; flex-wrap: wrap; max-width: 100%; }
.plate {
  width: 70px; height: 70px; border-radius: 6px; background-color: #ff9f43;
  background-image: linear-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
  background-size: 7px 7px; box-shadow: 0 3px 0 #d9661a;
}
/* avec des centaines (jusqu'à 9 plaques) : matériel plus compact pour tenir sur un iPhone 6 */
.blocks.has-hundreds { gap: 10px; padding: 10px; }
.blocks.has-hundreds .plates { display: grid; grid-template-columns: repeat(5, auto); gap: 4px; }
.blocks.has-hundreds .plate { width: 44px; height: 44px; background-size: 4.4px 4.4px; box-shadow: 0 2px 0 #d9661a; }
.blocks.has-hundreds .bar .cube { width: 10px; height: 10px; }
.blocks.has-hundreds .loose-cubes .cube { width: 14px; height: 14px; }
.flash-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flash { position: relative; }
.flash-cover {
  display: none; position: absolute; inset: 0; border-radius: 26px;
  background: var(--accent-soft); color: var(--accent); font-size: 5rem; font-weight: 700;
  place-items: center; border: 4px dashed var(--accent);
}
.flash.hidden .flash-cover { display: grid; }
.flash.hidden .flash-inner { visibility: hidden; }
.again-btn { background: var(--card); border-radius: 999px; padding: 8px 18px; font-weight: 700; box-shadow: 0 3px 0 var(--line); }

/* suites de motifs, formes, couleurs, phrases */
.pattern { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pattern-item {
  width: 52px; height: 52px; display: grid; place-items: center; font-size: 2rem;
  background: var(--card); border-radius: 14px; box-shadow: 0 3px 0 var(--line);
}
.pattern-item.gap { font-family: 'Andika', sans-serif; font-weight: 700; color: var(--accent); border: 3px dashed var(--accent); box-shadow: none; }
.shape { display: block; width: 72%; max-width: 90px; aspect-ratio: 1; }
.shape svg { width: 100%; height: 100%; display: block; }
.swatch { display: block; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1); }
.stage-swatch { width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 6px 0 var(--line), inset 0 0 0 4px rgba(0, 0, 0, 0.08); }
.choices-pictures .choice { font-size: 2.8rem; min-height: 96px; }
.choices-claps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.choices-claps .choice { font-size: min(1.8rem, 7vw); letter-spacing: -0.05em; }
.choices-sentences { grid-template-columns: 1fr !important; }
.choices-sentences .choice { font-size: 1.25rem; min-height: 60px; text-align: left; justify-items: start; padding: 10px 16px; }
.stage-sentence { margin: 0; background: var(--card); border-radius: 22px; padding: 18px 20px; font-size: 1.6rem; font-weight: 700; text-align: center; box-shadow: 0 5px 0 var(--line); }
.stage-word { background: var(--card); border-radius: 26px; padding: 14px 30px; font-size: 3.2rem; font-weight: 700; box-shadow: 0 6px 0 var(--line); }
.groups { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 360px; }
.group { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; background: var(--card); border-radius: 16px; box-shadow: 0 3px 0 var(--line); }
.group .object { font-size: min(24px, 6vw); }

/* =====================================================================
   Tableau de bord des parents
   ===================================================================== */
.tabs { align-self: center; }
.tabs .seg { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; }
.select {
  font: inherit; font-size: 1rem; padding: 8px 10px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--card); color: var(--ink); max-width: 100%;
}
.level-select { width: 100%; margin-top: 6px; }
.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat-tile { background: var(--bg); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 0.9rem; color: var(--muted); }
.stat-value { font-size: 1.6rem; font-weight: 700; }
.chart { margin: 14px 0 0; }
.chart-title { font-weight: 700; margin-bottom: 8px; }
.chart-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 150px; align-items: stretch; border-bottom: 1px solid var(--line); }
.chart-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-top: 18px; min-height: 44px; }
.bar-area { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar-fill { width: min(24px, 60%); background: var(--lecture); border-radius: 4px 4px 0 0; }
.bar-fill.empty { background: var(--line); }
.bar-value { position: absolute; transform: translateY(-4px); font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.bar-day { font-size: 0.85rem; color: var(--muted); margin-bottom: -22px; }
.chart-col.today .bar-day { color: var(--ink); font-weight: 700; }
.chart-caption { margin-top: 28px; }
.status { font-size: 0.85rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; color: var(--ink); }
.status-todo { background: #f1ede4; }
.status-doing { background: #fff1c2; }
.status-done { background: #d8f5e6; }
.plain-list { margin: 0; padding-left: 18px; line-height: 1.5; }
.card h3 { margin: 12px 0 4px; font-size: 1.05rem; }


/* =====================================================================
   iPad : l'interface iPhone agrandie, en portrait comme en paysage
   ===================================================================== */
@media (min-width: 700px) and (min-height: 900px) { :root { --zoom: 1.3; } }
@media (min-width: 1000px) and (min-height: 1300px) { :root { --zoom: 1.5; } }
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 700px) { :root { --zoom: 1.12; } }
@media (orientation: landscape) and (min-width: 1300px) and (min-height: 1000px) { :root { --zoom: 1.3; } }

/* =====================================================================
   Réglages
   ===================================================================== */
.grown-up-btns { display: flex; gap: 6px; }
.settings-btn { font-size: 1.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast { margin: 0; background: var(--good); color: #fff; font-weight: 700; padding: 10px 14px; border-radius: 14px; text-align: center; }
.photo-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.photo-row:first-of-type { border-top: 0; }
.photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.photo-btn { min-height: 48px; font-size: 1.05rem; display: inline-flex; align-items: center; cursor: pointer; }
.photo-btn:focus-within { outline: 4px solid var(--ink); outline-offset: 3px; }
.photo-status { margin: 0; min-height: 1.2em; }
.link-action { color: var(--lecture-dark); font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.voice-row { flex-wrap: wrap; }
.voice-ctrl { display: flex; gap: 8px; align-items: center; min-width: 0; flex: 1; justify-content: flex-end; }
.voice-ctrl .select { min-width: 0; flex: 1; max-width: 240px; }
.voice-ctrl .mini-btn { width: 44px; height: 44px; }
.credits p { margin: 8px 0 0; }
.changelog { border-top: 1px solid var(--line); padding: 4px 0; }
.changelog summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.changelog-entry h3 { margin: 8px 0 4px; font-size: 1rem; }
.avatar-photo { position: relative; background: var(--card); }
.avatar-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-name {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  background: rgba(43, 45, 66, 0.72); color: #fff; font-weight: 700; font-size: 0.75rem;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.avatar-xl .avatar-name { font-size: 1rem; }
.avatar-xs .avatar-name, .avatar-sm .avatar-name { display: none; }

/* =====================================================================
   Version 1.2 : choix du niveau, ranger, labyrinthe, chemins, patates,
   petits problèmes, horloge
   ===================================================================== */
.shake { animation: shake 0.4s; }

/* carte de jeu : le haut lance le jeu, le bas choisit le niveau */
.game-card { padding: 0; gap: 0; overflow: hidden; }
.game-card:active { transform: none; box-shadow: 0 5px 0 var(--accent-soft), 0 0 0 3px var(--accent-soft) inset; }
.game-play {
  width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 10px 10px;
}
.game-play:active { transform: translateY(2px); }
.level-pick {
  width: 100%; min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
  border-top: 2px dashed var(--accent-soft); padding: 6px 8px 10px;
  font-size: 0.85rem; font-weight: 700; color: var(--accent-dark);
}
.level-pick:active { background: var(--accent-soft); }
.level-pick-label { white-space: nowrap; }

.levels-intro { margin: 14px 4px 10px; font-weight: 700; font-size: 1.2rem; }
.level-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.level-row {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--card); border-radius: 20px; padding: 10px 14px; min-height: 66px;
  box-shadow: 0 4px 0 var(--accent-soft), 0 0 0 3px var(--accent-soft) inset;
}
.level-row:active { transform: translateY(3px); }
.level-num {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: 1.3rem;
}
.level-row.current { box-shadow: 0 4px 0 var(--accent-dark), 0 0 0 3px var(--accent) inset; }
.level-row.current .level-num { background: var(--accent-dark); color: #fff; }
.level-label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.level-label b { font-size: 1.1rem; }
.level-label span { color: var(--muted); font-size: 0.95rem; }
.level-state { flex: none; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.level-row.passed .level-state { color: var(--good-dark); font-size: 1.4rem; }

/* ranger dans l'ordre */
.order { display: flex; flex-direction: column; gap: 22px; }
.order-slots { display: flex; align-items: center; justify-content: center; gap: 4px; }
.order-slot {
  flex: 1 1 0; min-width: 0; max-width: 96px; height: 78px; border-radius: 16px;
  border: 3px dashed var(--accent); background: var(--accent-soft);
  display: grid; place-items: center; font-size: min(1.8rem, 7vw); font-weight: 700;
}
.order-slot.filled { border-style: solid; background: var(--card); animation: pop 0.3s ease-out; }
.order-sign { flex: none; font-size: 1.5rem; font-weight: 700; color: var(--accent-dark); }
.order-items { display: grid; gap: 10px; }
.order-items.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.order-items.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.order-items.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.order-item {
  min-width: 0; min-height: 84px; border-radius: 20px; padding: 4px 2px;
  display: grid; place-items: center; background: var(--card);
  font-size: min(2rem, 7.5vw); font-weight: 700;
  box-shadow: 0 6px 0 var(--line), 0 0 0 3px var(--line) inset;
}
.order-items.n5 .order-item { font-size: min(1.6rem, 6.4vw); }
.order.words .order-item { font-size: min(1.4rem, 4.4vw); }
.order.words .order-slot { font-size: min(1.3rem, 4.2vw); }
.order-item.order-picture { min-height: 112px; }
.order-item.placed { opacity: 0.25; transform: scale(0.92); }
.order-item.hint { animation: glow 1s ease-in-out infinite; box-shadow: 0 6px 0 #e6b800, 0 0 0 4px var(--hint) inset; }
.order-emoji { font-size: calc(var(--scale, 1) * min(44px, 10vw)); line-height: 1; }
.order-slot .order-emoji { font-size: calc(var(--scale, 1) * min(30px, 7vw)); }

/* labyrinthe */
.stage-maze { padding: 4px 0; min-height: 0; }
.maze {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  width: min(100%, 440px, calc(100vh / var(--zoom, 1) - 370px));
  width: min(100%, 440px, calc(100dvh / var(--zoom, 1) - 370px));
  aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 8px; background: var(--card);
  box-shadow: 0 5px 0 var(--line);
  touch-action: none; user-select: none; -webkit-user-select: none;
  container-type: inline-size;
}
.maze-cell { position: relative; border: 2px solid transparent; display: grid; place-items: center; min-width: 0; min-height: 0; }
.maze-cell.wall-n { border-top-color: var(--ink); }
.maze-cell.wall-e { border-right-color: var(--ink); }
.maze-cell.wall-s { border-bottom-color: var(--ink); }
.maze-cell.wall-w { border-left-color: var(--ink); }
.maze-cell.trail::before { content: ''; width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); opacity: 0.5; }
.maze-cell.hint::before { content: '⭐'; width: auto; background: none; opacity: 1; font-size: 16px; font-size: calc(45cqi / var(--cols)); }
.maze-cell.here::before { content: none; }
.maze-hero, .maze-goal { position: absolute; line-height: 1; font-size: 26px; font-size: calc(68cqi / var(--cols)); }
.maze-hero { z-index: 2; }
.maze-hero.bump { animation: shake 0.3s; }
.maze.solved .maze-hero { animation: pop 0.4s ease-out; }
.maze-controls { display: flex; justify-content: center; gap: 10px; }
.maze-arrow {
  width: 58px; height: 58px; border-radius: 18px; background: var(--card);
  font-size: 1.8rem; font-weight: 700;
  box-shadow: 0 5px 0 var(--line), 0 0 0 3px var(--line) inset;
}
.maze-arrow:active { transform: translateY(3px); }
.maze-hint { background: #fff6d6; }
.maze-controls.answered .maze-arrow { opacity: 0.4; }

/* chemins de nombres et de lettres */
.path-zone { flex: 1; display: flex; align-items: center; justify-content: center; }
.path-grid {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px;
  width: min(100%, calc(var(--cols) * 92px), calc((100vh / var(--zoom, 1) - 320px) * var(--cols) / var(--rows)));
  width: min(100%, calc(var(--cols) * 92px), calc((100dvh / var(--zoom, 1) - 320px) * var(--cols) / var(--rows)));
}
.path-grid.spell {
  width: min(100%, calc(var(--cols) * 80px), calc((100vh / var(--zoom, 1) - 440px) * var(--cols) / var(--rows)));
  width: min(100%, calc(var(--cols) * 80px), calc((100dvh / var(--zoom, 1) - 440px) * var(--cols) / var(--rows)));
}
.path-cell {
  position: relative; z-index: 1; aspect-ratio: 1; min-width: 0; border-radius: 16px;
  background: var(--card); font-size: min(1.7rem, 6.5vw); font-weight: 700;
  box-shadow: 0 4px 0 var(--line), 0 0 0 3px var(--line) inset;
}
.path-cell:active { transform: translateY(2px); }
.path-cell.done { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-dark); }
.path-cell.finish::after { content: '🏁'; position: absolute; top: 3px; right: 4px; font-size: 0.85rem; line-height: 1; }
.path-cell.hint { animation: glow 1s ease-in-out infinite; box-shadow: 0 4px 0 #e6b800, 0 0 0 4px var(--hint) inset; }
.path-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.path-trail polyline { fill: none; stroke: var(--accent); stroke-width: 0.14; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.stage-path { flex: none; min-height: 0; padding: 4px 0; }
.spell-top { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.spell-picture { font-size: 60px; line-height: 1.1; background: var(--card); border-radius: 22px; padding: 4px 14px; box-shadow: 0 5px 0 var(--line); }
.spell-word { display: flex; gap: 4px; }
.spell-slot {
  width: 30px; height: 46px; border-bottom: 4px solid var(--accent);
  display: grid; place-items: center; font-size: 1.8rem; font-weight: 700;
}
.spell-slot.filled { color: var(--accent-dark); animation: pop 0.3s ease-out; }

/* faire des patates */
.stage-lasso { padding: 4px 0; min-height: 0; }
.lasso-field {
  position: relative; overflow: hidden;
  width: min(100%, 460px, calc((100vh / var(--zoom, 1) - 400px) * var(--cols) / var(--rows)));
  width: min(100%, 460px, calc((100dvh / var(--zoom, 1) - 400px) * var(--cols) / var(--rows)));
  aspect-ratio: var(--cols) / var(--rows);
  background: var(--card); border-radius: 22px; box-shadow: 0 5px 0 var(--line);
  touch-action: none; user-select: none; -webkit-user-select: none;
  container-type: inline-size;
}
.lasso-object {
  position: absolute; transform: translate(-50%, -50%); line-height: 1; padding: 3px; border-radius: 50%;
  font-size: 26px; font-size: calc(54cqi / var(--cols));
}
.lasso-object.picked { background: #fff6d6; box-shadow: 0 0 0 3px #e6b800; }
.lasso-object.grouped { box-shadow: 0 0 0 3px var(--pair); }
.lasso-object.picked::after, .lasso-object.grouped::after {
  position: absolute; right: -7px; top: -9px; min-width: 16px; padding: 0 4px;
  border-radius: 999px; background: #fff; color: var(--ink); border: 2px solid var(--ink);
  font-size: 11px; font-weight: 700; line-height: 14px; text-align: center;
}
.lasso-object.picked::after { content: attr(data-n); }
.lasso-object.grouped::after { content: attr(data-group); border-color: var(--pair); }
.lasso-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.patate { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.patate.live { stroke: var(--ink); stroke-dasharray: 6 6; }
.patate.wrong { stroke: var(--bad); }
.patate.done { stroke-width: 5; }
.lasso-zone { display: flex; flex-direction: column; gap: 8px; }
.lasso-help { margin: 0; text-align: center; font-weight: 700; color: var(--muted); }
.lasso-summary { margin: 0; text-align: center; font-weight: 700; font-size: 1.2rem; }
.lasso-zone .choices { margin-top: 0; }

/* petits problèmes */
.stage-story { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.story-text {
  margin: 0; background: var(--card); border-radius: 22px; padding: 14px 18px;
  font-size: 1.35rem; font-weight: 700; line-height: 1.4; text-align: center; box-shadow: 0 5px 0 var(--line);
}

/* horloge */
.stage-clock {
  width: min(240px, 62vw, calc(100vh / var(--zoom, 1) - 430px));
  width: min(240px, 62vw, calc(100dvh / var(--zoom, 1) - 430px));
  aspect-ratio: 1;
}
.stage-clock svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 5px 0 var(--line)); }
.clock-numbers text { font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: var(--ink); font-family: inherit; }

/* relie : objets à compter ou images à gauche */
.match-item.has-objects { padding: 6px 4px; }
.match-item.has-objects .objects .object { font-size: min(20px, 5vw); }
.match-item.has-emoji { font-size: 2.2rem; }
.match-item.right.is-word { font-size: 1.35rem; }

/* calculs à trous : 4 ou 5 calculs, étiquettes à glisser */
.fill-row.right { animation: pop 0.3s ease-out; }
.fill-row.right .fill-box { border-color: var(--good); background: #fff; color: var(--good-dark); }
.fill.rows-4 .fill-rows, .fill.rows-5 .fill-rows { gap: 8px; }
.fill.rows-4 .fill-row, .fill.rows-5 .fill-row { padding: 4px 10px; font-size: 1.6rem; }
.fill.rows-4 .fill-box, .fill.rows-5 .fill-box { height: min(52px, 13vw); font-size: 1.6rem; }
.fill.rows-5 { gap: 12px; }
.tile-tray.tiles-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-tray.tiles-10 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tile-tray.tiles-8 .tile, .tile-tray.tiles-10 .tile { min-height: 52px; font-size: 1.6rem; }
.tile { touch-action: none; user-select: none; -webkit-user-select: none; }
.tile.dragging { opacity: 0.3; }
.tile.hint { animation: glow 1s ease-in-out infinite; box-shadow: 0 5px 0 #e6b800, 0 0 0 4px var(--hint) inset; }
.tile-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  display: grid; place-items: center; border-radius: 18px;
  background: var(--maths); color: #fff; font-size: 1.9rem; font-weight: 700;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
.fill-box.drop-target { box-shadow: 0 0 0 4px var(--hint); background: #fff6d6; }
.play-fill .feedback { min-height: 64px; }

/* petits textes : un texte à lire, des réponses courtes sur 3 colonnes */
.choices-answers.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices-answers .choice {
  font-size: min(1.2rem, 4.6vw); min-height: 64px; line-height: 1.2; padding: 6px 4px;
  overflow-wrap: break-word; hyphens: auto;
}
.choices-answers.long-words .choice { font-size: min(1.2rem, 3.5vw); overflow-wrap: anywhere; }
.stage-text {
  width: 100%; background: var(--card); border-radius: 22px; padding: 12px 16px 10px;
  box-shadow: 0 5px 0 var(--line); display: flex; flex-direction: column; gap: 6px;
}
.text-title { margin: 0; font-size: 1.15rem; color: var(--accent-dark); text-align: center; }
.text-body { margin: 0; font-size: 1.3rem; line-height: 1.5; font-weight: 700; }
.text-listen { align-self: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: 0.95rem; }

/* les ombres : silhouettes noires */
.shadow { display: inline-block; line-height: 1; filter: brightness(0) opacity(0.85); }

/* « Where is the cat? » : petites scènes */
.choices-scenes.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices-scenes.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices-scenes .choice { min-height: 0; padding: 6px; }
.scene { position: relative; display: block; width: 100%; max-width: 140px; aspect-ratio: 1; container-type: inline-size; }
.choices-scenes.n4 .scene { max-width: 118px; }
.scene-table { position: absolute; inset: 0; }
.tbl-top { position: absolute; left: 12%; right: 12%; top: 46%; height: 8%; border-radius: 4px; background: #b5753a; }
.tbl-leg { position: absolute; top: 53%; bottom: 6%; width: 7%; background: #8a5426; border-radius: 0 0 3px 3px; }
.tbl-leg.l { left: 18%; }
.tbl-leg.r { right: 18%; }
.scene-who { position: absolute; line-height: 1; font-size: 30px; font-size: 30cqi; transform: translate(-50%, -100%); }
.scene-on .scene-who { left: 50%; top: 47%; }
.scene-under .scene-who { left: 50%; top: 92%; }
.scene-next .tbl-top { left: 2%; right: 42%; }
.scene-next .tbl-leg.l { left: 7%; }
.scene-next .tbl-leg.r { right: 47%; }
.scene-next .scene-who { left: 80%; top: 94%; }
.scene-in .scene-who { left: 50%; top: 66%; z-index: 0; }
.scene-in .scene-basket { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); line-height: 1; font-size: 56px; font-size: 52cqi; z-index: 1; }

/* relier au doigt : le trait suit le doigt ; avec « vanish », la paire juste disparaît */
.match-lines .trace { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.match-lines .trace.live { stroke: var(--accent); }
.match-item { touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity 0.3s; }
.match.vanish .match-item.matched { background: #e3f8ee; color: var(--good-dark); box-shadow: 0 5px 0 #b6e8cf, 0 0 0 3px var(--good) inset; }
.match-item.vanished { opacity: 0; pointer-events: none; }
.match.pairs-6 .match-col, .match.pairs-8 .match-col { gap: 8px; }
.match.pairs-6 .match-item { min-height: 52px; font-size: 1.45rem; }
.match.pairs-8 .match-item { min-height: 44px; font-size: 1.3rem; border-radius: 16px; }
.play-match .feedback { min-height: 64px; }

/* sudoku */
.stage-sudoku { padding: 4px 0; }
.sudoku {
  display: grid; grid-template-columns: repeat(var(--size), minmax(0, 1fr)); grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  width: min(100%, 380px, calc(100vh / var(--zoom, 1) - 380px));
  width: min(100%, 380px, calc(100dvh / var(--zoom, 1) - 380px));
  aspect-ratio: 1; background: var(--card); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden;
  box-shadow: 0 5px 0 var(--line); container-type: inline-size;
}
.sudoku-cell {
  min-width: 0; min-height: 0; display: grid; place-items: center; line-height: 1;
  border-right: 1px solid #d9cfbd; border-bottom: 1px solid #d9cfbd;
  font-size: 24px; font-size: calc(52cqi / var(--size)); font-weight: 700; color: var(--accent-dark);
}
.sudoku-cell.box-right { border-right: 3px solid var(--ink); }
.sudoku-cell.box-bottom { border-bottom: 3px solid var(--ink); }
.sudoku-cell.given { background: #f4efe4; color: var(--ink); }
.sudoku-cell.selected { background: var(--accent-soft); box-shadow: inset 0 0 0 4px var(--accent); }
.sudoku-cell.found { animation: pop 0.3s ease-out; }
.sudoku-palette { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.sudoku-symbol {
  min-width: 0; min-height: 64px; border-radius: 18px; background: var(--card);
  font-size: min(2rem, 7.5vw); font-weight: 700;
  box-shadow: 0 5px 0 var(--line), 0 0 0 3px var(--line) inset;
}
.sudoku-symbol:active { transform: translateY(3px); }
.sudoku-symbol.hint { animation: glow 1s ease-in-out infinite; box-shadow: 0 5px 0 #e6b800, 0 0 0 4px var(--hint) inset; }


/* =====================================================================
   Version 1.3 : premier lancement, espace parents en onglets
   ===================================================================== */
.welcome { gap: 14px; padding-bottom: 24px; }
.welcome-hero { text-align: center; padding-top: 10px; }
.welcome-avatars { display: flex; justify-content: center; gap: 12px; }
.welcome-title { margin: 10px 0 4px; font-size: 2.2rem; }
.welcome-text { margin: 0 auto; max-width: 30ch; color: var(--muted); font-size: 1.05rem; }
.welcome-actions { display: flex; flex-direction: column; gap: 12px; }
.welcome-actions .big-btn, .add-child, .share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.child-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.child-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px;
  border-radius: 999px; background: var(--bg); font-weight: 700;
}

.child-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 700; font-size: 0.95rem; color: var(--muted); }
.text-input {
  min-height: 52px; border-radius: 14px; border: 2px solid var(--line); background: #fff;
  padding: 0 14px; font: inherit; font-size: 1.3rem; font-weight: 700; color: var(--ink);
  width: 100%; text-align: left;
}
.text-input:focus { border-color: var(--lecture); outline: none; box-shadow: 0 0 0 3px var(--lecture-soft); }
.look-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.look-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  border-radius: 18px; background: var(--bg); font-weight: 700;
  box-shadow: 0 0 0 2px var(--line) inset;
}
.look-option.on { background: #fff; box-shadow: 0 0 0 3px var(--lecture) inset; }
.look-option.on span:last-child::before { content: '✓ '; }
.grade-picker { justify-content: space-between; }
.grade-picker .seg { flex: 1; min-height: 44px; }
.form-error { margin: 0; min-height: 1.2em; color: #c43d3d; font-weight: 700; }

/* espace parents : trois onglets */
.parent-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  background: var(--card); border-radius: 16px; padding: 4px; box-shadow: 0 3px 0 var(--line);
}
.parent-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px;
  border-radius: 12px; font-weight: 700; font-size: 0.9rem; color: var(--muted);
}
.parent-tab.on { background: var(--lecture); color: #fff; }
.tab-panel { display: flex; flex-direction: column; gap: 14px; }
.follow-grade { margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.child-tabs { flex-wrap: wrap; justify-content: center; }
.child-list { display: flex; flex-direction: column; gap: 4px; }
.child-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.child-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.child-row-text b { font-size: 1.15rem; overflow-wrap: anywhere; }
.pill-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700;
  background: var(--lecture-soft); color: var(--lecture-dark);
}
.add-child { margin-top: 10px; min-height: 56px; font-size: 1.15rem; }
.danger-zone { display: flex; flex-direction: column; gap: 12px; }

/* interrupteurs façon iOS (la position du rond indique l'état, pas seulement la couleur) */
.setting input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; cursor: pointer;
  width: 52px; height: 32px; border-radius: 999px; background: #cfc8b8; transition: background 0.2s; margin: 0;
}
.setting input[type="checkbox"]::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
.setting input[type="checkbox"]:checked { background: var(--good); }
.setting input[type="checkbox"]:checked::after { transform: translateX(20px); }
.setting input[type="checkbox"]:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }

/* compléments de mise en page (petits écrans) */
.choices-objects.n3 .objects .object { font-size: min(20px, 4.6vw); }
.order-items.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.order-items.n6 .order-item { font-size: min(1.6rem, 6vw); min-height: 64px; }
.order-slots.n6 .order-slot { height: 60px; font-size: min(1.5rem, 6vw); }
/* dictée : jusqu'à 7 lettres et 2 lettres pièges, sur deux rangées */
.order-items.n7, .order-items.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.order-items.n9 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.order-items.n7 .order-item, .order-items.n8 .order-item, .order-items.n9 .order-item { min-height: 58px; font-size: min(1.6rem, 6.4vw); }
.order-slots.n7 .order-slot { height: 56px; font-size: min(1.4rem, 5.4vw); }
@media (max-height: 700px) {
  .stage-text { padding: 8px 12px 6px; gap: 4px; }
  .text-body { font-size: 1.1rem; line-height: 1.4; }
  .text-listen { min-height: 40px; }
}
.choices-objects.n3 .choice { padding: 8px 2px; }
.choices-objects.n3 .objects .object { font-size: min(17px, 3.8vw); }
/* illustration d'un calcul (5 + 5 objets) : toujours dans la largeur de l'écran */
.operation-visual { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.operation-visual .objects.small .object { font-size: min(24px, 5.4vw); }

/* =====================================================================
   Téléphone en paysage : le dessin à gauche, la consigne et les réponses
   à droite ; « Bravo ! » s'affiche en bulle flottante en haut.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
  .screen {
    max-width: 1000px;
    padding: calc(var(--safe-top) + 2px) max(16px, env(safe-area-inset-right)) calc(var(--safe-bottom) + 6px) max(16px, env(safe-area-inset-left));
  }
  .top-bar { min-height: 46px; }
  .icon-btn { width: 42px; height: 42px; font-size: 1.3rem; }
  .sound-toggle { width: 42px; height: 42px; font-size: 1.25rem; }

  /* écran de jeu en deux colonnes */
  .screen.play {
    display: grid; column-gap: 24px; row-gap: 6px; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "top top" "instr zone" "instr zone";
  }
  .screen.play:has(> .stage) { grid-template-areas: "top top" "stage instr" "stage zone"; }
  .screen.play.play-match:not(:has(> .stage)),
  .screen.play.play-fill:not(:has(> .stage)),
  .screen.play.play-order:not(:has(> .stage)) { grid-template-areas: "top top" "instr instr" "zone zone"; }
  .play > .top-bar { grid-area: top; }
  .play > .instruction { grid-area: instr; margin: 0; }
  .play > .stage { grid-area: stage; min-height: 0; padding: 0; align-self: stretch; }
  .play > .choices { grid-area: zone; margin: 0; min-height: 0; align-self: center; }
  .play > .feedback {
    position: fixed; z-index: 30; top: calc(var(--safe-top) + 4px); left: 50%; transform: translateX(-50%);
    min-height: 0; max-width: min(70vw, 560px); padding: 2px 18px; border-radius: 18px;
    background: rgba(255, 255, 255, 0.97); box-shadow: 0 4px 16px rgba(43, 45, 66, 0.2); pointer-events: none;
  }
  .play > .feedback:empty { display: none; }
  .play-keypad .feedback, .play-fill .feedback, .play-match .feedback { min-height: 0; }
  .instruction { gap: 10px; }
  .instruction .avatar-sm { width: 48px; height: 48px; }
  .instruction .bubble { font-size: 1rem; padding: 8px 12px; }

  /* dessins : à la hauteur de l'écran */
  .stage-picture { font-size: min(110px, 28dvh); padding: 2px 20px; }
  .stage-listen { width: 104px; height: 104px; font-size: 50px; }
  .object { font-size: min(40px, 9dvh); }
  .objects.per-10 .object { font-size: min(26px, 6.4dvh); }
  .scatter { width: min(100%, calc((100dvh - 80px) * 1.25)); }
  .maze, .sudoku { width: min(100%, calc(100dvh - 80px)); }
  .lasso-field, .path-grid, .path-grid.spell { width: min(100%, calc((100dvh - 80px) * var(--cols) / var(--rows))); }
  .stage-clock { width: min(220px, calc(100dvh - 90px)); }
  .equation { font-size: 2.4rem; }
  .equation.big { font-size: 2.8rem; }
  .stage-word { font-size: 2.6rem; padding: 10px 24px; }
  .stage-sentence, .story-text { font-size: 1.2rem; padding: 12px 16px; }
  .text-body { font-size: 1.05rem; line-height: 1.4; }
  .stage-text { padding: 8px 14px 6px; gap: 4px; }
  .spell-picture { font-size: 52px; }

  /* réponses */
  .choice { min-height: 64px; }
  .choices-objects .choice { min-height: 100px; }
  .choices-pictures .choice { min-height: 80px; }
  .key { min-height: 48px; }
  .keypad { gap: 8px; }
  .maze-controls {
    display: grid; grid-template-columns: repeat(3, 58px); grid-template-areas: ". up hint" "left . right" ". down .";
    gap: 8px; justify-content: center;
  }
  .maze-controls .maze-arrow:nth-child(1) { grid-area: left; }
  .maze-controls .maze-arrow:nth-child(2) { grid-area: up; }
  .maze-controls .maze-arrow:nth-child(3) { grid-area: down; }
  .maze-controls .maze-arrow:nth-child(4) { grid-area: right; }
  .maze-controls .maze-arrow:nth-child(5) { grid-area: hint; }
  .sudoku-palette { grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)); }

  /* relier : les étiquettes sur deux lignes, les traits vont de haut en bas */
  .match { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 64px; width: 100%; }
  .match-col { flex-direction: row; justify-content: center; gap: 8px; }
  .match-col .match-item { flex: 1 1 0; min-width: 0; max-width: 180px; min-height: 52px; }
  .match.pairs-8 .match-item, .match.pairs-6 .match-item { min-height: 48px; font-size: 1.2rem; }

  /* calculs à trous : les calculs à gauche, les étiquettes à droite */
  .fill { flex-direction: row; align-items: center; gap: 24px; width: 100%; }
  .fill-rows { flex: 1.2; gap: 6px; }
  .tile-tray { flex: 1; }
  .fill-row, .fill.rows-4 .fill-row, .fill.rows-5 .fill-row { padding: 2px 10px; font-size: 1.4rem; }
  .fill-box, .fill.rows-4 .fill-box, .fill.rows-5 .fill-box { height: 40px; width: 56px; font-size: 1.4rem; }
  .tile, .tile-tray.tiles-8 .tile, .tile-tray.tiles-10 .tile { min-height: 46px; font-size: 1.5rem; }

  /* ranger */
  .order { gap: 14px; width: 100%; }
  .order-item.order-picture { min-height: 92px; }
  /* une phrase à remettre dans l'ordre : 5 mots tiennent dans la colonne de droite */
  .order.words .order-items { gap: 6px; }
  .order.words .order-item, .order.words .order-slot { font-size: 0.9rem; }

  /* accueil, profils, liste des jeux */
  .home-hero { margin: 0 0 10px; }
  .home-title { font-size: 1.8rem; }
  .home-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .domain-btn { min-height: 64px; padding: 8px 16px; font-size: 1.5rem; }
  .domain-icon { font-size: 1.9rem; }
  .profiles-title { font-size: 1.8rem; margin: 0 0 10px; }
  .profile-list { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); justify-content: center; }
  .profile-card { padding: 10px 8px; }
  .avatar-xl, .profile-list.n3 .avatar-xl, .profile-list.n4 .avatar-xl, .profile-list.n5 .avatar-xl, .profile-list.n6 .avatar-xl {
    width: min(104px, 27dvh); height: min(104px, 27dvh);
  }
  .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* en paysage, la colonne des réponses est étroite : tailles fixes (pas en vw) */
  .choices-numbers .choice { font-size: 1.9rem; }
  .choices .choice.digits-3 { font-size: 1.55rem; }
  .choices .choice.digits-4 { font-size: 1.3rem; }
  .choices-letters .choice { font-size: 2.2rem; }
  .choices-letters.n4 .choice { font-size: 1.7rem; }
  .choices-words .choice { font-size: 1.45rem; min-height: 60px; }
  .choices-words .choice.long { font-size: 1.15rem; }
  .choices-pictures .choice { font-size: 2.1rem; }
  .choices-objects .objects .object, .choices-objects.n3 .objects .object { font-size: 18px; }
  .choices-objects.n3 { grid-template-columns: minmax(0, 1fr); }
  .choices-objects.n3 .choice { min-height: 52px; padding: 4px; }
  .choice .swatch { width: 44px; height: 44px; }
  .choices-scenes.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choices-scenes .scene, .choices-scenes.n4 .scene { max-width: 96px; }
  .cell { width: min(40px, 10dvh); }
  .frame { gap: 4px; padding: 6px; }
  .seq-item { min-width: 48px; height: 58px; font-size: 1.7rem; }
  .screen.play:has(> .stage) .path-grid { width: min(100%, calc((100dvh - 150px) * var(--cols) / var(--rows))); }
}


/* =====================================================================
   Version 1.4 : défi du jour, le monde, symétrie, cubes
   ===================================================================== */
.daily-result { margin: 4px 0 0; font-weight: 700; font-size: 1.2rem; color: #a61e4d; }
.choices-answers.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sequence.words .seq-item { font-size: 1.4rem; padding: 0 14px; }

.stage-sym { padding: 4px 0; }
.sym-grid {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px;
  width: min(100%, 340px, calc(100vh / var(--zoom, 1) - 380px));
  width: min(100%, 340px, calc(100dvh / var(--zoom, 1) - 380px));
  aspect-ratio: var(--cols) / var(--rows); padding: 3px; border-radius: 12px; background: var(--line);
}
.sym-grid::after { content: ''; position: absolute; background: var(--ink); border-radius: 3px; pointer-events: none; }
.sym-grid.axis-v::after { top: -8px; bottom: -8px; left: calc(50% - 2px); width: 4px; }
.sym-grid.axis-h::after { left: 0; right: 0; top: calc(50% - 2px); height: 4px; }
.sym-cell { position: relative; min-width: 0; min-height: 0; border-radius: 4px; background: #fff; }
.sym-cell.model { background: #f1ebde; }
.sym-cell.on { background: var(--accent); }
.sym-cell.model.on { background: var(--accent-dark); }
.sym-cell.target:active { transform: scale(0.94); }
.sym-cell.wrong::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.1rem; background: var(--bad); border-radius: 4px; }
.sym-cell.hint { outline: 3px dashed var(--accent-dark); outline-offset: -4px; }
.sym-zone { display: flex; justify-content: center; }

.stage-cubes svg {
  display: block; width: auto; max-width: 100%;
  height: min(250px, 34vh); height: min(250px, 34dvh);
  filter: drop-shadow(0 4px 0 var(--line));
}
.stage-cubes polygon { stroke: #6b3d10; stroke-width: 0.035; stroke-linejoin: round; }
.cube-top { fill: #ffd35c; }
.cube-left { fill: #f2a43a; }
.cube-right { fill: #d97f27; }

@media (orientation: landscape) and (max-height: 520px) {
  .sym-grid { width: min(100%, calc((100dvh - 90px) * var(--cols) / var(--rows))); }
  .choices-answers .choice { font-size: 1.05rem; }
  .stage-cubes svg { height: calc(100dvh - 110px); }
}

/* monnaie : pièces et billets (le montant est toujours écrit) */
.stage-money { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; max-width: 360px; }
.coin {
  display: inline-grid; place-items: center; grid-auto-flow: column; gap: 1px;
  width: 54px; height: 54px; border-radius: 50%; font-weight: 700; font-size: 0.85rem; color: #3b2a05;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 5px var(--ring);
}
.coin b { font-size: 1.35rem; }
.coin-1 { background: #ffd34d; --ring: #c9ccd3; }
.coin-2 { background: #c9ccd3; --ring: #f2c230; }
.note {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 84px; height: 46px; border-radius: 8px; font-weight: 700; color: #1d1d27;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}
.note b { font-size: 1.3rem; }
.note-5 { background: #c6ccd6; }
.note-10 { background: #f4a7a0; }
.note-20 { background: #9ec5f0; }
.note-50 { background: #f6c27a; }
.stage-price { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.price-item { font-size: min(90px, 22vw); line-height: 1.1; }
.price-tag {
  background: #fff; border: 3px solid var(--ink); border-radius: 10px 22px 22px 10px; padding: 2px 18px;
  font-size: 1.7rem; font-weight: 700; box-shadow: 0 3px 0 var(--line);
}
.price-paid { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.pay { display: flex; flex-direction: column; gap: 10px; }
.pay-tray {
  min-height: 70px; padding: 8px; border-radius: 18px; border: 3px dashed #e9c98f; background: #fff3dc;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
}
.pay-empty { color: var(--muted); font-weight: 700; }
.pay-coin { border-radius: 12px; }
.pay-coin .coin, .pay-coin .note { transform: scale(0.85); }
.pay-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pay-add { border-radius: 14px; padding: 4px; }
.pay-add:active { transform: translateY(3px); }
/* téléphone en paysage : la caisse, les pièces et le bouton tiennent à côté du dessin */
@media (orientation: landscape) and (max-height: 520px) {
  .pay { gap: 6px; }
  .pay-tray { min-height: 48px; padding: 4px; }
  .pay-buttons { gap: 6px; }
  .pay-add { padding: 2px; }
  .pay-add .coin { width: 44px; height: 44px; }
  .pay-add .coin b { font-size: 1.1rem; }
  .pay-add .note { width: 70px; height: 38px; }
  .pay .validate-btn { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
}

/* mesures : règle, crayons, balance */
.stage-ruler svg { display: block; width: min(100%, 420px); height: auto; }
.ruler-body { fill: #ffe9a8; stroke: #c99a2e; stroke-width: 0.8; }
.ruler-ticks line { stroke: #6b4a10; stroke-width: 0.6; }
.ruler-ticks text { font-size: 6px; text-anchor: middle; fill: #4a330b; font-weight: 700; font-family: inherit; }
.pencil-body { fill: #3d7dff; }
.pencil-tip { fill: #f2c17a; stroke: #b07a2a; stroke-width: 0.4; }
.pencil-end { fill: #ff8fab; }
.choices-bars.n3 { grid-template-columns: minmax(0, 1fr); }
.choices-bars .choice { min-height: 56px; justify-items: start; padding: 8px 12px; }
.pencil-choice {
  display: block; height: 16px; border-radius: 3px 10px 10px 3px; background: var(--pencil);
  box-shadow: inset -12px 0 0 #f2c17a;
}
.stage-balance svg { display: block; width: min(100%, 300px); height: auto; }
.balance-foot { fill: #8a5426; }
.balance-beam { fill: #b5753a; }
.balance-rope { stroke: #6b3d10; stroke-width: 1; }
.balance-pan { fill: #c9ccd3; stroke: #8a8f99; stroke-width: 0.8; }
.balance-pivot { fill: var(--ink); }
.balance-emoji { font-size: 14px; text-anchor: middle; }

/* calendrier */
.stage-calendar { background: var(--card); border-radius: 18px; padding: 8px 10px 10px; box-shadow: 0 4px 0 var(--line); width: min(100%, 330px); }
.cal-month { text-align: center; font-weight: 700; font-size: 1.15rem; color: var(--accent-dark); text-transform: capitalize; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.cal-head { font-weight: 700; color: var(--muted); font-size: 0.85rem; }
.cal-day { font-weight: 700; font-size: 0.95rem; padding: 3px 0; border-radius: 8px; }
.cal-day.mark { outline: 3px solid var(--accent); background: var(--accent-soft); }

@media (orientation: landscape) and (max-height: 520px) {
  .price-item { font-size: min(80px, 20dvh); }
  .stage-money { max-width: 100%; }
  .cal-day { padding: 1px 0; font-size: 0.85rem; }
}

/* les pièces du carré */
.stage-tangram svg { display: block; width: min(220px, 56vw); height: auto; }
.tangram-piece { stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.tangram-hole { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 4 3; }
.tangram-choice svg { display: block; width: min(56px, 13vw); height: auto; }
.choice-piece { fill: var(--accent); stroke: var(--accent-dark); stroke-width: 2; }
@media (orientation: landscape) and (max-height: 520px) {
  .stage-tangram svg { width: min(220px, calc(100dvh - 110px)); }
}

/* =====================================================================
   Version 1.5 : révisions, objectifs, pause, personnage, jeux bonus,
   histoires en karaoké, lecture facilitée, décors de saison
   ===================================================================== */
.domain-revision { background: #6741d9; box-shadow: 0 6px 0 #4c2fb0; font-size: 1.5rem; min-height: 64px; }
.domain-theme-revision { --accent: #6741d9; --accent-dark: #4c2fb0; --accent-soft: #ece6ff; }
.goal-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 4px; font-weight: 700; color: var(--muted); }
.goal-bar.reached { color: var(--good-dark); }
.goal-track { display: flex; gap: 6px; }
.goal-step { width: 26px; height: 10px; border-radius: 6px; background: var(--line); }
.goal-step.on { background: var(--good); }
.pause { justify-content: flex-start; }
.pause-card {
  margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  background: var(--card); border-radius: 26px; padding: 22px 18px; box-shadow: 0 5px 0 var(--line);
}
.pause-card h1 { margin: 0; font-size: 1.7rem; }
.pause-card p { margin: 0; color: var(--muted); }
.pause-ideas { font-size: 2rem; letter-spacing: 0.3em; }
.setting-choice { flex-wrap: wrap; }
.setting-choice .segmented { flex-wrap: wrap; }

/* habiller son personnage */
.dress { gap: 12px; }
.dress-btn { margin-bottom: 10px; }
.dress-preview { display: flex; justify-content: center; }
.dress-note { text-align: center; margin: 0; }
.shirt-row { display: flex; flex-wrap: wrap; gap: 10px; }
.shirt-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; }
.shirt-swatch {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 1.3rem; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}
.shirt-btn.on .shirt-swatch { outline: 4px solid var(--ink); outline-offset: 2px; }
.shirt-btn:disabled .shirt-swatch { opacity: 0.35; }
.lock { font-size: 0.75rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.accessory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.accessory-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 84px;
  border-radius: 16px; background: var(--bg); font-weight: 700; font-size: 0.85rem; box-shadow: 0 0 0 2px var(--line) inset;
}
.accessory-btn.on { background: #fff; box-shadow: 0 0 0 3px var(--lecture) inset; }
.accessory-btn:disabled { opacity: 0.6; }
.accessory-emoji { font-size: 2rem; line-height: 1.1; }
.avatar-extra { position: absolute; top: -4%; left: 50%; transform: translateX(-50%); font-size: 38%; line-height: 1; }
.avatar-xl .avatar-extra { font-size: 2.6rem; }
.avatar-md .avatar-extra { font-size: 1.8rem; }
.avatar-sm .avatar-extra, .avatar-xs .avatar-extra { font-size: 1rem; }

/* jeux bonus */
.bonus-btn { background: #fff6d6; }
.bonus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bonus-play { gap: 10px; }
.bubble-hud { font-weight: 700; font-size: 1.2rem; text-align: center; }
.bubble-field {
  position: relative; flex: 1; min-height: 60vh; overflow: hidden; border-radius: 24px;
  background: linear-gradient(180deg, #d6f0ff, #eaf7ff); touch-action: manipulation;
}
.pop-bubble {
  position: absolute; bottom: -90px; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem;
  background: radial-gradient(circle at 30% 30%, #fff, hsl(var(--hue) 90% 75% / 0.6) 60%, hsl(var(--hue) 90% 60% / 0.5));
  box-shadow: inset 0 0 0 2px hsl(var(--hue) 80% 60% / 0.6);
  animation: rise linear forwards;
}
.pop-bubble.popped { animation: pop-out 0.25s ease-out forwards; }
@keyframes rise { to { transform: translateY(calc(-60vh - 180px)); } }
@keyframes pop-out { to { transform: scale(1.6); opacity: 0; } }
.bonus-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 1.5rem; font-weight: 700; }
.puzzle-board {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px;
  width: min(100%, 360px, calc(100dvh - 260px)); aspect-ratio: 1; margin: 0 auto;
}
.puzzle-tile { position: relative; overflow: hidden; border-radius: 10px; background: var(--card); padding: 0; box-shadow: 0 3px 0 var(--line); }
.puzzle-tile.selected { outline: 4px solid var(--hint); outline-offset: -4px; z-index: 1; }
.puzzle-img {
  position: absolute; width: calc(var(--n) * 100%); height: calc(var(--n) * 100%);
  left: calc(var(--x) * -100%); top: calc(var(--y) * -100%); border-radius: 0;
}
.puzzle-board.solved { gap: 0; }
.puzzle-board.solved .puzzle-tile { border-radius: 0; box-shadow: none; }
.bonus-done { align-self: center; }
.coloring { display: flex; justify-content: center; }
.coloring svg { width: min(100%, 340px, calc(100dvh - 300px)); height: auto; background: #fff; border-radius: 22px; box-shadow: 0 5px 0 var(--line); }
.coloring [data-zone] { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; cursor: pointer; }
.palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.paint { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
.paint.on { outline: 4px solid var(--ink); outline-offset: 3px; }

/* histoires en karaoké */
.stage-karaoke {
  width: 100%; background: var(--card); border-radius: 22px; padding: 10px 16px; box-shadow: 0 5px 0 var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.karaoke-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.karaoke-emoji { font-size: 2.2rem; line-height: 1; }
.karaoke-text { margin: 0; font-size: 1.3rem; line-height: 1.55; font-weight: 700; }
.w { border-radius: 6px; transition: background 0.15s; }
.w.on { background: #ffe066; box-shadow: 0 0 0 3px #ffe066; }
/* histoire lue par un parent (enregistrement) : toute la phrase lue s'allume */
.k-sentence { border-radius: 6px; transition: background 0.2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.k-sentence.on { background: #ffe066; box-shadow: 0 0 0 3px #ffe066; }
@media (max-height: 700px) {
  .karaoke-text { font-size: 1.1rem; line-height: 1.4; }
}

/* lecture facilitée (dyslexie) : plus d'espace, mots en couleurs alternées */
.easy-read .bubble, .easy-read .text-body, .easy-read .karaoke-text, .easy-read .stage-sentence, .easy-read .story-text,
.easy-read .choices-answers .choice, .easy-read .choices-sentences .choice, .easy-read .choices-words .choice {
  letter-spacing: 0.06em; word-spacing: 0.22em; line-height: 1.6;
}
.easy-read .text-body .w:nth-of-type(even), .easy-read .karaoke-text .w:nth-of-type(even),
.easy-read .stage-sentence .w:nth-of-type(even), .easy-read .story-text .w:nth-of-type(even) { color: #1d4ed8; }

/* décors de saison */
.season-decor { display: flex; justify-content: center; gap: 14px; font-size: 1.5rem; }
.season-decor span { animation: bob 3s ease-in-out infinite; }
.season-decor span:nth-child(2) { animation-delay: 0.4s; }
.season-decor span:nth-child(3) { animation-delay: 0.8s; }
.season-decor span:nth-child(4) { animation-delay: 1.2s; }
body[data-season="noel"] { background: #f4f8ff; }
body[data-season="halloween"] { background: #fff4e8; }
body[data-season="printemps"] { background: #fbfff1; }
body[data-season="ete"] { background: #fffbea; }

/* =====================================================================
   Accueil en rubriques : le défi en haut, les rubriques en tuiles,
   l'album et le personnage en bas
   ===================================================================== */
.domain-theme-histoires { --accent: #c026d3; --accent-dark: #9d1aab; --accent-soft: #fbe8fd; }
.domain-theme-jeux { --accent: #0d9488; --accent-dark: #0a7068; --accent-soft: #dcf5f2; }
.domain-theme-temps { --accent: #a16207; --accent-dark: #7c4a05; --accent-soft: #fdf1d8; }
.domain-theme-monde { --accent: #4d7c0f; --accent-dark: #3a5e0b; --accent-soft: #ecf6dc; }
.domain-histoires { background: #c026d3; box-shadow: 0 6px 0 #9d1aab; }
.domain-jeux { background: #0d9488; box-shadow: 0 6px 0 #0a7068; }
.domain-temps { background: #a16207; box-shadow: 0 6px 0 #7c4a05; }
.domain-monde { background: #4d7c0f; box-shadow: 0 6px 0 #3a5e0b; }
.domain-dress { background: #e8f0ff; color: var(--ink); box-shadow: 0 6px 0 #c9d8f5; font-size: 1.3rem; min-height: 64px; }
.home-menu { display: flex; flex-direction: column; gap: 12px; }
.home-top { display: flex; gap: 10px; }
.home-top > * { flex: 1 1 0; min-width: 0; }
.home-top .domain-btn { min-height: 64px; font-size: 1.35rem; padding: 8px 14px; }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-grid .domain-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.domain-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 92px; padding: 8px 6px; border-radius: 22px; color: #fff; text-align: center;
  font-weight: 700; font-size: 1.2rem; line-height: 1.15;
}
.domain-tile:active { transform: translateY(4px); }
.domain-tile .domain-icon { font-size: 2.2rem; }
.home-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-bottom .domain-btn { min-height: 64px; font-size: 1.15rem; padding: 8px 10px; gap: 8px; }
.home-bottom .domain-icon { font-size: 1.6rem; }
.home-bottom .pill { padding: 2px 8px; font-size: 0.9rem; }
@media (max-height: 760px) {
  .domain-tile { min-height: 74px; font-size: 1.1rem; }
  .domain-tile .domain-icon { font-size: 1.8rem; }
  .home-menu { gap: 10px; }
  .home-grid { gap: 10px; }
  .home-hero { margin-bottom: 6px; }
  .home-title { font-size: 1.7rem; }
  .season-decor { font-size: 1.1rem; }
}
/* écran en paysage (tablette, ordinateur) : les rubriques sur 4 colonnes, tout tient sans défiler */
@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-grid .domain-tile:last-child:nth-child(odd) { grid-column: auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-grid .domain-tile:last-child:nth-child(odd) { grid-column: auto; }
  .domain-tile { min-height: 60px; flex-direction: row; gap: 8px; font-size: 1rem; }
  .domain-tile .domain-icon { font-size: 1.5rem; }
  .season-decor { display: none; }
  .home-title { font-size: 1.5rem; }
  .home-top .domain-btn, .home-bottom .domain-btn { min-height: 48px; }
}

/* relier des couleurs : la paire prend la couleur reliée, texte foncé sur les couleurs claires */
.match-item.matched.light-pair { color: var(--ink); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.12), inset 0 0 0 3px rgba(0, 0, 0, 0.12); }
.match-item.matched .swatch { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(0, 0, 0, 0.15); }
.home-bottom .domain-btn { font-size: 1rem; }
.home-bottom .domain-btn span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-height: 760px) {
  .home-hero:has(.goal-bar) .season-decor { display: none; }
}

/* ===================================================================== 1.6 : puzzle, memory, coloriage magique, points, drapeaux */

/* le puzzle : toucher deux pièces pour les échanger */
.stage-puzzle { padding: 4px 0; min-height: 0; }
.pz-board {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px;
  width: min(100%, 400px, calc((100vh / var(--zoom, 1) - 340px) * var(--cols) / var(--rows)));
  width: min(100%, 400px, calc((100dvh / var(--zoom, 1) - 340px) * var(--cols) / var(--rows)));
  aspect-ratio: var(--cols) / var(--rows); padding: 3px; border-radius: 14px; background: var(--line);
}
.pz-tile { position: relative; min-width: 0; min-height: 0; padding: 0; border-radius: 6px; overflow: hidden; background: #fff; }
.pz-tile.selected { outline: 4px solid var(--hint); outline-offset: -4px; z-index: 1; transform: scale(0.94); }
.pz-tile.placed::after {
  content: '✓'; position: absolute; right: 3px; bottom: 2px; font-size: 0.8rem; font-weight: 700; color: #fff;
  background: var(--good); border-radius: 50%; width: 1.1rem; height: 1.1rem; display: grid; place-items: center;
}
.pz-board.solved { gap: 0; }
.pz-board.solved .pz-tile { border-radius: 0; }
.pz-board.solved .pz-tile::after { display: none; }
.pz-piece, .pz-piece svg { display: block; width: 100%; height: 100%; }
.pz-zone { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pz-model-label { font-weight: 700; color: var(--muted); }
.pz-hint { width: 52px; height: 52px; border-radius: 50%; background: var(--card); font-size: 1.6rem; box-shadow: 0 4px 0 var(--line), inset 0 0 0 3px var(--line); }
.pz-hint:active { transform: translateY(3px); }
.pz-model {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); height: 64px;
  aspect-ratio: var(--cols) / var(--rows); border-radius: 8px; overflow: hidden; box-shadow: 0 3px 0 var(--line);
}

/* le memory */
.stage-memory { padding: 4px 0; min-height: 0; }
.memory-grid {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; container-type: inline-size;
  width: min(100%, 460px, calc((100vh / var(--zoom, 1) - 330px) * var(--cols) / var(--rows)));
  width: min(100%, 460px, calc((100dvh / var(--zoom, 1) - 330px) * var(--cols) / var(--rows)));
}
.memory-card {
  position: relative; min-width: 0; aspect-ratio: 1; padding: 2px; border-radius: 14px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 8px, var(--accent-dark) 8px, var(--accent-dark) 16px);
  box-shadow: 0 4px 0 var(--line); transition: transform 0.2s;
}
.memory-card:active { transform: translateY(3px); }
.memory-face {
  visibility: hidden; line-height: 1; font-size: 30px; font-size: calc(56cqi / var(--cols));
  overflow-wrap: anywhere; text-align: center; max-width: 100%;
}
.memory-face.small { font-size: calc(17cqi / var(--cols)); letter-spacing: -1px; }
.memory-face.word { font-size: calc(17cqi / var(--cols)); font-weight: 700; color: var(--ink); }
.memory-card.open, .memory-card.found { background: var(--card); box-shadow: 0 4px 0 var(--line), inset 0 0 0 3px var(--line); }
.memory-card.open .memory-face, .memory-card.found .memory-face { visibility: visible; }
.memory-card.open { animation: pop 0.25s ease-out; }
.memory-card.found { box-shadow: 0 4px 0 var(--line), inset 0 0 0 4px var(--good); }
.memory-zone { display: flex; justify-content: center; align-items: baseline; gap: 6px; font-weight: 700; color: var(--muted); }
.memory-count { font-size: 1.3rem; color: var(--ink); }

/* le coloriage magique : un nombre dans chaque zone, sa couleur dans la palette */
.stage-magic { padding: 4px 0; min-height: 0; }
.magic-drawing {
  display: block; width: min(100%, 360px, calc(100vh / var(--zoom, 1) - 340px)); width: min(100%, 360px, calc(100dvh / var(--zoom, 1) - 340px));
  height: auto; aspect-ratio: 1; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--line);
}
.magic-zone { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; cursor: pointer; transition: fill 0.2s; }
.magic-zone.shake { animation: shake 0.4s; }
.magic-label {
  font-size: 9px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none;
  paint-order: stroke; stroke: #fff; stroke-width: 2.4px; stroke-linejoin: round;
}
.magic-label.long { font-size: 7px; }
.magic-palette { display: flex; flex-direction: column; gap: 8px; }
.magic-buttons { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.magic-color {
  min-width: 0; min-height: 60px; border-radius: 16px; background: var(--card); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 0 var(--line), inset 0 0 0 3px var(--line);
}
.magic-color.on { box-shadow: 0 4px 0 var(--line), inset 0 0 0 4px var(--ink); transform: translateY(-3px); }
.magic-color.hint { animation: glow 1s ease-in-out infinite; }
.magic-swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--paint); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15); }
.magic-n { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.magic-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 1.2rem; }
.magic-key b { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); }

/* les points à relier */
.stage-dots { padding: 4px 0; min-height: 0; }
.dots-drawing {
  display: block; width: min(100%, 400px, calc(100vh / var(--zoom, 1) - 300px)); width: min(100%, 400px, calc(100dvh / var(--zoom, 1) - 300px));
  height: auto; aspect-ratio: 1; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--line); touch-action: none;
}
.dots-shape { fill: transparent; transition: fill 0.6s; }
.dots-drawing.finished .dots-shape { fill: var(--accent-soft); }
.dots-line { fill: none; stroke: var(--accent-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dots-rubber { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2 2; stroke-linecap: round; }
.dot-point { fill: var(--ink); }
.dot-label { font-size: 5.6px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.dot.next .dot-point { fill: var(--hint); stroke: var(--ink); stroke-width: 0.6; animation: glow 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dot.next .dot-label { fill: var(--accent-dark); }
.dot.done .dot-point { fill: var(--accent-dark); }
.dot.done .dot-label { fill: var(--muted); }
.dot.shake { animation: shake 0.4s; }
.dots-drawing.finished .dot-label { opacity: 0.35; }
.dots-zone { display: flex; justify-content: center; text-align: center; font-weight: 700; color: var(--muted); min-height: 48px; align-items: center; }
.dots-name { font-size: 1.4rem; color: var(--accent-dark); }

/* les drapeaux */
.flag { display: block; line-height: 0; }
.flag svg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 6px; }
.flag-hole { fill: #fff; stroke: var(--muted); stroke-width: 0.5; stroke-dasharray: 1 1; }
.flag-q { font-size: 6px; font-weight: 700; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.stage-flag { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stage-flag .flag {
  width: min(260px, 66vw, calc((100vh / var(--zoom, 1) - 380px) * 1.5)); width: min(260px, 66vw, calc((100dvh / var(--zoom, 1) - 380px) * 1.5));
  filter: drop-shadow(0 5px 0 var(--line));
}
.flag-caption { font-size: 1.3rem; font-weight: 700; }
.choices-flags { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.choices-flags.n3 { --n: 3; }
.choices-flags .choice { min-width: 0; padding: 10px; min-height: 0; }
.flag-choice { width: 100%; }

@media (orientation: landscape) and (max-height: 520px) {
  .pz-board { width: min(100%, calc((100dvh - 90px) * var(--cols) / var(--rows))); }
  .pz-model { height: 48px; }
  .memory-grid { gap: 6px; width: min(100%, calc((100dvh - 80px) * var(--cols) / var(--rows))); }
  .magic-drawing { width: min(100%, calc(100dvh - 80px)); }
  .magic-color { min-height: 52px; }
  .dots-drawing { width: min(100%, calc(100dvh - 76px)); }
  .stage-flag .flag { width: min(100%, 240px, calc((100dvh - 130px) * 1.5)); }
}

/* inviter à installer l'icône (sous « Qui joue ? ») */
.install-hint { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.install-hint h2 { margin: 0; font-size: 1.2rem; }
.install-hint p { margin: 0; line-height: 1.4; }
.install-how summary { cursor: pointer; font-weight: 700; color: var(--accent-dark); }
.install-steps { margin: 6px 0 0; }
.install-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ===================================================================== Écris au doigt */

/* le chemin gris à suivre, le départ vert numéroté et sa flèche, l'encre de l'enfant */
.stage-trace { padding: 4px 0; min-height: 0; }
.trace-drawing {
  display: block; width: min(100%, 400px, calc(100vh / var(--zoom, 1) - 330px)); width: min(100%, 400px, calc(100dvh / var(--zoom, 1) - 330px));
  height: auto; aspect-ratio: 1; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--line); touch-action: none;
}
.trace-line { stroke: #8d93a5; stroke-width: 0.7; }
.trace-line-x { stroke-dasharray: 2.4 2; }
.trace-guide { fill: none; stroke: #d9d3c6; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s; }
.trace-done {
  fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55;
  transition: stroke-width 0.5s, opacity 0.5s;
}
.trace-ink { fill: none; stroke: var(--accent-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; transition: opacity 0.5s; }
.trace-inks, .trace-start, .trace-arrow, .trace-here, .trace-hint-dot { pointer-events: none; }
/* texte blanc sur vert foncé : contraste 5,3:1 */
.trace-start-dot { fill: #0b7a53; stroke: #fff; stroke-width: 1.2; }
.trace-start-num { font-size: 7px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.trace-start.started { opacity: 0.45; }
.trace-arrow { fill: #0b7a53; stroke: #fff; stroke-width: 0.8; stroke-linejoin: round; }
/* doigt levé au milieu d'un trait : un anneau montre où reprendre */
.trace-here { fill: #fff; stroke: var(--accent-dark); stroke-width: 1.8; animation: glow 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.trace-hint-dot { fill: var(--hint); stroke: var(--ink); stroke-width: 1; }
/* tous les traits sont faits : le glyphe se remplit de couleur */
.trace-drawing.finished .trace-guide { stroke: var(--accent-soft); }
.trace-drawing.finished .trace-done { opacity: 1; stroke-width: 8; }
.trace-drawing.finished .trace-ink { opacity: 0.2; }

.trace-zone { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; }
.trace-btn {
  flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--card); font-size: 1.6rem;
  box-shadow: 0 4px 0 var(--line), inset 0 0 0 3px var(--line);
}
.trace-btn:active { transform: translateY(3px); }
.trace-reset { font-size: 1.8rem; font-weight: 700; color: var(--ink); }
.trace-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-width: 0; }
.trace-step {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700;
  color: var(--muted); background: var(--card); box-shadow: inset 0 0 0 2px var(--line);
}
.trace-step.current { color: #fff; background: #0b7a53; box-shadow: none; transform: scale(1.12); }
.trace-step.done { color: var(--good-dark); box-shadow: inset 0 0 0 2px var(--good); }
/* « Ton prénom » : la lettre à écrire est encadrée et soulignée dans le prénom */
.trace-word {
  flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center;
  font-size: min(1.5rem, 5.6vw); font-weight: 700; color: var(--muted); letter-spacing: 1px; line-height: 1.25;
}
.trace-word.long { font-size: min(1.15rem, 4.4vw); }
.trace-word-part { display: inline-flex; flex-wrap: wrap; justify-content: center; min-width: 0; }
.trace-word-part.spaced { margin-left: 0.45em; }
.trace-word .on { color: var(--accent-dark); background: var(--accent-soft); border-bottom: 4px solid currentColor; border-radius: 6px 6px 0 0; padding: 0 3px; }

@media (orientation: landscape) and (max-height: 520px) {
  .trace-drawing { width: min(100%, calc(100dvh - 76px)); }
  .trace-btn { width: 48px; height: 48px; }
  .trace-word.long { font-size: 1rem; letter-spacing: 0; }
}

/* ===================================================================== Règle l'horloge, défi chrono des tables */

/* règle l'horloge : un grand cadran (aiguilles déplaçables au doigt), les boutons dessous */
.stage.stage-setclock { min-height: 0; padding: 4px 0; }
.setclock-dial {
  width: min(100%, 360px, calc(100vh / var(--zoom, 1) - 400px));
  width: min(100%, 360px, calc(100dvh / var(--zoom, 1) - 400px));
  aspect-ratio: 1;
}
.setclock-dial svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; filter: drop-shadow(0 5px 0 var(--line)); }
.knob-hour { fill: #2b2d42; }
.knob-minute { fill: #e8650c; }
.setclock-dial.grab-hour .hand-hour { stroke-width: 6.5; }
.setclock-dial.grab-minute .hand-minute { stroke-width: 3.8; }
.setclock-dial.grab-hour svg, .setclock-dial.grab-minute svg { cursor: grabbing; }
.ghost-hand { visibility: hidden; fill: none; stroke: var(--good); stroke-linecap: round; stroke-dasharray: 2.5 2.5; }
.ghost-hour { stroke-width: 4; }
.ghost-minute { stroke-width: 2.4; }
.setclock-dial.show-hint .ghost-hand { visibility: visible; }
.setclock-dial.shake { animation: shake 0.4s; }
.setclock-dial.right svg > circle:first-of-type { stroke: var(--good); }
.setclock-zone { display: flex; flex-direction: column; gap: 10px; }
.clock-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.clock-btn {
  min-width: 0; min-height: 52px; padding: 0 4px; border-radius: 16px; background: var(--card);
  font-size: 1.15rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 0 var(--line), inset 0 0 0 3px var(--line);
}
.clock-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line), inset 0 0 0 3px var(--line); }
/* « h » et « min » sont écrits : la couleur (celle de l'aiguille) n'est qu'un repère en plus */
.clock-btn-hour { color: var(--ink); }
.clock-btn-minute { color: #b94c05; }
.setclock-zone .validate-btn { min-height: 56px; }

/* défi chrono : le chronomètre sous le niveau, puis le temps et le record à la fin */
.chrono-badge { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 2px 10px; border-radius: 14px; }
.chrono-level { font-size: 0.75rem; }
.chrono-clock { font-size: 1.05rem; min-width: 4.4em; text-align: center; font-variant-numeric: tabular-nums; }
.chrono-result { background: var(--card); border-radius: 18px; padding: 6px 20px; box-shadow: 0 4px 0 var(--line); margin-top: 4px; }
.chrono-result p { margin: 2px 0; font-size: 1.15rem; font-weight: 700; }
.chrono-result b { font-variant-numeric: tabular-nums; }
.chrono-record { color: var(--muted); }
.chrono-record.new { color: #a61e4d; font-size: 1.3rem; animation: pop 0.6s 0.6s both; }
.chrono-result .chrono-before { font-size: 0.95rem; color: var(--muted); }
.chrono-result .chrono-next { font-size: 1rem; color: var(--accent-dark); }
/* sur un téléphone peu haut, les résultats d'un défi chrono restent compacts (les boutons visibles) */
@media (max-height: 760px) {
  .results:has(.chrono-result) .big-star { font-size: 56px; }
  .results:has(.chrono-result) h1 { font-size: 2rem; }
  .chrono-result p { font-size: 1.05rem; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .setclock-dial { width: min(100%, calc(100dvh - 80px)); }
  .setclock-zone { gap: 8px; }
  .clock-btn { min-height: 46px; font-size: 1.05rem; }
  .setclock-zone .validate-btn { min-height: 50px; }
  .chrono-result p { font-size: 1rem; }
  .chrono-record.new { font-size: 1.15rem; }
}

/* =====================================================================
   1.7 : jouer à deux, jeux choisis par les parents
   ===================================================================== */
.featured-icon, .duo-btn-icon, .duo-final-sticker, .featured-badge {
  font-family: 'Andika', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', sans-serif;
}

/* « Qui joue ? » : le bouton « Jouer à deux » à gauche, « Parents » à droite */
.profiles .top-bar { grid-template-columns: auto 1fr auto; }
.duo-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  background: #5a40e0; color: #fff; font-weight: 700; font-size: 1rem; white-space: nowrap; box-shadow: 0 3px 0 #3f2aa8;
}
.duo-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #3f2aa8; }
.duo-btn-icon { font-size: 1.3rem; line-height: 1; }

/* choix des deux joueurs : le numéro indique qui commence (pas seulement le contour) */
.duo-pick .top-bar { grid-template-columns: 52px minmax(0, 1fr) 52px; }
.duo-hint { margin: 6px 0 16px; min-height: 1.3em; text-align: center; font-size: 1.3rem; font-weight: 700; }
.duo-hint.warning { margin-left: auto; margin-right: auto; padding: 8px 14px; border-radius: 16px; background: #ffe3ec; color: #a61e4d; font-size: 1.2rem; }
.duo-card { position: relative; }
.profile-card.duo-card.picked { box-shadow: 0 7px 0 var(--ink), inset 0 0 0 5px var(--ink); }
.duo-order {
  position: absolute; top: 10px; left: 10px; padding: 2px 10px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 1.05rem;
}
.duo-order:empty { display: none; }
.duo-go { align-self: center; width: min(100%, 360px); margin-top: 20px; }
.duo-go:disabled { opacity: 0.45; cursor: default; transform: none; }

/* pendant la partie : les deux portraits et les bonnes réponses ; l'enfant dont c'est le tour est plus grand et entouré */
.domain-theme-duo { --accent: #4f46e5; --accent-dark: #3730a3; --accent-soft: #e0e7ff; }
.duo-score { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.duo-players { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; max-width: 100%; }
.duo-player {
  display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 8px 2px 2px; border-radius: 999px;
  font-weight: 700; color: var(--muted); white-space: nowrap;
}
.duo-player .avatar { width: 28px; height: 28px; opacity: 0.75; }
.duo-player.turn { flex: 0 1 auto; padding: 3px 10px 3px 3px; background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--line), inset 0 0 0 3px var(--accent); }
.duo-player.turn .avatar { width: 38px; height: 38px; opacity: 1; }
.duo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.95rem; }
.duo-player:not(.turn) .duo-name { display: none; }
.duo-points { flex: none; font-size: 0.95rem; }
.duo-score .progress { gap: 3px; }
.duo-score .step { width: 8px; height: 8px; }
.duo-score .step.current { box-shadow: 0 0 0 2px var(--accent) inset; }
@media (min-width: 440px) {
  .duo-player:not(.turn) .duo-name { display: inline; }
}

/* résultats des deux enfants */
.duo-end { justify-content: flex-start; gap: 6px; }
.duo-end > .top-bar { align-self: stretch; }
.duo-end .top-title { margin: 0; font-size: 1.35rem; }
.duo-team { margin: 0; font-size: 2.1rem; }
.duo-final { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 8px; }
.duo-final-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 12px 8px;
  border-radius: 22px; background: var(--card); box-shadow: 0 5px 0 var(--line);
}
.duo-final-name { margin: 2px 0 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.duo-final-detail { margin: 0; font-weight: 700; }
.duo-final .result-stars { gap: 2px; }
.duo-final .big-star { font-size: 34px; }
.duo-final-gain { margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--good-dark); }
.duo-final-sticker { margin: 0; font-weight: 700; font-size: 0.9rem; color: var(--album-dark); }
.duo-actions { margin-top: 14px; }

/* accueil : « ⭐ Conseillé pour toi » (texte foncé sur fond blanc, la couleur de la rubrique n'est qu'un décor) */
.home-featured { display: flex; flex-direction: column; gap: 6px; }
.featured-label { margin: 0; font-size: 1.05rem; color: var(--ink); }
.featured-list { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 10px; }
.featured-list.n2 { --n: 2; }
.featured-list.n3 { --n: 3; }
.featured-game {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 52px; padding: 6px 12px;
  border-radius: 18px; background: var(--card); color: var(--ink); text-align: left; font-weight: 700; font-size: 1rem; line-height: 1.15;
  box-shadow: 0 4px 0 var(--accent-soft), inset 0 0 0 3px var(--accent);
}
.featured-game:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-soft), inset 0 0 0 3px var(--accent); }
.featured-icon { flex: none; font-size: 1.7rem; line-height: 1; }
.featured-title {
  min-width: 0; overflow: hidden; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.featured-list.n3 .featured-game { flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 6px; text-align: center; font-size: 0.85rem; }
.featured-list.n3 .featured-icon { font-size: 1.5rem; }
.home-empty { text-align: center; }

/* accueil avec des jeux conseillés : tuiles plus basses (icône à côté du nom), tout tient sans défiler */
.home.has-featured .season-decor { display: none; }
.home.has-featured .home-hero { margin-bottom: 10px; }
.home.has-featured .home-menu, .home.has-featured .home-grid { gap: 10px; }
.home.has-featured .domain-tile { min-height: 60px; flex-direction: row; gap: 8px; padding: 6px 10px; font-size: 1.1rem; }
.home.has-featured .domain-tile .domain-icon { font-size: 1.7rem; }
.home.has-featured .home-top .domain-btn, .home.has-featured .home-bottom .domain-btn { min-height: 56px; }
@media (min-height: 800px) {
  .home.has-featured .domain-tile { min-height: 72px; }
}

/* téléphone en portrait, « Défi du jour » et « Je révise » côte à côte : la pastille (« 1 jeu »,
   « ✓ fait ») passe dans le coin du bouton pour que le texte tienne dans la largeur */
@media (max-width: 480px) {
  .home-top > .domain-btn:not(:only-child) { position: relative; gap: 8px; padding: 8px 10px; font-size: 1.2rem; }
  .home-top > .domain-btn:not(:only-child) .domain-icon { font-size: 1.7rem; }
  .home-top > .domain-btn:not(:only-child) .pill {
    position: absolute; top: 4px; right: 4px; margin: 0; padding: 0 7px; font-size: 0.75rem; line-height: 1.5; background: rgba(0, 0, 0, 0.25);
  }
}

/* badge dans la liste des jeux de la rubrique */
.game-card.featured { box-shadow: 0 5px 0 var(--accent-soft), 0 0 0 3px #e6b800 inset; }
.featured-badge {
  padding: 2px 10px; border-radius: 999px; background: #fff1c2; color: var(--ink);
  font-size: 0.8rem; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 2px #e6b800;
}

/* espace parents : « Ses jeux » (l'état est écrit sur chaque bouton, pas seulement en couleur) */
.kid-games { display: flex; flex-direction: column; }
.kid-domain { border-top: 1px solid var(--line); padding: 2px 0 4px; }
.kid-domain-head.setting { border-top: 0; padding: 8px 0 2px; }
.kid-domain-title { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.kid-domain-state { font-size: 0.85rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.kid-domain.off .kid-domain-title { color: var(--muted); }
.kid-domain-games summary {
  display: flex; align-items: center; min-height: 40px; cursor: pointer;
  font-size: 0.95rem; font-weight: 700; color: var(--lecture-dark);
}
.kid-game { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.kid-game-title { flex: 1 1 150px; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.kid-game.off .kid-game-title { color: var(--muted); text-decoration: line-through; }
.kid-game-ctrls { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.kid-toggle {
  min-height: 40px; padding: 0 12px; border-radius: 999px; background: var(--bg); color: var(--ink);
  font-size: 0.9rem; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--line);
}
.kid-toggle.on { background: #d8f5e6; box-shadow: inset 0 0 0 2px var(--good); }
.kid-toggle.star.on { background: #fff1c2; box-shadow: inset 0 0 0 2px #e6b800; }
.kid-toggle:disabled { opacity: 0.45; cursor: default; }
.kid-games-full { margin-top: 8px; }

/* téléphone en paysage */
@media (orientation: landscape) and (max-height: 520px) {
  /* accueil avec des jeux conseillés : le bonjour monte dans la barre du haut, les conseils sur une ligne */
  .screen.home.has-featured {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-content: start; column-gap: 12px; row-gap: 8px;
  }
  .home.has-featured > .top-bar { display: contents; }
  .home.has-featured > .top-bar > * { grid-row: 1; align-self: center; }
  .home.has-featured > .top-bar > :nth-child(2) { display: none; }
  .home.has-featured > .top-bar > :last-child { grid-column: 3; }
  .home.has-featured > .home-hero {
    grid-row: 1; grid-column: 2; margin: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 14px;
  }
  .home.has-featured .home-title { margin: 0; font-size: 1.4rem; }
  .home.has-featured .goal-bar { margin: 0; flex-direction: row; gap: 8px; }
  .home.has-featured > .home-menu { grid-column: 1 / -1; gap: 8px; }
  .home.has-featured .home-grid { gap: 8px; }
  .home.has-featured .domain-tile { min-height: 52px; font-size: 1rem; }
  .home.has-featured .domain-tile .domain-icon { font-size: 1.5rem; }
  .home.has-featured .home-top .domain-btn, .home.has-featured .home-bottom .domain-btn { min-height: 44px; }
  .home-featured { flex-direction: row; align-items: center; gap: 12px; }
  .featured-label { flex: none; font-size: 1rem; white-space: nowrap; }
  .featured-list { flex: 1; min-width: 0; }
  .featured-game, .featured-list.n3 .featured-game {
    flex-direction: row; justify-content: flex-start; min-height: 44px; padding: 4px 10px; gap: 6px; text-align: left; font-size: 0.9rem;
  }
  .featured-icon, .featured-list.n3 .featured-icon { font-size: 1.4rem; }

  /* choix des deux joueurs */
  .duo-hint { margin: 0 0 8px; font-size: 1.2rem; }
  .duo-hint.warning { padding: 4px 12px; font-size: 1rem; }
  .duo-pick .avatar-xl { width: min(84px, 22dvh); height: min(84px, 22dvh); }
  .duo-go { min-height: 48px; margin-top: 10px; }

  /* pendant la partie */
  .duo-player .avatar { width: 24px; height: 24px; }
  .duo-player.turn .avatar { width: 32px; height: 32px; }
  .duo-score { gap: 2px; }

  /* résultats : les deux enfants à gauche, les boutons à droite */
  .screen.duo-end {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-content: start; align-items: center; column-gap: 20px; row-gap: 6px;
  }
  .duo-end > .top-bar, .duo-team { grid-column: 1 / -1; }
  .duo-team { font-size: 1.6rem; }
  .duo-final { margin: 0; }
  .duo-final-card { padding: 8px 6px; gap: 2px; }
  .duo-final .avatar-md { width: 56px; height: 56px; }
  .duo-final .big-star { font-size: 26px; }
  .duo-actions { margin: 0; }
  .duo-actions .big-btn { min-height: 52px; font-size: 1.2rem; }
}

/* =====================================================================
   Vos voix pour les histoires (espace parents) : liste et enregistrement
   ===================================================================== */
.voices-open { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 10px; font-size: 1.15rem; }
.voices-count { margin-top: 10px; }
.voices-intro p { margin: 0; line-height: 1.45; }
.voices-intro p + p { margin-top: 8px; }
.voices-private { font-weight: 700; }
.voices-level h2 { margin-bottom: 0; }
.voices-grades { margin: 2px 0 4px; }
.voice-story { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.voice-story-emoji {
  flex: none; width: 2.2rem; text-align: center; font-size: 1.8rem; line-height: 1;
  font-family: 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.voice-story-text { display: flex; flex-direction: column; flex: 1 1 120px; min-width: 0; }
.voice-story-text b { font-size: 1.1rem; overflow-wrap: anywhere; }
.voice-state { color: var(--muted); }
/* « ✔ Enregistrée » : le texte et la coche disent l'état, la couleur ne fait que le souligner */
.voice-story.recorded .voice-state { color: var(--good-dark); font-weight: 700; }
.voice-story.recorded .voice-state .muted { font-weight: 400; }
.voice-story-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.voice-story-actions .pill-btn { padding: 0 12px; font-size: 0.95rem; white-space: nowrap; }
.pill-btn.quiet { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.pill-btn.warn { background: #fff0f0; color: #c43d3d; }
.pill-btn.playing, .record-buttons .playing { box-shadow: inset 0 0 0 3px var(--ink); }

.record-layout { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.record-head { display: flex; align-items: center; gap: 12px; }
.record-head h2 { margin: 0; }
.record-head p { margin: 2px 0 0; }
.record-emoji { flex: none; font-size: 2.4rem; line-height: 1; font-family: 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', sans-serif; }
/* le texte à lire à voix haute, en gros */
.record-text { margin: 12px 0 10px; font-size: 1.5rem; line-height: 1.55; font-weight: 700; overflow-wrap: anywhere; }
/* les boutons restent sous le pouce, même quand le texte est long */
.record-controls {
  position: sticky; bottom: calc(var(--safe-bottom) + 8px); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 3px 0 var(--line), 0 -6px 18px rgba(43, 45, 66, 0.08);
}
.record-controls p { margin: 0; }
.record-status { line-height: 1.4; }
.record-status.problem { color: #c43d3d; font-weight: 700; }
.record-timer { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.record-timer[hidden] { display: none; }
.rec-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #e03131; animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: 0.3; } }
.record-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.record-buttons:empty { display: none; }
.record-buttons .big-btn {
  flex: 1 1 140px; min-height: 56px; padding: 0 14px; font-size: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

/* téléphone en paysage : le texte à gauche, les boutons à droite */
@media (orientation: landscape) and (max-height: 520px) {
  .record-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .record-controls { top: 8px; bottom: auto; padding: 10px 14px; gap: 8px; }
  .record-text { font-size: 1.3rem; line-height: 1.45; }
  .record-status { font-size: 0.95rem; line-height: 1.3; }
  .record-buttons { gap: 8px; }
  .record-buttons .big-btn { flex: 1 1 auto; min-height: 46px; font-size: 1.05rem; }
}

/* voix naturelle (Réglages) : l'état du téléchargement sous l'interrupteur */
.natural-voice-state { margin: -2px 0 6px; line-height: 1.4; }
.natural-voice .setting:first-of-type { border-top: 1px solid var(--line); }

/* Barre de téléchargement de la voix (en haut, par-dessus l'écran, sans gêner les touchers) */
.voice-progress {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  height: 5px;
  z-index: 60;
  background: rgba(43, 45, 66, 0.12);
  pointer-events: none;
}
.voice-progress-fill {
  height: 100%;
  width: 0;
  background: var(--good);
  border-radius: 0 3px 3px 0;
  transition: width 0.3s ease;
}
.voice-progress-text {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  background: #23365f;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
/* pendant un jeu : la fine barre seulement */
body:has(main.play) .voice-progress-text { display: none; }
.voice-progress.done { transition: opacity 0.6s ease 1.6s; opacity: 0; }