From e8fdd572f6d3abdde3509a7dca5916722372808b Mon Sep 17 00:00:00 2001
From: Ivan Schneider <ivan.schneider@hey.com>
Date: Thu, 23 Jul 2026 22:35:23 +0200
Subject: [PATCH 1/4] =?UTF-8?q?docs(specs):=20chapitre=2012=20=E2=80=94=20?=
 =?UTF-8?q?niveau=203,=20la=20division=20avec=20reste?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Spécifie l'évolution naturelle après la complétion de l'image mystère
des divisions : l'encadrement par les multiples (45 ÷ 7 = 6, reste 3),
aligné sur les attendus CE2/CM1. Statut : spécifié, non implémenté.
Renumérote les chapitres suivants (profils 13, évolutions 14, refs 15).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 public/specs/index.html | 82 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 73 insertions(+), 9 deletions(-)

diff --git a/public/specs/index.html b/public/specs/index.html
index 8aa5f1c4..5028b419 100644
--- a/public/specs/index.html
+++ b/public/specs/index.html
@@ -345,6 +345,7 @@ <h1>Tablito<em>.</em></h1>
     <li><a href="#perimetre">Périmètre — ce que l'app ne fait PAS</a></li>
     <li><a href="#metriques">Métriques de succès</a></li>
     <li><a href="#division">Niveau 2 — Réviser par la division</a></li>
+    <li><a href="#reste">Niveau 3 — La division avec reste</a></li>
     <li><a href="#profils">Multi-profils — plusieurs enfants par appareil</a></li>
     <li><a href="#evolutions">Évolutions possibles (V2)</a></li>
     <li><a href="#references">Références</a></li>
@@ -702,7 +703,7 @@ <h3 id="gam-badges"><span class="num">4.2</span>Badges</h3>
       <tr><td>Flamme éternelle</td><td>30 jours consécutifs</td><td>🌟</td></tr>
     </tbody>
   </table>
-  <p>Le <strong>niveau 2</strong> (§11) ajoute un jeu de badges symétrique pour la division (Première division maîtrisée, Divisions par N, Maître de la division), <strong>masqué</strong> tant que le niveau n'est pas débloqué — détaillé en §11.5.</p>
+  <p>Le <strong>niveau 2</strong> (§11) ajoute un jeu de badges symétrique pour la division (Première division maîtrisée, Divisions par N, Maître de la division), <strong>masqué</strong> tant que le niveau n'est pas débloqué — détaillé en §11.5. Le <strong>niveau 3</strong> (§12, spécifié non implémenté) prévoit le même principe pour la division avec reste — détaillé en §12.6.</p>
   <p>Les deux badges <em>Première case révélée</em> et <em>Première multiplication maîtrisée</em> jalonnent la zone intermédiaire, entre les badges du tout début (Premier pas, Machine, Exploration) et la maîtrise complète d'une table : ils se déclenchent au moment précis où l'image mystère §5.1 change visiblement de finesse pour la 1ère fois.</p>
   <p>Sur l'écran <em>Badges</em>, <strong>chaque vignette est cliquable</strong> et ouvre une modale qui explicite le badge :</p>
   <ul>
@@ -833,7 +834,7 @@ <h3 id="ui-ecrans"><span class="num">7.1</span>Écrans</h3>
   <table>
     <thead><tr><th>Écran</th><th>Contenu</th></tr></thead>
     <tbody>
-      <tr><td>Qui joue ?</td><td>Choix du joueur au lancement — visible uniquement dès 2 profils sur l'appareil (§12)</td></tr>
+      <tr><td>Qui joue ?</td><td>Choix du joueur au lancement — visible uniquement dès 2 profils sur l'appareil (§13)</td></tr>
       <tr><td>Accueil</td><td>Mascotte (animations d'idle), prénom, streak, bouton « C'est parti ! » (+ bouton « changer de joueur » en multi-profils)</td></tr>
       <tr><td>Séance — Intro</td><td>Grille de points animée pour un nouveau fait</td></tr>
       <tr><td>Séance — Question</td><td>Question en gros, pavé numérique, barre de progression</td></tr>
@@ -897,7 +898,7 @@ <h2><span class="num">9</span>Périmètre — Ce que l'application ne fait PAS</
     <li>Pas de collecte de données personnelles</li>
   </ul>
   <blockquote class="note">
-    <p><strong>Division :</strong> exclue du cœur v1 (focus unique sur la mémorisation des tables), elle n'est plus écartée sur le principe — elle est spécifiée comme <strong>niveau 2 optionnel</strong> (§11) : un track séparé qui révise les mêmes faits sous forme de division, déclenché uniquement après maîtrise multiplicative. Un enfant qui travaille encore ses tables ne le voit pas, donc le focus unique de la v1 est préservé.</p>
+    <p><strong>Division :</strong> exclue du cœur v1 (focus unique sur la mémorisation des tables), elle n'est plus écartée sur le principe — elle est spécifiée comme <strong>niveau 2 optionnel</strong> (§11) : un track séparé qui révise les mêmes faits sous forme de division, déclenché uniquement après maîtrise multiplicative. Un enfant qui travaille encore ses tables ne le voit pas, donc le focus unique de la v1 est préservé. Le <strong>niveau 3</strong> (§12, spécifié non implémenté) prolonge la même logique vers la division avec reste, après maîtrise des divisions exactes.</p>
   </blockquote>
 </section>
 
@@ -984,11 +985,74 @@ <h3 id="division-reserves"><span class="num">11.7</span>Réserve méthodologique
   <p>Des interventions de fluence ciblant <em>directement</em> la division existent et fonctionnent (cover-copy-compare, taped problems, detect-practice-repair). En revanche, les bénéfices de la <strong>répétition espacée</strong> sont démontrés sur la multiplication et la rétention en général, mais <strong>pas directement sur les faits de division</strong> : les méta-analyses traitent la division au sein des « faits de base » sans isoler son effet, et l'opération s'avère être un modérateur significatif. Appliquer Leitner à la division est donc une <strong>généralisation plausible mais non directement prouvée</strong> — un pari raisonné, assumé comme tel, à surveiller si l'usage révélait un comportement différent de la multiplication.</p>
 </section>
 
+<section class="chapter" id="reste">
+  <h2><span class="num">12</span>Niveau 3 — La division avec reste</h2>
+  <p>Le niveau 2 (§11) s'arrête aux divisions <strong>exactes</strong> : 64 faits dont le quotient tombe toujours juste. L'attendu scolaire — et l'usage réel des tables pour les années qui suivent — est plus large : <strong>trouver le quotient et le reste</strong> quand le dividende ne tombe pas juste (« 45 ÷ 7 = 6, reste 3 »). Le <strong>niveau 3</strong> prolonge le parcours par ce geste, l'<strong>encadrement par les multiples</strong>. Comme le niveau 2, il ne rouvre aucun chantier : il re-mobilise le même réseau multiplicatif par une <strong>troisième porte d'entrée</strong> — pour répondre à 45 ÷ 7, l'enfant récupère le fait de table immédiatement inférieur (7 × 6 = 42), puis compte l'écart. La progression se lit ainsi : niveau 1 « je connais mes tables », niveau 2 « je les traverse dans l'autre sens », niveau 3 « je m'en sers quand ça ne tombe pas juste ».</p>
+  <blockquote class="note">
+    <p><strong>Statut.</strong> Chapitre spécifié, <strong>non implémenté</strong>. Comme le niveau 2, le niveau 3 est invisible tant qu'il n'est pas débloqué : un enfant qui travaille encore ses tables ou ses divisions exactes n'en voit rien — le focus des niveaux précédents est préservé.</p>
+  </blockquote>
+
+  <h3 id="reste-pourquoi"><span class="num">12.1</span>Pourquoi ce niveau, et pourquoi à ce moment</h3>
+  <p class="source"><strong>Sources :</strong> Programmes de l'Éducation nationale (attendus de fin de CE2 et programme de CM1) ; Common Core (4.OA.3) ; LeFevre &amp; Morris (1999) ; Campbell (1997) ; Robinson &amp; LeFevre (2012) ; Van de Walle</p>
+  <p><strong>Côté programme.</strong> Les attendus de fin de CE2 déjà cités en §11.3 demandent <em>à la fois</em> la connaissance des tables et « l'obtention du quotient et du reste d'une division euclidienne par un nombre à un chiffre » — le niveau 2 ne couvre que la moitié « exacte » de cet attendu. Le CM1 formalise ensuite la <strong>division posée</strong>, dont le geste mental central est précisément l'encadrement : « dans 45, combien de fois 7 ? ». Un enfant qui termine l'image des divisions (niveaux 1 + 2, soit typiquement 4 à 6 mois de parcours) entre en CM1 : le niveau 3 arrive à l'heure du programme, ni en avance ni en retard. Common Core suit le même séquencement — l'interprétation des restes apparaît au grade 4 (<a href="https://www.thecorestandards.org/Math/Content/4/OA/">4.OA.3</a>).</p>
+  <p><strong>Côté cognition.</strong> Le mécanisme est celui, déjà documenté, de la médiation par la multiplication (§11.1) : la division avec reste se résout en récupérant le multiple immédiatement inférieur dans la table, puis en complétant par un écart additif trivial (toujours &lt; 9). C'est du <em>retrieval practice</em> sur le réseau multiplicatif existant — pas un corpus neuf à mémoriser — avec en prime la compétence scolaire la plus rentable de l'année suivante : un enfant fluent sur l'encadrement aborde la technique opératoire de la division posée avec le seul morceau réellement difficile déjà automatisé.</p>
+
+  <h3 id="reste-inventaire"><span class="num">12.2</span>Inventaire : 64 zones entre multiples</h3>
+  <p>L'unité de maîtrise n'est plus un fait isolé mais une <strong>zone</strong> : la case <code>(d, q)</code> — diviseur d, quotient q, tous deux de 2 à 9 — couvre les dividendes compris entre d×q inclus et d×(q+1) exclu. La case (7, 6) couvre ainsi les dividendes 42 à 48 divisés par 7 ; la case (7, 7) prend le relais à 49. Pour un diviseur donné, les zones partitionnent l'intervalle des dividendes sans chevauchement.</p>
+  <ul>
+    <li><strong>64 cases</strong> (8 diviseurs × 8 quotients), <strong>non commutatives</strong> comme au niveau 2 : (7, 6) porte « 42-48 ÷ 7 », (6, 7) porte « 42-47 ÷ 6 » — deux questions distinctes.</li>
+    <li><strong>Le reste est tiré au sort à chaque présentation</strong> : r uniforme dans 0..d−1, dividende = d×q + r. Le cas r = 0 (probabilité 1/d) garde vivante la discrimination « est-ce que ça tombe juste ? » — sans lui, l'enfant apprendrait le méta-pattern « il y a toujours un reste » — et entretient au passage les divisions exactes du niveau 2.</li>
+    <li><strong>Les réponses restent à un chiffre</strong> : quotient de 2 à 9, reste de 0 à 8. Comme au niveau 2, la saisie est plus simple qu'en multiplication — jamais de nombre à deux chiffres à taper.</li>
+    <li>Les divisions par 1 et par 10 restent des <strong>règles</strong> (§2.3, §11.2), jamais mémorisées ; le reste d'une division par 10 se lit directement au chiffre des unités (glisse-nombre inversé).</li>
+  </ul>
+  <p><strong>Pourquoi Leitner s'applique à une zone.</strong> L'association mémorisée est stable : quelle que soit la valeur de r tirée, la case mobilise le même fait d'appui (d×q) et le même geste. La variabilité du dividende est même un atout — elle empêche la mémorisation par cœur d'un énoncé exact et force le geste d'encadrement à chaque présentation, là où les niveaux 1 et 2 présentaient toujours la même question à l'identique.</p>
+
+  <h3 id="reste-declenchement"><span class="num">12.3</span>Déclenchement</h3>
+  <p>Même logique que le niveau 2 (§11.3), translatée d'un niveau : le niveau 3 se débloque à l'obtention des <strong>8 badges « Divisions par N »</strong> (toutes les divisions par n en boîte 4+). Critère fondé sur des badges, donc <strong>permanent</strong>. « Maître de la division » (boîte 5 sur les 64 divisions) n'est pas exigé — même raisonnement qu'en §11.3 pour « Génie de la multiplication » : exiger la boîte 5 partout imposerait un long palier de grind sans contenu nouveau, alors que le passage 4→5 se poursuit naturellement via l'entretien intégré aux séances du niveau 3, où « Maître de la division » devient un trophée décroché en route. Le déblocage est annoncé par une carte dédiée dans le récap (« Tu débloques la division avec reste ! »).</p>
+  <p><strong>Rythme d'introduction.</strong> Identique aux niveaux précédents : <strong>2 nouvelles cases par séance maximum</strong>, dans l'ordre canonique (doubles → ×5 → ×9 → carrés → dérivés, appliqué au couple diviseur/quotient), et seulement si les cases déjà introduites sont en boîte ≥ 2 (avec la même exception de phase finale qu'en §3.4bis). <strong>Filet de sécurité per-case</strong> : la case (d, q) n'est introduite que si la division exacte parente — la case (d, q) de la grille du niveau 2, soit d×q ÷ d — est en boîte 5. Les coordonnées coïncident exactement d'une grille à l'autre : chaque zone s'ouvre quand son point d'ancrage est parfaitement solide.</p>
+  <p><strong>Une seule séance par jour, un seul bouton.</strong> Comme au niveau 2 (§11.3) : pas de second bouton, la séance du jour devient la division avec reste, et les révisions de <strong>maintenance des niveaux 1 et 2</strong> (tables et divisions exactes dues) y sont intégrées, entrelacées avec les nouvelles questions. Le plafond d'entretien de 6 faits dus par séance absorbe le régime de croisière : 36 tables et 64 divisions revues tous les 21 jours produisent en moyenne (36 + 64) / 21 ≈ 5 révisions dues par jour. Le <strong>plancher de longueur</strong> (~12 questions, complétées par des révisions bonus sans effet Leitner) s'applique à l'identique pendant les premiers jours où le niveau est maigre.</p>
+
+  <h3 id="reste-strategie"><span class="num">12.4</span>Stratégie « cherche le multiple juste en dessous »</h3>
+  <p class="source"><strong>Sources :</strong> Robinson &amp; Dubé (2009), Robinson &amp; LeFevre (2012) ; Van de Walle</p>
+  <p>Comme pour l'inversion multiplication/division (§11.4), on n'attend pas de l'enfant qu'il découvre le geste seul : l'encadrement est <strong>enseigné explicitement</strong>, et il est le cœur de l'introduction de chaque case. L'astuce prolonge l'équation à facteur manquant du niveau 2 en <strong>équation à encadrement</strong> :</p>
+  <blockquote class="note">
+    <p>« 45 ÷ 7, c'est : <strong>7 fois combien</strong> font <em>presque</em> 45, sans dépasser ? » — <code>7 × ☐ ≤ 45</code>. On trouve 7 × 6 = 42, et de 42 à 45 il y a 3. Donc 45 ÷ 7 = <strong>6, reste 3</strong>.</p>
+  </blockquote>
+  <p><strong>Appui visuel : le groupement.</strong> Là où le niveau 2 montrait le <em>partage</em> (modèle partitif : « on partage 56 en 7 lots égaux »), le niveau 3 montre le <em>groupement</em> (modèle quotitif) : des rangées de 7 points se remplissent une à une (7, 14, 21… 42), on s'arrête avant de dépasser 45, et les 3 points qui ne forment pas une rangée complète restent isolés, mis en évidence : <strong>le reste, c'est ce qui ne rentre pas</strong>. Les deux modèles de la division sont ainsi couverts sur l'ensemble du parcours — la complémentarité recommandée par la littérature didactique (Van de Walle).</p>
+  <p>Le feedback de conclusion affiche l'<strong>égalité euclidienne</strong> en ligne — « 45 = 7 × 6 + 3 » — la forme exacte que l'enfant retrouvera en CM1. Comme aux niveaux précédents, l'astuce est affichée à l'introduction et en cas d'erreur pour les cases en boîte ≤ 2, et énoncée à voix haute (nouvelles clés TTS par case).</p>
+
+  <h3 id="reste-saisie"><span class="num">12.5</span>Saisie en deux temps</h3>
+  <p>C'est le principal coût UX nouveau du niveau : une question appelle <strong>deux réponses</strong>. Le flux reste sur un seul écran :</p>
+  <ol>
+    <li>La question s'affiche (« 45 ÷ 7 = ? ») et est énoncée à voix haute.</li>
+    <li>Premier champ, mis en évidence : le <strong>quotient</strong> (« Combien de fois ? »). Un chiffre, validation automatique.</li>
+    <li>Second champ : le <strong>reste</strong> (« Il reste combien ? »). Un chiffre (0 inclus), validation automatique.</li>
+  </ol>
+  <p><strong>Mode vocal :</strong> l'enfant énonce « six, reste trois » (variantes parsées : « six et il reste trois », « six reste trois ») ; un quotient seul est accepté et déclenche une relance douce (« et il reste ? »). Le cas « ça tombe juste » accepte « six » suivi de « rien » / « zéro » / « ça tombe juste ».</p>
+  <p><strong>Feedback ciblé par étape :</strong> une erreur de <em>quotient</em> ré-affiche l'encadrement complet (les rangées qui se remplissent) ; un bon quotient avec une erreur de <em>reste</em> ne ré-explique que l'écart (42 → 45). Dans les deux cas la case redescend en boîte 1 — l'état Leitner est porté par la case, pas par l'étape — mais l'explication vise l'endroit précis où l'enfant a buté.</p>
+
+  <h3 id="reste-image"><span class="num">12.6</span>Image mystère et badges</h3>
+  <p>Une <strong>troisième image mystère</strong> propre au niveau, sur la même grille 8×8 : la case (d, q) de l'image porte la zone (d, q), en bijection parfaite — 64 maîtrises indépendantes, sans symétrie miroir (non-commutativité, comme en §11.5). Les images des niveaux 1 et 2 restent affichées, complètes, en témoins des réussites passées ; le sélecteur de l'écran « Mes images » gagne une troisième entrée, ouvert par défaut sur l'image du niveau actif.</p>
+  <p><strong>Badges</strong>, masqués tant que le niveau n'est pas débloqué (même logique de révélation différée qu'aux §2.3 et §11.5) : <em>Premier reste maîtrisé</em> (🥉, première case en boîte 5), huit badges <em>Division avec reste par N</em> (🧮, n = diviseur 2..9, les 8 cases du diviseur en boîte 4+) et <em>Grand maître de la division</em> (👑, les 64 cases en boîte 5).</p>
+  <p><strong>Tableau de bord parent :</strong> le sélecteur Multiplications / Divisions (§5.2) gagne une troisième position « Divisions avec reste » (histogramme par boîte + grille Leitner, ouvert par défaut sur le niveau actif), la vue d'ensemble une carte « Zones maîtrisées », et la liste unifiée des faits les plus difficiles intègre la nouvelle opération avec son marqueur (« 45 ÷ 7 » affiché avec la mention <em>reste</em>).</p>
+
+  <h3 id="reste-algo"><span class="num">12.7</span>Adaptations de l'algorithme</h3>
+  <p>Le moteur (Leitner, entrelacement, composition de séance) se réutilise tel quel, comme au niveau 2 (§11.6). Trois ajustements :</p>
+  <ul>
+    <li><strong>Anti-interférence :</strong> les paires confusibles sont les cases de <strong>même diviseur à quotients adjacents</strong> — (7, 6) et (7, 7) se touchent à un point près (48 ÷ 7 contre 49 ÷ 7). Elles ne figurent jamais dans la même série, et leurs introductions sont espacées de 48h (règle §1.2 inchangée).</li>
+    <li><strong>Seuils de vitesse :</strong> deux saisies et un geste en deux temps — le seuil passe à <strong>8 s au clavier, 6 s en voix</strong> (contre 6 s / 4 s au niveau 2), mesuré de l'affichage de la question à la validation du reste.</li>
+    <li><strong>Bienveillance accrue :</strong> encore plus d'erreurs et de lenteur attendues qu'au niveau 2 ; le feedback ciblé par étape (§12.5) évite de faire porter à l'enfant une erreur globale quand seul le reste a échappé.</li>
+  </ul>
+
+  <h3 id="reste-reserves"><span class="num">12.8</span>Réserve méthodologique honnête</h3>
+  <p>La réserve du §11.7 s'applique, un cran plus loin. Au niveau 2, on généralisait la répétition espacée de la multiplication à la division ; ici, l'unité de maîtrise n'est même plus une association fixe question→réponse mais un <strong>micro-geste sur une zone</strong> (récupérer l'ancrage, compléter l'écart). Le pari : la zone est une association stable — « la zone de 7×6 » — et le geste s'automatise par la répétition comme un fait. Il est cohérent avec la littérature sur la médiation multiplicative et sur l'automatisation des stratégies de dérivation (§3.4bis), mais la répétition espacée n'a, à notre connaissance, jamais été testée spécifiquement sur ce format. Pari raisonné, assumé comme tel — à surveiller via le tableau de bord (temps de réponse, répartition des erreurs quotient/reste) si l'usage révélait un comportement différent des deux premiers niveaux.</p>
+</section>
+
 <section class="chapter" id="profils">
-  <h2><span class="num">12</span>Multi-profils — plusieurs enfants par appareil</h2>
+  <h2><span class="num">13</span>Multi-profils — plusieurs enfants par appareil</h2>
   <p>Une tablette familiale sert souvent à plusieurs enfants. Chaque enfant dispose de son propre profil : faits, boîtes Leitner, badges, séries et images mystère totalement indépendants. Aucune notion de compte ni de mot de passe — tout reste local sur l'appareil (§9).</p>
 
-  <h3 id="profils-parcours"><span class="num">12.1</span>Parcours</h3>
+  <h3 id="profils-parcours"><span class="num">13.1</span>Parcours</h3>
   <ul>
     <li><strong>Mono-profil (cas majoritaire)</strong> : rien ne change. Pas d'écran intermédiaire, pas de bouton supplémentaire — zéro friction ajoutée à la boucle quotidienne.</li>
     <li><strong>Ajout d'un enfant</strong> : bouton « Ajouter un enfant » dans l'espace parent (section Profils) ou depuis l'écran « Qui joue ? ». Rejoue l'onboarding complet : prénom, test de placement, intro des règles ×1/×10.</li>
@@ -998,21 +1062,21 @@ <h3 id="profils-parcours"><span class="num">12.1</span>Parcours</h3>
     <li><strong>Suppression</strong> : « Supprimer ce profil » dans l'espace parent, avec confirmation explicite. S'il reste un seul profil → retour direct à son accueil ; plusieurs → « Qui joue ? » ; aucun → onboarding.</li>
   </ul>
 
-  <h3 id="profils-stockage"><span class="num">12.2</span>Stockage et migration</h3>
+  <h3 id="profils-stockage"><span class="num">13.2</span>Stockage et migration</h3>
   <p>Chaque profil vit sous sa propre clé localStorage (<code>multiplix-profile:&lt;id&gt;</code>) ; un index léger (<code>multiplix-profiles</code>) liste les profils (id, prénom) et le profil actif. L'ancien schéma mono-clé (<code>multiplix-profile</code>) est migré automatiquement et silencieusement au premier lancement : le profil existant devient le premier profil de l'index, rien n'est perdu.</p>
   <p>L'export/import de sauvegarde reste par-profil : l'export produit le JSON du profil actif (format inchangé, compatible avec les sauvegardes antérieures) ; l'import depuis l'écran d'accueil crée un <em>nouveau</em> profil (jamais d'écrasement d'un autre enfant), tandis que l'import depuis l'espace parent restaure le profil actif.</p>
   <p>Le <strong>transfert par QR code</strong> (§7) est lui aussi par-profil : le profil reçu devient un nouveau profil actif sur l'appareil de destination — sauf si le même enfant (prénom + date de début identiques) y existe déjà, auquel cas son profil est mis à jour au lieu d'être dupliqué (cas du re-transfert). Pendant la récupération, l'app affiche « Récupération de la progression… » (pas d'écran vide entre le scan et l'arrivée) ; l'import réussi est confirmé par une bannière « bien arrivée ✓ », un transfert échoué (lien expiré ou déjà servi) par une bannière d'erreur.</p>
 </section>
 
 <section class="chapter" id="evolutions">
-  <h2><span class="num">13</span>Évolutions possibles (V2)</h2>
+  <h2><span class="num">14</span>Évolutions possibles (V2)</h2>
   <ul>
     <li>Mode défi : séance bonus optionnelle le week-end</li>
   </ul>
 </section>
 
 <section class="chapter" id="references">
-  <h2><span class="num">14</span>Références</h2>
+  <h2><span class="num">15</span>Références</h2>
   <ol class="references">
     <li>Axtell, P. K., McCallum, R. S., Bell, S. M., &amp; Poncy, B. (2009). Developing math automaticity using a classwide fluency building procedure for middle school students: A preliminary study. <em>Psychology in the Schools, 46</em>(6), 526–538.</li>
     <li>Brendefur, J., Strother, S., Thiede, K., &amp; Appleton, S. (2015). Developing multiplication fact fluency. <em>Advances in Social Sciences Research Journal, 2</em>(8). <a href="https://doi.org/10.14738/assrj.28.1396">doi:10.14738/assrj.28.1396</a></li>
@@ -1043,7 +1107,7 @@ <h2><span class="num">14</span>Références</h2>
 </main>
 
 <footer class="page-footer">
-  <p>Document de spécifications — v1.3 — Juin 2026</p>
+  <p>Document de spécifications — v1.4 — Juillet 2026</p>
   <p><a href="https://github.com/isc/tablito">Code source sur GitHub</a></p>
 </footer>
 

From 79615dddae6ceff91a53545d39c07b40a92a0808 Mon Sep 17 00:00:00 2001
From: Ivan Schneider <ivan.schneider@hey.com>
Date: Thu, 23 Jul 2026 23:16:17 +0200
Subject: [PATCH 2/4] =?UTF-8?q?feat(niveau3):=20la=20division=20avec=20res?=
 =?UTF-8?q?te=20=E2=80=94=20impl=C3=A9mentation=20compl=C3=A8te=20du=20?=
 =?UTF-8?q?=C2=A712?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Troisième porte de retrieval sur le réseau multiplicatif : 64 zones
(diviseur, quotient) en Leitner, reste tiré au sort à chaque révision
(canonique à l'intro pour coller aux MP3), déblocage sur les 8 badges
« Divisions par N », saisie en deux temps (quotient puis reste) avec
feedback ciblé par étape, 3e image mystère, badges dédiés (🥉 / ÷Nʳ / 👑),
entretien × et ÷ intégré à la séance unique (cap 6), dashboard parent à
3 onglets, faits difficiles unifiés, i18n fr/en, clés TTS (génération
des MP3 via le workflow après merge), changelog, et specs passées en
« implémenté ». 4 nouveaux fichiers de tests (composer, badges, daily,
parcours intégration avec saisie deux temps) — 251 tests verts.
Vérifié en vrai navigateur (Playwright) : intro de zone, deux temps,
feedback, séance mixte avec entretien des divisions.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 public/specs/index.html                  |  10 +-
 scripts/generate-tts.mjs                 |  52 ++++++
 src/App.tsx                              | 130 +++++++++++----
 src/__tests__/mixedSessionTTS.test.tsx   |   3 +-
 src/__tests__/remainderBadges.test.ts    | 105 ++++++++++++
 src/__tests__/remainderComposer.test.ts  | 146 ++++++++++++++++
 src/__tests__/remainderDaily.test.ts     | 128 +++++++++++++++
 src/__tests__/remainderJourney.test.tsx  | 120 ++++++++++++++
 src/components/DotGrid.css               |  11 ++
 src/components/DotGrid.tsx               |  17 ++
 src/components/FeedbackOverlay.tsx       |  61 +++++--
 src/components/RemainderMysteryImage.tsx |  38 +++++
 src/components/RemainderProgressGrid.tsx |  39 +++++
 src/components/RemainderStrategyHint.tsx |  35 ++++
 src/i18n/badges.ts                       |  33 ++++
 src/i18n/changelog.ts                    |  12 ++
 src/i18n/parent.ts                       |  22 +++
 src/i18n/progress.ts                     |  12 ++
 src/i18n/recap.ts                        |  29 ++++
 src/i18n/session.ts                      |  28 ++++
 src/i18n/strategies.ts                   |  38 +++++
 src/lib/badges.ts                        | 142 +++++++++++++++-
 src/lib/dailyComposer.ts                 | 190 ++++++++++++++++-----
 src/lib/hardestFacts.ts                  |  37 ++++-
 src/lib/remainderComposer.ts             | 140 ++++++++++++++++
 src/lib/remainderFacts.ts                |  83 ++++++++++
 src/lib/remainderStrategies.ts           |  45 +++++
 src/lib/sessionItemView.ts               |  23 +++
 src/lib/storage.ts                       |  38 ++++-
 src/screens/ParentDashboard.css          |   4 +
 src/screens/ParentDashboard.tsx          | 125 +++++++++-----
 src/screens/ProgressScreen.tsx           |  77 +++++----
 src/screens/RecapScreen.css              |   5 +
 src/screens/RecapScreen.tsx              |  73 +++++---
 src/screens/SessionScreen.css            |  23 +++
 src/screens/SessionScreen.tsx            | 201 ++++++++++++++++++-----
 src/types.ts                             |  75 ++++++++-
 37 files changed, 2087 insertions(+), 263 deletions(-)
 create mode 100644 src/__tests__/remainderBadges.test.ts
 create mode 100644 src/__tests__/remainderComposer.test.ts
 create mode 100644 src/__tests__/remainderDaily.test.ts
 create mode 100644 src/__tests__/remainderJourney.test.tsx
 create mode 100644 src/components/RemainderMysteryImage.tsx
 create mode 100644 src/components/RemainderProgressGrid.tsx
 create mode 100644 src/components/RemainderStrategyHint.tsx
 create mode 100644 src/lib/remainderComposer.ts
 create mode 100644 src/lib/remainderFacts.ts
 create mode 100644 src/lib/remainderStrategies.ts
 create mode 100644 src/lib/sessionItemView.ts

diff --git a/public/specs/index.html b/public/specs/index.html
index 5028b419..fc33b9cb 100644
--- a/public/specs/index.html
+++ b/public/specs/index.html
@@ -703,7 +703,7 @@ <h3 id="gam-badges"><span class="num">4.2</span>Badges</h3>
       <tr><td>Flamme éternelle</td><td>30 jours consécutifs</td><td>🌟</td></tr>
     </tbody>
   </table>
-  <p>Le <strong>niveau 2</strong> (§11) ajoute un jeu de badges symétrique pour la division (Première division maîtrisée, Divisions par N, Maître de la division), <strong>masqué</strong> tant que le niveau n'est pas débloqué — détaillé en §11.5. Le <strong>niveau 3</strong> (§12, spécifié non implémenté) prévoit le même principe pour la division avec reste — détaillé en §12.6.</p>
+  <p>Le <strong>niveau 2</strong> (§11) ajoute un jeu de badges symétrique pour la division (Première division maîtrisée, Divisions par N, Maître de la division), <strong>masqué</strong> tant que le niveau n'est pas débloqué — détaillé en §11.5. Le <strong>niveau 3</strong> (§12) ajoute de même son propre jeu pour la division avec reste — détaillé en §12.6.</p>
   <p>Les deux badges <em>Première case révélée</em> et <em>Première multiplication maîtrisée</em> jalonnent la zone intermédiaire, entre les badges du tout début (Premier pas, Machine, Exploration) et la maîtrise complète d'une table : ils se déclenchent au moment précis où l'image mystère §5.1 change visiblement de finesse pour la 1ère fois.</p>
   <p>Sur l'écran <em>Badges</em>, <strong>chaque vignette est cliquable</strong> et ouvre une modale qui explicite le badge :</p>
   <ul>
@@ -898,7 +898,7 @@ <h2><span class="num">9</span>Périmètre — Ce que l'application ne fait PAS</
     <li>Pas de collecte de données personnelles</li>
   </ul>
   <blockquote class="note">
-    <p><strong>Division :</strong> exclue du cœur v1 (focus unique sur la mémorisation des tables), elle n'est plus écartée sur le principe — elle est spécifiée comme <strong>niveau 2 optionnel</strong> (§11) : un track séparé qui révise les mêmes faits sous forme de division, déclenché uniquement après maîtrise multiplicative. Un enfant qui travaille encore ses tables ne le voit pas, donc le focus unique de la v1 est préservé. Le <strong>niveau 3</strong> (§12, spécifié non implémenté) prolonge la même logique vers la division avec reste, après maîtrise des divisions exactes.</p>
+    <p><strong>Division :</strong> exclue du cœur v1 (focus unique sur la mémorisation des tables), elle n'est plus écartée sur le principe — elle est spécifiée comme <strong>niveau 2 optionnel</strong> (§11) : un track séparé qui révise les mêmes faits sous forme de division, déclenché uniquement après maîtrise multiplicative. Un enfant qui travaille encore ses tables ne le voit pas, donc le focus unique de la v1 est préservé. Le <strong>niveau 3</strong> (§12) prolonge la même logique vers la division avec reste, après maîtrise des divisions exactes.</p>
   </blockquote>
 </section>
 
@@ -989,7 +989,7 @@ <h3 id="division-reserves"><span class="num">11.7</span>Réserve méthodologique
   <h2><span class="num">12</span>Niveau 3 — La division avec reste</h2>
   <p>Le niveau 2 (§11) s'arrête aux divisions <strong>exactes</strong> : 64 faits dont le quotient tombe toujours juste. L'attendu scolaire — et l'usage réel des tables pour les années qui suivent — est plus large : <strong>trouver le quotient et le reste</strong> quand le dividende ne tombe pas juste (« 45 ÷ 7 = 6, reste 3 »). Le <strong>niveau 3</strong> prolonge le parcours par ce geste, l'<strong>encadrement par les multiples</strong>. Comme le niveau 2, il ne rouvre aucun chantier : il re-mobilise le même réseau multiplicatif par une <strong>troisième porte d'entrée</strong> — pour répondre à 45 ÷ 7, l'enfant récupère le fait de table immédiatement inférieur (7 × 6 = 42), puis compte l'écart. La progression se lit ainsi : niveau 1 « je connais mes tables », niveau 2 « je les traverse dans l'autre sens », niveau 3 « je m'en sers quand ça ne tombe pas juste ».</p>
   <blockquote class="note">
-    <p><strong>Statut.</strong> Chapitre spécifié, <strong>non implémenté</strong>. Comme le niveau 2, le niveau 3 est invisible tant qu'il n'est pas débloqué : un enfant qui travaille encore ses tables ou ses divisions exactes n'en voit rien — le focus des niveaux précédents est préservé.</p>
+    <p><strong>Statut.</strong> Comme le niveau 2, le niveau 3 est invisible tant qu'il n'est pas débloqué : un enfant qui travaille encore ses tables ou ses divisions exactes n'en voit rien — le focus des niveaux précédents est préservé.</p>
   </blockquote>
 
   <h3 id="reste-pourquoi"><span class="num">12.1</span>Pourquoi ce niveau, et pourquoi à ce moment</h3>
@@ -1001,7 +1001,7 @@ <h3 id="reste-inventaire"><span class="num">12.2</span>Inventaire : 64 zones ent
   <p>L'unité de maîtrise n'est plus un fait isolé mais une <strong>zone</strong> : la case <code>(d, q)</code> — diviseur d, quotient q, tous deux de 2 à 9 — couvre les dividendes compris entre d×q inclus et d×(q+1) exclu. La case (7, 6) couvre ainsi les dividendes 42 à 48 divisés par 7 ; la case (7, 7) prend le relais à 49. Pour un diviseur donné, les zones partitionnent l'intervalle des dividendes sans chevauchement.</p>
   <ul>
     <li><strong>64 cases</strong> (8 diviseurs × 8 quotients), <strong>non commutatives</strong> comme au niveau 2 : (7, 6) porte « 42-48 ÷ 7 », (6, 7) porte « 42-47 ÷ 6 » — deux questions distinctes.</li>
-    <li><strong>Le reste est tiré au sort à chaque présentation</strong> : r uniforme dans 0..d−1, dividende = d×q + r. Le cas r = 0 (probabilité 1/d) garde vivante la discrimination « est-ce que ça tombe juste ? » — sans lui, l'enfant apprendrait le méta-pattern « il y a toujours un reste » — et entretient au passage les divisions exactes du niveau 2.</li>
+    <li><strong>Le reste est tiré au sort à chaque révision</strong> : r uniforme dans 0..d−1, dividende = d×q + r. Le cas r = 0 (probabilité 1/d) garde vivante la discrimination « est-ce que ça tombe juste ? » — sans lui, l'enfant apprendrait le méta-pattern « il y a toujours un reste » — et entretient au passage les divisions exactes du niveau 2. Seule exception : l'<strong>écran d'introduction</strong> d'une zone utilise un reste <strong>canonique</strong> déterministe (max(1, ⌊d/2⌋), ex : 45 ÷ 7 pour la zone (7,6)) — non nul pour montrer le concept, et fixe pour que l'audio pré-généré colle aux nombres affichés.</li>
     <li><strong>Les réponses restent à un chiffre</strong> : quotient de 2 à 9, reste de 0 à 8. Comme au niveau 2, la saisie est plus simple qu'en multiplication — jamais de nombre à deux chiffres à taper.</li>
     <li>Les divisions par 1 et par 10 restent des <strong>règles</strong> (§2.3, §11.2), jamais mémorisées ; le reste d'une division par 10 se lit directement au chiffre des unités (glisse-nombre inversé).</li>
   </ul>
@@ -1033,7 +1033,7 @@ <h3 id="reste-saisie"><span class="num">12.5</span>Saisie en deux temps</h3>
 
   <h3 id="reste-image"><span class="num">12.6</span>Image mystère et badges</h3>
   <p>Une <strong>troisième image mystère</strong> propre au niveau, sur la même grille 8×8 : la case (d, q) de l'image porte la zone (d, q), en bijection parfaite — 64 maîtrises indépendantes, sans symétrie miroir (non-commutativité, comme en §11.5). Les images des niveaux 1 et 2 restent affichées, complètes, en témoins des réussites passées ; le sélecteur de l'écran « Mes images » gagne une troisième entrée, ouvert par défaut sur l'image du niveau actif.</p>
-  <p><strong>Badges</strong>, masqués tant que le niveau n'est pas débloqué (même logique de révélation différée qu'aux §2.3 et §11.5) : <em>Premier reste maîtrisé</em> (🥉, première case en boîte 5), huit badges <em>Division avec reste par N</em> (🧮, n = diviseur 2..9, les 8 cases du diviseur en boîte 4+) et <em>Grand maître de la division</em> (👑, les 64 cases en boîte 5).</p>
+  <p><strong>Badges</strong>, masqués tant que le niveau n'est pas débloqué (même logique de révélation différée qu'aux §2.3 et §11.5) : <em>Premier reste maîtrisé</em> (🥉, première case en boîte 5), huit badges <em>Division avec reste par N</em> (glyphe « ÷Nʳ », n = diviseur 2..9, les 8 cases du diviseur en boîte 4+ — même famille visuelle que les médaillons ×N / ÷N) et <em>Grand maître de la division</em> (👑, les 64 cases en boîte 5).</p>
   <p><strong>Tableau de bord parent :</strong> le sélecteur Multiplications / Divisions (§5.2) gagne une troisième position « Divisions avec reste » (histogramme par boîte + grille Leitner, ouvert par défaut sur le niveau actif), la vue d'ensemble une carte « Zones maîtrisées », et la liste unifiée des faits les plus difficiles intègre la nouvelle opération avec son marqueur (« 45 ÷ 7 » affiché avec la mention <em>reste</em>).</p>
 
   <h3 id="reste-algo"><span class="num">12.7</span>Adaptations de l'algorithme</h3>
