diff --git a/document_engine/rendering/render_document_element.py b/document_engine/rendering/render_document_element.py
index 89fe2195..f3d74caf 100644
--- a/document_engine/rendering/render_document_element.py
+++ b/document_engine/rendering/render_document_element.py
@@ -1,4 +1,5 @@
 import html as html_lib
+import json
 from typing import Any
 
 _SHAPE_TAGS = {"rectangle": "rect", "cercle": "circle", "trait": "line"}
@@ -130,9 +131,42 @@ def _render_minigame_placeholder(
     return (
         f'<div class="docMinigame" data-element-id="{el["id"]}" data-kind="{el["kind"]}" '
         f'style="border-color:{theme_color};">'
+        f'<div class="docMinigameBadge">'
         f'<span class="docMinigameLabel">{label}</span>'
         f'<span class="docMinigamePlaceholder">Formulaire de contenu à venir</span>'
+        f"</div></div>"
+    )
+
+
+def _render_quiz_player(config: dict[str, Any]) -> str:
+    """Questionnaire RÉELLEMENT interactif — affiché uniquement en Mode
+    Aperçu (voir static/document/document-editor.css,
+    .docEditor3--preview), pour que le créateur puisse tester son quiz
+    avant un futur export (voir docs/plan/maquettes/
+    document-formation-web.html, référence visuelle de ce rendu). Les
+    questions sont embarquées en JSON dans un attribut data-* (jamais un
+    <script> par élément) — static/document/js/document-editor.js les lit
+    et gère tout le déroulé (réponse/score/question suivante/résultat)
+    côté client, sans aucun aller-retour serveur (une session d'Aperçu
+    n'est jamais persistée)."""
+    config_json = html_lib.escape(json.dumps({"questions": config["questions"]}), quote=True)
+    return (
+        f'<div class="docQuizPlayer" data-quiz-config="{config_json}">'
+        f'<div class="docQuizCard">'
+        f'<div class="docQuizKicker">Quiz</div>'
+        f'<div class="docQuizPlayerTitle">Vérifiez vos connaissances</div>'
+        f'<div class="docQuizProgressTrack"><div class="docQuizProgressFill"></div></div>'
+        f'<div class="docQuizMeta"><span class="docQuizProg"></span><span class="docQuizScore"></span></div>'
+        f'<div class="docQuizQuestionText"></div>'
+        f'<div class="docQuizOptions"></div>'
+        f'<div class="docQuizFeedback"></div>'
+        f'<div class="docQuizNextBar"><button type="button" class="docQuizNextBtn">Question suivante</button></div>'
         f"</div>"
+        f'<div class="docQuizResultCard" style="display:none;">'
+        f'<div class="docQuizResultBig"></div>'
+        f'<div class="docQuizResultSub"></div>'
+        f'<button type="button" class="docQuizRestartBtn">Recommencer le quiz</button>'
+        f"</div></div>"
     )
 
 
@@ -146,12 +180,16 @@ def _render_quiz(el: dict[str, Any], _children_by_parent: dict[int | None, list[
     total_points = quiz_total_points(config)
     timer_note = f" · ⏱ {config['timer_seconds']}s/question" if config["timer_enabled"] else ""
     subtitle = f"{question_count} {question_label} · {total_points} points{timer_note}"
+    player_html = _render_quiz_player(config) if config["questions"] else ""
     return (
         f'<div class="docMinigame" data-element-id="{el["id"]}" data-kind="quiz" '
         f'style="border-color:{theme_color};">'
+        f'<div class="docMinigameBadge">'
         f'<span class="docMinigameLabel">Quiz</span>'
         f'<span class="docMinigamePlaceholder">{html_lib.escape(subtitle)}</span>'
         f"</div>"
+        f"{player_html}"
+        f"</div>"
     )
 
 
diff --git a/document_engine/rendering/rendering.md b/document_engine/rendering/rendering.md
index e0e62e4e..e7e188e7 100644
--- a/document_engine/rendering/rendering.md
+++ b/document_engine/rendering/rendering.md
@@ -35,10 +35,19 @@ regroupement à chaque appel.
   taille/graisse/interligne) et `bold`/`italic`/`underline`/`align`/`color`.
 - **Image** : `<img>`, ou un bloc placeholder si `src` est vide.
 - **Bouton** : `<button>` avec son `label` et un `data-target` optionnel.
-- **Quiz** : carte résumant la config réelle (nombre de questions, total
-  des points via `quiz_total_points`, minuteur si activé) — sanitizée
-  (`sanitize_quiz_config`) avant lecture, jamais un rendu direct
-  d'`attributes` brut.
+- **Quiz** : toujours une carte résumant la config réelle (nombre de
+  questions, total des points via `quiz_total_points`, minuteur si
+  activé) — sanitizée (`sanitize_quiz_config`) avant lecture, jamais un
+  rendu direct d'`attributes` brut. Si au moins une question existe,
+  s'y ajoute (fonction privée `_render_quiz_player`) le questionnaire
+  RÉEL et interactif affiché en Mode Aperçu (voir docs/plan/maquettes/
+  document-formation-web.html — référence visuelle), masqué en édition
+  par CSS (`.docQuizPlayer`, voir static/document/document-editor.css) :
+  les questions sont embarquées en JSON dans un attribut `data-quiz-config`
+  (jamais un `<script>` par élément), échappé pour l'HTML
+  (`html.escape(..., quote=True)`) — static/document/js/document-editor.js
+  lit cet attribut et gère tout le déroulé (réponse/score/question
+  suivante/résultat) côté client, sans aucun aller-retour serveur.
 - **Autres mini-jeux** (`association`/`memory`/`mots`/`scenario`/`zones`) :
   carte placeholder portant le libellé du type (voir
   `document_engine/labels/element_kind_labels.py`) — emplacement réservé,
diff --git a/static/document/document-editor.css b/static/document/document-editor.css
index 496282c1..606f1c76 100644
--- a/static/document/document-editor.css
+++ b/static/document/document-editor.css
@@ -31,6 +31,12 @@ body.objectEditBody > main.content {
   --doc-accent: var(--accent);
   --doc-accent-2: var(--accent-2);
   --doc-glow: 0 0 0 1px rgb(255 95 46 / 25%), 0 8px 24px -6px rgb(255 95 46 / 25%);
+  --doc-quiz-success-bg: rgb(59 165 93 / 12%);
+  --doc-quiz-success-border: #3ba55d;
+  --doc-quiz-success-text: #8fe3ab;
+  --doc-quiz-danger-bg: rgb(255 95 46 / 12%);
+  --doc-quiz-danger-border: #ff5f2e;
+  --doc-quiz-danger-text: #ffb3a0;
 
   /* Remplit main.content (voir body.objectEditBody dans static/style.css :
      `main.content` y est déjà `flex:1 1 auto; min-height:0; overflow:hidden;
@@ -58,6 +64,12 @@ body.objectEditBody > main.content {
   --doc-text: #14161c;
   --doc-muted: #6b7280;
   --doc-glow: 0 0 0 1px rgb(255 95 46 / 30%), 0 8px 24px -6px rgb(255 95 46 / 30%);
+  --doc-quiz-success-bg: #e4f5ea;
+  --doc-quiz-success-border: #2e7d46;
+  --doc-quiz-success-text: #1d4c2c;
+  --doc-quiz-danger-bg: #fdede8;
+  --doc-quiz-danger-border: #c1451f;
+  --doc-quiz-danger-text: #7a1418;
 }
 
 .docEditor3 * {
@@ -467,12 +479,15 @@ img.docImage {
 .docMinigame {
   border: 1px solid var(--doc-accent);
   border-radius: 12px;
+  background: rgb(255 95 46 / 8%);
+}
+
+.docMinigameBadge {
   padding: 18px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  background: rgb(255 95 46 / 8%);
 }
 
 .docMinigameLabel {
@@ -485,6 +500,237 @@ img.docImage {
   color: var(--doc-muted);
 }
 
+/* ---- Quiz : questionnaire interactif en Mode Aperçu (voir docs/plan/
+   maquettes/document-formation-web.html — référence visuelle). Masqué en
+   édition (seul .docMinigameBadge y est visible, voir plus haut) ; les
+   deux jamais visibles en même temps. ---- */
+.docQuizPlayer {
+  display: none;
+}
+
+.docEditor3.docEditor3--preview [data-kind="quiz"] .docMinigameBadge {
+  display: none;
+}
+
+.docEditor3.docEditor3--preview [data-kind="quiz"] .docQuizPlayer {
+  display: block;
+}
+
+.docEditor3.docEditor3--preview [data-kind="quiz"] {
+  border: none;
+  background: transparent;
+}
+
+.docEditor3.docEditor3--preview .docQuizPlayer,
+.docEditor3.docEditor3--preview .docQuizPlayer * {
+  /* .docEditor3--preview désactive pointer-events sur tout [data-element-id]
+     (voir plus bas) pour empêcher la sélection/le déplacement pendant
+     l'Aperçu — réactivé ici spécifiquement pour que le quiz reste
+     RÉELLEMENT cliquable (répondre, question suivante, recommencer). */
+  pointer-events: auto;
+}
+
+.docQuizCard,
+.docQuizResultCard {
+  background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
+  border: 1px solid var(--doc-border);
+  border-radius: 16px;
+  padding: 1.8rem;
+}
+
+.docQuizResultCard {
+  text-align: center;
+}
+
+.docQuizKicker {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--doc-accent);
+  margin-bottom: 6px;
+}
+
+.docQuizPlayerTitle {
+  font-size: 1.15rem;
+  font-weight: 700;
+  margin: 0 0 20px;
+}
+
+.docQuizProgressTrack {
+  height: 4px;
+  background: var(--doc-border);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.docQuizProgressFill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(120deg, var(--doc-accent), var(--doc-accent-2));
+  transition: width 0.2s ease;
+}
+
+.docQuizMeta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  color: var(--doc-muted);
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.docQuizQuestionText {
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 0 0 18px;
+}
+
+.docQuizOptions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.docQuizOption {
+  text-align: left;
+  padding: 13px 15px;
+  border: 1px solid var(--doc-border);
+  background: var(--doc-bg-2);
+  color: var(--doc-text);
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: border-color 0.15s ease;
+}
+
+.docQuizOption:hover:not(:disabled) {
+  border-color: var(--doc-accent);
+}
+
+.docQuizOptionLetter {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid var(--doc-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 12.5px;
+  color: var(--doc-muted);
+}
+
+.docQuizOption.is-correct {
+  border-color: var(--doc-quiz-success-border);
+  background: var(--doc-quiz-success-bg);
+}
+
+.docQuizOption.is-correct .docQuizOptionLetter {
+  border-color: var(--doc-quiz-success-border);
+  background: var(--doc-quiz-success-border);
+  color: #0b0e14;
+}
+
+.docQuizOption.is-wrong {
+  border-color: var(--doc-quiz-danger-border);
+  background: var(--doc-quiz-danger-bg);
+}
+
+.docQuizOption.is-wrong .docQuizOptionLetter {
+  border-color: var(--doc-accent);
+  background: var(--doc-accent);
+  color: #0b0e14;
+}
+
+.docQuizOption:disabled:not(.is-correct, .is-wrong) {
+  opacity: 0.45;
+}
+
+.docQuizFeedback {
+  display: none;
+  margin-top: 16px;
+  padding: 13px 15px;
+  border-radius: 10px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.docQuizFeedback.is-visible {
+  display: block;
+}
+
+.docQuizFeedback.is-ok {
+  background: var(--doc-quiz-success-bg);
+  color: var(--doc-quiz-success-text);
+  border: 1px solid var(--doc-quiz-success-border);
+}
+
+.docQuizFeedback.is-ko {
+  background: var(--doc-quiz-danger-bg);
+  color: var(--doc-quiz-danger-text);
+  border: 1px solid var(--doc-quiz-danger-border);
+}
+
+.docQuizNextBar {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.docQuizNextBtn {
+  padding: 0.75rem 1.6rem;
+  border-radius: 10px;
+  border: none;
+  background: linear-gradient(120deg, var(--doc-accent), var(--doc-accent-2));
+  color: #14100c;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.docQuizNextBtn.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.docQuizResultBig {
+  font-weight: 800;
+  font-size: 44px;
+  background: linear-gradient(120deg, var(--doc-accent), var(--doc-accent-2));
+  background-clip: text;
+  color: transparent;
+  line-height: 1;
+}
+
+.docQuizResultSub {
+  margin-top: 6px;
+  margin-bottom: 18px;
+  font-size: 13px;
+  color: var(--doc-muted);
+  font-weight: 600;
+}
+
+.docQuizRestartBtn {
+  padding: 0.7rem 1.5rem;
+  border-radius: 10px;
+  background: transparent;
+  border: 1px solid var(--doc-border);
+  color: var(--doc-text);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+}
+
 .docUnknown {
   font-size: 12.5px;
   color: var(--doc-muted);
diff --git a/static/document/js/document-editor.js b/static/document/js/document-editor.js
index 63843d5f..0f8336d1 100644
--- a/static/document/js/document-editor.js
+++ b/static/document/js/document-editor.js
@@ -475,6 +475,132 @@ function forgeDocBindCanvasInteractions() {
       });
     }
   });
+  forgeDocInitQuizPlayers();
+}
+
+/* ---------------------------------------------------------------------
+ * Quiz — questionnaire RÉELLEMENT interactif en Mode Aperçu (voir
+ * docs/plan/maquettes/document-formation-web.html, référence visuelle).
+ * État tenu en mémoire (jamais persisté — une session d'Aperçu se
+ * réinitialise à chaque rafraîchissement du canevas, exactement comme le
+ * reste de l'éditeur).
+ * ------------------------------------------------------------------- */
+
+function forgeDocQuizPlayerQuestions(playerEl) {
+  try {
+    const config = JSON.parse(playerEl.dataset.quizConfig || '{}');
+    return Array.isArray(config.questions) ? config.questions : [];
+  } catch (e) {
+    return [];
+  }
+}
+
+function forgeDocRenderQuizPlayerQuestion(playerEl, state) {
+  state.answered = false;
+  const item = state.questions[state.current];
+  const textEl = playerEl.querySelector('.docQuizQuestionText');
+  const optionsEl = playerEl.querySelector('.docQuizOptions');
+  const feedbackEl = playerEl.querySelector('.docQuizFeedback');
+  const nextBtn = playerEl.querySelector('.docQuizNextBtn');
+  const fillEl = playerEl.querySelector('.docQuizProgressFill');
+  const progEl = playerEl.querySelector('.docQuizProg');
+  const scoreEl = playerEl.querySelector('.docQuizScore');
+  const letters = ['A', 'B', 'C', 'D'];
+
+  textEl.textContent = item.text;
+  optionsEl.innerHTML = '';
+  feedbackEl.className = 'docQuizFeedback';
+  feedbackEl.textContent = '';
+  nextBtn.classList.remove('is-visible');
+  item.choices.forEach((choice, idx) => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'docQuizOption';
+    btn.innerHTML = `<span class="docQuizOptionLetter">${letters[idx]}</span><span></span>`;
+    btn.querySelector('span:last-child').textContent = choice;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      forgeDocQuizPlayerAnswer(playerEl, state, idx, btn);
+    });
+    optionsEl.appendChild(btn);
+  });
+  fillEl.style.width = `${(state.current / state.questions.length) * 100}%`;
+  progEl.textContent = `Question ${state.current + 1} sur ${state.questions.length}`;
+  scoreEl.textContent = `Score : ${state.score}`;
+}
+
+function forgeDocQuizPlayerAnswer(playerEl, state, idx, btn) {
+  if (state.answered) return;
+  state.answered = true;
+  const item = state.questions[state.current];
+  const options = playerEl.querySelectorAll('.docQuizOption');
+  options.forEach((o) => { o.disabled = true; });
+  const feedbackEl = playerEl.querySelector('.docQuizFeedback');
+  const nextBtn = playerEl.querySelector('.docQuizNextBtn');
+  const scoreEl = playerEl.querySelector('.docQuizScore');
+  if (idx === item.correct_index) {
+    btn.classList.add('is-correct');
+    state.score += item.points || 0;
+    feedbackEl.classList.add('is-visible', 'is-ok');
+    feedbackEl.textContent = 'Bonne réponse !';
+  } else {
+    btn.classList.add('is-wrong');
+    options[item.correct_index].classList.add('is-correct');
+    feedbackEl.classList.add('is-visible', 'is-ko');
+    feedbackEl.textContent = 'Mauvaise réponse.';
+  }
+  scoreEl.textContent = `Score : ${state.score}`;
+  nextBtn.classList.add('is-visible');
+  nextBtn.textContent = state.current === state.questions.length - 1 ? 'Voir le résultat' : 'Question suivante';
+}
+
+function forgeDocQuizPlayerTotalPoints(state) {
+  return state.questions.reduce((sum, q) => sum + (q.points || 0), 0);
+}
+
+function forgeDocShowQuizPlayerResult(playerEl, state) {
+  playerEl.querySelector('.docQuizCard').style.display = 'none';
+  const resultCard = playerEl.querySelector('.docQuizResultCard');
+  resultCard.style.display = 'block';
+  playerEl.querySelector('.docQuizProgressFill').style.width = '100%';
+  playerEl.querySelector('.docQuizResultBig').textContent = `${state.score} / ${forgeDocQuizPlayerTotalPoints(state)}`;
+  playerEl.querySelector('.docQuizResultSub').textContent = 'points obtenus';
+}
+
+function forgeDocQuizPlayerNext(playerEl, state) {
+  state.current += 1;
+  if (state.current < state.questions.length) {
+    forgeDocRenderQuizPlayerQuestion(playerEl, state);
+  } else {
+    forgeDocShowQuizPlayerResult(playerEl, state);
+  }
+}
+
+function forgeDocQuizPlayerRestart(playerEl, state) {
+  state.current = 0;
+  state.score = 0;
+  playerEl.querySelector('.docQuizResultCard').style.display = 'none';
+  playerEl.querySelector('.docQuizCard').style.display = 'block';
+  forgeDocRenderQuizPlayerQuestion(playerEl, state);
+}
+
+function forgeDocInitQuizPlayers() {
+  document.querySelectorAll('.docQuizPlayer').forEach((playerEl) => {
+    const questions = forgeDocQuizPlayerQuestions(playerEl);
+    if (!questions.length) return;
+    const state = {
+      current: 0, score: 0, answered: false, questions,
+    };
+    forgeDocRenderQuizPlayerQuestion(playerEl, state);
+    playerEl.querySelector('.docQuizNextBtn').addEventListener('click', (e) => {
+      e.stopPropagation();
+      forgeDocQuizPlayerNext(playerEl, state);
+    });
+    playerEl.querySelector('.docQuizRestartBtn').addEventListener('click', (e) => {
+      e.stopPropagation();
+      forgeDocQuizPlayerRestart(playerEl, state);
+    });
+  });
 }
 
 function forgeDocSetActiveBottomNav(target) {
diff --git a/tests/document/test_quiz_config.py b/tests/document/test_quiz_config.py
index 23d2e3e5..171e8e46 100644
--- a/tests/document/test_quiz_config.py
+++ b/tests/document/test_quiz_config.py
@@ -1,6 +1,8 @@
 """Modèle de données du mini-jeu Quiz (document_engine/labels/quiz_config.py)
 — sans Flask, teste directement sanitize_quiz_config/quiz_total_points."""
 
+from typing import Any
+
 import document_engine as doc_engine
 
 
@@ -99,3 +101,41 @@ def test_quiz_total_points_sums_every_question() -> None:
 
 def test_quiz_total_points_on_empty_quiz_is_zero() -> None:
     assert doc_engine.quiz_total_points(doc_engine.DEFAULT_QUIZ_CONFIG) == 0
+
+
+def _quiz_element(attributes: dict[str, Any]) -> dict[str, Any]:
+    return {"id": 1, "kind": "quiz", "parent_id": None, "order_index": 0, "attributes": attributes}
+
+
+def test_render_quiz_without_questions_shows_only_the_badge() -> None:
+    html = doc_engine.render_document_element(_quiz_element(doc_engine.DEFAULT_QUIZ_CONFIG), {})
+    assert "0 question" in html
+    assert "docQuizPlayer" not in html
+
+
+def test_render_quiz_with_questions_includes_the_interactive_player() -> None:
+    config = doc_engine.sanitize_quiz_config(
+        {"questions": [{"text": "Vrai ou faux ?", "choices": ["Vrai", "Faux"], "correct_index": 0, "points": 10}]}
+    )
+    html = doc_engine.render_document_element(_quiz_element(config), {})
+    assert "docQuizPlayer" in html
+    assert "docQuizOptions" in html
+    assert "data-quiz-config=" in html
+    assert "Vrai ou faux ?" in html
+
+
+def test_render_quiz_escapes_question_text_in_embedded_json() -> None:
+    """Le JSON des questions est embarqué dans un attribut HTML (jamais un
+    <script> par élément) — html.escape(quote=True) doit neutraliser toute
+    tentative d'injection via le texte d'une question/d'un choix (champ
+    libre du créateur)."""
+    config = doc_engine.sanitize_quiz_config(
+        {
+            "questions": [
+                {"text": '"><script>alert(1)</script>', "choices": ["A", "B"], "correct_index": 0, "points": 1},
+            ]
+        }
+    )
+    html = doc_engine.render_document_element(_quiz_element(config), {})
+    assert "<script>alert(1)</script>" not in html
+    assert "&lt;script&gt;" in html