Directeur Maroc & Moyen-Orient | Maroc Zain Academy<\/title>\n\n<style>\n\n:root{\n --navy:#06172c;\n --blue:#0b3d91;\n --blue2:#1768d5;\n --cyan:#13b8d5;\n --gold:#e9c84a;\n --light:#f4f8fd;\n --white:#ffffff;\n --text:#172235;\n --muted:#6d7b90;\n --success:#16a66a;\n --danger:#dc4056;\n --warning:#ef9f25;\n --border:#dae5f2;\n --shadow:0 18px 45px rgba(12,43,81,.11);\n --radius:22px;\n}\n\n*{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\nhtml{\n scroll-behavior:smooth;\n}\n\nbody{\n font-family:Arial,Helvetica,sans-serif;\n background:var(--light);\n color:var(--text);\n line-height:1.6;\n}\n\nbutton,\ninput{\n font-family:inherit;\n}\n\nbutton{\n cursor:pointer;\n}\n\na{\n color:inherit;\n text-decoration:none;\n}\n\n.app{\n min-height:100vh;\n}\n\n\/* HEADER *\/\n\n.topbar{\n background:var(--navy);\n color:white;\n padding:12px 0;\n}\n\n.wrap{\n width:min(1280px,94%);\n margin:auto;\n}\n\n.topbar-inner{\n display:flex;\n justify-content:space-between;\n gap:20px;\n align-items:center;\n}\n\n.brand{\n font-weight:800;\n letter-spacing:1px;\n}\n\n.brand span{\n color:var(--gold);\n}\n\n.student-mini{\n font-size:13px;\n color:#bed0e6;\n}\n\n\/* HERO *\/\n\n.hero{\n padding:70px 0 80px;\n background:\n radial-gradient(circle at 18% 18%,rgba(18,184,213,.28),transparent 27%),\n radial-gradient(circle at 85% 15%,rgba(233,200,74,.15),transparent 25%),\n linear-gradient(135deg,#061426,#0a376b 58%,#0b3d91);\n color:white;\n}\n\n.hero-grid{\n display:grid;\n grid-template-columns:1.2fr .8fr;\n gap:45px;\n align-items:center;\n}\n\n.hero-tag{\n display:inline-block;\n padding:8px 14px;\n border-radius:999px;\n background:rgba(255,255,255,.1);\n border:1px solid rgba(255,255,255,.18);\n margin-bottom:18px;\n font-size:13px;\n}\n\n.hero h1{\n font-size:clamp(40px,6vw,72px);\n line-height:1.02;\n margin-bottom:18px;\n}\n\n.hero h1 span{\n color:var(--gold);\n}\n\n.hero p{\n max-width:760px;\n color:#d8e7fa;\n font-size:18px;\n}\n\n.hero-actions{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-top:26px;\n}\n\n.btn{\n border:none;\n padding:14px 20px;\n border-radius:13px;\n font-weight:800;\n transition:.2s ease;\n}\n\n.btn:hover{\n transform:translateY(-2px);\n}\n\n.btn-gold{\n background:var(--gold);\n color:#1e2940;\n}\n\n.btn-white{\n background:white;\n color:var(--blue);\n}\n\n.btn-blue{\n background:var(--blue);\n color:white;\n}\n\n.btn-danger{\n background:#ffe9ed;\n color:#a6283d;\n}\n\n.btn-dark{\n background:var(--navy);\n color:white;\n}\n\n\/* LOGIN CARD *\/\n\n.profile-card{\n background:rgba(255,255,255,.1);\n border:1px solid rgba(255,255,255,.2);\n border-radius:26px;\n padding:28px;\n backdrop-filter:blur(14px);\n}\n\n.profile-card h3{\n margin-bottom:15px;\n}\n\n.input{\n width:100%;\n border:1px solid rgba(255,255,255,.25);\n background:rgba(255,255,255,.09);\n color:white;\n padding:14px;\n border-radius:12px;\n margin-bottom:10px;\n outline:none;\n}\n\n.input::placeholder{\n color:#c8d7e9;\n}\n\n\/* NAV *\/\n\n.nav{\n background:white;\n position:sticky;\n top:0;\n z-index:50;\n box-shadow:0 6px 25px rgba(0,0,0,.07);\n}\n\n.nav-inner{\n display:flex;\n overflow-x:auto;\n gap:6px;\n padding:10px 0;\n}\n\n.nav a{\n white-space:nowrap;\n padding:10px 13px;\n border-radius:10px;\n color:#43536a;\n font-size:14px;\n font-weight:700;\n}\n\n.nav a:hover{\n background:#edf5ff;\n color:var(--blue);\n}\n\n\/* DASHBOARD *\/\n\nsection{\n padding:70px 0;\n}\n\n.section-title{\n margin-bottom:32px;\n}\n\n.eyebrow{\n color:var(--blue2);\n font-size:12px;\n font-weight:900;\n letter-spacing:2px;\n text-transform:uppercase;\n}\n\nh2{\n margin-top:5px;\n font-size:clamp(28px,4vw,46px);\n line-height:1.15;\n}\n\n.section-title p{\n max-width:800px;\n color:var(--muted);\n margin-top:10px;\n}\n\n.dashboard-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:16px;\n}\n\n.stat-card{\n background:white;\n padding:22px;\n border-radius:18px;\n box-shadow:var(--shadow);\n}\n\n.stat-label{\n color:var(--muted);\n font-size:13px;\n}\n\n.stat-number{\n font-size:34px;\n font-weight:900;\n color:var(--blue);\n}\n\n.progress-shell{\n height:11px;\n border-radius:30px;\n background:#e7eef7;\n overflow:hidden;\n margin-top:10px;\n}\n\n.progress-fill{\n height:100%;\n width:0;\n background:linear-gradient(90deg,var(--cyan),var(--gold));\n transition:.4s;\n}\n\n\/* PROFILE STRIP *\/\n\n.profile-strip{\n background:white;\n padding:22px;\n border-radius:20px;\n margin-top:20px;\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:20px;\n box-shadow:var(--shadow);\n}\n\n.level-badge{\n background:#edf4ff;\n color:var(--blue);\n padding:8px 14px;\n border-radius:999px;\n font-weight:800;\n}\n\n\/* MODULES *\/\n\n.modules{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:16px;\n}\n\n.module{\n background:white;\n border:1px solid var(--border);\n border-radius:18px;\n padding:21px;\n position:relative;\n box-shadow:0 10px 25px rgba(17,53,95,.07);\n}\n\n.module-number{\n width:42px;\n height:42px;\n display:flex;\n align-items:center;\n justify-content:center;\n border-radius:12px;\n background:var(--blue);\n color:white;\n font-weight:900;\n margin-bottom:12px;\n}\n\n.module h3{\n font-size:16px;\n min-height:42px;\n}\n\n.module p{\n font-size:13px;\n color:var(--muted);\n min-height:58px;\n}\n\n.module-actions{\n display:flex;\n justify-content:space-between;\n gap:8px;\n margin-top:15px;\n}\n\n.mini-btn{\n border:none;\n border-radius:10px;\n padding:9px 11px;\n font-size:12px;\n font-weight:800;\n}\n\n.complete-btn{\n background:#e9fff4;\n color:#087c4a;\n}\n\n.complete-btn.done{\n background:var(--success);\n color:white;\n}\n\n\/* QUIZ *\/\n\n.quiz-wrap{\n background:linear-gradient(140deg,#06172c,#0b396d);\n color:white;\n padding:32px;\n border-radius:26px;\n}\n\n.quiz-meta{\n display:flex;\n justify-content:space-between;\n gap:20px;\n margin-bottom:18px;\n color:#c9daec;\n}\n\n.quiz-question{\n background:rgba(255,255,255,.08);\n padding:21px;\n border-radius:15px;\n font-size:18px;\n margin-bottom:15px;\n}\n\n.quiz-option{\n width:100%;\n text-align:left;\n border:none;\n padding:15px;\n margin:7px 0;\n border-radius:12px;\n background:#123f70;\n color:white;\n transition:.15s;\n}\n\n.quiz-option:hover{\n background:#18528e;\n}\n\n.quiz-option.correct{\n background:var(--success);\n}\n\n.quiz-option.wrong{\n background:var(--danger);\n}\n\n.quiz-feedback{\n min-height:50px;\n margin-top:14px;\n color:#dce9f6;\n}\n\n.quiz-footer{\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:10px;\n margin-top:18px;\n}\n\n\/* CASE *\/\n\n.case-card{\n background:white;\n padding:28px;\n border-radius:22px;\n box-shadow:var(--shadow);\n}\n\n.alert{\n border-left:5px solid var(--warning);\n background:#fff6e8;\n padding:18px;\n margin:20px 0;\n border-radius:12px;\n}\n\n.case-choice{\n display:grid;\n grid-template-columns:repeat(2,1fr);\n gap:15px;\n}\n\n.case-btn{\n border:1px solid var(--border);\n background:white;\n padding:20px;\n border-radius:15px;\n text-align:left;\n font-weight:700;\n}\n\n.case-btn:hover{\n border-color:#93b9e8;\n background:#f5f9ff;\n}\n\n\/* BADGES *\/\n\n.badges{\n display:grid;\n grid-template-columns:repeat(5,1fr);\n gap:14px;\n}\n\n.badge-card{\n background:white;\n border-radius:18px;\n padding:20px;\n text-align:center;\n box-shadow:var(--shadow);\n opacity:.38;\n transition:.3s;\n}\n\n.badge-card.unlocked{\n opacity:1;\n transform:translateY(-4px);\n}\n\n.badge-icon{\n font-size:38px;\n}\n\n\/* EXAM *\/\n\n.exam-panel{\n background:white;\n border-radius:22px;\n box-shadow:var(--shadow);\n padding:28px;\n}\n\n.timeline{\n margin-top:20px;\n}\n\n.event{\n border-left:4px solid var(--blue2);\n padding:15px 20px;\n background:#f5f8fd;\n margin-bottom:10px;\n border-radius:0 14px 14px 0;\n}\n\n.event strong{\n color:var(--blue);\n}\n\n\/* CERTIFICATE *\/\n\n.certificate{\n background:white;\n min-height:650px;\n border:12px double var(--gold);\n padding:55px;\n text-align:center;\n box-shadow:var(--shadow);\n display:none;\n}\n\n.certificate.show{\n display:block;\n}\n\n.cert-logo{\n font-size:21px;\n font-weight:900;\n color:var(--blue);\n letter-spacing:2px;\n}\n\n.cert-title{\n font-size:52px;\n margin:30px 0 10px;\n color:var(--navy);\n font-family:Georgia,serif;\n}\n\n.cert-name{\n font-family:Georgia,serif;\n font-size:38px;\n color:var(--blue);\n margin:25px 0;\n font-weight:700;\n}\n\n.cert-course{\n font-size:24px;\n font-weight:800;\n}\n\n.cert-score{\n margin-top:25px;\n}\n\n.signature-row{\n display:flex;\n justify-content:space-around;\n margin-top:80px;\n}\n\n.signature{\n border-top:1px solid #555;\n padding-top:8px;\n min-width:220px;\n}\n\n\/* ADMIN *\/\n\n.control-panel{\n background:#07182c;\n color:white;\n border-radius:22px;\n padding:28px;\n}\n\n.control-actions{\n display:flex;\n flex-wrap:wrap;\n gap:10px;\n margin-top:18px;\n}\n\n\/* FOOTER *\/\n\nfooter{\n background:#04101d;\n color:#99aec8;\n text-align:center;\n padding:30px 0;\n}\n\nfooter strong{\n color:white;\n}\n\n\/* TOAST *\/\n\n.toast{\n position:fixed;\n right:20px;\n bottom:20px;\n background:#07182c;\n color:white;\n padding:14px 18px;\n border-radius:12px;\n opacity:0;\n transform:translateY(15px);\n pointer-events:none;\n transition:.3s;\n z-index:100;\n}\n\n.toast.show{\n opacity:1;\n transform:translateY(0);\n}\n\n\/* RESPONSIVE *\/\n\n@media(max-width:1050px){\n\n .modules{\n grid-template-columns:repeat(2,1fr);\n }\n\n .dashboard-grid{\n grid-template-columns:repeat(2,1fr);\n }\n\n .badges{\n grid-template-columns:repeat(3,1fr);\n }\n\n}\n\n@media(max-width:750px){\n\n .hero-grid{\n grid-template-columns:1fr;\n }\n\n .modules,\n .dashboard-grid,\n .badges,\n .case-choice{\n grid-template-columns:1fr;\n }\n\n .profile-strip{\n align-items:flex-start;\n flex-direction:column;\n }\n\n .hero{\n padding-top:50px;\n }\n\n .certificate{\n padding:25px;\n }\n\n .cert-title{\n font-size:36px;\n }\n\n}\n\n@media print{\n\n body *{\n visibility:hidden;\n }\n\n #certificate,\n #certificate *{\n visibility:visible;\n }\n\n #certificate{\n display:block !important;\n position:absolute;\n inset:0;\n width:100%;\n box-shadow:none;\n }\n\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"app\">\n\n\n<div class=\"topbar\">\n\n<div class=\"wrap topbar-inner\">\n\n<div class=\"brand\">\nMAROC ZAIN <span>ACADEMY<\/span>\n<\/div>\n\n<div class=\"student-mini\" id=\"topStudent\">\nApprenant non identifi\u00e9\n<\/div>\n\n<\/div>\n<\/div>\n\n\n<header class=\"hero\">\n\n<div class=\"wrap hero-grid\">\n\n<div>\n\n<div class=\"hero-tag\">\n\ud83c\udf93 EXECUTIVE AVIATION PROGRAM\n<\/div>\n\n<h1>\nDirecteur<br>\n<span>Maroc & Moyen-Orient<\/span>\n<\/h1>\n\n<p>\nProgramme de formation de haut niveau destin\u00e9 au pilotage d’une zone\ncommerciale a\u00e9rienne : strat\u00e9gie, revenus, r\u00e9seau, management,\ndiplomatie a\u00e9rienne, op\u00e9rations sp\u00e9ciales et gestion de crise.\n<\/p>\n\n<div class=\"hero-actions\">\n\n<a href=\"#dashboard\" class=\"btn btn-gold\">\n\ud83d\udcca Mon tableau de bord\n<\/a>\n\n<a href=\"#quiz\" class=\"btn btn-white\">\n\ud83d\udcdd Commencer le QCM\n<\/a>\n\n<\/div>\n\n<\/div>\n\n<div class=\"profile-card\">\n\n<h3>\ud83d\udc64 Espace apprenant<\/h3>\n\n<input\ntype=\"text\"\nclass=\"input\"\nid=\"studentName\"\nplaceholder=\"Nom et pr\u00e9nom\">\n\n<input\ntype=\"text\"\nclass=\"input\"\nid=\"studentId\"\nplaceholder=\"Identifiant apprenant\">\n\n<button\nclass=\"btn btn-gold\"\nonclick=\"saveProfile()\">\nEnregistrer mon profil\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n\n<nav class=\"nav\">\n\n<div class=\"wrap nav-inner\">\n\n<a href=\"#dashboard\">Dashboard<\/a>\n<a href=\"#modules\">Modules<\/a>\n<a href=\"#quiz\">QCM<\/a>\n<a href=\"#cases\">Cas<\/a>\n<a href=\"#badges\">Badges<\/a>\n<a href=\"#exam\">Examen<\/a>\n<a href=\"#certificate\">Certificat<\/a>\n\n<\/div>\n\n<\/nav>\n\n\n<section id=\"dashboard\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nESPACE APPRENANT\n<\/div>\n\n<h2>Votre progression Executive<\/h2>\n\n<p>\nVotre avancement est automatiquement sauvegard\u00e9 sur cet appareil.\n<\/p>\n\n<\/div>\n\n<div class=\"dashboard-grid\">\n\n<div class=\"stat-card\">\n\n<div class=\"stat-label\">\nModules termin\u00e9s\n<\/div>\n\n<div class=\"stat-number\" id=\"completedModules\">\n0\/20\n<\/div>\n\n<div class=\"progress-shell\">\n<div class=\"progress-fill\" id=\"moduleProgress\"><\/div>\n<\/div>\n\n<\/div>\n\n<div class=\"stat-card\">\n\n<div class=\"stat-label\">\nProgression\n<\/div>\n\n<div class=\"stat-number\" id=\"progressPercent\">\n0%\n<\/div>\n\n<div class=\"progress-shell\">\n<div class=\"progress-fill\" id=\"globalProgress\"><\/div>\n<\/div>\n\n<\/div>\n\n<div class=\"stat-card\">\n\n<div class=\"stat-label\">\nScore QCM\n<\/div>\n\n<div class=\"stat-number\" id=\"quizScoreDisplay\">\n0%\n<\/div>\n\n<\/div>\n\n<div class=\"stat-card\">\n\n<div class=\"stat-label\">\nBadges\n<\/div>\n\n<div class=\"stat-number\" id=\"badgeCount\">\n0\/5\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<div class=\"profile-strip\">\n\n<div>\n\n<strong id=\"dashboardName\">\nApprenant Maroc Zain Academy\n<\/strong>\n\n<div style=\"color:#6d7b90\">\nFormation Directeur Maroc & Moyen-Orient\n<\/div>\n\n<\/div>\n\n<div class=\"level-badge\" id=\"levelBadge\">\nNiveau : D\u00e9butant\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"modules\" style=\"background:#eef5fc\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\n20 MODULES\n<\/div>\n\n<h2>Parcours p\u00e9dagogique<\/h2>\n\n<p>\nCliquez sur \u00ab Termin\u00e9 \u00bb lorsque vous avez \u00e9tudi\u00e9 le module.\n<\/p>\n\n<\/div>\n\n<div class=\"modules\" id=\"moduleGrid\"><\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"quiz\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nQCM EXECUTIVE\n<\/div>\n\n<h2>\u00c9valuation des connaissances<\/h2>\n\n<p>\nLa banque ci-dessous peut \u00eatre \u00e9tendue \u00e0 plusieurs centaines ou milliers\nde questions.\n<\/p>\n\n<\/div>\n\n<div class=\"quiz-wrap\">\n\n<div class=\"quiz-meta\">\n\n<div>\nQuestion\n<span id=\"quizCurrent\">1<\/span>\n\/\n<span id=\"quizTotal\">0<\/span>\n<\/div>\n\n<div>\nScore :\n<span id=\"quizLiveScore\">0<\/span>\n<\/div>\n\n<\/div>\n\n<div\nclass=\"quiz-question\"\nid=\"quizQuestion\">\n<\/div>\n\n<div id=\"quizOptions\"><\/div>\n\n<div\nclass=\"quiz-feedback\"\nid=\"quizFeedback\">\n<\/div>\n\n<div class=\"quiz-footer\">\n\n<button\nclass=\"btn btn-gold\"\nonclick=\"nextQuestion()\">\nQuestion suivante\n<\/button>\n\n<button\nclass=\"btn btn-white\"\nonclick=\"restartQuiz()\">\nRecommencer\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"cases\" style=\"background:#eef5fc\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nSIMULATEUR\n<\/div>\n\n<h2>Cas de d\u00e9cision Executive<\/h2>\n\n<\/div>\n\n<div class=\"case-card\">\n\n<h3>\nCAS 001 \u2014 Sous-performance Casablanca\u2013Riyad\n<\/h3>\n\n<div class=\"alert\">\n\n<strong>ALERTE COMMERCIALE<\/strong><br>\n\nLoad Factor : 61 %<br>\nObjectif : 78 %<br>\nYield : +4 %<br>\nCorporate : -18 %\n\n<\/div>\n\n<p>\nQuelle doit \u00eatre votre premi\u00e8re r\u00e9action ?\n<\/p>\n\n<br>\n\n<div class=\"case-choice\">\n\n<button\nclass=\"case-btn\"\nonclick=\"caseAnswer(false)\">\n\u274c Baisser imm\u00e9diatement tous les tarifs de 20 %\n<\/button>\n\n<button\nclass=\"case-btn\"\nonclick=\"caseAnswer(true)\">\n\u2705 Identifier l’origine de la sous-performance avant toute action tarifaire\n<\/button>\n\n<button\nclass=\"case-btn\"\nonclick=\"caseAnswer(false)\">\n\u274c Augmenter imm\u00e9diatement la capacit\u00e9\n<\/button>\n\n<button\nclass=\"case-btn\"\nonclick=\"caseAnswer(false)\">\n\u274c Suspendre les ventes corporate\n<\/button>\n\n<\/div>\n\n<div\nid=\"caseFeedback\"\nstyle=\"margin-top:20px;font-weight:700\">\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"badges\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nGAMIFICATION\n<\/div>\n\n<h2>Badges de comp\u00e9tence<\/h2>\n\n<\/div>\n\n<div class=\"badges\">\n\n<div class=\"badge-card\" id=\"badge1\">\n<div class=\"badge-icon\">\ud83d\udcd8<\/div>\n<strong>Premiers pas<\/strong>\n<p>5 modules termin\u00e9s<\/p>\n<\/div>\n\n<div class=\"badge-card\" id=\"badge2\">\n<div class=\"badge-icon\">\ud83d\udcca<\/div>\n<strong>Manager<\/strong>\n<p>10 modules termin\u00e9s<\/p>\n<\/div>\n\n<div class=\"badge-card\" id=\"badge3\">\n<div class=\"badge-icon\">\ud83c\udf0d<\/div>\n<strong>Directeur de zone<\/strong>\n<p>15 modules termin\u00e9s<\/p>\n<\/div>\n\n<div class=\"badge-card\" id=\"badge4\">\n<div class=\"badge-icon\">\ud83d\udc51<\/div>\n<strong>Executive<\/strong>\n<p>20 modules termin\u00e9s<\/p>\n<\/div>\n\n<div class=\"badge-card\" id=\"badge5\">\n<div class=\"badge-icon\">\ud83c\udfc6<\/div>\n<strong>Excellence<\/strong>\n<p>QCM sup\u00e9rieur ou \u00e9gal \u00e0 80 %<\/p>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"exam\" style=\"background:#eef5fc\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nEXAMEN FINAL\n<\/div>\n\n<h2>Une journ\u00e9e dans la peau du Directeur<\/h2>\n\n<\/div>\n\n<div class=\"exam-panel\">\n\n<h3>\nSimulation de commandement\n<\/h3>\n\n<div class=\"timeline\">\n\n<div class=\"event\">\n<strong>08:00<\/strong><br>\nAnalyse du tableau de bord.\n<\/div>\n\n<div class=\"event\">\n<strong>08:15<\/strong><br>\nBaisse soudaine des ventes corporate.\n<\/div>\n\n<div class=\"event\">\n<strong>09:30<\/strong><br>\nIncident op\u00e9rationnel sur une escale.\n<\/div>\n\n<div class=\"event\">\n<strong>11:00<\/strong><br>\nAppel d’une autorit\u00e9.\n<\/div>\n\n<div class=\"event\">\n<strong>13:00<\/strong><br>\nPromotion agressive d’un concurrent.\n<\/div>\n\n<div class=\"event\">\n<strong>15:00<\/strong><br>\nIncident VIP.\n<\/div>\n\n<div class=\"event\">\n<strong>17:00<\/strong><br>\nD\u00e9passement budg\u00e9taire.\n<\/div>\n\n<div class=\"event\">\n<strong>18:30<\/strong><br>\nPr\u00e9sentation du rapport \u00e0 la Direction g\u00e9n\u00e9rale.\n<\/div>\n\n<\/div>\n\n<br>\n\n<button\nclass=\"btn btn-blue\"\nonclick=\"completeExam()\">\n\ud83c\udfaf Valider l’examen final\n<\/button>\n\n<div\nid=\"examResult\"\nstyle=\"margin-top:18px;font-weight:800\">\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section>\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nCERTIFICATION\n<\/div>\n\n<h2>Dipl\u00f4me de fin de parcours<\/h2>\n\n<p>\nLe certificat est d\u00e9bloqu\u00e9 lorsque les 20 modules sont termin\u00e9s et\nl’examen final valid\u00e9.\n<\/p>\n\n<\/div>\n\n<div id=\"certificateLocked\">\n\n<div class=\"case-card\">\n\n<h3>\ud83d\udd12 Certificat verrouill\u00e9<\/h3>\n\n<p>\nTerminez l’ensemble du parcours pour g\u00e9n\u00e9rer votre certificat.\n<\/p>\n\n<\/div>\n\n<\/div>\n\n<div\nclass=\"certificate\"\nid=\"certificate\">\n\n<div class=\"cert-logo\">\nMAROC ZAIN ACADEMY\n<\/div>\n\n<div class=\"cert-title\">\nCERTIFICAT\n<\/div>\n\n<p>\nLa Direction de Maroc Zain Academy certifie que\n<\/p>\n\n<div\nclass=\"cert-name\"\nid=\"certificateName\">\nApprenant\n<\/div>\n\n<p>\na satisfait aux exigences de la formation\n<\/p>\n\n<div class=\"cert-course\">\nDIRECTEUR MAROC & MOYEN-ORIENT\n<\/div>\n\n<div class=\"cert-score\">\n\nScore QCM :\n<strong id=\"certificateScore\">\n0 %\n<\/strong>\n\n<\/div>\n\n<div style=\"margin-top:20px\">\n\nNiveau obtenu :\n<strong id=\"certificateLevel\">\nExecutive\n<\/strong>\n\n<\/div>\n\n<div class=\"signature-row\">\n\n<div class=\"signature\">\nDirection p\u00e9dagogique\n<\/div>\n\n<div class=\"signature\">\nMaroc Zain Academy\n<\/div>\n\n<\/div>\n\n<br><br>\n\n<button\nclass=\"btn btn-gold\"\nonclick=\"window.print()\">\n\ud83d\udda8\ufe0f Imprimer le certificat\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section style=\"background:#eef5fc\">\n\n<div class=\"wrap\">\n\n<div class=\"control-panel\">\n\n<h2 style=\"color:white\">\n\u2699\ufe0f Gestion locale\n<\/h2>\n\n<p style=\"color:#bdd0e5\">\nLa progression est enregistr\u00e9e avec LocalStorage dans le navigateur.\n<\/p>\n\n<div class=\"control-actions\">\n\n<button\nclass=\"btn btn-gold\"\nonclick=\"saveAll()\">\n\ud83d\udcbe Sauvegarder\n<\/button>\n\n<button\nclass=\"btn btn-white\"\nonclick=\"loadData()\">\n\ud83d\udd04 Recharger\n<\/button>\n\n<button\nclass=\"btn btn-danger\"\nonclick=\"resetCourse()\">\n\ud83d\uddd1\ufe0f R\u00e9initialiser\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<footer>\n\n<div class=\"wrap\">\n\n<strong>\nMAROC ZAIN ACADEMY\n<\/strong>\n\n<br>\n\nExecutive Aviation Learning Platform\n\n<\/div>\n\n<\/footer>\n\n<\/div>\n\n<div\nclass=\"toast\"\nid=\"toast\">\nProgression enregistr\u00e9e\n<\/div>\n\n<script>\n\n\/* ===================================================\nDONNEES GENERALES\n=================================================== *\/\n\nconst modules = [\n\n{\ntitle:\"Fonction du Directeur de zone\",\ndesc:\"R\u00f4le, responsabilit\u00e9s, d\u00e9l\u00e9gations et gouvernance.\"\n},\n\n{\ntitle:\"G\u00e9ographie \u00e9conomique\",\ndesc:\"Analyse \u00e9conomique du Maroc et du Moyen-Orient.\"\n},\n\n{\ntitle:\"Strat\u00e9gie commerciale\",\ndesc:\"Segmentation, objectifs et d\u00e9veloppement commercial.\"\n},\n\n{\ntitle:\"Business Plan\",\ndesc:\"Construction du plan annuel et des priorit\u00e9s.\"\n},\n\n{\ntitle:\"Budget et co\u00fbts\",\ndesc:\"Pr\u00e9vision, contr\u00f4le budg\u00e9taire et optimisation.\"\n},\n\n{\ntitle:\"Analyse trafic\",\ndesc:\"ASK, RPK, O&D, coefficient de remplissage et yield.\"\n},\n\n{\ntitle:\"Revenue Management\",\ndesc:\"Pricing, disponibilit\u00e9 et optimisation de recette.\"\n},\n\n{\ntitle:\"Network Planning\",\ndesc:\"Capacit\u00e9, fr\u00e9quences, routes et d\u00e9veloppement r\u00e9seau.\"\n},\n\n{\ntitle:\"Distribution\",\ndesc:\"Agences, GDS, digital, NDC et vente directe.\"\n},\n\n{\ntitle:\"Grands comptes\",\ndesc:\"Corporate, march\u00e9s publics et contrats strat\u00e9giques.\"\n},\n\n{\ntitle:\"Management des repr\u00e9sentations\",\ndesc:\"Pilotage des responsables pays et bureaux commerciaux.\"\n},\n\n{\ntitle:\"Management des escales\",\ndesc:\"Coordination des chefs d'escale et qualit\u00e9 op\u00e9rationnelle.\"\n},\n\n{\ntitle:\"Agences et Tour-op\u00e9rateurs\",\ndesc:\"Animation commerciale et fid\u00e9lisation.\"\n},\n\n{\ntitle:\"Hajj et Omra\",\ndesc:\"Groupes, capacit\u00e9 et op\u00e9rations p\u00e8lerinage.\"\n},\n\n{\ntitle:\"VIP et protocole\",\ndesc:\"D\u00e9l\u00e9gations officielles, personnalit\u00e9s et protocole.\"\n},\n\n{\ntitle:\"Diplomatie a\u00e9rienne\",\ndesc:\"Relations institutionnelles, ambassades et autorit\u00e9s.\"\n},\n\n{\ntitle:\"Gestion de crise\",\ndesc:\"Crise op\u00e9rationnelle, r\u00e9seau et r\u00e9putation.\"\n},\n\n{\ntitle:\"Leadership multiculturel\",\ndesc:\"Management d'\u00e9quipes internationales.\"\n},\n\n{\ntitle:\"Reporting Direction G\u00e9n\u00e9rale\",\ndesc:\"Synth\u00e8ses, KPI et recommandations ex\u00e9cutives.\"\n},\n\n{\ntitle:\"Simulation Direction de zone\",\ndesc:\"Pilotage int\u00e9gral Maroc\u2013Moyen-Orient.\"\n}\n\n];\n\n\n\/* ===================================================\nQCM\n=================================================== *\/\n\nconst questions = [\n\n{\nq:\"Un vol est rempli \u00e0 92 %, mais sa recette est inf\u00e9rieure \u00e0 l'objectif. Quelle analyse est prioritaire ?\",\nanswers:[\n\"Augmenter les fr\u00e9quences\",\n\"Analyser le yield et le mix tarifaire\",\n\"Fermer imm\u00e9diatement les ventes\",\n\"Augmenter la franchise bagages\"\n],\ncorrect:1,\nexplanation:\"Un taux de remplissage \u00e9lev\u00e9 ne garantit pas une bonne recette. Il faut analyser les tarifs vendus et la contribution des diff\u00e9rentes classes.\"\n},\n\n{\nq:\"Que signifie principalement le coefficient de remplissage ?\",\nanswers:[\n\"Le pourcentage de si\u00e8ges occup\u00e9s\",\n\"La recette moyenne par passager\",\n\"Le co\u00fbt moyen par vol\",\n\"Le nombre d'agences de voyages\"\n],\ncorrect:0,\nexplanation:\"Le coefficient de remplissage mesure la proportion de capacit\u00e9 effectivement occup\u00e9e.\"\n},\n\n{\nq:\"Une baisse des ventes corporate doit d'abord conduire \u00e0 :\",\nanswers:[\n\"Une baisse g\u00e9n\u00e9rale des tarifs\",\n\"Une analyse des comptes et contrats concern\u00e9s\",\n\"La fermeture de la ligne\",\n\"Une r\u00e9duction imm\u00e9diate des fr\u00e9quences\"\n],\ncorrect:1,\nexplanation:\"La bonne pratique consiste \u00e0 d\u00e9terminer pr\u00e9cis\u00e9ment quels comptes ou segments expliquent la baisse.\"\n},\n\n{\nq:\"Quel \u00e9l\u00e9ment est indispensable avant l'ouverture d'une nouvelle route ?\",\nanswers:[\n\"Une \u00e9tude de march\u00e9 et une analyse \u00e9conomique\",\n\"Un concours sur les r\u00e9seaux sociaux\",\n\"Une augmentation du personnel administratif\",\n\"Une campagne publicitaire avant toute analyse\"\n],\ncorrect:0,\nexplanation:\"Une nouvelle ligne doit \u00eatre justifi\u00e9e par le march\u00e9, le trafic, les co\u00fbts, les recettes attendues et le positionnement r\u00e9seau.\"\n},\n\n{\nq:\"Le Revenue Management cherche principalement \u00e0 :\",\nanswers:[\n\"Vendre tous les si\u00e8ges au m\u00eame tarif\",\n\"Optimiser le revenu g\u00e9n\u00e9r\u00e9 par la capacit\u00e9 disponible\",\n\"Augmenter les salaires\",\n\"R\u00e9duire tous les tarifs\"\n],\ncorrect:1,\nexplanation:\"Le Revenue Management ajuste disponibilit\u00e9 et prix afin d'optimiser la recette.\"\n},\n\n{\nq:\"Dans une crise op\u00e9rationnelle, quelle action est prioritaire ?\",\nanswers:[\n\"Masquer l'incident\",\n\"\u00c9valuer la s\u00e9curit\u00e9 et prot\u00e9ger les passagers\",\n\"Lancer une promotion\",\n\"Reporter toute communication\"\n],\ncorrect:1,\nexplanation:\"La s\u00e9curit\u00e9 et la protection des personnes demeurent prioritaires.\"\n},\n\n{\nq:\"Une direction de zone doit suivre :\",\nanswers:[\n\"Uniquement les ventes\",\n\"Ventes, trafic, revenus, co\u00fbts, qualit\u00e9 et risques\",\n\"Uniquement la ponctualit\u00e9\",\n\"Uniquement les r\u00e9clamations\"\n],\ncorrect:1,\nexplanation:\"Le Directeur doit disposer d'une vision globale de la performance.\"\n},\n\n{\nq:\"Le trafic O&D correspond \u00e0 :\",\nanswers:[\n\"Origine et destination\",\n\"Op\u00e9rations et distribution\",\n\"Offre et demande interne\",\n\"Organisation et d\u00e9veloppement\"\n],\ncorrect:0,\nexplanation:\"O&D signifie Origin and Destination.\"\n},\n\n{\nq:\"Une baisse du yield avec un fort remplissage peut indiquer :\",\nanswers:[\n\"Un mix tarifaire trop faible\",\n\"Une disparition des passagers\",\n\"Une baisse automatique des co\u00fbts\",\n\"Une hausse garantie de marge\"\n],\ncorrect:0,\nexplanation:\"Beaucoup de si\u00e8ges peuvent avoir \u00e9t\u00e9 vendus \u00e0 des tarifs trop faibles.\"\n},\n\n{\nq:\"Le Directeur doit pr\u00e9senter \u00e0 la Direction g\u00e9n\u00e9rale :\",\nanswers:[\n\"Des donn\u00e9es sans recommandation\",\n\"Une synth\u00e8se accompagn\u00e9e d'actions recommand\u00e9es\",\n\"Uniquement des statistiques historiques\",\n\"Des avis sans donn\u00e9es\"\n],\ncorrect:1,\nexplanation:\"Le reporting ex\u00e9cutif doit permettre la prise de d\u00e9cision.\"\n},\n\n{\nq:\"Lors d'une forte saison Omra, l'objectif principal est :\",\nanswers:[\n\"Maximiser la capacit\u00e9 sans contr\u00f4le\",\n\"Coordonner commercial, op\u00e9rations, assistance et partenaires\",\n\"Supprimer les groupes\",\n\"Limiter toute communication\"\n],\ncorrect:1,\nexplanation:\"Les flux p\u00e8lerinage exigent une coordination transversale.\"\n},\n\n{\nq:\"Un bon manager de zone doit :\",\nanswers:[\n\"D\u00e9cider seul syst\u00e9matiquement\",\n\"D\u00e9l\u00e9guer tout sans contr\u00f4le\",\n\"D\u00e9cider, d\u00e9l\u00e9guer et contr\u00f4ler\",\n\"\u00c9viter les d\u00e9cisions difficiles\"\n],\ncorrect:2,\nexplanation:\"Le leadership associe autonomie des \u00e9quipes et responsabilit\u00e9 du Directeur.\"\n}\n\n];\n\n\n\/* ===================================================\nETAT\n=================================================== *\/\n\nlet state = {\n\nname:\"\",\nstudentId:\"\",\ncompletedModules:[],\nquizIndex:0,\nquizCorrect:0,\nquizAnswered:false,\nquizFinished:false,\nexamCompleted:false\n\n};\n\n\n\/* ===================================================\nMODULES\n=================================================== *\/\n\nfunction renderModules(){\n\nconst grid =\ndocument.getElementById(\"moduleGrid\");\n\ngrid.innerHTML=\"\";\n\nmodules.forEach((module,index)=>{\n\nconst completed =\nstate.completedModules.includes(index);\n\nconst div =\ndocument.createElement(\"div\");\n\ndiv.className=\"module\";\n\ndiv.innerHTML=`\n\n<div class=\"module-number\">\n${String(index+1).padStart(2,\"0\")}\n<\/div>\n\n<h3>\n${module.title}\n<\/h3>\n\n<p>\n${module.desc}\n<\/p>\n\n<div class=\"module-actions\">\n\n<span style=\"\nfont-size:12px;\ncolor:#718096;\nalign-self:center\">\nModule ${index+1}\n<\/span>\n\n<button\nclass=\"mini-btn complete-btn ${completed ? \"done\" : \"\"}\"\nonclick=\"toggleModule(${index})\">\n\n${completed ? \"\u2713 Termin\u00e9\" : \"Marquer termin\u00e9\"}\n\n<\/button>\n\n<\/div>\n\n`;\n\ngrid.appendChild(div);\n\n});\n\n}\n\n\n\/* ===================================================\nMODULE COMPLETE\n=================================================== *\/\n\nfunction toggleModule(index){\n\nif(state.completedModules.includes(index)){\n\nstate.completedModules =\nstate.completedModules.filter(i=>i!==index);\n\n}else{\n\nstate.completedModules.push(index);\n\n}\n\nrenderModules();\n\nupdateDashboard();\n\nsaveAll();\n\n}\n\n\n\/* ===================================================\nPROFILE\n=================================================== *\/\n\nfunction saveProfile(){\n\nstate.name =\ndocument.getElementById(\"studentName\").value.trim();\n\nstate.studentId =\ndocument.getElementById(\"studentId\").value.trim();\n\nupdateDashboard();\n\nsaveAll();\n\ntoast(\"Profil enregistr\u00e9\");\n\n}\n\n\n\/* ===================================================\nQUIZ\n=================================================== *\/\n\nfunction loadQuestion(){\n\nconst q =\nquestions[state.quizIndex];\n\ndocument.getElementById(\"quizTotal\")\n.innerText=questions.length;\n\ndocument.getElementById(\"quizCurrent\")\n.innerText=state.quizIndex+1;\n\ndocument.getElementById(\"quizQuestion\")\n.innerText=q.q;\n\ndocument.getElementById(\"quizFeedback\")\n.innerHTML=\"\";\n\nconst holder =\ndocument.getElementById(\"quizOptions\");\n\nholder.innerHTML=\"\";\n\nq.answers.forEach((answer,index)=>{\n\nconst btn =\ndocument.createElement(\"button\");\n\nbtn.className=\"quiz-option\";\n\nbtn.innerHTML=\n`${String.fromCharCode(65+index)} \u2014 ${answer}`;\n\nbtn.onclick=()=>{\nanswerQuestion(index,btn);\n};\n\nholder.appendChild(btn);\n\n});\n\nstate.quizAnswered=false;\n\nupdateQuizDisplay();\n\n}\n\n\n\/* ===================================================\nANSWER\n=================================================== *\/\n\nfunction answerQuestion(index,btn){\n\nif(state.quizAnswered){\nreturn;\n}\n\nstate.quizAnswered=true;\n\nconst q =\nquestions[state.quizIndex];\n\nconst buttons =\ndocument.querySelectorAll(\".quiz-option\");\n\nif(index===q.correct){\n\nbtn.classList.add(\"correct\");\n\nstate.quizCorrect++;\n\ndocument.getElementById(\"quizFeedback\")\n.innerHTML=\n\"\u2705 Bonne r\u00e9ponse.<br>\"+q.explanation;\n\n}else{\n\nbtn.classList.add(\"wrong\");\n\nbuttons[q.correct]\n.classList.add(\"correct\");\n\ndocument.getElementById(\"quizFeedback\")\n.innerHTML=\n\"\u274c R\u00e9ponse incorrecte.<br>\"+q.explanation;\n\n}\n\nupdateQuizDisplay();\n\nsaveAll();\n\n}\n\n\n\/* ===================================================\nNEXT\n=================================================== *\/\n\nfunction nextQuestion(){\n\nif(!state.quizAnswered){\n\ntoast(\"R\u00e9pondez \u00e0 la question avant de continuer\");\n\nreturn;\n\n}\n\nif(state.quizIndex <\nquestions.length-1){\n\nstate.quizIndex++;\n\nloadQuestion();\n\n}else{\n\nstate.quizFinished=true;\n\nconst score =\nquizPercentage();\n\ndocument.getElementById(\"quizFeedback\")\n.innerHTML=\n`\ud83c\udfc1 QCM termin\u00e9.<br>\nScore final : <strong>${score}%<\/strong>`;\n\nupdateDashboard();\n\nsaveAll();\n\n}\n\n}\n\n\n\/* ===================================================\nRESTART QUIZ\n=================================================== *\/\n\nfunction restartQuiz(){\n\nstate.quizIndex=0;\nstate.quizCorrect=0;\nstate.quizFinished=false;\nstate.quizAnswered=false;\n\nloadQuestion();\n\nupdateDashboard();\n\nsaveAll();\n\n}\n\n\n\/* ===================================================\nQUIZ SCORE\n=================================================== *\/\n\nfunction quizPercentage(){\n\nif(questions.length===0){\nreturn 0;\n}\n\nreturn Math.round(\n(state.quizCorrect\/questions.length)*100\n);\n\n}\n\nfunction updateQuizDisplay(){\n\ndocument.getElementById(\"quizLiveScore\")\n.innerText=state.quizCorrect;\n\n}\n\n\n\/* ===================================================\nCASE\n=================================================== *\/\n\nfunction caseAnswer(correct){\n\nconst element =\ndocument.getElementById(\"caseFeedback\");\n\nif(correct){\n\nelement.style.color=\"#15905d\";\n\nelement.innerHTML=\n\"\u2705 D\u00e9cision Executive : analyser la cause exacte de la sous-performance avant de toucher aux tarifs.\";\n\n}else{\n\nelement.style.color=\"#cf334c\";\n\nelement.innerHTML=\n\"\u274c D\u00e9cision trop rapide. Le Directeur doit analyser O&D, mix tarifaire, corporate, concurrence, calendrier et distribution.\";\n\n}\n\n}\n\n\n\/* ===================================================\nEXAM\n=================================================== *\/\n\nfunction completeExam(){\n\nif(state.completedModules.length < 20){\n\ndocument.getElementById(\"examResult\")\n.style.color=\"#cc334b\";\n\ndocument.getElementById(\"examResult\")\n.innerHTML=\n\"\ud83d\udd12 Terminez les 20 modules avant de valider l'examen.\";\n\nreturn;\n\n}\n\nstate.examCompleted=true;\n\ndocument.getElementById(\"examResult\")\n.style.color=\"#128557\";\n\ndocument.getElementById(\"examResult\")\n.innerHTML=\n\"\u2705 Examen final valid\u00e9.\";\n\nupdateDashboard();\n\nsaveAll();\n\n}\n\n\n\/* ===================================================\nDASHBOARD\n=================================================== *\/\n\nfunction updateDashboard(){\n\nconst completed =\nstate.completedModules.length;\n\nconst modulePercent =\nMath.round((completed\/20)*100);\n\ndocument.getElementById(\"completedModules\")\n.innerText=`${completed}\/20`;\n\ndocument.getElementById(\"progressPercent\")\n.innerText=`${modulePercent}%`;\n\ndocument.getElementById(\"moduleProgress\")\n.style.width=modulePercent+\"%\";\n\ndocument.getElementById(\"globalProgress\")\n.style.width=modulePercent+\"%\";\n\ndocument.getElementById(\"quizScoreDisplay\")\n.innerText=quizPercentage()+\"%\";\n\nconst studentName =\nstate.name || \"Apprenant Maroc Zain Academy\";\n\ndocument.getElementById(\"dashboardName\")\n.innerText=studentName;\n\ndocument.getElementById(\"topStudent\")\n.innerText=\nstate.name ?\n\"Connect\u00e9 : \"+state.name :\n\"Apprenant non identifi\u00e9\";\n\n\n\/* LEVEL *\/\n\nlet level=\"D\u00e9butant\";\n\nif(completed>=5)\nlevel=\"Interm\u00e9diaire\";\n\nif(completed>=10)\nlevel=\"Avanc\u00e9\";\n\nif(completed>=15)\nlevel=\"Manager\";\n\nif(completed>=20)\nlevel=\"Executive\";\n\ndocument.getElementById(\"levelBadge\")\n.innerText=\"Niveau : \"+level;\n\n\n\/* BADGES *\/\n\nlet badges=0;\n\nconst conditions=[\n\ncompleted>=5,\n\ncompleted>=10,\n\ncompleted>=15,\n\ncompleted>=20,\n\nquizPercentage()>=80\n\n];\n\nconditions.forEach((condition,index)=>{\n\nconst badge =\ndocument.getElementById(\"badge\"+(index+1));\n\nif(condition){\n\nbadge.classList.add(\"unlocked\");\n\nbadges++;\n\n}else{\n\nbadge.classList.remove(\"unlocked\");\n\n}\n\n});\n\ndocument.getElementById(\"badgeCount\")\n.innerText=badges+\"\/5\";\n\n\n\/* CERTIFICATE *\/\n\nconst certificateUnlocked =\ncompleted===20 &&\nstate.examCompleted;\n\nif(certificateUnlocked){\n\ndocument.getElementById(\"certificateLocked\")\n.style.display=\"none\";\n\ndocument.getElementById(\"certificate\")\n.classList.add(\"show\");\n\ndocument.getElementById(\"certificateName\")\n.innerText=studentName;\n\ndocument.getElementById(\"certificateScore\")\n.innerText=\nquizPercentage()+\" %\";\n\ndocument.getElementById(\"certificateLevel\")\n.innerText=\nquizPercentage()>=85 ?\n\"Executive Excellence\" :\n\"Executive\";\n\n}else{\n\ndocument.getElementById(\"certificateLocked\")\n.style.display=\"block\";\n\ndocument.getElementById(\"certificate\")\n.classList.remove(\"show\");\n\n}\n\n}\n\n\n\/* ===================================================\nLOCAL STORAGE\n=================================================== *\/\n\nfunction saveAll(){\n\nlocalStorage.setItem(\n\"marocZainDirectorTraining\",\nJSON.stringify(state)\n);\n\ntoast(\"Progression sauvegard\u00e9e\");\n\n}\n\nfunction loadData(){\n\nconst data =\nlocalStorage.getItem(\n\"marocZainDirectorTraining\"\n);\n\nif(data){\n\nconst saved =\nJSON.parse(data);\n\nstate={\n...state,\n...saved\n};\n\ndocument.getElementById(\"studentName\")\n.value=state.name || \"\";\n\ndocument.getElementById(\"studentId\")\n.value=state.studentId || \"\";\n\n}\n\nrenderModules();\n\nloadQuestion();\n\nupdateDashboard();\n\n}\n\n\n\/* ===================================================\nRESET\n=================================================== *\/\n\nfunction resetCourse(){\n\nconst ok =\nconfirm(\n\"Voulez-vous vraiment supprimer toute votre progression ?\"\n);\n\nif(!ok){\nreturn;\n}\n\nlocalStorage.removeItem(\n\"marocZainDirectorTraining\"\n);\n\nstate={\n\nname:\"\",\nstudentId:\"\",\ncompletedModules:[],\nquizIndex:0,\nquizCorrect:0,\nquizAnswered:false,\nquizFinished:false,\nexamCompleted:false\n\n};\n\ndocument.getElementById(\"studentName\")\n.value=\"\";\n\ndocument.getElementById(\"studentId\")\n.value=\"\";\n\nrenderModules();\n\nloadQuestion();\n\nupdateDashboard();\n\ntoast(\"Formation r\u00e9initialis\u00e9e\");\n\n}\n\n\n\/* ===================================================\nTOAST\n=================================================== *\/\n\nfunction toast(message){\n\nconst t =\ndocument.getElementById(\"toast\");\n\nt.innerText=message;\n\nt.classList.add(\"show\");\n\nsetTimeout(()=>{\nt.classList.remove(\"show\");\n},1800);\n\n}\n\n\n\/* ===================================================\nSTART\n=================================================== *\/\n\nwindow.addEventListener(\n\"DOMContentLoaded\",\nloadData\n);\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Directeur Maroc & Moyen-Orient | Maroc Zain Academy MAROC ZAIN ACADEMY Apprenant non identifi\u00e9 \ud83c\udf93 EXECUTIVE AVIATION PROGRAM Directeur Maroc & Moyen-Orient Programme de formation de haut niveau destin\u00e9 au pilotage d’une zone commerciale a\u00e9rienne : strat\u00e9gie, revenus, r\u00e9seau, management, diplomatie a\u00e9rienne, op\u00e9rations sp\u00e9ciales et gestion de crise. \ud83d\udcca Mon tableau de bord \ud83d\udcdd Commencer […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-3047","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/comments?post=3047"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3047\/revisions"}],"predecessor-version":[{"id":3048,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3047\/revisions\/3048"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=3047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/categories?post=3047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/tags?post=3047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3047,"date":"2026-08-21T16:57:01","date_gmt":"2026-08-21T16:57:01","guid":{"rendered":"https:\/\/maroczain.com\/?p=3047"},"modified":"2026-08-21T16:57:01","modified_gmt":"2026-08-21T16:57:01","slug":"3047","status":"publish","type":"post","link":"https:\/\/maroczain.com\/en\/2026\/08\/21\/3047\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n\n\n\nDirecteur Maroc & Moyen-Orient | Maroc Zain Academy<\/title>\n\n<style>\n\n:root{\n --navy:#06172c;\n --blue:#0b3d91;\n --blue2:#1768d5;\n --cyan:#13b8d5;\n --gold:#e9c84a;\n --light:#f4f8fd;\n --white:#ffffff;\n --text:#172235;\n --muted:#6d7b90;\n --success:#16a66a;\n --danger:#dc4056;\n --warning:#ef9f25;\n --border:#dae5f2;\n --shadow:0 18px 45px rgba(12,43,81,.11);\n --radius:22px;\n}\n\n*{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\nhtml{\n scroll-behavior:smooth;\n}\n\nbody{\n font-family:Arial,Helvetica,sans-serif;\n background:var(--light);\n color:var(--text);\n line-height:1.6;\n}\n\nbutton,\ninput{\n font-family:inherit;\n}\n\nbutton{\n cursor:pointer;\n}\n\na{\n color:inherit;\n text-decoration:none;\n}\n\n.app{\n min-height:100vh;\n}\n\n\/* HEADER *\/\n\n.topbar{\n background:var(--navy);\n color:white;\n padding:12px 0;\n}\n\n.wrap{\n width:min(1280px,94%);\n margin:auto;\n}\n\n.topbar-inner{\n display:flex;\n justify-content:space-between;\n gap:20px;\n align-items:center;\n}\n\n.brand{\n font-weight:800;\n letter-spacing:1px;\n}\n\n.brand span{\n color:var(--gold);\n}\n\n.student-mini{\n font-size:13px;\n color:#bed0e6;\n}\n\n\/* HERO *\/\n\n.hero{\n padding:70px 0 80px;\n background:\n radial-gradient(circle at 18% 18%,rgba(18,184,213,.28),transparent 27%),\n radial-gradient(circle at 85% 15%,rgba(233,200,74,.15),transparent 25%),\n linear-gradient(135deg,#061426,#0a376b 58%,#0b3d91);\n color:white;\n}\n\n.hero-grid{\n display:grid;\n grid-template-columns:1.2fr .8fr;\n gap:45px;\n align-items:center;\n}\n\n.hero-tag{\n display:inline-block;\n padding:8px 14px;\n border-radius:999px;\n background:rgba(255,255,255,.1);\n border:1px solid rgba(255,255,255,.18);\n margin-bottom:18px;\n font-size:13px;\n}\n\n.hero h1{\n font-size:clamp(40px,6vw,72px);\n line-height:1.02;\n margin-bottom:18px;\n}\n\n.hero h1 span{\n color:var(--gold);\n}\n\n.hero p{\n max-width:760px;\n color:#d8e7fa;\n font-size:18px;\n}\n\n.hero-actions{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-top:26px;\n}\n\n.btn{\n border:none;\n padding:14px 20px;\n border-radius:13px;\n font-weight:800;\n transition:.2s ease;\n}\n\n.btn:hover{\n transform:translateY(-2px);\n}\n\n.btn-gold{\n background:var(--gold);\n color:#1e2940;\n}\n\n.btn-white{\n background:white;\n color:var(--blue);\n}\n\n.btn-blue{\n background:var(--blue);\n color:white;\n}\n\n.btn-danger{\n background:#ffe9ed;\n color:#a6283d;\n}\n\n.btn-dark{\n background:var(--navy);\n color:white;\n}\n\n\/* LOGIN CARD *\/\n\n.profile-card{\n background:rgba(255,255,255,.1);\n border:1px solid rgba(255,255,255,.2);\n border-radius:26px;\n padding:28px;\n backdrop-filter:blur(14px);\n}\n\n.profile-card h3{\n margin-bottom:15px;\n}\n\n.input{\n width:100%;\n border:1px solid rgba(255,255,255,.25);\n background:rgba(255,255,255,.09);\n color:white;\n padding:14px;\n border-radius:12px;\n margin-bottom:10px;\n outline:none;\n}\n\n.input::placeholder{\n color:#c8d7e9;\n}\n\n\/* NAV *\/\n\n.nav{\n background:white;\n position:sticky;\n top:0;\n z-index:50;\n box-shadow:0 6px 25px rgba(0,0,0,.07);\n}\n\n.nav-inner{\n display:flex;\n overflow-x:auto;\n gap:6px;\n padding:10px 0;\n}\n\n.nav a{\n white-space:nowrap;\n padding:10px 13px;\n border-radius:10px;\n color:#43536a;\n font-size:14px;\n font-weight:700;\n}\n\n.nav a:hover{\n background:#edf5ff;\n color:var(--blue);\n}\n\n\/* DASHBOARD *\/\n\nsection{\n padding:70px 0;\n}\n\n.section-title{\n margin-bottom:32px;\n}\n\n.eyebrow{\n color:var(--blue2);\n font-size:12px;\n font-weight:900;\n letter-spacing:2px;\n text-transform:uppercase;\n}\n\nh2{\n margin-top:5px;\n font-size:clamp(28px,4vw,46px);\n line-height:1.15;\n}\n\n.section-title p{\n max-width:800px;\n color:var(--muted);\n margin-top:10px;\n}\n\n.dashboard-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:16px;\n}\n\n.stat-card{\n background:white;\n padding:22px;\n border-radius:18px;\n box-shadow:var(--shadow);\n}\n\n.stat-label{\n color:var(--muted);\n font-size:13px;\n}\n\n.stat-number{\n font-size:34px;\n font-weight:900;\n color:var(--blue);\n}\n\n.progress-shell{\n height:11px;\n border-radius:30px;\n background:#e7eef7;\n overflow:hidden;\n margin-top:10px;\n}\n\n.progress-fill{\n height:100%;\n width:0;\n background:linear-gradient(90deg,var(--cyan),var(--gold));\n transition:.4s;\n}\n\n\/* PROFILE STRIP *\/\n\n.profile-strip{\n background:white;\n padding:22px;\n border-radius:20px;\n margin-top:20px;\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:20px;\n box-shadow:var(--shadow);\n}\n\n.level-badge{\n background:#edf4ff;\n color:var(--blue);\n padding:8px 14px;\n border-radius:999px;\n font-weight:800;\n}\n\n\/* MODULES *\/\n\n.modules{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:16px;\n}\n\n.module{\n background:white;\n border:1px solid var(--border);\n border-radius:18px;\n padding:21px;\n position:relative;\n box-shadow:0 10px 25px rgba(17,53,95,.07);\n}\n\n.module-number{\n width:42px;\n height:42px;\n display:flex;\n align-items:center;\n justify-content:center;\n border-radius:12px;\n background:var(--blue);\n color:white;\n font-weight:900;\n margin-bottom:12px;\n}\n\n.module h3{\n font-size:16px;\n min-height:42px;\n}\n\n.module p{\n font-size:13px;\n color:var(--muted);\n min-height:58px;\n}\n\n.module-actions{\n display:flex;\n justify-content:space-between;\n gap:8px;\n margin-top:15px;\n}\n\n.mini-btn{\n border:none;\n border-radius:10px;\n padding:9px 11px;\n font-size:12px;\n font-weight:800;\n}\n\n.complete-btn{\n background:#e9fff4;\n color:#087c4a;\n}\n\n.complete-btn.done{\n background:var(--success);\n color:white;\n}\n\n\/* QUIZ *\/\n\n.quiz-wrap{\n background:linear-gradient(140deg,#06172c,#0b396d);\n color:white;\n padding:32px;\n border-radius:26px;\n}\n\n.quiz-meta{\n display:flex;\n justify-content:space-between;\n gap:20px;\n margin-bottom:18px;\n color:#c9daec;\n}\n\n.quiz-question{\n background:rgba(255,255,255,.08);\n padding:21px;\n border-radius:15px;\n font-size:18px;\n margin-bottom:15px;\n}\n\n.quiz-option{\n width:100%;\n text-align:left;\n border:none;\n padding:15px;\n margin:7px 0;\n border-radius:12px;\n background:#123f70;\n color:white;\n transition:.15s;\n}\n\n.quiz-option:hover{\n background:#18528e;\n}\n\n.quiz-option.correct{\n background:var(--success);\n}\n\n.quiz-option.wrong{\n background:var(--danger);\n}\n\n.quiz-feedback{\n min-height:50px;\n margin-top:14px;\n color:#dce9f6;\n}\n\n.quiz-footer{\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:10px;\n margin-top:18px;\n}\n\n\/* CASE *\/\n\n.case-card{\n background:white;\n padding:28px;\n border-radius:22px;\n box-shadow:var(--shadow);\n}\n\n.alert{\n border-left:5px solid var(--warning);\n background:#fff6e8;\n padding:18px;\n margin:20px 0;\n border-radius:12px;\n}\n\n.case-choice{\n display:grid;\n grid-template-columns:repeat(2,1fr);\n gap:15px;\n}\n\n.case-btn{\n border:1px solid var(--border);\n background:white;\n padding:20px;\n border-radius:15px;\n text-align:left;\n font-weight:700;\n}\n\n.case-btn:hover{\n border-color:#93b9e8;\n background:#f5f9ff;\n}\n\n\/* BADGES *\/\n\n.badges{\n display:grid;\n grid-template-columns:repeat(5,1fr);\n gap:14px;\n}\n\n.badge-card{\n background:white;\n border-radius:18px;\n padding:20px;\n text-align:center;\n box-shadow:var(--shadow);\n opacity:.38;\n transition:.3s;\n}\n\n.badge-card.unlocked{\n opacity:1;\n transform:translateY(-4px);\n}\n\n.badge-icon{\n font-size:38px;\n}\n\n\/* EXAM *\/\n\n.exam-panel{\n background:white;\n border-radius:22px;\n box-shadow:var(--shadow);\n padding:28px;\n}\n\n.timeline{\n margin-top:20px;\n}\n\n.event{\n border-left:4px solid var(--blue2);\n padding:15px 20px;\n background:#f5f8fd;\n margin-bottom:10px;\n border-radius:0 14px 14px 0;\n}\n\n.event strong{\n color:var(--blue);\n}\n\n\/* CERTIFICATE *\/\n\n.certificate{\n background:white;\n min-height:650px;\n border:12px double var(--gold);\n padding:55px;\n text-align:center;\n box-shadow:var(--shadow);\n display:none;\n}\n\n.certificate.show{\n display:block;\n}\n\n.cert-logo{\n font-size:21px;\n font-weight:900;\n color:var(--blue);\n letter-spacing:2px;\n}\n\n.cert-title{\n font-size:52px;\n margin:30px 0 10px;\n color:var(--navy);\n font-family:Georgia,serif;\n}\n\n.cert-name{\n font-family:Georgia,serif;\n font-size:38px;\n color:var(--blue);\n margin:25px 0;\n font-weight:700;\n}\n\n.cert-course{\n font-size:24px;\n font-weight:800;\n}\n\n.cert-score{\n margin-top:25px;\n}\n\n.signature-row{\n display:flex;\n justify-content:space-around;\n margin-top:80px;\n}\n\n.signature{\n border-top:1px solid #555;\n padding-top:8px;\n min-width:220px;\n}\n\n\/* ADMIN *\/\n\n.control-panel{\n background:#07182c;\n color:white;\n border-radius:22px;\n padding:28px;\n}\n\n.control-actions{\n display:flex;\n flex-wrap:wrap;\n gap:10px;\n margin-top:18px;\n}\n\n\/* FOOTER *\/\n\nfooter{\n background:#04101d;\n color:#99aec8;\n text-align:center;\n padding:30px 0;\n}\n\nfooter strong{\n color:white;\n}\n\n\/* TOAST *\/\n\n.toast{\n position:fixed;\n right:20px;\n bottom:20px;\n background:#07182c;\n color:white;\n padding:14px 18px;\n border-radius:12px;\n opacity:0;\n transform:translateY(15px);\n pointer-events:none;\n transition:.3s;\n z-index:100;\n}\n\n.toast.show{\n opacity:1;\n transform:translateY(0);\n}\n\n\/* RESPONSIVE *\/\n\n@media(max-width:1050px){\n\n .modules{\n grid-template-columns:repeat(2,1fr);\n }\n\n .dashboard-grid{\n grid-template-columns:repeat(2,1fr);\n }\n\n .badges{\n grid-template-columns:repeat(3,1fr);\n }\n\n}\n\n@media(max-width:750px){\n\n .hero-grid{\n grid-template-columns:1fr;\n }\n\n .modules,\n .dashboard-grid,\n .badges,\n .case-choice{\n grid-template-columns:1fr;\n }\n\n .profile-strip{\n align-items:flex-start;\n flex-direction:column;\n }\n\n .hero{\n padding-top:50px;\n }\n\n .certificate{\n padding:25px;\n }\n\n .cert-title{\n font-size:36px;\n }\n\n}\n\n@media print{\n\n body *{\n visibility:hidden;\n }\n\n #certificate,\n #certificate *{\n visibility:visible;\n }\n\n #certificate{\n display:block !important;\n position:absolute;\n inset:0;\n width:100%;\n box-shadow:none;\n }\n\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"app\">\n\n\n<div class=\"topbar\">\n\n<div class=\"wrap topbar-inner\">\n\n<div class=\"brand\">\nMAROC ZAIN <span>ACADEMY<\/span>\n<\/div>\n\n<div class=\"student-mini\" id=\"topStudent\">\nApprenant non identifi\u00e9\n<\/div>\n\n<\/div>\n<\/div>\n\n\n<header class=\"hero\">\n\n<div class=\"wrap hero-grid\">\n\n<div>\n\n<div class=\"hero-tag\">\n\ud83c\udf93 EXECUTIVE AVIATION PROGRAM\n<\/div>\n\n<h1>\nDirecteur<br>\n<span>Maroc & Moyen-Orient<\/span>\n<\/h1>\n\n<p>\nProgramme de formation de haut niveau destin\u00e9 au pilotage d’une zone\ncommerciale a\u00e9rienne : strat\u00e9gie, revenus, r\u00e9seau, management,\ndiplomatie a\u00e9rienne, op\u00e9rations sp\u00e9ciales et gestion de crise.\n<\/p>\n\n<div class=\"hero-actions\">\n\n<a href=\"#dashboard\" class=\"btn btn-gold\">\n\ud83d\udcca Mon tableau de bord\n<\/a>\n\n<a href=\"#quiz\" class=\"btn btn-white\">\n\ud83d\udcdd Commencer le QCM\n<\/a>\n\n<\/div>\n\n<\/div>\n\n<div class=\"profile-card\">\n\n<h3>\ud83d\udc64 Espace apprenant<\/h3>\n\n<input\ntype=\"text\"\nclass=\"input\"\nid=\"studentName\"\nplaceholder=\"Nom et pr\u00e9nom\">\n\n<input\ntype=\"text\"\nclass=\"input\"\nid=\"studentId\"\nplaceholder=\"Identifiant apprenant\">\n\n<button\nclass=\"btn btn-gold\"\nonclick=\"saveProfile()\">\nEnregistrer mon profil\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n\n<nav class=\"nav\">\n\n<div class=\"wrap nav-inner\">\n\n<a href=\"#dashboard\">Dashboard<\/a>\n<a href=\"#modules\">Modules<\/a>\n<a href=\"#quiz\">QCM<\/a>\n<a href=\"#cases\">Cas<\/a>\n<a href=\"#badges\">Badges<\/a>\n<a href=\"#exam\">Examen<\/a>\n<a href=\"#certificate\">Certificat<\/a>\n\n<\/div>\n\n<\/nav>\n\n\n<section id=\"dashboard\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nESPACE APPRENANT\n<\/div>\n\n<h2>Votre progression Executive<\/h2>\n\n<p>\nVotre avancement est automatiquement sauvegard\u00e9 sur cet appareil.\n<\/p>\n\n<\/div>\n\n<div class=\"dashboard-grid\">\n\n<div class=\"stat-card\">\n\n<div class=\"stat-label\">\nModules termin\u00e9s\n<\/div>\n\n<div class=\"stat-number\" id=\"completedModules\">\n0\/20\n<\/div>\n\n<div class=\"progress-shell\">\n<div class=\"progress-fill\" id=\"moduleProgress\"><\/div>\n<\/div>\n\n<\/div>\n\n<div class=\"stat-card\">\n\n<div class=\"stat-label\">\nProgression\n<\/div>\n\n<div class=\"stat-number\" id=\"progressPercent\">\n0%\n<\/div>\n\n<div class=\"progress-shell\">\n<div class=\"progress-fill\" id=\"globalProgress\"><\/div>\n<\/div>\n\n<\/div>\n\n<div class=\"stat-card\">\n\n<div class=\"stat-label\">\nScore QCM\n<\/div>\n\n<div class=\"stat-number\" id=\"quizScoreDisplay\">\n0%\n<\/div>\n\n<\/div>\n\n<div class=\"stat-card\">\n\n<div class=\"stat-label\">\nBadges\n<\/div>\n\n<div class=\"stat-number\" id=\"badgeCount\">\n0\/5\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<div class=\"profile-strip\">\n\n<div>\n\n<strong id=\"dashboardName\">\nApprenant Maroc Zain Academy\n<\/strong>\n\n<div style=\"color:#6d7b90\">\nFormation Directeur Maroc & Moyen-Orient\n<\/div>\n\n<\/div>\n\n<div class=\"level-badge\" id=\"levelBadge\">\nNiveau : D\u00e9butant\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"modules\" style=\"background:#eef5fc\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\n20 MODULES\n<\/div>\n\n<h2>Parcours p\u00e9dagogique<\/h2>\n\n<p>\nCliquez sur \u00ab Termin\u00e9 \u00bb lorsque vous avez \u00e9tudi\u00e9 le module.\n<\/p>\n\n<\/div>\n\n<div class=\"modules\" id=\"moduleGrid\"><\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"quiz\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nQCM EXECUTIVE\n<\/div>\n\n<h2>\u00c9valuation des connaissances<\/h2>\n\n<p>\nLa banque ci-dessous peut \u00eatre \u00e9tendue \u00e0 plusieurs centaines ou milliers\nde questions.\n<\/p>\n\n<\/div>\n\n<div class=\"quiz-wrap\">\n\n<div class=\"quiz-meta\">\n\n<div>\nQuestion\n<span id=\"quizCurrent\">1<\/span>\n\/\n<span id=\"quizTotal\">0<\/span>\n<\/div>\n\n<div>\nScore :\n<span id=\"quizLiveScore\">0<\/span>\n<\/div>\n\n<\/div>\n\n<div\nclass=\"quiz-question\"\nid=\"quizQuestion\">\n<\/div>\n\n<div id=\"quizOptions\"><\/div>\n\n<div\nclass=\"quiz-feedback\"\nid=\"quizFeedback\">\n<\/div>\n\n<div class=\"quiz-footer\">\n\n<button\nclass=\"btn btn-gold\"\nonclick=\"nextQuestion()\">\nQuestion suivante\n<\/button>\n\n<button\nclass=\"btn btn-white\"\nonclick=\"restartQuiz()\">\nRecommencer\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"cases\" style=\"background:#eef5fc\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nSIMULATEUR\n<\/div>\n\n<h2>Cas de d\u00e9cision Executive<\/h2>\n\n<\/div>\n\n<div class=\"case-card\">\n\n<h3>\nCAS 001 \u2014 Sous-performance Casablanca\u2013Riyad\n<\/h3>\n\n<div class=\"alert\">\n\n<strong>ALERTE COMMERCIALE<\/strong><br>\n\nLoad Factor : 61 %<br>\nObjectif : 78 %<br>\nYield : +4 %<br>\nCorporate : -18 %\n\n<\/div>\n\n<p>\nQuelle doit \u00eatre votre premi\u00e8re r\u00e9action ?\n<\/p>\n\n<br>\n\n<div class=\"case-choice\">\n\n<button\nclass=\"case-btn\"\nonclick=\"caseAnswer(false)\">\n\u274c Baisser imm\u00e9diatement tous les tarifs de 20 %\n<\/button>\n\n<button\nclass=\"case-btn\"\nonclick=\"caseAnswer(true)\">\n\u2705 Identifier l’origine de la sous-performance avant toute action tarifaire\n<\/button>\n\n<button\nclass=\"case-btn\"\nonclick=\"caseAnswer(false)\">\n\u274c Augmenter imm\u00e9diatement la capacit\u00e9\n<\/button>\n\n<button\nclass=\"case-btn\"\nonclick=\"caseAnswer(false)\">\n\u274c Suspendre les ventes corporate\n<\/button>\n\n<\/div>\n\n<div\nid=\"caseFeedback\"\nstyle=\"margin-top:20px;font-weight:700\">\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"badges\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nGAMIFICATION\n<\/div>\n\n<h2>Badges de comp\u00e9tence<\/h2>\n\n<\/div>\n\n<div class=\"badges\">\n\n<div class=\"badge-card\" id=\"badge1\">\n<div class=\"badge-icon\">\ud83d\udcd8<\/div>\n<strong>Premiers pas<\/strong>\n<p>5 modules termin\u00e9s<\/p>\n<\/div>\n\n<div class=\"badge-card\" id=\"badge2\">\n<div class=\"badge-icon\">\ud83d\udcca<\/div>\n<strong>Manager<\/strong>\n<p>10 modules termin\u00e9s<\/p>\n<\/div>\n\n<div class=\"badge-card\" id=\"badge3\">\n<div class=\"badge-icon\">\ud83c\udf0d<\/div>\n<strong>Directeur de zone<\/strong>\n<p>15 modules termin\u00e9s<\/p>\n<\/div>\n\n<div class=\"badge-card\" id=\"badge4\">\n<div class=\"badge-icon\">\ud83d\udc51<\/div>\n<strong>Executive<\/strong>\n<p>20 modules termin\u00e9s<\/p>\n<\/div>\n\n<div class=\"badge-card\" id=\"badge5\">\n<div class=\"badge-icon\">\ud83c\udfc6<\/div>\n<strong>Excellence<\/strong>\n<p>QCM sup\u00e9rieur ou \u00e9gal \u00e0 80 %<\/p>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"exam\" style=\"background:#eef5fc\">\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nEXAMEN FINAL\n<\/div>\n\n<h2>Une journ\u00e9e dans la peau du Directeur<\/h2>\n\n<\/div>\n\n<div class=\"exam-panel\">\n\n<h3>\nSimulation de commandement\n<\/h3>\n\n<div class=\"timeline\">\n\n<div class=\"event\">\n<strong>08:00<\/strong><br>\nAnalyse du tableau de bord.\n<\/div>\n\n<div class=\"event\">\n<strong>08:15<\/strong><br>\nBaisse soudaine des ventes corporate.\n<\/div>\n\n<div class=\"event\">\n<strong>09:30<\/strong><br>\nIncident op\u00e9rationnel sur une escale.\n<\/div>\n\n<div class=\"event\">\n<strong>11:00<\/strong><br>\nAppel d’une autorit\u00e9.\n<\/div>\n\n<div class=\"event\">\n<strong>13:00<\/strong><br>\nPromotion agressive d’un concurrent.\n<\/div>\n\n<div class=\"event\">\n<strong>15:00<\/strong><br>\nIncident VIP.\n<\/div>\n\n<div class=\"event\">\n<strong>17:00<\/strong><br>\nD\u00e9passement budg\u00e9taire.\n<\/div>\n\n<div class=\"event\">\n<strong>18:30<\/strong><br>\nPr\u00e9sentation du rapport \u00e0 la Direction g\u00e9n\u00e9rale.\n<\/div>\n\n<\/div>\n\n<br>\n\n<button\nclass=\"btn btn-blue\"\nonclick=\"completeExam()\">\n\ud83c\udfaf Valider l’examen final\n<\/button>\n\n<div\nid=\"examResult\"\nstyle=\"margin-top:18px;font-weight:800\">\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section>\n\n<div class=\"wrap\">\n\n<div class=\"section-title\">\n\n<div class=\"eyebrow\">\nCERTIFICATION\n<\/div>\n\n<h2>Dipl\u00f4me de fin de parcours<\/h2>\n\n<p>\nLe certificat est d\u00e9bloqu\u00e9 lorsque les 20 modules sont termin\u00e9s et\nl’examen final valid\u00e9.\n<\/p>\n\n<\/div>\n\n<div id=\"certificateLocked\">\n\n<div class=\"case-card\">\n\n<h3>\ud83d\udd12 Certificat verrouill\u00e9<\/h3>\n\n<p>\nTerminez l’ensemble du parcours pour g\u00e9n\u00e9rer votre certificat.\n<\/p>\n\n<\/div>\n\n<\/div>\n\n<div\nclass=\"certificate\"\nid=\"certificate\">\n\n<div class=\"cert-logo\">\nMAROC ZAIN ACADEMY\n<\/div>\n\n<div class=\"cert-title\">\nCERTIFICAT\n<\/div>\n\n<p>\nLa Direction de Maroc Zain Academy certifie que\n<\/p>\n\n<div\nclass=\"cert-name\"\nid=\"certificateName\">\nApprenant\n<\/div>\n\n<p>\na satisfait aux exigences de la formation\n<\/p>\n\n<div class=\"cert-course\">\nDIRECTEUR MAROC & MOYEN-ORIENT\n<\/div>\n\n<div class=\"cert-score\">\n\nScore QCM :\n<strong id=\"certificateScore\">\n0 %\n<\/strong>\n\n<\/div>\n\n<div style=\"margin-top:20px\">\n\nNiveau obtenu :\n<strong id=\"certificateLevel\">\nExecutive\n<\/strong>\n\n<\/div>\n\n<div class=\"signature-row\">\n\n<div class=\"signature\">\nDirection p\u00e9dagogique\n<\/div>\n\n<div class=\"signature\">\nMaroc Zain Academy\n<\/div>\n\n<\/div>\n\n<br><br>\n\n<button\nclass=\"btn btn-gold\"\nonclick=\"window.print()\">\n\ud83d\udda8\ufe0f Imprimer le certificat\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section style=\"background:#eef5fc\">\n\n<div class=\"wrap\">\n\n<div class=\"control-panel\">\n\n<h2 style=\"color:white\">\n\u2699\ufe0f Gestion locale\n<\/h2>\n\n<p style=\"color:#bdd0e5\">\nLa progression est enregistr\u00e9e avec LocalStorage dans le navigateur.\n<\/p>\n\n<div class=\"control-actions\">\n\n<button\nclass=\"btn btn-gold\"\nonclick=\"saveAll()\">\n\ud83d\udcbe Sauvegarder\n<\/button>\n\n<button\nclass=\"btn btn-white\"\nonclick=\"loadData()\">\n\ud83d\udd04 Recharger\n<\/button>\n\n<button\nclass=\"btn btn-danger\"\nonclick=\"resetCourse()\">\n\ud83d\uddd1\ufe0f R\u00e9initialiser\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<footer>\n\n<div class=\"wrap\">\n\n<strong>\nMAROC ZAIN ACADEMY\n<\/strong>\n\n<br>\n\nExecutive Aviation Learning Platform\n\n<\/div>\n\n<\/footer>\n\n<\/div>\n\n<div\nclass=\"toast\"\nid=\"toast\">\nProgression enregistr\u00e9e\n<\/div>\n\n<script>\n\n\/* ===================================================\nDONNEES GENERALES\n=================================================== *\/\n\nconst modules = [\n\n{\ntitle:\"Fonction du Directeur de zone\",\ndesc:\"R\u00f4le, responsabilit\u00e9s, d\u00e9l\u00e9gations et gouvernance.\"\n},\n\n{\ntitle:\"G\u00e9ographie \u00e9conomique\",\ndesc:\"Analyse \u00e9conomique du Maroc et du Moyen-Orient.\"\n},\n\n{\ntitle:\"Strat\u00e9gie commerciale\",\ndesc:\"Segmentation, objectifs et d\u00e9veloppement commercial.\"\n},\n\n{\ntitle:\"Business Plan\",\ndesc:\"Construction du plan annuel et des priorit\u00e9s.\"\n},\n\n{\ntitle:\"Budget et co\u00fbts\",\ndesc:\"Pr\u00e9vision, contr\u00f4le budg\u00e9taire et optimisation.\"\n},\n\n{\ntitle:\"Analyse trafic\",\ndesc:\"ASK, RPK, O&D, coefficient de remplissage et yield.\"\n},\n\n{\ntitle:\"Revenue Management\",\ndesc:\"Pricing, disponibilit\u00e9 et optimisation de recette.\"\n},\n\n{\ntitle:\"Network Planning\",\ndesc:\"Capacit\u00e9, fr\u00e9quences, routes et d\u00e9veloppement r\u00e9seau.\"\n},\n\n{\ntitle:\"Distribution\",\ndesc:\"Agences, GDS, digital, NDC et vente directe.\"\n},\n\n{\ntitle:\"Grands comptes\",\ndesc:\"Corporate, march\u00e9s publics et contrats strat\u00e9giques.\"\n},\n\n{\ntitle:\"Management des repr\u00e9sentations\",\ndesc:\"Pilotage des responsables pays et bureaux commerciaux.\"\n},\n\n{\ntitle:\"Management des escales\",\ndesc:\"Coordination des chefs d'escale et qualit\u00e9 op\u00e9rationnelle.\"\n},\n\n{\ntitle:\"Agences et Tour-op\u00e9rateurs\",\ndesc:\"Animation commerciale et fid\u00e9lisation.\"\n},\n\n{\ntitle:\"Hajj et Omra\",\ndesc:\"Groupes, capacit\u00e9 et op\u00e9rations p\u00e8lerinage.\"\n},\n\n{\ntitle:\"VIP et protocole\",\ndesc:\"D\u00e9l\u00e9gations officielles, personnalit\u00e9s et protocole.\"\n},\n\n{\ntitle:\"Diplomatie a\u00e9rienne\",\ndesc:\"Relations institutionnelles, ambassades et autorit\u00e9s.\"\n},\n\n{\ntitle:\"Gestion de crise\",\ndesc:\"Crise op\u00e9rationnelle, r\u00e9seau et r\u00e9putation.\"\n},\n\n{\ntitle:\"Leadership multiculturel\",\ndesc:\"Management d'\u00e9quipes internationales.\"\n},\n\n{\ntitle:\"Reporting Direction G\u00e9n\u00e9rale\",\ndesc:\"Synth\u00e8ses, KPI et recommandations ex\u00e9cutives.\"\n},\n\n{\ntitle:\"Simulation Direction de zone\",\ndesc:\"Pilotage int\u00e9gral Maroc\u2013Moyen-Orient.\"\n}\n\n];\n\n\n\/* ===================================================\nQCM\n=================================================== *\/\n\nconst questions = [\n\n{\nq:\"Un vol est rempli \u00e0 92 %, mais sa recette est inf\u00e9rieure \u00e0 l'objectif. Quelle analyse est prioritaire ?\",\nanswers:[\n\"Augmenter les fr\u00e9quences\",\n\"Analyser le yield et le mix tarifaire\",\n\"Fermer imm\u00e9diatement les ventes\",\n\"Augmenter la franchise bagages\"\n],\ncorrect:1,\nexplanation:\"Un taux de remplissage \u00e9lev\u00e9 ne garantit pas une bonne recette. Il faut analyser les tarifs vendus et la contribution des diff\u00e9rentes classes.\"\n},\n\n{\nq:\"Que signifie principalement le coefficient de remplissage ?\",\nanswers:[\n\"Le pourcentage de si\u00e8ges occup\u00e9s\",\n\"La recette moyenne par passager\",\n\"Le co\u00fbt moyen par vol\",\n\"Le nombre d'agences de voyages\"\n],\ncorrect:0,\nexplanation:\"Le coefficient de remplissage mesure la proportion de capacit\u00e9 effectivement occup\u00e9e.\"\n},\n\n{\nq:\"Une baisse des ventes corporate doit d'abord conduire \u00e0 :\",\nanswers:[\n\"Une baisse g\u00e9n\u00e9rale des tarifs\",\n\"Une analyse des comptes et contrats concern\u00e9s\",\n\"La fermeture de la ligne\",\n\"Une r\u00e9duction imm\u00e9diate des fr\u00e9quences\"\n],\ncorrect:1,\nexplanation:\"La bonne pratique consiste \u00e0 d\u00e9terminer pr\u00e9cis\u00e9ment quels comptes ou segments expliquent la baisse.\"\n},\n\n{\nq:\"Quel \u00e9l\u00e9ment est indispensable avant l'ouverture d'une nouvelle route ?\",\nanswers:[\n\"Une \u00e9tude de march\u00e9 et une analyse \u00e9conomique\",\n\"Un concours sur les r\u00e9seaux sociaux\",\n\"Une augmentation du personnel administratif\",\n\"Une campagne publicitaire avant toute analyse\"\n],\ncorrect:0,\nexplanation:\"Une nouvelle ligne doit \u00eatre justifi\u00e9e par le march\u00e9, le trafic, les co\u00fbts, les recettes attendues et le positionnement r\u00e9seau.\"\n},\n\n{\nq:\"Le Revenue Management cherche principalement \u00e0 :\",\nanswers:[\n\"Vendre tous les si\u00e8ges au m\u00eame tarif\",\n\"Optimiser le revenu g\u00e9n\u00e9r\u00e9 par la capacit\u00e9 disponible\",\n\"Augmenter les salaires\",\n\"R\u00e9duire tous les tarifs\"\n],\ncorrect:1,\nexplanation:\"Le Revenue Management ajuste disponibilit\u00e9 et prix afin d'optimiser la recette.\"\n},\n\n{\nq:\"Dans une crise op\u00e9rationnelle, quelle action est prioritaire ?\",\nanswers:[\n\"Masquer l'incident\",\n\"\u00c9valuer la s\u00e9curit\u00e9 et prot\u00e9ger les passagers\",\n\"Lancer une promotion\",\n\"Reporter toute communication\"\n],\ncorrect:1,\nexplanation:\"La s\u00e9curit\u00e9 et la protection des personnes demeurent prioritaires.\"\n},\n\n{\nq:\"Une direction de zone doit suivre :\",\nanswers:[\n\"Uniquement les ventes\",\n\"Ventes, trafic, revenus, co\u00fbts, qualit\u00e9 et risques\",\n\"Uniquement la ponctualit\u00e9\",\n\"Uniquement les r\u00e9clamations\"\n],\ncorrect:1,\nexplanation:\"Le Directeur doit disposer d'une vision globale de la performance.\"\n},\n\n{\nq:\"Le trafic O&D correspond \u00e0 :\",\nanswers:[\n\"Origine et destination\",\n\"Op\u00e9rations et distribution\",\n\"Offre et demande interne\",\n\"Organisation et d\u00e9veloppement\"\n],\ncorrect:0,\nexplanation:\"O&D signifie Origin and Destination.\"\n},\n\n{\nq:\"Une baisse du yield avec un fort remplissage peut indiquer :\",\nanswers:[\n\"Un mix tarifaire trop faible\",\n\"Une disparition des passagers\",\n\"Une baisse automatique des co\u00fbts\",\n\"Une hausse garantie de marge\"\n],\ncorrect:0,\nexplanation:\"Beaucoup de si\u00e8ges peuvent avoir \u00e9t\u00e9 vendus \u00e0 des tarifs trop faibles.\"\n},\n\n{\nq:\"Le Directeur doit pr\u00e9senter \u00e0 la Direction g\u00e9n\u00e9rale :\",\nanswers:[\n\"Des donn\u00e9es sans recommandation\",\n\"Une synth\u00e8se accompagn\u00e9e d'actions recommand\u00e9es\",\n\"Uniquement des statistiques historiques\",\n\"Des avis sans donn\u00e9es\"\n],\ncorrect:1,\nexplanation:\"Le reporting ex\u00e9cutif doit permettre la prise de d\u00e9cision.\"\n},\n\n{\nq:\"Lors d'une forte saison Omra, l'objectif principal est :\",\nanswers:[\n\"Maximiser la capacit\u00e9 sans contr\u00f4le\",\n\"Coordonner commercial, op\u00e9rations, assistance et partenaires\",\n\"Supprimer les groupes\",\n\"Limiter toute communication\"\n],\ncorrect:1,\nexplanation:\"Les flux p\u00e8lerinage exigent une coordination transversale.\"\n},\n\n{\nq:\"Un bon manager de zone doit :\",\nanswers:[\n\"D\u00e9cider seul syst\u00e9matiquement\",\n\"D\u00e9l\u00e9guer tout sans contr\u00f4le\",\n\"D\u00e9cider, d\u00e9l\u00e9guer et contr\u00f4ler\",\n\"\u00c9viter les d\u00e9cisions difficiles\"\n],\ncorrect:2,\nexplanation:\"Le leadership associe autonomie des \u00e9quipes et responsabilit\u00e9 du Directeur.\"\n}\n\n];\n\n\n\/* ===================================================\nETAT\n=================================================== *\/\n\nlet state = {\n\nname:\"\",\nstudentId:\"\",\ncompletedModules:[],\nquizIndex:0,\nquizCorrect:0,\nquizAnswered:false,\nquizFinished:false,\nexamCompleted:false\n\n};\n\n\n\/* ===================================================\nMODULES\n=================================================== *\/\n\nfunction renderModules(){\n\nconst grid =\ndocument.getElementById(\"moduleGrid\");\n\ngrid.innerHTML=\"\";\n\nmodules.forEach((module,index)=>{\n\nconst completed =\nstate.completedModules.includes(index);\n\nconst div =\ndocument.createElement(\"div\");\n\ndiv.className=\"module\";\n\ndiv.innerHTML=`\n\n<div class=\"module-number\">\n${String(index+1).padStart(2,\"0\")}\n<\/div>\n\n<h3>\n${module.title}\n<\/h3>\n\n<p>\n${module.desc}\n<\/p>\n\n<div class=\"module-actions\">\n\n<span style=\"\nfont-size:12px;\ncolor:#718096;\nalign-self:center\">\nModule ${index+1}\n<\/span>\n\n<button\nclass=\"mini-btn complete-btn ${completed ? \"done\" : \"\"}\"\nonclick=\"toggleModule(${index})\">\n\n${completed ? \"\u2713 Termin\u00e9\" : \"Marquer termin\u00e9\"}\n\n<\/button>\n\n<\/div>\n\n`;\n\ngrid.appendChild(div);\n\n});\n\n}\n\n\n\/* ===================================================\nMODULE COMPLETE\n=================================================== *\/\n\nfunction toggleModule(index){\n\nif(state.completedModules.includes(index)){\n\nstate.completedModules =\nstate.completedModules.filter(i=>i!==index);\n\n}else{\n\nstate.completedModules.push(index);\n\n}\n\nrenderModules();\n\nupdateDashboard();\n\nsaveAll();\n\n}\n\n\n\/* ===================================================\nPROFILE\n=================================================== *\/\n\nfunction saveProfile(){\n\nstate.name =\ndocument.getElementById(\"studentName\").value.trim();\n\nstate.studentId =\ndocument.getElementById(\"studentId\").value.trim();\n\nupdateDashboard();\n\nsaveAll();\n\ntoast(\"Profil enregistr\u00e9\");\n\n}\n\n\n\/* ===================================================\nQUIZ\n=================================================== *\/\n\nfunction loadQuestion(){\n\nconst q =\nquestions[state.quizIndex];\n\ndocument.getElementById(\"quizTotal\")\n.innerText=questions.length;\n\ndocument.getElementById(\"quizCurrent\")\n.innerText=state.quizIndex+1;\n\ndocument.getElementById(\"quizQuestion\")\n.innerText=q.q;\n\ndocument.getElementById(\"quizFeedback\")\n.innerHTML=\"\";\n\nconst holder =\ndocument.getElementById(\"quizOptions\");\n\nholder.innerHTML=\"\";\n\nq.answers.forEach((answer,index)=>{\n\nconst btn =\ndocument.createElement(\"button\");\n\nbtn.className=\"quiz-option\";\n\nbtn.innerHTML=\n`${String.fromCharCode(65+index)} \u2014 ${answer}`;\n\nbtn.onclick=()=>{\nanswerQuestion(index,btn);\n};\n\nholder.appendChild(btn);\n\n});\n\nstate.quizAnswered=false;\n\nupdateQuizDisplay();\n\n}\n\n\n\/* ===================================================\nANSWER\n=================================================== *\/\n\nfunction answerQuestion(index,btn){\n\nif(state.quizAnswered){\nreturn;\n}\n\nstate.quizAnswered=true;\n\nconst q =\nquestions[state.quizIndex];\n\nconst buttons =\ndocument.querySelectorAll(\".quiz-option\");\n\nif(index===q.correct){\n\nbtn.classList.add(\"correct\");\n\nstate.quizCorrect++;\n\ndocument.getElementById(\"quizFeedback\")\n.innerHTML=\n\"\u2705 Bonne r\u00e9ponse.<br>\"+q.explanation;\n\n}else{\n\nbtn.classList.add(\"wrong\");\n\nbuttons[q.correct]\n.classList.add(\"correct\");\n\ndocument.getElementById(\"quizFeedback\")\n.innerHTML=\n\"\u274c R\u00e9ponse incorrecte.<br>\"+q.explanation;\n\n}\n\nupdateQuizDisplay();\n\nsaveAll();\n\n}\n\n\n\/* ===================================================\nNEXT\n=================================================== *\/\n\nfunction nextQuestion(){\n\nif(!state.quizAnswered){\n\ntoast(\"R\u00e9pondez \u00e0 la question avant de continuer\");\n\nreturn;\n\n}\n\nif(state.quizIndex <\nquestions.length-1){\n\nstate.quizIndex++;\n\nloadQuestion();\n\n}else{\n\nstate.quizFinished=true;\n\nconst score =\nquizPercentage();\n\ndocument.getElementById(\"quizFeedback\")\n.innerHTML=\n`\ud83c\udfc1 QCM termin\u00e9.<br>\nScore final : <strong>${score}%<\/strong>`;\n\nupdateDashboard();\n\nsaveAll();\n\n}\n\n}\n\n\n\/* ===================================================\nRESTART QUIZ\n=================================================== *\/\n\nfunction restartQuiz(){\n\nstate.quizIndex=0;\nstate.quizCorrect=0;\nstate.quizFinished=false;\nstate.quizAnswered=false;\n\nloadQuestion();\n\nupdateDashboard();\n\nsaveAll();\n\n}\n\n\n\/* ===================================================\nQUIZ SCORE\n=================================================== *\/\n\nfunction quizPercentage(){\n\nif(questions.length===0){\nreturn 0;\n}\n\nreturn Math.round(\n(state.quizCorrect\/questions.length)*100\n);\n\n}\n\nfunction updateQuizDisplay(){\n\ndocument.getElementById(\"quizLiveScore\")\n.innerText=state.quizCorrect;\n\n}\n\n\n\/* ===================================================\nCASE\n=================================================== *\/\n\nfunction caseAnswer(correct){\n\nconst element =\ndocument.getElementById(\"caseFeedback\");\n\nif(correct){\n\nelement.style.color=\"#15905d\";\n\nelement.innerHTML=\n\"\u2705 D\u00e9cision Executive : analyser la cause exacte de la sous-performance avant de toucher aux tarifs.\";\n\n}else{\n\nelement.style.color=\"#cf334c\";\n\nelement.innerHTML=\n\"\u274c D\u00e9cision trop rapide. Le Directeur doit analyser O&D, mix tarifaire, corporate, concurrence, calendrier et distribution.\";\n\n}\n\n}\n\n\n\/* ===================================================\nEXAM\n=================================================== *\/\n\nfunction completeExam(){\n\nif(state.completedModules.length < 20){\n\ndocument.getElementById(\"examResult\")\n.style.color=\"#cc334b\";\n\ndocument.getElementById(\"examResult\")\n.innerHTML=\n\"\ud83d\udd12 Terminez les 20 modules avant de valider l'examen.\";\n\nreturn;\n\n}\n\nstate.examCompleted=true;\n\ndocument.getElementById(\"examResult\")\n.style.color=\"#128557\";\n\ndocument.getElementById(\"examResult\")\n.innerHTML=\n\"\u2705 Examen final valid\u00e9.\";\n\nupdateDashboard();\n\nsaveAll();\n\n}\n\n\n\/* ===================================================\nDASHBOARD\n=================================================== *\/\n\nfunction updateDashboard(){\n\nconst completed =\nstate.completedModules.length;\n\nconst modulePercent =\nMath.round((completed\/20)*100);\n\ndocument.getElementById(\"completedModules\")\n.innerText=`${completed}\/20`;\n\ndocument.getElementById(\"progressPercent\")\n.innerText=`${modulePercent}%`;\n\ndocument.getElementById(\"moduleProgress\")\n.style.width=modulePercent+\"%\";\n\ndocument.getElementById(\"globalProgress\")\n.style.width=modulePercent+\"%\";\n\ndocument.getElementById(\"quizScoreDisplay\")\n.innerText=quizPercentage()+\"%\";\n\nconst studentName =\nstate.name || \"Apprenant Maroc Zain Academy\";\n\ndocument.getElementById(\"dashboardName\")\n.innerText=studentName;\n\ndocument.getElementById(\"topStudent\")\n.innerText=\nstate.name ?\n\"Connect\u00e9 : \"+state.name :\n\"Apprenant non identifi\u00e9\";\n\n\n\/* LEVEL *\/\n\nlet level=\"D\u00e9butant\";\n\nif(completed>=5)\nlevel=\"Interm\u00e9diaire\";\n\nif(completed>=10)\nlevel=\"Avanc\u00e9\";\n\nif(completed>=15)\nlevel=\"Manager\";\n\nif(completed>=20)\nlevel=\"Executive\";\n\ndocument.getElementById(\"levelBadge\")\n.innerText=\"Niveau : \"+level;\n\n\n\/* BADGES *\/\n\nlet badges=0;\n\nconst conditions=[\n\ncompleted>=5,\n\ncompleted>=10,\n\ncompleted>=15,\n\ncompleted>=20,\n\nquizPercentage()>=80\n\n];\n\nconditions.forEach((condition,index)=>{\n\nconst badge =\ndocument.getElementById(\"badge\"+(index+1));\n\nif(condition){\n\nbadge.classList.add(\"unlocked\");\n\nbadges++;\n\n}else{\n\nbadge.classList.remove(\"unlocked\");\n\n}\n\n});\n\ndocument.getElementById(\"badgeCount\")\n.innerText=badges+\"\/5\";\n\n\n\/* CERTIFICATE *\/\n\nconst certificateUnlocked =\ncompleted===20 &&\nstate.examCompleted;\n\nif(certificateUnlocked){\n\ndocument.getElementById(\"certificateLocked\")\n.style.display=\"none\";\n\ndocument.getElementById(\"certificate\")\n.classList.add(\"show\");\n\ndocument.getElementById(\"certificateName\")\n.innerText=studentName;\n\ndocument.getElementById(\"certificateScore\")\n.innerText=\nquizPercentage()+\" %\";\n\ndocument.getElementById(\"certificateLevel\")\n.innerText=\nquizPercentage()>=85 ?\n\"Executive Excellence\" :\n\"Executive\";\n\n}else{\n\ndocument.getElementById(\"certificateLocked\")\n.style.display=\"block\";\n\ndocument.getElementById(\"certificate\")\n.classList.remove(\"show\");\n\n}\n\n}\n\n\n\/* ===================================================\nLOCAL STORAGE\n=================================================== *\/\n\nfunction saveAll(){\n\nlocalStorage.setItem(\n\"marocZainDirectorTraining\",\nJSON.stringify(state)\n);\n\ntoast(\"Progression sauvegard\u00e9e\");\n\n}\n\nfunction loadData(){\n\nconst data =\nlocalStorage.getItem(\n\"marocZainDirectorTraining\"\n);\n\nif(data){\n\nconst saved =\nJSON.parse(data);\n\nstate={\n...state,\n...saved\n};\n\ndocument.getElementById(\"studentName\")\n.value=state.name || \"\";\n\ndocument.getElementById(\"studentId\")\n.value=state.studentId || \"\";\n\n}\n\nrenderModules();\n\nloadQuestion();\n\nupdateDashboard();\n\n}\n\n\n\/* ===================================================\nRESET\n=================================================== *\/\n\nfunction resetCourse(){\n\nconst ok =\nconfirm(\n\"Voulez-vous vraiment supprimer toute votre progression ?\"\n);\n\nif(!ok){\nreturn;\n}\n\nlocalStorage.removeItem(\n\"marocZainDirectorTraining\"\n);\n\nstate={\n\nname:\"\",\nstudentId:\"\",\ncompletedModules:[],\nquizIndex:0,\nquizCorrect:0,\nquizAnswered:false,\nquizFinished:false,\nexamCompleted:false\n\n};\n\ndocument.getElementById(\"studentName\")\n.value=\"\";\n\ndocument.getElementById(\"studentId\")\n.value=\"\";\n\nrenderModules();\n\nloadQuestion();\n\nupdateDashboard();\n\ntoast(\"Formation r\u00e9initialis\u00e9e\");\n\n}\n\n\n\/* ===================================================\nTOAST\n=================================================== *\/\n\nfunction toast(message){\n\nconst t =\ndocument.getElementById(\"toast\");\n\nt.innerText=message;\n\nt.classList.add(\"show\");\n\nsetTimeout(()=>{\nt.classList.remove(\"show\");\n},1800);\n\n}\n\n\n\/* ===================================================\nSTART\n=================================================== *\/\n\nwindow.addEventListener(\n\"DOMContentLoaded\",\nloadData\n);\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Directeur Maroc & Moyen-Orient | Maroc Zain Academy MAROC ZAIN ACADEMY Apprenant non identifi\u00e9 \ud83c\udf93 EXECUTIVE AVIATION PROGRAM Directeur Maroc & Moyen-Orient Programme de formation de haut niveau destin\u00e9 au pilotage d’une zone commerciale a\u00e9rienne : strat\u00e9gie, revenus, r\u00e9seau, management, diplomatie a\u00e9rienne, op\u00e9rations sp\u00e9ciales et gestion de crise. \ud83d\udcca Mon tableau de bord \ud83d\udcdd Commencer […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-3047","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/comments?post=3047"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3047\/revisions"}],"predecessor-version":[{"id":3048,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3047\/revisions\/3048"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=3047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/categories?post=3047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/tags?post=3047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}