{"id":584,"date":"2026-09-08T08:07:15","date_gmt":"2026-09-08T08:07:15","guid":{"rendered":"https:\/\/maroczain.com\/scolaire.maroczain.com\/?page_id=584"},"modified":"2026-09-08T08:07:15","modified_gmt":"2026-09-08T08:07:15","slug":"finaliser-votre-inscription","status":"publish","type":"page","link":"https:\/\/maroczain.com\/scolaire.maroczain.com\/finaliser-votre-inscription\/","title":{"rendered":"Finaliser votre inscription"},"content":{"rendered":"\n<!doctype html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>MZA Checkout<\/title>\n<style>\n:root{\n  --bg:#07111f;--panel:#0d1b2a;--panel2:#12263a;--line:#29435f;\n  --text:#f5f7fb;--muted:#aab8c8;--gold:#d4af37;--gold2:#f4d77a;\n  --ok:#2ecc71;--warn:#f39c12;--danger:#e74c3c;\n}\n*{box-sizing:border-box}\nbody{margin:0;background:linear-gradient(180deg,#06101d,#0b1726 55%,#07111f);color:var(--text);font-family:Arial,Helvetica,sans-serif}\nbutton,input,select,textarea{font:inherit}\n.wrap{max-width:1450px;margin:auto;padding:22px}\n.header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;border:1px solid var(--line);background:#0d1b2a;border-radius:18px;position:sticky;top:10px;z-index:20}\n.brand{font-size:20px;font-weight:900}.brand small{display:block;color:var(--gold2);font-size:12px;margin-top:4px}\n.secure{padding:8px 12px;border:1px solid rgba(212,175,55,.6);border-radius:999px;color:var(--gold2)}\n.hero{text-align:center;padding:42px 10px 28px}\n.hero h1{font-size:clamp(36px,5vw,64px);margin:0 0 10px;letter-spacing:-2px}\n.hero h1 span{color:var(--gold2)}\n.hero p{color:var(--muted)}\n.checkout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}\n.card{border:1px solid var(--line);background:linear-gradient(180deg,#102238,#0a1726);border-radius:20px;padding:22px;margin-bottom:16px}\n.card h2{margin:0 0 6px}.sub{margin:0 0 18px;color:var(--muted)}\n.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}\n.field{display:flex;flex-direction:column;gap:6px}\n.field label{font-size:12px;font-weight:800;color:#d8e2ec}\n.field input,.field select,.field textarea{padding:13px 14px;border:1px solid #35516e;border-radius:12px;background:#081421;color:#fff;outline:none}\n.field textarea{min-height:90px}\n.payments{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}\n.pay{border:1px solid #35516e;border-radius:14px;padding:14px;background:#0a1726;cursor:pointer}\n.pay.active{border-color:var(--gold2);box-shadow:0 0 0 1px var(--gold2) inset}\n.pay b{display:block;margin-bottom:4px}.pay span{color:var(--muted);font-size:12px}\n.summary{position:sticky;top:100px}\n.product{padding:16px;border:1px solid var(--line);border-radius:14px;background:#091725;margin-bottom:14px}\n.line{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid #20364b}\n.line:last-child{border-bottom:0}\n.total{font-size:24px;font-weight:900;color:var(--gold2)}\n.promo{display:flex;gap:8px;margin:12px 0}\n.promo input{flex:1;padding:12px;border:1px solid #35516e;border-radius:11px;background:#081421;color:#fff}\n.btn{padding:13px 16px;border-radius:11px;border:0;cursor:pointer;font-weight:900}\n.btn-primary{background:linear-gradient(90deg,var(--gold),var(--gold2));color:#18130b;width:100%}\n.btn-ghost{background:#102238;color:#fff;border:1px solid #37536f}\n.notice{padding:12px 14px;border:1px solid #33506d;border-radius:12px;background:#102238;color:#dbe7f3;margin-top:12px}\n.success{display:none;padding:22px;border:1px solid #2d6d49;border-radius:16px;background:#102b20;color:#d6ffe2;margin-top:16px}\n.schedule{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}\n.schedule div{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #20364b}\n.schedule div:last-child{border-bottom:0}\n.checkline{display:flex;gap:10px;align-items:flex-start;margin-top:14px;color:#dce6ef}\n@media(max-width:980px){.checkout{grid-template-columns:1fr}.summary{position:static}}\n@media(max-width:650px){.grid,.payments{grid-template-columns:1fr}.header{position:static;flex-direction:column;align-items:flex-start}.wrap{padding:12px}}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n  <div class=\"header\">\n    <div class=\"brand\">MAROC ZAIN ACADEMY <small>CHECKOUT &#038; ENROLLMENT\u2122<\/small><\/div>\n    <div class=\"secure\">Paiement &#038; inscription s\u00e9curis\u00e9s<\/div>\n  <\/div>\n\n  <section class=\"hero\">\n    <h1>Finaliser votre <span>inscription<\/span><\/h1>\n    <p>V\u00e9rifiez votre formation, choisissez votre modalit\u00e9 de paiement et confirmez votre dossier.<\/p>\n  <\/section>\n\n  <div class=\"checkout\">\n    <main>\n      <section class=\"card\">\n        <h2>1. Informations participant<\/h2>\n        <p class=\"sub\">Ces informations seront utilis\u00e9es pour votre dossier MZA.<\/p>\n        <div class=\"grid\">\n          <div class=\"field\"><label>Nom<\/label><input id=\"lastName\" placeholder=\"Nom\"><\/div>\n          <div class=\"field\"><label>Pr\u00e9nom<\/label><input id=\"firstName\" placeholder=\"Pr\u00e9nom\"><\/div>\n          <div class=\"field\"><label>Email<\/label><input id=\"email\" type=\"email\" placeholder=\"email@exemple.com\"><\/div>\n          <div class=\"field\"><label>T\u00e9l\u00e9phone<\/label><input id=\"phone\" placeholder=\"+212 ...\"><\/div>\n          <div class=\"field\"><label>MZA ID<\/label><input id=\"mzaId\" placeholder=\"Optionnel\"><\/div>\n          <div class=\"field\"><label>Entreprise<\/label><input id=\"company\" placeholder=\"Optionnel\"><\/div>\n        <\/div>\n      <\/section>\n\n      <section class=\"card\">\n        <h2>2. Facturation<\/h2>\n        <div class=\"grid\">\n          <div class=\"field\"><label>Pays<\/label><select id=\"country\"><option>Maroc<\/option><option>France<\/option><option>Belgique<\/option><option>Espagne<\/option><option>Autre<\/option><\/select><\/div>\n          <div class=\"field\"><label>Ville<\/label><input id=\"city\" placeholder=\"Ville\"><\/div>\n          <div class=\"field\"><label>Adresse<\/label><input id=\"address\" placeholder=\"Adresse\"><\/div>\n          <div class=\"field\"><label>ICE \/ Identifiant fiscal<\/label><input id=\"taxId\" placeholder=\"Optionnel\"><\/div>\n        <\/div>\n      <\/section>\n\n      <section class=\"card\">\n        <h2>3. Modalit\u00e9 de paiement<\/h2>\n        <p class=\"sub\">Choisissez la formule adapt\u00e9e.<\/p>\n        <div class=\"payments\">\n          <div class=\"pay active\" data-type=\"Comptant\" onclick=\"selectPayment(this)\"><b>Paiement comptant<\/b><span>100% \u00e0 l&#8217;inscription<\/span><\/div>\n          <div class=\"pay\" data-type=\"Acompte\" onclick=\"selectPayment(this)\"><b>Acompte + solde<\/b><span>30% maintenant, solde ensuite<\/span><\/div>\n          <div class=\"pay\" data-type=\"3x\" onclick=\"selectPayment(this)\"><b>Paiement en 3 fois<\/b><span>3 \u00e9ch\u00e9ances \u00e9gales<\/span><\/div>\n          <div class=\"pay\" data-type=\"Entreprise\" onclick=\"selectPayment(this)\"><b>Prise en charge entreprise<\/b><span>Facturation au financeur<\/span><\/div>\n        <\/div>\n        <div class=\"schedule\" id=\"schedule\"><\/div>\n      <\/section>\n\n      <section class=\"card\">\n        <h2>4. Mode de r\u00e8glement<\/h2>\n        <div class=\"grid\">\n          <div class=\"field\"><label>Moyen de paiement<\/label>\n            <select id=\"method\">\n              <option>Carte bancaire<\/option>\n              <option>Virement bancaire<\/option>\n              <option>Esp\u00e8ces au centre<\/option>\n              <option>Ch\u00e8que<\/option>\n              <option>Bon de commande entreprise<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"field\"><label>R\u00e9f\u00e9rence \/ N\u00b0 bon de commande<\/label><input id=\"reference\" placeholder=\"Optionnel\"><\/div>\n        <\/div>\n        <div class=\"checkline\">\n          <input id=\"terms\" type=\"checkbox\">\n          <label for=\"terms\">J\u2019accepte les conditions d\u2019inscription et les modalit\u00e9s de paiement de Maroc Zain Academy.<\/label>\n        <\/div>\n      <\/section>\n    <\/main>\n\n    <aside class=\"summary\">\n      <section class=\"card\">\n        <h2>Votre commande<\/h2>\n        <div class=\"product\">\n          <b id=\"trainingName\">Chef d&#8217;escale<\/b>\n          <div style=\"color:#aab8c8;margin-top:4px\">Session professionnelle MZA<\/div>\n        <\/div>\n\n        <div class=\"field\"><label>Prix de la formation (MAD)<\/label><input id=\"basePrice\" type=\"number\" value=\"4500\" min=\"0\"><\/div>\n        <div class=\"field\" style=\"margin-top:10px\"><label>Frais d&#8217;inscription (MAD)<\/label><input id=\"fees\" type=\"number\" value=\"300\" min=\"0\"><\/div>\n\n        <div class=\"promo\">\n          <input id=\"promo\" placeholder=\"Code promo\">\n          <button class=\"btn btn-ghost\" onclick=\"applyPromo()\">Appliquer<\/button>\n        <\/div>\n\n        <div class=\"line\"><span>Sous-total<\/span><b id=\"subtotal\">0 MAD<\/b><\/div>\n        <div class=\"line\"><span>Remise<\/span><b id=\"discountOut\">0 MAD<\/b><\/div>\n        <div class=\"line\"><span>Frais<\/span><b id=\"feesOut\">0 MAD<\/b><\/div>\n        <div class=\"line\"><span>Total<\/span><b id=\"total\" class=\"total\">0 MAD<\/b><\/div>\n\n        <div class=\"line\"><span>\u00c0 payer maintenant<\/span><b id=\"dueNow\">0 MAD<\/b><\/div>\n        <button class=\"btn btn-primary\" onclick=\"confirmOrder()\">CONFIRMER L&#8217;INSCRIPTION<\/button>\n\n        <div class=\"notice\">D\u00e9mo front-end : aucun d\u00e9bit bancaire r\u00e9el n&#8217;est effectu\u00e9.<\/div>\n        <div class=\"success\" id=\"successBox\"><\/div>\n      <\/section>\n    <\/aside>\n  <\/div>\n<\/div>\n\n<script>\nlet selectedPayment=\"Comptant\";\nlet discountRate=0;\nconst fmt=n=>new Intl.NumberFormat(\"fr-FR\",{maximumFractionDigits:0}).format(n||0)+\" MAD\";\nconst val=id=>+document.getElementById(id).value||0;\n\nfunction selectPayment(el){\n document.querySelectorAll(\".pay\").forEach(x=>x.classList.remove(\"active\"));\n el.classList.add(\"active\");\n selectedPayment=el.dataset.type;\n calculate();\n}\n\nfunction applyPromo(){\n const code=promo.value.trim().toUpperCase();\n discountRate=code===\"MZA10\"?10:code===\"WELCOME15\"?15:0;\n calculate();\n if(discountRate===0 && code) alert(\"Code promo non reconnu.\");\n}\n\nfunction calculate(){\n const price=val(\"basePrice\"), fees=val(\"fees\");\n const discount=price*discountRate\/100;\n const subtotal=price;\n const totalAmt=Math.max(0,price-discount+fees);\n let now=totalAmt;\n let rows=[];\n\n if(selectedPayment===\"Comptant\"){\n   now=totalAmt; rows=[[\"Paiement imm\u00e9diat\",totalAmt]];\n }else if(selectedPayment===\"Acompte\"){\n   now=totalAmt*.30; rows=[[\"Acompte maintenant\",now],[\"Solde ult\u00e9rieur\",totalAmt-now]];\n }else if(selectedPayment===\"3x\"){\n   now=totalAmt\/3; rows=[[\"\u00c9ch\u00e9ance 1\",now],[\"\u00c9ch\u00e9ance 2\",now],[\"\u00c9ch\u00e9ance 3\",totalAmt-now*2]];\n }else{\n   now=0; rows=[[\"Facturation entreprise\",totalAmt]];\n }\n\n subtotal.textContent=fmt(subtotal);\n discountOut.textContent=fmt(discount);\n feesOut.textContent=fmt(fees);\n total.textContent=fmt(totalAmt);\n dueNow.textContent=fmt(now);\n schedule.innerHTML=rows.map(r=>`<div><span>${r[0]}<\/span><b>${fmt(r[1])}<\/b><\/div>`).join(\"\");\n}\n\nfunction confirmOrder(){\n if(!lastName.value.trim() || !firstName.value.trim() || !email.value.trim()){\n   alert(\"Nom, pr\u00e9nom et email sont obligatoires.\"); return;\n }\n if(!terms.checked){alert(\"Veuillez accepter les conditions d'inscription.\");return;}\n const order=\"MZA-\"+new Date().getFullYear()+\"-\"+Math.floor(100000+Math.random()*900000);\n successBox.style.display=\"block\";\n successBox.innerHTML=`<b>INSCRIPTION ENREGISTR\u00c9E<\/b><br><br>\n R\u00e9f\u00e9rence : <strong>${order}<\/strong><br>\n Participant : ${firstName.value} ${lastName.value}<br>\n Modalit\u00e9 : ${selectedPayment}<br>\n Montant \u00e0 payer maintenant : ${dueNow.textContent}`;\n localStorage.setItem(\"mzaLastCheckout\",JSON.stringify({\n   order,firstName:firstName.value,lastName:lastName.value,email:email.value,phone:phone.value,\n   mzaId:mzaId.value,company:company.value,country:country.value,city:city.value,address:address.value,\n   selectedPayment,method:method.value,reference:reference.value,total:total.textContent,dueNow:dueNow.textContent\n }));\n}\n\ndocument.querySelectorAll(\"input,select\").forEach(el=>el.addEventListener(\"input\",calculate));\ncalculate();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MZA Checkout MAROC ZAIN ACADEMY CHECKOUT &#038; ENROLLMENT\u2122 Paiement &#038; inscription s\u00e9curis\u00e9s Finaliser votre inscription V\u00e9rifiez votre formation, choisissez votre modalit\u00e9 de paiement et confirmez votre dossier. 1. Informations participant Ces informations seront utilis\u00e9es pour votre dossier MZA. Nom Pr\u00e9nom Email T\u00e9l\u00e9phone MZA ID Entreprise 2. Facturation PaysMarocFranceBelgiqueEspagneAutre Ville Adresse ICE \/ Identifiant fiscal 3. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-584","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/comments?post=584"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/584\/revisions"}],"predecessor-version":[{"id":586,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/584\/revisions\/586"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/media?parent=584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}