Commande & Checkout \u2014 Maroc Zain Academy<\/title>\n <style>\n :root{\n --blue:#0b4f7a;\n --blue2:#0f6f9f;\n --gold:#e9c84a;\n --ink:#173042;\n --muted:#6f7f8b;\n --bg:#f5f8fb;\n --card:#ffffff;\n --ok:#1e9d66;\n --danger:#c93b3b;\n --border:#dbe5ec;\n --shadow:0 14px 40px rgba(14,65,95,.12);\n --radius:20px;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family:Inter,Arial,Helvetica,sans-serif;\n color:var(--ink);\n background:\n radial-gradient(circle at top left, rgba(15,111,159,.12), transparent 35%),\n linear-gradient(180deg,#f9fbfd 0%,#eef4f8 100%);\n }\n .topbar{\n background:linear-gradient(90deg,var(--blue),var(--blue2));\n color:#fff;\n padding:14px 20px;\n text-align:center;\n font-weight:700;\n letter-spacing:.2px;\n }\n .wrap{max-width:1180px;margin:34px auto;padding:0 18px 50px}\n .hero{\n background:linear-gradient(135deg,var(--blue),#123b5b);\n color:#fff;border-radius:28px;padding:30px;\n box-shadow:var(--shadow);\n position:relative;overflow:hidden;\n }\n .hero:after{\n content:\"\";\n position:absolute;right:-70px;top:-70px;width:220px;height:220px;\n background:rgba(233,200,74,.18);border-radius:50%;\n }\n .brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:22px}\n .brand-badge{\n width:46px;height:46px;border-radius:14px;\n display:grid;place-items:center;background:var(--gold);color:var(--blue);\n font-size:24px;\n }\n .hero h1{margin:22px 0 8px;font-size:clamp(28px,5vw,48px)}\n .hero p{margin:0;opacity:.9;max-width:760px;line-height:1.6}\n .steps{\n display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px\n }\n .step{\n background:rgba(255,255,255,.12);padding:12px 14px;border-radius:14px;\n font-weight:700;font-size:14px\n }\n .step.active{background:var(--gold);color:var(--blue)}\n .grid{\n display:grid;grid-template-columns:1.45fr .8fr;gap:24px;margin-top:24px\n }\n .card{\n background:var(--card);border:1px solid var(--border);\n border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)\n }\n h2{margin:0 0 18px;font-size:23px}\n h3{margin:22px 0 12px;font-size:17px}\n label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}\n input,select,textarea{\n width:100%;padding:13px 14px;border:1px solid var(--border);\n border-radius:12px;background:#fff;color:var(--ink);font-size:14px;\n outline:none;transition:.2s;\n }\n input:focus,select:focus,textarea:focus{\n border-color:var(--blue2);box-shadow:0 0 0 3px rgba(15,111,159,.1)\n }\n .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}\n .full{grid-column:1\/-1}\n .product{\n display:grid;grid-template-columns:1fr 115px 105px 44px;gap:12px;align-items:end;\n padding:14px;border:1px solid var(--border);border-radius:14px;margin-bottom:12px\n }\n .product-title{font-weight:900;margin-bottom:4px}\n .small{font-size:12px;color:var(--muted)}\n .remove{\n border:0;background:#fff0f0;color:var(--danger);width:42px;height:42px;\n border-radius:11px;font-size:18px;cursor:pointer;font-weight:900\n }\n .btn{\n border:0;border-radius:13px;padding:14px 18px;font-weight:900;\n cursor:pointer;font-size:15px;transition:.2s\n }\n .btn:hover{transform:translateY(-1px)}\n .btn-primary{background:linear-gradient(90deg,var(--blue),var(--blue2));color:#fff}\n .btn-gold{background:var(--gold);color:var(--blue)}\n .btn-soft{background:#eaf3f8;color:var(--blue)}\n .btn-block{width:100%}\n .notice{\n padding:14px;border-radius:13px;background:#eef8ff;border:1px solid #cce7f7;\n font-size:13px;line-height:1.5\n }\n .summary{position:sticky;top:18px}\n .line{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px dashed var(--border)}\n .line.total{font-size:20px;font-weight:900;border-bottom:0;padding-top:16px}\n .line.cover{color:var(--ok);font-weight:800}\n .payment{\n display:grid;grid-template-columns:repeat(3,1fr);gap:10px\n }\n .pay{\n border:1px solid var(--border);border-radius:13px;padding:13px;text-align:center;\n cursor:pointer;background:#fff;font-weight:800;font-size:13px\n }\n .pay input{width:auto;margin-right:5px}\n .check{display:flex;gap:10px;align-items:flex-start;margin-top:15px;font-size:13px;line-height:1.4}\n .check input{width:auto;margin-top:3px}\n .success{\n display:none;margin-top:24px;background:#effbf5;border:1px solid #bfe8d4;\n color:#14603f;border-radius:16px;padding:20px\n }\n .success strong{font-size:18px}\n .order-id{font-family:monospace;font-weight:900}\n .price-tag{font-size:13px;color:var(--muted)}\n .muted{color:var(--muted)}\n @media(max-width:900px){\n .grid{grid-template-columns:1fr}\n .summary{position:static}\n .steps{grid-template-columns:1fr 1fr}\n }\n @media(max-width:650px){\n .fields{grid-template-columns:1fr}\n .product{grid-template-columns:1fr 1fr}\n .remove{grid-column:2}\n .payment{grid-template-columns:1fr}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"topbar\">MAROC ZAIN ACADEMY \u2014 Inscription & Paiement s\u00e9curis\u00e9<\/div>\n\n <main class=\"wrap\">\n <section class=\"hero\">\n <div class=\"brand\">\n <div class=\"brand-badge\">\u2708<\/div>\n <div>MAROC ZAIN ACADEMY<\/div>\n <\/div>\n <h1>Commande & Checkout<\/h1>\n <p>Finalisez votre inscription \u00e0 une formation, renseignez le b\u00e9n\u00e9ficiaire, appliquez une \u00e9ventuelle prise en charge OFPPT et choisissez votre mode de paiement.<\/p>\n <div class=\"steps\">\n <div class=\"step\">1. Formation<\/div>\n <div class=\"step active\">2. Commande<\/div>\n <div class=\"step active\">3. Checkout<\/div>\n <div class=\"step\">4. Confirmation<\/div>\n <\/div>\n <\/section>\n\n <div class=\"grid\">\n <section>\n <div class=\"card\">\n <h2>Votre commande<\/h2>\n <div id=\"products\"><\/div>\n <button class=\"btn btn-soft\" type=\"button\" id=\"addProduct\">+ Ajouter une formation<\/button>\n <\/div>\n\n <div class=\"card\" style=\"margin-top:24px\">\n <h2>Informations du client<\/h2>\n <div class=\"fields\">\n <div>\n <label>Type de client<\/label>\n <select id=\"clientType\">\n <option value=\"Particulier\">Particulier<\/option>\n <option value=\"Entreprise\">Entreprise<\/option>\n <option value=\"\u00c9cole\">\u00c9cole \/ Institut<\/option>\n <option value=\"Association\">Association<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Nom \/ Raison sociale *<\/label>\n <input id=\"name\" placeholder=\"Nom complet ou soci\u00e9t\u00e9\" required>\n <\/div>\n <div>\n <label>Email *<\/label>\n <input id=\"email\" type=\"email\" placeholder=\"contact@exemple.com\" required>\n <\/div>\n <div>\n <label>T\u00e9l\u00e9phone *<\/label>\n <input id=\"phone\" placeholder=\"+212 ...\" required>\n <\/div>\n <div>\n <label>ICE \/ Identifiant fiscal<\/label>\n <input id=\"ice\" placeholder=\"Facultatif\">\n <\/div>\n <div>\n <label>Ville<\/label>\n <input id=\"city\" placeholder=\"Ex. El Jadida\">\n <\/div>\n <div class=\"full\">\n <label>Adresse de facturation<\/label>\n <textarea id=\"address\" rows=\"3\" placeholder=\"Adresse compl\u00e8te\"><\/textarea>\n <\/div>\n <\/div>\n\n <h3>Dossier de prise en charge OFPPT<\/h3>\n <div class=\"notice\">\n Activez cette option uniquement si le dossier est \u00e9ligible et valid\u00e9. Le taux est configurable et ne constitue pas une validation automatique de prise en charge.\n <\/div>\n\n <div class=\"fields\" style=\"margin-top:14px\">\n <div>\n <label>Prise en charge<\/label>\n <select id=\"ofpptEnabled\">\n <option value=\"no\">Non<\/option>\n <option value=\"yes\">Oui<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Taux de prise en charge<\/label>\n <select id=\"ofpptRate\" disabled>\n <option value=\"0\">0 %<\/option>\n <option value=\"30\">30 %<\/option>\n <option value=\"50\">50 %<\/option>\n <option value=\"70\" selected>70 %<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <h3>Mode de paiement<\/h3>\n <div class=\"payment\">\n <label class=\"pay\"><input type=\"radio\" name=\"payment\" value=\"Carte\" checked> Carte bancaire<\/label>\n <label class=\"pay\"><input type=\"radio\" name=\"payment\" value=\"Virement\"> Virement<\/label>\n <label class=\"pay\"><input type=\"radio\" name=\"payment\" value=\"Agence\"> Paiement agence<\/label>\n <\/div>\n\n <div class=\"check\">\n <input type=\"checkbox\" id=\"terms\">\n <label for=\"terms\" style=\"margin:0;font-weight:600\">\n J\u2019accepte les conditions de vente, les conditions d\u2019inscription et la politique de traitement des donn\u00e9es.\n <\/label>\n <\/div>\n\n <div class=\"success\" id=\"successBox\"><\/div>\n <\/div>\n <\/section>\n\n <aside>\n <div class=\"card summary\">\n <h2>R\u00e9capitulatif<\/h2>\n <div class=\"line\"><span>Sous-total HT<\/span><strong id=\"subtotalHT\">0 MAD<\/strong><\/div>\n <div class=\"line\"><span>TVA (20 %)<\/span><strong id=\"vat\">0 MAD<\/strong><\/div>\n <div class=\"line\"><span>Total TTC<\/span><strong id=\"totalTTC\">0 MAD<\/strong><\/div>\n <div class=\"line cover\"><span>Prise en charge OFPPT<\/span><strong id=\"ofpptAmount\">– 0 MAD<\/strong><\/div>\n <div class=\"line total\"><span>\u00c0 payer<\/span><strong id=\"payable\">0 MAD<\/strong><\/div>\n\n <button class=\"btn btn-gold btn-block\" id=\"confirmBtn\" style=\"margin-top:18px\">\n Confirmer la commande\n <\/button>\n <button class=\"btn btn-primary btn-block\" id=\"printBtn\" style=\"margin-top:10px\">\n Imprimer le r\u00e9capitulatif\n <\/button>\n\n <p class=\"small\" style=\"margin-top:14px\">\n Le bouton de confirmation v\u00e9rifie les champs obligatoires et g\u00e9n\u00e8re un num\u00e9ro de commande local. Pour un paiement r\u00e9el, connectez ensuite cette page \u00e0 WooCommerce, Stripe, CMI ou votre passerelle bancaire.\n <\/p>\n <\/div>\n <\/aside>\n <\/div>\n <\/main>\n\n<script>\nconst catalog = [\n {name:\"Agent d\u2019Escale \u2014 Niveau Avanc\u00e9\", price:1800},\n {name:\"Chef d\u2019Escale\", price:2400},\n {name:\"Agent de Voyages & Chef d\u2019Agence\", price:1900},\n {name:\"Chef de Cabine\", price:2200},\n {name:\"Directeur Commercial A\u00e9rien\", price:2900},\n {name:\"Responsable Financier Compagnie A\u00e9rienne\", price:2600},\n {name:\"Safar Flyer \u2014 Produit Fid\u00e9lit\u00e9\", price:1400},\n {name:\"MICE & \u00c9v\u00e9nementiel\", price:1700}\n];\n\nlet items = [\n {course:0, qty:1},\n {course:2, qty:1}\n];\n\nconst money = v => new Intl.NumberFormat('fr-MA',{maximumFractionDigits:2}).format(v) + \" MAD\";\n\nfunction renderProducts(){\n const box = document.getElementById(\"products\");\n box.innerHTML = \"\";\n items.forEach((item, index)=>{\n const p = catalog[item.course];\n const div = document.createElement(\"div\");\n div.className = \"product\";\n div.innerHTML = `\n <div>\n <div class=\"product-title\">${p.name}<\/div>\n <div class=\"price-tag\">${money(p.price)} HT \/ participant<\/div>\n <\/div>\n <div>\n <label>Participants<\/label>\n <input type=\"number\" min=\"1\" max=\"999\" value=\"${item.qty}\" data-qty=\"${index}\">\n <\/div>\n <div>\n <label>Montant HT<\/label>\n <input value=\"${money(p.price*item.qty)}\" readonly>\n <\/div>\n <button class=\"remove\" type=\"button\" data-remove=\"${index}\" title=\"Supprimer\">\u00d7<\/button>\n `;\n box.appendChild(div);\n });\n\n document.querySelectorAll(\"[data-qty]\").forEach(el=>{\n el.addEventListener(\"input\", e=>{\n const i = Number(e.target.dataset.qty);\n items[i].qty = Math.max(1, Number(e.target.value || 1));\n renderProducts();\n calculate();\n });\n });\n\n document.querySelectorAll(\"[data-remove]\").forEach(el=>{\n el.addEventListener(\"click\", e=>{\n const i = Number(e.currentTarget.dataset.remove);\n items.splice(i,1);\n if(items.length===0) items.push({course:0,qty:1});\n renderProducts();\n calculate();\n });\n });\n}\n\nfunction calculate(){\n const subtotal = items.reduce((sum,item)=>{\n return sum + catalog[item.course].price * item.qty;\n },0);\n\n const vat = subtotal * 0.20;\n const total = subtotal + vat;\n\n const enabled = document.getElementById(\"ofpptEnabled\").value === \"yes\";\n const rate = enabled ? Number(document.getElementById(\"ofpptRate\").value) : 0;\n\n \/\/ Par d\u00e9faut, la prise en charge est simul\u00e9e sur le TTC.\n \/\/ \u00c0 adapter selon vos r\u00e8gles contractuelles r\u00e9elles.\n const cover = total * rate \/ 100;\n const payable = Math.max(0,total-cover);\n\n document.getElementById(\"subtotalHT\").textContent = money(subtotal);\n document.getElementById(\"vat\").textContent = money(vat);\n document.getElementById(\"totalTTC\").textContent = money(total);\n document.getElementById(\"ofpptAmount\").textContent = \"- \" + money(cover);\n document.getElementById(\"payable\").textContent = money(payable);\n}\n\ndocument.getElementById(\"ofpptEnabled\").addEventListener(\"change\", e=>{\n const enabled = e.target.value === \"yes\";\n document.getElementById(\"ofpptRate\").disabled = !enabled;\n calculate();\n});\ndocument.getElementById(\"ofpptRate\").addEventListener(\"change\", calculate);\n\ndocument.getElementById(\"addProduct\").addEventListener(\"click\", ()=>{\n const selected = prompt(\n \"Saisissez le num\u00e9ro de la formation :\\\\n\\\\n\" +\n catalog.map((x,i)=>`${i+1}. ${x.name} \u2014 ${money(x.price)} HT`).join(\"\\\\n\")\n );\n const idx = Number(selected)-1;\n if(Number.isInteger(idx) && idx>=0 && idx<catalog.length){\n items.push({course:idx,qty:1});\n renderProducts();\n calculate();\n }\n});\n\ndocument.getElementById(\"confirmBtn\").addEventListener(\"click\", ()=>{\n const name = document.getElementById(\"name\").value.trim();\n const email = document.getElementById(\"email\").value.trim();\n const phone = document.getElementById(\"phone\").value.trim();\n const terms = document.getElementById(\"terms\").checked;\n\n if(!name || !email || !phone){\n alert(\"Merci de renseigner le nom, l\u2019e-mail et le t\u00e9l\u00e9phone.\");\n return;\n }\n if(!terms){\n alert(\"Merci d\u2019accepter les conditions avant de confirmer.\");\n return;\n }\n\n const payment = document.querySelector('input[name=\"payment\"]:checked').value;\n const orderId = \"MZA-\" + new Date().getFullYear() + \"-\" + Math.floor(100000 + Math.random()*900000);\n\n const box = document.getElementById(\"successBox\");\n box.style.display = \"block\";\n box.innerHTML = `\n <strong>Commande enregistr\u00e9e avec succ\u00e8s.<\/strong><br><br>\n Num\u00e9ro : <span class=\"order-id\">${orderId}<\/span><br>\n Client : ${escapeHtml(name)}<br>\n Paiement : ${escapeHtml(payment)}<br>\n Montant \u00e0 payer : ${document.getElementById(\"payable\").textContent}<br><br>\n <span class=\"muted\">Cette d\u00e9monstration enregistre la commande c\u00f4t\u00e9 navigateur. Reliez le bouton \u00e0 votre syst\u00e8me de paiement ou \u00e0 WooCommerce pour une transaction r\u00e9elle.<\/span>\n `;\n box.scrollIntoView({behavior:\"smooth\",block:\"center\"});\n});\n\ndocument.getElementById(\"printBtn\").addEventListener(\"click\", ()=>window.print());\n\nfunction escapeHtml(str){\n return str.replace(\/[&<>\"']\/g, m => ({\n '&':'&','<':'<','>':'>','\"':'"',\"'\":'''\n }[m]));\n}\n\nrenderProducts();\ncalculate();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Commande & Checkout \u2014 Maroc Zain Academy MAROC ZAIN ACADEMY \u2014 Inscription & Paiement s\u00e9curis\u00e9 \u2708 MAROC ZAIN ACADEMY Commande & Checkout Finalisez votre inscription \u00e0 une formation, renseignez le b\u00e9n\u00e9ficiaire, appliquez une \u00e9ventuelle prise en charge OFPPT et choisissez votre mode de paiement. 1. Formation 2. Commande 3. Checkout 4. Confirmation Votre commande + […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3469","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/3469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/types\/page"}],"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=3469"}],"version-history":[{"count":2,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/3469\/revisions"}],"predecessor-version":[{"id":3658,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/3469\/revisions\/3658"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=3469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3469,"date":"2026-08-22T13:16:41","date_gmt":"2026-08-22T13:16:41","guid":{"rendered":"https:\/\/maroczain.com\/?page_id=3469"},"modified":"2026-08-22T18:19:08","modified_gmt":"2026-08-22T18:19:08","slug":"commande-checkout","status":"publish","type":"page","link":"https:\/\/maroczain.com\/en\/commande-checkout\/","title":{"rendered":"Commande & Checkout"},"content":{"rendered":"\n\n\n\n \n \n Commande & Checkout \u2014 Maroc Zain Academy<\/title>\n <style>\n :root{\n --blue:#0b4f7a;\n --blue2:#0f6f9f;\n --gold:#e9c84a;\n --ink:#173042;\n --muted:#6f7f8b;\n --bg:#f5f8fb;\n --card:#ffffff;\n --ok:#1e9d66;\n --danger:#c93b3b;\n --border:#dbe5ec;\n --shadow:0 14px 40px rgba(14,65,95,.12);\n --radius:20px;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family:Inter,Arial,Helvetica,sans-serif;\n color:var(--ink);\n background:\n radial-gradient(circle at top left, rgba(15,111,159,.12), transparent 35%),\n linear-gradient(180deg,#f9fbfd 0%,#eef4f8 100%);\n }\n .topbar{\n background:linear-gradient(90deg,var(--blue),var(--blue2));\n color:#fff;\n padding:14px 20px;\n text-align:center;\n font-weight:700;\n letter-spacing:.2px;\n }\n .wrap{max-width:1180px;margin:34px auto;padding:0 18px 50px}\n .hero{\n background:linear-gradient(135deg,var(--blue),#123b5b);\n color:#fff;border-radius:28px;padding:30px;\n box-shadow:var(--shadow);\n position:relative;overflow:hidden;\n }\n .hero:after{\n content:\"\";\n position:absolute;right:-70px;top:-70px;width:220px;height:220px;\n background:rgba(233,200,74,.18);border-radius:50%;\n }\n .brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:22px}\n .brand-badge{\n width:46px;height:46px;border-radius:14px;\n display:grid;place-items:center;background:var(--gold);color:var(--blue);\n font-size:24px;\n }\n .hero h1{margin:22px 0 8px;font-size:clamp(28px,5vw,48px)}\n .hero p{margin:0;opacity:.9;max-width:760px;line-height:1.6}\n .steps{\n display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px\n }\n .step{\n background:rgba(255,255,255,.12);padding:12px 14px;border-radius:14px;\n font-weight:700;font-size:14px\n }\n .step.active{background:var(--gold);color:var(--blue)}\n .grid{\n display:grid;grid-template-columns:1.45fr .8fr;gap:24px;margin-top:24px\n }\n .card{\n background:var(--card);border:1px solid var(--border);\n border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)\n }\n h2{margin:0 0 18px;font-size:23px}\n h3{margin:22px 0 12px;font-size:17px}\n label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}\n input,select,textarea{\n width:100%;padding:13px 14px;border:1px solid var(--border);\n border-radius:12px;background:#fff;color:var(--ink);font-size:14px;\n outline:none;transition:.2s;\n }\n input:focus,select:focus,textarea:focus{\n border-color:var(--blue2);box-shadow:0 0 0 3px rgba(15,111,159,.1)\n }\n .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}\n .full{grid-column:1\/-1}\n .product{\n display:grid;grid-template-columns:1fr 115px 105px 44px;gap:12px;align-items:end;\n padding:14px;border:1px solid var(--border);border-radius:14px;margin-bottom:12px\n }\n .product-title{font-weight:900;margin-bottom:4px}\n .small{font-size:12px;color:var(--muted)}\n .remove{\n border:0;background:#fff0f0;color:var(--danger);width:42px;height:42px;\n border-radius:11px;font-size:18px;cursor:pointer;font-weight:900\n }\n .btn{\n border:0;border-radius:13px;padding:14px 18px;font-weight:900;\n cursor:pointer;font-size:15px;transition:.2s\n }\n .btn:hover{transform:translateY(-1px)}\n .btn-primary{background:linear-gradient(90deg,var(--blue),var(--blue2));color:#fff}\n .btn-gold{background:var(--gold);color:var(--blue)}\n .btn-soft{background:#eaf3f8;color:var(--blue)}\n .btn-block{width:100%}\n .notice{\n padding:14px;border-radius:13px;background:#eef8ff;border:1px solid #cce7f7;\n font-size:13px;line-height:1.5\n }\n .summary{position:sticky;top:18px}\n .line{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px dashed var(--border)}\n .line.total{font-size:20px;font-weight:900;border-bottom:0;padding-top:16px}\n .line.cover{color:var(--ok);font-weight:800}\n .payment{\n display:grid;grid-template-columns:repeat(3,1fr);gap:10px\n }\n .pay{\n border:1px solid var(--border);border-radius:13px;padding:13px;text-align:center;\n cursor:pointer;background:#fff;font-weight:800;font-size:13px\n }\n .pay input{width:auto;margin-right:5px}\n .check{display:flex;gap:10px;align-items:flex-start;margin-top:15px;font-size:13px;line-height:1.4}\n .check input{width:auto;margin-top:3px}\n .success{\n display:none;margin-top:24px;background:#effbf5;border:1px solid #bfe8d4;\n color:#14603f;border-radius:16px;padding:20px\n }\n .success strong{font-size:18px}\n .order-id{font-family:monospace;font-weight:900}\n .price-tag{font-size:13px;color:var(--muted)}\n .muted{color:var(--muted)}\n @media(max-width:900px){\n .grid{grid-template-columns:1fr}\n .summary{position:static}\n .steps{grid-template-columns:1fr 1fr}\n }\n @media(max-width:650px){\n .fields{grid-template-columns:1fr}\n .product{grid-template-columns:1fr 1fr}\n .remove{grid-column:2}\n .payment{grid-template-columns:1fr}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"topbar\">MAROC ZAIN ACADEMY \u2014 Inscription & Paiement s\u00e9curis\u00e9<\/div>\n\n <main class=\"wrap\">\n <section class=\"hero\">\n <div class=\"brand\">\n <div class=\"brand-badge\">\u2708<\/div>\n <div>MAROC ZAIN ACADEMY<\/div>\n <\/div>\n <h1>Commande & Checkout<\/h1>\n <p>Finalisez votre inscription \u00e0 une formation, renseignez le b\u00e9n\u00e9ficiaire, appliquez une \u00e9ventuelle prise en charge OFPPT et choisissez votre mode de paiement.<\/p>\n <div class=\"steps\">\n <div class=\"step\">1. Formation<\/div>\n <div class=\"step active\">2. Commande<\/div>\n <div class=\"step active\">3. Checkout<\/div>\n <div class=\"step\">4. Confirmation<\/div>\n <\/div>\n <\/section>\n\n <div class=\"grid\">\n <section>\n <div class=\"card\">\n <h2>Votre commande<\/h2>\n <div id=\"products\"><\/div>\n <button class=\"btn btn-soft\" type=\"button\" id=\"addProduct\">+ Ajouter une formation<\/button>\n <\/div>\n\n <div class=\"card\" style=\"margin-top:24px\">\n <h2>Informations du client<\/h2>\n <div class=\"fields\">\n <div>\n <label>Type de client<\/label>\n <select id=\"clientType\">\n <option value=\"Particulier\">Particulier<\/option>\n <option value=\"Entreprise\">Entreprise<\/option>\n <option value=\"\u00c9cole\">\u00c9cole \/ Institut<\/option>\n <option value=\"Association\">Association<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Nom \/ Raison sociale *<\/label>\n <input id=\"name\" placeholder=\"Nom complet ou soci\u00e9t\u00e9\" required>\n <\/div>\n <div>\n <label>Email *<\/label>\n <input id=\"email\" type=\"email\" placeholder=\"contact@exemple.com\" required>\n <\/div>\n <div>\n <label>T\u00e9l\u00e9phone *<\/label>\n <input id=\"phone\" placeholder=\"+212 ...\" required>\n <\/div>\n <div>\n <label>ICE \/ Identifiant fiscal<\/label>\n <input id=\"ice\" placeholder=\"Facultatif\">\n <\/div>\n <div>\n <label>Ville<\/label>\n <input id=\"city\" placeholder=\"Ex. El Jadida\">\n <\/div>\n <div class=\"full\">\n <label>Adresse de facturation<\/label>\n <textarea id=\"address\" rows=\"3\" placeholder=\"Adresse compl\u00e8te\"><\/textarea>\n <\/div>\n <\/div>\n\n <h3>Dossier de prise en charge OFPPT<\/h3>\n <div class=\"notice\">\n Activez cette option uniquement si le dossier est \u00e9ligible et valid\u00e9. Le taux est configurable et ne constitue pas une validation automatique de prise en charge.\n <\/div>\n\n <div class=\"fields\" style=\"margin-top:14px\">\n <div>\n <label>Prise en charge<\/label>\n <select id=\"ofpptEnabled\">\n <option value=\"no\">Non<\/option>\n <option value=\"yes\">Oui<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Taux de prise en charge<\/label>\n <select id=\"ofpptRate\" disabled>\n <option value=\"0\">0 %<\/option>\n <option value=\"30\">30 %<\/option>\n <option value=\"50\">50 %<\/option>\n <option value=\"70\" selected>70 %<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <h3>Mode de paiement<\/h3>\n <div class=\"payment\">\n <label class=\"pay\"><input type=\"radio\" name=\"payment\" value=\"Carte\" checked> Carte bancaire<\/label>\n <label class=\"pay\"><input type=\"radio\" name=\"payment\" value=\"Virement\"> Virement<\/label>\n <label class=\"pay\"><input type=\"radio\" name=\"payment\" value=\"Agence\"> Paiement agence<\/label>\n <\/div>\n\n <div class=\"check\">\n <input type=\"checkbox\" id=\"terms\">\n <label for=\"terms\" style=\"margin:0;font-weight:600\">\n J\u2019accepte les conditions de vente, les conditions d\u2019inscription et la politique de traitement des donn\u00e9es.\n <\/label>\n <\/div>\n\n <div class=\"success\" id=\"successBox\"><\/div>\n <\/div>\n <\/section>\n\n <aside>\n <div class=\"card summary\">\n <h2>R\u00e9capitulatif<\/h2>\n <div class=\"line\"><span>Sous-total HT<\/span><strong id=\"subtotalHT\">0 MAD<\/strong><\/div>\n <div class=\"line\"><span>TVA (20 %)<\/span><strong id=\"vat\">0 MAD<\/strong><\/div>\n <div class=\"line\"><span>Total TTC<\/span><strong id=\"totalTTC\">0 MAD<\/strong><\/div>\n <div class=\"line cover\"><span>Prise en charge OFPPT<\/span><strong id=\"ofpptAmount\">– 0 MAD<\/strong><\/div>\n <div class=\"line total\"><span>\u00c0 payer<\/span><strong id=\"payable\">0 MAD<\/strong><\/div>\n\n <button class=\"btn btn-gold btn-block\" id=\"confirmBtn\" style=\"margin-top:18px\">\n Confirmer la commande\n <\/button>\n <button class=\"btn btn-primary btn-block\" id=\"printBtn\" style=\"margin-top:10px\">\n Imprimer le r\u00e9capitulatif\n <\/button>\n\n <p class=\"small\" style=\"margin-top:14px\">\n Le bouton de confirmation v\u00e9rifie les champs obligatoires et g\u00e9n\u00e8re un num\u00e9ro de commande local. Pour un paiement r\u00e9el, connectez ensuite cette page \u00e0 WooCommerce, Stripe, CMI ou votre passerelle bancaire.\n <\/p>\n <\/div>\n <\/aside>\n <\/div>\n <\/main>\n\n<script>\nconst catalog = [\n {name:\"Agent d\u2019Escale \u2014 Niveau Avanc\u00e9\", price:1800},\n {name:\"Chef d\u2019Escale\", price:2400},\n {name:\"Agent de Voyages & Chef d\u2019Agence\", price:1900},\n {name:\"Chef de Cabine\", price:2200},\n {name:\"Directeur Commercial A\u00e9rien\", price:2900},\n {name:\"Responsable Financier Compagnie A\u00e9rienne\", price:2600},\n {name:\"Safar Flyer \u2014 Produit Fid\u00e9lit\u00e9\", price:1400},\n {name:\"MICE & \u00c9v\u00e9nementiel\", price:1700}\n];\n\nlet items = [\n {course:0, qty:1},\n {course:2, qty:1}\n];\n\nconst money = v => new Intl.NumberFormat('fr-MA',{maximumFractionDigits:2}).format(v) + \" MAD\";\n\nfunction renderProducts(){\n const box = document.getElementById(\"products\");\n box.innerHTML = \"\";\n items.forEach((item, index)=>{\n const p = catalog[item.course];\n const div = document.createElement(\"div\");\n div.className = \"product\";\n div.innerHTML = `\n <div>\n <div class=\"product-title\">${p.name}<\/div>\n <div class=\"price-tag\">${money(p.price)} HT \/ participant<\/div>\n <\/div>\n <div>\n <label>Participants<\/label>\n <input type=\"number\" min=\"1\" max=\"999\" value=\"${item.qty}\" data-qty=\"${index}\">\n <\/div>\n <div>\n <label>Montant HT<\/label>\n <input value=\"${money(p.price*item.qty)}\" readonly>\n <\/div>\n <button class=\"remove\" type=\"button\" data-remove=\"${index}\" title=\"Supprimer\">\u00d7<\/button>\n `;\n box.appendChild(div);\n });\n\n document.querySelectorAll(\"[data-qty]\").forEach(el=>{\n el.addEventListener(\"input\", e=>{\n const i = Number(e.target.dataset.qty);\n items[i].qty = Math.max(1, Number(e.target.value || 1));\n renderProducts();\n calculate();\n });\n });\n\n document.querySelectorAll(\"[data-remove]\").forEach(el=>{\n el.addEventListener(\"click\", e=>{\n const i = Number(e.currentTarget.dataset.remove);\n items.splice(i,1);\n if(items.length===0) items.push({course:0,qty:1});\n renderProducts();\n calculate();\n });\n });\n}\n\nfunction calculate(){\n const subtotal = items.reduce((sum,item)=>{\n return sum + catalog[item.course].price * item.qty;\n },0);\n\n const vat = subtotal * 0.20;\n const total = subtotal + vat;\n\n const enabled = document.getElementById(\"ofpptEnabled\").value === \"yes\";\n const rate = enabled ? Number(document.getElementById(\"ofpptRate\").value) : 0;\n\n \/\/ Par d\u00e9faut, la prise en charge est simul\u00e9e sur le TTC.\n \/\/ \u00c0 adapter selon vos r\u00e8gles contractuelles r\u00e9elles.\n const cover = total * rate \/ 100;\n const payable = Math.max(0,total-cover);\n\n document.getElementById(\"subtotalHT\").textContent = money(subtotal);\n document.getElementById(\"vat\").textContent = money(vat);\n document.getElementById(\"totalTTC\").textContent = money(total);\n document.getElementById(\"ofpptAmount\").textContent = \"- \" + money(cover);\n document.getElementById(\"payable\").textContent = money(payable);\n}\n\ndocument.getElementById(\"ofpptEnabled\").addEventListener(\"change\", e=>{\n const enabled = e.target.value === \"yes\";\n document.getElementById(\"ofpptRate\").disabled = !enabled;\n calculate();\n});\ndocument.getElementById(\"ofpptRate\").addEventListener(\"change\", calculate);\n\ndocument.getElementById(\"addProduct\").addEventListener(\"click\", ()=>{\n const selected = prompt(\n \"Saisissez le num\u00e9ro de la formation :\\\\n\\\\n\" +\n catalog.map((x,i)=>`${i+1}. ${x.name} \u2014 ${money(x.price)} HT`).join(\"\\\\n\")\n );\n const idx = Number(selected)-1;\n if(Number.isInteger(idx) && idx>=0 && idx<catalog.length){\n items.push({course:idx,qty:1});\n renderProducts();\n calculate();\n }\n});\n\ndocument.getElementById(\"confirmBtn\").addEventListener(\"click\", ()=>{\n const name = document.getElementById(\"name\").value.trim();\n const email = document.getElementById(\"email\").value.trim();\n const phone = document.getElementById(\"phone\").value.trim();\n const terms = document.getElementById(\"terms\").checked;\n\n if(!name || !email || !phone){\n alert(\"Merci de renseigner le nom, l\u2019e-mail et le t\u00e9l\u00e9phone.\");\n return;\n }\n if(!terms){\n alert(\"Merci d\u2019accepter les conditions avant de confirmer.\");\n return;\n }\n\n const payment = document.querySelector('input[name=\"payment\"]:checked').value;\n const orderId = \"MZA-\" + new Date().getFullYear() + \"-\" + Math.floor(100000 + Math.random()*900000);\n\n const box = document.getElementById(\"successBox\");\n box.style.display = \"block\";\n box.innerHTML = `\n <strong>Commande enregistr\u00e9e avec succ\u00e8s.<\/strong><br><br>\n Num\u00e9ro : <span class=\"order-id\">${orderId}<\/span><br>\n Client : ${escapeHtml(name)}<br>\n Paiement : ${escapeHtml(payment)}<br>\n Montant \u00e0 payer : ${document.getElementById(\"payable\").textContent}<br><br>\n <span class=\"muted\">Cette d\u00e9monstration enregistre la commande c\u00f4t\u00e9 navigateur. Reliez le bouton \u00e0 votre syst\u00e8me de paiement ou \u00e0 WooCommerce pour une transaction r\u00e9elle.<\/span>\n `;\n box.scrollIntoView({behavior:\"smooth\",block:\"center\"});\n});\n\ndocument.getElementById(\"printBtn\").addEventListener(\"click\", ()=>window.print());\n\nfunction escapeHtml(str){\n return str.replace(\/[&<>\"']\/g, m => ({\n '&':'&','<':'<','>':'>','\"':'"',\"'\":'''\n }[m]));\n}\n\nrenderProducts();\ncalculate();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Commande & Checkout \u2014 Maroc Zain Academy MAROC ZAIN ACADEMY \u2014 Inscription & Paiement s\u00e9curis\u00e9 \u2708 MAROC ZAIN ACADEMY Commande & Checkout Finalisez votre inscription \u00e0 une formation, renseignez le b\u00e9n\u00e9ficiaire, appliquez une \u00e9ventuelle prise en charge OFPPT et choisissez votre mode de paiement. 1. Formation 2. Commande 3. Checkout 4. Confirmation Votre commande + […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3469","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/3469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/types\/page"}],"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=3469"}],"version-history":[{"count":2,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/3469\/revisions"}],"predecessor-version":[{"id":3658,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/3469\/revisions\/3658"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=3469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}