diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md
index 7e175a53..b3c30dd4 100644
--- a/docs/DECISIONS.md
+++ b/docs/DECISIONS.md
@@ -5,7 +5,31 @@ recommends, and surfaces these in the daily brief. Run `/decide` to clear them.
 
 ## Open
 
-Nothing open.
+### D-061 — 3D tilt on the overall score card (#751 phase 5) · raised 2026-09-29
+**Question** — #751 phase 5 lists "`3d-tilt` reserved for high-value visual elements (e.g.
+overall score card)". Do we ship it?
+
+**Recommendation — B, drop it.** art-director and ux-designer reached the same answer
+independently:
+- The tilt skews the score arc, which is the data itself, on the one figure a CISO reads at
+  a glance and an auditor screenshots.
+- A card that follows the pointer signals "the whole card is clickable". Only the button
+  inside `ScoreGauge` is.
+- It works only with a mouse, which is a second rendering path with no keyboard or touch
+  equivalent, and pointer-tracked parallax is a vestibular trigger.
+- It would touch `ScoreGauge`, which #824 (phase 3) owns.
+
+**Options**
+- **A — ship a restrained tilt.** At most 2° per axis and an 800px perspective, only on
+  `(hover:hover) and (pointer:fine)` under `motion-safe`, with no glare and no moving
+  shadow. It goes on the `DashboardPage.tsx` wrapper, never inside `ScoreGauge`. About half
+  a day, plus a live pass.
+- **B — drop it (recommended).** The item is closed as "evaluated, rejected" on #751.
+
+**Cost of delay** — none. Phase 5 ships without it, and A can be added later without
+rework.
+
+**Raised by** — #751 phase 5 (art-director + ux-designer specs, 2026-09-29).
 
 ## Resolved
 
