diff --git a/templates/base.html b/templates/base.html
index 63130863..83dd3209 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -22,24 +22,6 @@
      ne rechargeait pas la page en entier (Ctrl+F5), et inversement
      laissée en place en revenant sur l'accueil (liste des jeux) où elle
      n'a pourtant rien à faire. -->
-{% set recovery_codes = pop_recovery_codes() %}
-{% if recovery_codes %}
-<div class="modal is-active" id="recoveryCodesModal">
-  <div class="modal-background"></div>
-  <div class="modal-content">
-    <div class="box">
-      <h2 class="title is-4">Tes codes de récupération</h2>
-      <p class="hint mb-4">Note ces 10 codes en sécurité (gestionnaire de mots de passe, papier...) : chacun ne fonctionne qu'une seule fois et permet de te connecter si tu perds l'accès à ton application d'authentification. Ils ne seront plus jamais affichés.</p>
-      <div class="recoveryCodesGrid">
-        {% for code in recovery_codes %}
-        <code class="recoveryCode">{{ code }}</code>
-        {% endfor %}
-      </div>
-      <button type="button" class="button primary is-fullwidth mt-4" onclick="document.getElementById('recoveryCodesModal').remove()">J'ai noté mes codes</button>
-    </div>
-  </div>
-</div>
-{% endif %}
 <div id="pageChrome">
 <nav class="navbar topbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
@@ -69,6 +51,31 @@
 {% endif %}
 </div>
 <main class="content {% block content_class %}{% endblock %}">
+{% set recovery_codes = pop_recovery_codes() %}
+{% if recovery_codes %}
+<!-- À L'INTÉRIEUR de <main> (et pas à côté de #pageChrome) : pjax.js ne
+     remplace jamais que #pageChrome et main.content d'une navigation à
+     l'autre (voir swapDocument() dans pjax.js) — posé ailleurs, ce modal
+     serait bien présent dans le HTML renvoyé par le serveur juste après
+     l'inscription, mais jamais copié dans le DOM réellement affiché
+     puisque la redirection qui suit la confirmation de la 2FA passe par
+     une navigation pjax (fetch), pas un vrai rechargement de page. -->
+<div class="modal is-active" id="recoveryCodesModal">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <div class="box">
+      <h2 class="title is-4">Tes codes de récupération</h2>
+      <p class="hint mb-4">Note ces 10 codes en sécurité (gestionnaire de mots de passe, papier...) : chacun ne fonctionne qu'une seule fois et permet de te connecter si tu perds l'accès à ton application d'authentification. Ils ne seront plus jamais affichés.</p>
+      <div class="recoveryCodesGrid">
+        {% for code in recovery_codes %}
+        <code class="recoveryCode">{{ code }}</code>
+        {% endfor %}
+      </div>
+      <button type="button" class="button primary is-fullwidth mt-4" onclick="document.getElementById('recoveryCodesModal').remove()">J'ai noté mes codes</button>
+    </div>
+  </div>
+</div>
+{% endif %}
   {% block content %}{% endblock %}
 </main>
 <script src="{{ url_for('static', filename='pjax.js') }}"></script>