<div id="french-healthy-quiz">
  <style>
    #french-healthy-quiz {
      font-family: Arial, sans-serif;
      color: #10245c;
      max-width: 1100px;
      margin: auto;
    }
    #french-healthy-quiz * { box-sizing: border-box; }
    #french-healthy-quiz .quiz-header {
      background: linear-gradient(110deg, #0861aa, #56b4e8);
      color: white;
      padding: 24px;
      border-radius: 18px;
      margin-bottom: 18px;
    }
    #french-healthy-quiz h2 { margin: 0 0 10px; }
    #french-healthy-quiz .quiz-layout {
      display: grid;
      grid-template-columns: 310px 1fr;
      gap: 18px;
    }
    #french-healthy-quiz .quiz-panel {
      background: #fff;
      border: 1px solid #c6e8fa;
      border-radius: 18px;
      padding: 20px;
    }
    #french-healthy-quiz .term {
      background: #e9f7eb;
      padding: 11px;
      border-left: 4px solid #64b95b;
      border-radius: 9px;
      margin-bottom: 8px;
      font-weight: bold;
    }
    #french-healthy-quiz .question {
      padding: 16px 0;
      border-bottom: 1px solid #dbeaf5;
      line-height: 1.8;
    }
    #french-healthy-quiz .number {
      display: inline-block;
      background: #0876bf;
      color: white;
      padding: 2px 11px;
      border-radius: 50%;
      margin-right: 8px;
      font-weight: bold;
    }
    #french-healthy-quiz select {
      font: inherit;
      max-width: 100%;
      padding: 9px;
      border: 2px solid #8bc8ed;
      border-radius: 8px;
      background: white;
      color: #10245c;
    }
    #french-healthy-quiz .correct select {
      border-color: #259b5b;
      background: #effbf2;
    }
    #french-healthy-quiz .wrong select {
      border-color: #df4e55;
      background: #fff1f1;
    }
    #french-healthy-quiz .feedback {
      font-size: 14px;
      margin-top: 6px;
      font-weight: bold;
    }
    #french-healthy-quiz .correct .feedback { color: #187a44; }
    #french-healthy-quiz .wrong .feedback { color: #ba2d35; }
    #french-healthy-quiz .quiz-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }
    #french-healthy-quiz button {
      background: #086bb5;
      color: white;
      border: none;
      border-radius: 10px;
      padding: 12px 16px;
      cursor: pointer;
      font-weight: bold;
    }
    #french-healthy-quiz button.secondary {
      background: #e1f0fc;
      color: #0a4f8a;
    }
    #french-healthy-quiz .quiz-result {
      margin-top: 18px;
      padding: 15px;
      border-radius: 10px;
      background: #e9f7ff;
      font-weight: bold;
    }
    @media (max-width: 800px) {
      #french-healthy-quiz .quiz-layout {
        grid-template-columns: 1fr;
      }
      #french-healthy-quiz select {
        width: 100%;
        margin: 7px 0;
      }
    }
  </style>

  <div class="quiz-header">
    <h2>🥗 Expressions courantes</h2>
    <p>Complétez les phrases avec les expressions de la liste.</p>
  </div>

  <div class="quiz-layout">
    <div class="quiz-panel">
      <h2>📚 Liste des expressions</h2>
      <div class="quiz-bank"></div>
      <p>Chaque expression est utilisée une seule fois.</p>
    </div>

    <div class="quiz-panel">
      <h2>✏️ Complétez les phrases</h2>
      <div class="quiz-questions"></div>
      <div class="quiz-buttons">
        <button type="button" data-action="check">
          ✓ Vérifier mes réponses
        </button>
        <button type="button" class="secondary" data-action="answers">
          👁 Voir les réponses
        </button>
        <button type="button" class="secondary" data-action="reset">
          ↻ Recommencer
        </button>
      </div>
      <div class="quiz-result" role="status"
           aria-live="polite" hidden></div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.getElementById("french-healthy-quiz");
      if (root.dataset.initialized) return;
      root.dataset.initialized = "true";

      const terms = [
        "Manger sainement",
        "Manger des fruits et des légumes",
        "Consommer des produits frais",
        "Réduire sa consommation de sucre",
        "Privilégier les aliments naturels",
        "Varier son alimentation",
        "Préparer ses repas à la maison",
        "Consommer des produits de saison",
        "Acheter des produits biologiques"
      ];

      const icons = ["🥗", "🥕", "🐟", "🍬", "🌿",
                     "🍽️", "🍲", "🍓", "🌱"];

      // [Début, fin, index de la bonne réponse, forme correcte]
      const questions = [
        [
          "Pour rester en bonne santé, j’essaie de ",
          " et de limiter les aliments trop gras.",
          0, "manger sainement"
        ],
        [
          "J’essaie de ",
          " tous les jours, car ils sont riches en vitamines.",
          1, "manger des fruits et des légumes"
        ],
        [
          "Je préfère ",
          ", comme les fruits, les légumes et la viande du marché.",
          2, "consommer des produits frais"
        ],
        [
          "Il est important de ",
          ", par exemple en évitant les boissons sucrées et en limitant les desserts.",
          3, "réduire sa consommation de sucre"
        ],
        [
          "J’essaie de ",
          ", comme les céréales complètes, les légumineuses et les produits peu transformés.",
          4, "privilégier les aliments naturels"
        ],
        [
          "Pour avoir tous les nutriments nécessaires, je ",
          " (viandes, poissons, œufs, légumes, fruits, céréales).",
          5, "varie mon alimentation"
        ],
        [
          "Quand j’ai le temps, je ",
          ", car c’est plus sain et moins cher.",
          6, "prépare mes repas à la maison"
        ],
        [
          "J’essaie de ",
          ", comme les fraises au printemps ou les potirons en automne.",
          7, "consommer des produits de saison"
        ],
        [
          "Dans la mesure du possible, j’essaie d’",
          ", car ils sont meilleurs pour la santé et pour l’environnement.",
          8, "acheter des produits biologiques"
        ]
      ];

      const bank = root.querySelector(".quiz-bank");
      const area = root.querySelector(".quiz-questions");
      const result = root.querySelector(".quiz-result");

      terms.forEach((term, i) => {
        const item = document.createElement("div");
        item.className = "term";
        item.textContent = icons[i] + " " + term;
        bank.appendChild(item);
      });

      questions.forEach((q, i) => {
        const row = document.createElement("div");
        row.className = "question";

        const number = document.createElement("span");
        number.className = "number";
        number.textContent = i + 1;

        const beginning = document.createElement("span");
        beginning.textContent = q[0];

        const select = document.createElement("select");
        select.setAttribute("aria-label", "Réponse " + (i + 1));

        const placeholder = document.createElement("option");
        placeholder.value = "";
        placeholder.textContent = "— Choisissez une expression —";
        select.appendChild(placeholder);

        terms.forEach((term, index) => {
          const option = document.createElement("option");
          option.value = index;
          option.textContent = term;
          select.appendChild(option);
        });

        const ending = document.createElement("span");
        ending.textContent = q[1];

        const feedback = document.createElement("div");
        feedback.className = "feedback";

        row.append(number, beginning, select, ending, feedback);
        area.appendChild(row);

        select.addEventListener("change", () => {
          row.classList.remove("correct", "wrong");
          feedback.textContent = "";
          result.hidden = true;
        });
      });

      const rows = Array.from(area.querySelectorAll(".question"));

      function checkAnswers() {
        let score = 0;

        rows.forEach((row, i) => {
          const selected = row.querySelector("select").value;
          const feedback = row.querySelector(".feedback");
          const correct = selected !== "" &&
                          Number(selected) === questions[i][2];

          row.classList.remove("correct", "wrong");
          row.classList.add(correct ? "correct" : "wrong");

          if (correct) {
            score++;
            feedback.textContent = "✓ Bonne réponse !";
          } else {
            feedback.textContent =
              "✗ Réponse attendue : " +
              questions[i][3] +
              " (" + terms[questions[i][2]] + ")";
          }
        });

        const percent = Math.round(score / questions.length * 100);
        const message = score === 9
          ? "Excellent ! 🎉"
          : score >= 7
          ? "Très bien !"
          : "Continuez à vous entraîner !";

        result.textContent =
          "Résultat : " + score + " / 9 (" +
          percent + " %) — " + message;
        result.hidden = false;
      }

      function showAnswers() {
        rows.forEach((row, i) => {
          row.querySelector("select").value = questions[i][2];
        });
        checkAnswers();
      }

      function resetQuiz() {
        rows.forEach(row => {
          row.querySelector("select").value = "";
          row.classList.remove("correct", "wrong");
          row.querySelector(".feedback").textContent = "";
        });
        result.hidden = true;
      }

      root.querySelector('[data-action="check"]')
        .addEventListener("click", checkAnswers);
      root.querySelector('[data-action="answers"]')
        .addEventListener("click", showAnswers);
      root.querySelector('[data-action="reset"]')
        .addEventListener("click", resetQuiz);
    })();
  </script>
</div>