/* Child screens on a phone (375–430px wide). The child side stays desktop-first; here it
   only has to fit: no horizontal scroll, the exercise and « Valider » above the keypad.
   Selectors start with .kid so they win over the desktop rules whatever the file order. */

.kid { min-height: 100dvh; }
.exercise-page { overflow-x: clip; }
.exercise__submit { min-width: 200px; }
.posed-grid__actions { grid-column: 1 / -1; justify-self: end; padding-top: var(--space-4); }

@media (max-width: 640px) {
  .kid { padding: var(--space-4) var(--space-4) var(--space-6); }
  .kid--center { padding: var(--space-4); }
  .kid .kid__title { font-size: 34px; line-height: 40px; }
  .kid .btn--kid-ghost { height: 44px; padding: 0 var(--space-3); font-size: 16px; }

  /* Launch */
  .kid .launch { gap: var(--space-8); padding: var(--space-4) 0; }
  .kid .launch__themes, .kid .launch__families { grid-template-columns: minmax(0, 1fr); }
  .kid .launch-choice--duration { min-width: 0; flex: 1 1 96px; height: 64px; padding: 0 var(--space-3); font-size: 22px; }
  .kid .launch__actions { justify-content: stretch; }
  .kid .launch__actions .btn { flex-grow: 1; }

  /* Exercise: compact, from the top, so the field and « Valider » stay above the keypad */
  .kid .exercise { justify-content: flex-start; gap: var(--space-4); padding: var(--space-4) 0; }
  .kid .consigne { font-size: 22px; line-height: 28px; }
  .kid .exercise__line { gap: var(--space-4); }
  .kid .exercise__expression { --size: 52px; gap: var(--space-3); }
  .kid .exercise__line--lg .exercise__expression { --size: 40px; gap: var(--space-2) var(--space-3); }
  .kid .exercise__line--md .exercise__expression { --size: 30px; gap: var(--space-2); }
  .kid .exercise__line--xl .exercise__text--words { font-size: 40px; }
  .kid .exercise__text { white-space: normal; }
  .kid .answer-field { border-width: 3px; width: calc(var(--chars) * 0.64em + 24px); }
  .kid .answer-field__check { left: 6px; top: 6px; }
  .kid .fraction--input .answer-field, .kid .fraction__den--fixed { width: 64px; height: 52px; font-size: 36px; }
  .kid .fraction--input .fraction__bar { width: 64px; }
  .kid .exercise__submit { width: 100%; max-width: 320px; }
  .kid .kid__hint { text-align: center; }
  .kid .feedback { font-size: 22px; line-height: 28px; }
  .kid .given-answers { font-size: 24px; gap: var(--space-3); }
  .kid .hint { padding: var(--space-4); }
  .kid .hint__text { font-size: 18px; line-height: 26px; }
  .kid .hint--table .hint__text { font-size: 28px; line-height: 36px; }

  /* Comparison, QCM, order */
  .kid .exercise__line--comparison .exercise__expression { --size: 44px; }
  .kid .exercise__expression.comparison { flex-direction: column; }
  .kid .sign-pill { width: 64px; height: 64px; font-size: 34px; }
  .kid .exercise__question { font-size: 24px; line-height: 32px; }
  .kid .choices { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .kid .choice { min-height: 64px; }
  .kid .order { gap: var(--space-4); }
  .kid .order__tiles, .kid .order__row { gap: var(--space-2); }
  .kid .order-tile, .kid .order-slot { width: 78px; height: 60px; font-size: 21px; border-width: 3px; }
  .kid .order__submit { width: 100%; max-width: 320px; }
  .kid .order__end { width: auto; flex-basis: 100%; text-align: center; }

  /* Posed grid */
  .kid .exercise__operation { font-size: 28px; }
  .kid .posed-card { padding: var(--space-4); overflow: visible; }
  .kid .posed-grid { --posed-operator: 36px; --posed-col: 52px; --posed-comma: 14px; --posed-cell-height: 60px; --posed-size: 40px; gap: var(--space-2); }
  .kid .posed-grid--compact { --posed-operator: 28px; --posed-col: 40px; --posed-comma: 10px; --posed-cell-height: 48px; --posed-size: 30px; }
  /* A tall grid (× 2 digits) is longer than the screen: « Valider » stays at its bottom edge. */
  .kid .posed-grid__actions { justify-self: stretch; position: sticky; bottom: var(--space-3); z-index: 1; }
  .kid .posed-grid__actions .btn { width: 100%; }

  /* Problèmes */
  .kid .problem { gap: var(--space-6); }
  .kid .problem__text { font-size: 20px; line-height: 30px; }
  .kid .problem__question { font-size: 22px; line-height: 28px; }
  .kid .problem__aside { min-width: 0; flex-basis: 100%; }
  .kid .choices--operation { grid-template-columns: minmax(0, 1fr); }
  .kid .problem__op-foot .btn { flex-grow: 1; }
  .kid .problem__calc .exercise__expression { --size: 40px; flex-wrap: wrap; white-space: normal; }
  .kid .problem__calc .exercise__line--md .exercise__expression { --size: 30px; }
  .kid .problem-answer__sentence { font-size: 24px; line-height: 32px; }

  /* Pause, « Tu veux vraiment arrêter ? », bilan */
  .kid .pause-overlay { padding: var(--space-4); }
  .kid .pause-card, .kid .stop-dialog { padding: var(--space-6); }
  .kid .summary { padding: var(--space-8) var(--space-4); gap: var(--space-6); }
}