{"id":523,"date":"2026-09-08T08:08:09","date_gmt":"2026-09-08T08:08:09","guid":{"rendered":"https:\/\/maroczain.com\/scolaire.maroczain.com\/?page_id=523"},"modified":"2026-09-08T08:08:09","modified_gmt":"2026-09-08T08:08:09","slug":"allemand-deutsch","status":"publish","type":"page","link":"https:\/\/maroczain.com\/scolaire.maroczain.com\/allemand-deutsch\/","title":{"rendered":"Allemand &#8211; Deutsch"},"content":{"rendered":"\n<script>\nconst allemand = {\n  title:\"Allemand\",\n  filiere:\"Langues\",\n  niveau:\"A1 \u00e0 C1\",\n  duree:\"120 h\",\n  description:\"Apprentissage progressif de l'allemand g\u00e9n\u00e9ral et professionnel.\",\n  modules:[\n    \"Alphabet, sons et prononciation\",\n    \"Salutations et pr\u00e9sentations\",\n    \"Nombres, dates et heures\",\n    \"Articles et genres\",\n    \"Pronoms personnels\",\n    \"Verbes sein et haben\",\n    \"Pr\u00e9sent des verbes r\u00e9guliers\",\n    \"Verbes irr\u00e9guliers essentiels\",\n    \"Questions et r\u00e9ponses simples\",\n    \"Famille et vie quotidienne\",\n    \"Maison et logement\",\n    \"\u00c9cole et \u00e9tudes\",\n    \"Travail et m\u00e9tiers\",\n    \"Voyages et transports\",\n    \"A\u00e9roport et aviation\",\n    \"H\u00f4tel et tourisme\",\n    \"Restaurant et alimentation\",\n    \"Achats et commerce\",\n    \"Sant\u00e9 et urgences\",\n    \"Modalverben\",\n    \"Accusatif\",\n    \"Datif\",\n    \"Pr\u00e9positions\",\n    \"Pass\u00e9 Perfekt\",\n    \"Futur\",\n    \"Adjectifs\",\n    \"Comparatif et superlatif\",\n    \"Propositions subordonn\u00e9es\",\n    \"Compr\u00e9hension \u00e9crite A2\",\n    \"Expression orale A2\",\n    \"Correspondance professionnelle\",\n    \"T\u00e9l\u00e9phone professionnel\",\n    \"R\u00e9unions et rendez-vous\",\n    \"Allemand commercial\",\n    \"Allemand du tourisme\",\n    \"Allemand a\u00e9rien\",\n    \"Entretien d'embauche\",\n    \"R\u00e9daction d'e-mails\",\n    \"Compr\u00e9hension B1-B2\",\n    \"Expression orale B1-B2\",\n    \"Argumentation\",\n    \"Pr\u00e9sentations professionnelles\",\n    \"Vocabulaire avanc\u00e9\",\n    \"Grammaire avanc\u00e9e\",\n    \"Compr\u00e9hension C1\",\n    \"Expression C1\",\n    \"Simulation professionnelle\",\n    \"Examen final\"\n  ]\n};\n<\/script>\n\n\n\n<div id=\"mza-german-course\">\n\n<style>\n#mza-german-course,\n#mza-german-course *{\n  box-sizing:border-box;\n}\n\n#mza-german-course{\n  width:100%;\n  max-width:1500px;\n  margin:0 auto;\n  padding:24px;\n  background:#f5f7fb;\n  font-family:Arial,Helvetica,sans-serif;\n  color:#10243e;\n}\n\n#mza-german-course .hero{\n  background:linear-gradient(135deg,#071b35,#0d3b66);\n  color:#fff;\n  border-radius:26px;\n  padding:36px;\n  margin-bottom:22px;\n  box-shadow:0 18px 45px rgba(0,0,0,.12);\n}\n\n#mza-german-course .eyebrow{\n  font-size:12px;\n  font-weight:900;\n  letter-spacing:1.5px;\n  text-transform:uppercase;\n  color:#f0c45b;\n  margin-bottom:8px;\n}\n\n#mza-german-course .hero h1{\n  margin:0 0 12px;\n  font-size:40px;\n}\n\n#mza-german-course .hero p{\n  margin:0;\n  max-width:950px;\n  font-size:17px;\n  line-height:1.65;\n  opacity:.94;\n}\n\n#mza-german-course .stats{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:12px;\n  margin-top:24px;\n}\n\n#mza-german-course .stat{\n  background:rgba(255,255,255,.11);\n  border:1px solid rgba(255,255,255,.18);\n  border-radius:16px;\n  padding:16px;\n}\n\n#mza-german-course .stat strong{\n  display:block;\n  font-size:24px;\n  margin-bottom:5px;\n}\n\n#mza-german-course .controls{\n  background:#fff;\n  padding:18px;\n  border-radius:20px;\n  margin-bottom:22px;\n  box-shadow:0 10px 30px rgba(15,35,60,.06);\n}\n\n#mza-german-course .search{\n  width:100%;\n  min-height:50px;\n  border:1px solid #dbe3ec;\n  border-radius:13px;\n  padding:0 16px;\n  font-size:15px;\n  margin-bottom:14px;\n  outline:none;\n}\n\n#mza-german-course .search:focus{\n  border-color:#0d3b66;\n}\n\n#mza-german-course .filters{\n  display:flex;\n  flex-wrap:wrap;\n  gap:9px;\n}\n\n#mza-german-course .filter{\n  border:1px solid #dbe3ec;\n  background:#fff;\n  color:#17324e;\n  padding:10px 15px;\n  border-radius:999px;\n  font-weight:800;\n  cursor:pointer;\n}\n\n#mza-german-course .filter.active{\n  background:#0d3b66;\n  color:#fff;\n  border-color:#0d3b66;\n}\n\n#mza-german-course .layout{\n  display:grid;\n  grid-template-columns:350px minmax(0,1fr);\n  gap:20px;\n}\n\n#mza-german-course .sidebar,\n#mza-german-course .lesson{\n  background:#fff;\n  border-radius:22px;\n  box-shadow:0 10px 32px rgba(15,35,60,.07);\n}\n\n#mza-german-course .sidebar{\n  padding:16px;\n  align-self:start;\n}\n\n#mza-german-course .sidebar h2{\n  margin:3px 4px 14px;\n  font-size:19px;\n}\n\n#mza-german-course .module-list{\n  display:flex;\n  flex-direction:column;\n  gap:8px;\n}\n\n#mza-german-course .module{\n  width:100%;\n  text-align:left;\n  border:1px solid #e1e7ee;\n  background:#f8fafc;\n  color:#18334f;\n  border-radius:12px;\n  padding:13px;\n  cursor:pointer;\n  font-weight:800;\n  line-height:1.4;\n}\n\n#mza-german-course .module:hover{\n  border-color:#0d3b66;\n}\n\n#mza-german-course .module.active{\n  background:#0d3b66;\n  color:#fff;\n  border-color:#0d3b66;\n}\n\n#mza-german-course .module small{\n  display:block;\n  font-size:10px;\n  opacity:.7;\n  margin-bottom:4px;\n}\n\n#mza-german-course .lesson{\n  padding:30px;\n  min-height:650px;\n}\n\n#mza-german-course .badge{\n  display:inline-block;\n  background:#eaf1f7;\n  color:#0d3b66;\n  padding:7px 12px;\n  border-radius:999px;\n  font-size:12px;\n  font-weight:900;\n  margin-bottom:12px;\n}\n\n#mza-german-course .lesson h2{\n  margin:0 0 12px;\n  font-size:31px;\n  color:#071b35;\n}\n\n#mza-german-course .lesson h3{\n  margin-top:27px;\n  color:#0d3b66;\n}\n\n#mza-german-course .lesson p,\n#mza-german-course .lesson li{\n  font-size:16px;\n  line-height:1.75;\n  color:#4d5d71;\n}\n\n#mza-german-course .lesson ul{\n  padding-left:22px;\n}\n\n#mza-german-course .box{\n  background:#f6f9fc;\n  border-left:5px solid #0d3b66;\n  border-radius:13px;\n  padding:18px;\n  margin:20px 0;\n}\n\n#mza-german-course .dialogue{\n  background:#fff8e8;\n  border-left:5px solid #d6a72d;\n}\n\n#mza-german-course .vocab{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:10px;\n  margin-top:12px;\n}\n\n#mza-german-course .word{\n  background:#f7f9fc;\n  border-radius:12px;\n  padding:12px;\n}\n\n#mza-german-course .word strong{\n  color:#071b35;\n}\n\n#mza-german-course .nav{\n  display:flex;\n  gap:10px;\n  flex-wrap:wrap;\n  margin-top:28px;\n}\n\n#mza-german-course .btn{\n  min-height:46px;\n  padding:10px 17px;\n  border-radius:12px;\n  border:0;\n  cursor:pointer;\n  font-weight:900;\n}\n\n#mza-german-course .btn-primary{\n  background:#0d3b66;\n  color:#fff;\n}\n\n#mza-german-course .btn-light{\n  background:#eef3f8;\n  color:#0d3b66;\n}\n\n#mza-german-course .empty{\n  display:none;\n  padding:25px;\n  text-align:center;\n  font-weight:800;\n}\n\n@media(max-width:980px){\n  #mza-german-course .layout{\n    grid-template-columns:1fr;\n  }\n\n  #mza-german-course .stats{\n    grid-template-columns:repeat(2,1fr);\n  }\n}\n\n@media(max-width:650px){\n  #mza-german-course{\n    padding:10px;\n  }\n\n  #mza-german-course .hero{\n    padding:24px 18px;\n  }\n\n  #mza-german-course .hero h1{\n    font-size:29px;\n  }\n\n  #mza-german-course .vocab{\n    grid-template-columns:1fr;\n  }\n}\n<\/style>\n\n<section class=\"hero\">\n  <div class=\"eyebrow\">Maroc Zain Academy \u2022 Langues<\/div>\n  <h1>\ud83c\udde9\ud83c\uddea Allemand \u2014 Deutsch<\/h1>\n  <p>\n    Parcours progressif de A1 \u00e0 C1 : vocabulaire, grammaire, compr\u00e9hension,\n    expression orale, allemand professionnel, tourisme, a\u00e9rien et situations pratiques.\n  <\/p>\n\n  <div class=\"stats\">\n    <div class=\"stat\"><strong>5<\/strong>Niveaux<\/div>\n    <div class=\"stat\"><strong>50<\/strong>Le\u00e7ons<\/div>\n    <div class=\"stat\"><strong>120 h<\/strong>Parcours<\/div>\n    <div class=\"stat\"><strong>A1 \u2192 C1<\/strong>Progression<\/div>\n  <\/div>\n<\/section>\n\n<section class=\"controls\">\n  <input\n    id=\"germanSearch\"\n    class=\"search\"\n    type=\"text\"\n    placeholder=\"Rechercher une le\u00e7on : voyage, grammaire, h\u00f4tel, a\u00e9roport...\"\n  >\n\n  <div class=\"filters\">\n    <button class=\"filter active\" data-level=\"all\">Tous<\/button>\n    <button class=\"filter\" data-level=\"A1\">A1<\/button>\n    <button class=\"filter\" data-level=\"A2\">A2<\/button>\n    <button class=\"filter\" data-level=\"B1\">B1<\/button>\n    <button class=\"filter\" data-level=\"B2\">B2<\/button>\n    <button class=\"filter\" data-level=\"C1\">C1<\/button>\n  <\/div>\n<\/section>\n\n<div class=\"layout\">\n\n  <aside class=\"sidebar\">\n    <h2>Programme<\/h2>\n    <div id=\"moduleList\" class=\"module-list\"><\/div>\n    <div id=\"emptyMessage\" class=\"empty\">Aucune le\u00e7on trouv\u00e9e.<\/div>\n  <\/aside>\n\n  <main class=\"lesson\">\n    <div id=\"lessonBadge\" class=\"badge\"><\/div>\n    <h2 id=\"lessonTitle\"><\/h2>\n    <div id=\"lessonContent\"><\/div>\n\n    <div class=\"nav\">\n      <button id=\"prevBtn\" class=\"btn btn-light\">\u2190 Le\u00e7on pr\u00e9c\u00e9dente<\/button>\n      <button id=\"nextBtn\" class=\"btn btn-primary\">Le\u00e7on suivante \u2192<\/button>\n    <\/div>\n  <\/main>\n\n<\/div>\n\n<script>\n(function(){\n\nconst lessons = [\n{level:\"A1\",title:\"Alphabet et prononciation\"},\n{level:\"A1\",title:\"Salutations et pr\u00e9sentations\"},\n{level:\"A1\",title:\"Nombres, dates et heures\"},\n{level:\"A1\",title:\"Les articles der, die, das\"},\n{level:\"A1\",title:\"Pronoms personnels\"},\n{level:\"A1\",title:\"Les verbes sein et haben\"},\n{level:\"A1\",title:\"Pr\u00e9sent des verbes r\u00e9guliers\"},\n{level:\"A1\",title:\"Questions simples\"},\n{level:\"A1\",title:\"La famille\"},\n{level:\"A1\",title:\"La vie quotidienne\"},\n\n{level:\"A2\",title:\"Les verbes modaux\"},\n{level:\"A2\",title:\"L'accusatif\"},\n{level:\"A2\",title:\"Le datif\"},\n{level:\"A2\",title:\"Les pr\u00e9positions\"},\n{level:\"A2\",title:\"Le pass\u00e9 Perfekt\"},\n{level:\"A2\",title:\"Le logement\"},\n{level:\"A2\",title:\"La ville et les directions\"},\n{level:\"A2\",title:\"Les achats\"},\n{level:\"A2\",title:\"Le restaurant\"},\n{level:\"A2\",title:\"La sant\u00e9\"},\n\n{level:\"B1\",title:\"Voyages et transports\"},\n{level:\"B1\",title:\"\u00c0 l'a\u00e9roport\"},\n{level:\"B1\",title:\"\u00c0 l'h\u00f4tel\"},\n{level:\"B1\",title:\"Le tourisme\"},\n{level:\"B1\",title:\"Le monde du travail\"},\n{level:\"B1\",title:\"T\u00e9l\u00e9phoner en allemand\"},\n{level:\"B1\",title:\"\u00c9crire un e-mail professionnel\"},\n{level:\"B1\",title:\"Entretien d'embauche\"},\n{level:\"B1\",title:\"R\u00e9unions professionnelles\"},\n{level:\"B1\",title:\"Exprimer une opinion\"},\n\n{level:\"B2\",title:\"Allemand commercial\"},\n{level:\"B2\",title:\"N\u00e9gociation professionnelle\"},\n{level:\"B2\",title:\"Pr\u00e9sentations professionnelles\"},\n{level:\"B2\",title:\"Service client\"},\n{level:\"B2\",title:\"Gestion d'une r\u00e9clamation\"},\n{level:\"B2\",title:\"Allemand a\u00e9rien\"},\n{level:\"B2\",title:\"Allemand du tourisme\"},\n{level:\"B2\",title:\"Correspondance avanc\u00e9e\"},\n{level:\"B2\",title:\"Argumentation\"},\n{level:\"B2\",title:\"Compr\u00e9hension avanc\u00e9e\"},\n\n{level:\"C1\",title:\"Vocabulaire professionnel avanc\u00e9\"},\n{level:\"C1\",title:\"Grammaire avanc\u00e9e\"},\n{level:\"C1\",title:\"Subordonn\u00e9es complexes\"},\n{level:\"C1\",title:\"Discours professionnel\"},\n{level:\"C1\",title:\"Analyse de documents\"},\n{level:\"C1\",title:\"Pr\u00e9sentation strat\u00e9gique\"},\n{level:\"C1\",title:\"Communication de crise\"},\n{level:\"C1\",title:\"Simulation professionnelle\"},\n{level:\"C1\",title:\"Pr\u00e9paration examen C1\"},\n{level:\"C1\",title:\"Examen final\"}\n];\n\nconst vocabByLevel = {\nA1:[\n[\"Guten Tag\",\"Bonjour\"],\n[\"Danke\",\"Merci\"],\n[\"Bitte\",\"S'il vous pla\u00eet \/ de rien\"],\n[\"Ja\",\"Oui\"],\n[\"Nein\",\"Non\"],\n[\"Wie hei\u00dfen Sie?\",\"Comment vous appelez-vous ?\"]\n],\nA2:[\n[\"der Bahnhof\",\"la gare\"],\n[\"die Wohnung\",\"le logement\"],\n[\"einkaufen\",\"faire des achats\"],\n[\"bezahlen\",\"payer\"],\n[\"brauchen\",\"avoir besoin de\"],\n[\"helfen\",\"aider\"]\n],\nB1:[\n[\"die Reise\",\"le voyage\"],\n[\"der Flughafen\",\"l'a\u00e9roport\"],\n[\"die Buchung\",\"la r\u00e9servation\"],\n[\"der Kunde\",\"le client\"],\n[\"die Besprechung\",\"la r\u00e9union\"],\n[\"die Bewerbung\",\"la candidature\"]\n],\nB2:[\n[\"verhandeln\",\"n\u00e9gocier\"],\n[\"die Beschwerde\",\"la r\u00e9clamation\"],\n[\"die Dienstleistung\",\"le service\"],\n[\"die Vereinbarung\",\"l'accord\"],\n[\"zuverl\u00e4ssig\",\"fiable\"],\n[\"die Verantwortung\",\"la responsabilit\u00e9\"]\n],\nC1:[\n[\"die Herausforderung\",\"le d\u00e9fi\"],\n[\"die Unternehmensstrategie\",\"la strat\u00e9gie d'entreprise\"],\n[\"die Krisenkommunikation\",\"la communication de crise\"],\n[\"die Leistungsf\u00e4higkeit\",\"la performance\"],\n[\"ber\u00fccksichtigen\",\"prendre en consid\u00e9ration\"],\n[\"nachvollziehbar\",\"compr\u00e9hensible \/ tra\u00e7able\"]\n]\n};\n\nconst moduleList = document.getElementById(\"moduleList\");\nconst lessonTitle = document.getElementById(\"lessonTitle\");\nconst lessonBadge = document.getElementById(\"lessonBadge\");\nconst lessonContent = document.getElementById(\"lessonContent\");\nconst searchInput = document.getElementById(\"germanSearch\");\nconst emptyMessage = document.getElementById(\"emptyMessage\");\nconst prevBtn = document.getElementById(\"prevBtn\");\nconst nextBtn = document.getElementById(\"nextBtn\");\nconst filterButtons = Array.from(document.querySelectorAll(\"#mza-german-course .filter\"));\n\nlet currentLevel = \"all\";\nlet filteredLessons = lessons.slice();\nlet currentLesson = 0;\n\nfunction makeVocab(level){\n  return vocabByLevel[level].map(function(item){\n    return `\n      <div class=\"word\">\n        <strong>${item[0]}<\/strong><br>\n        ${item[1]}\n      <\/div>\n    `;\n  }).join(\"\");\n}\n\nfunction makeContent(lesson,index){\n\nlet dialogue = \"\";\n\nif(lesson.title.toLowerCase().includes(\"a\u00e9roport\")){\ndialogue = `\n<div class=\"box dialogue\">\n<strong>Dialogue pratique<\/strong>\n<p>\n\u2014 Guten Tag. Wo ist der Check-in-Schalter?<br>\n\u2014 Der Check-in-Schalter ist in Halle B.<br>\n\u2014 Vielen Dank.<br>\n\u2014 Gern geschehen.\n<\/p>\n<\/div>`;\n}\nelse if(lesson.title.toLowerCase().includes(\"h\u00f4tel\")){\ndialogue = `\n<div class=\"box dialogue\">\n<strong>Dialogue pratique<\/strong>\n<p>\n\u2014 Guten Abend. Ich habe ein Zimmer reserviert.<br>\n\u2014 Auf welchen Namen?<br>\n\u2014 Auf den Namen Kial.<br>\n\u2014 Einen Moment, bitte.\n<\/p>\n<\/div>`;\n}\nelse{\ndialogue = `\n<div class=\"box dialogue\">\n<strong>Mini-dialogue<\/strong>\n<p>\n\u2014 Guten Tag! Wie geht es Ihnen?<br>\n\u2014 Danke, sehr gut. Und Ihnen?<br>\n\u2014 Auch gut, danke.\n<\/p>\n<\/div>`;\n}\n\nreturn `\n<p>\nCette le\u00e7on appartient au niveau <strong>${lesson.level}<\/strong>.\nElle d\u00e9veloppe la compr\u00e9hension et l'utilisation pratique de\n<strong>${lesson.title}<\/strong>.\n<\/p>\n\n<div class=\"box\">\n<strong>\ud83c\udfaf Objectifs<\/strong>\n<ul>\n<li>Comprendre le vocabulaire principal.<\/li>\n<li>Utiliser les structures grammaticales essentielles.<\/li>\n<li>Construire des phrases correctes.<\/li>\n<li>R\u00e9agir dans une situation r\u00e9elle.<\/li>\n<\/ul>\n<\/div>\n\n<h3>1. Vocabulaire essentiel<\/h3>\n\n<div class=\"vocab\">\n${makeVocab(lesson.level)}\n<\/div>\n\n<h3>2. Point de langue<\/h3>\n\n<p>\nEn allemand, la position du verbe est essentielle. Dans une phrase d\u00e9clarative simple,\nle verbe conjugu\u00e9 se trouve g\u00e9n\u00e9ralement en deuxi\u00e8me position.\n<\/p>\n\n<div class=\"box\">\n<strong>Exemple<\/strong>\n<p>\nIch lerne Deutsch.<br>\nJe suis en train d'apprendre l'allemand.\n<\/p>\n\n<p>\nHeute lerne ich Deutsch.<br>\nAujourd'hui, j'apprends l'allemand.\n<\/p>\n<\/div>\n\n<h3>3. Situation pratique<\/h3>\n\n${dialogue}\n\n<h3>4. Exercice<\/h3>\n\n<div class=\"box\">\n<p><strong>Traduisez en allemand :<\/strong><\/p>\n<ul>\n<li>Bonjour, je m'appelle Mohammed.<\/li>\n<li>Je voudrais une r\u00e9servation.<\/li>\n<li>O\u00f9 se trouve l'a\u00e9roport ?<\/li>\n<li>Merci beaucoup.<\/li>\n<\/ul>\n<\/div>\n\n<h3>5. \u00c0 retenir<\/h3>\n\n<ul>\n<li>Apprendre le vocabulaire dans son contexte.<\/li>\n<li>Prononcer les phrases \u00e0 voix haute.<\/li>\n<li>Cr\u00e9er plusieurs phrases avec chaque mot nouveau.<\/li>\n<li>R\u00e9viser r\u00e9guli\u00e8rement plut\u00f4t que longtemps en une seule fois.<\/li>\n<\/ul>\n`;\n}\n\nfunction renderLesson(index){\n\nif(!filteredLessons.length) return;\n\ncurrentLesson = Math.max(0,Math.min(index,filteredLessons.length-1));\n\nconst lesson = filteredLessons[currentLesson];\n\nlessonBadge.textContent =\nlesson.level + \" \u2022 LE\u00c7ON \" +\nString(lessons.indexOf(lesson)+1).padStart(2,\"0\");\n\nlessonTitle.textContent = lesson.title;\nlessonContent.innerHTML = makeContent(lesson,currentLesson);\n\nArray.from(moduleList.querySelectorAll(\".module\")).forEach(function(btn,i){\n  btn.classList.toggle(\"active\",i===currentLesson);\n});\n\nprevBtn.style.opacity = currentLesson===0 ? \".4\" : \"1\";\nnextBtn.style.opacity = currentLesson===filteredLessons.length-1 ? \".4\" : \"1\";\n}\n\nfunction renderList(){\n\nconst term = searchInput.value.toLowerCase().trim();\n\nfilteredLessons = lessons.filter(function(lesson){\n\nconst levelOK =\ncurrentLevel===\"all\" ||\nlesson.level===currentLevel;\n\nconst searchOK =\n!term ||\nlesson.title.toLowerCase().includes(term);\n\nreturn levelOK && searchOK;\n\n});\n\nmoduleList.innerHTML = \"\";\n\nif(!filteredLessons.length){\n  emptyMessage.style.display = \"block\";\n  lessonTitle.textContent = \"Aucune le\u00e7on trouv\u00e9e\";\n  lessonBadge.textContent = \"\";\n  lessonContent.innerHTML =\n  \"<p>Modifiez les filtres ou votre recherche.<\/p>\";\n  return;\n}\n\nemptyMessage.style.display = \"none\";\n\nfilteredLessons.forEach(function(lesson,index){\n\nconst btn = document.createElement(\"button\");\n\nbtn.className = \"module\" + (index===0 ? \" active\" : \"\");\n\nbtn.innerHTML =\n\"<small>NIVEAU \"+lesson.level+\"<\/small>\" +\nlesson.title;\n\nbtn.addEventListener(\"click\",function(){\n  renderLesson(index);\n});\n\nmoduleList.appendChild(btn);\n\n});\n\nrenderLesson(0);\n}\n\nfilterButtons.forEach(function(button){\n\nbutton.addEventListener(\"click\",function(){\n\ncurrentLevel = this.dataset.level;\n\nfilterButtons.forEach(function(btn){\n  btn.classList.remove(\"active\");\n});\n\nthis.classList.add(\"active\");\n\nrenderList();\n\n});\n\n});\n\nsearchInput.addEventListener(\"input\",renderList);\n\nprevBtn.addEventListener(\"click\",function(){\n  if(currentLesson>0){\n    renderLesson(currentLesson-1);\n  }\n});\n\nnextBtn.addEventListener(\"click\",function(){\n  if(currentLesson<filteredLessons.length-1){\n    renderLesson(currentLesson+1);\n  }\n});\n\nrenderList();\n\n})();\n<\/script>\n\n<\/div>\n\n\n\n<div id=\"mza-deutsch-v300\">\n\n<style>\n#mza-deutsch-v300,\n#mza-deutsch-v300 *{box-sizing:border-box}\n\n#mza-deutsch-v300{\n  width:100%;\n  max-width:1500px;\n  margin:0 auto;\n  padding:20px;\n  background:#f4f7fb;\n  font-family:Arial,Helvetica,sans-serif;\n  color:#11263f;\n}\n\n#mza-deutsch-v300 button{\n  font-family:inherit;\n}\n\n\/* HERO *\/\n#mza-deutsch-v300 .hero{\n  background:linear-gradient(135deg,#06182f,#0c487c);\n  color:white;\n  border-radius:28px;\n  padding:34px;\n  box-shadow:0 18px 45px rgba(0,0,0,.12);\n  margin-bottom:20px;\n}\n\n#mza-deutsch-v300 .hero h1{\n  margin:8px 0 10px;\n  font-size:38px;\n}\n\n#mza-deutsch-v300 .hero p{\n  max-width:900px;\n  line-height:1.7;\n}\n\n#mza-deutsch-v300 .gold{\n  color:#f4c85b;\n  font-weight:900;\n  letter-spacing:1px;\n}\n\n\/* SCORE *\/\n#mza-deutsch-v300 .scores{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:12px;\n  margin-top:22px;\n}\n\n#mza-deutsch-v300 .score{\n  background:rgba(255,255,255,.12);\n  border:1px solid rgba(255,255,255,.2);\n  border-radius:15px;\n  padding:15px;\n}\n\n#mza-deutsch-v300 .score strong{\n  display:block;\n  font-size:23px;\n}\n\n\/* LEVELS *\/\n#mza-deutsch-v300 .levels{\n  display:flex;\n  gap:10px;\n  flex-wrap:wrap;\n  background:#fff;\n  border-radius:18px;\n  padding:15px;\n  margin-bottom:20px;\n  box-shadow:0 8px 25px rgba(0,0,0,.05);\n}\n\n#mza-deutsch-v300 .level{\n  border:1px solid #d8e1eb;\n  background:#fff;\n  color:#173554;\n  border-radius:999px;\n  padding:11px 20px;\n  font-weight:900;\n  cursor:pointer;\n}\n\n#mza-deutsch-v300 .level.active{\n  background:#0c487c;\n  color:#fff;\n  border-color:#0c487c;\n}\n\n\/* MENU JEUX *\/\n#mza-deutsch-v300 .games{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:14px;\n  margin-bottom:20px;\n}\n\n#mza-deutsch-v300 .game{\n  border:0;\n  background:#fff;\n  border-radius:18px;\n  padding:19px 14px;\n  text-align:left;\n  cursor:pointer;\n  box-shadow:0 8px 25px rgba(0,0,0,.06);\n  color:#102944;\n  transition:.2s;\n}\n\n#mza-deutsch-v300 .game:hover{\n  transform:translateY(-3px);\n}\n\n#mza-deutsch-v300 .game .ico{\n  font-size:31px;\n  display:block;\n  margin-bottom:8px;\n}\n\n#mza-deutsch-v300 .game strong{\n  display:block;\n  font-size:16px;\n}\n\n\/* APP *\/\n#mza-deutsch-v300 .app{\n  display:grid;\n  grid-template-columns:330px minmax(0,1fr);\n  gap:18px;\n}\n\n\/* SIDEBAR *\/\n#mza-deutsch-v300 .sidebar{\n  background:#fff;\n  border-radius:22px;\n  padding:16px;\n  box-shadow:0 8px 30px rgba(0,0,0,.06);\n  align-self:start;\n}\n\n#mza-deutsch-v300 .sidebar h3{\n  margin:5px 5px 14px;\n}\n\n#mza-deutsch-v300 .lesson-list{\n  display:flex;\n  flex-direction:column;\n  gap:7px;\n}\n\n#mza-deutsch-v300 .lesson-btn{\n  width:100%;\n  border:1px solid #e0e6ed;\n  background:#f8fafc;\n  color:#173554;\n  border-radius:11px;\n  padding:12px;\n  cursor:pointer;\n  text-align:left;\n  font-weight:800;\n  line-height:1.35;\n}\n\n#mza-deutsch-v300 .lesson-btn.active{\n  background:#0c487c;\n  color:#fff;\n  border-color:#0c487c;\n}\n\n\/* MAIN *\/\n#mza-deutsch-v300 .stage{\n  background:#fff;\n  border-radius:22px;\n  padding:28px;\n  min-height:620px;\n  box-shadow:0 8px 30px rgba(0,0,0,.06);\n}\n\n#mza-deutsch-v300 .badge{\n  display:inline-block;\n  background:#eaf2f9;\n  color:#0c487c;\n  padding:7px 12px;\n  border-radius:999px;\n  font-size:12px;\n  font-weight:900;\n}\n\n#mza-deutsch-v300 .stage h2{\n  font-size:29px;\n  margin:12px 0 14px;\n}\n\n#mza-deutsch-v300 .stage h3{\n  color:#0c487c;\n  margin-top:25px;\n}\n\n#mza-deutsch-v300 .stage p,\n#mza-deutsch-v300 .stage li{\n  line-height:1.75;\n  color:#526276;\n}\n\n\/* BOXES *\/\n#mza-deutsch-v300 .box{\n  background:#f5f8fb;\n  border-left:5px solid #0c487c;\n  border-radius:12px;\n  padding:17px;\n  margin:18px 0;\n}\n\n#mza-deutsch-v300 .mission{\n  background:#fff8e6;\n  border-left-color:#c69725;\n}\n\n#mza-deutsch-v300 .success{\n  background:#ebf8ef;\n  border-left-color:#27854a;\n}\n\n#mza-deutsch-v300 .danger{\n  background:#fff0f0;\n  border-left-color:#c64545;\n}\n\n\/* VOCAB *\/\n#mza-deutsch-v300 .vocab{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:10px;\n}\n\n#mza-deutsch-v300 .vocab div{\n  border:1px solid #e1e7ee;\n  border-radius:11px;\n  padding:12px;\n  background:#fafcff;\n}\n\n\/* ACTIONS *\/\n#mza-deutsch-v300 .actions{\n  display:flex;\n  gap:10px;\n  flex-wrap:wrap;\n  margin-top:25px;\n}\n\n#mza-deutsch-v300 .btn{\n  border:0;\n  border-radius:11px;\n  padding:12px 18px;\n  font-weight:900;\n  cursor:pointer;\n  background:#0c487c;\n  color:#fff;\n  min-height:44px;\n}\n\n#mza-deutsch-v300 .btn.secondary{\n  background:#e9eff5;\n  color:#173554;\n}\n\n#mza-deutsch-v300 .option{\n  display:block;\n  width:100%;\n  margin:9px 0;\n  padding:14px;\n  text-align:left;\n  background:#f8fafc;\n  border:1px solid #dde5ed;\n  border-radius:12px;\n  cursor:pointer;\n  font-weight:800;\n}\n\n#mza-deutsch-v300 .option.correct{\n  background:#e6f6eb;\n  border-color:#26864a;\n}\n\n#mza-deutsch-v300 .option.wrong{\n  background:#fff0f0;\n  border-color:#c74646;\n}\n\n\/* FLASHCARD *\/\n#mza-deutsch-v300 .flash{\n  min-height:220px;\n  background:#071c36;\n  border-radius:20px;\n  color:#fff;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  text-align:center;\n  padding:30px;\n  font-size:32px;\n  font-weight:900;\n  cursor:pointer;\n  margin:20px 0;\n}\n\n\/* PUZZLE *\/\n#mza-deutsch-v300 .puzzle-zone{\n  min-height:65px;\n  border:2px dashed #ccd7e2;\n  background:#fafcff;\n  padding:13px;\n  border-radius:12px;\n  margin:15px 0;\n}\n\n#mza-deutsch-v300 .words{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n}\n\n#mza-deutsch-v300 .word{\n  border:1px solid #d8e1ea;\n  background:#eef4f9;\n  padding:10px 14px;\n  border-radius:10px;\n  cursor:pointer;\n  font-weight:800;\n}\n\n\/* PROGRESS *\/\n#mza-deutsch-v300 .progress{\n  height:10px;\n  background:#dfe7ef;\n  border-radius:99px;\n  overflow:hidden;\n  margin-top:8px;\n}\n\n#mza-deutsch-v300 .progress span{\n  display:block;\n  height:100%;\n  width:0;\n  background:#0c487c;\n}\n\n\/* RESPONSIVE *\/\n@media(max-width:1050px){\n  #mza-deutsch-v300 .games{\n    grid-template-columns:repeat(2,1fr);\n  }\n  #mza-deutsch-v300 .app{\n    grid-template-columns:1fr;\n  }\n}\n\n@media(max-width:650px){\n  #mza-deutsch-v300{\n    padding:8px;\n  }\n\n  #mza-deutsch-v300 .hero{\n    padding:22px 17px;\n  }\n\n  #mza-deutsch-v300 .hero h1{\n    font-size:28px;\n  }\n\n  #mza-deutsch-v300 .scores,\n  #mza-deutsch-v300 .games,\n  #mza-deutsch-v300 .vocab{\n    grid-template-columns:1fr 1fr;\n  }\n\n  #mza-deutsch-v300 .stage{\n    padding:18px;\n  }\n}\n<\/style>\n\n\n<section class=\"hero\">\n  <div class=\"gold\">MAROC ZAIN ACADEMY \u2022 DEUTSCH 360\u00b0<\/div>\n  <h1>\ud83c\udde9\ud83c\uddea Allemand ludique A1 \u2192 C1<\/h1>\n\n  <p>\n    Apprendre par les cours, jeux, missions, dialogues, vocabulaire,\n    flashcards, exercices et examens.\n  <\/p>\n\n  <div class=\"scores\">\n    <div class=\"score\">\n      <strong id=\"mzaXP\">0 XP<\/strong>\n      Exp\u00e9rience\n    <\/div>\n\n    <div class=\"score\">\n      <strong id=\"mzaStars\">0 \u2b50<\/strong>\n      \u00c9toiles\n    <\/div>\n\n    <div class=\"score\">\n      <strong id=\"mzaMissions\">0<\/strong>\n      Missions\n    <\/div>\n\n    <div class=\"score\">\n      <strong id=\"mzaCurrentLevel\">A1<\/strong>\n      Niveau\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<nav class=\"levels\">\n  <button type=\"button\" class=\"level active\" data-level=\"A1\">A1<\/button>\n  <button type=\"button\" class=\"level\" data-level=\"A2\">A2<\/button>\n  <button type=\"button\" class=\"level\" data-level=\"B1\">B1<\/button>\n  <button type=\"button\" class=\"level\" data-level=\"B2\">B2<\/button>\n  <button type=\"button\" class=\"level\" data-level=\"C1\">C1<\/button>\n<\/nav>\n\n\n<section class=\"games\">\n\n  <button type=\"button\" class=\"game\" data-game=\"course\">\n    <span class=\"ico\">\ud83d\udcda<\/span>\n    <strong>Cours<\/strong>\n    Le\u00e7ons du niveau\n  <\/button>\n\n  <button type=\"button\" class=\"game\" data-game=\"quiz\">\n    <span class=\"ico\">\ud83e\udde0<\/span>\n    <strong>Quiz Express<\/strong>\n    Questions interactives\n  <\/button>\n\n  <button type=\"button\" class=\"game\" data-game=\"flash\">\n    <span class=\"ico\">\ud83c\udccf<\/span>\n    <strong>Flashcards<\/strong>\n    M\u00e9morisation rapide\n  <\/button>\n\n  <button type=\"button\" class=\"game\" data-game=\"puzzle\">\n    <span class=\"ico\">\ud83e\udde9<\/span>\n    <strong>Phrase Puzzle<\/strong>\n    Remettre les mots en ordre\n  <\/button>\n\n  <button type=\"button\" class=\"game\" data-game=\"dialogue\">\n    <span class=\"ico\">\ud83d\udcac<\/span>\n    <strong>Dialogue<\/strong>\n    Situation r\u00e9elle\n  <\/button>\n\n  <button type=\"button\" class=\"game\" data-game=\"airport\">\n    <span class=\"ico\">\u2708\ufe0f<\/span>\n    <strong>A\u00e9roport<\/strong>\n    Mission voyage\n  <\/button>\n\n  <button type=\"button\" class=\"game\" data-game=\"hotel\">\n    <span class=\"ico\">\ud83c\udfe8<\/span>\n    <strong>H\u00f4tel<\/strong>\n    Mission r\u00e9servation\n  <\/button>\n\n  <button type=\"button\" class=\"game\" data-game=\"exam\">\n    <span class=\"ico\">\ud83c\udf93<\/span>\n    <strong>Examen final<\/strong>\n    Test du niveau\n  <\/button>\n\n<\/section>\n\n\n<div class=\"app\">\n\n  <aside class=\"sidebar\">\n\n    <h3 id=\"mzaSidebarTitle\">Le\u00e7ons A1<\/h3>\n\n    <div class=\"progress\">\n      <span id=\"mzaProgress\"><\/span>\n    <\/div>\n\n    <p id=\"mzaProgressText\">Progression : 0%<\/p>\n\n    <div id=\"mzaLessonList\" class=\"lesson-list\"><\/div>\n\n  <\/aside>\n\n\n  <main class=\"stage\" id=\"mzaStage\"><\/main>\n\n<\/div>\n\n\n<script>\n(function(){\n\n\"use strict\";\n\nconst root = document.getElementById(\"mza-deutsch-v300\");\n\nif(!root) return;\n\n\n\/* =====================================================\n   DATA\n===================================================== *\/\n\nconst lessons = {\n\nA1:[\n\"Saluer et se pr\u00e9senter\",\n\"Alphabet et prononciation\",\n\"Nombres et \u00e2ge\",\n\"Jours, mois et dates\",\n\"Famille\",\n\"Articles der, die, das\",\n\"Verbes sein et haben\",\n\"Pr\u00e9sent\",\n\"Questions simples\",\n\"Vie quotidienne\"\n],\n\nA2:[\n\"Voyage et transport\",\n\"La ville\",\n\"Le logement\",\n\"Les pr\u00e9positions\",\n\"Le pass\u00e9 Perfekt\",\n\"Les verbes modaux\",\n\"Restaurant\",\n\"Achats\",\n\"Sant\u00e9\",\n\"Rendez-vous\"\n],\n\nB1:[\n\"A\u00e9roport\",\n\"H\u00f4tel\",\n\"Voyage professionnel\",\n\"T\u00e9l\u00e9phone\",\n\"E-mail professionnel\",\n\"Entretien d'embauche\",\n\"R\u00e9unions\",\n\"Service client\",\n\"Exprimer une opinion\",\n\"Pr\u00e9senter un projet\"\n],\n\nB2:[\n\"N\u00e9gociation\",\n\"R\u00e9clamations\",\n\"Allemand commercial\",\n\"Allemand a\u00e9rien\",\n\"Allemand touristique\",\n\"Argumentation\",\n\"Pr\u00e9sentations professionnelles\",\n\"Gestion des conflits\",\n\"Communication d'entreprise\",\n\"Compr\u00e9hension avanc\u00e9e\"\n],\n\nC1:[\n\"Communication strat\u00e9gique\",\n\"Vocabulaire avanc\u00e9\",\n\"Grammaire avanc\u00e9e\",\n\"Analyse de documents\",\n\"Leadership\",\n\"Gestion de crise\",\n\"Pr\u00e9sentation complexe\",\n\"N\u00e9gociation avanc\u00e9e\",\n\"Expression professionnelle\",\n\"Pr\u00e9paration examen C1\"\n]\n\n};\n\n\nconst vocab = {\n\nA1:[\n[\"Guten Tag\",\"Bonjour\"],\n[\"Hallo\",\"Salut\"],\n[\"Danke\",\"Merci\"],\n[\"Bitte\",\"S'il vous pla\u00eet\"],\n[\"Ja\",\"Oui\"],\n[\"Nein\",\"Non\"]\n],\n\nA2:[\n[\"der Bahnhof\",\"la gare\"],\n[\"die Wohnung\",\"le logement\"],\n[\"bezahlen\",\"payer\"],\n[\"helfen\",\"aider\"],\n[\"reisen\",\"voyager\"],\n[\"kaufen\",\"acheter\"]\n],\n\nB1:[\n[\"der Flughafen\",\"l'a\u00e9roport\"],\n[\"die Buchung\",\"la r\u00e9servation\"],\n[\"der Kunde\",\"le client\"],\n[\"die Reise\",\"le voyage\"],\n[\"die Besprechung\",\"la r\u00e9union\"],\n[\"die Bewerbung\",\"la candidature\"]\n],\n\nB2:[\n[\"verhandeln\",\"n\u00e9gocier\"],\n[\"die Beschwerde\",\"la r\u00e9clamation\"],\n[\"die Verantwortung\",\"la responsabilit\u00e9\"],\n[\"die Vereinbarung\",\"l'accord\"],\n[\"zuverl\u00e4ssig\",\"fiable\"],\n[\"die Dienstleistung\",\"le service\"]\n],\n\nC1:[\n[\"die Herausforderung\",\"le d\u00e9fi\"],\n[\"die Unternehmensstrategie\",\"la strat\u00e9gie d'entreprise\"],\n[\"ber\u00fccksichtigen\",\"prendre en compte\"],\n[\"die Leistungsf\u00e4higkeit\",\"la performance\"],\n[\"die Krisenkommunikation\",\"la communication de crise\"],\n[\"nachvollziehbar\",\"compr\u00e9hensible\"]\n]\n\n};\n\n\n\/* =====================================================\n   STATE\n===================================================== *\/\n\nlet level = \"A1\";\nlet lessonIndex = 0;\n\nlet xp = Number(localStorage.getItem(\"mzaDeutschXP\") || 0);\nlet stars = Number(localStorage.getItem(\"mzaDeutschStars\") || 0);\nlet missions = Number(localStorage.getItem(\"mzaDeutschMissions\") || 0);\n\n\n\/* =====================================================\n   ELEMENTS\n===================================================== *\/\n\nconst stage = root.querySelector(\"#mzaStage\");\nconst lessonList = root.querySelector(\"#mzaLessonList\");\nconst sidebarTitle = root.querySelector(\"#mzaSidebarTitle\");\n\nconst xpEl = root.querySelector(\"#mzaXP\");\nconst starsEl = root.querySelector(\"#mzaStars\");\nconst missionsEl = root.querySelector(\"#mzaMissions\");\nconst levelEl = root.querySelector(\"#mzaCurrentLevel\");\n\nconst progress = root.querySelector(\"#mzaProgress\");\nconst progressText = root.querySelector(\"#mzaProgressText\");\n\n\n\/* =====================================================\n   SCORE\n===================================================== *\/\n\nfunction saveScore(){\n\nlocalStorage.setItem(\"mzaDeutschXP\",xp);\nlocalStorage.setItem(\"mzaDeutschStars\",stars);\nlocalStorage.setItem(\"mzaDeutschMissions\",missions);\n\n}\n\nfunction updateScore(){\n\nxpEl.textContent = xp + \" XP\";\nstarsEl.textContent = stars + \" \u2b50\";\nmissionsEl.textContent = missions;\nlevelEl.textContent = level;\n\nconst percentage =\nMath.round(((lessonIndex+1) \/ lessons[level].length) * 100);\n\nprogress.style.width = percentage + \"%\";\nprogressText.textContent = \"Progression : \" + percentage + \"%\";\n\nsaveScore();\n\n}\n\nfunction reward(points){\n\nxp += points;\nstars += 1;\nupdateScore();\n\n}\n\n\n\/* =====================================================\n   LESSON LIST\n===================================================== *\/\n\nfunction renderLessonList(){\n\nsidebarTitle.textContent = \"Le\u00e7ons \" + level;\n\nlessonList.innerHTML = \"\";\n\nlessons[level].forEach(function(title,index){\n\nconst btn = document.createElement(\"button\");\n\nbtn.type = \"button\";\nbtn.className = \"lesson-btn\";\n\nif(index === lessonIndex){\nbtn.classList.add(\"active\");\n}\n\nbtn.textContent =\nString(index+1).padStart(2,\"0\") + \" \u2014 \" + title;\n\nbtn.addEventListener(\"click\",function(){\n\nlessonIndex = index;\n\nrenderLessonList();\nrenderLesson();\n\n});\n\nlessonList.appendChild(btn);\n\n});\n\nupdateScore();\n\n}\n\n\n\/* =====================================================\n   COURSE CONTENT\n===================================================== *\/\n\nfunction vocabHTML(){\n\nreturn vocab[level].map(function(v){\n\nreturn `\n<div>\n<strong>${v[0]}<\/strong><br>\n<span>${v[1]}<\/span>\n<\/div>\n`;\n\n}).join(\"\");\n\n}\n\n\nfunction renderLesson(){\n\nconst title = lessons[level][lessonIndex];\n\nstage.innerHTML = `\n\n<span class=\"badge\">\n${level} \u2022 LE\u00c7ON ${String(lessonIndex+1).padStart(2,\"0\")}\n<\/span>\n\n<h2>${title}<\/h2>\n\n<p>\nCette le\u00e7on vous apprend \u00e0 utiliser l'allemand\ndans une situation r\u00e9elle et progressive.\n<\/p>\n\n<div class=\"box\">\n<strong>\ud83c\udfaf Objectifs<\/strong>\n\n<ul>\n<li>Comprendre les mots essentiels.<\/li>\n<li>Construire des phrases simples et correctes.<\/li>\n<li>Comprendre une situation r\u00e9elle.<\/li>\n<li>Utiliser l'allemand \u00e0 l'oral et \u00e0 l'\u00e9crit.<\/li>\n<\/ul>\n<\/div>\n\n<h3>1. Vocabulaire<\/h3>\n\n<div class=\"vocab\">\n${vocabHTML()}\n<\/div>\n\n<h3>2. Exemple<\/h3>\n\n<div class=\"box mission\">\n\n<strong>Situation pratique<\/strong>\n\n<p>\nGuten Tag! Ich hei\u00dfe Mohammed.<br>\nIch komme aus Marokko.<br>\nIch lerne Deutsch.\n<\/p>\n\n<p>\nBonjour ! Je m'appelle Mohammed.<br>\nJe viens du Maroc.<br>\nJ'apprends l'allemand.\n<\/p>\n\n<\/div>\n\n<h3>3. D\u00e9fi<\/h3>\n\n<p>\nConstruisez oralement trois phrases\navec les nouveaux mots de cette le\u00e7on.\n<\/p>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn secondary\" id=\"mzaPrev\">\n\u2190 Le\u00e7on pr\u00e9c\u00e9dente\n<\/button>\n\n<button type=\"button\" class=\"btn\" id=\"mzaComplete\">\n\u2713 Valider la le\u00e7on\n<\/button>\n\n<button type=\"button\" class=\"btn\" id=\"mzaNext\">\nLe\u00e7on suivante \u2192\n<\/button>\n\n<\/div>\n\n`;\n\nroot.querySelector(\"#mzaPrev\").addEventListener(\"click\",function(){\n\nif(lessonIndex > 0){\n\nlessonIndex--;\n\nrenderLessonList();\nrenderLesson();\n\n}\n\n});\n\nroot.querySelector(\"#mzaNext\").addEventListener(\"click\",function(){\n\nif(lessonIndex < lessons[level].length-1){\n\nlessonIndex++;\n\nrenderLessonList();\nrenderLesson();\n\n}\n\n});\n\nroot.querySelector(\"#mzaComplete\").addEventListener(\"click\",function(){\n\nreward(10);\n\nthis.textContent = \"\u2713 Le\u00e7on valid\u00e9e +10 XP\";\nthis.disabled = true;\n\n});\n\n}\n\n\n\/* =====================================================\n   QUIZ\n===================================================== *\/\n\nfunction renderQuiz(){\n\nconst list = vocab[level];\nconst target = list[Math.floor(Math.random()*list.length)];\n\nlet choices = [target[1]];\n\nwhile(choices.length < Math.min(4,list.length)){\n\nconst candidate =\nlist[Math.floor(Math.random()*list.length)][1];\n\nif(!choices.includes(candidate)){\nchoices.push(candidate);\n}\n\n}\n\nchoices.sort(function(){\nreturn Math.random()-.5;\n});\n\nstage.innerHTML = `\n\n<span class=\"badge\">QUIZ ${level}<\/span>\n\n<h2>\ud83e\udde0 Quiz Express<\/h2>\n\n<p>Que signifie :<\/p>\n\n<h2>${target[0]}<\/h2>\n\n<div id=\"mzaQuizOptions\">\n\n${choices.map(function(choice){\n\nreturn `\n<button\ntype=\"button\"\nclass=\"option\"\ndata-value=\"${choice.replace(\/\"\/g,\"&quot;\")}\">\n${choice}\n<\/button>\n`;\n\n}).join(\"\")}\n\n<\/div>\n\n<div id=\"mzaQuizResult\"><\/div>\n\n<div class=\"actions\">\n<button type=\"button\" class=\"btn\" id=\"mzaNewQuiz\">\nQuestion suivante\n<\/button>\n<\/div>\n\n`;\n\nconst result = root.querySelector(\"#mzaQuizResult\");\n\nroot.querySelectorAll(\"#mzaQuizOptions .option\").forEach(function(btn){\n\nbtn.addEventListener(\"click\",function(){\n\nroot.querySelectorAll(\"#mzaQuizOptions .option\")\n.forEach(function(b){\nb.disabled = true;\n});\n\nif(this.dataset.value === target[1]){\n\nthis.classList.add(\"correct\");\n\nresult.innerHTML =\n'<div class=\"box success\">\u2705 Bonne r\u00e9ponse ! +20 XP<\/div>';\n\nreward(20);\n\n}else{\n\nthis.classList.add(\"wrong\");\n\nresult.innerHTML =\n'<div class=\"box danger\">\u274c R\u00e9ponse incorrecte.<\/div>';\n\n}\n\n});\n\n});\n\nroot.querySelector(\"#mzaNewQuiz\")\n.addEventListener(\"click\",renderQuiz);\n\n}\n\n\n\/* =====================================================\n   FLASHCARDS\n===================================================== *\/\n\nfunction renderFlash(){\n\nconst words = vocab[level];\n\nlet index = 0;\nlet front = true;\n\nfunction draw(){\n\nconst item = words[index];\n\nstage.innerHTML = `\n\n<span class=\"badge\">FLASHCARDS ${level}<\/span>\n\n<h2>\ud83c\udccf Carte ${index+1}\/${words.length}<\/h2>\n\n<div class=\"flash\" id=\"mzaFlashCard\">\n${front ? item[0] : item[1]}\n<\/div>\n\n<p>\nCliquez sur la carte pour afficher\n${front ? \"la traduction\" : \"le mot allemand\"}.\n<\/p>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn secondary\" id=\"mzaFlashPrev\">\n\u2190\n<\/button>\n\n<button type=\"button\" class=\"btn\" id=\"mzaFlashNext\">\nCarte suivante \u2192\n<\/button>\n\n<\/div>\n\n`;\n\nroot.querySelector(\"#mzaFlashCard\")\n.addEventListener(\"click\",function(){\n\nfront = !front;\ndraw();\n\n});\n\nroot.querySelector(\"#mzaFlashPrev\")\n.addEventListener(\"click\",function(){\n\nindex--;\n\nif(index < 0){\nindex = words.length-1;\n}\n\nfront = true;\ndraw();\n\n});\n\nroot.querySelector(\"#mzaFlashNext\")\n.addEventListener(\"click\",function(){\n\nindex++;\n\nif(index >= words.length){\n\nindex = 0;\nreward(10);\n\n}\n\nfront = true;\ndraw();\n\n});\n\n}\n\ndraw();\n\n}\n\n\n\/* =====================================================\n   PUZZLE\n===================================================== *\/\n\nfunction renderPuzzle(){\n\nconst correct = [\n\"Ich\",\n\"m\u00f6chte\",\n\"ein\",\n\"Zimmer\",\n\"reservieren\"\n];\n\nconst shuffled = [\n\"Zimmer\",\n\"reservieren\",\n\"Ich\",\n\"ein\",\n\"m\u00f6chte\"\n];\n\nlet answer = [];\n\nstage.innerHTML = `\n\n<span class=\"badge\">PHRASE PUZZLE<\/span>\n\n<h2>\ud83e\udde9 Construisez la phrase<\/h2>\n\n<p>\n<strong>Je voudrais r\u00e9server une chambre.<\/strong>\n<\/p>\n\n<div class=\"puzzle-zone\" id=\"mzaPuzzleAnswer\">\nCliquez sur les mots...\n<\/div>\n\n<div class=\"words\" id=\"mzaPuzzleWords\"><\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn secondary\" id=\"mzaResetPuzzle\">\nRecommencer\n<\/button>\n\n<button type=\"button\" class=\"btn\" id=\"mzaCheckPuzzle\">\nV\u00e9rifier\n<\/button>\n\n<\/div>\n\n<div id=\"mzaPuzzleResult\"><\/div>\n\n`;\n\nconst wordsContainer = root.querySelector(\"#mzaPuzzleWords\");\nconst answerBox = root.querySelector(\"#mzaPuzzleAnswer\");\n\nfunction buildWords(){\n\nwordsContainer.innerHTML = \"\";\n\nshuffled.forEach(function(word,index){\n\nconst btn = document.createElement(\"button\");\n\nbtn.type = \"button\";\nbtn.className = \"word\";\nbtn.textContent = word;\n\nbtn.addEventListener(\"click\",function(){\n\nif(btn.disabled) return;\n\nanswer.push(word);\n\nbtn.disabled = true;\nbtn.style.opacity = \".35\";\n\nanswerBox.textContent = answer.join(\" \");\n\n});\n\nwordsContainer.appendChild(btn);\n\n});\n\n}\n\nbuildWords();\n\nroot.querySelector(\"#mzaResetPuzzle\")\n.addEventListener(\"click\",function(){\n\nanswer = [];\nanswerBox.textContent = \"Cliquez sur les mots...\";\n\nbuildWords();\n\nroot.querySelector(\"#mzaPuzzleResult\").innerHTML = \"\";\n\n});\n\nroot.querySelector(\"#mzaCheckPuzzle\")\n.addEventListener(\"click\",function(){\n\nconst result = root.querySelector(\"#mzaPuzzleResult\");\n\nif(answer.join(\" \") === correct.join(\" \")){\n\nresult.innerHTML =\n'<div class=\"box success\">\u2705 Excellent ! Phrase correcte. +25 XP<\/div>';\n\nreward(25);\n\n}else{\n\nresult.innerHTML =\n'<div class=\"box danger\">\u274c L\u2019ordre n\u2019est pas encore correct. Recommencez.<\/div>';\n\n}\n\n});\n\n}\n\n\n\/* =====================================================\n   DIALOGUE\n===================================================== *\/\n\nfunction renderDialogue(){\n\nstage.innerHTML = `\n\n<span class=\"badge\">DIALOGUE ${level}<\/span>\n\n<h2>\ud83d\udcac Rencontre en Allemagne<\/h2>\n\n<div class=\"box mission\">\n\n<strong>Anna :<\/strong>\nGuten Tag! Wie hei\u00dfen Sie?<br><br>\n\n<strong>Vous :<\/strong>\nIch hei\u00dfe Mohammed.<br><br>\n\n<strong>Anna :<\/strong>\nWoher kommen Sie?<br><br>\n\n<strong>Vous :<\/strong>\nIch komme aus Marokko.<br><br>\n\n<strong>Anna :<\/strong>\nSch\u00f6n, Sie kennenzulernen!\n\n<\/div>\n\n<h3>Votre mission<\/h3>\n\n<p>\nLisez le dialogue \u00e0 haute voix et remplacez\nle nom et le pays par vos propres informations.\n<\/p>\n\n<div class=\"actions\">\n<button type=\"button\" class=\"btn\" id=\"mzaDialogueDone\">\nMission r\u00e9ussie\n<\/button>\n<\/div>\n\n<div id=\"mzaDialogueResult\"><\/div>\n\n`;\n\nroot.querySelector(\"#mzaDialogueDone\")\n.addEventListener(\"click\",function(){\n\nmissions++;\nreward(25);\n\nroot.querySelector(\"#mzaDialogueResult\").innerHTML =\n'<div class=\"box success\">\ud83c\udfc6 Mission valid\u00e9e : +25 XP<\/div>';\n\nthis.disabled = true;\n\n});\n\n}\n\n\n\/* =====================================================\n   AIRPORT\n===================================================== *\/\n\nfunction renderAirport(){\n\nstage.innerHTML = `\n\n<span class=\"badge\">MISSION A\u00c9ROPORT<\/span>\n\n<h2>\u2708\ufe0f A\u00e9roport de Francfort<\/h2>\n\n<p>\nVous cherchez votre porte d'embarquement.\nQue dites-vous ?\n<\/p>\n\n<div id=\"airportOptions\">\n\n<button type=\"button\" class=\"option\" data-good=\"0\">\nIch m\u00f6chte ein Zimmer.\n<\/button>\n\n<button type=\"button\" class=\"option\" data-good=\"1\">\nWo ist mein Flugsteig?\n<\/button>\n\n<button type=\"button\" class=\"option\" data-good=\"0\">\nIch m\u00f6chte Kaffee.\n<\/button>\n\n<\/div>\n\n<div id=\"airportResult\"><\/div>\n\n`;\n\nroot.querySelectorAll(\"#airportOptions .option\")\n.forEach(function(btn){\n\nbtn.addEventListener(\"click\",function(){\n\nconst result = root.querySelector(\"#airportResult\");\n\nif(this.dataset.good === \"1\"){\n\nthis.classList.add(\"correct\");\n\nresult.innerHTML = `\n<div class=\"box success\">\n\u2705 Parfait !<br><br>\n<strong>Wo ist mein Flugsteig?<\/strong><br>\nO\u00f9 est ma porte d'embarquement ?\n<\/div>\n`;\n\nmissions++;\nreward(30);\n\n}else{\n\nthis.classList.add(\"wrong\");\n\nresult.innerHTML =\n'<div class=\"box danger\">\u274c Essayez une autre r\u00e9ponse.<\/div>';\n\n}\n\n});\n\n});\n\n}\n\n\n\/* =====================================================\n   HOTEL\n===================================================== *\/\n\nfunction renderHotel(){\n\nstage.innerHTML = `\n\n<span class=\"badge\">MISSION H\u00d4TEL<\/span>\n\n<h2>\ud83c\udfe8 H\u00f4tel \u00e0 Berlin<\/h2>\n\n<div class=\"box mission\">\n\n<strong>R\u00e9ception :<\/strong>\nGuten Abend. Wie kann ich Ihnen helfen?\n\n<\/div>\n\n<p>\nQuelle phrase permet d'indiquer\nque vous avez r\u00e9serv\u00e9 une chambre ?\n<\/p>\n\n<div id=\"hotelOptions\">\n\n<button type=\"button\" class=\"option\" data-good=\"1\">\nIch habe ein Zimmer reserviert.\n<\/button>\n\n<button type=\"button\" class=\"option\" data-good=\"0\">\nIch habe einen Flughafen.\n<\/button>\n\n<button type=\"button\" class=\"option\" data-good=\"0\">\nIch komme morgen nicht.\n<\/button>\n\n<\/div>\n\n<div id=\"hotelResult\"><\/div>\n\n`;\n\nroot.querySelectorAll(\"#hotelOptions .option\")\n.forEach(function(btn){\n\nbtn.addEventListener(\"click\",function(){\n\nconst result = root.querySelector(\"#hotelResult\");\n\nif(this.dataset.good === \"1\"){\n\nthis.classList.add(\"correct\");\n\nresult.innerHTML = `\n<div class=\"box success\">\n\u2705 Tr\u00e8s bien !<br>\n<strong>Ich habe ein Zimmer reserviert.<\/strong><br>\nJ'ai r\u00e9serv\u00e9 une chambre.\n<\/div>\n`;\n\nmissions++;\nreward(30);\n\n}else{\n\nthis.classList.add(\"wrong\");\n\nresult.innerHTML =\n'<div class=\"box danger\">\u274c Ce n\u2019est pas la bonne phrase.<\/div>';\n\n}\n\n});\n\n});\n\n}\n\n\n\/* =====================================================\n   FINAL EXAM\n===================================================== *\/\n\nfunction renderExam(){\n\nconst questions = [\n\n{\nq:\"Que signifie \u00ab Guten Morgen \u00bb ?\",\na:[\"Bonsoir\",\"Bonjour le matin\",\"Merci\"],\ncorrect:1\n},\n\n{\nq:\"Traduisez \u00ab Flughafen \u00bb.\",\na:[\"A\u00e9roport\",\"Gare\",\"H\u00f4tel\"],\ncorrect:0\n},\n\n{\nq:\"Quelle phrase signifie \u00ab Je viens du Maroc \u00bb ?\",\na:[\n\"Ich komme aus Marokko.\",\n\"Ich gehe nach Marokko.\",\n\"Ich wohne Flughafen.\"\n],\ncorrect:0\n},\n\n{\nq:\"Quelle phrase permet de r\u00e9server ?\",\na:[\n\"Ich m\u00f6chte ein Zimmer reservieren.\",\n\"Ich bin ein Bahnhof.\",\n\"Ich trinke Flughafen.\"\n],\ncorrect:0\n},\n\n{\nq:\"Que signifie \u00ab Danke \u00bb ?\",\na:[\"Bonjour\",\"Merci\",\"Au revoir\"],\ncorrect:1\n}\n\n];\n\nlet current = 0;\nlet score = 0;\n\nfunction drawQuestion(){\n\nconst q = questions[current];\n\nstage.innerHTML = `\n\n<span class=\"badge\">\nEXAMEN FINAL ${level}\n<\/span>\n\n<h2>\ud83c\udf93 Question ${current+1}\/${questions.length}<\/h2>\n\n<h3>${q.q}<\/h3>\n\n<div id=\"examOptions\">\n\n${q.a.map(function(answer,index){\n\nreturn `\n<button\ntype=\"button\"\nclass=\"option\"\ndata-index=\"${index}\">\n${answer}\n<\/button>\n`;\n\n}).join(\"\")}\n\n<\/div>\n\n<div id=\"examFeedback\"><\/div>\n\n`;\n\nroot.querySelectorAll(\"#examOptions .option\")\n.forEach(function(btn){\n\nbtn.addEventListener(\"click\",function(){\n\nconst chosen = Number(this.dataset.index);\n\nroot.querySelectorAll(\"#examOptions .option\")\n.forEach(function(b){\nb.disabled = true;\n});\n\nif(chosen === q.correct){\n\nscore++;\nthis.classList.add(\"correct\");\n\n}else{\n\nthis.classList.add(\"wrong\");\n\n}\n\nsetTimeout(function(){\n\ncurrent++;\n\nif(current < questions.length){\n\ndrawQuestion();\n\n}else{\n\nshowExamResult();\n\n}\n\n},650);\n\n});\n\n});\n\n}\n\nfunction showExamResult(){\n\nconst percent =\nMath.round((score\/questions.length)*100);\n\nlet verdict = \"\u00c0 renforcer\";\n\nif(percent >= 60) verdict = \"Niveau satisfaisant\";\nif(percent >= 80) verdict = \"Tr\u00e8s bon niveau\";\n\nstage.innerHTML = `\n\n<span class=\"badge\">\nR\u00c9SULTAT EXAMEN ${level}\n<\/span>\n\n<h2>\ud83c\udf93 ${score}\/${questions.length}<\/h2>\n\n<div class=\"box ${percent>=60 ? \"success\":\"danger\"}\">\n\n<strong>${percent}% \u2014 ${verdict}<\/strong>\n\n<p>\nVous avez obtenu ${score} bonne(s) r\u00e9ponse(s)\nsur ${questions.length}.\n<\/p>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn secondary\" id=\"mzaExamRetry\">\nRecommencer l'examen\n<\/button>\n\n<button type=\"button\" class=\"btn\" id=\"mzaExamCourse\">\nRetour au cours\n<\/button>\n\n<\/div>\n\n`;\n\nif(percent >= 60){\n\nxp += 100;\nstars += 5;\nmissions++;\n\nupdateScore();\n\n}\n\nroot.querySelector(\"#mzaExamRetry\")\n.addEventListener(\"click\",renderExam);\n\nroot.querySelector(\"#mzaExamCourse\")\n.addEventListener(\"click\",function(){\n\nrenderLessonList();\nrenderLesson();\n\n});\n\n}\n\ndrawQuestion();\n\n}\n\n\n\/* =====================================================\n   LEVEL BUTTONS\n===================================================== *\/\n\nroot.querySelectorAll(\".level\").forEach(function(btn){\n\nbtn.addEventListener(\"click\",function(){\n\nroot.querySelectorAll(\".level\")\n.forEach(function(b){\nb.classList.remove(\"active\");\n});\n\nthis.classList.add(\"active\");\n\nlevel = this.dataset.level;\nlessonIndex = 0;\n\nrenderLessonList();\nrenderLesson();\n\n});\n\n});\n\n\n\/* =====================================================\n   GAME BUTTONS\n===================================================== *\/\n\nroot.querySelectorAll(\".game\").forEach(function(btn){\n\nbtn.addEventListener(\"click\",function(){\n\nconst game = this.dataset.game;\n\nif(game === \"course\") renderLesson();\nif(game === \"quiz\") renderQuiz();\nif(game === \"flash\") renderFlash();\nif(game === \"puzzle\") renderPuzzle();\nif(game === \"dialogue\") renderDialogue();\nif(game === \"airport\") renderAirport();\nif(game === \"hotel\") renderHotel();\nif(game === \"exam\") renderExam();\n\n});\n\n});\n\n\n\/* =====================================================\n   START\n===================================================== *\/\n\nrenderLessonList();\nrenderLesson();\nupdateScore();\n\n})();\n<\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Maroc Zain Academy \u2022 Langues \ud83c\udde9\ud83c\uddea Allemand \u2014 Deutsch Parcours progressif de A1 \u00e0 C1 : vocabulaire, grammaire, compr\u00e9hension, expression orale, allemand professionnel, tourisme, a\u00e9rien et situations pratiques. 5Niveaux 50Le\u00e7ons 120 hParcours A1 \u2192 C1Progression Tous A1 A2 B1 B2 C1 Programme Aucune le\u00e7on trouv\u00e9e. \u2190 Le\u00e7on pr\u00e9c\u00e9dente Le\u00e7on suivante \u2192 MAROC ZAIN ACADEMY \u2022 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-523","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":5,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/523\/revisions"}],"predecessor-version":[{"id":530,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/523\/revisions\/530"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/media?parent=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}