diff --git a/apps/api/app/Http/Controllers/ReportController.php b/apps/api/app/Http/Controllers/ReportController.php
index 9326d7d..85c6396 100644
--- a/apps/api/app/Http/Controllers/ReportController.php
+++ b/apps/api/app/Http/Controllers/ReportController.php
@@ -191,6 +191,31 @@ public function previewPdf(Request $request)
         return $this->generatePdfResponse($reportName, $result['columns'], $result['groups'], $ast['group_by'] ?? null, $filename, $layout);
     }
 
+    /**
+     * Same document as the PDF export, served as HTML so the print preview can show
+     * and print exactly what the PDF contains.
+     */
+    public function previewHtml(Request $request)
+    {
+        $validated = $request->validate([
+            'table_id' => 'required|uuid|exists:tables,id',
+            'name' => 'sometimes|required|string|max:255',
+            'query' => 'nullable|array',
+            'layout' => 'nullable|array',
+        ]);
+
+        $table = Table::findOrFail($validated['table_id']);
+        $reportName = $validated['name'] ?? 'Rapport temporaire';
+        $ast = $validated['query'] ?? [];
+        $layout = $validated['layout'] ?? null;
+
+        $result = $this->queryService->execute($table, $ast, null, null, $layout);
+
+        $html = $this->renderReportHtml($reportName, $result['columns'], $result['groups'], $ast['group_by'] ?? null, $layout);
+
+        return response($html, 200, ['Content-Type' => 'text/html; charset=UTF-8']);
+    }
+
     public function previewCsv(Request $request)
     {
         $validated = $request->validate([
@@ -209,14 +234,18 @@ public function previewCsv(Request $request)
         return $this->generateCsvResponse($result['columns'], $result['groups'], $ast['group_by'] ?? null, $filename, $layout);
     }
 
-    private function generatePdfResponse(string $reportName, array $columns, array $groups, ?string $groupBy, string $filename, ?array $layout = null)
+    /**
+     * The single rendering of a report document. The PDF export and the on-screen
+     * print preview both go through here, so what is previewed is what is printed.
+     */
+    private function renderReportHtml(string $reportName, array $columns, array $groups, ?string $groupBy, ?array $layout = null): string
     {
         $view = null;
         if ($layout && isset($layout['view_id'])) {
             $view = View::with('table.fields')->find($layout['view_id']);
         }
 
-        $html = view('reports.pdf', [
+        return view('reports.pdf', [
             'reportName' => $reportName,
             'columns' => $columns,
             'groups' => $groups,
@@ -224,6 +253,11 @@ private function generatePdfResponse(string $reportName, array $columns, array $
             'layout' => $layout,
             'view' => $view,
         ])->render();
+    }
+
+    private function generatePdfResponse(string $reportName, array $columns, array $groups, ?string $groupBy, string $filename, ?array $layout = null)
+    {
+        $html = $this->renderReportHtml($reportName, $columns, $groups, $groupBy, $layout);
 
         $dompdf = new Dompdf([
             'isHtml5ParserEnabled' => true,
diff --git a/apps/api/routes/api.php b/apps/api/routes/api.php
index ad9640c..f4827f6 100644
--- a/apps/api/routes/api.php
+++ b/apps/api/routes/api.php
@@ -34,6 +34,7 @@
         Route::post('reports/preview', [ReportController::class, 'preview']);
         Route::post('reports/preview/pdf', [ReportController::class, 'previewPdf']);
         Route::post('reports/preview/csv', [ReportController::class, 'previewCsv']);
+        Route::post('reports/preview/html', [ReportController::class, 'previewHtml']);
         Route::get('reports/{report}/export/pdf', [ReportController::class, 'exportPdf']);
         Route::get('reports/{report}/export/csv', [ReportController::class, 'exportCsv']);
         Route::match(['get', 'post'], 'reports/{report}/execute', [ReportController::class, 'execute']);
diff --git a/apps/api/tests/Feature/ReportFeatureTest.php b/apps/api/tests/Feature/ReportFeatureTest.php
index 17ad79b..459f78d 100644
--- a/apps/api/tests/Feature/ReportFeatureTest.php
+++ b/apps/api/tests/Feature/ReportFeatureTest.php
@@ -432,3 +432,87 @@ function createAuthenticatedUser()
     expect($headerLine)->toBe(['Ville', 'Nom']);
     expect(array_count_values($headerLine)['Ville'])->toBe(1);
 });
+
+test('print preview html is the same document the pdf export renders', function () {
+    $setup = createAuthenticatedUser();
+    $user = $setup['user'];
+    $table = $setup['table'];
+
+    Field::factory()->create(['table_id' => $table->id, 'name' => 'Ville', 'type' => 'text']);
+    Field::factory()->create(['table_id' => $table->id, 'name' => 'Nom', 'type' => 'text']);
+
+    // More records than a preview page holds, so pagination would be visible.
+    foreach (range(1, 25) as $i) {
+        Record::create([
+            'table_id' => $table->id,
+            'data' => ['Ville' => 'Québec', 'Nom' => "Tremblay {$i}"],
+            'version' => 1,
+        ]);
+    }
+
+    $payload = [
+        'table_id' => $table->id,
+        'name' => 'Rapport imprimable',
+        'query' => ['select' => ['Ville', 'Nom'], 'group_by' => 'Ville'],
+        'layout' => ['fields' => [
+            ['name' => 'Ville', 'visible' => true, 'order' => 1],
+            ['name' => 'Nom', 'visible' => true, 'order' => 2],
+        ]],
+    ];
+
+    $html = $this->actingAs($user)->postJson('/api/v1/reports/preview/html', $payload);
+    $html->assertStatus(200);
+    $html->assertHeader('Content-Type', 'text/html; charset=UTF-8');
+
+    $body = $html->getContent();
+    expect($body)->toContain('Rapport imprimable');
+    // The document carries its own styles, so the iframe renders it standalone.
+    expect($body)->toContain('report-table');
+
+    // Not paginated: the preview shows every record the PDF would contain. The old
+    // JSX preview rendered only the current preview page, so the two disagreed.
+    expect($body)->toContain('Tremblay 1');
+    expect($body)->toContain('Tremblay 25');
+
+    $pdf = $this->actingAs($user)->postJson('/api/v1/reports/preview/pdf', $payload);
+    $pdf->assertStatus(200);
+    expect($pdf->headers->get('Content-Type'))->toBe('application/pdf');
+});
+
+test('print preview html honours the selected card view', function () {
+    $setup = createAuthenticatedUser();
+    $user = $setup['user'];
+    $table = $setup['table'];
+
+    $ville = Field::factory()->create(['table_id' => $table->id, 'name' => 'Ville', 'type' => 'text']);
+    $nom = Field::factory()->create(['table_id' => $table->id, 'name' => 'Nom', 'type' => 'text']);
+
+    $view = View::factory()->create([
+        'table_id' => $table->id,
+        'type' => 'card',
+        'config' => ['columns' => [[$ville->id], [$nom->id]]],
+    ]);
+
+    Record::create([
+        'table_id' => $table->id,
+        'data' => ['Ville' => 'Québec', 'Nom' => 'Tremblay'],
+        'version' => 1,
+    ]);
+
+    $response = $this->actingAs($user)->postJson('/api/v1/reports/preview/html', [
+        'table_id' => $table->id,
+        'name' => 'Rapport carte',
+        'query' => ['select' => ['Ville', 'Nom']],
+        'layout' => [
+            'fields' => [
+                ['name' => 'Ville', 'visible' => true, 'order' => 1],
+                ['name' => 'Nom', 'visible' => true, 'order' => 2],
+            ],
+            'view_id' => $view->id,
+        ],
+    ]);
+
+    $response->assertStatus(200);
+    // Card markup, not the fallback table.
+    expect($response->getContent())->toContain('report-card');
+});
diff --git a/apps/client/src/components/ReportPrintPreview.tsx b/apps/client/src/components/ReportPrintPreview.tsx
new file mode 100644
index 0000000..bca146f
--- /dev/null
+++ b/apps/client/src/components/ReportPrintPreview.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from 'react';
+import { useI18n } from '../contexts/I18nContext';
+import { LoadingSpinner } from './LoadingSpinner';
+
+interface ReportPrintPreviewProps {
+  tableId: string;
+  reportName: string;
+  query: unknown;
+  layout: unknown;
+}
+
+/**
+ * Shows the report document produced by the API — the very same HTML the PDF export
+ * is rendered from — inside an iframe, and prints that document rather than the
+ * surrounding page. Previously this screen re-implemented the layout in JSX, so the
+ * printed result and the exported PDF drifted apart (different markup, and the
+ * preview was paginated while the export was not).
+ */
+export function ReportPrintPreview({
+  tableId,
+  reportName,
+  query,
+  layout,
+}: ReportPrintPreviewProps) {
+  const { t } = useI18n();
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const [html, setHtml] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setIsLoading(true);
+    setError(false);
+
+    fetch('/api/v1/reports/preview/html', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ table_id: tableId, name: reportName, query, layout }),
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error('Preview failed');
+        return response.text();
+      })
+      .then((text) => {
+        if (!cancelled) {
+          setHtml(text);
+          setIsLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setError(true);
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [tableId, reportName, query, layout]);
+
+  const handlePrint = () => {
+    const frame = frameRef.current?.contentWindow;
+    if (!frame) return;
+    frame.focus();
+    frame.print();
+  };
+
+  return (
+    <div>
+      <div className="d-flex justify-content-end mb-3">
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={handlePrint}
+          disabled={!html || isLoading}
+        >
+          <i className="ti ti-printer me-1" aria-hidden="true" />
+          {t('reports.print')}
+        </button>
+      </div>
+
+      {isLoading && (
+        <div className="d-flex justify-content-center py-5">
+          <LoadingSpinner size="lg" />
+        </div>
+      )}
+
+      {error && <div className="alert alert-danger">{t('reports.printPreviewError')}</div>}
+
+      {html && !error && (
+        <iframe
+          ref={frameRef}
+          title={t('reports.preview.print')}
+          srcDoc={html}
+          data-testid="report-print-frame"
+          className="w-100 border rounded bg-white"
+          style={{ height: '75vh' }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/client/src/components/__tests__/ReportPrintPreview.test.tsx b/apps/client/src/components/__tests__/ReportPrintPreview.test.tsx
new file mode 100644
index 0000000..247a2c7
--- /dev/null
+++ b/apps/client/src/components/__tests__/ReportPrintPreview.test.tsx
@@ -0,0 +1,74 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ReportPrintPreview } from '../ReportPrintPreview';
+import { render } from '../../test/render';
+
+const documentHtml =
+  '<html><head><style>.report-table{}</style></head><body><h1>Rapport</h1><table class="report-table"><tbody><tr><td>Tremblay</td></tr></tbody></table></body></html>';
+
+describe('ReportPrintPreview', () => {
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    fetchMock = vi.fn().mockResolvedValue({ ok: true, text: async () => documentHtml });
+    vi.stubGlobal('fetch', fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it('renders the document the API produced for the PDF, not a local re-implementation', async () => {
+    render(
+      <ReportPrintPreview
+        tableId="tbl-1"
+        reportName="Rapport"
+        query={{ select: ['Nom'] }}
+        layout={{ view_id: 'view-1' }}
+      />
+    );
+
+    const frame = (await screen.findByTestId('report-print-frame')) as HTMLIFrameElement;
+    expect(frame.getAttribute('srcdoc')).toBe(documentHtml);
+
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(url).toBe('/api/v1/reports/preview/html');
+    expect(init.method).toBe('POST');
+
+    const body = JSON.parse(init.body);
+    expect(body.table_id).toBe('tbl-1');
+    expect(body.layout).toEqual({ view_id: 'view-1' });
+  });
+
+  it('prints the embedded document rather than the surrounding page', async () => {
+    const user = userEvent.setup();
+    render(<ReportPrintPreview tableId="tbl-1" reportName="Rapport" query={{}} layout={{}} />);
+
+    const frame = (await screen.findByTestId('report-print-frame')) as HTMLIFrameElement;
+    const framePrint = vi.fn();
+    Object.defineProperty(frame, 'contentWindow', {
+      value: { focus: vi.fn(), print: framePrint },
+      configurable: true,
+    });
+
+    const pagePrint = vi.fn();
+    window.print = pagePrint;
+
+    await user.click(screen.getByRole('button', { name: /Print/i }));
+
+    expect(framePrint).toHaveBeenCalledTimes(1);
+    expect(pagePrint).not.toHaveBeenCalled();
+  });
+
+  it('reports a failure instead of showing a blank frame', async () => {
+    fetchMock.mockResolvedValue({ ok: false });
+    render(<ReportPrintPreview tableId="tbl-1" reportName="Rapport" query={{}} layout={{}} />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/could not be loaded/i)).toBeInTheDocument();
+    });
+    expect(screen.queryByTestId('report-print-frame')).not.toBeInTheDocument();
+  });
+});
diff --git a/apps/client/src/contexts/I18nContext.tsx b/apps/client/src/contexts/I18nContext.tsx
index 9adab29..53de346 100644
--- a/apps/client/src/contexts/I18nContext.tsx
+++ b/apps/client/src/contexts/I18nContext.tsx
@@ -122,6 +122,7 @@ const resources = {
       'reports.preview.live': 'Prévisualisation en direct',
       'reports.preview.print': 'Rendu imprimé',
       'reports.print': 'Imprimer',
+      'reports.printPreviewError': 'L’aperçu avant impression n’a pas pu être chargé.',
       'reports.save': 'Enregistrer le rapport',
       'reports.delete': 'Supprimer le rapport',
       'reports.noReports': 'Aucun rapport enregistré pour le moment.',
@@ -426,6 +427,7 @@ const resources = {
       'reports.preview.live': 'Live Preview',
       'reports.preview.print': 'Print Layout',
       'reports.print': 'Print',
+      'reports.printPreviewError': 'The print preview could not be loaded.',
       'reports.save': 'Save Report',
       'reports.delete': 'Delete Report',
       'reports.noReports': 'No saved reports yet.',
diff --git a/apps/client/src/routes/reports.$databaseId.$tableId.tsx b/apps/client/src/routes/reports.$databaseId.$tableId.tsx
index fb67e10..02addb7 100644
--- a/apps/client/src/routes/reports.$databaseId.$tableId.tsx
+++ b/apps/client/src/routes/reports.$databaseId.$tableId.tsx
@@ -8,6 +8,7 @@ import { EmptyState } from '../components/ui/EmptyState';
 import { PageActions, PageHeader } from '../components/ui/PageHeader';
 import { SurfaceCard } from '../components/ui/SurfaceCard';
 import { ShareModal } from '../components/ShareModal';
+import { ReportPrintPreview } from '../components/ReportPrintPreview';
 
 export const Route = createFileRoute('/reports/$databaseId/$tableId')({
   component: ReportBuilderPage,
@@ -302,33 +303,41 @@ export function ReportBuilderPage() {
 
   // Single description of the configuration on screen, shared by the preview, the
   // save payload and both exports so they cannot drift apart.
-  const buildQueryAST = () => ({
-    select: selectedColumns,
-    group_by: groupField || undefined,
-    sort: sorts.map((s) => ({ field: s.field, direction: s.direction })),
-    where:
-      conditions.length > 0
-        ? {
-            logic,
-            conditions: conditions.map((c) => ({
-              field: c.field,
-              operator: c.operator,
-              value: c.value,
-            })),
-          }
-        : undefined,
-  });
+  // Memoized rather than rebuilt per render: the print preview takes these as props
+  // and refetches whenever their identity changes.
+  const printQuery = useMemo(
+    () => ({
+      select: selectedColumns,
+      group_by: groupField || undefined,
+      sort: sorts.map((s) => ({ field: s.field, direction: s.direction })),
+      where:
+        conditions.length > 0
+          ? {
+              logic,
+              conditions: conditions.map((c) => ({
+                field: c.field,
+                operator: c.operator,
+                value: c.value,
+              })),
+            }
+          : undefined,
+    }),
+    [selectedColumns, groupField, sorts, conditions, logic]
+  );
 
-  const buildLayout = () => ({
-    fields: selectedColumns.map((col, idx) => ({
-      name: col,
-      visible: true,
-      order: idx + 1,
-    })),
-    show_headers_only: showHeadersOnly,
-    view_id: selectedViewId || undefined,
-    per_page: perPage,
-  });
+  const printLayout = useMemo(
+    () => ({
+      fields: selectedColumns.map((col, idx) => ({
+        name: col,
+        visible: true,
+        order: idx + 1,
+      })),
+      show_headers_only: showHeadersOnly,
+      view_id: selectedViewId || undefined,
+      per_page: perPage,
+    }),
+    [selectedColumns, showHeadersOnly, selectedViewId, perPage]
+  );
 
   // Mutators for Saving, Updating and Deleting Reports
   const saveReportMutation = useMutation({
@@ -336,8 +345,8 @@ export function ReportBuilderPage() {
       const payload = {
         table_id: tableId,
         name: reportName || t('reports.newReport'),
-        query: buildQueryAST(),
-        layout: buildLayout(),
+        query: printQuery,
+        layout: printLayout,
       };
 
       if (selectedReportId) {
@@ -383,8 +392,8 @@ export function ReportBuilderPage() {
     queryFn: () =>
       apiClient.post('/reports/preview', {
         table_id: tableId,
-        query: buildQueryAST(),
-        layout: buildLayout(),
+        query: printQuery,
+        layout: printLayout,
         per_page: showHeadersOnly ? undefined : perPage,
         page: showHeadersOnly ? undefined : currentPage,
       }),
@@ -496,8 +505,8 @@ export function ReportBuilderPage() {
       'POST',
       {
         table_id: tableId,
-        query: buildQueryAST(),
-        layout: buildLayout(),
+        query: printQuery,
+        layout: printLayout,
       },
       `${reportName || 'rapport'}.csv`,
       true
@@ -511,8 +520,8 @@ export function ReportBuilderPage() {
       {
         table_id: tableId,
         name: reportName || t('reports.newReport'),
-        query: buildQueryAST(),
-        layout: buildLayout(),
+        query: printQuery,
+        layout: printLayout,
       },
       `${reportName || 'rapport'}.pdf`,
       true
@@ -667,87 +676,6 @@ export function ReportBuilderPage() {
           background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
           font-weight: 600;
         }
-        .print-layout-container {
-          background: white;
-          color: #1e293b;
-          font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
-          border: 1px solid #e2e8f0;
-          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
-          padding: 2cm;
-          min-height: 29.7cm;
-          box-sizing: border-box;
-          width: 21cm;
-          margin: 0 auto;
-          border-radius: 8px;
-        }
-        .print-layout-container table {
-          width: 100%;
-          border-collapse: collapse;
-          margin-top: 1rem;
-          margin-bottom: 1.5rem;
-        }
-        .print-layout-container th, .print-layout-container td {
-          border-bottom: 1px solid #e2e8f0;
-          padding: 10px 12px;
-          text-align: left;
-          font-size: 9.5pt;
-        }
-        .print-layout-container th {
-          background-color: #f8fafc;
-          color: #475569;
-          font-weight: 600;
-          text-transform: uppercase;
-          font-size: 8pt;
-          letter-spacing: 0.05em;
-          border-top: 1px solid #e2e8f0;
-        }
-        .print-layout-container h1 {
-          font-family: inherit;
-          font-size: 24pt;
-          font-weight: 700;
-          color: #0f172a;
-          text-align: left;
-          margin-bottom: 0.5rem;
-        }
-        .print-layout-container .group-header {
-          font-weight: 700;
-          font-size: 12pt;
-          color: #0f172a;
-          margin-top: 2rem;
-          margin-bottom: 0.75rem;
-          padding-bottom: 4px;
-          border-bottom: 2px solid #cbd5e1;
-        }
-        .print-layout-container .report-meta {
-          border-bottom: 1px solid #e2e8f0;
-          padding-bottom: 0.75rem;
-          margin-bottom: 1.5rem;
-          color: #64748b;
-          font-size: 9pt;
-        }
-        @media print {
-          body, .page, #root, .page-wrapper, .page-body, .container-xl {
-            background: white !important;
-            color: black !important;
-            width: 100% !important;
-            max-width: 100% !important;
-            margin: 0 !important;
-            padding: 0 !important;
-            border: none !important;
-            box-shadow: none !important;
-          }
-          .d-print-none, header, nav, .navbar, .page-header, .report-sidebar, .report-editor-card, .nav-tabs, .btn, .pagination-wrapper, .tanstack-router-devtools {
-            display: none !important;
-          }
-          .print-layout-container {
-            border: none !important;
-            box-shadow: none !important;
-            padding: 0 !important;
-            width: 100% !important;
-            min-height: 0 !important;
-            margin: 0 !important;
-          }
-        }
       `}</style>
 
       <PageHeader
@@ -1359,161 +1287,14 @@ export function ReportBuilderPage() {
                 </SurfaceCard>
               )}
 
-              {/* Print Preview Tab (visible in tab, and always active during print rendering) */}
-              {(activePreviewTab === 'print' || window.matchMedia('print').matches) && (
-                <div>
-                  <div className="d-flex justify-content-end mb-3 d-print-none">
-                    <button
-                      type="button"
-                      className="btn btn-primary"
-                      onClick={() => window.print()}
-                    >
-                      <i className="ti ti-printer me-1" />
-                      {t('reports.print')}
-                    </button>
-                  </div>
-
-                  <div className="print-layout-container">
-                    <h1>{reportName || t('reports.newReport')}</h1>
-                    <div className="report-meta d-flex justify-content-between">
-                      <div>
-                        <strong>Base :</strong> {databaseQuery.data?.name} •{' '}
-                        <strong>Table :</strong> {tableQuery.data?.name}
-                      </div>
-                      <div>
-                        <strong>Date :</strong> {new Date().toLocaleDateString('fr-FR')}
-                      </div>
-                    </div>
-
-                    {previewData?.groups?.map((group: any, gIdx: number) => (
-                      <div key={gIdx} className="mb-4">
-                        {group.key && (
-                          <div className="group-header">
-                            {groupField} : {group.key} ({group.records.length})
-                          </div>
-                        )}
-                        {!showHeadersOnly &&
-                          (selectedViewId ? (
-                            <div className="vstack gap-3 d-flex flex-column">
-                              {group.records.map((rec: any, rIdx: number) => {
-                                const titleFieldDef = fieldsQuery.data?.find(
-                                  (f) => f.options?.is_title === true || f.type === 'title'
-                                );
-                                const titleValKey = titleFieldDef
-                                  ? Object.keys(rec).find(
-                                      (k) => k.toLowerCase() === titleFieldDef.name.toLowerCase()
-                                    )
-                                  : null;
-                                const cardTitle = titleValKey ? rec[titleValKey] : null;
-
-                                return (
-                                  <div
-                                    className="card p-3 border mb-3 bg-white w-100 text-start"
-                                    key={rIdx}
-                                    style={{ pageBreakInside: 'avoid', breakInside: 'avoid' }}
-                                  >
-                                    {cardTitle && (
-                                      <div className="border-bottom pb-1 mb-2">
-                                        <h4
-                                          className="fw-bold mb-0 text-primary text-start"
-                                          style={{ fontSize: '12pt' }}
-                                        >
-                                          {String(cardTitle)}
-                                        </h4>
-                                      </div>
-                                    )}
-                                    <div className="row g-2">
-                                      {columnsLayout.map((colFields, colIdx) => {
-                                        const colWidthClass =
-                                          columnsLayout.length === 1 ? 'col-12' : 'col-6';
-                                        return (
-                                          <div key={colIdx} className={colWidthClass}>
-                                            <div className="p-2 border border-dashed rounded bg-light-subtle h-100">
-                                              {colFields.map((fId) => {
-                                                const cleanId = fId.startsWith('draft-')
-                                                  ? fId.substring(6)
-                                                  : fId;
-                                                const fieldDef = fieldsByIdMap.get(cleanId);
-                                                if (!fieldDef || fieldDef.type === 'title')
-                                                  return null;
-
-                                                return (
-                                                  <div key={cleanId} className="mb-2 text-start">
-                                                    <div
-                                                      className="text-muted fw-bold text-uppercase"
-                                                      style={{
-                                                        fontSize: '7pt',
-                                                        letterSpacing: '0.05em',
-                                                      }}
-                                                    >
-                                                      {fieldDef.name}
-                                                    </div>
-                                                    <div
-                                                      style={{ fontSize: '9pt', color: '#1e293b' }}
-                                                    >
-                                                      {renderCardField(fieldDef, rec)}
-                                                    </div>
-                                                  </div>
-                                                );
-                                              })}
-                                            </div>
-                                          </div>
-                                        );
-                                      })}
-                                    </div>
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          ) : (
-                            <table>
-                              <thead>
-                                <tr>
-                                  {previewData?.columns?.map((col: string) => {
-                                    const colDef = availableColumns.find(
-                                      (c) => c.name.toLowerCase() === col.toLowerCase()
-                                    );
-                                    return <th key={col}>{colDef ? colDef.label : col}</th>;
-                                  })}
-                                </tr>
-                              </thead>
-                              <tbody>
-                                {group.records.length === 0 ? (
-                                  <tr>
-                                    <td
-                                      colSpan={previewData?.columns?.length || 1}
-                                      className="text-center text-muted"
-                                    >
-                                      Aucune fiche
-                                    </td>
-                                  </tr>
-                                ) : (
-                                  group.records.map((rec: any, rIdx: number) => (
-                                    <tr key={rIdx}>
-                                      {previewData?.columns?.map((col: string) => {
-                                        const val = rec[col];
-                                        return (
-                                          <td key={col}>
-                                            {Array.isArray(val)
-                                              ? val.join(', ')
-                                              : typeof val === 'object' && val !== null
-                                                ? val.lat !== undefined && val.lng !== undefined
-                                                  ? `${val.lat}, ${val.lng}`
-                                                  : JSON.stringify(val)
-                                                : (val ?? '-')}
-                                          </td>
-                                        );
-                                      })}
-                                    </tr>
-                                  ))
-                                )}
-                              </tbody>
-                            </table>
-                          ))}
-                      </div>
-                    ))}
-                  </div>
-                </div>
+              {/* Print Preview Tab: renders the API's report document so print matches the PDF */}
+              {activePreviewTab === 'print' && (
+                <ReportPrintPreview
+                  tableId={tableId}
+                  reportName={reportName || t('reports.newReport')}
+                  query={printQuery}
+                  layout={printLayout}
+                />
               )}
             </div>
           )}
diff --git a/docker/nginx/default.conf b/docker/nginx/default.conf
index c043f06..4d11031 100644
--- a/docker/nginx/default.conf
+++ b/docker/nginx/default.conf
@@ -15,6 +15,9 @@ server {
         fastcgi_index index.php;
         fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
         include fastcgi_params;
+        # A large report export renders every record in one pass and can run well
+        # past nginx's 60s default; keep it in step with PHP's max_execution_time.
+        fastcgi_read_timeout 180s;
     }
 
     location ~ /\.(?!well-known).* {
diff --git a/docker/php/php.ini b/docker/php/php.ini
index 0d633ed..6069525 100644
--- a/docker/php/php.ini
+++ b/docker/php/php.ini
@@ -3,7 +3,12 @@ display_errors = Off
 error_reporting = E_ALL
 upload_max_filesize = 64M
 post_max_size = 70M
-memory_limit = 256M
+; Report exports render every matching record in one pass. Measured peak for the
+; heaviest real case (247 records through the card layout) is 288M, which the old
+; 256M limit killed outright.
+memory_limit = 512M
+; Same render takes ~80s, so the request must outlive the default 30s.
+max_execution_time = 180
 opcache.enable = 1
 opcache.memory_consumption = 128
 opcache.validate_timestamps = 1