diff --git a/scripts/generate-tts.mjs b/scripts/generate-tts.mjs
index 4f71595e..b520aad8 100644
--- a/scripts/generate-tts.mjs
+++ b/scripts/generate-tts.mjs
@@ -218,6 +218,33 @@ function buildEntriesFr() {
     }
   }
 
+  // Niveau 3 — division avec reste (specs §12). Les questions couvrent tous
+  // les dividendes possibles (d×q + r, r ∈ 0..d-1) ; l'intro de chaque zone
+  // utilise le reste CANONIQUE (max(1, ⌊d/2⌋), cf. lib/remainderFacts
+  // introRemainder) pour que l'audio colle aux nombres affichés.
+  for (let divisor = 2; divisor <= 9; divisor++) {
+    for (let quotient = 2; quotient <= 9; quotient++) {
+      for (let r = 0; r < divisor; r++) {
+        const dividend = divisor * quotient + r;
+        entries.push({
+          key: `qr-${dividend}-${divisor}`,
+          text: `${dividend} divisé par ${divisor}`,
+        });
+      }
+      const introR = Math.max(1, Math.floor(divisor / 2));
+      const introDividend = divisor * quotient + introR;
+      entries.push({
+        key: `intror-${divisor}-${quotient}`,
+        text: `Nouveau ! ${introDividend} divisé par ${divisor}. ${divisor} fois combien font presque ${introDividend}, sans dépasser ? ${divisor} fois ${quotient}, égale ${divisor * quotient}, et il reste ${introR}. Donc ${introDividend} divisé par ${divisor}, égale ${quotient}, reste ${introR}.`,
+      });
+    }
+  }
+  entries.push({ key: 'rem-rest', text: 'Et il reste combien ?' });
+  entries.push({
+    key: 'strategy-rem',
+    text: 'Cherche le multiple juste en dessous, sans dépasser. Ce qui manque pour y arriver, c\'est le reste.',
+  });
+
   entries.push({
     key: 'welcome-hello',
     text: "Bonjour ! Je suis Piou, ton petit copain d'apprentissage. On va apprendre les tables de multiplication ensemble !",
@@ -300,6 +327,31 @@ function buildEntriesEn() {
     }
   }
 
+  // Level 3 — division with remainder (specs §12). Same coverage as French:
+  // every possible dividend for questions, canonical remainder for zone intros.
+  for (let divisor = 2; divisor <= 9; divisor++) {
+    for (let quotient = 2; quotient <= 9; quotient++) {
+      for (let r = 0; r < divisor; r++) {
+        const dividend = divisor * quotient + r;
+        entries.push({
+          key: `qr-${dividend}-${divisor}`,
+          text: `${dividend} divided by ${divisor}`,
+        });
+      }
+      const introR = Math.max(1, Math.floor(divisor / 2));
+      const introDividend = divisor * quotient + introR;
+      entries.push({
+        key: `intror-${divisor}-${quotient}`,
+        text: `New! ${introDividend} divided by ${divisor}. ${divisor} times what makes almost ${introDividend}, without going over? ${divisor} times ${quotient} equals ${divisor * quotient}, and ${introR} is left over. So ${introDividend} divided by ${divisor} equals ${quotient}, remainder ${introR}.`,
+      });
+    }
+  }
+  entries.push({ key: 'rem-rest', text: "And what's left over?" });
+  entries.push({
+    key: 'strategy-rem',
+    text: "Find the multiple just below, without going over. What's missing to get there is the remainder.",
+  });
+
   entries.push({
     key: 'welcome-hello',
     text: "Hi! I'm Piou, your little learning buddy. We're going to learn the times tables together!",
diff --git a/src/App.tsx b/src/App.tsx
index 4d439d3b..57b8d5dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,11 @@
 import { useState, useEffect, useLayoutEffect, useCallback, useRef, useMemo, lazy, Suspense } from 'react';
 import { setBusy as setSwBusy } from 'virtual:pwa-register';
 import type { UserProfile, SessionItem, SessionResult, SessionQuestionLog, Badge, BoxLevel } from './types';
-import { FAST_THRESHOLD_MS, DIVISION_FAST_THRESHOLD_MS } from './types';
+import {
+  FAST_THRESHOLD_MS,
+  DIVISION_FAST_THRESHOLD_MS,
+  REMAINDER_FAST_THRESHOLD_MS,
+} from './types';
 import { composeSession } from './lib/sessionComposer';
 import { composeDailySession } from './lib/dailyComposer';
 import { processAnswer } from './lib/leitner';
@@ -9,8 +13,11 @@ import {
   checkBadges,
   getCompletedTables,
   getCompletedDivisionTables,
+  getCompletedRemainderTables,
   isRule11Unlocked,
   isDivisionUnlocked,
+  isRemainderUnlocked,
+  activeLevel,
 } from './lib/badges';
 import {
   loadProfile,
@@ -26,6 +33,7 @@ import {
 } from './lib/storage';
 import { getFactKey } from './lib/facts';
 import { getDivisionFactKey } from './lib/divisionFacts';
+import { getRemainderFactKey } from './lib/remainderFacts';
 import { seedFromPlacement } from './lib/placement';
 import type { PlacementResult } from './lib/placement';
 import { todayISO } from './lib/utils';
@@ -131,18 +139,20 @@ export default function App({ transferResult = null }: AppProps) {
   // Liste unifiée de la séance en cours : 100% multiplication avant déblocage,
   // mixte (division + entretien des tables) après (specs §11.6).
   const [sessionItems, setSessionItems] = useState<SessionItem[]>([]);
-  // Quelle « saveur » de récap afficher (multiplication vs division) — pilote
-  // le nom affiché, le badge de complétion surveillé et l'écran image cible.
-  const [recapMode, setRecapMode] = useState<'mult' | 'div'>('mult');
+  // Quelle « saveur » de récap afficher (multiplication, division, division
+  // avec reste) — pilote le nom affiché, le jalon surveillé et l'image cible.
+  const [recapMode, setRecapMode] = useState<'mult' | 'div' | 'rem'>('mult');
   // Onglet ouvert à l'arrivée sur l'écran progression (« Mes images ») : sur
-  // l'image division quand on y va depuis le récap d'une séance de division.
-  const [progressView, setProgressView] = useState<'mult' | 'div'>('mult');
+  // l'image du niveau de la séance quand on y va depuis le récap.
+  const [progressView, setProgressView] = useState<'mult' | 'div' | 'rem'>('mult');
   const [sessionResult, setSessionResult] = useState<SessionResult | null>(null);
   const [newBadges, setNewBadges] = useState<Badge[]>([]);
   const [newlyCompletedTables, setNewlyCompletedTables] = useState<number[]>([]);
   // Vrai sur le récap de la séance où le 8e badge de table tombe : c'est le
   // moment du déblocage du niveau 2 (division), célébré une seule fois.
   const [divisionJustUnlocked, setDivisionJustUnlocked] = useState(false);
+  // Idem pour le niveau 3 : 8e badge « Divisions par N » (specs §12.3).
+  const [remainderJustUnlocked, setRemainderJustUnlocked] = useState(false);
   const [freezeJustUsed, setFreezeJustUsed] = useState(false);
   const [freezeJustEarned, setFreezeJustEarned] = useState(false);
   // Tracked in state so a date rollover (app left open past minuit) re-déclenche
@@ -162,6 +172,7 @@ export default function App({ transferResult = null }: AppProps) {
   // Snapshot of tables already mastered before the session starts
   const tablesCompletedBeforeSession = useRef<Set<number>>(new Set());
   const divisionTablesCompletedBeforeSession = useRef<Set<number>>(new Set());
+  const remainderTablesCompletedBeforeSession = useRef<Set<number>>(new Set());
 
   // Skip the initial save-to-localStorage on mount
   const isInitialLoad = useRef(true);
@@ -335,6 +346,13 @@ export default function App({ transferResult = null }: AppProps) {
     () => (profile ? isDivisionUnlocked(profile) : false),
     [profile],
   );
+  const remainderUnlocked = useMemo(
+    () => (profile ? isRemainderUnlocked(profile) : false),
+    [profile],
+  );
+  // Niveau de la séance du jour — composeDailySession branche lui-même sur le
+  // niveau actif, on n'a besoin du mode que pour le récap et l'image cible.
+  const sessionMode: 'mult' | 'div' | 'rem' = profile ? activeLevel(profile) : 'mult';
   const sessionDone = !!profile && profile.lastSessionDate === today;
   const pendingItems = useMemo<SessionItem[]>(() => {
     if (!profile || sessionDone) return [];
@@ -364,11 +382,14 @@ export default function App({ transferResult = null }: AppProps) {
     }
 
     resetSessionTracking();
-    // Snapshot des tables maîtrisées (célébration de complétion) — × et ÷.
+    // Snapshot des tables maîtrisées (célébration de complétion) — ×, ÷, reste.
     tablesCompletedBeforeSession.current = getCompletedTables(profile.facts);
     divisionTablesCompletedBeforeSession.current = getCompletedDivisionTables(
       profile.divisionFacts ?? [],
     );
+    remainderTablesCompletedBeforeSession.current = getCompletedRemainderTables(
+      profile.remainderFacts ?? [],
+    );
     setSessionItems(pendingItems);
     setScreen('session');
   }, [profile, pendingItems, resetSessionTracking]);
@@ -403,16 +424,24 @@ export default function App({ transferResult = null }: AppProps) {
       timeMs: number,
       answered: number | null,
       inputMode: 'keypad' | 'voice',
+      answeredRemainder?: number | null,
     ) => {
-      const fastMs = (item.kind === 'div' ? DIVISION_FAST_THRESHOLD_MS : FAST_THRESHOLD_MS)[inputMode];
+      const fastMs = (
+        item.kind === 'rem'
+          ? REMAINDER_FAST_THRESHOLD_MS
+          : item.kind === 'div'
+            ? DIVISION_FAST_THRESHOLD_MS
+            : FAST_THRESHOLD_MS
+      )[inputMode];
 
       sessionQuestionLogs.current.push({
         kind: item.kind,
-        a: item.kind === 'div' ? item.fact.divisor : item.fact.a,
-        b: item.kind === 'div' ? item.fact.quotient : item.fact.b,
+        a: item.kind === 'mult' ? item.fact.a : item.fact.divisor,
+        b: item.kind === 'mult' ? item.fact.b : item.fact.quotient,
         correct,
         responseTimeMs: timeMs,
         answeredWith: answered,
+        ...(item.kind === 'rem' ? { remainder: item.remainder, answeredRemainder } : {}),
         isBonusReview: item.isBonusReview,
         inputMode,
         fast: correct && timeMs < fastMs,
@@ -436,6 +465,26 @@ export default function App({ transferResult = null }: AppProps) {
       setProfile((prev) => {
         if (!prev) return prev;
 
+        if (item.kind === 'rem') {
+          if (!prev.remainderFacts) return prev;
+          const { divisor, quotient } = item.fact;
+          const current =
+            prev.remainderFacts.find((f) => f.divisor === divisor && f.quotient === quotient) ??
+            item.fact;
+          const updated = processAnswer(current, correct, timeMs, today, inputMode, fastMs);
+          if (updated.history.length > 0) {
+            updated.history[updated.history.length - 1].answeredWith = answered;
+          }
+          if (!updated.introduced) updated.introduced = true;
+          trackPromotion(getRemainderFactKey(divisor, quotient), current.box, updated.box);
+          return {
+            ...prev,
+            remainderFacts: prev.remainderFacts.map((f) =>
+              f.divisor === divisor && f.quotient === quotient ? updated : f,
+            ),
+          };
+        }
+
         if (item.kind === 'div') {
           if (!prev.divisionFacts) return prev;
           const { dividend, divisor } = item.fact;
@@ -487,7 +536,7 @@ export default function App({ transferResult = null }: AppProps) {
     (partial: Omit<SessionResult, 'factsPromoted'>) => {
       if (!profile) return;
 
-      const mode: 'mult' | 'div' = divisionUnlocked ? 'div' : 'mult';
+      const mode = sessionMode;
       const result: SessionResult = {
         ...partial,
         factsPromoted: sessionPromoted.current.size,
@@ -530,26 +579,33 @@ export default function App({ transferResult = null }: AppProps) {
       updatedProfile.badges = [...profile.badges, ...brandNewBadges];
 
       // Tables fraîchement complétées (tous faits en boîte 5) de l'opération de
-      // la séance : tables × en mode mult, « divisions par N » en mode div.
+      // la séance : tables × en mode mult, « divisions par N » en mode div,
+      // zones par diviseur en mode rem.
       const completedNow =
-        mode === 'div'
-          ? [...getCompletedDivisionTables(updatedProfile.divisionFacts ?? [])].filter(
-              (t) => !divisionTablesCompletedBeforeSession.current.has(t),
+        mode === 'rem'
+          ? [...getCompletedRemainderTables(updatedProfile.remainderFacts ?? [])].filter(
+              (t) => !remainderTablesCompletedBeforeSession.current.has(t),
             )
-          : [...getCompletedTables(updatedProfile.facts)].filter(
-              (t) => !tablesCompletedBeforeSession.current.has(t),
-            );
-
-      // Déblocage du niveau 2 : la condition (8 badges de table) vient de
-      // basculer cette séance. `divisionUnlocked` reflète l'état d'AVANT la
-      // séance (memo sur `profile`), donc mode est encore 'mult' ici.
+          : mode === 'div'
+            ? [...getCompletedDivisionTables(updatedProfile.divisionFacts ?? [])].filter(
+                (t) => !divisionTablesCompletedBeforeSession.current.has(t),
+              )
+            : [...getCompletedTables(updatedProfile.facts)].filter(
+                (t) => !tablesCompletedBeforeSession.current.has(t),
+              );
+
+      // Déblocages : la condition (8 badges de table / de divisions) vient de
+      // basculer cette séance. Les memos `*Unlocked` reflètent l'état d'AVANT
+      // la séance, donc mode est encore celui du niveau précédent ici.
       const divisionUnlockedNow = !divisionUnlocked && isDivisionUnlocked(updatedProfile);
+      const remainderUnlockedNow = !remainderUnlocked && isRemainderUnlocked(updatedProfile);
 
       setProfile(updatedProfile);
       setSessionResult(result);
       setNewBadges(brandNewBadges);
       setNewlyCompletedTables(completedNow);
       setDivisionJustUnlocked(divisionUnlockedNow);
+      setRemainderJustUnlocked(remainderUnlockedNow);
       setFreezeJustUsed(streakUpdate.freezeJustUsed);
       setFreezeJustEarned(streakUpdate.freezeJustEarned);
       setRecapMode(mode);
@@ -560,7 +616,7 @@ export default function App({ transferResult = null }: AppProps) {
       // abonné / push non configuré), jamais bloquant pour le recap.
       void syncLastSession();
     },
-    [profile, divisionUnlocked],
+    [profile, divisionUnlocked, remainderUnlocked, sessionMode],
   );
 
   const exitRecap = useCallback((next: Screen) => {
@@ -568,6 +624,7 @@ export default function App({ transferResult = null }: AppProps) {
     setNewBadges([]);
     setNewlyCompletedTables([]);
     setDivisionJustUnlocked(false);
+    setRemainderJustUnlocked(false);
     setFreezeJustUsed(false);
     setFreezeJustEarned(false);
     setRecapMode('mult');
@@ -576,6 +633,16 @@ export default function App({ transferResult = null }: AppProps) {
 
   const handleRecapFinish = useCallback(() => exitRecap('home'), [exitRecap]);
 
+  // Faits du niveau de la séance qui vient de se terminer — alimente la jauge
+  // de progression du récap (« Tu connais X / Y »).
+  const recapFacts = !profile
+    ? []
+    : recapMode === 'rem'
+      ? (profile.remainderFacts ?? [])
+      : recapMode === 'div'
+        ? (profile.divisionFacts ?? [])
+        : profile.facts;
+
   const handleExport = useCallback(() => {
     if (!profile) return;
     const json = exportProfile(profile);
@@ -685,9 +752,9 @@ export default function App({ transferResult = null }: AppProps) {
           divisionUnlocked={divisionUnlocked}
           onStart={handleStart}
           onShowProgress={() => {
-            // Post-déblocage, l'image des tables est complète (tout en boîte 5) :
-            // on ouvre directement sur la division, celle qui reste à dévoiler.
-            setProgressView(divisionUnlocked ? 'div' : 'mult');
+            // Post-déblocage, les images des niveaux passés sont complètes :
+            // on ouvre directement sur celle du niveau actif, à dévoiler.
+            setProgressView(sessionMode);
             setScreen('progress');
           }}
           onShowBadges={() => setScreen('badges')}
@@ -712,17 +779,12 @@ export default function App({ transferResult = null }: AppProps) {
           newBadges={newBadges}
           newlyCompletedTables={newlyCompletedTables}
           divisionJustUnlocked={divisionJustUnlocked}
+          remainderJustUnlocked={remainderJustUnlocked}
           currentStreak={profile.currentStreak}
           freezeJustUsed={freezeJustUsed}
           freezeJustEarned={freezeJustEarned}
-          knownFactsCount={
-            recapMode === 'div'
-              ? (profile.divisionFacts ?? []).filter((f) => f.box >= 3).length
-              : profile.facts.filter((f) => f.box >= 3).length
-          }
-          totalFacts={
-            recapMode === 'div' ? (profile.divisionFacts ?? []).length : profile.facts.length
-          }
+          knownFactsCount={recapFacts.filter((f) => f.box >= 3).length}
+          totalFacts={recapFacts.length}
           onFinish={handleRecapFinish}
           onShowProgress={() => { setProgressView(recapMode); exitRecap('progress'); }}
           mode={recapMode}
diff --git a/src/__tests__/mixedSessionTTS.test.tsx b/src/__tests__/mixedSessionTTS.test.tsx
index 5f09e8ed..b743567c 100644
--- a/src/__tests__/mixedSessionTTS.test.tsx
+++ b/src/__tests__/mixedSessionTTS.test.tsx
@@ -84,7 +84,8 @@ describe('Séance mixte — lecture audio des questions', () => {
     // appears — faster than the 25ms first-load of its audio.
     for (const q of questions) {
       await wait(10);
-      const answer = q.kind === 'div' ? q.fact.quotient : q.fact.product;
+      const answer =
+        q.kind === 'div' ? q.fact.quotient : q.kind === 'mult' ? q.fact.product : q.fact.quotient;
       typeAnswer(answer);
       dismissFeedback();
     }
diff --git a/src/__tests__/remainderBadges.test.ts b/src/__tests__/remainderBadges.test.ts
new file mode 100644
index 00000000..7a75f893
--- /dev/null
+++ b/src/__tests__/remainderBadges.test.ts
@@ -0,0 +1,105 @@
+// @vitest-environment node
+import { describe, it, expect } from 'vitest';
+import type { UserProfile } from '../types';
+import { BADGE_IDS } from '../types';
+import {
+  checkBadges,
+  isRemainderUnlocked,
+  visibleBadgeDefinitions,
+  getCompletedRemainderTables,
+  getRemainderBadgeDefinitions,
+} from '../lib/badges';
+import { createNewProfile } from '../lib/storage';
+
+function profile(): UserProfile {
+  return createNewProfile('Zoé');
+}
+
+function earn(p: UserProfile, id: string): void {
+  p.badges.push({ id, earnedDate: '2026-07-23', icon: '' });
+}
+
+// Débloque le niveau 3 : les 8 badges « Divisions par N » (specs §12.3).
+function unlockRemainder(p: UserProfile): void {
+  for (let n = 2; n <= 9; n++) earn(p, `${BADGE_IDS.DIV_TABLE_PREFIX}${n}`);
+}
+
+describe('isRemainderUnlocked', () => {
+  it('faux par défaut, vrai dès les 8 badges « Divisions par N »', () => {
+    const p = profile();
+    expect(isRemainderUnlocked(p)).toBe(false);
+    for (let n = 2; n <= 8; n++) earn(p, `${BADGE_IDS.DIV_TABLE_PREFIX}${n}`);
+    expect(isRemainderUnlocked(p)).toBe(false);
+    earn(p, `${BADGE_IDS.DIV_TABLE_PREFIX}9`);
+    expect(isRemainderUnlocked(p)).toBe(true);
+  });
+
+  it('le badge Maître de la division seul ne débloque PAS (découplé, cf. §12.3)', () => {
+    const p = profile();
+    earn(p, BADGE_IDS.DIV_GENIE);
+    expect(isRemainderUnlocked(p)).toBe(false);
+  });
+});
+
+describe('visibleBadgeDefinitions — niveau 3', () => {
+  it("masque les badges niveau 3 tant qu'il n'est pas débloqué", () => {
+    const p = profile();
+    const ids = new Set(visibleBadgeDefinitions(p).map((d) => d.id));
+    expect(ids.has(BADGE_IDS.REM_GENIE)).toBe(false);
+    expect(ids.has(BADGE_IDS.REM_PREMIERE_MAITRISE)).toBe(false);
+  });
+
+  it('révèle les badges niveau 3 une fois débloqué', () => {
+    const p = profile();
+    unlockRemainder(p);
+    const ids = new Set(visibleBadgeDefinitions(p).map((d) => d.id));
+    expect(ids.has(BADGE_IDS.REM_GENIE)).toBe(true);
+    expect(ids.has(BADGE_IDS.REM_PREMIERE_MAITRISE)).toBe(true);
+    // 1 + 8 diviseurs + 1 = 10 badges niveau 3.
+    expect(getRemainderBadgeDefinitions()).toHaveLength(10);
+  });
+});
+
+describe('checkBadges — badges niveau 3', () => {
+  it("n'attribue rien tant que le niveau n'est pas débloqué, même avec des zones en boîte 5", () => {
+    const p = profile();
+    p.remainderFacts = p.remainderFacts!.map((f) => ({ ...f, box: 5 as const, introduced: true }));
+    expect(checkBadges(p).filter((b) => b.id.startsWith('rem-'))).toHaveLength(0);
+  });
+
+  it('attribue Premier reste maîtrisé, les 8 « Division avec reste par N » et Grand maître', () => {
+    const p = profile();
+    unlockRemainder(p);
+    p.remainderFacts = p.remainderFacts!.map((f) => ({ ...f, box: 5 as const, introduced: true }));
+    const earned = checkBadges(p);
+    const ids = new Set(earned.map((b) => b.id));
+    expect(ids.has(BADGE_IDS.REM_PREMIERE_MAITRISE)).toBe(true);
+    expect(ids.has(BADGE_IDS.REM_GENIE)).toBe(true);
+    for (let n = 2; n <= 9; n++) {
+      expect(ids.has(`${BADGE_IDS.REM_TABLE_PREFIX}${n}`)).toBe(true);
+    }
+  });
+
+  it('badge par diviseur dès la boîte 4 sur les 8 zones du diviseur', () => {
+    const p = profile();
+    unlockRemainder(p);
+    p.remainderFacts = p.remainderFacts!.map((f) =>
+      f.divisor === 7 ? { ...f, box: 4 as const, introduced: true } : f,
+    );
+    const ids = new Set(checkBadges(p).map((b) => b.id));
+    expect(ids.has(`${BADGE_IDS.REM_TABLE_PREFIX}7`)).toBe(true);
+    expect(ids.has(`${BADGE_IDS.REM_TABLE_PREFIX}8`)).toBe(false);
+  });
+});
+
+describe('getCompletedRemainderTables', () => {
+  it('un diviseur est complet quand ses 8 zones sont en boîte 5', () => {
+    const p = profile();
+    p.remainderFacts = p.remainderFacts!.map((f) =>
+      f.divisor === 3 ? { ...f, box: 5 as const, introduced: true } : f,
+    );
+    const completed = getCompletedRemainderTables(p.remainderFacts!);
+    expect(completed.has(3)).toBe(true);
+    expect(completed.size).toBe(1);
+  });
+});
diff --git a/src/__tests__/remainderComposer.test.ts b/src/__tests__/remainderComposer.test.ts
new file mode 100644
index 00000000..f8cb97cd
--- /dev/null
+++ b/src/__tests__/remainderComposer.test.ts
@@ -0,0 +1,146 @@
+// @vitest-environment node
+import { describe, it, expect } from 'vitest';
+import type { UserProfile } from '../types';
+import { REMAINDER_FAST_THRESHOLD_MS, remainderDividend } from '../types';
+import { createNewProfile } from '../lib/storage';
+import {
+  createInitialRemainderFacts,
+  parentDivisionKey,
+  introRemainder,
+} from '../lib/remainderFacts';
+import { composeRemainderSession } from '../lib/remainderComposer';
+import { processAnswer, isDue } from '../lib/leitner';
+import { getDivisionFactKey } from '../lib/divisionFacts';
+
+// Marque les divisions exactes données comme prêtes (boîte 4+, boîte 5 par
+// défaut). Le gate d'intro niveau 3 est aligné sur boîte ≥ 4
+// (isRemainderUnlocked = badges « Divisions par N » = boîte 4+).
+function withMasteredDivisions(pairs: [number, number][], box: 4 | 5 = 5): UserProfile {
+  const p = createNewProfile('Zoé');
+  const keys = new Set(pairs.map(([divisor, quotient]) => getDivisionFactKey(divisor * quotient, divisor)));
+  p.divisionFacts = p.divisionFacts!.map((f) =>
+    keys.has(getDivisionFactKey(f.dividend, f.divisor)) ? { ...f, box, introduced: true } : f,
+  );
+  return p;
+}
+
+const NOW = '2026-07-23';
+
+describe('composeRemainderSession — gating sur la maîtrise des divisions', () => {
+  it("ne propose rien si aucune division n'est maîtrisée", () => {
+    const p = createNewProfile('Zoé');
+    expect(composeRemainderSession(p, NOW)).toEqual([]);
+  });
+
+  it('rend éligible une zone dès que sa division parente est en boîte 5', () => {
+    const p = withMasteredDivisions([[2, 2]]); // parent de la zone (2,2)
+    const session = composeRemainderSession(p, NOW);
+    expect(session).toHaveLength(1);
+    expect(session[0].isIntroduction).toBe(true);
+    expect(session[0].fact.divisor).toBe(2);
+    expect(session[0].fact.quotient).toBe(2);
+  });
+
+  it('rend éligible une zone dès que sa division parente est en boîte 4', () => {
+    const p = withMasteredDivisions([[2, 2]], 4);
+    const session = composeRemainderSession(p, NOW);
+    expect(session).toHaveLength(1);
+    expect(session[0].isIntroduction).toBe(true);
+  });
+
+  it("l'intro utilise le reste canonique de la zone (audio pré-généré)", () => {
+    const p = withMasteredDivisions([[7, 6]]);
+    const session = composeRemainderSession(p, NOW);
+    expect(session).toHaveLength(1);
+    expect(session[0].remainder).toBe(introRemainder(7)); // 3 → 45 ÷ 7
+    expect(remainderDividend(session[0])).toBe(45);
+  });
+
+  it("n'introduit jamais ensemble deux zones de même diviseur (§12.7)", () => {
+    const p = withMasteredDivisions([[2, 2], [2, 3]]);
+    const session = composeRemainderSession(p, NOW);
+    const intros = session.filter((q) => q.isIntroduction);
+    expect(intros).toHaveLength(1);
+  });
+
+  it('plafonne à 2 nouvelles zones par séance', () => {
+    const p = withMasteredDivisions([[2, 2], [3, 3], [4, 4]]);
+    const session = composeRemainderSession(p, NOW);
+    expect(session.filter((q) => q.isIntroduction)).toHaveLength(2);
+  });
+
+  it('toute zone introduite a bien une division parente prête (boîte 4+)', () => {
+    const p = withMasteredDivisions([[2, 2], [3, 3]], 4);
+    const session = composeRemainderSession(p, NOW);
+    const parentReadyKeys = new Set(
+      p.divisionFacts!.filter((f) => f.box >= 4).map((f) => getDivisionFactKey(f.dividend, f.divisor)),
+    );
+    for (const q of session) {
+      expect(parentReadyKeys.has(parentDivisionKey(q.fact))).toBe(true);
+    }
+  });
+
+  it("n'introduit pas de nouvelle zone si une zone introduite est en boîte 1 (pacing)", () => {
+    const p = withMasteredDivisions([[2, 2], [3, 3], [4, 4], [5, 5], [6, 6]]);
+    p.remainderFacts = p.remainderFacts!.map((f, i) =>
+      i === 0 ? { ...f, introduced: true, box: 1 as const, nextDue: '2026-12-31' } : f,
+    );
+    const session = composeRemainderSession(p, NOW);
+    expect(session.filter((q) => q.isIntroduction)).toHaveLength(0);
+  });
+
+  it('le reste tiré reste toujours dans 0..divisor-1 et le dividende dans la zone', () => {
+    const p = withMasteredDivisions([[2, 2], [3, 3], [4, 4], [5, 5]]);
+    p.remainderFacts = p.remainderFacts!.map((f, i) =>
+      i < 8 ? { ...f, introduced: true, box: 2 as const, nextDue: '' } : f,
+    );
+    for (let run = 0; run < 10; run++) {
+      const session = composeRemainderSession(p, NOW);
+      for (const q of session) {
+        expect(q.remainder).toBeGreaterThanOrEqual(0);
+        expect(q.remainder).toBeLessThan(q.fact.divisor);
+        const dividend = remainderDividend(q);
+        expect(dividend).toBeGreaterThanOrEqual(q.fact.divisor * q.fact.quotient);
+        expect(dividend).toBeLessThan(q.fact.divisor * (q.fact.quotient + 1));
+      }
+    }
+  });
+
+  it('complète une séance courte avec des révisions bonus de zones introduites', () => {
+    const p = withMasteredDivisions([[2, 2]]);
+    // Beaucoup de zones introduites mais non dues → réserve de bonus.
+    p.remainderFacts = p.remainderFacts!.map((f) =>
+      f.divisor <= 5 ? { ...f, introduced: true, box: 3 as const, nextDue: '2026-12-31' } : f,
+    );
+    const session = composeRemainderSession(p, NOW);
+    expect(session.length).toBeGreaterThanOrEqual(12);
+    expect(session.some((q) => q.isBonusReview)).toBe(true);
+  });
+});
+
+describe('Leitner réutilisé pour le niveau 3 (specs §12.7)', () => {
+  it('processAnswer préserve la forme RemainderFact et fait monter de boîte', () => {
+    const fact = createInitialRemainderFacts()[0]; // zone (2,2), boîte 1
+    const after = processAnswer(fact, true, 1000, NOW, 'keypad');
+    expect(after.box).toBe(2);
+    expect(after.divisor).toBe(fact.divisor);
+    expect(after.quotient).toBe(fact.quotient);
+    expect(after.history).toHaveLength(1);
+  });
+
+  it('isDue fonctionne sur un RemainderFact', () => {
+    const fact = createInitialRemainderFacts()[0];
+    expect(isDue(fact, NOW)).toBe(true);
+    expect(isDue({ ...fact, nextDue: '2026-12-31' }, NOW)).toBe(false);
+  });
+
+  it('seuil de vitesse niveau 3 encore plus généreux : 7 s au clavier fait monter de boîte', () => {
+    const fact = createInitialRemainderFacts()[0];
+    // 7000 ms : trop lent pour la division (seuil 6000), mais sous le seuil
+    // niveau 3 (8000) → la boîte doit monter.
+    const asDiv = processAnswer(fact, true, 7000, NOW, 'keypad', 6000);
+    expect(asDiv.box).toBe(1);
+    const asRem = processAnswer(fact, true, 7000, NOW, 'keypad', REMAINDER_FAST_THRESHOLD_MS.keypad);
+    expect(asRem.box).toBe(2);
+  });
+});
diff --git a/src/__tests__/remainderDaily.test.ts b/src/__tests__/remainderDaily.test.ts
new file mode 100644
index 00000000..d4f6b041
--- /dev/null
+++ b/src/__tests__/remainderDaily.test.ts
@@ -0,0 +1,128 @@
+// @vitest-environment node
+import { describe, it, expect } from 'vitest';
+import type { UserProfile } from '../types';
+import { BADGE_IDS, remainderDividend } from '../types';
+import { createNewProfile } from '../lib/storage';
+import { composeDailySession } from '../lib/dailyComposer';
+import { createInitialRemainderFacts, introRemainder, drawRemainder } from '../lib/remainderFacts';
+import { getRemainderFactKey, parentDivisionKey } from '../lib/remainderFacts';
+
+const NOW = '2026-07-23';
+
+// Profil niveau 3 : tables et divisions toutes en boîte 5 (non dues), badges
+// de déblocage présents (tables + divisions par N).
+function level3Profile(): UserProfile {
+  const p = createNewProfile('Zoé');
+  p.facts = p.facts.map((f) => ({
+    ...f,
+    box: 5 as const,
+    introduced: true,
+    lastSeen: '2026-07-01',
+    nextDue: '2099-12-31',
+  }));
+  p.divisionFacts = p.divisionFacts!.map((f) => ({
+    ...f,
+    box: 5 as const,
+    introduced: true,
+    lastSeen: '2026-07-01',
+    nextDue: '2099-12-31',
+  }));
+  for (let n = 2; n <= 9; n++) {
+    p.badges.push({ id: `${BADGE_IDS.TABLE_PREFIX}${n}`, earnedDate: '2026-06-01', icon: '' });
+    p.badges.push({ id: `${BADGE_IDS.DIV_TABLE_PREFIX}${n}`, earnedDate: '2026-07-01', icon: '' });
+  }
+  return p;
+}
+
+describe('composeDailySession — niveau 3 actif (specs §12.3)', () => {
+  it('niveau 3 débloqué → la séance du jour contient des questions avec reste', () => {
+    const p = level3Profile();
+    const session = composeDailySession(p, NOW);
+    expect(session.length).toBeGreaterThanOrEqual(1);
+    expect(session.some((i) => i.kind === 'rem')).toBe(true);
+    // Les intros passent en tête, plafonnées à 2.
+    const intros = session.filter((i) => i.isIntroduction);
+    expect(intros.length).toBeLessThanOrEqual(2);
+    expect(intros.every((i) => i.kind === 'rem')).toBe(true);
+  });
+
+  it('divisions par N pas toutes badgées → séance division (niveau 2), pas de reste', () => {
+    const p = level3Profile();
+    p.badges = p.badges.filter((b) => b.id !== `${BADGE_IDS.DIV_TABLE_PREFIX}9`);
+    const session = composeDailySession(p, NOW);
+    expect(session.some((i) => i.kind === 'rem')).toBe(false);
+  });
+
+  it("l'entretien × et ÷ dus est intégré, plafonné à 6 au total", () => {
+    const p = level3Profile();
+    // 5 tables et 5 divisions dues → 10 candidats, plafond 6.
+    p.facts = p.facts.map((f, i) => (i < 5 ? { ...f, nextDue: '' } : f));
+    p.divisionFacts = p.divisionFacts!.map((f, i) => (i < 5 ? { ...f, nextDue: '' } : f));
+    // Zones déjà bien avancées pour que la séance ne soit pas dominée par le padding.
+    p.remainderFacts = p.remainderFacts!.map((f) => ({
+      ...f,
+      introduced: true,
+      box: 3 as const,
+      nextDue: '',
+    }));
+    const session = composeDailySession(p, NOW);
+    const maintenance = session.filter(
+      (i) => (i.kind === 'mult' || i.kind === 'div') && !i.isBonusReview,
+    );
+    expect(maintenance.length).toBeGreaterThan(0);
+    expect(maintenance.length).toBeLessThanOrEqual(6);
+    expect(session.some((i) => i.kind === 'rem')).toBe(true);
+  });
+
+  it('PLANCHER — premiers jours du niveau 3 : la séance atteint ~12 questions via du bonus', () => {
+    const p = level3Profile();
+    const session = composeDailySession(p, NOW);
+    expect(session.length).toBeGreaterThanOrEqual(12);
+    // Le padding vient des niveaux précédents (réserve inépuisable).
+    expect(session.some((i) => i.isBonusReview)).toBe(true);
+  });
+
+  // NB : l'entrelacement anti-interférence est best-effort (interleaveGreedy,
+  // « quand c'est possible » §6.2) — pas d'assertion d'adjacence stricte ici ;
+  // le conflit même-diviseur est couvert par les tests d'intro du composer.
+});
+
+describe('remainderFacts — inventaire (specs §12.2)', () => {
+  it('64 zones, un couple (diviseur, quotient) chacun dans 2..9', () => {
+    const facts = createInitialRemainderFacts();
+    expect(facts).toHaveLength(64);
+    const keys = new Set(facts.map((f) => getRemainderFactKey(f.divisor, f.quotient)));
+    expect(keys.size).toBe(64);
+    for (const f of facts) {
+      expect(f.divisor).toBeGreaterThanOrEqual(2);
+      expect(f.divisor).toBeLessThanOrEqual(9);
+      expect(f.quotient).toBeGreaterThanOrEqual(2);
+      expect(f.quotient).toBeLessThanOrEqual(9);
+      expect(f.box).toBe(1);
+      expect(f.introduced).toBe(false);
+    }
+  });
+
+  it('la clé parente pointe la division exacte de la même case', () => {
+    const facts = createInitialRemainderFacts();
+    const zone = facts.find((f) => f.divisor === 7 && f.quotient === 6)!;
+    expect(parentDivisionKey(zone)).toBe('42/7');
+  });
+
+  it('introRemainder est non nul et dans la zone ; drawRemainder couvre 0..d-1', () => {
+    for (let d = 2; d <= 9; d++) {
+      const r = introRemainder(d);
+      expect(r).toBeGreaterThanOrEqual(1);
+      expect(r).toBeLessThan(d);
+      const seen = new Set<number>();
+      for (let i = 0; i < 500; i++) seen.add(drawRemainder(d));
+      expect(seen.size).toBe(d); // 0..d-1 tous atteints
+    }
+  });
+
+  it('remainderDividend recompose le dividende affiché', () => {
+    const zone = createInitialRemainderFacts().find((f) => f.divisor === 7 && f.quotient === 6)!;
+    expect(remainderDividend({ fact: zone, remainder: 3 })).toBe(45);
+    expect(remainderDividend({ fact: zone, remainder: 0 })).toBe(42);
+  });
+});
diff --git a/src/__tests__/remainderJourney.test.tsx b/src/__tests__/remainderJourney.test.tsx
new file mode 100644
index 00000000..8357fc74
--- /dev/null
+++ b/src/__tests__/remainderJourney.test.tsx
@@ -0,0 +1,120 @@
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/preact';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import App from '../App';
+// Précharge le chunk lazy de l'écran progression pour qu'il se résolve dans le test.
+import '../screens/ProgressScreen';
+import { createNewProfile, saveProfile } from '../lib/storage';
+import { BADGE_IDS } from '../types';
+
+// Test d'intégration du niveau 3 (specs §12) : monte le vrai <App /> et
+// vérifie, via le DOM, que la séance du jour bascule sur la division avec
+// reste une fois les 8 badges « Divisions par N » acquis, et que la saisie
+// se fait en deux temps (quotient puis reste).
+
+function findByText(re: RegExp): HTMLButtonElement | null {
+  return (
+    (Array.from(document.querySelectorAll('button')).find((b) =>
+      re.test((b.textContent ?? '').trim()),
+    ) as HTMLButtonElement | undefined) ?? null
+  );
+}
+
+function tapDigit(d: number): void {
+  const btn = Array.from(document.querySelectorAll('.numpad-btn')).find(
+    (b) => b.getAttribute('aria-label') === String(d),
+  ) as HTMLButtonElement;
+  fireEvent.click(btn);
+}
+
+function tapOk(): void {
+  fireEvent.click(document.querySelector('.numpad-btn-ok') as HTMLButtonElement);
+}
+
+// Profil niveau 3 : tables ET divisions en boîte 5 (rien de dû), badges de
+// déblocage posés explicitement (la migration n'attribue qu'une passe).
+function level3Profile() {
+  const p = createNewProfile('Zoé');
+  p.hasSeenRulesIntro = true;
+  p.totalSessions = 120;
+  p.lastSessionDate = null;
+  const mastered = { box: 5 as const, introduced: true, lastSeen: '2026-07-01', nextDue: '2099-12-31' };
+  p.facts = p.facts.map((f) => ({ ...f, ...mastered }));
+  p.divisionFacts = p.divisionFacts!.map((f) => ({ ...f, ...mastered }));
+  for (let n = 2; n <= 9; n++) {
+    p.badges.push({ id: `${BADGE_IDS.TABLE_PREFIX}${n}`, earnedDate: '2026-06-01', icon: '' });
+    p.badges.push({ id: `${BADGE_IDS.DIV_TABLE_PREFIX}${n}`, earnedDate: '2026-07-01', icon: '' });
+  }
+  return p;
+}
+
+afterEach(() => {
+  cleanup();
+  localStorage.clear();
+});
+
+describe('Niveau 3 — séance du jour et saisie en deux temps', () => {
+  it('débloqué : la 1ʳᵉ question est une intro « cherche le multiple juste en dessous »', () => {
+    saveProfile(level3Profile());
+    render(<App />);
+
+    fireEvent.click(findByText(/C'est parti/)!);
+
+    // Intro de zone : formule « 5 ÷ 2 » + astuce d'encadrement.
+    expect(document.querySelector('.session-intro-formula')?.textContent).toContain('÷');
+    expect(document.body.textContent).toContain('multiple juste en dessous');
+  });
+
+  it('saisie en deux temps : quotient puis reste, feedback correct', async () => {
+    saveProfile(level3Profile());
+    render(<App />);
+    fireEvent.click(findByText(/C'est parti/)!);
+
+    // Passe l'intro → la question s'affiche. Première zone introduite : (2,2)
+    // (doubles d'abord), reste canonique 1 → « 5 ÷ 2 », quotient 2, reste 1.
+    fireEvent.click(findByText(/J'ai compris/)!);
+    expect(document.querySelector('.session-question-text')?.textContent).toContain('5');
+    expect(document.body.textContent).toContain('Combien de fois');
+
+    // Étape 1 : quotient.
+    tapDigit(2);
+    tapOk();
+    await waitFor(() => {
+      expect(document.body.textContent).toContain('Il reste combien');
+    });
+
+    // Étape 2 : reste → feedback positif.
+    tapDigit(1);
+    tapOk();
+    await waitFor(() => {
+      expect(document.querySelector('.feedback-overlay.correct')).not.toBeNull();
+    });
+  });
+
+  it('quotient faux : la question se termine tout de suite (feedback erreur ciblé)', async () => {
+    saveProfile(level3Profile());
+    render(<App />);
+    fireEvent.click(findByText(/C'est parti/)!);
+    fireEvent.click(findByText(/J'ai compris/)!);
+
+    tapDigit(9); // 5 ÷ 2 → quotient attendu 2
+    tapOk();
+    await waitFor(() => {
+      expect(document.querySelector('.feedback-overlay.incorrect')).not.toBeNull();
+    });
+    // L'égalité euclidienne de la zone est affichée (2 × 2 + 1).
+    expect(document.body.textContent).toContain('reste');
+  });
+
+  it('« Mes images » propose l\'onglet « Avec reste », ouvert par défaut', async () => {
+    saveProfile(level3Profile());
+    render(<App />);
+
+    fireEvent.click(findByText(/Mes images/)!);
+
+    await waitFor(() => {
+      const activeTab = document.querySelector('.progress-tab.active');
+      expect(activeTab?.textContent).toContain('Avec reste');
+    });
+  });
+});
diff --git a/src/components/DotGrid.css b/src/components/DotGrid.css
index e781b553..c3780f06 100644
--- a/src/components/DotGrid.css
+++ b/src/components/DotGrid.css
@@ -158,3 +158,14 @@
     transform: translateY(-50%) scale(1);
   }
 }
+
+/* Niveau 3 — rangée du reste : les points qui « ne rentrent pas » dans les
+   rangées pleines (specs §12.4). Mis à part visuellement (coral, détachés de
+   la grille par un léger espace) pour matérialiser l'écart. */
+.dot-grid-row--rest {
+  margin-top: calc(var(--dot-gap, 10px) * 1.5);
+}
+
+.dot--rest {
+  background: var(--coral);
+}
diff --git a/src/components/DotGrid.tsx b/src/components/DotGrid.tsx
index 49d75439..5a8ffdc6 100644
--- a/src/components/DotGrid.tsx
+++ b/src/components/DotGrid.tsx
@@ -19,6 +19,11 @@ interface DotGridProps {
    *  distincts, en met un en avant, et révèle son compte (= `b`, le quotient =
    *  la réponse de la division). Modèle partitif relié à la table (specs §11.4). */
   groupReveal?: boolean;
+  /** Niveau 3 (division avec reste) : rangée incomplète de `remainderDots`
+   *  points mis à part sous la grille — « le reste, c'est ce qui ne rentre
+   *  pas ». Modèle quotitif : les rangées pleines sont les fois du diviseur,
+   *  les points isolés l'écart (specs §12.4). */
+  remainderDots?: number;
 }
 
 export default function DotGrid({
@@ -29,6 +34,7 @@ export default function DotGrid({
   size = 'normal',
   bare = false,
   groupReveal = false,
+  remainderDots = 0,
 }: DotGridProps) {
   const [visibleRows, setVisibleRows] = useState(animated ? 0 : a);
   const [showResult, setShowResult] = useState(!animated);
@@ -135,6 +141,17 @@ export default function DotGrid({
             </div>
           );
         })}
+        {remainderDots > 0 && (
+          <div
+            className={`dot-grid-row dot-grid-row--rest ${
+              !animated ? 'no-animation' : showResult ? '' : 'hidden'
+            }`}
+          >
+            {Array.from({ length: remainderDots }, (_, i) => (
+              <div key={i} className="dot dot--rest" />
+            ))}
+          </div>
+        )}
       </div>
       {!bare && (
         <div className={`dot-grid-result ${showResult ? 'visible' : ''}`}>
diff --git a/src/components/FeedbackOverlay.tsx b/src/components/FeedbackOverlay.tsx
index ba3abfa2..ff18ff50 100644
--- a/src/components/FeedbackOverlay.tsx
+++ b/src/components/FeedbackOverlay.tsx
@@ -3,20 +3,29 @@ import DotGrid from './DotGrid';
 import FeedbackStar from './FeedbackStar';
 import StrategyHint from './StrategyHint';
 import DivisionStrategyHint from './DivisionStrategyHint';
+import RemainderStrategyHint from './RemainderStrategyHint';
 import { getStrategy } from '../lib/strategies';
 import { getDivisionStrategy } from '../lib/divisionStrategies';
+import { getRemainderStrategy } from '../lib/remainderStrategies';
 import { pickRandom } from '../lib/utils';
+import { itemDisplay } from '../lib/sessionItemView';
 import { useFeedbackOverlayStrings } from '../i18n/session';
 import type { SessionItem } from '../types';
 
 interface FeedbackOverlayProps {
-  // Question à laquelle on vient de répondre (multiplication ou division).
+  // Question à laquelle on vient de répondre (multiplication, division ou
+  // division avec reste).
   item: SessionItem;
   correct: boolean;
   fast: boolean;
   // Valeur réellement saisie/dite — affichée sur le chemin erreur pour
-  // distinguer « mauvaise réponse » de « le micro a mal entendu ».
+  // distinguer « mauvaise réponse » de « le micro a mal entendu ». Pour le
+  // niveau 3, c'est le QUOTIENT saisi.
   submittedValue: number;
+  // Niveau 3 uniquement : reste saisi, ou null si la question s'est arrêtée à
+  // un quotient faux — le feedback cible alors l'encadrement, pas l'écart
+  // (specs §12.5).
+  submittedRemainder?: number | null;
   onDismiss: () => void;
 }
 
@@ -25,6 +34,7 @@ export default function FeedbackOverlay({
   correct,
   fast,
   submittedValue,
+  submittedRemainder,
   onDismiss,
 }: FeedbackOverlayProps) {
   const t = useFeedbackOverlayStrings();
@@ -38,11 +48,14 @@ export default function FeedbackOverlay({
     return () => clearTimeout(timer);
   }, [correct, onDismiss]);
 
-  // Opérandes affichés + réponse, selon le type de question.
-  const left = item.kind === 'div' ? item.fact.dividend : item.displayA;
-  const op = item.kind === 'div' ? '÷' : '×';
-  const right = item.kind === 'div' ? item.fact.divisor : item.displayB;
-  const answer = item.kind === 'div' ? item.fact.quotient : item.fact.product;
+  // Opérandes affichés (dérivation partagée avec SessionScreen) + réponse.
+  const isRem = item.kind === 'rem';
+  const { left, op, right } = itemDisplay(item);
+  const answerText = isRem
+    ? t.remAnswer(item.fact.quotient, item.remainder)
+    : item.kind === 'div'
+      ? String(item.fact.quotient)
+      : String(item.fact.product);
 
   if (correct) {
     return (
@@ -50,7 +63,7 @@ export default function FeedbackOverlay({
         <FeedbackStar fast={fast} />
         <div className="feedback-message correct">{message}</div>
         <div className="feedback-answer">
-          {left} {op} {right} = <b>{answer}</b>
+          {left} {op} {right} = <b>{answerText}</b>
         </div>
       </div>
     );
@@ -60,7 +73,9 @@ export default function FeedbackOverlay({
   // de points montre toujours le fait multiplicatif sous-jacent.
   let strategyHint = null;
   if (item.fact.box <= 2) {
-    if (item.kind === 'div') {
+    if (item.kind === 'rem') {
+      strategyHint = <RemainderStrategyHint strategy={getRemainderStrategy(item)} variant="feedback" />;
+    } else if (item.kind === 'div') {
       strategyHint = <DivisionStrategyHint strategy={getDivisionStrategy(item.fact)} variant="feedback" />;
     } else {
       const s = getStrategy(item.fact.a, item.fact.b);
@@ -68,10 +83,18 @@ export default function FeedbackOverlay({
     }
   }
 
-  const gridA = item.kind === 'div' ? item.fact.divisor : item.displayA;
-  const gridB = item.kind === 'div' ? item.fact.quotient : item.displayB;
-  const gridEyebrow =
-    item.kind === 'div'
+  // Réponse saisie : composée « quotient, reste » quand la question niveau 3 a
+  // atteint l'étape 2 (bon quotient, mauvais reste) ; quotient seul sinon.
+  const submittedText =
+    isRem && submittedRemainder != null
+      ? t.remAnswer(submittedValue, submittedRemainder)
+      : String(submittedValue);
+
+  const gridA = item.kind === 'mult' ? item.displayA : isRem ? item.fact.quotient : item.fact.divisor;
+  const gridB = item.kind === 'mult' ? item.displayB : isRem ? item.fact.divisor : item.fact.quotient;
+  const gridEyebrow = isRem
+    ? t.remEyebrow(item.fact.divisor, item.fact.quotient, item.remainder)
+    : item.kind === 'div'
       ? `${item.fact.divisor} × ${item.fact.quotient} = ${item.fact.dividend}`
       : `${item.displayA} × ${item.displayB} = ${t.rowsOf(item.displayA, item.displayB)}`;
 
@@ -80,15 +103,21 @@ export default function FeedbackOverlay({
       <div className="feedback-card">
         <div className="feedback-message incorrect">{message}</div>
         <div className="feedback-user-answer">
-          {t.youAnswered} <b>{submittedValue}</b>
+          {t.youAnswered} <b>{submittedText}</b>
         </div>
         <div className="feedback-answer">
-          {left} {op} {right} = <b>{answer}</b>
+          {left} {op} {right} = <b>{answerText}</b>
         </div>
         {strategyHint}
         <div className="feedback-dotgrid">
           <div className="feedback-dotgrid-eyebrow">{gridEyebrow}</div>
-          <DotGrid a={gridA} b={gridB} animated={false} bare />
+          <DotGrid
+            a={gridA}
+            b={gridB}
+            remainderDots={isRem ? item.remainder : 0}
+            animated={false}
+            bare
+          />
         </div>
         <button type="button" className="feedback-ok-btn" onClick={onDismiss}>
           {t.gotIt}
diff --git a/src/components/RemainderMysteryImage.tsx b/src/components/RemainderMysteryImage.tsx
new file mode 100644
index 00000000..97dc7d63
--- /dev/null
+++ b/src/components/RemainderMysteryImage.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import type { RemainderFact, MysteryTheme } from '../types';
+import MysteryGrid, { type MysteryCell } from './MysteryGrid';
+import { getRemainderFactKey, remainderZoneBounds } from '../lib/remainderFacts';
+import { useFactCellStrings } from '../i18n/progress';
+
+interface RemainderMysteryImageProps {
+  facts: RemainderFact[];
+  theme: MysteryTheme;
+}
+
+// Image mystère du niveau 3 : la case (row, col) porte la ZONE (diviseur row,
+// quotient col) — les dividendes de row×col à row×(col+1)−1 divisés par row.
+// Sans canonicalisation, comme la division (specs §12.6).
+export default function RemainderMysteryImage({ facts, theme }: RemainderMysteryImageProps) {
+  const t = useFactCellStrings();
+  const factMap = useMemo(() => {
+    const m = new Map<string, RemainderFact>();
+    for (const f of facts) m.set(getRemainderFactKey(f.divisor, f.quotient), f);
+    return m;
+  }, [facts]);
+
+  const cellFor = (row: number, col: number): MysteryCell => {
+    const fact = factMap.get(getRemainderFactKey(row, col));
+    const [lo, hi] = remainderZoneBounds({ divisor: row, quotient: col });
+    return {
+      level: fact?.introduced ? fact.box : 0,
+      introduced: fact?.introduced ?? false,
+      ariaLabel: t.remLabel(lo, hi, row),
+      detailHeading: fact ? `${lo}–${hi} ÷ ${fact.divisor}` : '',
+      gridA: fact?.divisor ?? row,
+      gridB: fact?.quotient ?? col,
+      box: fact?.box ?? 1,
+    };
+  };
+
+  return <MysteryGrid theme={theme} cellFor={cellFor} />;
+}
diff --git a/src/components/RemainderProgressGrid.tsx b/src/components/RemainderProgressGrid.tsx
new file mode 100644
index 00000000..6b1b8ae9
--- /dev/null
+++ b/src/components/RemainderProgressGrid.tsx
@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import type { RemainderFact } from '../types';
+import LeitnerGrid, { type LeitnerGridCell } from './LeitnerGrid';
+import { getRemainderFactKey, remainderZoneBounds } from '../lib/remainderFacts';
+import { useFactCellStrings } from '../i18n/progress';
+
+interface RemainderProgressGridProps {
+  facts: RemainderFact[];
+}
+
+// Grille Leitner du niveau 3 : la case (row, col) porte la zone (diviseur row,
+// quotient col) — cf. RemainderMysteryImage. Pas de diagonale particulière.
+export default function RemainderProgressGrid({ facts }: RemainderProgressGridProps) {
+  const t = useFactCellStrings();
+  const factMap = useMemo(() => {
+    const m = new Map<string, RemainderFact>();
+    for (const f of facts) m.set(getRemainderFactKey(f.divisor, f.quotient), f);
+    return m;
+  }, [facts]);
+
+  const cellFor = (row: number, col: number): LeitnerGridCell => {
+    const fact = factMap.get(getRemainderFactKey(row, col));
+    const correctCount = fact ? fact.history.filter((h) => h.correct).length : 0;
+    const [lo, hi] = remainderZoneBounds({ divisor: row, quotient: col });
+    return {
+      box: fact?.box ?? 1,
+      introduced: fact?.introduced ?? false,
+      ariaLabel: t.remLabel(lo, hi, row),
+      diagonal: false,
+      modal: {
+        title: fact ? `${lo}–${hi} ÷ ${fact.divisor}` : '',
+        correctCount,
+        totalAttempts: fact?.history.length ?? 0,
+      },
+    };
+  };
+
+  return <LeitnerGrid operator="÷" cellFor={cellFor} />;
+}
diff --git a/src/components/RemainderStrategyHint.tsx b/src/components/RemainderStrategyHint.tsx
new file mode 100644
index 00000000..5657af27
--- /dev/null
+++ b/src/components/RemainderStrategyHint.tsx
@@ -0,0 +1,35 @@
+import type { RemainderStrategy } from '../lib/remainderStrategies';
+import StrategyHintShell from './StrategyHintShell';
+import { useStrategyHintStrings } from '../i18n/strategies';
+
+interface RemainderStrategyHintProps {
+  strategy: RemainderStrategy;
+  variant?: 'feedback' | 'intro';
+}
+
+// Variante niveau 3 : une seule stratégie (« cherche le multiple juste en
+// dessous »). L'élément central est l'équation à ENCADREMENT
+// « divisor × ☐ ≤ dividend » (specs §12.4) — prolongement de l'équation à
+// facteur manquant de la division : l'enfant cherche le plus grand facteur
+// qui tient sans dépasser, le reste étant l'écart.
+export default function RemainderStrategyHint({
+  strategy,
+  variant = 'feedback',
+}: RemainderStrategyHintProps) {
+  const t = useStrategyHintStrings();
+  const bounding = (
+    <span className="strategy-hint-pivot">
+      {strategy.divisor} × <span className="strategy-hint-box" aria-label={t.missingFactorAria}>?</span>{' '}
+      {'≤'} {strategy.dividend}
+    </span>
+  );
+
+  return (
+    <StrategyHintShell
+      variant={variant}
+      title={strategy.title}
+      lines={[strategy.intro, bounding, strategy.conclusion]}
+      eyebrow={t.eyebrowDiv}
+    />
+  );
+}
diff --git a/src/i18n/badges.ts b/src/i18n/badges.ts
index d6b4d841..ad2e1afc 100644
--- a/src/i18n/badges.ts
+++ b/src/i18n/badges.ts
@@ -36,6 +36,9 @@ export interface BadgeI18n {
   divPremiereMaitrise: BadgeText;
   divTable: (n: number) => BadgeText;
   divGenie: BadgeText;
+  remPremiereMaitrise: BadgeText;
+  remTable: (n: number) => BadgeText;
+  remGenie: BadgeText;
   units: BadgeUnitLabels;
 }
 
@@ -114,6 +117,21 @@ const fr: BadgeI18n = {
     description: 'Toutes les divisions en boîte 5',
     conditionText: 'Place toutes les divisions dans la boîte 5 (le top niveau !).',
   },
+  remPremiereMaitrise: {
+    name: 'Premier reste maîtrisé',
+    description: 'Une division avec reste au top niveau',
+    conditionText: 'Place ta toute première division avec reste en boîte 5.',
+  },
+  remTable: (n) => ({
+    name: `Division avec reste par ${n}`,
+    description: `Maîtriser les divisions avec reste par ${n}`,
+    conditionText: `Place toutes les divisions avec reste par ${n} dans la boîte 4 ou 5.`,
+  }),
+  remGenie: {
+    name: 'Grand maître de la division',
+    description: 'Toutes les divisions avec reste en boîte 5',
+    conditionText: 'Place toutes les divisions avec reste dans la boîte 5 (le top niveau !).',
+  },
   units: {
     session: 'séance',
     box4: 'en boîte 4',
@@ -198,6 +216,21 @@ const en: BadgeI18n = {
     description: 'Every division in box 5',
     conditionText: 'Move every division to box 5 (the top level!).',
   },
+  remPremiereMaitrise: {
+    name: 'First remainder mastered',
+    description: 'A division with remainder at the top level',
+    conditionText: 'Move your very first division with remainder to box 5.',
+  },
+  remTable: (n) => ({
+    name: `Remainders when dividing by ${n}`,
+    description: `Master dividing by ${n} with remainders`,
+    conditionText: `Move every division with remainder by ${n} to box 4 or 5.`,
+  }),
+  remGenie: {
+    name: 'Grand master of division',
+    description: 'Every division with remainder in box 5',
+    conditionText: 'Move every division with remainder to box 5 (the top level!).',
+  },
   units: {
     session: 'session',
     box4: 'in box 4',
diff --git a/src/i18n/changelog.ts b/src/i18n/changelog.ts
index 03902602..1c2d8d16 100644
--- a/src/i18n/changelog.ts
+++ b/src/i18n/changelog.ts
@@ -8,6 +8,12 @@ import type { ChangelogEntry } from '../lib/changelog';
 // parent (anglais adulte clair). Consommé par lib/changelog.ts via getLang().
 
 const fr: ChangelogEntry[] = [
+  {
+    date: '2026-07-23',
+    items: [
+      "Nouveau niveau 3 : la division avec reste. Quand toutes les divisions sont maîtrisées (les 8 badges « Divisions par N »), l'app propose le geste suivant du programme (fin CE2 / CM1) : trouver le quotient et le reste quand ça ne tombe pas juste (« 45 ÷ 7 = 6, reste 3 »). La réponse se donne en deux temps (« Combien de fois ? » puis « Il reste combien ? »), une troisième image mystère se dévoile, et l'entretien des tables et des divisions continue en arrière-plan dans la même séance quotidienne. Rien ne change pour les enfants qui n'en sont pas là : le niveau est invisible avant d'être débloqué.",
+    ],
+  },
   {
     date: '2026-07-20',
     items: [
@@ -165,6 +171,12 @@ const fr: ChangelogEntry[] = [
 ];
 
 const en: ChangelogEntry[] = [
+  {
+    date: '2026-07-23',
+    items: [
+      'New level 3: division with remainders. Once every division is mastered (all 8 "Dividing by N" badges), the app moves on to the next skill in the curriculum: finding the quotient and the remainder when it doesn\'t come out even ("45 ÷ 7 = 6 r 3"). Answers come in two steps ("How many times?" then "What\'s left over?"), a third mystery picture reveals itself, and times-table and division upkeep continues in the background within the same daily session. Nothing changes for children who aren\'t there yet: the level stays invisible until it is unlocked.',
+    ],
+  },
   {
     date: '2026-07-20',
     items: [
diff --git a/src/i18n/parent.ts b/src/i18n/parent.ts
index 493aed7a..40bdc9a5 100644
--- a/src/i18n/parent.ts
+++ b/src/i18n/parent.ts
@@ -19,8 +19,10 @@ interface ParentDashboardStrings {
   operation: string;
   multiplications: string;
   divisions: string;
+  remainders: string;
   divisionsMastered: string;
   multiplicationsMastered: string;
+  remaindersMastered: string;
   boxDistribution: string;
   learnMoreLeitner: string;
   boxDistributionSubtitle: (op: string) => string;
@@ -28,10 +30,13 @@ interface ParentDashboardStrings {
   leitnerGridSubtitle: (op: string) => string;
   opDivision: string;
   opMultiplication: string;
+  opRemainder: string;
   opDivisionsPlural: string;
   opMultiplicationsPlural: string;
+  opRemaindersPlural: string;
   factDivision: string;
   factMultiplication: string;
+  factRemainder: string;
   correctAnswerRate: string;
   averageResponseTime: string;
   hardestFacts: string;
@@ -71,8 +76,11 @@ interface ParentDashboardStrings {
   formatLongDate: (date: Date) => string;
   divSymbol: string;
   multSymbol: string;
+  remSymbol: string;
   formatDivFact: (dividend: number, divisor: number, quotient: number) => string;
   formatMultFact: (a: number, b: number, product: number) => string;
+  // Niveau 3 : une « zone » de dividendes (specs §12.6) — « 42-48 ÷ 7 ».
+  formatRemFact: (lo: number, hi: number, divisor: number) => string;
 }
 
 const parentDashboardFr: ParentDashboardStrings = {
@@ -87,8 +95,10 @@ const parentDashboardFr: ParentDashboardStrings = {
   operation: 'Opération',
   multiplications: 'Multiplications',
   divisions: 'Divisions',
+  remainders: 'Avec reste',
   divisionsMastered: 'Divisions maîtrisées',
   multiplicationsMastered: 'Multiplications maîtrisées',
+  remaindersMastered: 'Divisions avec reste maîtrisées',
   boxDistribution: 'Répartition par boîte',
   learnMoreLeitner: 'En savoir plus sur le système de Leitner',
   boxDistributionSubtitle: (op) =>
@@ -98,10 +108,13 @@ const parentDashboardFr: ParentDashboardStrings = {
     `Une case par ${op}, colorée selon sa boîte. Le rouge signale les faits récents ou en difficulté, le vert ceux bien ancrés.`,
   opDivision: 'division',
   opMultiplication: 'multiplication',
+  opRemainder: 'division avec reste',
   opDivisionsPlural: 'divisions',
   opMultiplicationsPlural: 'multiplications',
+  opRemaindersPlural: 'divisions avec reste',
   factDivision: 'Division',
   factMultiplication: 'Multiplication',
+  factRemainder: 'Division avec reste',
   correctAnswerRate: 'Taux de bonnes réponses',
   averageResponseTime: 'Temps de réponse moyen',
   hardestFacts: 'Faits les plus difficiles',
@@ -145,9 +158,11 @@ const parentDashboardFr: ParentDashboardStrings = {
     date.toLocaleDateString(localeFor('fr'), { weekday: 'short', day: 'numeric', month: 'long' }),
   divSymbol: '÷',
   multSymbol: '×',
+  remSymbol: '÷ʳ',
   formatDivFact: (dividend, divisor, quotient) =>
     `${dividend} ÷ ${divisor} = ${quotient}`,
   formatMultFact: (a, b, product) => `${a} × ${b} = ${product}`,
+  formatRemFact: (lo, hi, divisor) => `${lo}-${hi} ÷ ${divisor}`,
 };
 
 const parentDashboardEn: ParentDashboardStrings = {
@@ -162,8 +177,10 @@ const parentDashboardEn: ParentDashboardStrings = {
   operation: 'Operation',
   multiplications: 'Multiplication',
   divisions: 'Division',
+  remainders: 'Remainders',
   divisionsMastered: 'Division facts mastered',
   multiplicationsMastered: 'Multiplication facts mastered',
+  remaindersMastered: 'Remainder facts mastered',
   boxDistribution: 'Distribution by box',
   learnMoreLeitner: 'Learn more about the Leitner system',
   boxDistributionSubtitle: (op) =>
@@ -173,11 +190,14 @@ const parentDashboardEn: ParentDashboardStrings = {
     `One cell per ${op} fact, colored by its box. Red flags recent or tricky facts, green the well-learned ones.`,
   opDivision: 'division',
   opMultiplication: 'multiplication',
+  opRemainder: 'division-with-remainder',
   // En anglais « X facts » prend le singulier ; même mot que la grille Leitner.
   opDivisionsPlural: 'division',
   opMultiplicationsPlural: 'multiplication',
+  opRemaindersPlural: 'division-with-remainder',
   factDivision: 'Division',
   factMultiplication: 'Multiplication',
+  factRemainder: 'Division with remainder',
   correctAnswerRate: 'Correct answer rate',
   averageResponseTime: 'Average response time',
   hardestFacts: 'Hardest facts',
@@ -221,9 +241,11 @@ const parentDashboardEn: ParentDashboardStrings = {
     date.toLocaleDateString(localeFor('en'), { weekday: 'short', day: 'numeric', month: 'long' }),
   divSymbol: '÷',
   multSymbol: '×',
+  remSymbol: '÷ʳ',
   formatDivFact: (dividend, divisor, quotient) =>
     `${dividend} ÷ ${divisor} = ${quotient}`,
   formatMultFact: (a, b, product) => `${a} × ${b} = ${product}`,
+  formatRemFact: (lo, hi, divisor) => `${lo}-${hi} ÷ ${divisor}`,
 };
 
 export const parentDashboardStrings = {
diff --git a/src/i18n/progress.ts b/src/i18n/progress.ts
index bb44d6d4..74f7c0ce 100644
--- a/src/i18n/progress.ts
+++ b/src/i18n/progress.ts
@@ -19,6 +19,7 @@ interface ProgressScreenStrings {
   myMysteryPicture: string;
   multiplications: string;
   divisions: string;
+  remainders: string;
   discoveredMult: string;
   discoveredDiv: string;
   masteredMult: string;
@@ -26,6 +27,7 @@ interface ProgressScreenStrings {
   total: string;
   legendMult: string;
   legendDiv: string;
+  legendRem: string;
 }
 
 const progressScreenFr: ProgressScreenStrings = {
@@ -34,6 +36,7 @@ const progressScreenFr: ProgressScreenStrings = {
   myMysteryPicture: 'Mon image mystère',
   multiplications: 'Multiplications',
   divisions: 'Divisions',
+  remainders: 'Avec reste',
   discoveredMult: 'découverts',
   discoveredDiv: 'découvertes',
   masteredMult: 'maîtrisés',
@@ -43,6 +46,8 @@ const progressScreenFr: ProgressScreenStrings = {
     "Chaque multiplication que tu connais mieux dévoile un peu plus de l'image. Et si un fait a besoin d'être revu, sa case se brouille à nouveau : l'image montre toujours où tu en es. Continue, et elle se complétera !",
   legendDiv:
     "Chaque division que tu connais mieux dévoile un peu plus de cette image. Et si un fait a besoin d'être revu, sa case se brouille à nouveau : l'image montre toujours où tu en es. Continue, et elle se complétera !",
+  legendRem:
+    "Chaque division avec reste que tu connais mieux dévoile un peu plus de cette image. Et si une case a besoin d'être revue, elle se brouille à nouveau : l'image montre toujours où tu en es. Continue, et elle se complétera !",
 };
 
 const progressScreenEn: ProgressScreenStrings = {
@@ -51,6 +56,7 @@ const progressScreenEn: ProgressScreenStrings = {
   myMysteryPicture: 'My mystery picture',
   multiplications: 'Multiplications',
   divisions: 'Divisions',
+  remainders: 'Remainders',
   discoveredMult: 'discovered',
   discoveredDiv: 'discovered',
   masteredMult: 'mastered',
@@ -60,6 +66,8 @@ const progressScreenEn: ProgressScreenStrings = {
     'Every multiplication you know better reveals a bit more of the picture. And if a fact needs reviewing, its square blurs again: the picture always shows where you are right now. Keep going, and it will be complete!',
   legendDiv:
     'Every division you know better reveals a bit more of this picture. And if a fact needs reviewing, its square blurs again: the picture always shows where you are right now. Keep going, and it will be complete!',
+  legendRem:
+    'Every division with remainder you know better reveals a bit more of this picture. And if a square needs reviewing, it blurs again: the picture always shows where you are right now. Keep going, and it will be complete!',
 };
 
 export const progressScreenStrings = { fr: progressScreenFr, en: progressScreenEn };
@@ -284,16 +292,20 @@ export function useMascotStrings(): MascotStrings {
 interface FactCellStrings {
   multLabel: (row: number, col: number, product: number) => string;
   divLabel: (dividend: number, divisor: number) => string;
+  // Niveau 3 : une case = une zone de dividendes (specs §12.6).
+  remLabel: (lo: number, hi: number, divisor: number) => string;
 }
 
 const factCellFr: FactCellStrings = {
   multLabel: (row, col, product) => `${row} fois ${col} = ${product}`,
   divLabel: (dividend, divisor) => `${dividend} divisé par ${divisor}`,
+  remLabel: (lo, hi, divisor) => `${lo} à ${hi} divisés par ${divisor}, avec reste`,
 };
 
 const factCellEn: FactCellStrings = {
   multLabel: (row, col, product) => `${row} times ${col} = ${product}`,
   divLabel: (dividend, divisor) => `${dividend} divided by ${divisor}`,
+  remLabel: (lo, hi, divisor) => `${lo} to ${hi} divided by ${divisor}, with remainder`,
 };
 
 export const factCellStrings = { fr: factCellFr, en: factCellEn };
diff --git a/src/i18n/recap.ts b/src/i18n/recap.ts
index fb2af6c0..f865c6c8 100644
--- a/src/i18n/recap.ts
+++ b/src/i18n/recap.ts
@@ -13,10 +13,18 @@ interface Strings {
   milestoneMultTitle: string;
   milestoneDivSubtitle: string;
   milestoneMultSubtitle: string;
+  // Niveau 3 : carte de déblocage (fin du niveau 2) et jalon ultime (les 64
+  // zones en boîte 5, badge Grand maître de la division).
+  milestoneRemUnlockTitle: string;
+  milestoneRemUnlockSubtitle: string;
+  milestoneRemTitle: string;
+  milestoneRemSubtitle: string;
   tableCompleteDivTitle: (tables: number[]) => string;
   tableCompleteMultTitle: (tables: number[]) => string;
+  tableCompleteRemTitle: (tables: number[]) => string;
   tableCompleteDivSubtitle: string;
   tableCompleteMultSubtitle: string;
+  tableCompleteRemSubtitle: string;
   freezeUsedTitle: string;
   freezeUsedSubtitle: (streak: number) => string;
   freezeEarnedTitle: string;
@@ -26,6 +34,7 @@ interface Strings {
   progressEyebrow: string;
   multiplications: string;
   divisions: string;
+  remainders: string;
   newBadgeEyebrow: string;
   seeImage: string;
   finish: string;
@@ -40,14 +49,23 @@ const fr: Strings = {
     "Tu as révélé toute l'image des divisions — les 64 divisions sont en boîte 5. Un énorme accomplissement. Bravo !",
   milestoneMultSubtitle:
     "Tu connais toutes tes tables ! Tu vas maintenant les réviser autrement : en divisions (comme 56 ÷ 7). Une nouvelle image mystère t'attend.",
+  milestoneRemUnlockTitle: 'Tu débloques la division avec reste !',
+  milestoneRemUnlockSubtitle:
+    "Tu connais toutes tes divisions ! Prochain défi : quand ça ne tombe pas juste (comme 45 ÷ 7 = 6, reste 3). Une nouvelle image mystère t'attend.",
+  milestoneRemTitle: 'Tu maîtrises la division avec reste !',
+  milestoneRemSubtitle:
+    "Tu as révélé toute l'image des divisions avec reste — les 64 cases sont en boîte 5. Le sommet de la division. Bravo !",
   tableCompleteDivTitle: (tables) =>
     `Tu as maîtrisé les divisions par ${joinList(tables, 'et')} !`,
   tableCompleteMultTitle: (tables) =>
     tables.length === 1
       ? `Tu as maîtrisé la table de ${tables[0]} !`
       : `Tu as maîtrisé les tables de ${joinList(tables, 'et')} !`,
+  tableCompleteRemTitle: (tables) =>
+    `Tu as maîtrisé les divisions avec reste par ${joinList(tables, 'et')} !`,
   tableCompleteDivSubtitle: 'Toutes ces divisions sont en boîte 5.',
   tableCompleteMultSubtitle: 'Toutes les multiplications sont en boîte 5.',
+  tableCompleteRemSubtitle: 'Toutes ces divisions avec reste sont en boîte 5.',
   freezeUsedTitle: 'Ton gel a sauvé ta série !',
   freezeUsedSubtitle: (streak) =>
     `Tu n'as pas joué hier, mais ta série de ${streak} ${streak > 1 ? 'jours' : 'jour'} continue.`,
@@ -58,6 +76,7 @@ const fr: Strings = {
   progressEyebrow: 'Tu connais',
   multiplications: 'multiplications',
   divisions: 'divisions',
+  remainders: 'divisions avec reste',
   newBadgeEyebrow: 'Nouveau badge',
   seeImage: 'Voir mon image →',
   finish: 'À demain !',
@@ -72,14 +91,23 @@ const en: Strings = {
     "You've revealed the whole division picture — all 64 divisions are in box 5. A huge achievement. Well done!",
   milestoneMultSubtitle:
     "You know all your times tables! Now you'll review them a new way: as division (like 56 ÷ 7). A new mystery picture is waiting for you.",
+  milestoneRemUnlockTitle: "You've unlocked division with remainders!",
+  milestoneRemUnlockSubtitle:
+    "You know all your divisions! Next challenge: when it doesn't come out even (like 45 ÷ 7 = 6 r 3). A new mystery picture is waiting for you.",
+  milestoneRemTitle: "You've mastered division with remainders!",
+  milestoneRemSubtitle:
+    "You've revealed the whole remainders picture — all 64 squares are in box 5. The summit of division. Well done!",
   tableCompleteDivTitle: (tables) =>
     `You've mastered dividing by ${joinList(tables, 'and')}!`,
   tableCompleteMultTitle: (tables) =>
     tables.length === 1
       ? `You've mastered the ${tables[0]} times table!`
       : `You've mastered the ${joinList(tables, 'and')} times tables!`,
+  tableCompleteRemTitle: (tables) =>
+    `You've mastered dividing by ${joinList(tables, 'and')} with remainders!`,
   tableCompleteDivSubtitle: 'All of these divisions are in box 5.',
   tableCompleteMultSubtitle: 'Every multiplication is in box 5.',
+  tableCompleteRemSubtitle: 'All of these divisions with remainder are in box 5.',
   freezeUsedTitle: 'Your freeze saved your streak!',
   freezeUsedSubtitle: (streak) =>
     `You didn't play yesterday, but your ${streak}-day streak keeps going.`,
@@ -90,6 +118,7 @@ const en: Strings = {
   progressEyebrow: 'You know',
   multiplications: 'multiplications',
   divisions: 'divisions',
+  remainders: 'divisions with remainder',
   newBadgeEyebrow: 'New badge',
   seeImage: 'See my picture →',
   finish: 'See you tomorrow!',
diff --git a/src/i18n/session.ts b/src/i18n/session.ts
index d35f6647..27e824e8 100644
--- a/src/i18n/session.ts
+++ b/src/i18n/session.ts
@@ -19,6 +19,13 @@ interface SessionStrings {
   littleTrick: string;
   // « On partage <dividend> en <divisor> lots égaux — combien dans chaque ? »
   shareInto: (dividend: number, divisor: number) => string;
+  // Niveau 3 : « Dans <dividend>, combien de fois <divisor> ? … »
+  remIntro: (dividend: number, divisor: number) => string;
+  // Libellés des deux étapes de saisie (specs §12.5).
+  howManyTimes: string;
+  whatRemains: string;
+  // « reste » dans la formule affichée (« = 6, reste ? »).
+  remainderWord: string;
   useMic: string;
 }
 
@@ -32,6 +39,11 @@ const sessionFr: SessionStrings = {
   littleTrick: "Une petite astuce pour s'en souvenir\u00a0!",
   shareInto: (dividend, divisor) =>
     `On partage ${dividend} en ${divisor} lots égaux — combien dans chaque\u00a0?`,
+  remIntro: (dividend, divisor) =>
+    `Dans ${dividend}, combien de fois ${divisor} ? Les points qui ne remplissent pas une rangée, c'est le reste.`,
+  howManyTimes: 'Combien de fois ?',
+  whatRemains: 'Il reste combien ?',
+  remainderWord: 'reste',
   useMic: 'Utiliser le micro',
 };
 
@@ -45,6 +57,11 @@ const sessionEn: SessionStrings = {
   littleTrick: 'A little trick to remember it!',
   shareInto: (dividend, divisor) =>
     `We share ${dividend} into ${divisor} equal groups — how many in each?`,
+  remIntro: (dividend, divisor) =>
+    `How many times does ${divisor} fit into ${dividend}? The dots that don't fill a row are the remainder.`,
+  howManyTimes: 'How many times?',
+  whatRemains: "What's left over?",
+  remainderWord: 'r',
   useMic: 'Use the mic',
 };
 
@@ -64,6 +81,10 @@ interface FeedbackOverlayStrings {
   gotIt: string;
   // Eyebrow de la grille (multiplication) : « <a> rangées de <b> ».
   rowsOf: (a: number, b: number) => string;
+  // Niveau 3 : « 6, reste 3 » — réponse composée affichée (bonne ou saisie).
+  remAnswer: (quotient: number, remainder: number) => string;
+  // Eyebrow de la grille (niveau 3) : « 7 × 6 + 3 » (ou « 7 × 6 » si reste 0).
+  remEyebrow: (divisor: number, quotient: number, remainder: number) => string;
 }
 
 const feedbackFr: FeedbackOverlayStrings = {
@@ -80,6 +101,10 @@ const feedbackFr: FeedbackOverlayStrings = {
   youAnswered: 'Tu as répondu',
   gotIt: "J'ai compris",
   rowsOf: (a, b) => `${a} rangée${a > 1 ? 's' : ''} de ${b}`,
+  remAnswer: (quotient, remainder) =>
+    remainder === 0 ? `${quotient}, reste 0` : `${quotient}, reste ${remainder}`,
+  remEyebrow: (divisor, quotient, remainder) =>
+    remainder === 0 ? `${divisor} × ${quotient}` : `${divisor} × ${quotient} + ${remainder}`,
 };
 
 const feedbackEn: FeedbackOverlayStrings = {
@@ -96,6 +121,9 @@ const feedbackEn: FeedbackOverlayStrings = {
   youAnswered: 'You answered',
   gotIt: 'Got it',
   rowsOf: (a, b) => `${a} row${a > 1 ? 's' : ''} of ${b}`,
+  remAnswer: (quotient, remainder) => `${quotient} r ${remainder}`,
+  remEyebrow: (divisor, quotient, remainder) =>
+    remainder === 0 ? `${divisor} × ${quotient}` : `${divisor} × ${quotient} + ${remainder}`,
 };
 
 export const feedbackOverlayStrings = { fr: feedbackFr, en: feedbackEn };
diff --git a/src/i18n/strategies.ts b/src/i18n/strategies.ts
index af20feb7..960c9356 100644
--- a/src/i18n/strategies.ts
+++ b/src/i18n/strategies.ts
@@ -146,6 +146,44 @@ export function getDivisionStrategyText(): DivisionStrategyText {
   return pickStrings(divisionStrategyText);
 }
 
+// === Niveau 3 : « cherche le multiple juste en dessous » (specs §12.4) ===
+interface RemainderStrategyText {
+  title: string;
+  intro: (dividend: number, divisor: number) => string;
+  // Égalité euclidienne en conclusion — la forme que l'enfant retrouvera en
+  // CM1 : « 45 = 7 × 6 + 3. Donc 45 ÷ 7 = 6, reste 3. »
+  conclusion: (dividend: number, divisor: number, quotient: number, remainder: number) => string;
+}
+
+const remainderFr: RemainderStrategyText = {
+  title: 'Cherche le multiple juste en dessous',
+  intro: (dividend, divisor) =>
+    `${dividend} ÷ ${divisor}, c'est : ${divisor} fois combien font presque ${dividend}, sans dépasser ?`,
+  conclusion: (dividend, divisor, quotient, remainder) =>
+    remainder === 0
+      ? `${dividend} = ${divisor} × ${quotient} tout juste. Donc ${dividend} ÷ ${divisor} = ${quotient}, ça tombe juste !`
+      : `${dividend} = ${divisor} × ${quotient} + ${remainder}. Donc ${dividend} ÷ ${divisor} = ${quotient}, reste ${remainder}.`,
+};
+
+const remainderEn: RemainderStrategyText = {
+  title: 'Find the multiple just below',
+  intro: (dividend, divisor) =>
+    `${dividend} ÷ ${divisor} means: ${divisor} times what makes almost ${dividend}, without going over?`,
+  conclusion: (dividend, divisor, quotient, remainder) =>
+    remainder === 0
+      ? `${dividend} = ${divisor} × ${quotient} exactly. So ${dividend} ÷ ${divisor} = ${quotient}, no remainder!`
+      : `${dividend} = ${divisor} × ${quotient} + ${remainder}. So ${dividend} ÷ ${divisor} = ${quotient}, remainder ${remainder}.`,
+};
+
+const remainderStrategyText: Record<Lang, RemainderStrategyText> = {
+  fr: remainderFr,
+  en: remainderEn,
+};
+
+export function getRemainderStrategyText(): RemainderStrategyText {
+  return pickStrings(remainderStrategyText);
+}
+
 // === Strings d'UI des cartes d'astuce (StrategyHint / DivisionStrategyHint) ===
 interface StrategyHintStrings {
   eyebrowMult: (label: string) => string;
diff --git a/src/lib/badges.ts b/src/lib/badges.ts
index 4e82d916..d6c2d03f 100644
--- a/src/lib/badges.ts
+++ b/src/lib/badges.ts
@@ -1,4 +1,4 @@
-import type { UserProfile, Badge, MultiFact, DivisionFact } from '../types';
+import type { UserProfile, Badge, MultiFact, DivisionFact, RemainderFact } from '../types';
 import { BADGE_IDS } from '../types';
 import { todayISO, daysBetween } from './utils';
 import { getBadgeI18n } from '../i18n/badges';
@@ -36,6 +36,47 @@ export function isDivisionUnlocked(profile: UserProfile): boolean {
   return hasAllTableBadges(profile);
 }
 
+// Zones de division avec reste d'une « table » (regroupées par diviseur).
+export function factsForRemainderTable(facts: RemainderFact[], divisor: number): RemainderFact[] {
+  return facts.filter((f) => f.divisor === divisor);
+}
+
+const NUM_REM_TABLE_BADGES = 8;
+
+/**
+ * Vrai quand les 8 badges « Divisions par N » (toutes les divisions exactes en
+ * boîte 4+) ont été obtenus. Compté sur les badges (permanents) — même logique
+ * que hasAllTableBadges pour le déblocage du niveau 2.
+ */
+export function hasAllDivisionTableBadges(profile: UserProfile): boolean {
+  const badges = profile.badges.filter((b) => b.id.startsWith(BADGE_IDS.DIV_TABLE_PREFIX));
+  return badges.length === NUM_DIV_TABLE_BADGES;
+}
+
+/**
+ * Vrai quand le niveau 3 (division avec reste) est débloqué : les 8 badges
+ * « Divisions par N » — même logique, translatée d'un niveau, que le déblocage
+ * de la division par les 8 badges « Table de N » (specs §12.3). On n'exige pas
+ * « Maître de la division » (boîte 5 partout) : ce serait un long palier de
+ * pur grind sans contenu nouveau ; le passage boîte 4→5 des divisions continue
+ * via l'entretien intégré aux séances du niveau 3, et « Maître de la
+ * division » devient un trophée décroché en route.
+ */
+export function isRemainderUnlocked(profile: UserProfile): boolean {
+  return hasAllDivisionTableBadges(profile);
+}
+
+/**
+ * Niveau d'apprentissage ACTIF du profil — l'activité de la séance du jour et
+ * l'onglet ouvert par défaut sur les écrans à sélecteur. Source unique de la
+ * règle de précédence entre niveaux (specs §11.3, §12.3).
+ */
+export function activeLevel(profile: UserProfile): 'mult' | 'div' | 'rem' {
+  if (isRemainderUnlocked(profile)) return 'rem';
+  if (isDivisionUnlocked(profile)) return 'div';
+  return 'mult';
+}
+
 function makeBadge(def: BadgeDefinition, now: string): Badge {
   // On ne persiste que ce qui est lu : `id` (clé de progression), `earnedDate`
   // et `icon` (affiché tel quel au recap). Le libellé est toujours re-résolu par
@@ -77,6 +118,19 @@ export function getCompletedDivisionTables(facts: DivisionFact[]): Set<number> {
   return completed;
 }
 
+// Pendant niveau 3 : les zones d'un même diviseur, complètes quand toutes en
+// boîte 5. Alimente la célébration du récap en mode 'rem'.
+export function getCompletedRemainderTables(facts: RemainderFact[]): Set<number> {
+  const completed = new Set<number>();
+  for (let n = 2; n <= 9; n++) {
+    const tf = factsForRemainderTable(facts, n);
+    if (tf.length > 0 && tf.every((f) => f.box >= 5)) {
+      completed.add(n);
+    }
+  }
+  return completed;
+}
+
 /**
  * Vrai quand les 8 badges « Table de N » (n=2..9) ont été obtenus.
  *
@@ -273,6 +327,61 @@ function buildDivisionBadgeDefinitions(): BadgeDefinition[] {
   ];
 }
 
+// Badges du niveau 3 — division avec reste. Même logique que les badges de
+// division : tenus à part pour rester MASQUÉS tant que le niveau n'est pas
+// débloqué, mais inclus dans la map pour pouvoir être attribués par checkBadges.
+function buildRemainderBadgeDefinitions(): BadgeDefinition[] {
+  const i = getBadgeI18n();
+  const u = i.units;
+  return [
+    {
+      id: BADGE_IDS.REM_PREMIERE_MAITRISE,
+      ...i.remPremiereMaitrise,
+      icon: '🥉',
+      color: 'var(--honey)',
+      progressFor: (p) => {
+        const ready = (p.remainderFacts ?? []).filter((f) => f.box === 5).length;
+        return { current: Math.min(ready, 1), target: 1, unitLabel: u.box5 };
+      },
+    },
+    ...Array.from({ length: NUM_REM_TABLE_BADGES }, (_, idx) => {
+      const n = idx + 2;
+      return {
+        id: `${BADGE_IDS.REM_TABLE_PREFIX}${n}`,
+        ...i.remTable(n),
+        // Glyphe texte « ÷Nʳ » (le ʳ de « reste » en exposant) : distinct des
+        // badges « ÷N » de la division exacte tout en restant dans la même
+        // famille visuelle que les médaillons ×N / ÷N (cf. le choix anti-emoji
+        // documenté sur les badges de division).
+        icon: `÷${n}ʳ`,
+        color: 'var(--coral)',
+        progressFor: (p: UserProfile) => {
+          const tableFacts = factsForRemainderTable(p.remainderFacts ?? [], n);
+          return {
+            current: tableFacts.filter((f) => f.box >= 4).length,
+            target: tableFacts.length,
+            unitLabel: u.box4plus,
+          };
+        },
+      };
+    }),
+    {
+      id: BADGE_IDS.REM_GENIE,
+      ...i.remGenie,
+      icon: '👑',
+      color: 'var(--honey)',
+      progressFor: (p) => {
+        const facts = p.remainderFacts ?? [];
+        return {
+          current: facts.filter((f) => f.box === 5).length,
+          target: facts.length,
+          unitLabel: u.box5,
+        };
+      },
+    },
+  ];
+}
+
 // Cache mémoïsé par langue : les définitions ne dépendent que de la langue
 // (les chaînes), pas du profil (passé en argument à progressFor). On les
 // reconstruit donc seulement au changement de langue, pas à chaque appel —
@@ -281,6 +390,7 @@ function buildDivisionBadgeDefinitions(): BadgeDefinition[] {
 let cacheLang: Lang | null = null;
 let cachedAll: BadgeDefinition[] = [];
 let cachedDivision: BadgeDefinition[] = [];
+let cachedRemainder: BadgeDefinition[] = [];
 let cachedMap: Map<string, BadgeDefinition> = new Map();
 
 function ensureCache(): void {
@@ -288,7 +398,10 @@ function ensureCache(): void {
   if (cacheLang === lang) return;
   cachedAll = buildAllBadgeDefinitions();
   cachedDivision = buildDivisionBadgeDefinitions();
-  cachedMap = new Map([...cachedAll, ...cachedDivision].map((d) => [d.id, d]));
+  cachedRemainder = buildRemainderBadgeDefinitions();
+  cachedMap = new Map(
+    [...cachedAll, ...cachedDivision, ...cachedRemainder].map((d) => [d.id, d]),
+  );
   cacheLang = lang;
 }
 
@@ -302,6 +415,11 @@ export function getDivisionBadgeDefinitions(): BadgeDefinition[] {
   return cachedDivision;
 }
 
+export function getRemainderBadgeDefinitions(): BadgeDefinition[] {
+  ensureCache();
+  return cachedRemainder;
+}
+
 function badgeMap(): Map<string, BadgeDefinition> {
   ensureCache();
   return cachedMap;
@@ -314,9 +432,10 @@ function badgeMap(): Map<string, BadgeDefinition> {
  * logique que la révélation différée de la règle ×11, specs §2.3).
  */
 export function visibleBadgeDefinitions(profile: UserProfile): BadgeDefinition[] {
-  return isDivisionUnlocked(profile)
-    ? [...getAllBadgeDefinitions(), ...getDivisionBadgeDefinitions()]
-    : getAllBadgeDefinitions();
+  const defs = [...getAllBadgeDefinitions()];
+  if (isDivisionUnlocked(profile)) defs.push(...getDivisionBadgeDefinitions());
+  if (isRemainderUnlocked(profile)) defs.push(...getRemainderBadgeDefinitions());
+  return defs;
 }
 
 /**
@@ -384,6 +503,19 @@ export function checkBadges(
     }
   }
 
+  // Niveau 3 — badges division avec reste. Même garde que le niveau 2.
+  const remFacts = profile.remainderFacts;
+  if (remFacts && remFacts.length > 0 && isRemainderUnlocked(profile)) {
+    if (remFacts.some((f) => f.box === 5)) earn(BADGE_IDS.REM_PREMIERE_MAITRISE);
+    if (remFacts.every((f) => f.box === 5)) earn(BADGE_IDS.REM_GENIE);
+    for (let n = 2; n <= 9; n++) {
+      const tableFacts = factsForRemainderTable(remFacts, n);
+      if (tableFacts.length > 0 && tableFacts.every((f) => f.box >= 4)) {
+        earn(`${BADGE_IDS.REM_TABLE_PREFIX}${n}`);
+      }
+    }
+  }
+
   return newBadges;
 }
 
diff --git a/src/lib/dailyComposer.ts b/src/lib/dailyComposer.ts
index a25120a7..ba76bb12 100644
--- a/src/lib/dailyComposer.ts
+++ b/src/lib/dailyComposer.ts
@@ -1,9 +1,13 @@
 import type { UserProfile, SessionItem } from '../types';
+import { remainderDividend } from '../types';
 import { isDue, pickBonusReviewFacts } from './leitner';
 import { composeDivisionSession } from './divisionComposer';
+import { composeRemainderSession } from './remainderComposer';
 import { randomDisplayOrder } from './sessionComposer';
 import { getFactKey } from './facts';
 import { getDivisionFactKey } from './divisionFacts';
+import { getRemainderFactKey, drawRemainder } from './remainderFacts';
+import { isRemainderUnlocked } from './badges';
 import { computeSimilarity } from './similarity';
 import { shuffle, interleaveGreedy } from './utils';
 
@@ -12,10 +16,12 @@ const TARGET_QUESTIONS = 15;
 // Plancher de longueur, identique à sessionComposer (mult-only) et
 // composeDivisionSession : sous ce seuil, on complète par des révisions bonus.
 const MIN_QUESTIONS = 12;
-// Plafond de faits de tables en entretien par séance : on ne noie pas la
-// division (le vrai apprentissage) sous la maintenance. Les faits dus au-delà
-// sont repris la séance suivante — sans danger en boîte 5 (specs §11.6).
-const MAX_MULT_MAINTENANCE = 6;
+// Plafond de faits des niveaux précédents en entretien par séance : on ne noie
+// pas le niveau actif (le vrai apprentissage) sous la maintenance. Les faits
+// dus au-delà sont repris la séance suivante — sans danger en boîte 5. Au
+// niveau 3, le régime de croisière (36 tables + 64 divisions revues tous les
+// 21 jours ≈ 5 dus/jour) tient sous ce plafond (specs §12.3).
+const MAX_MAINTENANCE = 6;
 
 function multItem(fact: UserProfile['facts'][number], isBonusReview = false): SessionItem {
   return {
@@ -28,19 +34,37 @@ function multItem(fact: UserProfile['facts'][number], isBonusReview = false): Se
   };
 }
 
-function divItem(fact: NonNullable<UserProfile['divisionFacts']>[number]): SessionItem {
-  return { kind: 'div', fact, isIntroduction: false, isRetry: false, isBonusReview: true };
+function divItem(
+  fact: NonNullable<UserProfile['divisionFacts']>[number],
+  isBonusReview = false,
+): SessionItem {
+  return { kind: 'div', fact, isIntroduction: false, isRetry: false, isBonusReview };
+}
+
+function remBonusItem(fact: NonNullable<UserProfile['remainderFacts']>[number]): SessionItem {
+  return {
+    kind: 'rem',
+    fact,
+    remainder: drawRemainder(fact.divisor),
+    isIntroduction: false,
+    isRetry: false,
+    isBonusReview: true,
+  };
 }
 
 function itemTable(item: SessionItem): number {
-  return item.kind === 'div'
-    ? item.fact.divisor
-    : Math.min(item.displayA, item.displayB);
+  return item.kind === 'mult'
+    ? Math.min(item.displayA, item.displayB)
+    : item.fact.divisor;
 }
 
-// Deux éléments à ne pas rendre adjacents. Entre types différents (× vs ÷), pas
-// de conflit. Même type : on réutilise les règles de chaque piste (dividende
-// partagé en division §11.6, table partagée / forte similarité en multiplication).
+// Deux éléments à ne pas rendre adjacents. Même type : règles de chaque piste
+// (dividende/diviseur partagés en ÷ et reste, table partagée / forte similarité
+// en ×). Entre types : un élément du niveau 3 est en conflit avec la division
+// de même diviseur ou de même dividende (45÷7 juste à côté de 42÷7 ou de 45÷9
+// serait confusible) et avec la multiplication ancre de sa zone (7×6 juste
+// avant la zone (7,6) soufflerait l'encadrement). × vs ÷ exacts : pas de
+// conflit (inchangé, specs §11.6).
 function itemConflict(a: SessionItem, b: SessionItem): boolean {
   if (a.kind === 'div' && b.kind === 'div') {
     return a.fact.dividend === b.fact.dividend || a.fact.divisor === b.fact.divisor;
@@ -48,63 +72,141 @@ function itemConflict(a: SessionItem, b: SessionItem): boolean {
   if (a.kind === 'mult' && b.kind === 'mult') {
     return itemTable(a) === itemTable(b) || computeSimilarity(a.fact, b.fact) === 'strong';
   }
+  if (a.kind === 'rem' && b.kind === 'rem') {
+    return (
+      a.fact.divisor === b.fact.divisor || remainderDividend(a) === remainderDividend(b)
+    );
+  }
+  if (a.kind === 'rem') return remCrossConflict(a, b);
+  if (b.kind === 'rem') return remCrossConflict(b, a);
+  return false;
+}
+
+// Conflit entre un item niveau 3 et un item d'entretien (× ou ÷ exact).
+function remCrossConflict(
+  rem: Extract<SessionItem, { kind: 'rem' }>,
+  other: SessionItem,
+): boolean {
+  if (other.kind === 'div') {
+    return (
+      other.fact.divisor === rem.fact.divisor ||
+      other.fact.dividend === remainderDividend(rem)
+    );
+  }
+  if (other.kind === 'mult') {
+    // Conflit si c'est le fait ancre de la zone (7×6 juste avant la zone (7,6)) —
+    // getFactKey normalise la paire (min×max) des deux côtés.
+    return getFactKey(other.fact.a, other.fact.b) === getFactKey(rem.fact.divisor, rem.fact.quotient);
+  }
   return false;
 }
 
 /**
- * Compose la séance quotidienne du niveau 2 (specs §11.6).
+ * Compose la séance quotidienne post-déblocage (specs §11.6, §12.3).
  *
- * Principe : la division est l'activité du jour ; on y intègre les faits de
- * tables RÉELLEMENT dus en révision (entretien, §5.1) plutôt que de leur
- * consacrer une séance entière — la division n'est jamais préemptée, et la
- * maintenance n'est jamais en retard. Les × et ÷ sont entrelacés.
+ * Principe : le niveau actif est l'activité du jour — division exacte
+ * (niveau 2), puis division avec reste dès que ses 8 badges « Divisions
+ * par N » sont acquis (niveau 3). On y intègre les faits des niveaux
+ * précédents RÉELLEMENT dus en révision (entretien) plutôt que de leur
+ * consacrer une séance entière — le niveau actif n'est jamais préempté, et
+ * la maintenance n'est jamais en retard. Tous types entrelacés.
  *
- * Les intros de division passent en tête (comme en multiplication) ; le reste
- * (révisions division + entretien tables + éventuel padding bonus) est entrelacé.
+ * Les intros du niveau actif passent en tête (comme en multiplication) ; le
+ * reste (révisions + entretien + éventuel padding bonus) est entrelacé.
  *
- * Plancher de longueur : les premiers jours post-déblocage, peu de divisions
- * sont introduites (rythme 2/séance) et peu de tables sont dues — sans filet, la
- * séance tomberait à 2-5 questions. On comble donc sous MIN_QUESTIONS par des
- * révisions bonus (sans toucher au Leitner, cf. pickBonusReviewFacts) : divisions
- * introduites d'abord, puis tables (réserve inépuisable, toutes introduites au
- * déblocage). Le filet se résorbe de lui-même quand la division grossit.
+ * Plancher de longueur : les premiers jours post-déblocage, peu de faits du
+ * niveau actif sont introduits (rythme 2/séance) et peu d'entretien est dû —
+ * sans filet, la séance tomberait à 2-5 questions. On comble donc sous
+ * MIN_QUESTIONS par des révisions bonus (sans toucher au Leitner, cf.
+ * pickBonusReviewFacts) : niveau actif d'abord, puis niveaux précédents
+ * (réserve inépuisable). Le filet se résorbe quand le niveau grossit.
  */
 export function composeDailySession(profile: UserProfile, now: string): SessionItem[] {
   const today = now.slice(0, 10);
+  return isRemainderUnlocked(profile)
+    ? composeRemainderDaily(profile, today)
+    : composeDivisionDaily(profile, today);
+}
 
+// Niveau 2 actif : division + entretien des tables (specs §11.6).
+function composeDivisionDaily(profile: UserProfile, today: string): SessionItem[] {
   const divItems: SessionItem[] = composeDivisionSession(profile, today).map((q) => ({
     kind: 'div',
     ...q,
   }));
-  const divIntros = divItems.filter((i) => i.isIntroduction);
-  const divReviews = divItems.filter((i) => !i.isIntroduction);
+  const intros = divItems.filter((i) => i.isIntroduction);
+  const reviews = divItems.filter((i) => !i.isIntroduction);
 
   // Faits de tables dus aujourd'hui → révisions d'entretien (jamais des intros :
   // post-déblocage les tables sont toutes introduites et maîtrisées).
   const maintenance: SessionItem[] = shuffle(
     profile.facts.filter((f) => f.introduced && isDue(f, today)),
   )
-    .slice(0, MAX_MULT_MAINTENANCE)
+    .slice(0, MAX_MAINTENANCE)
     .map((fact) => multItem(fact));
 
-  // L'entretien remplace des révisions division pour viser ~TARGET sans gonfler
-  // la séance. Intros division gardées en priorité.
-  const divReviewBudget = Math.max(0, TARGET_QUESTIONS - divIntros.length - maintenance.length);
-  const core: SessionItem[] = [...divReviews.slice(0, divReviewBudget), ...maintenance];
+  return assemble(profile, intros, reviews, maintenance);
+}
+
+// Niveau 3 actif : division avec reste + entretien des tables ET des divisions
+// exactes, plafonnés ensemble (specs §12.3).
+function composeRemainderDaily(profile: UserProfile, today: string): SessionItem[] {
+  const remItems: SessionItem[] = composeRemainderSession(profile, today).map((q) => ({
+    kind: 'rem',
+    ...q,
+  }));
+  const intros = remItems.filter((i) => i.isIntroduction);
+  const reviews = remItems.filter((i) => !i.isIntroduction);
+
+  const dueMult = profile.facts
+    .filter((f) => f.introduced && isDue(f, today))
+    .map((fact) => multItem(fact));
+  const dueDiv = (profile.divisionFacts ?? [])
+    .filter((f) => f.introduced && isDue(f, today))
+    .map((fact) => divItem(fact));
+  const maintenance = shuffle([...dueMult, ...dueDiv]).slice(0, MAX_MAINTENANCE);
 
-  // Padding bonus si la séance reste sous le plancher.
-  const deficit = MIN_QUESTIONS - (divIntros.length + core.length);
+  return assemble(profile, intros, reviews, maintenance);
+}
+
+// Tronc commun : l'entretien remplace des révisions du niveau actif pour viser
+// ~TARGET sans gonfler la séance (intros gardées en priorité), puis padding
+// bonus sous le plancher, puis entrelacement.
+function assemble(
+  profile: UserProfile,
+  intros: SessionItem[],
+  reviews: SessionItem[],
+  maintenance: SessionItem[],
+): SessionItem[] {
+  const reviewBudget = Math.max(0, TARGET_QUESTIONS - intros.length - maintenance.length);
+  const core: SessionItem[] = [...reviews.slice(0, reviewBudget), ...maintenance];
+
+  const deficit = MIN_QUESTIONS - (intros.length + core.length);
   if (deficit > 0) {
-    core.push(...bonusPadding(profile, [...divIntros, ...core], deficit));
+    core.push(...bonusPadding(profile, [...intros, ...core], deficit));
   }
 
-  return [...divIntros, ...interleaveGreedy(core, itemConflict)];
+  return [...intros, ...interleaveGreedy(core, itemConflict)];
 }
 
-// Révisions bonus pour combler une séance courte : divisions introduites en
-// priorité (cohérent avec le niveau en cours), puis tables. Exclut les faits
-// déjà présents dans la séance.
+// Révisions bonus pour combler une séance courte : niveau le plus récent
+// d'abord (cohérent avec le niveau en cours), puis les précédents. Exclut les
+// faits déjà présents dans la séance.
 function bonusPadding(profile: UserProfile, used: SessionItem[], count: number): SessionItem[] {
+  const usedRemKeys = new Set(
+    used
+      .filter((i) => i.kind === 'rem')
+      .map((i) => getRemainderFactKey(i.fact.divisor, i.fact.quotient)),
+  );
+  const remBonus = isRemainderUnlocked(profile)
+    ? pickBonusReviewFacts(
+        profile.remainderFacts ?? [],
+        (f) => usedRemKeys.has(getRemainderFactKey(f.divisor, f.quotient)),
+        count,
+      ).map(remBonusItem)
+    : [];
+  if (remBonus.length >= count) return remBonus;
+
   const usedDivKeys = new Set(
     used
       .filter((i) => i.kind === 'div')
@@ -113,10 +215,10 @@ function bonusPadding(profile: UserProfile, used: SessionItem[], count: number):
   const divBonus = pickBonusReviewFacts(
     profile.divisionFacts ?? [],
     (f) => usedDivKeys.has(getDivisionFactKey(f.dividend, f.divisor)),
-    count,
-  ).map(divItem);
+    count - remBonus.length,
+  ).map((fact) => divItem(fact, true));
 
-  if (divBonus.length >= count) return divBonus;
+  if (remBonus.length + divBonus.length >= count) return [...remBonus, ...divBonus];
 
   const usedMultKeys = new Set(
     used.filter((i) => i.kind === 'mult').map((i) => getFactKey(i.fact.a, i.fact.b)),
@@ -124,8 +226,8 @@ function bonusPadding(profile: UserProfile, used: SessionItem[], count: number):
   const multBonus = pickBonusReviewFacts(
     profile.facts,
     (f) => usedMultKeys.has(getFactKey(f.a, f.b)),
-    count - divBonus.length,
+    count - remBonus.length - divBonus.length,
   ).map((fact) => multItem(fact, true));
 
-  return [...divBonus, ...multBonus];
+  return [...remBonus, ...divBonus, ...multBonus];
 }
diff --git a/src/lib/hardestFacts.ts b/src/lib/hardestFacts.ts
index 1bb85a82..ca08e80a 100644
--- a/src/lib/hardestFacts.ts
+++ b/src/lib/hardestFacts.ts
@@ -1,12 +1,15 @@
 import type { UserProfile, BoxLevel, Attempt, SessionResult } from '../types';
 import { getFactKey } from './facts';
 import { getDivisionFactKey } from './divisionFacts';
+import { getRemainderFactKey } from './remainderFacts';
 
-// Fait « difficile » unifié × / ÷, pour l'espace parent. Le discriminant `kind`
-// porte les champs propres à l'opération (le diviseur/quotient en division).
+// Fait « difficile » unifié × / ÷ / reste, pour l'espace parent. Le discriminant
+// `kind` porte les champs propres à l'opération. En 'rem', la « difficulté »
+// porte sur la zone (diviseur, quotient), le reste variant à chaque question.
 export type HardFact =
   | { kind: 'mult'; key: string; box: BoxLevel; errorCount: number; a: number; b: number; product: number }
-  | { kind: 'div'; key: string; box: BoxLevel; errorCount: number; dividend: number; divisor: number; quotient: number };
+  | { kind: 'div'; key: string; box: BoxLevel; errorCount: number; dividend: number; divisor: number; quotient: number }
+  | { kind: 'rem'; key: string; box: BoxLevel; errorCount: number; divisor: number; quotient: number };
 
 // Erreurs par fait (clé préfixée `mult:`/`div:`) depuis les logs par-question
 // des séances. C'est la MÊME source que le taux de bonnes réponses de l'espace
@@ -20,11 +23,13 @@ function countErrorsFromLogs(sessions: SessionResult[]): Map<string, number> {
   for (const s of sessions) {
     for (const q of s.questions ?? []) {
       if (q.correct) continue;
-      // Log 'div' : a = diviseur, b = quotient → dividende = a × b.
+      // Logs 'div'/'rem' : a = diviseur, b = quotient (dividende div = a × b).
       const key =
-        q.kind === 'div'
-          ? `div:${getDivisionFactKey(q.a * q.b, q.a)}`
-          : `mult:${getFactKey(q.a, q.b)}`;
+        q.kind === 'rem'
+          ? `rem:${getRemainderFactKey(q.a, q.b)}`
+          : q.kind === 'div'
+            ? `div:${getDivisionFactKey(q.a * q.b, q.a)}`
+            : `mult:${getFactKey(q.a, q.b)}`;
       errors.set(key, (errors.get(key) ?? 0) + 1);
     }
   }
@@ -94,7 +99,23 @@ export function getHardestFacts(
       };
     });
 
-  return [...mult, ...div]
+  const rem: HardFact[] = (profile.remainderFacts ?? [])
+    .filter((f) => f.introduced)
+    .map((f) => {
+      const key = getRemainderFactKey(f.divisor, f.quotient);
+      return {
+        kind: 'rem' as const,
+        key,
+        box: f.box,
+        errorCount: logErrors
+          ? (logErrors.get(`rem:${key}`) ?? 0)
+          : countErrorsFromHistory(f.history, cutoff),
+        divisor: f.divisor,
+        quotient: f.quotient,
+      };
+    });
+
+  return [...mult, ...div, ...rem]
     .filter((f) => f.errorCount > 0)
     .sort((a, b) => b.errorCount - a.errorCount || a.box - b.box)
     .slice(0, limit);
diff --git a/src/lib/remainderComposer.ts b/src/lib/remainderComposer.ts
new file mode 100644
index 00000000..8ff7869c
--- /dev/null
+++ b/src/lib/remainderComposer.ts
@@ -0,0 +1,140 @@
+import type { UserProfile, RemainderFact, RemainderSessionQuestion } from '../types';
+import { remainderDividend } from '../types';
+import {
+  isDue,
+  shouldIntroduceNew,
+  vanDeWalleStage,
+  prioritizeByBoxLevel,
+  pickBonusReviewFacts,
+} from './leitner';
+import { getDivisionFactKey } from './divisionFacts';
+import {
+  getRemainderFactKey,
+  parentDivisionKey,
+  introRemainder,
+  drawRemainder,
+} from './remainderFacts';
+import { interleaveGreedy } from './utils';
+
+// Mêmes bornes que les niveaux 1 et 2 (cf. sessionComposer.ts, specs §6).
+const MIN_QUESTIONS = 12;
+const MAX_QUESTIONS = 15;
+const MAX_NEW_FACTS = 2;
+
+/**
+ * Deux questions de division avec reste en conflit si elles ne doivent pas
+ * être adjacentes (specs §12.7) :
+ * - même diviseur → même « table », et couvre les zones à quotients adjacents
+ *   ((7,6) et (7,7) se touchent à un point près : 48÷7 contre 49÷7) ;
+ * - même dividende TIRÉ (45÷7 vs 45÷6) → deux lectures du même nombre,
+ *   hautement confusibles dans la même série.
+ */
+function questionConflict(a: RemainderSessionQuestion, b: RemainderSessionQuestion): boolean {
+  return (
+    a.fact.divisor === b.fact.divisor || remainderDividend(a) === remainderDividend(b)
+  );
+}
+
+function interleave(questions: RemainderSessionQuestion[]): RemainderSessionQuestion[] {
+  return interleaveGreedy(questions, questionConflict);
+}
+
+function makeQuestion(
+  fact: RemainderFact,
+  remainder: number,
+  flags: Partial<RemainderSessionQuestion> = {},
+): RemainderSessionQuestion {
+  return {
+    fact,
+    remainder,
+    isIntroduction: false,
+    isRetry: false,
+    isBonusReview: false,
+    ...flags,
+  };
+}
+
+// Révision : reste tiré au sort (0..d-1). Intro : reste canonique de la zone
+// (les MP3 d'intro sont pré-générés et doivent coller aux nombres affichés).
+function reviewQuestion(fact: RemainderFact, flags: Partial<RemainderSessionQuestion> = {}) {
+  return makeQuestion(fact, drawRemainder(fact.divisor), flags);
+}
+
+/**
+ * Compose une séance de division avec reste (12-15 questions), miroir de
+ * composeDivisionSession adapté au niveau 3 (specs §12) :
+ *
+ * - Introduction GATÉE sur la solidité du niveau 2 : une zone n'est introduite
+ *   que si sa division exacte parente est en boîte 4+ — même seuil que
+ *   l'ouverture du niveau (isRemainderUnlocked = badges « Divisions par N » =
+ *   boîte 4+), et même assouplissement que le niveau 2 vis-à-vis du « boîte 5 »
+ *   des specs : sinon un profil fraîchement débloqué (tout en boîte 4, rien en
+ *   boîte 5) n'aurait AUCUNE zone introductible.
+ * - Anti-interférence : jamais deux zones de même diviseur adjacentes, jamais
+ *   deux dividendes tirés identiques adjacents (§12.7).
+ * - Pas de variation d'ordre : la question est toujours « dividende ÷ diviseur ».
+ *
+ * Renvoie une liste vide si aucune zone n'est encore éligible.
+ */
+export function composeRemainderSession(
+  profile: UserProfile,
+  now: string,
+): RemainderSessionQuestion[] {
+  const remainderFacts = profile.remainderFacts ?? [];
+  const today = now.slice(0, 10);
+
+  // Divisions exactes prêtes (boîte 4+) → clés (dividend/divisor).
+  const parentReadyKeys = new Set(
+    (profile.divisionFacts ?? [])
+      .filter((f) => f.box >= 4)
+      .map((f) => getDivisionFactKey(f.dividend, f.divisor)),
+  );
+
+  // Intros : zones non introduites dont la division parente est prête. Même
+  // pacing que les niveaux précédents (specs §12.3, §3.4bis).
+  const newFacts: RemainderFact[] = [];
+  if (shouldIntroduceNew(remainderFacts)) {
+    const eligible = remainderFacts
+      .filter((f) => !f.introduced && parentReadyKeys.has(parentDivisionKey(f)))
+      .sort(
+        (a, b) =>
+          vanDeWalleStage(a.divisor, a.quotient) - vanDeWalleStage(b.divisor, b.quotient) ||
+          a.divisor * a.quotient - b.divisor * b.quotient,
+      );
+
+    for (const fact of eligible) {
+      if (newFacts.length >= MAX_NEW_FACTS) break;
+      // Ne pas introduire ensemble deux zones de même diviseur.
+      if (newFacts.some((nf) => nf.divisor === fact.divisor)) continue;
+      newFacts.push(fact);
+    }
+  }
+
+  const reviewBudget = MAX_QUESTIONS - newFacts.length;
+
+  const dueFacts = remainderFacts.filter((f) => f.introduced && isDue(f, today));
+  const prioritized = prioritizeByBoxLevel(dueFacts);
+  const selected = prioritized.slice(0, reviewBudget);
+
+  const reviewQuestions = selected.map((fact) => reviewQuestion(fact));
+  const introQuestions = newFacts.map((fact) =>
+    makeQuestion(fact, introRemainder(fact.divisor), { isIntroduction: true }),
+  );
+
+  const result = [...introQuestions, ...interleave(reviewQuestions)];
+
+  // Padding par révisions bonus (pas de modification Leitner — cf. §6.2).
+  if (result.length < MIN_QUESTIONS) {
+    const usedKeys = new Set(
+      result.map((q) => getRemainderFactKey(q.fact.divisor, q.fact.quotient)),
+    );
+    const bonus = pickBonusReviewFacts(
+      remainderFacts,
+      (f) => usedKeys.has(getRemainderFactKey(f.divisor, f.quotient)),
+      MIN_QUESTIONS - result.length,
+    ).map((fact) => reviewQuestion(fact, { isBonusReview: true }));
+    result.push(...interleave(bonus));
+  }
+
+  return result;
+}
diff --git a/src/lib/remainderFacts.ts b/src/lib/remainderFacts.ts
new file mode 100644
index 00000000..804f70d9
--- /dev/null
+++ b/src/lib/remainderFacts.ts
@@ -0,0 +1,83 @@
+import type { RemainderFact } from '../types';
+import { getDivisionFactKey } from './divisionFacts';
+
+/**
+ * Clé d'une zone de division avec reste.
+ *
+ * Comme la division (et contrairement à la multiplication), AUCUNE
+ * normalisation : (7,6) → "7r6" (dividendes 42-48 ÷ 7) et (6,7) → "6r7"
+ * (dividendes 42-47 ÷ 6) sont deux zones distinctes.
+ */
+export function getRemainderFactKey(divisor: number, quotient: number): string {
+  return `${divisor}r${quotient}`;
+}
+
+/**
+ * Génère les 64 zones de division avec reste.
+ *
+ * Pour chaque couple (divisor, quotient) ∈ [2..9]², la zone couvrant les
+ * dividendes de divisor×quotient inclus à divisor×(quotient+1) exclu
+ * (specs §12.2). Bijection parfaite avec la grille 8×8, comme la division.
+ * Chaque zone démarre en boîte 1, non introduite.
+ */
+export function createInitialRemainderFacts(): RemainderFact[] {
+  const facts: RemainderFact[] = [];
+
+  for (let divisor = 2; divisor <= 9; divisor++) {
+    for (let quotient = 2; quotient <= 9; quotient++) {
+      facts.push({
+        divisor,
+        quotient,
+        box: 1,
+        lastSeen: '',
+        nextDue: '',
+        history: [],
+        introduced: false,
+      });
+    }
+  }
+
+  return facts;
+}
+
+/**
+ * Clé du fait de division PARENT (la division exacte de la même case de la
+ * grille du niveau 2 : divisor×quotient ÷ divisor) dont la solidité
+ * conditionne l'introduction de cette zone (specs §12.3). Les coordonnées
+ * coïncident exactement d'une grille à l'autre.
+ */
+export function parentDivisionKey(fact: RemainderFact): string {
+  return getDivisionFactKey(fact.divisor * fact.quotient, fact.divisor);
+}
+
+/**
+ * Bornes [min, max] des dividendes couverts par une zone (specs §12.2) :
+ * de divisor×quotient inclus à divisor×(quotient+1) exclu.
+ */
+export function remainderZoneBounds(
+  fact: Pick<RemainderFact, 'divisor' | 'quotient'>,
+): [number, number] {
+  const lo = fact.divisor * fact.quotient;
+  return [lo, lo + fact.divisor - 1];
+}
+
+/**
+ * Reste canonique d'une zone, utilisé pour l'ÉCRAN D'INTRODUCTION (et sa
+ * question immédiate). Déterministe — les MP3 d'intro sont pré-générés par
+ * zone et doivent coller aux nombres affichés. Milieu de la plage 1..d-1 :
+ * un reste non nul montre le concept (« ce qui ne rentre pas »), et un
+ * exemple central évite les cas dégénérés (reste = 1 partout).
+ */
+export function introRemainder(divisor: number): number {
+  return Math.max(1, Math.floor(divisor / 2));
+}
+
+/**
+ * Tire le reste d'une présentation de révision : uniforme dans 0..divisor-1.
+ * Le cas 0 (probabilité 1/divisor) garde vivante la discrimination « est-ce
+ * que ça tombe juste ? » et entretient au passage la division exacte
+ * (specs §12.2).
+ */
+export function drawRemainder(divisor: number): number {
+  return Math.floor(Math.random() * divisor);
+}
diff --git a/src/lib/remainderStrategies.ts b/src/lib/remainderStrategies.ts
new file mode 100644
index 00000000..4d785eaf
--- /dev/null
+++ b/src/lib/remainderStrategies.ts
@@ -0,0 +1,45 @@
+import type { RemainderSessionQuestion } from '../types';
+import { remainderDividend } from '../types';
+import { getRemainderStrategyText } from '../i18n/strategies';
+
+export interface RemainderStrategy {
+  title: string;
+  // Question en toutes lettres : « 45 ÷ 7, c'est : 7 fois combien font
+  // presque 45, sans dépasser ? ».
+  intro: string;
+  // Pivot pédagogique : l'équation à ENCADREMENT « divisor × ☐ ≤ dividend »
+  // (specs §12.4) — prolongement direct de l'équation à facteur manquant du
+  // niveau 2. C'est l'enfant qui retrouve le plus grand facteur qui tient.
+  divisor: number;
+  dividend: number;
+  quotient: number;
+  remainder: number;
+  // Conclusion : l'égalité euclidienne, « 45 = 7 × 6 + 3. Donc … reste 3. »
+  conclusion: string;
+}
+
+/**
+ * Stratégie « cherche le multiple juste en dessous » (specs §12.4).
+ *
+ * Comme au niveau 2, une seule stratégie, toujours applicable, et enseignée
+ * explicitement : même avec une bonne fluence, les enfants n'exploitent pas
+ * spontanément la relation d'inversion (Robinson & Dubé 2009) — a fortiori
+ * l'encadrement. La question porte la zone ET le reste tiré : la stratégie se
+ * calcule donc sur la question, pas sur le fait seul.
+ */
+export function getRemainderStrategy(
+  question: Pick<RemainderSessionQuestion, 'fact' | 'remainder'>,
+): RemainderStrategy {
+  const { divisor, quotient } = question.fact;
+  const dividend = remainderDividend(question);
+  const text = getRemainderStrategyText();
+  return {
+    title: text.title,
+    intro: text.intro(dividend, divisor),
+    divisor,
+    dividend,
+    quotient,
+    remainder: question.remainder,
+    conclusion: text.conclusion(dividend, divisor, quotient, question.remainder),
+  };
+}
diff --git a/src/lib/sessionItemView.ts b/src/lib/sessionItemView.ts
new file mode 100644
index 00000000..542edad1
--- /dev/null
+++ b/src/lib/sessionItemView.ts
@@ -0,0 +1,23 @@
+import type { SessionItem } from '../types';
+import { remainderDividend } from '../types';
+
+// Dérivation d'affichage d'une question, partagée par SessionScreen (énoncé)
+// et FeedbackOverlay (rappel de la question dans le feedback) : un seul
+// endroit décide de « ce qui s'affiche à gauche/droite de l'opérateur » pour
+// chaque type de question. Les préoccupations propres à chaque écran (seuils,
+// clés TTS, réponse composée, grille) restent chez leurs consommateurs.
+export interface ItemDisplay {
+  left: number;
+  op: '×' | '÷';
+  right: number;
+}
+
+export function itemDisplay(item: SessionItem): ItemDisplay {
+  if (item.kind === 'rem') {
+    return { left: remainderDividend(item), op: '÷', right: item.fact.divisor };
+  }
+  if (item.kind === 'div') {
+    return { left: item.fact.dividend, op: '÷', right: item.fact.divisor };
+  }
+  return { left: item.displayA, op: '×', right: item.displayB };
+}
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 0b50f73b..a32a2003 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -3,6 +3,7 @@ import { MYSTERY_POOL } from '../types';
 import { checkBadges } from './badges';
 import { createInitialFacts } from './facts';
 import { createInitialDivisionFacts } from './divisionFacts';
+import { createInitialRemainderFacts } from './remainderFacts';
 import { inferIntroductionsFromKnowns } from './placement';
 import { STREAK_FREEZE_INTERVAL, STREAK_FREEZE_MAX } from './streak';
 import { pickRandom, todayISO } from './utils';
@@ -16,6 +17,13 @@ function pickDivisionTheme(multTheme: MysteryTheme): MysteryTheme {
   return pickRandom(others.length > 0 ? others : MYSTERY_POOL);
 }
 
+// Idem pour le niveau 3 : thème distinct des DEUX images précédentes quand le
+// pool le permet (specs §12.6).
+function pickRemainderTheme(multTheme: MysteryTheme, divTheme: MysteryTheme | undefined): MysteryTheme {
+  const others = MYSTERY_POOL.filter((t) => t !== multTheme && t !== divTheme);
+  return pickRandom(others.length > 0 ? others : MYSTERY_POOL);
+}
+
 // === Multi-profils ===
 // Plusieurs enfants peuvent partager le même appareil (specs §12). Chaque
 // profil vit sous sa propre clé (`multiplix-profile:<id>`), et un index
@@ -319,6 +327,7 @@ export function importProfile(json: string): UserProfile | null {
 export function createNewProfile(name: string): UserProfile {
   const now = todayISO();
   const mysteryTheme = pickRandom(MYSTERY_POOL);
+  const divisionMysteryTheme = pickDivisionTheme(mysteryTheme);
   return {
     name,
     startDate: now,
@@ -334,8 +343,10 @@ export function createNewProfile(name: string): UserProfile {
     hasSeenRule11: false,
     mysteryTheme,
     divisionFacts: createInitialDivisionFacts(),
-    divisionMysteryTheme: pickDivisionTheme(mysteryTheme),
+    divisionMysteryTheme,
     hasSeenDivisionIntro: false,
+    remainderFacts: createInitialRemainderFacts(),
+    remainderMysteryTheme: pickRemainderTheme(mysteryTheme, divisionMysteryTheme),
   };
 }
 
@@ -386,6 +397,17 @@ function migrateProfile(profile: UserProfile): UserProfile {
   if (typeof profile.hasSeenDivisionIntro !== 'boolean') {
     profile.hasSeenDivisionIntro = false;
   }
+  // Niveau 3 — division avec reste : même backfill que le niveau 2. Inoffensif
+  // tant que le niveau n'est pas débloqué (zones en boîte 1, non introduites).
+  if (!Array.isArray(profile.remainderFacts)) {
+    profile.remainderFacts = createInitialRemainderFacts();
+  }
+  if (profile.remainderMysteryTheme === undefined) {
+    profile.remainderMysteryTheme = pickRemainderTheme(
+      profile.mysteryTheme,
+      profile.divisionMysteryTheme,
+    );
+  }
   // Fix les profils créés avant l'ajout de l'inférence par dominance lors
   // du test de placement : si des faits restent non introduits alors qu'on
   // a une preuve de réussite sur des faits plus durs, on les introduit.
@@ -443,5 +465,19 @@ function isValidProfile(obj: unknown): boolean {
     }
   }
 
+  // remainderFacts : même statut optionnel, même exigence de forme.
+  if (p.remainderFacts !== undefined) {
+    if (!Array.isArray(p.remainderFacts)) return false;
+    for (const fact of p.remainderFacts) {
+      if (typeof fact !== 'object' || fact === null) return false;
+      const f = fact as Record<string, unknown>;
+      if (typeof f.divisor !== 'number') return false;
+      if (typeof f.quotient !== 'number') return false;
+      if (typeof f.box !== 'number' || f.box < 1 || f.box > 5) return false;
+      if (typeof f.introduced !== 'boolean') return false;
+      if (!Array.isArray(f.history)) return false;
+    }
+  }
+
   return true;
 }
diff --git a/src/screens/ParentDashboard.css b/src/screens/ParentDashboard.css
index 573d70d2..4d299a4d 100644
--- a/src/screens/ParentDashboard.css
+++ b/src/screens/ParentDashboard.css
@@ -461,3 +461,7 @@
   background: var(--honey);
   color: var(--honey-ink);
 }
+
+.parent-hard-fact-kind--rem {
+  background: var(--coral);
+}
diff --git a/src/screens/ParentDashboard.tsx b/src/screens/ParentDashboard.tsx
index 0b585ec0..2508a2c3 100644
--- a/src/screens/ParentDashboard.tsx
+++ b/src/screens/ParentDashboard.tsx
@@ -1,12 +1,13 @@
 import { useState, useMemo, useEffect, useRef } from 'react';
 import type { UserProfile } from '../types';
-import { isDivisionUnlocked } from '../lib/badges';
+import { isDivisionUnlocked, isRemainderUnlocked, activeLevel } from '../lib/badges';
 import { countMastered } from '../lib/leitner';
 import { getHardestFacts } from '../lib/hardestFacts';
 import { getActiveStreak } from '../lib/streak';
 import { todayISO } from '../lib/utils';
 import ProgressGrid from '../components/ProgressGrid';
 import DivisionProgressGrid from '../components/DivisionProgressGrid';
+import RemainderProgressGrid from '../components/RemainderProgressGrid';
 import BackChevron from '../components/BackChevron';
 import FeedbackModal from '../components/FeedbackModal';
 import EvolutionChart from '../components/EvolutionChart';
@@ -73,13 +74,14 @@ export default function ParentDashboard({
   const guideBase = `${import.meta.env.BASE_URL}guide/${lang === 'fr' ? '' : `${lang}/`}`;
 
   const divisionUnlocked = useMemo(() => isDivisionUnlocked(profile), [profile]);
+  const remainderUnlocked = useMemo(() => isRemainderUnlocked(profile), [profile]);
   const divisionFacts = useMemo(() => profile.divisionFacts ?? [], [profile.divisionFacts]);
-  // Onglet par défaut : la division dès qu'elle est débloquée — c'est l'activité
-  // d'apprentissage active (les tables sont déjà en boîte 5 par hypothèse, et
-  // surtout l'objet de l'attention du parent au quotidien).
-  const [gridView, setGridView] = useState<'mult' | 'div'>(
-    divisionUnlocked ? 'div' : 'mult',
-  );
+  const remainderFacts = useMemo(() => profile.remainderFacts ?? [], [profile.remainderFacts]);
+  // Onglet par défaut : le niveau actif — c'est l'activité d'apprentissage en
+  // cours (les niveaux passés sont déjà en boîte 5 par hypothèse, et surtout
+  // l'objet de l'attention du parent au quotidien).
+  const [gridView, setGridView] = useState<'mult' | 'div' | 'rem'>(() => activeLevel(profile));
+  const showRem = remainderUnlocked && gridView === 'rem';
   const showDiv = divisionUnlocked && gridView === 'div';
 
   const handleShare = async () => {
@@ -131,16 +133,52 @@ export default function ParentDashboard({
     };
   }, [transferLink]);
 
-  // Histogramme de l'opération sélectionnée par le parent (× / ÷).
+  // Descripteur de l'opération sélectionnée par le parent (× / ÷ / reste) —
+  // un seul point de vérité pour toutes les sections pilotées par le
+  // sélecteur (compteur de maîtrise, répartition par boîte, grille Leitner).
+  const activeView = showRem
+    ? {
+        facts: remainderFacts,
+        mastered: `${countMastered(remainderFacts)}/${remainderFacts.length}`,
+        masteredLabel: t.remaindersMastered,
+        opPlural: t.opRemaindersPlural,
+        opSingular: t.opRemainder,
+        grid: <RemainderProgressGrid facts={remainderFacts} />,
+      }
+    : showDiv
+      ? {
+          facts: divisionFacts,
+          mastered: `${countMastered(divisionFacts)}/${divisionFacts.length}`,
+          masteredLabel: t.divisionsMastered,
+          opPlural: t.opDivisionsPlural,
+          opSingular: t.opDivision,
+          grid: <DivisionProgressGrid facts={divisionFacts} />,
+        }
+      : {
+          facts: profile.facts,
+          mastered: `${countMastered(profile.facts)}/${profile.facts.length}`,
+          masteredLabel: t.multiplicationsMastered,
+          opPlural: t.opMultiplicationsPlural,
+          opSingular: t.opMultiplication,
+          grid: <ProgressGrid facts={profile.facts} />,
+        };
+
+  // Onglets du sélecteur — même pattern que « Mes images » (ProgressScreen).
+  const opTabs: Array<{ key: 'mult' | 'div' | 'rem'; label: string }> = [
+    { key: 'mult', label: t.multiplications },
+    { key: 'div', label: t.divisions },
+    ...(remainderUnlocked ? [{ key: 'rem' as const, label: t.remainders }] : []),
+  ];
+
+  // Histogramme de l'opération sélectionnée.
   const { boxCounts, maxBoxCount } = useMemo(() => {
     const counts = [0, 0, 0, 0, 0, 0];
-    const histoFacts = showDiv ? divisionFacts : profile.facts;
-    for (const fact of histoFacts) {
+    for (const fact of activeView.facts) {
       if (!fact.introduced) counts[0]++;
       else counts[fact.box]++;
     }
     return { boxCounts: counts, maxBoxCount: Math.max(...counts, 1) };
-  }, [profile.facts, divisionFacts, showDiv]);
+  }, [activeView.facts]);
 
   // Liste UNIFIÉE × + ÷ — indépendante du sélecteur (mélange les deux opérations
   // pour montrer où l'enfant bute en ce moment, cf. lib/hardestFacts).
@@ -178,7 +216,6 @@ export default function ParentDashboard({
   // Compteurs de maîtrise (× et ÷) au même format — réutilisés par la carte
   // « Faits maîtrisés » (avant déblocage) et la carte de maîtrise (après).
   const multMastered = `${countMastered(profile.facts)}/${profile.facts.length}`;
-  const divMastered = `${countMastered(divisionFacts)}/${divisionFacts.length}`;
 
   const boxColors = [
     'var(--box-gray)', 'var(--box-red)', 'var(--box-orange)',
@@ -241,20 +278,16 @@ export default function ParentDashboard({
       {divisionUnlocked && (
         <>
           <div className="progress-tabs parent-op-tabs" role="tablist" aria-label={t.operation}>
-            <button
-              type="button"
-              className={`progress-tab ${!showDiv ? 'active' : ''}`}
-              onClick={() => setGridView('mult')}
-            >
-              {t.multiplications}
-            </button>
-            <button
-              type="button"
-              className={`progress-tab ${showDiv ? 'active' : ''}`}
-              onClick={() => setGridView('div')}
-            >
-              {t.divisions}
-            </button>
+            {opTabs.map(({ key, label }) => (
+              <button
+                key={key}
+                type="button"
+                className={`progress-tab ${gridView === key ? 'active' : ''}`}
+                onClick={() => setGridView(key)}
+              >
+                {label}
+              </button>
+            ))}
           </div>
 
           {/* Compteur de maîtrise de l'opération sélectionnée — sorti de la
@@ -262,12 +295,8 @@ export default function ParentDashboard({
               sélecteur, au même titre que la Répartition et la Grille. */}
           <div className="parent-section">
             <div className="parent-stat-card parent-mastery-card">
-              <div className="parent-stat-value">
-                {showDiv ? divMastered : multMastered}
-              </div>
-              <div className="parent-stat-label">
-                {showDiv ? t.divisionsMastered : t.multiplicationsMastered}
-              </div>
+              <div className="parent-stat-value">{activeView.mastered}</div>
+              <div className="parent-stat-label">{activeView.masteredLabel}</div>
             </div>
           </div>
         </>
@@ -288,7 +317,7 @@ export default function ParentDashboard({
           </a>
         </h3>
         <p className="parent-section-subtitle">
-          {t.boxDistributionSubtitle(showDiv ? t.opDivisionsPlural : t.opMultiplicationsPlural)}
+          {t.boxDistributionSubtitle(activeView.opPlural)}
         </p>
         <div className="parent-histogram">
           {boxCounts.map((count, i) => (
@@ -323,13 +352,9 @@ export default function ParentDashboard({
           </a>
         </h3>
         <p className="parent-section-subtitle">
-          {t.leitnerGridSubtitle(showDiv ? t.opDivision : t.opMultiplication)}
+          {t.leitnerGridSubtitle(activeView.opSingular)}
         </p>
-        {showDiv ? (
-          <DivisionProgressGrid facts={divisionFacts} />
-        ) : (
-          <ProgressGrid facts={profile.facts} />
-        )}
+        {activeView.grid}
       </div>
 
       {/* Evolution: accuracy + response time */}
@@ -372,14 +397,26 @@ export default function ParentDashboard({
               <div key={`${f.kind}-${f.key}`} className="parent-hard-fact">
                 <span
                   className={`parent-hard-fact-kind parent-hard-fact-kind--${f.kind}`}
-                  aria-label={f.kind === 'div' ? t.factDivision : t.factMultiplication}
+                  aria-label={
+                    f.kind === 'rem'
+                      ? t.factRemainder
+                      : f.kind === 'div'
+                        ? t.factDivision
+                        : t.factMultiplication
+                  }
                 >
-                  {f.kind === 'div' ? t.divSymbol : t.multSymbol}
+                  {f.kind === 'rem' ? t.remSymbol : f.kind === 'div' ? t.divSymbol : t.multSymbol}
                 </span>
                 <span className="parent-hard-fact-name">
-                  {f.kind === 'div'
-                    ? t.formatDivFact(f.dividend, f.divisor, f.quotient)
-                    : t.formatMultFact(f.a, f.b, f.product)}
+                  {f.kind === 'rem'
+                    ? t.formatRemFact(
+                        f.divisor * f.quotient,
+                        f.divisor * f.quotient + f.divisor - 1,
+                        f.divisor,
+                      )
+                    : f.kind === 'div'
+                      ? t.formatDivFact(f.dividend, f.divisor, f.quotient)
+                      : t.formatMultFact(f.a, f.b, f.product)}
                 </span>
                 <span className="parent-hard-fact-errors">
                   {t.errors(f.errorCount)} | {t.boxLabel(f.box)}
diff --git a/src/screens/ProgressScreen.tsx b/src/screens/ProgressScreen.tsx
index 172c79d7..6edacb63 100644
--- a/src/screens/ProgressScreen.tsx
+++ b/src/screens/ProgressScreen.tsx
@@ -2,67 +2,83 @@ import { useState } from 'react';
 import type { UserProfile } from '../types';
 import MysteryImage from '../components/MysteryImage';
 import DivisionMysteryImage from '../components/DivisionMysteryImage';
+import RemainderMysteryImage from '../components/RemainderMysteryImage';
 import BackChevron from '../components/BackChevron';
-import { isDivisionUnlocked } from '../lib/badges';
+import { isDivisionUnlocked, isRemainderUnlocked } from '../lib/badges';
 import { useProgressScreenStrings } from '../i18n/progress';
 
+type ProgressView = 'mult' | 'div' | 'rem';
+
 interface ProgressScreenProps {
   profile: UserProfile;
   onBack: () => void;
-  // Onglet ouvert par défaut quand la division est débloquée (depuis le récap
-  // d'une séance de division, on ouvre directement sur l'image division).
-  initialView?: 'mult' | 'div';
+  // Onglet ouvert par défaut : l'image du niveau actif (depuis le récap d'une
+  // séance, on ouvre directement sur l'image correspondante).
+  initialView?: ProgressView;
 }
 
 export default function ProgressScreen({ profile, onBack, initialView = 'mult' }: ProgressScreenProps) {
   const t = useProgressScreenStrings();
-  const unlocked = isDivisionUnlocked(profile);
-  const [view, setView] = useState<'mult' | 'div'>(unlocked ? initialView : 'mult');
+  const divUnlocked = isDivisionUnlocked(profile);
+  const remUnlocked = isRemainderUnlocked(profile);
+  const [view, setView] = useState<ProgressView>(() => {
+    if (initialView === 'rem' && !remUnlocked) return 'mult';
+    if (initialView === 'div' && !divUnlocked) return 'mult';
+    return initialView;
+  });
 
   const divFacts = profile.divisionFacts ?? [];
-  const showDiv = unlocked && view === 'div';
+  const remFacts = profile.remainderFacts ?? [];
+  const showDiv = divUnlocked && view === 'div';
+  const showRem = remUnlocked && view === 'rem';
 
-  const facts = showDiv ? divFacts : profile.facts;
+  const facts = showRem ? remFacts : showDiv ? divFacts : profile.facts;
   const introduced = facts.filter((f) => f.introduced).length;
   const mastered = facts.filter((f) => f.box >= 4).length;
   const total = facts.length;
 
+  const tabs: Array<{ key: ProgressView; label: string }> = [
+    { key: 'mult' as const, label: t.multiplications },
+    { key: 'div' as const, label: t.divisions },
+    ...(remUnlocked ? [{ key: 'rem' as const, label: t.remainders }] : []),
+  ];
+
   return (
     <div className="progress-screen">
       <div className="progress-header">
         <button className="progress-back-btn" onClick={onBack} aria-label={t.back}>
           <BackChevron />
         </button>
-        <div className="progress-title">{unlocked ? t.myPictures : t.myMysteryPicture}</div>
+        <div className="progress-title">{divUnlocked ? t.myPictures : t.myMysteryPicture}</div>
       </div>
 
-      {unlocked && (
+      {divUnlocked && (
         <div className="progress-tabs" role="tablist">
-          <button
-            type="button"
-            className={`progress-tab ${view === 'mult' ? 'active' : ''}`}
-            onClick={() => setView('mult')}
-          >
-            {t.multiplications}
-          </button>
-          <button
-            type="button"
-            className={`progress-tab ${view === 'div' ? 'active' : ''}`}
-            onClick={() => setView('div')}
-          >
-            {t.divisions}
-          </button>
+          {tabs.map(({ key, label }) => (
+            <button
+              key={key}
+              type="button"
+              className={`progress-tab ${view === key ? 'active' : ''}`}
+              onClick={() => setView(key)}
+            >
+              {label}
+            </button>
+          ))}
         </div>
       )}
 
       <div className="progress-stats-summary">
         <div className="progress-stat">
           <div className="progress-stat-value">{introduced}</div>
-          <div className="progress-stat-label">{showDiv ? t.discoveredDiv : t.discoveredMult}</div>
+          <div className="progress-stat-label">
+            {showDiv || showRem ? t.discoveredDiv : t.discoveredMult}
+          </div>
         </div>
         <div className="progress-stat">
           <div className="progress-stat-value">{mastered}</div>
-          <div className="progress-stat-label">{showDiv ? t.masteredDiv : t.masteredMult}</div>
+          <div className="progress-stat-label">
+            {showDiv || showRem ? t.masteredDiv : t.masteredMult}
+          </div>
         </div>
         <div className="progress-stat">
           <div className="progress-stat-value">{total}</div>
@@ -70,14 +86,19 @@ export default function ProgressScreen({ profile, onBack, initialView = 'mult' }
         </div>
       </div>
 
-      {showDiv ? (
+      {showRem ? (
+        <RemainderMysteryImage
+          facts={remFacts}
+          theme={profile.remainderMysteryTheme ?? profile.mysteryTheme}
+        />
+      ) : showDiv ? (
         <DivisionMysteryImage facts={divFacts} theme={profile.divisionMysteryTheme ?? profile.mysteryTheme} />
       ) : (
         <MysteryImage facts={profile.facts} theme={profile.mysteryTheme} />
       )}
 
       <div className="progress-legend">
-        {showDiv ? t.legendDiv : t.legendMult}
+        {showRem ? t.legendRem : showDiv ? t.legendDiv : t.legendMult}
       </div>
     </div>
   );
diff --git a/src/screens/RecapScreen.css b/src/screens/RecapScreen.css
index 31a87ca6..e05614ba 100644
--- a/src/screens/RecapScreen.css
+++ b/src/screens/RecapScreen.css
@@ -140,6 +140,11 @@
   border-color: var(--honey);
 }
 
+.recap-milestone--rem {
+  background: var(--sage-soft);
+  border-color: var(--sage);
+}
+
 .recap-milestone-icon {
   font-size: 28px;
   line-height: 1;
diff --git a/src/screens/RecapScreen.tsx b/src/screens/RecapScreen.tsx
index 67e2ab30..bf399a88 100644
--- a/src/screens/RecapScreen.tsx
+++ b/src/screens/RecapScreen.tsx
@@ -17,6 +17,10 @@ interface RecapScreenProps {
   // niveau 2 division. Découplé de « Génie de la multiplication » (boîte 5
   // partout), qui reste un trophée décroché plus tard, pendant le niveau 2.
   divisionJustUnlocked: boolean;
+  // Mode div uniquement : le 8e badge « Divisions par N » vient de tomber →
+  // déblocage du niveau 3 (division avec reste). Même logique, translatée
+  // d'un niveau (specs §12.3).
+  remainderJustUnlocked?: boolean;
   currentStreak: number;
   freezeJustUsed: boolean;
   freezeJustEarned: boolean;
@@ -24,9 +28,9 @@ interface RecapScreenProps {
   totalFacts: number;
   onFinish: () => void;
   onShowProgress: () => void;
-  // 'div' pour une séance de division : change le nom affiché et le badge de
-  // complétion d'image surveillé (specs §11). Défaut 'mult'.
-  mode?: 'mult' | 'div';
+  // 'div'/'rem' selon la séance : change le nom affiché et le jalon surveillé
+  // (specs §11, §12). Défaut 'mult'.
+  mode?: 'mult' | 'div' | 'rem';
 }
 
 function ImageCardIcon() {
@@ -68,6 +72,7 @@ export default function RecapScreen({
   newBadges,
   newlyCompletedTables,
   divisionJustUnlocked,
+  remainderJustUnlocked = false,
   currentStreak,
   freezeJustUsed,
   freezeJustEarned,
@@ -83,14 +88,30 @@ export default function RecapScreen({
   const t = useRecapStrings();
   const hasPlayedRef = useRef(false);
 
-  const noun = mode === 'div' ? t.divisions : t.multiplications;
-  // Jalon majeur de la séance :
-  // — div : « Maître de la division » (toutes les divisions en boîte 5, image complète) ;
+  const noun = mode === 'rem' ? t.remainders : mode === 'div' ? t.divisions : t.multiplications;
+  // Jalon majeur de la séance, par mode :
   // — mult : déblocage du niveau 2 (8e badge de table). PAS « Génie » : Génie
   //   (boîte 5 partout) arrive plus tard, pendant le niveau 2, et n'affiche
-  //   qu'une carte « Nouveau badge » classique.
-  const milestoneReached =
-    mode === 'div' ? newBadges.some((b) => b.id === BADGE_IDS.DIV_GENIE) : divisionJustUnlocked;
+  //   qu'une carte « Nouveau badge » classique ;
+  // — div : déblocage du niveau 3 (8e badge « Divisions par N »), sinon
+  //   « Maître de la division » (toutes les divisions en boîte 5) ;
+  // — rem : « Grand maître de la division » (les 64 zones en boîte 5, image
+  //   complète — le jalon ultime du parcours).
+  const milestone =
+    mode === 'rem'
+      ? newBadges.some((b) => b.id === BADGE_IDS.REM_GENIE)
+        ? { icon: '👑', title: t.milestoneRemTitle, subtitle: t.milestoneRemSubtitle }
+        : null
+      : mode === 'div'
+        ? remainderJustUnlocked
+          ? { icon: '🧮', title: t.milestoneRemUnlockTitle, subtitle: t.milestoneRemUnlockSubtitle }
+          : newBadges.some((b) => b.id === BADGE_IDS.DIV_GENIE)
+            ? { icon: '🎓', title: t.milestoneDivTitle, subtitle: t.milestoneDivSubtitle }
+            : null
+        : divisionJustUnlocked
+          ? { icon: '➗', title: t.milestoneMultTitle, subtitle: t.milestoneMultSubtitle }
+          : null;
+  const milestoneReached = milestone !== null;
   const imageChanged = result.factsPromoted > 0;
 
   useEffect(() => {
@@ -133,24 +154,16 @@ export default function RecapScreen({
         <div className="recap-message">{t.message(name)}</div>
       </div>
 
-      {/* Carte « jalon » du niveau. En multiplication : déblocage du niveau 2,
-          déclenché à l'obtention du 8e badge de table (toutes les tables
-          maîtrisées — l'image n'est pas forcément 100 % révélée, la boîte 5
-          continue ensuite). En division : le jalon ultime, image entièrement
-          révélée (badge Maître de la division). Même carte, contenu et teinte
-          par mode. */}
-      {milestoneReached && (
+      {/* Carte « jalon » du niveau (déblocage du niveau suivant ou complétion
+          d'image) — même carte, contenu et teinte par mode, cf. `milestone`. */}
+      {milestone && (
         <div className={`recap-card recap-milestone recap-milestone--${mode}`}>
           <div className="recap-milestone-icon" aria-hidden="true">
-            {mode === 'div' ? '🎓' : '➗'}
+            {milestone.icon}
           </div>
           <div className="recap-milestone-text">
-            <div className="recap-milestone-title">
-              {mode === 'div' ? t.milestoneDivTitle : t.milestoneMultTitle}
-            </div>
-            <div className="recap-milestone-subtitle">
-              {mode === 'div' ? t.milestoneDivSubtitle : t.milestoneMultSubtitle}
-            </div>
+            <div className="recap-milestone-title">{milestone.title}</div>
+            <div className="recap-milestone-subtitle">{milestone.subtitle}</div>
           </div>
         </div>
       )}
@@ -158,12 +171,18 @@ export default function RecapScreen({
       {newlyCompletedTables.length > 0 && (
         <div className="recap-card recap-table-complete">
           <div className="recap-table-complete-title">
-            {mode === 'div'
-              ? t.tableCompleteDivTitle(newlyCompletedTables)
-              : t.tableCompleteMultTitle(newlyCompletedTables)}
+            {mode === 'rem'
+              ? t.tableCompleteRemTitle(newlyCompletedTables)
+              : mode === 'div'
+                ? t.tableCompleteDivTitle(newlyCompletedTables)
+                : t.tableCompleteMultTitle(newlyCompletedTables)}
           </div>
           <div className="recap-table-complete-subtitle">
-            {mode === 'div' ? t.tableCompleteDivSubtitle : t.tableCompleteMultSubtitle}
+            {mode === 'rem'
+              ? t.tableCompleteRemSubtitle
+              : mode === 'div'
+                ? t.tableCompleteDivSubtitle
+                : t.tableCompleteMultSubtitle}
           </div>
         </div>
       )}
diff --git a/src/screens/SessionScreen.css b/src/screens/SessionScreen.css
index be09b3c1..7402f2e2 100644
--- a/src/screens/SessionScreen.css
+++ b/src/screens/SessionScreen.css
@@ -191,3 +191,26 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+
+/* Niveau 3 — libellé de l'étape de saisie (« Combien de fois ? » puis
+   « Il reste combien ? », specs §12.5). */
+.session-rem-step {
+  margin-top: 8px;
+  font-family: var(--sans);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--ink-soft);
+  text-align: center;
+}
+
+/* « reste » intercalé dans la formule (« 45 ÷ 7 = 6, reste ? »). */
+.formula-remainder {
+  margin: 0 0.2em 0 0.15em;
+  font-size: 0.45em;
+  font-weight: 700;
+  color: var(--coral);
+}
+.formula-remainder::before {
+  content: ', ';
+  color: var(--ink);
+}
diff --git a/src/screens/SessionScreen.tsx b/src/screens/SessionScreen.tsx
index 65771eba..020bc126 100644
--- a/src/screens/SessionScreen.tsx
+++ b/src/screens/SessionScreen.tsx
@@ -6,11 +6,20 @@ import DotGrid from '../components/DotGrid';
 import FeedbackOverlay from '../components/FeedbackOverlay';
 import StrategyHint from '../components/StrategyHint';
 import DivisionStrategyHint from '../components/DivisionStrategyHint';
-import { FAST_THRESHOLD_MS, DIVISION_FAST_THRESHOLD_MS } from '../types';
+import RemainderStrategyHint from '../components/RemainderStrategyHint';
+import {
+  FAST_THRESHOLD_MS,
+  DIVISION_FAST_THRESHOLD_MS,
+  REMAINDER_FAST_THRESHOLD_MS,
+  remainderDividend,
+} from '../types';
 import { getStrategy, hasStrategy } from '../lib/strategies';
 import { getDivisionStrategy } from '../lib/divisionStrategies';
+import { getRemainderStrategy } from '../lib/remainderStrategies';
 import { getDivisionFactKey } from '../lib/divisionFacts';
+import { getRemainderFactKey } from '../lib/remainderFacts';
 import { getFactKey } from '../lib/facts';
+import { itemDisplay } from '../lib/sessionItemView';
 import { todayISO } from '../lib/utils';
 import { useSound } from '../hooks/useSound';
 import { useTTS } from '../hooks/useTTS';
@@ -41,39 +50,54 @@ interface SessionScreenProps {
     timeMs: number,
     answered: number | null,
     inputMode: 'keypad' | 'voice',
+    // Niveau 3 uniquement : reste répondu (null si la question s'est arrêtée
+    // à un quotient faux). `answered` porte alors le quotient répondu.
+    answeredRemainder?: number | null,
   ) => void;
 }
 
-// Vue d'affichage selon le type : opérateur, opérandes affichés, réponse
-// attendue, seuil de rapidité, clé TTS de la question.
+// Vue d'affichage selon le type : opérandes affichés (via itemDisplay,
+// partagé avec FeedbackOverlay), réponse attendue, seuil de rapidité, clé TTS.
 function view(item: SessionItem) {
+  const display = itemDisplay(item);
+  if (item.kind === 'rem') {
+    return {
+      ...display,
+      answer: item.fact.quotient,
+      fastMs: REMAINDER_FAST_THRESHOLD_MS,
+      qKey: `qr-${display.left}-${display.right}`,
+      token: `r-${display.left}-${display.right}`,
+    };
+  }
   if (item.kind === 'div') {
-    const { dividend, divisor, quotient } = item.fact;
     return {
-      left: dividend,
-      op: '÷',
-      right: divisor,
-      answer: quotient,
+      ...display,
+      answer: item.fact.quotient,
       fastMs: DIVISION_FAST_THRESHOLD_MS,
-      qKey: `qd-${dividend}-${divisor}`,
-      token: `d-${dividend}-${divisor}`,
+      qKey: `qd-${display.left}-${display.right}`,
+      token: `d-${display.left}-${display.right}`,
     };
   }
   return {
-    left: item.displayA,
-    op: '×',
-    right: item.displayB,
+    ...display,
     answer: item.fact.product,
     fastMs: FAST_THRESHOLD_MS,
-    qKey: `q-${item.displayA}-${item.displayB}`,
-    token: `m-${item.displayA}-${item.displayB}`,
+    qKey: `q-${display.left}-${display.right}`,
+    token: `m-${display.left}-${display.right}`,
   };
 }
 
 function itemKey(item: SessionItem): string {
-  return item.kind === 'div'
-    ? getDivisionFactKey(item.fact.dividend, item.fact.divisor)
-    : getFactKey(item.fact.a, item.fact.b);
+  if (item.kind === 'rem') return getRemainderFactKey(item.fact.divisor, item.fact.quotient);
+  if (item.kind === 'div') return getDivisionFactKey(item.fact.dividend, item.fact.divisor);
+  return getFactKey(item.fact.a, item.fact.b);
+}
+
+// Clé TTS de l'écran d'intro d'un item (pré-générée par scripts/generate-tts.mjs).
+function introKey(item: SessionItem): string {
+  if (item.kind === 'rem') return `intror-${item.fact.divisor}-${item.fact.quotient}`;
+  if (item.kind === 'div') return `introd-${item.fact.dividend}-${item.fact.divisor}`;
+  return `intro-${item.fact.a}-${item.fact.b}`;
 }
 
 export default function SessionScreen({
@@ -91,7 +115,12 @@ export default function SessionScreen({
     correct: boolean;
     fast: boolean;
     submittedValue: number;
+    // Niveau 3 : reste saisi (null = la question s'est arrêtée au quotient).
+    submittedRemainder?: number | null;
   } | null>(null);
+  // Niveau 3 — saisie en deux temps (specs §12.5) : quotient validé de la
+  // question en cours, null tant qu'on est à l'étape 1 (« Combien de fois ? »).
+  const [remQuotient, setRemQuotient] = useState<number | null>(null);
   const [numpadDisabled, setNumpadDisabled] = useState(false);
   const submittingRef = useRef(false);
 
@@ -131,12 +160,12 @@ export default function SessionScreen({
     const keys = new Set<string>();
     for (const item of initialQuestions) {
       keys.add(view(item).qKey);
-      if (item.isIntroduction) {
-        keys.add(
-          item.kind === 'div'
-            ? `introd-${item.fact.dividend}-${item.fact.divisor}`
-            : `intro-${item.fact.a}-${item.fact.b}`,
-        );
+      if (item.isIntroduction) keys.add(introKey(item));
+      if (item.kind === 'rem') {
+        // Invites statiques du niveau 3 : relance de l'étape 2 et astuce
+        // générique d'erreur (le dividende varie, l'astuce parlée est fixe).
+        keys.add('rem-rest');
+        keys.add('strategy-rem');
       }
     }
     preload([...keys]);
@@ -157,17 +186,14 @@ export default function SessionScreen({
       setShowIntro(false);
     }
     setNumpadDisabled(false);
+    setRemQuotient(null);
   }
 
   useEffect(() => {
     if (!currentItem) return;
     if (currentItem.isIntroduction) {
       introducedFacts.current.add(itemKey(currentItem));
-      if (currentItem.kind === 'div') {
-        speak(`introd-${currentItem.fact.dividend}-${currentItem.fact.divisor}`);
-      } else {
-        speak(`intro-${currentItem.fact.a}-${currentItem.fact.b}`);
-      }
+      speak(introKey(currentItem));
     } else {
       speakQuestion(currentItem);
     }
@@ -175,13 +201,17 @@ export default function SessionScreen({
   }, [currentIndex, currentItem, speak, speakQuestion]);
 
   // En vocal, démarrer le timer à la fin du TTS (ne pas compter la lecture).
+  // Pas de reset en étape 2 du niveau 3 (relance « il reste ? ») : le temps
+  // d'une question à deux réponses court de l'affichage à la validation du
+  // reste (specs §12.7).
   useEffect(() => {
     if (inputMode !== 'voice') return;
     if (showIntro) return;
+    if (remQuotient !== null) return;
     if (!isSpeaking) {
       questionStartTime.current = Date.now();
     }
-  }, [isSpeaking, inputMode, showIntro, currentIndex]);
+  }, [isSpeaking, inputMode, showIntro, currentIndex, remQuotient]);
 
   const moveToNext = useCallback(() => {
     const nextIndex = currentIndex + 1;
@@ -203,13 +233,31 @@ export default function SessionScreen({
   const handleAnswer = useCallback(
     (value: number) => {
       if (!currentItem || submittingRef.current) return;
+
+      // Niveau 3, étape 1 (« Combien de fois ? ») : un quotient JUSTE ne clôt
+      // pas la question — on passe à l'étape 2 (« Il reste combien ? ») sans
+      // toucher au timer ni au Leitner (specs §12.5). Un quotient FAUX
+      // court-circuite : la question se termine incorrecte, le feedback cible
+      // l'encadrement (pas la peine de demander un reste sur un mauvais
+      // multiple).
+      if (currentItem.kind === 'rem' && remQuotient === null && value === currentItem.fact.quotient) {
+        stopSpeech();
+        setRemQuotient(value);
+        speak('rem-rest');
+        return;
+      }
+
       submittingRef.current = true;
       setNumpadDisabled(true);
       stopSpeech();
 
       const v = view(currentItem);
       const timeMs = Date.now() - questionStartTime.current;
-      const correct = value === v.answer;
+      const isRemainderStep = currentItem.kind === 'rem' && remQuotient !== null;
+      // Étape 2 : la valeur saisie est le reste ; le quotient est déjà validé.
+      const correct = isRemainderStep
+        ? value === currentItem.remainder
+        : value === v.answer;
       const fast = correct && timeMs < v.fastMs[inputMode];
 
       totalTimeMs.current += timeMs;
@@ -218,7 +266,10 @@ export default function SessionScreen({
       if (correct) playCorrect();
       else playIncorrect();
 
-      onAnswer(currentItem, correct, timeMs, value, inputMode);
+      const answeredQuotient = isRemainderStep ? remQuotient : value;
+      const answeredRemainder =
+        currentItem.kind === 'rem' ? (isRemainderStep ? value : null) : undefined;
+      onAnswer(currentItem, correct, timeMs, answeredQuotient, inputMode, answeredRemainder);
 
       // Réintroduction après erreur (capée — cf. MAX_SESSION_LENGTH).
       if (!correct && questions.length < MAX_SESSION_LENGTH) {
@@ -232,18 +283,27 @@ export default function SessionScreen({
       }
 
       setResults((prev) => [...prev, { correct }]);
-      setFeedback({ item: currentItem, correct, fast, submittedValue: value });
+      setFeedback({
+        item: currentItem,
+        correct,
+        fast,
+        submittedValue: isRemainderStep ? remQuotient! : value,
+        submittedRemainder: answeredRemainder,
+      });
 
       // Astuce parlée sur l'overlay d'erreur (gated boîte ≤ 2 comme l'overlay).
       if (!correct && currentItem.fact.box <= 2) {
-        if (currentItem.kind === 'div') {
+        if (currentItem.kind === 'rem') {
+          // Le dividende varie à chaque présentation : astuce générique fixe.
+          speak('strategy-rem');
+        } else if (currentItem.kind === 'div') {
           speak(`strategyd-${currentItem.fact.dividend}-${currentItem.fact.divisor}`);
         } else if (hasStrategy(currentItem.fact.a, currentItem.fact.b)) {
           speak(`strategy-${currentItem.fact.a}-${currentItem.fact.b}`);
         }
       }
     },
-    [currentItem, currentIndex, questions.length, onAnswer, playCorrect, playIncorrect, stopSpeech, speak, inputMode],
+    [currentItem, currentIndex, questions.length, remQuotient, onAnswer, playCorrect, playIncorrect, stopSpeech, speak, inputMode],
   );
 
   const handleFeedbackDismiss = useCallback(() => {
@@ -260,8 +320,9 @@ export default function SessionScreen({
       speakQuestion(currentItem);
     };
 
-    // Division : intro en une étape (« pense à la multiplication »).
-    if (currentItem.kind === 'div') {
+    // Division et niveau 3 : intro en une étape (« pense à la multiplication » /
+    // « cherche le multiple juste en dessous »).
+    if (currentItem.kind === 'div' || currentItem.kind === 'rem') {
       finish();
       return;
     }
@@ -300,6 +361,8 @@ export default function SessionScreen({
       : null;
   const divIntroStrategy =
     showIntro && currentItem.kind === 'div' ? getDivisionStrategy(currentItem.fact) : null;
+  const remIntroStrategy =
+    showIntro && currentItem.kind === 'rem' ? getRemainderStrategy(currentItem) : null;
 
   const maxDots = Math.min(questions.length, MAX_SESSION_LENGTH);
   const progressDots = Array.from({ length: maxDots }, (_, i) => {
@@ -374,6 +437,35 @@ export default function SessionScreen({
         </div>
       )}
 
+      {/* Introduction — niveau 3 (« cherche le multiple juste en dessous »).
+          Modèle quotitif : rangées de `divisor` points (les fois), plus la
+          rangée incomplète du reste (specs §12.4). */}
+      {showIntro && currentItem.kind === 'rem' && (
+        <div className="session-intro">
+          <div className="session-intro-title">{t.new}</div>
+          <div className="session-intro-formula">
+            {v.left}
+            <span className="session-intro-operator">{v.op}</span>
+            {v.right}
+          </div>
+          <DotGrid
+            a={currentItem.fact.quotient}
+            b={currentItem.fact.divisor}
+            remainderDots={currentItem.remainder}
+            animated
+            size="normal"
+            bare
+          />
+          <div className="session-intro-explanation">
+            {t.remIntro(remainderDividend(currentItem), currentItem.fact.divisor)}
+          </div>
+          {remIntroStrategy && <RemainderStrategyHint strategy={remIntroStrategy} variant="intro" />}
+          <button className="btn btn--ink session-intro-btn" onClick={handleIntroNext}>
+            {t.gotIt}
+          </button>
+        </div>
+      )}
+
       {/* Introduction — division (« pense à la multiplication ») */}
       {showIntro && currentItem.kind === 'div' && (
         <div className="session-intro">
@@ -394,7 +486,10 @@ export default function SessionScreen({
         </div>
       )}
 
-      {/* Question */}
+      {/* Question. Niveau 3 : saisie en deux temps sur le même écran — le
+          quotient validé s'installe dans la formule et le « reste ? » prend le
+          relais (specs §12.5). Le NumPad est re-keyé par étape (reset de la
+          saisie) et VoiceInput re-tokené (reset de l'écoute). */}
       {!showIntro && (
         <div className="session-question">
           <div className="formula-text session-question-text">
@@ -402,20 +497,41 @@ export default function SessionScreen({
             <span className="formula-operator">{v.op}</span>
             {v.right}
             <span className="formula-equals">=</span>
-            <span className="formula-placeholder">?</span>
+            {currentItem.kind === 'rem' && remQuotient !== null ? (
+              <>
+                {remQuotient}
+                <span className="formula-remainder">{t.remainderWord}</span>
+                <span className="formula-placeholder">?</span>
+              </>
+            ) : (
+              <span className="formula-placeholder">?</span>
+            )}
           </div>
+          {currentItem.kind === 'rem' && (
+            <div className="session-rem-step" aria-live="polite">
+              {remQuotient === null ? t.howManyTimes : t.whatRemains}
+            </div>
+          )}
           <div className="session-numpad-area">
             {inputMode === 'voice' ? (
               <VoiceInput
                 onSubmit={handleAnswer}
                 disabled={numpadDisabled}
                 isSpeaking={isSpeaking}
-                questionToken={`${v.token}-${currentIndex}`}
-                expectedValue={v.answer}
+                questionToken={`${v.token}-${currentIndex}${remQuotient !== null ? '-rest' : ''}`}
+                expectedValue={
+                  currentItem.kind === 'rem' && remQuotient !== null
+                    ? currentItem.remainder
+                    : v.answer
+                }
               />
             ) : (
               <>
-                <NumPad onSubmit={handleAnswer} disabled={numpadDisabled} />
+                <NumPad
+                  key={remQuotient === null ? 'main' : 'rest'}
+                  onSubmit={handleAnswer}
+                  disabled={numpadDisabled}
+                />
                 {STT_SUPPORTED && (
                   <button
                     type="button"
@@ -439,6 +555,7 @@ export default function SessionScreen({
           correct={feedback.correct}
           fast={feedback.fast}
           submittedValue={feedback.submittedValue}
+          submittedRemainder={feedback.submittedRemainder}
           onDismiss={handleFeedbackDismiss}
         />
       )}
diff --git a/src/types.ts b/src/types.ts
index 8b6a91ec..90fd4399 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -37,6 +37,23 @@ export interface DivisionFact {
   introduced: boolean;
 }
 
+// === Niveau 3 — division avec reste (cf. specs §12) ===
+// L'unité de maîtrise n'est pas un énoncé figé mais une ZONE : la case
+// (divisor, quotient) couvre les dividendes de divisor×quotient inclus à
+// divisor×(quotient+1) exclu. Le reste est tiré au sort à chaque présentation
+// (specs §12.2) — il vit sur la question (RemainderSessionQuestion), jamais
+// ici : l'état Leitner est porté par la zone, quel que soit le reste tiré.
+// 64 zones, non commutatives comme la division ((7,6) ≠ (6,7)).
+export interface RemainderFact {
+  divisor: number;    // diviseur (2-9)
+  quotient: number;   // quotient attendu (2-9) ; dividende de base = divisor × quotient
+  box: 1 | 2 | 3 | 4 | 5;
+  lastSeen: string;    // ISO date
+  nextDue: string;     // ISO date
+  history: Attempt[];
+  introduced: boolean;
+}
+
 export interface Badge {
   // Un badge persisté ne porte que sa clé de progression (`id`), sa date et son
   // `icon` (affiché tel quel au recap). Le libellé est toujours re-résolu par
@@ -84,6 +101,11 @@ export interface UserProfile {
   // `mysteryTheme` pour ne jamais re-flouter l'image multiplication conquise.
   divisionMysteryTheme?: MysteryTheme;
   hasSeenDivisionIntro?: boolean;
+  // === Niveau 3 — division avec reste (cf. specs §12). Optionnels : absents
+  // des profils antérieurs, backfillés par migrateProfile au chargement. ===
+  remainderFacts?: RemainderFact[];
+  // Image mystère dédiée au niveau 3 (specs §12.6), distincte des deux autres.
+  remainderMysteryTheme?: MysteryTheme;
 }
 
 export type BoxLevel = 1 | 2 | 3 | 4 | 5;
@@ -123,6 +145,14 @@ export const DIVISION_FAST_THRESHOLD_MS: Record<'keypad' | 'voice', number> = {
   voice: 4000,
 };
 
+// Niveau 3 — division avec reste : deux saisies (quotient puis reste) et un
+// geste en deux temps (encadrement puis écart), mesurés de l'affichage de la
+// question à la validation du reste (specs §12.7). +2 s sur le seuil division.
+export const REMAINDER_FAST_THRESHOLD_MS: Record<'keypad' | 'voice', number> = {
+  keypad: 8000,
+  voice: 6000,
+};
+
 export interface SessionQuestion {
   fact: MultiFact;
   displayA: number;  // peut être inversé pour varier a×b / b×a
@@ -142,13 +172,31 @@ export interface DivisionSessionQuestion {
   isBonusReview: boolean;
 }
 
-// Élément d'une séance mixte (specs §11.6) : après déblocage, la séance du
-// jour est principalement de la division mais peut intégrer des révisions
-// d'entretien des tables (× et ÷ entrelacés). Le discriminant `kind` permet à
-// l'écran de séance de rendre chaque question selon son type.
+// Question de division avec reste (niveau 3, specs §12). Le reste est tiré au
+// sort à la composition de la séance : le dividende affiché vaut
+// divisor × quotient + remainder. Deux réponses attendues (quotient puis reste).
+export interface RemainderSessionQuestion {
+  fact: RemainderFact;
+  remainder: number;  // 0..divisor-1 ; 0 garde vivante la discrimination « ça tombe juste »
+  isIntroduction: boolean;
+  isRetry: boolean;
+  isBonusReview: boolean;
+}
+
+/** Dividende affiché d'une question de division avec reste. */
+export function remainderDividend(q: Pick<RemainderSessionQuestion, 'fact' | 'remainder'>): number {
+  return q.fact.divisor * q.fact.quotient + q.remainder;
+}
+
+// Élément d'une séance mixte (specs §11.6, §12.3) : après déblocage, la séance
+// du jour est le niveau actif (division, puis division avec reste) mais peut
+// intégrer des révisions d'entretien des niveaux précédents, entrelacées. Le
+// discriminant `kind` permet à l'écran de séance de rendre chaque question
+// selon son type.
 export type SessionItem =
   | ({ kind: 'mult' } & SessionQuestion)
-  | ({ kind: 'div' } & DivisionSessionQuestion);
+  | ({ kind: 'div' } & DivisionSessionQuestion)
+  | ({ kind: 'rem' } & RemainderSessionQuestion);
 
 // Log par question pour les séances enregistrées depuis l'ajout du champ.
 // Permet de diagnostiquer vitesse et mode après coup, y compris pour les
@@ -160,14 +208,20 @@ export interface SessionQuestionLog {
   // 'mult'. Indispensable pour ne pas confondre une division avec une
   // multiplication dans le feedback : pour 'div', `a`/`b` portent diviseur et
   // quotient (le dividende = a × b), sinon `56 ÷ 7` serait illisible comme
-  // `{a:7, b:8}`, identique à `7 × 8`.
-  kind?: 'mult' | 'div';
-  // 'mult' : opérandes (canoniques). 'div' : a = diviseur, b = quotient.
+  // `{a:7, b:8}`, identique à `7 × 8`. Pour 'rem', a = diviseur, b = quotient
+  // (la zone), et `remainder` porte le reste tiré pour cette présentation.
+  kind?: 'mult' | 'div' | 'rem';
+  // 'mult' : opérandes (canoniques). 'div'/'rem' : a = diviseur, b = quotient.
   a: number;
   b: number;
   correct: boolean;
   responseTimeMs: number;
   answeredWith: number | null;
+  // Niveau 3 uniquement : reste tiré pour la question, et reste répondu (null
+  // si la question s'est arrêtée à un quotient faux). `answeredWith` porte le
+  // quotient répondu.
+  remainder?: number;
+  answeredRemainder?: number | null;
   isBonusReview: boolean;
   inputMode: 'keypad' | 'voice';
   // « Étoile dorée » : correct ET sous le seuil de rapidité du type de question
@@ -213,4 +267,9 @@ export const BADGE_IDS = {
   DIV_PREMIERE_MAITRISE: 'div-premiere-maitrise',
   DIV_TABLE_PREFIX: 'div-table-',
   DIV_GENIE: 'div-genie',
+  // Niveau 3 — division avec reste (cf. specs §12). Masqués tant que le niveau
+  // n'est pas débloqué (cf. isRemainderUnlocked / visibleBadgeDefinitions).
+  REM_PREMIERE_MAITRISE: 'rem-premiere-maitrise',
+  REM_TABLE_PREFIX: 'rem-table-',
+  REM_GENIE: 'rem-genie',
 } as const;

From c8d4181886085ee249ea435f0193103878b056f3 Mon Sep 17 00:00:00 2001
From: Ivan Schneider <ivan.schneider@hey.com>
Date: Thu, 23 Jul 2026 23:30:47 +0200
Subject: [PATCH 3/4] =?UTF-8?q?docs(guide):=20section=20=C2=AB=20Niveau=20?=
 =?UTF-8?q?3=20=E2=80=94=20la=20division=20avec=20reste=20=C2=BB=20(fr/en)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nouveau profil seed niveau 3 (divisions en boîte 5 + badges « Divisions
par N » — sans re-pousser table-2 déjà présent dans le profil d'exemple,
le comptage de déblocage étant strict à 8) et séquence de capture :
intro de zone (attente de la rangée du reste révélée), saisie en deux
temps (étape « Il reste combien ? »), 3e image mystère, dashboard à
trois onglets. Le guide est régénéré par le workflow de déploiement ;
validé en local sur les deux langues.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 scripts/generate-user-guide.mjs | 143 ++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)

diff --git a/scripts/generate-user-guide.mjs b/scripts/generate-user-guide.mjs
index 5c68e77d..cc03d6d1 100644
--- a/scripts/generate-user-guide.mjs
+++ b/scripts/generate-user-guide.mjs
@@ -75,6 +75,7 @@ const TEXT = {
     badges: 'Badges',
     consistency: 'Régularité', // src/i18n/badges.ts (badge streak)
     divisions: 'Divisions',
+    remainders: 'Avec reste', // src/i18n/progress.ts (onglet niveau 3)
   },
   en: {
     greeting: 'Hi',        // greeting "Hi <name> !"
@@ -84,6 +85,7 @@ const TEXT = {
     badges: 'Badges',
     consistency: 'Consistency',
     divisions: 'Divisions',
+    remainders: 'Remainders',
   },
 };
 
@@ -281,6 +283,56 @@ function buildUnlockedDivisionProfile() {
   return profile;
 }
 
+// Profil « niveau 3 débloqué » : tables ET divisions en boîte 5 (non dues),
+// badges de déblocage posés explicitement (la migration n'attribue qu'une
+// passe de checkBadges : les badges « Divisions par N » demanderaient une
+// seconde passe puisqu'ils sont gatés sur les badges de table persistés).
+// Sert à capturer l'intro de zone, la saisie en deux temps, la 3e image
+// mystère et le dashboard à trois onglets.
+function buildUnlockedRemainderProfile() {
+  const profile = buildUnlockedDivisionProfile();
+  const future = '2026-05-03';
+  for (const f of profile.divisionFacts) {
+    f.introduced = true;
+    f.box = 5;
+    f.lastSeen = SEED_YESTERDAY;
+    f.nextDue = future;
+    f.history = [{ date: SEED_YESTERDAY, correct: true, responseTimeMs: 2200, answeredWith: f.quotient }];
+  }
+  // Ne pousser QUE les badges « Divisions par N » : les badges de table sont
+  // complétés par la migration (toutes les mult en boîte 5), et le profil
+  // d'exemple contient déjà `table-2` — en re-pousser un ferait 9 badges
+  // `table-*` alors que le déblocage compte strictement 8 (hasAllTableBadges).
+  for (let n = 2; n <= 9; n++) {
+    profile.badges.push({ id: `div-table-${n}`, earnedDate: SEED_YESTERDAY, icon: `÷${n}` });
+  }
+  // Zones du niveau 3 : distribution déterministe décalée (image variée), et
+  // — comme pour la division — aucune zone INTRODUITE en boîte 1, sinon le
+  // pacing bloque les intros et la capture « 21-remainder-intro » n'a pas lieu.
+  const remainderFacts = [];
+  for (let divisor = 2; divisor <= 9; divisor++) {
+    for (let quotient = 2; quotient <= 9; quotient++) {
+      const seed = seededBox(quotient + 1, divisor);
+      const introduced = seed.introduced;
+      const box = introduced ? Math.max(seed.box, 2) : seed.box;
+      remainderFacts.push({
+        divisor,
+        quotient,
+        box,
+        introduced,
+        lastSeen: introduced ? SEED_YESTERDAY : '',
+        nextDue: introduced ? SEED_TODAY : '',
+        history: introduced
+          ? [{ date: SEED_YESTERDAY, correct: box >= 3, responseTimeMs: 3000, answeredWith: box >= 3 ? quotient : null }]
+          : [],
+      });
+    }
+  }
+  profile.remainderFacts = remainderFacts;
+  profile.remainderMysteryTheme = 'village'; // pas de spoiler, comme les deux autres
+  return profile;
+}
+
 // --- Page helpers -----------------------------------------------------------
 
 async function seedProfile(page, profile) {
@@ -808,6 +860,49 @@ async function captureDivisionScreens(page) {
   await shot(page, '17-division-question');
 }
 
+async function captureRemainderScreens(page) {
+  await seedProfile(page, buildUnlockedRemainderProfile());
+  await gotoHome(page);
+  await page.waitForSelector('.home-screen');
+
+  // Espace parent — version niveau 3 : troisième onglet « Avec reste » sur le
+  // sélecteur d'opération, carte de maîtrise dédiée.
+  await captureParentDashboard(page, '13c-parent-dashboard-remainder');
+
+  // Image mystère du niveau 3 : « Mes images » → onglet « Avec reste ».
+  await page.click(`.home-nav-btn:has-text("${tx('myPictures')}")`);
+  await page.waitForSelector('.progress-screen');
+  await page.click(`.progress-tab:has-text("${tx('remainders')}")`);
+  await shot(page, '23-remainder-progress');
+  await page.click('.progress-back-btn');
+  await page.waitForSelector('.home-screen');
+
+  // Séance : intro de zone (rangées pleines + points du reste en couleur),
+  // puis la saisie en deux temps sur la question qui suit.
+  await page.click('.home-start-btn');
+  await page.waitForSelector('.session-screen');
+  if (await page.locator('.session-intro').count()) {
+    // La rangée du reste est dans le DOM dès le montage mais reste `.hidden`
+    // (opacité) tant que les rangées pleines ne sont pas toutes révélées par
+    // les timers JS — on attend l'état révélé, pas la présence du nœud.
+    await page
+      .waitForSelector('.dot-grid-row--rest:not(.hidden)', { timeout: 9000 })
+      .catch(() => log('WARN: remainder rest dots did not appear'));
+    await sleep(300);
+    await shot(page, '21-remainder-intro');
+    await clickAllIntroSteps(page);
+  } else {
+    log('WARN: no remainder intro step — 21-remainder-intro will be missing');
+  }
+  // Étape 1 : on répond le bon quotient → l'écran passe à « Il reste combien ? »
+  // (le quotient s'installe dans la formule) — c'est cet état qu'on capture.
+  await page.waitForSelector('.session-question-text');
+  const { a: dividend, b: divisor } = await readQuestion(page);
+  await answerWith(page, Math.floor(dividend / divisor));
+  await page.waitForSelector('.formula-remainder');
+  await shot(page, '22-remainder-question');
+}
+
 async function captureMultiProfileScreens(page) {
   // Deux enfants sur l'appareil : Léa (le profil du reste du guide) + Max
   // (prénom choisi pour tomber sur une couleur d'avatar différente de Léa —
@@ -1002,6 +1097,30 @@ const SECTIONS_FR = [
       { file: '18-division-progress', caption: 'Une image mystère dédiée à la division, distincte de celle des tables.' },
     ],
   },
+  {
+    id: 'remainder',
+    title: 'Niveau 3 — la division avec reste',
+    description: `Quand toutes les divisions sont maîtrisées (les huit badges
+      « Divisions par N »), un troisième niveau se débloque : la division quand
+      ça ne tombe pas juste (« 45 ÷ 7 = 6, reste 3 »), le geste attendu en fin
+      de CE2 et formalisé en CM1 avec la division posée. L'app enseigne
+      explicitement l'astuce d'encadrement : chercher le multiple juste en
+      dessous, sans dépasser — ce qui manque pour y arriver, c'est le reste.
+      La réponse se donne en deux temps : « Combien de fois ? » puis « Il reste
+      combien ? » (toujours des réponses à un chiffre), et le nombre à diviser
+      change à chaque révision pour que l'enfant refasse vraiment le geste.
+      Parfois, ça tombe juste — le reste est zéro, il faut le remarquer !
+      Une troisième image mystère se dévoile, et les tables comme les divisions
+      continuent d'être entretenues discrètement dans la même séance
+      quotidienne. Comme toujours : rien de tout cela n'est visible avant
+      d'être débloqué.`,
+    shots: [
+      { file: '21-remainder-intro', caption: 'Introduction d\'une division avec reste : les rangées pleines, et les points qui « ne rentrent pas » — le reste.' },
+      { file: '22-remainder-question', caption: 'La réponse en deux temps : le quotient validé s\'installe dans la formule, puis « Il reste combien ? ».' },
+      { file: '23-remainder-progress', caption: 'Une troisième image mystère, dédiée à la division avec reste.' },
+      { file: '13c-parent-dashboard-remainder', caption: 'Le tableau de bord parent gagne un troisième onglet « Avec reste » (répartition par boîte et grille Leitner).' },
+    ],
+  },
   {
     id: 'badges',
     title: 'Les badges',
@@ -1237,6 +1356,29 @@ const SECTIONS_EN = [
       { file: '18-division-progress', caption: 'A mystery picture dedicated to division, distinct from the tables one.' },
     ],
   },
+  {
+    id: 'remainder',
+    title: 'Level 3 — division with remainders',
+    description: `Once every division is mastered (all eight "Dividing by N"
+      badges), a third level unlocks: division when it doesn't come out even
+      ("45 ÷ 7 = 6 r 3") — the skill expected at the end of grade 3 and
+      formalized with long division the following year. The app explicitly
+      teaches the bounding trick: find the multiple just below, without going
+      over — what's missing to get there is the remainder. Answers come in two
+      steps: "How many times?" then "What's left over?" (always single-digit
+      answers), and the number to divide changes on every review so the child
+      genuinely redoes the reasoning. Sometimes it does come out even — the
+      remainder is zero, and spotting that is part of the skill! A third
+      mystery picture reveals itself, and both the times tables and the
+      divisions quietly keep being maintained within the same daily session.
+      As always: none of this is visible before it is unlocked.`,
+    shots: [
+      { file: '21-remainder-intro', caption: 'Introducing a division with remainder: the full rows, and the dots that "don\'t fit" — the remainder.' },
+      { file: '22-remainder-question', caption: 'Answering in two steps: the validated quotient settles into the formula, then "What\'s left over?".' },
+      { file: '23-remainder-progress', caption: 'A third mystery picture, dedicated to division with remainders.' },
+      { file: '13c-parent-dashboard-remainder', caption: 'The parent dashboard gains a third "Remainders" tab (box distribution and Leitner grid).' },
+    ],
+  },
   {
     id: 'badges',
     title: 'The badges',
@@ -1727,6 +1869,7 @@ async function generateForLang(browser, lang) {
   await captureSessionScreens(page);
   await captureRecap(page);
   await captureDivisionScreens(page);
+  await captureRemainderScreens(page);
   await captureMultiProfileScreens(page);
   // Voice capture runs LAST: it injects a SpeechRecognition stub and sets
   // the input mode to 'voice' via addInitScript, both of which would

From 266270c764b578e64e679bb7e8aac4330b04ae99 Mon Sep 17 00:00:00 2001
From: Ivan Schneider <ivan.schneider@hey.com>
Date: Sat, 25 Jul 2026 09:40:38 +0200
Subject: [PATCH 4/4] =?UTF-8?q?fix(niveau3):=20formule=20=C3=A9tape=202=20?=
 =?UTF-8?q?=E2=80=94=20espace=20apr=C3=A8s=20la=20virgule,=20=C2=AB=20rest?=
 =?UTF-8?q?e=20=C2=BB=20en=20encre=20douce?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le corail se lisait comme un signal d'erreur dans la formule (il reste
réservé aux points du reste dans la grille), et l'espace typographique
du ::before était illisible à 0.45em — remplacé par des marges explicites.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/screens/SessionScreen.css | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/screens/SessionScreen.css b/src/screens/SessionScreen.css
index 7402f2e2..39090ca2 100644
--- a/src/screens/SessionScreen.css
+++ b/src/screens/SessionScreen.css
@@ -203,14 +203,18 @@
   text-align: center;
 }
 
-/* « reste » intercalé dans la formule (« 45 ÷ 7 = 6, reste ? »). */
+/* « reste » intercalé dans la formule (« 45 ÷ 7 = 6, reste ? »). La virgule
+   colle au quotient (::before sans marge gauche) et l'espacement se fait par
+   marges explicites — l'espace typographique serait illisible à 0.45em. Encre
+   douce, pas de couleur d'alerte : ce n'est pas un signal, juste un mot. */
 .formula-remainder {
-  margin: 0 0.2em 0 0.15em;
+  margin: 0 0.25em 0 0;
   font-size: 0.45em;
   font-weight: 700;
-  color: var(--coral);
+  color: var(--ink-soft);
 }
 .formula-remainder::before {
-  content: ', ';
+  content: ',';
+  margin-right: 0.4em;
   color: var(--ink);
 }