diff --git a/frontend/src/components/layout/AppHeader.tsx b/frontend/src/components/layout/AppHeader.tsx
index c51019a6..24d50bce 100644
--- a/frontend/src/components/layout/AppHeader.tsx
+++ b/frontend/src/components/layout/AppHeader.tsx
@@ -216,12 +216,36 @@ export const AppHeader = ({ onOpenMobileNav }: AppHeaderProps) => {
           {notifMounted && <NotifPanel open={notifOpen} onClose={() => setNotifOpen(false)} />}
         </div>
 
-        <button onClick={toggleTheme} className={iconBtn} title="Theme" aria-label="Toggle theme">
-          {theme === 'dark' ? (
-            <Sun size={18} strokeWidth={1.7} />
-          ) : (
-            <Moon size={18} strokeWidth={1.7} />
-          )}
+        <button
+          onClick={toggleTheme}
+          className={iconBtn}
+          title="Theme"
+          /* Names what pressing it DOES, not a static "toggle theme" — the
+             accessible name tracks state the same way the icon does. */
+          aria-label={theme === 'dark' ? L.themeToLight : L.themeToDark}
+        >
+          {/* Both icons stacked in one grid cell and cross-faded on
+              --motion-hover (opacity + a slight scale) — no rotation, no pop. */}
+          <span className="grid">
+            <Sun
+              aria-hidden="true"
+              size={18}
+              strokeWidth={1.7}
+              className={cn(
+                '[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out',
+                theme === 'dark' ? 'opacity-100 scale-100' : 'opacity-0 scale-75',
+              )}
+            />
+            <Moon
+              aria-hidden="true"
+              size={18}
+              strokeWidth={1.7}
+              className={cn(
+                '[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out',
+                theme === 'dark' ? 'opacity-0 scale-75' : 'opacity-100 scale-100',
+              )}
+            />
+          </span>
         </button>
       </div>
     </header>
diff --git a/frontend/src/components/layout/__tests__/appHeaderThemeToggle.test.tsx b/frontend/src/components/layout/__tests__/appHeaderThemeToggle.test.tsx
new file mode 100644
index 00000000..ceb2f03e
--- /dev/null
+++ b/frontend/src/components/layout/__tests__/appHeaderThemeToggle.test.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) 2026 OpenDefender Contributors
+// SPDX-License-Identifier: AGPL-3.0-only
+//
+// #751 phase 5 — required test 7: the theme toggle's accessible name follows
+// the theme, naming the result of pressing it rather than a static "toggle
+// theme" that never changes.
+
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+vi.mock('../../../features/notifications/notificationService', () => ({
+  notificationService: {
+    list: vi.fn().mockResolvedValue([]),
+    unreadCount: vi.fn().mockResolvedValue(0),
+    markRead: vi.fn(),
+    markAllRead: vi.fn(),
+  },
+}));
+
+import { AppHeader } from '../AppHeader';
+import { useUIStore } from '../../../store/uiStore';
+
+function renderHeader() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter>
+        <AppHeader onOpenMobileNav={() => {}} />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+beforeEach(() => {
+  useUIStore.setState({ lang: 'en', theme: 'dark' });
+});
+
+describe('AppHeader theme toggle', () => {
+  it('names the theme it will switch TO, and that name flips with the theme', async () => {
+    const user = userEvent.setup();
+    renderHeader();
+
+    // Starts dark: pressing it goes to light.
+    const button = screen.getByRole('button', { name: 'Switch to light theme' });
+
+    await user.click(button);
+
+    // Same button, new name — the real store toggled, not a stand-in.
+    expect(screen.getByRole('button', { name: 'Switch to dark theme' })).toBe(button);
+  });
+});
diff --git a/frontend/src/features/auth/AuthScreen.tsx b/frontend/src/features/auth/AuthScreen.tsx
index f410bce6..39cc4dbe 100644
--- a/frontend/src/features/auth/AuthScreen.tsx
+++ b/frontend/src/features/auth/AuthScreen.tsx
@@ -449,12 +449,16 @@ function MFAEnrollment({ token }: { token: string }) {
 
   const qrSrc = qr.startsWith('data:') ? qr : `data:image/jpeg;base64,${qr}`;
 
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  // `codeOverride`: onComplete below fires synchronously inside the same
+  // commit as the `setCode` it follows, before React applies that update —
+  // reading the `code` closure here would still see the PREVIOUS value.
+  // Passing the just-completed value directly sidesteps the stale read.
+  const submit = async (e?: React.FormEvent, codeOverride?: string) => {
+    e?.preventDefault();
     setBusy(true);
     setError('');
     try {
-      const result = await verifyMFA(code.trim(), token);
+      const result = await verifyMFA((codeOverride ?? code).trim(), token);
       // Mandated enrolment completes the login: the server issues the session in
       // the same response, so the user is not asked for their password again.
       if (result.token_pair?.access_token) {
@@ -526,7 +530,13 @@ function MFAEnrollment({ token }: { token: string }) {
             id="enrol-code"
             testId="mfa-enrol-code"
             value={code}
-            onValueChange={setCode}
+            onValueChange={(next) => {
+              setCode(next);
+              if (error) setError('');
+            }}
+            onComplete={(value) => {
+              if (!busy) void submit(undefined, value);
+            }}
             length={6}
             invalid={Boolean(error)}
           />
diff --git a/frontend/src/features/auth/MFAEnrollmentDialog.tsx b/frontend/src/features/auth/MFAEnrollmentDialog.tsx
index a6bd7a0a..edc6d661 100644
--- a/frontend/src/features/auth/MFAEnrollmentDialog.tsx
+++ b/frontend/src/features/auth/MFAEnrollmentDialog.tsx
@@ -10,7 +10,7 @@
 // from Settings → Security.
 
 import { useEffect, useRef, useState } from 'react';
-import { OtpField } from '../../shared/ds';
+import { OtpField, cn } from '../../shared/ds';
 import { createPortal } from 'react-dom';
 import { ShieldCheck, X, Loader2, Copy, Check } from 'lucide-react';
 import { toast } from 'sonner';
@@ -70,13 +70,17 @@ export function MFAEnrollmentDialog({
     return () => window.removeEventListener('keydown', onKey);
   }, [onClose]);
 
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  // `codeOverride`: onComplete below fires synchronously inside the same
+  // commit as the `setCode` it follows, before React applies that update —
+  // reading the `code` closure here would still see the PREVIOUS value.
+  // Passing the just-completed value directly sidesteps the stale read.
+  const submit = async (e?: React.FormEvent, codeOverride?: string) => {
+    e?.preventDefault();
     if (busy) return;
     setBusy(true);
     setError('');
     try {
-      await verifyMFA(code.trim());
+      await verifyMFA((codeOverride ?? code).trim());
       await invalidateStatus();
       toast.success(
         tr('Authentification à deux facteurs activée', 'Two-factor authentication enabled'),
@@ -106,6 +110,10 @@ export function MFAEnrollmentDialog({
     try {
       await navigator.clipboard.writeText(setup.secret);
       setCopied(true);
+      // The icon swap alone does not tell a screen-reader user anything
+      // happened — the toast is the announcement, same live region every
+      // other confirmation in the product uses.
+      toast.success(tr('Clé copiée', 'Key copied'));
       setTimeout(() => setCopied(false), 2000);
     } catch {
       toast.error(tr('Copie impossible', 'Could not copy'));
@@ -114,7 +122,7 @@ export function MFAEnrollmentDialog({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-80 flex items-center justify-center p-4"
+      className="fixed inset-0 z-80 flex items-center justify-center p-4 motion-safe:animate-or-fadein"
       style={{ background: 'var(--surface-overlay)', backdropFilter: 'blur(var(--overlay-blur))' }}
       onClick={onClose}
     >
@@ -126,7 +134,10 @@ export function MFAEnrollmentDialog({
         tabIndex={-1}
         onClick={(e) => e.stopPropagation()}
         onSubmit={submit}
-        className="w-full max-w-[440px] max-h-[90vh] flex flex-col rounded-[16px] overflow-hidden outline-none"
+        /* Stopgap (#751 phase 5): this dialog was hand-rolled with no
+           entrance at all. The house enter class is the fix here, not an
+           exit — moving it onto the ds `Modal` needs its own issue. */
+        className="motion-safe:animate-or-rise w-full max-w-[440px] max-h-[90vh] flex flex-col rounded-[16px] overflow-hidden outline-none"
         style={{
           background: 'var(--bg-secondary)',
           border: '1px solid var(--border)',
@@ -210,11 +221,33 @@ export function MFAEnrollmentDialog({
                 <button
                   type="button"
                   onClick={copySecret}
-                  className="h-9 w-9 rounded-[9px] flex items-center justify-center text-ink-soft hover:text-ink transition-colors shrink-0"
+                  className="h-9 w-9 rounded-[9px] grid place-items-center text-ink-soft hover:text-ink transition-colors shrink-0"
                   style={{ background: 'var(--bg-hover)' }}
-                  aria-label={tr('Copier la clé', 'Copy the key')}
+                  /* The accessible name follows the state, the same way the
+                     icon does — the icon alone is silent to a screen reader. */
+                  aria-label={copied ? tr('Copié', 'Copied') : tr('Copier la clé', 'Copy the key')}
                 >
-                  {copied ? <Check size={16} /> : <Copy size={16} />}
+                  {/* Both icons stacked in one grid cell and cross-faded, not
+                      swapped outright — no rotation, no pop, just opacity and
+                      a slight scale on --motion-hover. */}
+                  <span className="grid">
+                    <Copy
+                      aria-hidden="true"
+                      size={16}
+                      className={cn(
+                        '[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out',
+                        copied ? 'opacity-0 scale-75' : 'opacity-100 scale-100',
+                      )}
+                    />
+                    <Check
+                      aria-hidden="true"
+                      size={16}
+                      className={cn(
+                        '[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out',
+                        copied ? 'opacity-100 scale-100' : 'opacity-0 scale-75',
+                      )}
+                    />
+                  </span>
                 </button>
               </div>
 
@@ -246,21 +279,30 @@ export function MFAEnrollmentDialog({
                 </div>
               )}
 
-              <label className="flex flex-col gap-1.5">
+              {/* A plain div, not a wrapping <label>: OtpField labels itself
+                  via the `label` prop (the exact case its doc comment names
+                  this dialog for), so there is one accessible name rather than
+                  an implicit association that would be fragile to a future
+                  refactor un-nesting the input. */}
+              <div className="flex flex-col gap-1.5">
                 <span className="text-[11px] font-semibold uppercase tracking-[.04em] text-ink-muted">
                   {tr('Code à 6 chiffres', '6-digit code')}
                 </span>
                 <OtpField
+                  label={tr('Code à 6 chiffres', '6-digit code')}
                   value={code}
                   onValueChange={(next) => {
                     setCode(next);
                     setError('');
                   }}
+                  onComplete={(value) => {
+                    if (!busy) void submit(undefined, value);
+                  }}
                   length={6}
                   invalid={!!error}
                   describedBy={error ? 'mfa-enrol-error' : undefined}
                 />
-              </label>
+              </div>
 
               {error && (
                 <div
diff --git a/frontend/src/features/auth/__tests__/mfaEnrollmentDialog.test.tsx b/frontend/src/features/auth/__tests__/mfaEnrollmentDialog.test.tsx
new file mode 100644
index 00000000..fa734540
--- /dev/null
+++ b/frontend/src/features/auth/__tests__/mfaEnrollmentDialog.test.tsx
@@ -0,0 +1,149 @@
+// Copyright (c) 2026 OpenDefender Contributors
+// SPDX-License-Identifier: AGPL-3.0-only
+//
+// #751 phase 5 — same auto-submit contract as the AuthScreen enrolment field
+// (see mfaOtpAutoSubmit.test.tsx), plus this dialog's own copy-to-clipboard
+// icon/label swap.
+
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const setupMFA = vi.fn();
+const verifyMFA = vi.fn();
+const invalidateStatus = vi.fn();
+const toastSuccess = vi.fn();
+const toastError = vi.fn();
+
+vi.mock('../authService', () => ({
+  setupMFA: (...a: unknown[]) => setupMFA(...a),
+  verifyMFA: (...a: unknown[]) => verifyMFA(...a),
+}));
+vi.mock('../useMfa', () => ({
+  useInvalidateMFAStatus: () => invalidateStatus,
+}));
+vi.mock('sonner', () => ({
+  toast: {
+    success: (...a: unknown[]) => toastSuccess(...a),
+    error: (...a: unknown[]) => toastError(...a),
+  },
+}));
+
+import { MFAEnrollmentDialog } from '../MFAEnrollmentDialog';
+import { useUIStore } from '../../../store/uiStore';
+
+function renderDialog() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const onClose = vi.fn();
+  const onEnrolled = vi.fn();
+  render(
+    <QueryClientProvider client={qc}>
+      <MFAEnrollmentDialog onClose={onClose} onEnrolled={onEnrolled} />
+    </QueryClientProvider>,
+  );
+  return { onClose, onEnrolled };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  // The store defaults to French (the primary market) — pin English directly
+  // so the aria-label/copy assertions below are deterministic.
+  useUIStore.setState({ lang: 'en' });
+  setupMFA.mockResolvedValue({
+    secret: 'ABCDEF',
+    qr_code: '/9j/rawbase64',
+    backup_codes: ['ABCDEFGH2345'],
+  });
+});
+
+describe('MFAEnrollmentDialog', () => {
+  /* #751 phase 5, stopgap — this dialog is hand-rolled (not the ds Modal) and
+     had no entrance at all before this phase; a real exit transition needs
+     migrating onto Modal, which is its own issue. */
+  it('has the house enter class on both the scrim and the panel', async () => {
+    renderDialog();
+    const dialog = await screen.findByRole('dialog');
+    expect(dialog).toHaveClass('motion-safe:animate-or-rise');
+    expect(dialog.parentElement).toHaveClass('motion-safe:animate-or-fadein');
+  });
+
+  it('has an OtpField labelled by the control itself, not just its wrapping text', async () => {
+    renderDialog();
+    // OtpField's `label` prop sets aria-label directly, so this resolves even
+    // if the surrounding markup is later un-nested from a wrapping <label>.
+    expect(await screen.findByRole('textbox', { name: '6-digit code' })).toBeInTheDocument();
+  });
+
+  it('submits once the sixth digit lands, with no button press', async () => {
+    verifyMFA.mockResolvedValue(undefined);
+    const { onEnrolled } = renderDialog();
+    const user = userEvent.setup();
+
+    const field = await screen.findByRole('textbox', { name: '6-digit code' });
+    await user.click(field);
+    await user.paste('654321');
+
+    await waitFor(() => expect(verifyMFA).toHaveBeenCalledTimes(1));
+    expect(verifyMFA).toHaveBeenCalledWith('654321');
+    await waitFor(() => expect(onEnrolled).toHaveBeenCalled());
+  });
+
+  it('does not fire a second submit while the first is still in flight', async () => {
+    let resolveVerify!: () => void;
+    verifyMFA.mockReturnValue(new Promise<void>((resolve) => (resolveVerify = resolve)));
+    renderDialog();
+    const user = userEvent.setup();
+
+    const field = await screen.findByRole('textbox', { name: '6-digit code' });
+    await user.click(field);
+    await user.paste('654321');
+    await waitFor(() => expect(verifyMFA).toHaveBeenCalledTimes(1));
+
+    await user.click(field);
+    await user.paste('654321');
+
+    resolveVerify();
+    await waitFor(() => expect(invalidateStatus).toHaveBeenCalled());
+    expect(verifyMFA).toHaveBeenCalledTimes(1);
+  });
+
+  it('clears a rejected code’s error as soon as the user edits it', async () => {
+    verifyMFA.mockRejectedValueOnce(new Error('invalid'));
+    renderDialog();
+    const user = userEvent.setup();
+
+    const field = await screen.findByRole('textbox', { name: '6-digit code' });
+    await user.click(field);
+    await user.paste('111111');
+
+    await waitFor(() => expect(screen.getByRole('alert')).toBeInTheDocument());
+
+    // The field is already at its 6-character maxLength, so typing another
+    // digit is a no-op — clear it first so the value actually changes. One
+    // digit is enough to prove the error clears, without completing the code
+    // again and firing a second submit.
+    await user.clear(field);
+    await user.type(field, '2');
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('names the copy button by the result of pressing it, and announces the copy', async () => {
+    renderDialog();
+    const user = userEvent.setup();
+
+    const copyButton = await screen.findByRole('button', { name: 'Copy the key' });
+    // jsdom ships a real Clipboard implementation (backed by an in-memory item
+    // list, not the OS clipboard) that is only reachable once the document has
+    // rendered — spy on its own `writeText` here rather than at module scope.
+    const clipboardWriteText = vi
+      .spyOn(navigator.clipboard, 'writeText')
+      .mockResolvedValue(undefined);
+    await user.click(copyButton);
+
+    expect(clipboardWriteText).toHaveBeenCalledWith('ABCDEF');
+    expect(await screen.findByRole('button', { name: 'Copied' })).toBeInTheDocument();
+    expect(toastSuccess).toHaveBeenCalledWith('Key copied');
+  });
+});
diff --git a/frontend/src/features/auth/__tests__/mfaOtpAutoSubmit.test.tsx b/frontend/src/features/auth/__tests__/mfaOtpAutoSubmit.test.tsx
new file mode 100644
index 00000000..279761eb
--- /dev/null
+++ b/frontend/src/features/auth/__tests__/mfaOtpAutoSubmit.test.tsx
@@ -0,0 +1,130 @@
+// Copyright (c) 2026 OpenDefender Contributors
+// SPDX-License-Identifier: AGPL-3.0-only
+//
+// #751 phase 5 — the MFA enrolment field's `onComplete` submits the form
+// instead of waiting for a separate button press, guarded so a fast
+// paste/edit while the request is in flight cannot fire it twice, and the
+// stale error clears the moment the user edits the code rather than lingering
+// until the next submit.
+
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
+
+const navigate = vi.fn();
+const login = vi.fn();
+const adoptSession = vi.fn();
+const post = vi.fn();
+const setupMFA = vi.fn();
+const verifyMFA = vi.fn();
+const challengeMFA = vi.fn();
+
+vi.mock('react-router', async () => {
+  const actual = await vi.importActual<typeof import('react-router')>('react-router');
+  return { ...actual, useNavigate: () => navigate };
+});
+vi.mock('../../../lib/api', () => ({
+  api: { post: (...a: unknown[]) => post(...a), defaults: { baseURL: '' } },
+}));
+vi.mock('../authService', () => ({
+  setupMFA: (...a: unknown[]) => setupMFA(...a),
+  verifyMFA: (...a: unknown[]) => verifyMFA(...a),
+  challengeMFA: (...a: unknown[]) => challengeMFA(...a),
+  listSessions: vi.fn(),
+  revokeSession: vi.fn(),
+  revokeOtherSessions: vi.fn(),
+}));
+vi.mock('../../../hooks/useAuthStore', () => {
+  const state = {
+    user: undefined,
+    login: (...a: unknown[]) => login(...a),
+    adoptSession: (...a: unknown[]) => adoptSession(...a),
+  };
+  const useAuthStore = (sel?: (s: typeof state) => unknown) => (sel ? sel(state) : state);
+  useAuthStore.getState = () => state;
+  return { useAuthStore };
+});
+
+import { AuthScreen } from '../AuthScreen';
+
+function renderAt(initialView: 'login' | 'register') {
+  return render(
+    <MemoryRouter>
+      <AuthScreen initialView={initialView} />
+    </MemoryRouter>,
+  );
+}
+
+/** Drives a registration all the way to the MFA enrolment field. */
+async function reachEnrolment() {
+  const user = userEvent.setup();
+  login.mockResolvedValue({ status: 'mfa_enrollment_required', mfa_token: 'enrol-token' });
+  renderAt('register');
+  await user.type(screen.getByTestId('register-name'), 'Alix Mensah');
+  await user.type(screen.getByTestId('register-email'), 'alix@example.com');
+  await user.type(screen.getByTestId('register-password'), 'MotDePasse2026!');
+  await user.click(screen.getByTestId('register-submit'));
+  await waitFor(() => expect(setupMFA).toHaveBeenCalled());
+  return { user, input: await screen.findByTestId('mfa-enrol-code') };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  post.mockResolvedValue({ data: {} });
+  setupMFA.mockResolvedValue({
+    secret: 'ABCDEF',
+    qr_code: '/9j/rawbase64',
+    backup_codes: ['ABCDEFGH2345'],
+  });
+});
+
+describe('the MFA enrolment field auto-submits on completion (#751 phase 5)', () => {
+  it('submits once the sixth digit lands, with no button press', async () => {
+    verifyMFA.mockResolvedValue({});
+    const { user, input } = await reachEnrolment();
+
+    await user.click(input);
+    await user.paste('654321');
+
+    await waitFor(() => expect(verifyMFA).toHaveBeenCalledTimes(1));
+    expect(verifyMFA).toHaveBeenCalledWith('654321', 'enrol-token');
+  });
+
+  it('does not fire a second submit while the first is still in flight', async () => {
+    let resolveVerify!: (v: unknown) => void;
+    verifyMFA.mockReturnValue(new Promise((resolve) => (resolveVerify = resolve)));
+    const { user, input } = await reachEnrolment();
+
+    await user.click(input);
+    await user.paste('654321');
+    await waitFor(() => expect(verifyMFA).toHaveBeenCalledTimes(1));
+
+    // A re-render (or a caret re-focus firing another onValueChange with the
+    // unchanged value) must not queue a second request while `busy` is true.
+    await user.click(input);
+    await user.paste('654321');
+
+    resolveVerify({});
+    await waitFor(() => expect(navigate).toHaveBeenCalled());
+    expect(verifyMFA).toHaveBeenCalledTimes(1);
+  });
+
+  it('clears a rejected code’s error as soon as the user edits it', async () => {
+    verifyMFA.mockRejectedValueOnce(new Error('invalid'));
+    const { user, input } = await reachEnrolment();
+
+    await user.click(input);
+    await user.paste('111111');
+
+    await waitFor(() => expect(screen.getByRole('alert')).toBeInTheDocument());
+
+    // Shake remounts its children on a new errorKey (see Shake.tsx), so the
+    // field just submitted is a detached node now — re-query the live one.
+    // jsdom also has no real layout, so a click-then-Backspace can land the
+    // caret anywhere; clearing is the unambiguous way to trigger onValueChange.
+    await user.clear(screen.getByTestId('mfa-enrol-code'));
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/features/governance/GovernancePage.tsx b/frontend/src/features/governance/GovernancePage.tsx
index ea8384c0..dbf2b6a7 100644
--- a/frontend/src/features/governance/GovernancePage.tsx
+++ b/frontend/src/features/governance/GovernancePage.tsx
@@ -1506,7 +1506,7 @@ function ModalShell({
   const tr = (fr: string, en: string) => (lang === 'fr' ? fr : en);
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 motion-safe:animate-or-fadein"
       style={{ background: 'var(--surface-overlay)' }}
       onClick={onClose}
     >
@@ -1514,7 +1514,12 @@ function ModalShell({
         role="dialog"
         aria-modal="true"
         aria-labelledby="governance-modal-title"
-        className="or-scalein w-full max-w-lg flex flex-col rounded-[14px]"
+        /* Stopgap (#751 phase 5): `or-scalein` had no matching CSS rule, so
+           this panel popped in with no motion at all. The house enter class
+           is the fix here, not an exit — this hand-rolled dialog has no exit
+           timer, same as before. Moving it onto the ds `Modal` (with its own
+           `data-state`-driven exit, see Modal.tsx) is its own issue. */
+        className="motion-safe:animate-or-rise w-full max-w-lg flex flex-col rounded-[14px]"
         style={{
           maxHeight: '90vh',
           background: 'var(--surface-2)',
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 37e48934..c37aec24 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -636,44 +636,61 @@ layer(base);
   padding-block: var(--den-cell-y) !important;
 }
 
-/* ── Toasts (#751 phase 4) — restyle sonner, don't replace it ────────────
-   Sonner ships its own unlayered stylesheet (injected at runtime, outside any
-   @layer), so a Tailwind utility living in @layer utilities would lose to it
-   regardless of source order — cascade layers always lose to unlayered rules.
-   These overrides are therefore plain CSS too, with one extra class
-   (`.or-toast` etc., via ThemedToaster's `toastOptions.classNames`) added to
-   push specificity above sonner's own `[data-sonner-toast][data-styled='true']`
-   (0,2,0) so ours (0,3,0) wins outright, no !important, no ordering games.
+/* Modal / Drawer exit (#751 phase 5) — plain CSS, not a Tailwind
+   `data-[state=…]:` variant. A browser plays the transition-duration/-easing
+   of the state being transitioned INTO, never the one being left, so the
+   asymmetric-duration trick (feedback_css-motion-tricks.md) puts the EXIT
+   values on the base/closed rule and lets `[data-state='open']` override them
+   for ENTER. Writing this as `data-[state=open]:duration-*` utilities instead
+   would also risk the duration-variant trap: a variant-scoped
+   `transition-[...]` re-emits Tailwind's own 150ms default and beats a
+   base-level `duration-*` utility (.claude/agent-memory/frontend-react).
+   Reduced motion needs no special case of its own — the global kill switch
+   above already zeroes every `transition`, so a `data-state` flip lands
+   instantly either way. */
+@layer components {
+  .or-scrim {
+    opacity: 0;
+    transition: opacity var(--motion-exit);
+  }
+  .or-scrim[data-state='open'] {
+    opacity: 1;
+    transition: opacity var(--motion-enter);
+  }
 
-   Only surface (background/border/radius/shadow) and type/text sizing are
-   touched. `transform`/`opacity` are deliberately left alone: sonner computes
-   them from --y, which also encodes the multi-toast stack offset (lift,
-   gap, expanded state) — overwriting that value to get a flat "8px rise"
-   would break the stack, not just the motion. What IS overridden is the
-   DURATION/EASING those properties transition on, via --motion-enter/-exit
-   in place of sonner's flat 400ms — see .or-toast below. */
-[data-sonner-toast][data-styled='true'].or-toast {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: var(--elev-3);
-}
-[data-sonner-toast].or-toast {
-  transition-duration: var(--dur-base);
-  transition-timing-function: var(--ease-out);
-}
-[data-sonner-toast][data-removed='true'].or-toast {
-  transition-duration: var(--dur-fast);
-  transition-timing-function: var(--ease-in);
-}
-[data-sonner-toast][data-styled='true'].or-toast [data-title].or-toast-title {
-  font-size: var(--text-base);
-  font-weight: 600;
-}
-[data-sonner-toast][data-styled='true'].or-toast [data-description].or-toast-description {
-  font-size: var(--text-sm);
-  color: var(--fg-secondary);
-}
-[data-sonner-toast][data-styled='true'].or-toast [data-icon].or-toast-icon {
-  margin-top: 1px;
+  .or-modal-panel {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(8px);
+    transition:
+      opacity var(--motion-exit),
+      transform var(--motion-exit);
+  }
+  .or-modal-panel[data-state='open'] {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+    transition:
+      opacity var(--motion-enter),
+      transform var(--motion-enter);
+  }
+
+  /* Drawer exit is --dur-base/--ease-in, not --motion-exit (--dur-fast) — see
+     the MOTION comment in Drawer.tsx for why the two directions differ. */
+  .or-drawer-panel {
+    pointer-events: none;
+    transform: translateX(100%);
+    transition: transform var(--dur-base) var(--ease-in);
+  }
+  .or-drawer-panel[data-side='left'] {
+    transform: translateX(-100%);
+  }
+  /* Declared after [data-side='left'] so it wins the tie on `transform`
+     regardless of which side the panel opens from — both sides converge on
+     translateX(0) when open. */
+  .or-drawer-panel[data-state='open'] {
+    pointer-events: auto;
+    transform: translateX(0);
+    transition: transform var(--motion-panel);
+  }
 }
diff --git a/frontend/src/shared/ds/Drawer.tsx b/frontend/src/shared/ds/Drawer.tsx
index 2ae76594..ec9eb36b 100644
--- a/frontend/src/shared/ds/Drawer.tsx
+++ b/frontend/src/shared/ds/Drawer.tsx
@@ -20,9 +20,18 @@
  *
  * SIZES     sm 380 | md 480 (default) | lg 620 | xl 780
  *
- * MOTION    Slides in from its edge over --dur-panel. Slide is the right verb
- *           here precisely because it says where the thing came from and where
- *           it will go back to — the continuity a modal's fade cannot express.
+ * MOTION    Slides in from its edge on --motion-panel (--dur-panel), and back
+ *           out on the slower --dur-base/--ease-in — deliberately not the
+ *           same pair reversed: a panel that has just travelled the width of
+ *           the viewport reads as yanked off screen on the fast timing a
+ *           small dialog exits on. Slide is the right verb here precisely
+ *           because it says where the thing came from and where it will go
+ *           back to — the continuity a modal's fade cannot express.
+ *
+ *           Same mount/exit contract as Modal (#751 phase 5): `open` going
+ *           false does not unmount the panel, it stays at
+ *           `data-state="closed"` until `useExitTimer` reports it gone, so a
+ *           reopen mid-exit reverses the transition instead of restarting one.
  *
  * WIDE SCREENS  At >=1920px a drawer marked `docked` stops overlaying and sits
  *           beside the list instead (the .or-md-* rules in index.css). On a
@@ -30,15 +39,18 @@
  *           a waste of the room.
  *
  * A11Y      Identical contract to Modal — trap, restore, Escape, scroll lock —
- *           because it is the same hook. A drawer is a dialog to assistive
- *           technology, so it says so.
+ *           because it is the same hook, keyed on `open` (not the exit timer)
+ *           so it releases at the start of the close. A drawer is a dialog to
+ *           assistive technology, so it says so.
  */
 
-import { useId, useRef, type ReactNode } from 'react';
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import { cn } from './cn';
 import { useDismissableLayer } from './useDismissableLayer';
+import { useExitTimer } from './useExitTimer';
+import { DRAWER_EXIT_MS } from './overlayMotion';
 import { Button } from './Button';
 
 export type DrawerSide = 'left' | 'right';
@@ -85,14 +97,27 @@ export function Drawer({
 
   useDismissableLayer(panelRef, { open, onClose });
 
-  if (!open) return null;
+  // Same contract as Modal: stays mounted through its exit, `data-state`
+  // drives the CSS, closing is synchronous and opening is deferred a frame —
+  // see Modal.tsx for the full reasoning, identical here.
+  const mounted = useExitTimer(open, DRAWER_EXIT_MS);
+  const [state, setState] = useState<'open' | 'closed'>('closed');
+  if (!open && state === 'open') setState('closed');
+  useEffect(() => {
+    if (!open) return;
+    const frame = requestAnimationFrame(() => setState('open'));
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+
+  if (!mounted) return null;
 
   return createPortal(
     <div
       className={cn(
-        'fixed inset-0 z-drawer flex motion-safe:animate-or-fadein',
+        'or-scrim fixed inset-0 z-drawer flex',
         side === 'right' ? 'justify-end' : 'justify-start',
       )}
+      data-state={state}
       style={{
         background: 'var(--surface-overlay)',
         backdropFilter: 'blur(var(--overlay-blur))',
@@ -109,13 +134,13 @@ export function Drawer({
         aria-labelledby={titleId}
         aria-describedby={subtitleId}
         tabIndex={-1}
+        data-state={state}
+        data-side={side}
         className={cn(
-          'flex h-full flex-col bg-surface-1 shadow-overlay outline-none',
+          'or-drawer-panel flex h-full flex-col bg-surface-1 shadow-overlay outline-none',
           side === 'right' ? 'border-l' : 'border-r',
           'border-default',
           SIZE[size],
-          'motion-safe:animate-or-slidein',
-          side === 'left' && 'motion-safe:[animation-name:or-slidein-left]',
           className,
         )}
       >
diff --git a/frontend/src/shared/ds/Modal.tsx b/frontend/src/shared/ds/Modal.tsx
index 195e4a05..5f14da4a 100644
--- a/frontend/src/shared/ds/Modal.tsx
+++ b/frontend/src/shared/ds/Modal.tsx
@@ -16,25 +16,40 @@
  *
  * SIZES     sm 380 | md 520 (default) | lg 720 | xl 960
  *
- * MOTION    Scrim fades; panel fades and rises 8px, both on --motion-enter.
- *           The panel does NOT scale from 0.9 — a dialog that zooms reads as a
- *           notification. Under prefers-reduced-motion it appears, in place.
+ * MOTION    Scrim fades; panel fades and rises 8px, on --motion-enter in and
+ *           --motion-exit out. The panel does NOT scale from 0.9 — a dialog
+ *           that zooms reads as a notification. Under prefers-reduced-motion
+ *           it appears, in place (index.css's global kill switch zeroes every
+ *           transition, so the state flip below lands instantly).
+ *
+ *           `open` going false does not unmount the panel: it stays mounted
+ *           at `data-state="closed"` for its exit transition and is only
+ *           removed once `useExitTimer` reports it gone (#751 phase 5 — the
+ *           previous `if (!open) return null` cut every close instantly,
+ *           which is why a create/edit modal that closed on mutation success
+ *           never had an exit to play). Driving the CSS off `data-state`
+ *           rather than a mount/unmount keyframe means a reopen mid-exit
+ *           reverses the same transition instead of restarting one.
  *
  * A11Y      role="dialog" aria-modal, labelled by its title and described by
  *           its subtitle; focus trapped, restored on close; Escape closes;
  *           the page behind is frozen. All of that comes from
- *           useDismissableLayer, so it is identical in every dialog.
+ *           useDismissableLayer, keyed on `open` (not the exit timer) so the
+ *           trap releases and focus returns at the START of the close, not
+ *           after the panel finishes fading out.
  *
  * Rendered in a portal to document.body so no ancestor's overflow, transform
  * or stacking context can clip it — the reason "the dropdown is cut off inside
  * the drawer" happens.
  */
 
-import { useId, useRef, type ReactNode } from 'react';
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import { cn } from './cn';
 import { useDismissableLayer } from './useDismissableLayer';
+import { useExitTimer } from './useExitTimer';
+import { MODAL_EXIT_MS } from './overlayMotion';
 import { Button } from './Button';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -93,11 +108,28 @@ export function Modal({
 
   useDismissableLayer(panelRef, { open, onClose, closeOnEscape: dismissable });
 
-  if (!open) return null;
+  // Stays mounted through its own exit transition instead of cutting the
+  // instant `open` goes false.
+  const mounted = useExitTimer(open, MODAL_EXIT_MS);
+  // `data-state`, not `open` directly, drives the CSS: closing is applied
+  // synchronously (same render `open` goes false, matching
+  // useDismissableLayer's own immediate focus release), while opening is
+  // deferred a frame so the browser paints the closed state at least once —
+  // without that the enter transition has nothing to animate from.
+  const [state, setState] = useState<'open' | 'closed'>('closed');
+  if (!open && state === 'open') setState('closed');
+  useEffect(() => {
+    if (!open) return;
+    const frame = requestAnimationFrame(() => setState('open'));
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+
+  if (!mounted) return null;
 
   return createPortal(
     <div
-      className="fixed inset-0 z-modal flex items-center justify-center p-4 motion-safe:animate-or-fadein"
+      className="or-scrim fixed inset-0 z-modal flex items-center justify-center p-4"
+      data-state={state}
       style={{
         background: 'var(--surface-overlay)',
         backdropFilter: 'blur(var(--overlay-blur))',
@@ -118,10 +150,10 @@ export function Modal({
         aria-labelledby={titleId}
         aria-describedby={subtitleId}
         tabIndex={-1}
+        data-state={state}
         className={cn(
-          'flex w-full flex-col overflow-hidden bg-surface-2 shadow-overlay outline-none',
+          'or-modal-panel flex w-full flex-col overflow-hidden bg-surface-2 shadow-overlay outline-none',
           'rounded-(--modal-radius) border border-default',
-          'motion-safe:animate-or-rise',
           'max-h-(--modal-max-h)',
           SIZE[size],
           className,
diff --git a/frontend/src/shared/ds/OtpField.tsx b/frontend/src/shared/ds/OtpField.tsx
index 4e4a4429..d1eabf54 100644
--- a/frontend/src/shared/ds/OtpField.tsx
+++ b/frontend/src/shared/ds/OtpField.tsx
@@ -185,7 +185,11 @@ export const OtpField = forwardRef<HTMLInputElement, OtpFieldProps>(function Otp
                   'flex w-10 items-center justify-center rounded-md border',
                   'h-(--control-h-lg) bg-surface-1',
                   'font-mono text-base tabular-nums text-fg-primary',
-                  'transition-[border-color] duration-fast ease-out',
+                  /* --motion-hover (border-color + box-shadow together): the
+                     active ring now SLIDES from one box to the next instead
+                     of jumping, because both properties settle on the same
+                     transition rather than only the border being animated. */
+                  'transition-[border-color,box-shadow] duration-fast ease-out',
                   status === 'invalid' ? 'border-danger' : 'border-control',
                   /* The focus ring is drawn on the SEGMENT, not the input: the
                      input is transparent and spans all of them, so a ring on it
@@ -195,7 +199,22 @@ export const OtpField = forwardRef<HTMLInputElement, OtpFieldProps>(function Otp
                   disabled && 'opacity-55',
                 )}
               >
-                {char}
+                {/* Always rendered, even when empty, so filling the segment is
+                    a transition rather than the character popping in. Fades
+                    on --motion-press (90ms): fast enough that typing quickly
+                    never feels like it is waiting on its own animation, and
+                    deleting a character is instant either way — reduced
+                    motion aside, opacity 1->0 has no visible transition on a
+                    glyph that is disappearing in the same frame its box goes
+                    empty. */}
+                <span
+                  className={cn(
+                    'transition-opacity duration-instant ease-out',
+                    char ? 'opacity-100' : 'opacity-0',
+                  )}
+                >
+                  {char}
+                </span>
               </span>
             );
           })}
diff --git a/frontend/src/shared/ds/__tests__/overlayMotionTokens.test.ts b/frontend/src/shared/ds/__tests__/overlayMotionTokens.test.ts
new file mode 100644
index 00000000..3eca7819
--- /dev/null
+++ b/frontend/src/shared/ds/__tests__/overlayMotionTokens.test.ts
@@ -0,0 +1,32 @@
+// Copyright (c) 2026 OpenDefender Contributors
+// SPDX-License-Identifier: Apache-2.0
+//
+// #751 phase 5 — MODAL_EXIT_MS and DRAWER_EXIT_MS are hand-copied ms literals
+// that claim to match --dur-fast / --dur-base (src/styles/primitives.css).
+// Nothing enforces that at compile time, so a later change to either token
+// would silently desync the exit timer from the CSS transition it is meant
+// to outlast. This reads the real tokens from disk and pins both constants to
+// them — the same convention exitTimerTokens.test.ts established in phase 4.
+
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, it, expect } from 'vitest';
+
+import { MODAL_EXIT_MS, DRAWER_EXIT_MS } from '../overlayMotion';
+
+function tokenMs(name: string): number {
+  const css = readFileSync(path.resolve(__dirname, '../../../styles/primitives.css'), 'utf8');
+  const match = css.match(new RegExp(`--${name}:\\s*([\\d.]+)ms`));
+  if (!match) throw new Error(`--${name} not found in primitives.css — did the token get renamed?`);
+  return Number(match[1]);
+}
+
+describe('overlay exit-timer constants track their CSS tokens (#751 phase 5)', () => {
+  it('MODAL_EXIT_MS equals --dur-fast, which .or-modal-panel exits on', () => {
+    expect(MODAL_EXIT_MS).toBe(tokenMs('dur-fast'));
+  });
+
+  it('DRAWER_EXIT_MS equals --dur-base, which .or-drawer-panel exits on', () => {
+    expect(DRAWER_EXIT_MS).toBe(tokenMs('dur-base'));
+  });
+});
diff --git a/frontend/src/shared/ds/__tests__/primitives.test.tsx b/frontend/src/shared/ds/__tests__/primitives.test.tsx
index 8ae3a9c1..ddac781e 100644
--- a/frontend/src/shared/ds/__tests__/primitives.test.tsx
+++ b/frontend/src/shared/ds/__tests__/primitives.test.tsx
@@ -31,10 +31,40 @@ import { Shake } from '../Shake';
 import { useSuccessFeedback } from '../useSuccessFeedback';
 import { Modal } from '../Modal';
 import { Drawer } from '../Drawer';
+import { MODAL_EXIT_MS, DRAWER_EXIT_MS } from '../overlayMotion';
 import { TabPanel, Tabs } from '../Tabs';
 import { PermissionDenied } from '../States';
 import { categorical, seriesColor, severity, chartAccessibleProps } from '../chart';
 
+/**
+ * Switches `window.matchMedia` to report `prefers-reduced-motion: reduce`,
+ * for the "unmounts at once" exit-timer tests, and returns a function that
+ * puts it back.
+ *
+ * Not `vi.spyOn(...).mockRestore()`: the base mock in src/test/setup.ts is
+ * itself a `vi.fn().mockImplementation(...)`, and restoring a spy wrapped
+ * around an already-mocked function clears that implementation rather than
+ * bringing it back — every test after the first one to do this then got
+ * `window.matchMedia(...)` returning `undefined`. Saving and reassigning the
+ * reference directly sidesteps that.
+ */
+function withReducedMotion(): () => void {
+  const original = window.matchMedia;
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches: query.includes('reduce'),
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })) as typeof window.matchMedia;
+  return () => {
+    window.matchMedia = original;
+  };
+}
+
 /* ------------------------------------------------------------------ Button -- */
 
 describe('Button', () => {
@@ -502,6 +532,85 @@ describe('Modal', () => {
     await user.keyboard('{Escape}');
     expect(document.body.style.overflow).not.toBe('hidden');
   });
+
+  /* #751 phase 5 — the previous `if (!open) return null` cut every close
+     instantly, so a create/edit modal that closed on mutation success never
+     had an exit to play. */
+  it('stays mounted at data-state="closed" after close, and unmounts once the exit timer fires', () => {
+    vi.useFakeTimers();
+    try {
+      render(<ModalHarness />);
+      fireEvent.click(screen.getByRole('button', { name: 'Open dialog' }));
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.click(within(dialog).getByRole('button', { name: /close/i }));
+
+      expect(screen.getByRole('dialog')).toHaveAttribute('data-state', 'closed');
+
+      act(() => {
+        vi.advanceTimersByTime(MODAL_EXIT_MS - 1);
+      });
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      act(() => {
+        vi.advanceTimersByTime(1);
+      });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('unmounts at once under prefers-reduced-motion, with no lingering exit timer', () => {
+    vi.useFakeTimers();
+    const restoreMatchMedia = withReducedMotion();
+    try {
+      render(<ModalHarness />);
+      fireEvent.click(screen.getByRole('button', { name: 'Open dialog' }));
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.click(within(dialog).getByRole('button', { name: /close/i }));
+      expect(screen.getByRole('dialog')).toHaveAttribute('data-state', 'closed');
+
+      // Reduced motion collapses the exit timer to 0 — no wait needed for the
+      // fake clock to reach it, only for the already-queued timer to flush.
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    } finally {
+      restoreMatchMedia();
+      vi.useRealTimers();
+    }
+  });
+
+  it('reopening mid-exit reverses the same panel instead of restarting a new one', () => {
+    vi.useFakeTimers();
+    try {
+      render(<ModalHarness />);
+      const trigger = screen.getByRole('button', { name: 'Open dialog' });
+      fireEvent.click(trigger);
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.click(within(dialog).getByRole('button', { name: /close/i }));
+      expect(dialog).toHaveAttribute('data-state', 'closed');
+
+      // Reopen before MODAL_EXIT_MS elapses.
+      fireEvent.click(trigger);
+
+      // Same DOM node throughout — the close was reversed, not remounted.
+      expect(screen.getByRole('dialog')).toBe(dialog);
+
+      // The exit timer that was already queued must not unmount a dialog
+      // that is open again by the time it fires.
+      act(() => {
+        vi.advanceTimersByTime(MODAL_EXIT_MS + 10);
+      });
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });
 
 /* ------------------------------------------------------------------ Drawer -- */
@@ -531,8 +640,136 @@ describe('Drawer', () => {
     expect(screen.getByRole('dialog', { name: 'web-prod-01' })).toBeInTheDocument();
 
     await user.keyboard('{Escape}');
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    // Focus returns at the start of the close (useDismissableLayer releases
+    // on `open`, not on the exit timer) — the panel itself lingers a beat
+    // longer for its exit transition, see the tests below.
     expect(document.activeElement).toBe(trigger);
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+
+  /* #751 phase 5 — same contract as Modal, on the drawer's own exit timing
+     (--dur-base, not --motion-exit's --dur-fast). */
+  it('stays mounted at data-state="closed" after close, and unmounts once the exit timer fires', () => {
+    vi.useFakeTimers();
+    try {
+      function Harness() {
+        const [open, setOpen] = useState(false);
+        return (
+          <>
+            <button type="button" onClick={() => setOpen(true)}>
+              Open asset
+            </button>
+            <Drawer
+              open={open}
+              onClose={() => setOpen(false)}
+              title="web-prod-01"
+              subtitle="Server"
+            >
+              <p>Detail</p>
+            </Drawer>
+          </>
+        );
+      }
+      render(<Harness />);
+      fireEvent.click(screen.getByRole('button', { name: 'Open asset' }));
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.click(within(dialog).getByRole('button', { name: /close/i }));
+      expect(screen.getByRole('dialog')).toHaveAttribute('data-state', 'closed');
+
+      act(() => {
+        vi.advanceTimersByTime(DRAWER_EXIT_MS - 1);
+      });
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      act(() => {
+        vi.advanceTimersByTime(1);
+      });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('unmounts at once under prefers-reduced-motion', () => {
+    vi.useFakeTimers();
+    const restoreMatchMedia = withReducedMotion();
+    try {
+      function Harness() {
+        const [open, setOpen] = useState(false);
+        return (
+          <>
+            <button type="button" onClick={() => setOpen(true)}>
+              Open asset
+            </button>
+            <Drawer
+              open={open}
+              onClose={() => setOpen(false)}
+              title="web-prod-01"
+              subtitle="Server"
+            >
+              <p>Detail</p>
+            </Drawer>
+          </>
+        );
+      }
+      render(<Harness />);
+      fireEvent.click(screen.getByRole('button', { name: 'Open asset' }));
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.click(within(dialog).getByRole('button', { name: /close/i }));
+      expect(screen.getByRole('dialog')).toHaveAttribute('data-state', 'closed');
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    } finally {
+      restoreMatchMedia();
+      vi.useRealTimers();
+    }
+  });
+
+  it('reopening mid-exit reverses the same panel instead of restarting a new one', () => {
+    vi.useFakeTimers();
+    try {
+      function Harness() {
+        const [open, setOpen] = useState(false);
+        return (
+          <>
+            <button type="button" onClick={() => setOpen(true)}>
+              Open asset
+            </button>
+            <Drawer
+              open={open}
+              onClose={() => setOpen(false)}
+              title="web-prod-01"
+              subtitle="Server"
+            >
+              <p>Detail</p>
+            </Drawer>
+          </>
+        );
+      }
+      render(<Harness />);
+      const trigger = screen.getByRole('button', { name: 'Open asset' });
+      fireEvent.click(trigger);
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.click(within(dialog).getByRole('button', { name: /close/i }));
+      expect(dialog).toHaveAttribute('data-state', 'closed');
+
+      // Reopen before DRAWER_EXIT_MS elapses: same node, and the timer that
+      // was already queued must not unmount a drawer that is open again.
+      fireEvent.click(trigger);
+      expect(screen.getByRole('dialog')).toBe(dialog);
+      act(() => {
+        vi.advanceTimersByTime(DRAWER_EXIT_MS + 10);
+      });
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
   });
 });
 
diff --git a/frontend/src/shared/ds/index.ts b/frontend/src/shared/ds/index.ts
index a0d25fc6..1962ce57 100644
--- a/frontend/src/shared/ds/index.ts
+++ b/frontend/src/shared/ds/index.ts
@@ -78,6 +78,7 @@ export {
   type MatrixBucket,
 } from './RiskMatrix';
 export { useDismissableLayer } from './useDismissableLayer';
+export { useSuccessFeedback } from './useSuccessFeedback';
 export { useExitTimer } from './useExitTimer';
 
 /** Visualisation contract — palette, axes, tooltip, graph. */
diff --git a/frontend/src/shared/ds/overlayMotion.ts b/frontend/src/shared/ds/overlayMotion.ts
new file mode 100644
index 00000000..dbc3d9d3
--- /dev/null
+++ b/frontend/src/shared/ds/overlayMotion.ts
@@ -0,0 +1,30 @@
+// Copyright (c) 2026 OpenDefender Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Modal and Drawer's exit-timer durations (#751 phase 5).
+ *
+ * `useExitTimer` keeps a panel mounted until a plain `setTimeout` fires, and
+ * has no way to read a CSS custom property — so these hand-copied literals
+ * have to match, by value, the exit transition each panel's own class
+ * declares in index.css (`.or-modal-panel` / `.or-drawer-panel`). A
+ * drift-guard test (`__tests__/overlayMotionTokens.test.ts`) reads the real
+ * tokens from disk and fails if either literal falls out of sync — the same
+ * convention `notifMotion.ts` established in phase 4.
+ *
+ * Kept out of Modal.tsx/Drawer.tsx rather than exported alongside the
+ * component: `react-refresh/only-export-components` requires a component
+ * file to export only the component (plus types, which are erased), so a
+ * runtime constant needs its own module.
+ */
+
+/** Matches --dur-fast (src/styles/primitives.css) — Modal's exit, --motion-exit. */
+export const MODAL_EXIT_MS = 120;
+
+/**
+ * Matches --dur-base (src/styles/primitives.css) — Drawer's exit. Slower than
+ * the modal's --motion-exit (--dur-fast) on purpose: a panel that has just
+ * travelled the width of the viewport reads as yanked off screen if it
+ * disappears on the same fast timing as a small dialog's fade.
+ */
+export const DRAWER_EXIT_MS = 180;
diff --git a/frontend/src/shared/uiStrings.ts b/frontend/src/shared/uiStrings.ts
index 7d19b4ef..6542cf06 100644
--- a/frontend/src/shared/uiStrings.ts
+++ b/frontend/src/shared/uiStrings.ts
@@ -227,6 +227,10 @@ const fr = {
   act_emptyNoneDesc:
     'Au fur et à mesure que des enregistrements sont créés et modifiés, ce qui a été fait apparaît ici.',
   act_clearFilter: 'Effacer le filtre',
+  // --- #751 phase 5: the theme toggle's name follows the state, naming the
+  // result of pressing it rather than a static "toggle theme" ---
+  themeToLight: 'Passer au thème clair',
+  themeToDark: 'Passer au thème sombre',
 };
 
 const en: typeof fr = {
@@ -445,6 +449,8 @@ const en: typeof fr = {
   act_emptyFilteredDesc: 'No changes of this kind are visible to you in this period.',
   act_emptyNoneDesc: 'As people create and change records, what they did appears here.',
   act_clearFilter: 'Clear filter',
+  themeToLight: 'Switch to light theme',
+  themeToDark: 'Switch to dark theme',
 };
 
 export type UIStrings = typeof fr;