MZA Certificate Studio Prestige Royal<\/title>\n<style>\n:root{\n --navy:#07192f;\n --navy2:#0b2e52;\n --gold:#d8b35a;\n --gold2:#f1d58a;\n --ivory:#fffdf7;\n --paper:#ffffff;\n --bg:#eef2f6;\n --line:#dbe3ea;\n --text:#19324a;\n --muted:#728293;\n}\n*{box-sizing:border-box}\nbody{\n margin:0;\n background:\n radial-gradient(circle at 20% 10%,rgba(216,179,90,.08),transparent 25%),\n linear-gradient(180deg,#eef2f6,#e8eef4);\n font-family:Inter,Arial,Helvetica,sans-serif;\n color:var(--text);\n}\n#mza-cert-pro{\n min-height:100vh;\n}\n.topbar{\n background:\n linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,0)),\n linear-gradient(135deg,var(--navy),var(--navy2));\n color:#fff;\n padding:26px 28px 34px;\n box-shadow:0 18px 45px rgba(7,25,47,.18);\n}\n.topbar .inner{\n max-width:1600px;\n margin:auto;\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:20px;\n}\n.brandblock .eyebrow{\n font-size:12px;\n font-weight:900;\n letter-spacing:2.2px;\n color:var(--gold2);\n text-transform:uppercase;\n}\n.brandblock h1{\n margin:7px 0 5px;\n font-family:Georgia,\"Times New Roman\",serif;\n font-size:clamp(34px,4vw,56px);\n line-height:1;\n}\n.brandblock p{\n margin:0;\n color:#d9e5ef;\n font-size:14px;\n}\n.badge{\n border:1px solid rgba(216,179,90,.5);\n background:rgba(216,179,90,.12);\n color:var(--gold2);\n padding:10px 14px;\n border-radius:999px;\n font-weight:900;\n font-size:12px;\n white-space:nowrap;\n}\n.workspace{\n max-width:1600px;\n margin:-18px auto 0;\n padding:0 18px 34px;\n display:grid;\n grid-template-columns:420px minmax(0,1fr);\n gap:20px;\n}\n.editor{\n background:rgba(255,255,255,.96);\n border:1px solid rgba(219,227,234,.95);\n border-radius:22px;\n box-shadow:0 22px 55px rgba(7,25,47,.12);\n overflow:hidden;\n align-self:start;\n position:sticky;\n top:12px;\n}\n.editor-head{\n padding:18px 20px;\n background:linear-gradient(180deg,#fff,#fbfcfd);\n border-bottom:1px solid var(--line);\n}\n.editor-head strong{\n color:var(--navy);\n font-size:15px;\n}\n.editor-head span{\n display:block;\n margin-top:4px;\n font-size:11px;\n color:var(--muted);\n}\n.editor-body{\n padding:18px;\n max-height:calc(100vh - 120px);\n overflow:auto;\n}\n.section{\n padding:16px 0;\n border-top:1px solid var(--line);\n}\n.section:first-child{\n border-top:0;\n padding-top:0;\n}\n.section-title{\n display:flex;\n align-items:center;\n gap:9px;\n margin-bottom:12px;\n color:var(--navy);\n font-size:13px;\n font-weight:900;\n letter-spacing:.2px;\n}\n.section-title .num{\n width:24px;height:24px;\n border-radius:50%;\n display:inline-flex;\n align-items:center;\n justify-content:center;\n background:var(--navy);\n color:#fff;\n font-size:11px;\n}\n.grid2{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:10px;\n}\nlabel{\n display:block;\n margin:9px 0 6px;\n color:#647688;\n font-size:10px;\n font-weight:900;\n letter-spacing:.55px;\n text-transform:uppercase;\n}\ninput,select,textarea{\n width:100%;\n border:1px solid #ccd7e1;\n background:#fff;\n color:var(--text);\n border-radius:12px;\n padding:11px 12px;\n outline:none;\n transition:.2s;\n box-shadow:inset 0 1px 0 rgba(0,0,0,.01);\n}\ninput:focus,select:focus,textarea:focus{\n border-color:#7ea7c8;\n box-shadow:0 0 0 3px rgba(30,100,160,.08);\n}\ntextarea{\n min-height:86px;\n resize:vertical;\n}\n.actions{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:9px;\n}\n.btn{\n border:0;\n border-radius:12px;\n min-height:44px;\n padding:0 14px;\n font-weight:900;\n cursor:pointer;\n transition:.2s transform,.2s box-shadow,.2s opacity;\n}\n.btn:hover{\n transform:translateY(-1px);\n}\n.btn.primary{\n background:linear-gradient(135deg,var(--navy),var(--navy2));\n color:#fff;\n box-shadow:0 10px 22px rgba(7,25,47,.16);\n}\n.btn.gold{\n background:linear-gradient(135deg,var(--gold),var(--gold2));\n color:#17283b;\n box-shadow:0 10px 22px rgba(216,179,90,.18);\n}\n.btn.soft{\n background:#eef3f7;\n color:#29445f;\n}\n.preview-shell{\n background:rgba(255,255,255,.78);\n border:1px solid rgba(219,227,234,.95);\n border-radius:22px;\n box-shadow:0 22px 55px rgba(7,25,47,.10);\n overflow:auto;\n padding:24px;\n}\n.preview-toolbar{\n display:flex;\n justify-content:space-between;\n gap:10px;\n align-items:center;\n margin-bottom:14px;\n color:var(--muted);\n font-size:12px;\n}\n.paper{\n width:1123px;\n height:794px;\n margin:auto;\n position:relative;\n overflow:hidden;\n background:\n radial-gradient(circle at 85% 20%,rgba(216,179,90,.08),transparent 26%),\n linear-gradient(135deg,#fffefb,#ffffff);\n box-shadow:0 28px 70px rgba(7,25,47,.20);\n}\n.paper:before{\n content:\"\";\n position:absolute;\n inset:0;\n background:\n linear-gradient(135deg,rgba(7,25,47,.028),transparent 26%),\n linear-gradient(315deg,rgba(216,179,90,.025),transparent 26%);\n pointer-events:none;\n}\n.outer-frame{\n position:absolute;\n inset:22px;\n border:2px solid var(--navy);\n}\n.outer-frame:before{\n content:\"\";\n position:absolute;\n inset:9px;\n border:1px solid var(--gold);\n}\n.side-ornament{\n position:absolute;\n left:24px;\n top:24px;\n bottom:24px;\n width:14px;\n background:linear-gradient(180deg,var(--gold2),var(--gold),var(--gold2));\n}\n.header-ribbon{\n position:absolute;\n top:52px;\n left:92px;\n right:92px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n border-bottom:1px solid rgba(7,25,47,.14);\n padding-bottom:16px;\n}\n.logo{\n font-weight:900;\n font-size:19px;\n letter-spacing:1.2px;\n color:var(--navy);\n}\n.logo span{\n color:var(--gold);\n}\n.ref-mini{\n font-size:10px;\n color:#7c8997;\n text-align:right;\n line-height:1.45;\n}\n.certificate-body{\n position:absolute;\n inset:130px 90px 80px 110px;\n display:flex;\n flex-direction:column;\n align-items:center;\n text-align:center;\n}\n.kicker{\n font-size:11px;\n text-transform:uppercase;\n letter-spacing:3px;\n color:#8c7440;\n font-weight:900;\n}\n.doc-type{\n margin-top:10px;\n font-family:Georgia,\"Times New Roman\",serif;\n font-size:44px;\n line-height:1.05;\n color:var(--navy);\n letter-spacing:1px;\n}\n.gold-rule{\n width:160px;\n height:3px;\n background:linear-gradient(90deg,transparent,var(--gold),transparent);\n margin:17px 0 19px;\n}\n.intro{\n color:#617486;\n font-size:16px;\n}\n.name{\n margin:8px 0 10px;\n font-family:Georgia,\"Times New Roman\",serif;\n font-size:44px;\n color:#0d2744;\n font-weight:700;\n}\n.bodytext{\n max-width:820px;\n font-size:18px;\n line-height:1.55;\n color:#30485f;\n}\n.program{\n margin:14px 0 8px;\n max-width:850px;\n font-size:25px;\n line-height:1.25;\n font-weight:900;\n color:var(--navy);\n}\n.meta{\n font-size:13px;\n line-height:1.55;\n color:#66798b;\n}\n.signatures{\n margin-top:auto;\n width:100%;\n display:grid;\n grid-template-columns:1fr 150px 1fr;\n gap:30px;\n align-items:end;\n}\n.sig{\n padding-top:44px;\n border-top:1px solid #7e8e9d;\n font-size:12px;\n color:#4b6277;\n font-weight:700;\n}\n.seal{\n width:105px;height:105px;\n margin:auto;\n border:3px double var(--navy);\n border-radius:50%;\n display:flex;\n align-items:center;\n justify-content:center;\n padding:12px;\n text-align:center;\n color:var(--navy);\n font-size:9px;\n font-weight:900;\n letter-spacing:.7px;\n transform:rotate(-7deg);\n position:relative;\n}\n.seal:before{\n content:\"\u2726\";\n position:absolute;\n top:10px;\n font-size:16px;\n color:var(--gold);\n}\n.verify{\n position:absolute;\n left:105px;\n bottom:40px;\n display:flex;\n align-items:center;\n gap:10px;\n}\n.qr{\n width:64px;height:64px;\n background:\n linear-gradient(90deg,#111 8px,transparent 8px) 0 0\/16px 16px,\n linear-gradient(#111 8px,transparent 8px) 0 0\/16px 16px;\n outline:1px solid #aaa;\n border:5px solid #fff;\n}\n.verify-text{\n font-size:9px;\n line-height:1.5;\n color:#7b8996;\n}\n.serial{\n position:absolute;\n right:70px;\n bottom:42px;\n text-align:right;\n font-size:10px;\n line-height:1.45;\n color:#7b8996;\n}\n.watermark{\n position:absolute;\n right:90px;\n top:215px;\n font-family:Georgia,\"Times New Roman\",serif;\n font-size:105px;\n color:rgba(7,25,47,.025);\n transform:rotate(-18deg);\n pointer-events:none;\n font-weight:900;\n}\n@media(max-width:1150px){\n .workspace{grid-template-columns:1fr}\n .editor{position:static}\n .editor-body{max-height:none}\n .preview-shell{overflow:auto}\n .paper{margin:0}\n}\n@media(max-width:650px){\n .topbar .inner{align-items:flex-start;flex-direction:column}\n .grid2,.actions{grid-template-columns:1fr}\n}\n@media print{\n body *{visibility:hidden!important}\n .paper,.paper *{visibility:visible!important}\n .paper{\n position:fixed;\n left:0;top:0;\n width:297mm;\n height:210mm;\n box-shadow:none;\n }\n @page{size:A4 landscape;margin:0}\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"mza-cert-pro\">\n\n<header class=\"topbar\">\n <div class=\"inner\">\n <div class=\"brandblock\">\n <div class=\"eyebrow\">Maroc Zain Academy<\/div>\n <h1>Certificate Studio Prestige Royal<\/h1>\n <p>\u00c9diteur premium d\u2019attestations, certificats, dipl\u00f4mes et documents de validation.<\/p>\n <\/div>\n <div class=\"badge\">A4 \u2022 IMPRESSION \u2022 PDF<\/div>\n <\/div>\n<\/header>\n\n<main class=\"workspace\">\n\n <aside class=\"editor\">\n <div class=\"editor-head\">\n <strong>Panneau d\u2019\u00e9dition<\/strong>\n <span>Les modifications apparaissent instantan\u00e9ment sur le certificat.<\/span>\n <\/div>\n\n <div class=\"editor-body\">\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">1<\/span> Mod\u00e8le<\/div>\n <div class=\"grid2\">\n <div>\n <label>Type de document<\/label>\n <select id=\"type\">\n <option>ATTESTATION DE FORMATION<\/option>\n <option>CERTIFICAT DE R\u00c9USSITE<\/option>\n <option>CERTIFICAT DE COMP\u00c9TENCE<\/option>\n <option>DIPL\u00d4ME<\/option>\n <option>ATTESTATION DE PARTICIPATION<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Collection<\/label>\n <select id=\"collection\">\n <option>Prestige Royal<\/option>\n <option>Executive<\/option>\n <option>Institutionnel<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">2<\/span> B\u00e9n\u00e9ficiaire<\/div>\n <label>Nom complet<\/label>\n <input id=\"student\" value=\"Mohammed KIAL\">\n <div class=\"grid2\">\n <div><label>Identifiant<\/label><input id=\"sid\" placeholder=\"Optionnel\"><\/div>\n <div><label>Date de naissance<\/label><input id=\"birth\" placeholder=\"Optionnel\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">3<\/span> Formation<\/div>\n <label>Intitul\u00e9<\/label>\n <input id=\"course\" value=\"Formation professionnelle Maroc Zain Academy\">\n <label>Mention<\/label>\n <input id=\"mention\" value=\"A satisfait aux exigences de validation du parcours\">\n <div class=\"grid2\">\n <div><label>Dur\u00e9e<\/label><input id=\"duration\" value=\"40 heures\"><\/div>\n <div><label>R\u00e9sultat<\/label><input id=\"score\" value=\"Valid\u00e9\"><\/div>\n <\/div>\n <label>Texte principal<\/label>\n <textarea id=\"body\">Maroc Zain Academy certifie que le b\u00e9n\u00e9ficiaire a suivi avec assiduit\u00e9 la formation indiqu\u00e9e ci-dessous et a satisfait aux crit\u00e8res de validation pr\u00e9vus.<\/textarea>\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">4<\/span> D\u00e9livrance<\/div>\n <div class=\"grid2\">\n <div><label>Lieu<\/label><input id=\"place\" value=\"El Jadida\"><\/div>\n <div><label>Date<\/label><input id=\"date\" type=\"date\"><\/div>\n <\/div>\n <div class=\"grid2\">\n <div><label>N\u00b0 certificat<\/label><input id=\"serial\"><\/div>\n <div><label>Validit\u00e9<\/label><input id=\"validity\" value=\"Sans limitation\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">5<\/span> Signatures & cachet<\/div>\n <label>Signataire 1<\/label>\n <input id=\"sig1\" value=\"Direction G\u00e9n\u00e9rale\">\n <label>Signataire 2<\/label>\n <input id=\"sig2\" value=\"Direction P\u00e9dagogique\">\n <label>Cachet<\/label>\n <input id=\"stamp\" value=\"MAROC ZAIN ACADEMY\">\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">6<\/span> Actions<\/div>\n <div class=\"actions\">\n <button class=\"btn primary\" id=\"gen\">G\u00e9n\u00e9rer N\u00b0<\/button>\n <button class=\"btn gold\" id=\"print\">Imprimer \/ PDF<\/button>\n <button class=\"btn soft\" id=\"save\">Sauvegarder<\/button>\n <button class=\"btn soft\" id=\"load\">Recharger<\/button>\n <\/div>\n <\/section>\n\n <\/div>\n <\/aside>\n\n <section class=\"preview-shell\">\n <div class=\"preview-toolbar\">\n <span>Aper\u00e7u A4 paysage<\/span>\n <span>Prestige Royal \u2022 Maroc Zain Academy<\/span>\n <\/div>\n\n <div class=\"paper\">\n <div class=\"outer-frame\"><\/div>\n <div class=\"side-ornament\"><\/div>\n\n <div class=\"header-ribbon\">\n <div class=\"logo\">MAROC ZAIN <span>ACADEMY<\/span><\/div>\n <div class=\"ref-mini\">\n CENTRE DE FORMATION PROFESSIONNELLE<br>\n LEARN \u2022 TRAIN \u2022 SUCCEED\n <\/div>\n <\/div>\n\n <div class=\"watermark\">MZA<\/div>\n\n <div class=\"certificate-body\">\n <div class=\"kicker\">Document officiel de validation<\/div>\n <div class=\"doc-type\" id=\"pType\"><\/div>\n <div class=\"gold-rule\"><\/div>\n\n <div class=\"intro\">La pr\u00e9sente distinction est d\u00e9cern\u00e9e \u00e0<\/div>\n <div class=\"name\" id=\"pStudent\"><\/div>\n\n <div class=\"bodytext\" id=\"pBody\"><\/div>\n <div class=\"program\" id=\"pCourse\"><\/div>\n <div class=\"meta\" id=\"pMeta\"><\/div>\n\n <div class=\"signatures\">\n <div class=\"sig\" id=\"pSig1\"><\/div>\n <div class=\"seal\" id=\"pStamp\"><\/div>\n <div class=\"sig\" id=\"pSig2\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"verify\">\n <div class=\"qr\"><\/div>\n <div class=\"verify-text\">\n Zone de v\u00e9rification<br>\n Certificat s\u00e9curis\u00e9 MZA<br>\n R\u00e9f\u00e9rence unique\n <\/div>\n <\/div>\n\n <div class=\"serial\" id=\"pSerial\"><\/div>\n <\/div>\n <\/section>\n\n<\/main>\n<\/div>\n\n<script>\nconst $=id=>document.getElementById(id);\nconst ids=[\"type\",\"student\",\"sid\",\"birth\",\"course\",\"mention\",\"duration\",\"score\",\"body\",\"place\",\"date\",\"serial\",\"validity\",\"sig1\",\"sig2\",\"stamp\"];\n\nfunction prettyDate(v){\n if(!v)return \"\";\n const a=v.split(\"-\");\n return a[2]+\"\/\"+a[1]+\"\/\"+a[0];\n}\n\nfunction generateSerial(){\n const d=new Date();\n const rnd=Math.floor(1000+Math.random()*9000);\n $(\"serial\").value=\"MZA-\"+d.getFullYear()+String(d.getMonth()+1).padStart(2,\"0\")+String(d.getDate()).padStart(2,\"0\")+\"-\"+rnd;\n update();\n}\n\nfunction update(){\n $(\"pType\").textContent=$(\"type\").value;\n $(\"pStudent\").textContent=$(\"student\").value || \"Nom du b\u00e9n\u00e9ficiaire\";\n $(\"pBody\").textContent=$(\"body\").value;\n $(\"pCourse\").textContent=$(\"course\").value;\n\n const meta=[];\n if($(\"mention\").value) meta.push($(\"mention\").value);\n if($(\"duration\").value) meta.push(\"Dur\u00e9e : \"+$(\"duration\").value);\n if($(\"score\").value) meta.push(\"R\u00e9sultat : \"+$(\"score\").value);\n if($(\"place\").value || $(\"date\").value) meta.push(\"D\u00e9livr\u00e9 \u00e0 \"+($(\"place\").value||\"\")+\" le \"+prettyDate($(\"date\").value));\n if($(\"validity\").value) meta.push(\"Validit\u00e9 : \"+$(\"validity\").value);\n if($(\"sid\").value) meta.push(\"Identifiant : \"+$(\"sid\").value);\n\n $(\"pMeta\").innerHTML=meta.join(\"<br>\");\n $(\"pSig1\").textContent=$(\"sig1\").value;\n $(\"pSig2\").textContent=$(\"sig2\").value;\n $(\"pStamp\").textContent=$(\"stamp\").value;\n $(\"pSerial\").innerHTML=\"CERTIFICAT N\u00b0<br><strong>\"+$(\"serial\").value+\"<\/strong>\";\n}\n\nids.forEach(id=>$(id).addEventListener(\"input\",update));\n\n$(\"date\").value=new Date().toISOString().slice(0,10);\ngenerateSerial();\nupdate();\n\n$(\"gen\").onclick=generateSerial;\n$(\"print\").onclick=()=>window.print();\n\n$(\"save\").onclick=()=>{\n const o={};\n ids.forEach(id=>o[id]=$(id).value);\n localStorage.setItem(\"mzaCertificatePrestige\",JSON.stringify(o));\n alert(\"Mod\u00e8le Prestige sauvegard\u00e9 dans ce navigateur.\");\n};\n\n$(\"load\").onclick=()=>{\n const raw=localStorage.getItem(\"mzaCertificatePrestige\");\n if(!raw){alert(\"Aucun mod\u00e8le sauvegard\u00e9.\");return;}\n const o=JSON.parse(raw);\n ids.forEach(id=>{if(o[id]!==undefined)$(id).value=o[id]});\n update();\n};\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MZA Certificate Studio Prestige Royal Maroc Zain Academy Certificate Studio Prestige Royal \u00c9diteur premium d\u2019attestations, certificats, dipl\u00f4mes et documents de validation. A4 \u2022 IMPRESSION \u2022 PDF Panneau d\u2019\u00e9dition Les modifications apparaissent instantan\u00e9ment sur le certificat. 1 Mod\u00e8le Type de document ATTESTATION DE FORMATIONCERTIFICAT DE R\u00c9USSITECERTIFICAT DE COMP\u00c9TENCEDIPL\u00d4MEATTESTATION DE PARTICIPATION Collection Prestige RoyalExecutiveInstitutionnel 2 B\u00e9n\u00e9ficiaire Nom […]<\/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-292","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/292","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=292"}],"version-history":[{"count":3,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/292\/revisions"}],"predecessor-version":[{"id":296,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/292\/revisions\/296"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/media?parent=292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":292,"date":"2026-09-08T08:07:49","date_gmt":"2026-09-08T08:07:49","guid":{"rendered":"https:\/\/maroczain.com\/scolaire.maroczain.com\/?page_id=292"},"modified":"2026-09-08T08:07:49","modified_gmt":"2026-09-08T08:07:49","slug":"certificate-studio-pro","status":"publish","type":"page","link":"https:\/\/maroczain.com\/scolaire.maroczain.com\/certificate-studio-pro\/","title":{"rendered":"CERTIFICATE STUDIO PRO"},"content":{"rendered":"\n\n\n\n\n\nMZA Certificate Studio Prestige Royal<\/title>\n<style>\n:root{\n --navy:#07192f;\n --navy2:#0b2e52;\n --gold:#d8b35a;\n --gold2:#f1d58a;\n --ivory:#fffdf7;\n --paper:#ffffff;\n --bg:#eef2f6;\n --line:#dbe3ea;\n --text:#19324a;\n --muted:#728293;\n}\n*{box-sizing:border-box}\nbody{\n margin:0;\n background:\n radial-gradient(circle at 20% 10%,rgba(216,179,90,.08),transparent 25%),\n linear-gradient(180deg,#eef2f6,#e8eef4);\n font-family:Inter,Arial,Helvetica,sans-serif;\n color:var(--text);\n}\n#mza-cert-pro{\n min-height:100vh;\n}\n.topbar{\n background:\n linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,0)),\n linear-gradient(135deg,var(--navy),var(--navy2));\n color:#fff;\n padding:26px 28px 34px;\n box-shadow:0 18px 45px rgba(7,25,47,.18);\n}\n.topbar .inner{\n max-width:1600px;\n margin:auto;\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:20px;\n}\n.brandblock .eyebrow{\n font-size:12px;\n font-weight:900;\n letter-spacing:2.2px;\n color:var(--gold2);\n text-transform:uppercase;\n}\n.brandblock h1{\n margin:7px 0 5px;\n font-family:Georgia,\"Times New Roman\",serif;\n font-size:clamp(34px,4vw,56px);\n line-height:1;\n}\n.brandblock p{\n margin:0;\n color:#d9e5ef;\n font-size:14px;\n}\n.badge{\n border:1px solid rgba(216,179,90,.5);\n background:rgba(216,179,90,.12);\n color:var(--gold2);\n padding:10px 14px;\n border-radius:999px;\n font-weight:900;\n font-size:12px;\n white-space:nowrap;\n}\n.workspace{\n max-width:1600px;\n margin:-18px auto 0;\n padding:0 18px 34px;\n display:grid;\n grid-template-columns:420px minmax(0,1fr);\n gap:20px;\n}\n.editor{\n background:rgba(255,255,255,.96);\n border:1px solid rgba(219,227,234,.95);\n border-radius:22px;\n box-shadow:0 22px 55px rgba(7,25,47,.12);\n overflow:hidden;\n align-self:start;\n position:sticky;\n top:12px;\n}\n.editor-head{\n padding:18px 20px;\n background:linear-gradient(180deg,#fff,#fbfcfd);\n border-bottom:1px solid var(--line);\n}\n.editor-head strong{\n color:var(--navy);\n font-size:15px;\n}\n.editor-head span{\n display:block;\n margin-top:4px;\n font-size:11px;\n color:var(--muted);\n}\n.editor-body{\n padding:18px;\n max-height:calc(100vh - 120px);\n overflow:auto;\n}\n.section{\n padding:16px 0;\n border-top:1px solid var(--line);\n}\n.section:first-child{\n border-top:0;\n padding-top:0;\n}\n.section-title{\n display:flex;\n align-items:center;\n gap:9px;\n margin-bottom:12px;\n color:var(--navy);\n font-size:13px;\n font-weight:900;\n letter-spacing:.2px;\n}\n.section-title .num{\n width:24px;height:24px;\n border-radius:50%;\n display:inline-flex;\n align-items:center;\n justify-content:center;\n background:var(--navy);\n color:#fff;\n font-size:11px;\n}\n.grid2{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:10px;\n}\nlabel{\n display:block;\n margin:9px 0 6px;\n color:#647688;\n font-size:10px;\n font-weight:900;\n letter-spacing:.55px;\n text-transform:uppercase;\n}\ninput,select,textarea{\n width:100%;\n border:1px solid #ccd7e1;\n background:#fff;\n color:var(--text);\n border-radius:12px;\n padding:11px 12px;\n outline:none;\n transition:.2s;\n box-shadow:inset 0 1px 0 rgba(0,0,0,.01);\n}\ninput:focus,select:focus,textarea:focus{\n border-color:#7ea7c8;\n box-shadow:0 0 0 3px rgba(30,100,160,.08);\n}\ntextarea{\n min-height:86px;\n resize:vertical;\n}\n.actions{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:9px;\n}\n.btn{\n border:0;\n border-radius:12px;\n min-height:44px;\n padding:0 14px;\n font-weight:900;\n cursor:pointer;\n transition:.2s transform,.2s box-shadow,.2s opacity;\n}\n.btn:hover{\n transform:translateY(-1px);\n}\n.btn.primary{\n background:linear-gradient(135deg,var(--navy),var(--navy2));\n color:#fff;\n box-shadow:0 10px 22px rgba(7,25,47,.16);\n}\n.btn.gold{\n background:linear-gradient(135deg,var(--gold),var(--gold2));\n color:#17283b;\n box-shadow:0 10px 22px rgba(216,179,90,.18);\n}\n.btn.soft{\n background:#eef3f7;\n color:#29445f;\n}\n.preview-shell{\n background:rgba(255,255,255,.78);\n border:1px solid rgba(219,227,234,.95);\n border-radius:22px;\n box-shadow:0 22px 55px rgba(7,25,47,.10);\n overflow:auto;\n padding:24px;\n}\n.preview-toolbar{\n display:flex;\n justify-content:space-between;\n gap:10px;\n align-items:center;\n margin-bottom:14px;\n color:var(--muted);\n font-size:12px;\n}\n.paper{\n width:1123px;\n height:794px;\n margin:auto;\n position:relative;\n overflow:hidden;\n background:\n radial-gradient(circle at 85% 20%,rgba(216,179,90,.08),transparent 26%),\n linear-gradient(135deg,#fffefb,#ffffff);\n box-shadow:0 28px 70px rgba(7,25,47,.20);\n}\n.paper:before{\n content:\"\";\n position:absolute;\n inset:0;\n background:\n linear-gradient(135deg,rgba(7,25,47,.028),transparent 26%),\n linear-gradient(315deg,rgba(216,179,90,.025),transparent 26%);\n pointer-events:none;\n}\n.outer-frame{\n position:absolute;\n inset:22px;\n border:2px solid var(--navy);\n}\n.outer-frame:before{\n content:\"\";\n position:absolute;\n inset:9px;\n border:1px solid var(--gold);\n}\n.side-ornament{\n position:absolute;\n left:24px;\n top:24px;\n bottom:24px;\n width:14px;\n background:linear-gradient(180deg,var(--gold2),var(--gold),var(--gold2));\n}\n.header-ribbon{\n position:absolute;\n top:52px;\n left:92px;\n right:92px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n border-bottom:1px solid rgba(7,25,47,.14);\n padding-bottom:16px;\n}\n.logo{\n font-weight:900;\n font-size:19px;\n letter-spacing:1.2px;\n color:var(--navy);\n}\n.logo span{\n color:var(--gold);\n}\n.ref-mini{\n font-size:10px;\n color:#7c8997;\n text-align:right;\n line-height:1.45;\n}\n.certificate-body{\n position:absolute;\n inset:130px 90px 80px 110px;\n display:flex;\n flex-direction:column;\n align-items:center;\n text-align:center;\n}\n.kicker{\n font-size:11px;\n text-transform:uppercase;\n letter-spacing:3px;\n color:#8c7440;\n font-weight:900;\n}\n.doc-type{\n margin-top:10px;\n font-family:Georgia,\"Times New Roman\",serif;\n font-size:44px;\n line-height:1.05;\n color:var(--navy);\n letter-spacing:1px;\n}\n.gold-rule{\n width:160px;\n height:3px;\n background:linear-gradient(90deg,transparent,var(--gold),transparent);\n margin:17px 0 19px;\n}\n.intro{\n color:#617486;\n font-size:16px;\n}\n.name{\n margin:8px 0 10px;\n font-family:Georgia,\"Times New Roman\",serif;\n font-size:44px;\n color:#0d2744;\n font-weight:700;\n}\n.bodytext{\n max-width:820px;\n font-size:18px;\n line-height:1.55;\n color:#30485f;\n}\n.program{\n margin:14px 0 8px;\n max-width:850px;\n font-size:25px;\n line-height:1.25;\n font-weight:900;\n color:var(--navy);\n}\n.meta{\n font-size:13px;\n line-height:1.55;\n color:#66798b;\n}\n.signatures{\n margin-top:auto;\n width:100%;\n display:grid;\n grid-template-columns:1fr 150px 1fr;\n gap:30px;\n align-items:end;\n}\n.sig{\n padding-top:44px;\n border-top:1px solid #7e8e9d;\n font-size:12px;\n color:#4b6277;\n font-weight:700;\n}\n.seal{\n width:105px;height:105px;\n margin:auto;\n border:3px double var(--navy);\n border-radius:50%;\n display:flex;\n align-items:center;\n justify-content:center;\n padding:12px;\n text-align:center;\n color:var(--navy);\n font-size:9px;\n font-weight:900;\n letter-spacing:.7px;\n transform:rotate(-7deg);\n position:relative;\n}\n.seal:before{\n content:\"\u2726\";\n position:absolute;\n top:10px;\n font-size:16px;\n color:var(--gold);\n}\n.verify{\n position:absolute;\n left:105px;\n bottom:40px;\n display:flex;\n align-items:center;\n gap:10px;\n}\n.qr{\n width:64px;height:64px;\n background:\n linear-gradient(90deg,#111 8px,transparent 8px) 0 0\/16px 16px,\n linear-gradient(#111 8px,transparent 8px) 0 0\/16px 16px;\n outline:1px solid #aaa;\n border:5px solid #fff;\n}\n.verify-text{\n font-size:9px;\n line-height:1.5;\n color:#7b8996;\n}\n.serial{\n position:absolute;\n right:70px;\n bottom:42px;\n text-align:right;\n font-size:10px;\n line-height:1.45;\n color:#7b8996;\n}\n.watermark{\n position:absolute;\n right:90px;\n top:215px;\n font-family:Georgia,\"Times New Roman\",serif;\n font-size:105px;\n color:rgba(7,25,47,.025);\n transform:rotate(-18deg);\n pointer-events:none;\n font-weight:900;\n}\n@media(max-width:1150px){\n .workspace{grid-template-columns:1fr}\n .editor{position:static}\n .editor-body{max-height:none}\n .preview-shell{overflow:auto}\n .paper{margin:0}\n}\n@media(max-width:650px){\n .topbar .inner{align-items:flex-start;flex-direction:column}\n .grid2,.actions{grid-template-columns:1fr}\n}\n@media print{\n body *{visibility:hidden!important}\n .paper,.paper *{visibility:visible!important}\n .paper{\n position:fixed;\n left:0;top:0;\n width:297mm;\n height:210mm;\n box-shadow:none;\n }\n @page{size:A4 landscape;margin:0}\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"mza-cert-pro\">\n\n<header class=\"topbar\">\n <div class=\"inner\">\n <div class=\"brandblock\">\n <div class=\"eyebrow\">Maroc Zain Academy<\/div>\n <h1>Certificate Studio Prestige Royal<\/h1>\n <p>\u00c9diteur premium d\u2019attestations, certificats, dipl\u00f4mes et documents de validation.<\/p>\n <\/div>\n <div class=\"badge\">A4 \u2022 IMPRESSION \u2022 PDF<\/div>\n <\/div>\n<\/header>\n\n<main class=\"workspace\">\n\n <aside class=\"editor\">\n <div class=\"editor-head\">\n <strong>Panneau d\u2019\u00e9dition<\/strong>\n <span>Les modifications apparaissent instantan\u00e9ment sur le certificat.<\/span>\n <\/div>\n\n <div class=\"editor-body\">\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">1<\/span> Mod\u00e8le<\/div>\n <div class=\"grid2\">\n <div>\n <label>Type de document<\/label>\n <select id=\"type\">\n <option>ATTESTATION DE FORMATION<\/option>\n <option>CERTIFICAT DE R\u00c9USSITE<\/option>\n <option>CERTIFICAT DE COMP\u00c9TENCE<\/option>\n <option>DIPL\u00d4ME<\/option>\n <option>ATTESTATION DE PARTICIPATION<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Collection<\/label>\n <select id=\"collection\">\n <option>Prestige Royal<\/option>\n <option>Executive<\/option>\n <option>Institutionnel<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">2<\/span> B\u00e9n\u00e9ficiaire<\/div>\n <label>Nom complet<\/label>\n <input id=\"student\" value=\"Mohammed KIAL\">\n <div class=\"grid2\">\n <div><label>Identifiant<\/label><input id=\"sid\" placeholder=\"Optionnel\"><\/div>\n <div><label>Date de naissance<\/label><input id=\"birth\" placeholder=\"Optionnel\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">3<\/span> Formation<\/div>\n <label>Intitul\u00e9<\/label>\n <input id=\"course\" value=\"Formation professionnelle Maroc Zain Academy\">\n <label>Mention<\/label>\n <input id=\"mention\" value=\"A satisfait aux exigences de validation du parcours\">\n <div class=\"grid2\">\n <div><label>Dur\u00e9e<\/label><input id=\"duration\" value=\"40 heures\"><\/div>\n <div><label>R\u00e9sultat<\/label><input id=\"score\" value=\"Valid\u00e9\"><\/div>\n <\/div>\n <label>Texte principal<\/label>\n <textarea id=\"body\">Maroc Zain Academy certifie que le b\u00e9n\u00e9ficiaire a suivi avec assiduit\u00e9 la formation indiqu\u00e9e ci-dessous et a satisfait aux crit\u00e8res de validation pr\u00e9vus.<\/textarea>\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">4<\/span> D\u00e9livrance<\/div>\n <div class=\"grid2\">\n <div><label>Lieu<\/label><input id=\"place\" value=\"El Jadida\"><\/div>\n <div><label>Date<\/label><input id=\"date\" type=\"date\"><\/div>\n <\/div>\n <div class=\"grid2\">\n <div><label>N\u00b0 certificat<\/label><input id=\"serial\"><\/div>\n <div><label>Validit\u00e9<\/label><input id=\"validity\" value=\"Sans limitation\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">5<\/span> Signatures & cachet<\/div>\n <label>Signataire 1<\/label>\n <input id=\"sig1\" value=\"Direction G\u00e9n\u00e9rale\">\n <label>Signataire 2<\/label>\n <input id=\"sig2\" value=\"Direction P\u00e9dagogique\">\n <label>Cachet<\/label>\n <input id=\"stamp\" value=\"MAROC ZAIN ACADEMY\">\n <\/section>\n\n <section class=\"section\">\n <div class=\"section-title\"><span class=\"num\">6<\/span> Actions<\/div>\n <div class=\"actions\">\n <button class=\"btn primary\" id=\"gen\">G\u00e9n\u00e9rer N\u00b0<\/button>\n <button class=\"btn gold\" id=\"print\">Imprimer \/ PDF<\/button>\n <button class=\"btn soft\" id=\"save\">Sauvegarder<\/button>\n <button class=\"btn soft\" id=\"load\">Recharger<\/button>\n <\/div>\n <\/section>\n\n <\/div>\n <\/aside>\n\n <section class=\"preview-shell\">\n <div class=\"preview-toolbar\">\n <span>Aper\u00e7u A4 paysage<\/span>\n <span>Prestige Royal \u2022 Maroc Zain Academy<\/span>\n <\/div>\n\n <div class=\"paper\">\n <div class=\"outer-frame\"><\/div>\n <div class=\"side-ornament\"><\/div>\n\n <div class=\"header-ribbon\">\n <div class=\"logo\">MAROC ZAIN <span>ACADEMY<\/span><\/div>\n <div class=\"ref-mini\">\n CENTRE DE FORMATION PROFESSIONNELLE<br>\n LEARN \u2022 TRAIN \u2022 SUCCEED\n <\/div>\n <\/div>\n\n <div class=\"watermark\">MZA<\/div>\n\n <div class=\"certificate-body\">\n <div class=\"kicker\">Document officiel de validation<\/div>\n <div class=\"doc-type\" id=\"pType\"><\/div>\n <div class=\"gold-rule\"><\/div>\n\n <div class=\"intro\">La pr\u00e9sente distinction est d\u00e9cern\u00e9e \u00e0<\/div>\n <div class=\"name\" id=\"pStudent\"><\/div>\n\n <div class=\"bodytext\" id=\"pBody\"><\/div>\n <div class=\"program\" id=\"pCourse\"><\/div>\n <div class=\"meta\" id=\"pMeta\"><\/div>\n\n <div class=\"signatures\">\n <div class=\"sig\" id=\"pSig1\"><\/div>\n <div class=\"seal\" id=\"pStamp\"><\/div>\n <div class=\"sig\" id=\"pSig2\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"verify\">\n <div class=\"qr\"><\/div>\n <div class=\"verify-text\">\n Zone de v\u00e9rification<br>\n Certificat s\u00e9curis\u00e9 MZA<br>\n R\u00e9f\u00e9rence unique\n <\/div>\n <\/div>\n\n <div class=\"serial\" id=\"pSerial\"><\/div>\n <\/div>\n <\/section>\n\n<\/main>\n<\/div>\n\n<script>\nconst $=id=>document.getElementById(id);\nconst ids=[\"type\",\"student\",\"sid\",\"birth\",\"course\",\"mention\",\"duration\",\"score\",\"body\",\"place\",\"date\",\"serial\",\"validity\",\"sig1\",\"sig2\",\"stamp\"];\n\nfunction prettyDate(v){\n if(!v)return \"\";\n const a=v.split(\"-\");\n return a[2]+\"\/\"+a[1]+\"\/\"+a[0];\n}\n\nfunction generateSerial(){\n const d=new Date();\n const rnd=Math.floor(1000+Math.random()*9000);\n $(\"serial\").value=\"MZA-\"+d.getFullYear()+String(d.getMonth()+1).padStart(2,\"0\")+String(d.getDate()).padStart(2,\"0\")+\"-\"+rnd;\n update();\n}\n\nfunction update(){\n $(\"pType\").textContent=$(\"type\").value;\n $(\"pStudent\").textContent=$(\"student\").value || \"Nom du b\u00e9n\u00e9ficiaire\";\n $(\"pBody\").textContent=$(\"body\").value;\n $(\"pCourse\").textContent=$(\"course\").value;\n\n const meta=[];\n if($(\"mention\").value) meta.push($(\"mention\").value);\n if($(\"duration\").value) meta.push(\"Dur\u00e9e : \"+$(\"duration\").value);\n if($(\"score\").value) meta.push(\"R\u00e9sultat : \"+$(\"score\").value);\n if($(\"place\").value || $(\"date\").value) meta.push(\"D\u00e9livr\u00e9 \u00e0 \"+($(\"place\").value||\"\")+\" le \"+prettyDate($(\"date\").value));\n if($(\"validity\").value) meta.push(\"Validit\u00e9 : \"+$(\"validity\").value);\n if($(\"sid\").value) meta.push(\"Identifiant : \"+$(\"sid\").value);\n\n $(\"pMeta\").innerHTML=meta.join(\"<br>\");\n $(\"pSig1\").textContent=$(\"sig1\").value;\n $(\"pSig2\").textContent=$(\"sig2\").value;\n $(\"pStamp\").textContent=$(\"stamp\").value;\n $(\"pSerial\").innerHTML=\"CERTIFICAT N\u00b0<br><strong>\"+$(\"serial\").value+\"<\/strong>\";\n}\n\nids.forEach(id=>$(id).addEventListener(\"input\",update));\n\n$(\"date\").value=new Date().toISOString().slice(0,10);\ngenerateSerial();\nupdate();\n\n$(\"gen\").onclick=generateSerial;\n$(\"print\").onclick=()=>window.print();\n\n$(\"save\").onclick=()=>{\n const o={};\n ids.forEach(id=>o[id]=$(id).value);\n localStorage.setItem(\"mzaCertificatePrestige\",JSON.stringify(o));\n alert(\"Mod\u00e8le Prestige sauvegard\u00e9 dans ce navigateur.\");\n};\n\n$(\"load\").onclick=()=>{\n const raw=localStorage.getItem(\"mzaCertificatePrestige\");\n if(!raw){alert(\"Aucun mod\u00e8le sauvegard\u00e9.\");return;}\n const o=JSON.parse(raw);\n ids.forEach(id=>{if(o[id]!==undefined)$(id).value=o[id]});\n update();\n};\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MZA Certificate Studio Prestige Royal Maroc Zain Academy Certificate Studio Prestige Royal \u00c9diteur premium d\u2019attestations, certificats, dipl\u00f4mes et documents de validation. A4 \u2022 IMPRESSION \u2022 PDF Panneau d\u2019\u00e9dition Les modifications apparaissent instantan\u00e9ment sur le certificat. 1 Mod\u00e8le Type de document ATTESTATION DE FORMATIONCERTIFICAT DE R\u00c9USSITECERTIFICAT DE COMP\u00c9TENCEDIPL\u00d4MEATTESTATION DE PARTICIPATION Collection Prestige RoyalExecutiveInstitutionnel 2 B\u00e9n\u00e9ficiaire Nom […]<\/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-292","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/292","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=292"}],"version-history":[{"count":3,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/292\/revisions"}],"predecessor-version":[{"id":296,"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/pages\/292\/revisions\/296"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/scolaire.maroczain.com\/wp-json\/wp\/v2\/media?parent=292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}