/* FastLearner Junior : Handwritten agrandi. Corps 24/36, titres 64, boutons 64 de haut, beaucoup d'espace. */
html { font-size: 24px; }
.fj-body { font-size: 24px; line-height: 36px; background-image: linear-gradient(to right, var(--margin-red) 1px, transparent 1px), repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--rule) 35px, var(--rule) 36px); background-size: 100% 100%, 100% 36px; background-position: 40px 0, 0 0; }
.fj-page { max-width: 44rem; margin: 0 auto; padding: 0 20px 120px 56px; }
.fj-top { max-width: 44rem; margin: 0 auto; padding: 20px 20px 12px 56px; min-height: 64px; }
.fj-brand { font-family: var(--font-marker); font-size: 40px; font-weight: 700; text-decoration: none; color: var(--ballpoint); }
.fj-title { font-family: var(--font-marker); font-size: 64px; line-height: 72px; font-weight: 700; margin: 24px 0 24px; }
.fj-title-row { display: flex; align-items: center; gap: 20px; }
.fj-title-row .fj-icon { width: 88px; height: 88px; flex: none; }
.fj-section { font-family: var(--font-marker); font-size: 44px; line-height: 52px; font-weight: 700; margin: 48px 0 20px; }
.fj-lead { font-size: 24px; line-height: 36px; margin: 0 0 24px; }
.fj-count { font-size: 20px; line-height: 28px; color: var(--graphite-light); margin: 0 0 12px; }
.fj-prompt { font-family: var(--font-marker); font-size: 56px; line-height: 64px; font-weight: 700; margin: 8px 0 24px; }
.fj-offline { font-size: 20px; margin-bottom: 24px; }
.fj-draw { fill: none; stroke: var(--graphite); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Boutons : 64 px de haut, doigt d'enfant */
.fj-btn, .hw-btn.fj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 0 28px; font-size: 24px; line-height: 28px; text-decoration: none; color: var(--graphite); }
.fj-back { min-height: 64px; }
.fj-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 48px 0 0; }
.fj-listen-big { margin: 0 0 28px; background: var(--page-raised); }
.fj-listen-ico { width: 40px; height: 40px; }
.fj-listen { flex: none; width: 64px; height: 64px; padding: 8px; background: var(--page-raised); border: var(--stroke-pen) solid var(--graphite); border-radius: var(--radius-sketch); cursor: pointer; }
.fj-listen svg { width: 100%; height: 100%; }
.fj-no-speech [data-say] { display: none; }

/* Choix de profil */
.fj-profiles { display: flex; flex-wrap: wrap; gap: 28px; list-style: none; padding: 20px 0 0; margin: 0; }
.fj-profile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 200px; padding: 20px; background: var(--page-raised); border: var(--stroke-pen) solid var(--graphite); border-radius: var(--radius-sketch); cursor: pointer; font-family: var(--font-pen); color: var(--graphite); }
.fj-profile:hover, .fj-profile:active { border-radius: 15px 255px 15px 225px; background: var(--highlighter); }
.fj-profile-name { font-family: var(--font-marker); font-size: 44px; line-height: 48px; font-weight: 700; }
.fj-avatar { width: 128px; height: 128px; }
.fj-parent { margin-top: 64px; font-size: 18px; }
.fj-parent a { color: var(--graphite-light); }

/* Thèmes : post-it géants */
.fj-stickies { display: flex; flex-wrap: wrap; gap: 48px; list-style: none; padding: 32px 0 0; margin: 0; }
.fj-sticky-link { display: block; color: inherit; text-decoration: none; }
.fj-sticky { width: 280px; min-height: 300px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-sizing: border-box; padding: 28px 20px; }
.fj-sticky h2 { font-size: 64px; line-height: 64px; margin: 0; }
.fj-sticky .fj-icon { width: 120px; height: 120px; }
.fj-sticky .fj-count { color: var(--sticky-ink); margin: 0; }

/* Étoiles et autocollants */
.fj-stars { display: inline-flex; gap: 4px; }
.fj-star { width: 44px; height: 44px; }
.fj-bigstars .fj-star { width: 110px; height: 110px; }
.fj-bigstars { margin: 8px 0 24px; }
.fj-album { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 0 0 24px; }
.fj-sticker { width: 96px; height: 96px; background: #fff; border-radius: 50%; padding: 6px; box-shadow: var(--shadow-paper); box-sizing: border-box; }
.fj-bigsticker .fj-sticker { width: 180px; height: 180px; padding: 12px; transform: rotate(-6deg); }

/* Modules */
.fj-modules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.fj-module { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 20px 24px; background: var(--page-raised); border: var(--stroke-pen) solid var(--graphite); border-radius: var(--radius-box); color: var(--graphite); text-decoration: none; }
.fj-module:hover { background: var(--highlighter); }
.fj-module-title { font-family: var(--font-marker); font-size: 44px; line-height: 48px; font-weight: 700; flex: 1 1 100%; }
.fj-module-meta { color: var(--graphite-light); font-size: 20px; flex: 1; }

/* Lecture : un concept par écran */
.fj-dots { display: flex; gap: 12px; list-style: none; padding: 0; margin: 12px 0 28px; }
.fj-dots li { width: 24px; height: 24px; border: var(--stroke-pen) solid var(--graphite); border-radius: var(--radius-blob); }
.fj-dots li.fj-dot-on { background: var(--highlighter); }
.fj-figure { background: var(--page-raised); border: var(--stroke-pen) solid var(--graphite); border-radius: var(--radius-box); padding: 20px; margin: 0 0 28px; }
.fj-figure svg, .fj-figure img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.fj-credit { font-size: 14px; line-height: 20px; color: var(--graphite-light); margin-top: 8px; }
.fj-text p { margin: 0 0 20px; font-size: 24px; line-height: 36px; }
.fj-callout .hw-hl { font-size: 24px; line-height: 36px; }

/* QCM : trois grands choix, aucune pénalité */
.fj-choice-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; list-style: none; }
.fj-choices { padding: 0; margin: 0 0 16px; }
.fj-choice { flex: 1; justify-content: flex-start; text-align: left; font-size: 32px; background: var(--page-raised); }
.fj-choice-right { background: var(--highlighter-green); }
.fj-choice-tried { background: var(--highlighter); border-style: dashed; }
.fj-verdict { font-family: var(--font-marker); font-size: 64px; line-height: 72px; font-weight: 700; margin: 0 0 20px; color: var(--ballpoint); }
.fj-verdict-ok { color: var(--graphite); }
.fj-result .fj-lead { margin-bottom: 12px; }

/* Écran parent : taille d'adulte */
.fj-parent-page { font-size: 18px; }
.fj-pcard-head { display: flex; gap: 20px; align-items: center; margin-bottom: 12px; }
.fj-pcard-head .fj-avatar { width: 72px; height: 72px; flex: none; }
.fj-avatar-pick { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.fj-avatar-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.fj-avatar-opt .fj-avatar { width: 64px; height: 64px; }
.fj-avatar-opt input:checked + .fj-avatar { background: var(--highlighter); border-radius: var(--radius-blob); }

@media (max-width: 480px) {
  .fj-page, .fj-top { padding-left: 44px; padding-right: 14px; }
  .fj-title { font-size: 52px; line-height: 60px; }
  .fj-prompt { font-size: 44px; line-height: 52px; }
  .fj-sticky { width: 100%; }
  .fj-profile { width: 150px; }
  .fj-avatar { width: 104px; height: 104px; }
}

/* Questions : dessin plus petit pour voir les choix sans défiler trop */
.fj-quiz .fj-figure { padding: 12px; margin-bottom: 20px; }
.fj-quiz .fj-figure svg, .fj-quiz .fj-figure img { max-width: 240px; }