{"id":1842,"date":"2026-09-07T23:12:08","date_gmt":"2026-09-07T23:12:08","guid":{"rendered":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/?page_id=1842"},"modified":"2026-09-07T23:21:23","modified_gmt":"2026-09-07T23:21:23","slug":"calligraphie-arabe-marocaine","status":"publish","type":"page","link":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/calligraphie-arabe-marocaine\/","title":{"rendered":"Calligraphie Arabe &amp; Marocaine"},"content":{"rendered":"\n<!-- =========================================================\n MZA ACADEMY\n ATELIER CALLIGRAPHIE ARABE & MAROCAINE\n PRESTIGE ROYAL\n WordPress \/ Elementor\n========================================================= -->\n\n<style>\n#mza-calligraphy{\n --bg:#07100d;\n --panel:#102019;\n --panel2:#162a21;\n --gold:#d6ad56;\n --gold2:#f1d48b;\n --cream:#f7f0df;\n --text:#faf7ef;\n --muted:#c9c1b3;\n --border:rgba(214,173,86,.20);\n --shadow:0 22px 60px rgba(0,0,0,.30);\n\n width:100%;\n overflow:hidden;\n background:\n radial-gradient(circle at 90% 0%,rgba(214,173,86,.11),transparent 28%),\n var(--bg);\n\n color:var(--text);\n font-family:Arial,Tahoma,sans-serif;\n line-height:1.65;\n}\n\n#mza-calligraphy *{box-sizing:border-box}\n\n#mza-calligraphy .wrap{\n width:min(1240px,92%);\n margin:auto;\n}\n\n#mza-calligraphy .section{\n padding:85px 0;\n}\n\n#mza-calligraphy h1{\n font-size:clamp(3rem,7vw,6rem);\n line-height:.95;\n margin:22px 0;\n letter-spacing:-.04em;\n}\n\n#mza-calligraphy h2{\n font-size:clamp(2rem,4vw,3.7rem);\n line-height:1.05;\n margin:10px 0 18px;\n}\n\n#mza-calligraphy h3{\n margin-top:0;\n}\n\n#mza-calligraphy .gold{\n color:var(--gold2);\n}\n\n#mza-calligraphy .eyebrow{\n color:var(--gold2);\n font-size:.78rem;\n font-weight:900;\n text-transform:uppercase;\n letter-spacing:.15em;\n}\n\n#mza-calligraphy .lead{\n color:var(--muted);\n max-width:850px;\n font-size:1.08rem;\n}\n\n\n\/* HERO *\/\n\n#mza-calligraphy .hero{\n min-height:92vh;\n display:flex;\n align-items:center;\n\n background:\n linear-gradient(90deg,rgba(4,10,7,.96),rgba(4,10,7,.58)),\n url(\"https:\/\/images.unsplash.com\/photo-1584286595398-a59f21d313f4?auto=format&fit=crop&w=1900&q=85\")\n center\/cover no-repeat;\n}\n\n#mza-calligraphy .hero-content{\n max-width:900px;\n padding:100px 0;\n}\n\n#mza-calligraphy .badge{\n display:inline-block;\n padding:9px 16px;\n border:1px solid rgba(214,173,86,.45);\n border-radius:999px;\n background:rgba(0,0,0,.3);\n color:var(--gold2);\n font-size:.78rem;\n font-weight:900;\n letter-spacing:.1em;\n}\n\n#mza-calligraphy .arabic-title{\n font-family:\"Traditional Arabic\",\"Amiri\",\"Scheherazade New\",serif;\n direction:rtl;\n font-size:clamp(2rem,5vw,4.5rem);\n color:var(--gold2);\n margin:10px 0;\n}\n\n\n\/* BUTTONS *\/\n\n#mza-calligraphy .actions{\n display:flex;\n gap:12px;\n flex-wrap:wrap;\n margin-top:28px;\n}\n\n#mza-calligraphy .btn{\n padding:15px 22px;\n border-radius:14px;\n border:0;\n cursor:pointer;\n font-weight:900;\n transition:.25s;\n}\n\n#mza-calligraphy .btn:hover{\n transform:translateY(-3px);\n}\n\n#mza-calligraphy .primary{\n background:linear-gradient(135deg,var(--gold2),var(--gold));\n color:#07100d;\n}\n\n#mza-calligraphy .secondary{\n color:white;\n background:rgba(255,255,255,.04);\n border:1px solid rgba(255,255,255,.18);\n}\n\n\n\/* STATS *\/\n\n#mza-calligraphy .stats{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:15px;\n margin-top:38px;\n}\n\n#mza-calligraphy .stat{\n text-align:center;\n padding:24px;\n border-radius:20px;\n background:linear-gradient(145deg,var(--panel),#0c1712);\n border:1px solid var(--border);\n}\n\n#mza-calligraphy .stat strong{\n display:block;\n color:var(--gold2);\n font-size:2rem;\n}\n\n\n\/* STYLES *\/\n\n#mza-calligraphy .styles{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:18px;\n margin-top:38px;\n}\n\n#mza-calligraphy .style-card{\n padding:27px;\n border-radius:23px;\n background:linear-gradient(145deg,var(--panel),var(--panel2));\n border:1px solid var(--border);\n box-shadow:var(--shadow);\n transition:.25s;\n}\n\n#mza-calligraphy .style-card:hover{\n transform:translateY(-5px);\n border-color:rgba(214,173,86,.45);\n}\n\n#mza-calligraphy .sample{\n font-family:\"Traditional Arabic\",\"Amiri\",serif;\n direction:rtl;\n text-align:center;\n font-size:2.5rem;\n color:var(--gold2);\n padding:18px 5px;\n border-bottom:1px solid var(--border);\n margin-bottom:17px;\n}\n\n\n\/* MODULES *\/\n\n#mza-calligraphy .modules{\n display:grid;\n grid-template-columns:repeat(2,1fr);\n gap:18px;\n margin-top:38px;\n}\n\n#mza-calligraphy .module{\n padding:26px;\n border-radius:22px;\n background:linear-gradient(145deg,var(--panel),#12241c);\n border:1px solid var(--border);\n}\n\n#mza-calligraphy .number{\n color:var(--gold2);\n font-size:.78rem;\n font-weight:900;\n letter-spacing:.12em;\n}\n\n#mza-calligraphy .module p{\n color:var(--muted);\n}\n\n\n\/* ALPHABET *\/\n\n#mza-calligraphy .alphabet{\n display:grid;\n grid-template-columns:repeat(7,1fr);\n gap:10px;\n margin-top:30px;\n}\n\n#mza-calligraphy .letter{\n cursor:pointer;\n text-align:center;\n border-radius:15px;\n padding:15px 5px;\n background:#102019;\n border:1px solid var(--border);\n transition:.2s;\n}\n\n#mza-calligraphy .letter:hover{\n background:#1b3328;\n transform:translateY(-3px);\n}\n\n#mza-calligraphy .letter strong{\n display:block;\n font-family:\"Traditional Arabic\",\"Amiri\",serif;\n font-size:2.2rem;\n color:var(--gold2);\n}\n\n#mza-calligraphy .letter small{\n color:var(--muted);\n}\n\n\n\/* STUDIO *\/\n\n#mza-calligraphy .studio{\n background:\n radial-gradient(circle at 10% 20%,rgba(214,173,86,.10),transparent 25%),\n #091510;\n}\n\n#mza-calligraphy .studio-grid{\n display:grid;\n grid-template-columns:.8fr 1.2fr;\n gap:22px;\n margin-top:35px;\n}\n\n#mza-calligraphy .tool{\n padding:28px;\n border-radius:25px;\n background:linear-gradient(145deg,#14271f,#0d1a14);\n border:1px solid var(--border);\n}\n\n#mza-calligraphy label{\n display:block;\n color:#ddd5c7;\n font-size:.85rem;\n font-weight:800;\n margin:10px 0 5px;\n}\n\n#mza-calligraphy input,\n#mza-calligraphy select,\n#mza-calligraphy textarea{\n width:100%;\n padding:13px;\n border-radius:11px;\n border:1px solid rgba(255,255,255,.13);\n background:#07110d;\n color:white;\n outline:none;\n}\n\n#mza-calligraphy textarea{\n min-height:100px;\n resize:vertical;\n}\n\n#mza-calligraphy .formgrid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:12px;\n}\n\n\n\/* CANVAS *\/\n\n#mza-calligraphy .canvas{\n min-height:430px;\n border-radius:22px;\n border:1px solid rgba(214,173,86,.3);\n\n background:\n linear-gradient(rgba(247,240,223,.97),rgba(239,228,202,.97));\n\n display:flex;\n align-items:center;\n justify-content:center;\n padding:40px;\n position:relative;\n overflow:hidden;\n}\n\n#mza-calligraphy .canvas:before{\n content:\"\";\n position:absolute;\n inset:16px;\n border:2px solid rgba(111,79,31,.18);\n border-radius:14px;\n pointer-events:none;\n}\n\n#mza-calligraphy .art{\n direction:rtl;\n text-align:center;\n color:#1b1710;\n font-family:\"Traditional Arabic\",\"Amiri\",\"Scheherazade New\",serif;\n font-size:4rem;\n line-height:1.5;\n max-width:100%;\n word-break:break-word;\n position:relative;\n z-index:2;\n}\n\n\n\/* RESULT *\/\n\n#mza-calligraphy .result{\n margin-top:17px;\n padding:18px;\n border-radius:16px;\n background:#07110d;\n border:1px solid var(--border);\n}\n\n#mza-calligraphy .metrics{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:9px;\n margin-top:10px;\n}\n\n#mza-calligraphy .metric{\n padding:11px;\n border-radius:11px;\n background:rgba(255,255,255,.04);\n}\n\n#mza-calligraphy .metric small{\n display:block;\n color:var(--muted);\n}\n\n#mza-calligraphy .metric b{\n color:var(--gold2);\n}\n\n\n\/* MISSIONS *\/\n\n#mza-calligraphy .mission-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:17px;\n margin-top:35px;\n}\n\n#mza-calligraphy .mission{\n padding:26px;\n border-radius:22px;\n background:var(--panel);\n border:1px solid var(--border);\n}\n\n#mza-calligraphy .mission-ar{\n font-family:\"Traditional Arabic\",\"Amiri\",serif;\n direction:rtl;\n color:var(--gold2);\n font-size:2rem;\n}\n\n\n\/* QCM *\/\n\n#mza-calligraphy .question{\n margin-top:15px;\n padding:24px;\n border-radius:20px;\n background:var(--panel);\n border:1px solid var(--border);\n}\n\n#mza-calligraphy .answer{\n display:block;\n width:100%;\n text-align:left;\n margin-top:8px;\n padding:12px;\n border-radius:10px;\n border:1px solid rgba(255,255,255,.12);\n background:#09140f;\n color:white;\n cursor:pointer;\n}\n\n#mza-calligraphy .answer.good{\n background:rgba(50,140,90,.18);\n border-color:#438b64;\n}\n\n#mza-calligraphy .answer.bad{\n background:rgba(180,70,70,.17);\n border-color:#ae5050;\n}\n\n\n\/* MASTER *\/\n\n#mza-calligraphy .master{\n text-align:center;\n}\n\n#mza-calligraphy .master-box{\n padding:55px 30px;\n border-radius:30px;\n background:\n radial-gradient(circle at center,rgba(214,173,86,.11),transparent 50%),\n linear-gradient(145deg,#14271f,#080f0c);\n border:1px solid rgba(214,173,86,.3);\n}\n\n#mza-calligraphy .master-box .lead{\n margin:auto;\n}\n\n\n\/* TOAST *\/\n\n#mza-calligraphy .toast{\n display:none;\n position:fixed;\n right:20px;\n bottom:20px;\n z-index:99999;\n background:var(--gold2);\n color:#07100d;\n padding:15px 19px;\n border-radius:13px;\n font-weight:900;\n box-shadow:var(--shadow);\n}\n\n\n@media(max-width:900px){\n\n #mza-calligraphy .styles{\n  grid-template-columns:1fr 1fr;\n }\n\n #mza-calligraphy .stats{\n  grid-template-columns:1fr 1fr;\n }\n\n #mza-calligraphy .studio-grid{\n  grid-template-columns:1fr;\n }\n\n #mza-calligraphy .mission-grid{\n  grid-template-columns:1fr;\n }\n\n #mza-calligraphy .alphabet{\n  grid-template-columns:repeat(5,1fr);\n }\n}\n\n@media(max-width:600px){\n\n #mza-calligraphy .styles,\n #mza-calligraphy .modules,\n #mza-calligraphy .stats,\n #mza-calligraphy .formgrid{\n  grid-template-columns:1fr;\n }\n\n #mza-calligraphy .alphabet{\n  grid-template-columns:repeat(4,1fr);\n }\n\n #mza-calligraphy .section{\n  padding:58px 0;\n }\n\n #mza-calligraphy .hero{\n  min-height:auto;\n }\n\n #mza-calligraphy .hero-content{\n  padding:75px 0;\n }\n\n #mza-calligraphy .btn{\n  width:100%;\n }\n\n #mza-calligraphy .canvas{\n  min-height:320px;\n }\n\n #mza-calligraphy .art{\n  font-size:2.8rem;\n }\n}\n<\/style>\n\n\n<div id=\"mza-calligraphy\">\n\n<!-- HERO -->\n\n<section class=\"hero\">\n<div class=\"wrap\">\n<div class=\"hero-content\">\n\n<span class=\"badge\">\n\ud83c\uddf2\ud83c\udde6 MAROC ZAIN ACADEMY \u00b7 M\u00c9TIERS D&#8217;ART\n<\/span>\n\n<div class=\"arabic-title\">\n\u0641\u0646 \u0627\u0644\u062e\u0637 \u0627\u0644\u0639\u0631\u0628\u064a \u0648\u0627\u0644\u0645\u063a\u0631\u0628\u064a\n<\/div>\n\n<h1>\nCalligraphie\n<span class=\"gold\">Arabe &#038; Marocaine<\/span>\n<\/h1>\n\n<p class=\"lead\">\nApprendre le geste, comprendre les proportions,\nma\u00eetriser le qalam et explorer les grandes traditions\ncalligraphiques arabes et maghr\u00e9bines avant de cr\u00e9er\nses propres \u0153uvres contemporaines.\n<\/p>\n\n<div class=\"actions\">\n\n<button class=\"btn primary\"\nonclick=\"callGo('programme')\">\nCOMMENCER L&#8217;ATELIER\n<\/button>\n\n<button class=\"btn secondary\"\nonclick=\"callGo('studio')\">\nOUVRIR CALLIGRAPHY STUDIO\n<\/button>\n\n<\/div>\n\n<\/div>\n<\/div>\n<\/section>\n\n\n<!-- INTRO -->\n\n<section class=\"section\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">\nPatrimoine \u00b7 geste \u00b7 g\u00e9om\u00e9trie \u00b7 cr\u00e9ation\n<\/span>\n\n<h2>\nDe la premi\u00e8re lettre \u00e0\n<span class=\"gold\">l&#8217;\u0153uvre calligraphique.<\/span>\n<\/h2>\n\n<p class=\"lead\">\nLe parcours associe culture artistique, observation,\nentra\u00eenement du geste, construction des lettres,\ncomposition et cr\u00e9ation d&#8217;une \u0153uvre compl\u00e8te.\n<\/p>\n\n<div class=\"stats\">\n\n<div class=\"stat\">\n<strong>10<\/strong>\nAteliers\n<\/div>\n\n<div class=\"stat\">\n<strong>28<\/strong>\nLettres\n<\/div>\n\n<div class=\"stat\">\n<strong>6<\/strong>\nStyles \u00e9tudi\u00e9s\n<\/div>\n\n<div class=\"stat\">\n<strong>12<\/strong>\n\u0152uvres finales\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- STYLES -->\n\n<section class=\"section\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">Biblioth\u00e8que des \u00e9critures<\/span>\n\n<h2>\nD\u00e9couvrir les\n<span class=\"gold\">grands styles.<\/span>\n<\/h2>\n\n<div class=\"styles\">\n\n<div class=\"style-card\">\n<div class=\"sample\">\u0628\u0633\u0645 \u0627\u0644\u0644\u0647<\/div>\n<h3>Naskh \u00b7 \u0627\u0644\u0646\u0633\u062e<\/h3>\n<p>\n\u00c9criture claire et structur\u00e9e, fondamentale pour\nl&#8217;apprentissage des proportions et de la lisibilit\u00e9.\n<\/p>\n<\/div>\n\n<div class=\"style-card\">\n<div class=\"sample\">\u0627\u0644\u062d\u0645\u062f \u0644\u0644\u0647<\/div>\n<h3>Thuluth \u00b7 \u0627\u0644\u062b\u0644\u062b<\/h3>\n<p>\n\u00c9criture monumentale aux mouvements amples,\nparticuli\u00e8rement adapt\u00e9e aux grandes compositions.\n<\/p>\n<\/div>\n\n<div class=\"style-card\">\n<div class=\"sample\">\u0627\u0644\u0645\u063a\u0631\u0628<\/div>\n<h3>Maghr\u00e9bi \u00b7 \u0627\u0644\u0645\u063a\u0631\u0628\u064a<\/h3>\n<p>\nTradition calligraphique du Maghreb particuli\u00e8rement\nimportante dans le patrimoine manuscrit marocain.\n<\/p>\n<\/div>\n\n<div class=\"style-card\">\n<div class=\"sample\">\u0627\u0644\u0633\u0644\u0627\u0645<\/div>\n<h3>Diwani \u00b7 \u0627\u0644\u062f\u064a\u0648\u0627\u0646\u064a<\/h3>\n<p>\n\u00c9criture souple et d\u00e9corative caract\u00e9ris\u00e9e\npar une grande richesse de mouvements.\n<\/p>\n<\/div>\n\n<div class=\"style-card\">\n<div class=\"sample\">\u0627\u0644\u0639\u0644\u0645 \u0646\u0648\u0631<\/div>\n<h3>Ruq\u02bfa \u00b7 \u0627\u0644\u0631\u0642\u0639\u0629<\/h3>\n<p>\nStyle compact et fluide utile pour travailler\nla rapidit\u00e9 et la continuit\u00e9 du geste.\n<\/p>\n<\/div>\n\n<div class=\"style-card\">\n<div class=\"sample\">\u0645\u062d\u0645\u062f<\/div>\n<h3>Kufi \u00b7 \u0627\u0644\u0643\u0648\u0641\u064a<\/h3>\n<p>\nConstruction g\u00e9om\u00e9trique particuli\u00e8rement int\u00e9ressante\npour les compositions architecturales et contemporaines.\n<\/p>\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- PROGRAMME -->\n\n<section class=\"section\" id=\"programme\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">Cursus pratique<\/span>\n\n<h2>\nLes 10 ateliers\n<span class=\"gold\">MZA Calligraphy.<\/span>\n<\/h2>\n\n<div class=\"modules\">\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 01<\/span>\n<h3>Le qalam<\/h3>\n<p>\nD\u00e9couvrir l&#8217;outil, sa prise en main,\nl&#8217;angle du trait et les gestes fondamentaux.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 02<\/span>\n<h3>Point &#038; proportions<\/h3>\n<p>\nComprendre la logique des proportions\net observer la construction des lettres.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 03<\/span>\n<h3>Alphabet arabe<\/h3>\n<p>\n\u00c9tudier progressivement les 28 lettres\net leurs principales formes contextuelles.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 04<\/span>\n<h3>Liaisons<\/h3>\n<p>\nAssembler les lettres et comprendre\nles changements de formes dans les mots.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 05<\/span>\n<h3>Naskh<\/h3>\n<p>\nConstruire des mots lisibles et travailler\nr\u00e9gularit\u00e9, ligne et \u00e9quilibre.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 06<\/span>\n<h3>Thuluth<\/h3>\n<p>\nD\u00e9couvrir les grandes compositions,\nles mouvements verticaux et les superpositions.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 07<\/span>\n<h3>\u00c9criture maghr\u00e9bine<\/h3>\n<p>\n\u00c9tudier ses caract\u00e9ristiques graphiques\net sa place dans le patrimoine marocain.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 08<\/span>\n<h3>Composition<\/h3>\n<p>\nConstruire compositions horizontales,\nverticales, circulaires et architecturales.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 09<\/span>\n<h3>Enluminure<\/h3>\n<p>\nAssocier calligraphie, g\u00e9om\u00e9trie,\nornementation et motifs inspir\u00e9s des arts marocains.\n<\/p>\n<\/div>\n\n<div class=\"module\">\n<span class=\"number\">ATELIER 10<\/span>\n<h3>\u0152uvre signature<\/h3>\n<p>\nCr\u00e9er, chiffrer et pr\u00e9senter une \u0153uvre\ncalligraphique destin\u00e9e \u00e0 un v\u00e9ritable client.\n<\/p>\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- ALPHABET -->\n\n<section class=\"section\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">Entra\u00eenement<\/span>\n\n<h2>\nAlphabet\n<span class=\"gold\">interactif.<\/span>\n<\/h2>\n\n<p class=\"lead\">\nCliquez sur une lettre pour lancer\nun exercice d&#8217;entra\u00eenement.\n<\/p>\n\n<div class=\"alphabet\">\n\n<div class=\"letter\" onclick=\"letter('\u0627','Alif')\"><strong>\u0627<\/strong><small>Alif<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0628','Ba')\"><strong>\u0628<\/strong><small>Ba<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u062a','Ta')\"><strong>\u062a<\/strong><small>Ta<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u062b','Tha')\"><strong>\u062b<\/strong><small>Tha<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u062c','Jim')\"><strong>\u062c<\/strong><small>Jim<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u062d','Ha')\"><strong>\u062d<\/strong><small>Ha<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u062e','Kha')\"><strong>\u062e<\/strong><small>Kha<\/small><\/div>\n\n<div class=\"letter\" onclick=\"letter('\u062f','Dal')\"><strong>\u062f<\/strong><small>Dal<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0630','Dhal')\"><strong>\u0630<\/strong><small>Dhal<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0631','Ra')\"><strong>\u0631<\/strong><small>Ra<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0632','Zay')\"><strong>\u0632<\/strong><small>Zay<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0633','Sin')\"><strong>\u0633<\/strong><small>Sin<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0634','Shin')\"><strong>\u0634<\/strong><small>Shin<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0635','Sad')\"><strong>\u0635<\/strong><small>Sad<\/small><\/div>\n\n<div class=\"letter\" onclick=\"letter('\u0636','Dad')\"><strong>\u0636<\/strong><small>Dad<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0637','Ta')\"><strong>\u0637<\/strong><small>Ta<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0638','Za')\"><strong>\u0638<\/strong><small>Za<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0639','Ayn')\"><strong>\u0639<\/strong><small>Ayn<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u063a','Ghayn')\"><strong>\u063a<\/strong><small>Ghayn<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0641','Fa')\"><strong>\u0641<\/strong><small>Fa<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0642','Qaf')\"><strong>\u0642<\/strong><small>Qaf<\/small><\/div>\n\n<div class=\"letter\" onclick=\"letter('\u0643','Kaf')\"><strong>\u0643<\/strong><small>Kaf<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0644','Lam')\"><strong>\u0644<\/strong><small>Lam<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0645','Mim')\"><strong>\u0645<\/strong><small>Mim<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0646','Nun')\"><strong>\u0646<\/strong><small>Nun<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0647','Ha')\"><strong>\u0647<\/strong><small>Ha<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u0648','Waw')\"><strong>\u0648<\/strong><small>Waw<\/small><\/div>\n<div class=\"letter\" onclick=\"letter('\u064a','Ya')\"><strong>\u064a<\/strong><small>Ya<\/small><\/div>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- STUDIO -->\n\n<section class=\"section studio\" id=\"studio\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">MZA Calligraphy Studio<\/span>\n\n<h2>\nComposez votre\n<span class=\"gold\">\u0153uvre.<\/span>\n<\/h2>\n\n<div class=\"studio-grid\">\n\n<div class=\"tool\">\n\n<h3>\u2712\ufe0f Atelier de composition<\/h3>\n\n<label>Texte arabe<\/label>\n\n<textarea id=\"arabicText\" dir=\"rtl\">\n\u0627\u0644\u0645\u063a\u0631\u0628 \u0632\u064a\u0646\n<\/textarea>\n\n<div class=\"formgrid\">\n\n<div>\n<label>Style<\/label>\n<select id=\"callStyle\">\n<option>Naskh<\/option>\n<option>Thuluth<\/option>\n<option>Maghr\u00e9bi<\/option>\n<option>Diwani<\/option>\n<option>Ruq&#8217;a<\/option>\n<option>Kufi<\/option>\n<\/select>\n<\/div>\n\n<div>\n<label>Taille<\/label>\n<select id=\"callSize\">\n<option value=\"2.5\">Petite<\/option>\n<option value=\"3.5\">Moyenne<\/option>\n<option value=\"4.5\" selected>Grande<\/option>\n<option value=\"6\">Monumentale<\/option>\n<\/select>\n<\/div>\n\n<div>\n<label>Support<\/label>\n<select id=\"support\">\n<option>Papier d&#8217;art<\/option>\n<option>Parchemin<\/option>\n<option>Bois<\/option>\n<option>Toile<\/option>\n<option>C\u00e9ramique<\/option>\n<option>Mur d\u00e9coratif<\/option>\n<\/select>\n<\/div>\n\n<div>\n<label>Composition<\/label>\n<select id=\"composition\">\n<option>Horizontale<\/option>\n<option>Verticale<\/option>\n<option>Carr\u00e9e<\/option>\n<option>Circulaire<\/option>\n<option>Libre<\/option>\n<\/select>\n<\/div>\n\n<\/div>\n\n<br>\n\n<button class=\"btn primary\" onclick=\"generateArt()\">\nG\u00c9N\u00c9RER LA COMPOSITION\n<\/button>\n\n<\/div>\n\n\n<div class=\"tool\">\n\n<h3>\ud83d\uddbc\ufe0f Aper\u00e7u de l&#8217;\u0153uvre<\/h3>\n\n<div class=\"canvas\">\n\n<div class=\"art\" id=\"artPreview\">\n\u0627\u0644\u0645\u063a\u0631\u0628 \u0632\u064a\u0646\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<!-- PRICE ENGINE -->\n\n<div class=\"studio-grid\">\n\n<div class=\"tool\">\n\n<h3>\ud83d\udcd0 Dimensions &#038; production<\/h3>\n\n<div class=\"formgrid\">\n\n<div>\n<label>Largeur (cm)<\/label>\n<input id=\"largeur\" type=\"number\" value=\"60\">\n<\/div>\n\n<div>\n<label>Hauteur (cm)<\/label>\n<input id=\"hauteur\" type=\"number\" value=\"80\">\n<\/div>\n\n<div>\n<label>Temps de travail (h)<\/label>\n<input id=\"temps\" type=\"number\" value=\"12\">\n<\/div>\n\n<div>\n<label>Tarif artiste (MAD\/h)<\/label>\n<input id=\"tarif\" type=\"number\" value=\"120\">\n<\/div>\n\n<div>\n<label>Mat\u00e9riaux (MAD)<\/label>\n<input id=\"materiaux\" type=\"number\" value=\"350\">\n<\/div>\n\n<div>\n<label>Encadrement (MAD)<\/label>\n<input id=\"cadre\" type=\"number\" value=\"450\">\n<\/div>\n\n<div>\n<label>Autres co\u00fbts (MAD)<\/label>\n<input id=\"autres\" type=\"number\" value=\"150\">\n<\/div>\n\n<div>\n<label>Marge (%)<\/label>\n<input id=\"marge\" type=\"number\" value=\"35\">\n<\/div>\n\n<\/div>\n\n<br>\n\n<button class=\"btn primary\" onclick=\"calculateArt()\">\nCALCULER LE PRIX\n<\/button>\n\n<\/div>\n\n\n<div class=\"tool\">\n\n<h3>\ud83d\udcb0 Fiche \u00e9conomique<\/h3>\n\n<div class=\"result\">\n\n<div class=\"metrics\">\n\n<div class=\"metric\">\n<small>Surface<\/small>\n<b id=\"surfaceResult\">0 m\u00b2<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>Main-d&#8217;\u0153uvre<\/small>\n<b id=\"laborResult\">0 MAD<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>Co\u00fbt de revient<\/small>\n<b id=\"costResult\">0 MAD<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>Prix conseill\u00e9<\/small>\n<b id=\"priceResult\">0 MAD<\/b>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<br>\n\n<button class=\"btn secondary\" onclick=\"printArtwork()\">\nIMPRIMER LA FICHE\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- MISSIONS -->\n\n<section class=\"section\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">Missions cr\u00e9atives<\/span>\n\n<h2>\nApprendre en\n<span class=\"gold\">cr\u00e9ant.<\/span>\n<\/h2>\n\n<div class=\"mission-grid\">\n\n<div class=\"mission\">\n\n<div class=\"mission-ar\">\n\u0628\u0633\u0645 \u0627\u0644\u0644\u0647\n<\/div>\n\n<h3>Mission 01 \u00b7 Basmala<\/h3>\n\n<p>\nTravailler rythme, alignement,\nproportions et \u00e9quilibre d&#8217;une premi\u00e8re composition.\n<\/p>\n\n<button class=\"btn primary\"\nonclick=\"mission('\u0628\u0633\u0645 \u0627\u0644\u0644\u0647 \u0627\u0644\u0631\u062d\u0645\u0646 \u0627\u0644\u0631\u062d\u064a\u0645','Naskh')\">\nLANCER\n<\/button>\n\n<\/div>\n\n\n<div class=\"mission\">\n\n<div class=\"mission-ar\">\n\u0627\u0644\u0645\u063a\u0631\u0628\n<\/div>\n\n<h3>Mission 02 \u00b7 Maroc<\/h3>\n\n<p>\nCr\u00e9er une composition inspir\u00e9e\nde la tradition calligraphique maghr\u00e9bine.\n<\/p>\n\n<button class=\"btn primary\"\nonclick=\"mission('\u0627\u0644\u0645\u063a\u0631\u0628','Maghr\u00e9bi')\">\nLANCER\n<\/button>\n\n<\/div>\n\n\n<div class=\"mission\">\n\n<div class=\"mission-ar\">\n\u0627\u0644\u0639\u0644\u0645 \u0646\u0648\u0631\n<\/div>\n\n<h3>Mission 03 \u00b7 Le savoir est lumi\u00e8re<\/h3>\n\n<p>\nCr\u00e9er une \u0153uvre destin\u00e9e \u00e0\nla biblioth\u00e8que d&#8217;un \u00e9tablissement culturel.\n<\/p>\n\n<button class=\"btn primary\"\nonclick=\"mission('\u0627\u0644\u0639\u0644\u0645 \u0646\u0648\u0631','Thuluth')\">\nLANCER\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- QCM -->\n\n<section class=\"section\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">\u00c9valuation<\/span>\n\n<h2>\nQCM\n<span class=\"gold\">Calligraphie.<\/span>\n<\/h2>\n\n<div class=\"question\">\n\n<strong>\n1 \u00b7 Quel outil traditionnel est associ\u00e9 \u00e0 l&#8217;\u00e9criture calligraphique ?\n<\/strong>\n\n<button class=\"answer\" onclick=\"callQuiz(this,true)\">\nLe qalam.\n<\/button>\n\n<button class=\"answer\" onclick=\"callQuiz(this,false)\">\nLe marteau.\n<\/button>\n\n<button class=\"answer\" onclick=\"callQuiz(this,false)\">\nLe compas uniquement.\n<\/button>\n\n<\/div>\n\n\n<div class=\"question\">\n\n<strong>\n2 \u00b7 Quel style appartient particuli\u00e8rement \u00e0 la tradition du Maghreb ?\n<\/strong>\n\n<button class=\"answer\" onclick=\"callQuiz(this,false)\">\nDiwani.\n<\/button>\n\n<button class=\"answer\" onclick=\"callQuiz(this,true)\">\nMaghr\u00e9bi.\n<\/button>\n\n<button class=\"answer\" onclick=\"callQuiz(this,false)\">\nRuq&#8217;a.\n<\/button>\n\n<\/div>\n\n\n<div class=\"question\">\n\n<strong>\n3 \u00b7 Pourquoi \u00e9tudier les proportions ?\n<\/strong>\n\n<button class=\"answer\" onclick=\"callQuiz(this,true)\">\nPour construire les lettres de mani\u00e8re coh\u00e9rente.\n<\/button>\n\n<button class=\"answer\" onclick=\"callQuiz(this,false)\">\nUniquement pour calculer le prix du papier.\n<\/button>\n\n<button class=\"answer\" onclick=\"callQuiz(this,false)\">\nElles ne servent pas en calligraphie.\n<\/button>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- MASTER -->\n\n<section class=\"section master\">\n<div class=\"wrap\">\n\n<div class=\"master-box\">\n\n<span class=\"eyebrow\">\nEXAMEN FINAL \u00b7 COLLECTION PRESTIGE ROYAL\n<\/span>\n\n<div class=\"arabic-title\">\n\u062d\u0631\u0648\u0641 \u0645\u0646 \u0627\u0644\u0645\u063a\u0631\u0628\n<\/div>\n\n<h2>\nLETTRES\n<span class=\"gold\">DU MAROC<\/span>\n<\/h2>\n\n<p class=\"lead\">\nCr\u00e9er une collection de douze \u0153uvres originales associant\ncalligraphie arabe, h\u00e9ritage marocain, g\u00e9om\u00e9trie,\nornementation et cr\u00e9ation contemporaine.\n<\/p>\n\n<div class=\"stats\">\n\n<div class=\"stat\">\n<strong>12<\/strong>\n\u0152uvres\n<\/div>\n\n<div class=\"stat\">\n<strong>6<\/strong>\nStyles\n<\/div>\n\n<div class=\"stat\">\n<strong>1<\/strong>\nCatalogue\n<\/div>\n\n<div class=\"stat\">\n<strong>1<\/strong>\nExposition\n<\/div>\n\n<\/div>\n\n<div class=\"actions\" style=\"justify-content:center\">\n\n<button class=\"btn primary\"\nonclick=\"masterCalligraphy()\">\n\ud83d\udc51 COMMENCER LE MASTER PROJECT\n<\/button>\n\n<button class=\"btn secondary\"\nonclick=\"window.print()\">\nIMPRIMER LE DOSSIER\n<\/button>\n\n<\/div>\n\n<\/div>\n<\/div>\n<\/section>\n\n\n<div class=\"toast\" id=\"callToast\"><\/div>\n\n<\/div>\n\n\n<script>\n(function(){\n\nfunction toast(text){\n\n var t=document.getElementById(\"callToast\");\n\n t.innerHTML=text;\n t.style.display=\"block\";\n\n setTimeout(function(){\n  t.style.display=\"none\";\n },3200);\n\n}\n\n\nwindow.callGo=function(id){\n\n var element=document.getElementById(id);\n\n if(element){\n  element.scrollIntoView({\n   behavior:\"smooth\",\n   block:\"start\"\n  });\n }\n\n};\n\n\nwindow.letter=function(ar,name){\n\n document.getElementById(\"arabicText\").value=\n ar+\"   \"+ar+\"   \"+ar+\"   \"+ar;\n\n generateArt();\n\n callGo(\"studio\");\n\n setTimeout(function(){\n  toast(\n   \"\u2712\ufe0f EXERCICE \"+name+\n   \" \u00b7 Observez la forme puis r\u00e9p\u00e9tez le geste.\"\n  );\n },500);\n\n};\n\n\nwindow.generateArt=function(){\n\n var text=\n document.getElementById(\"arabicText\").value;\n\n var size=\n document.getElementById(\"callSize\").value;\n\n var composition=\n document.getElementById(\"composition\").value;\n\n var preview=\n document.getElementById(\"artPreview\");\n\n preview.innerText=text;\n\n preview.style.fontSize=\n size+\"rem\";\n\n if(composition===\"Verticale\"){\n  preview.style.maxWidth=\"260px\";\n }else{\n  preview.style.maxWidth=\"100%\";\n }\n\n toast(\"\u2713 Composition actualis\u00e9e.\");\n\n};\n\n\nfunction mad(value){\n\n return new Intl.NumberFormat(\n  \"fr-FR\",\n  {maximumFractionDigits:0}\n ).format(value)+\" MAD\";\n\n}\n\n\nwindow.calculateArt=function(){\n\n var w=\n parseFloat(document.getElementById(\"largeur\").value)||0;\n\n var h=\n parseFloat(document.getElementById(\"hauteur\").value)||0;\n\n var time=\n parseFloat(document.getElementById(\"temps\").value)||0;\n\n var rate=\n parseFloat(document.getElementById(\"tarif\").value)||0;\n\n var materials=\n parseFloat(document.getElementById(\"materiaux\").value)||0;\n\n var frame=\n parseFloat(document.getElementById(\"cadre\").value)||0;\n\n var other=\n parseFloat(document.getElementById(\"autres\").value)||0;\n\n var margin=\n parseFloat(document.getElementById(\"marge\").value)||0;\n\n var surface=\n (w\/100)*(h\/100);\n\n var labor=\n time*rate;\n\n var cost=\n labor+materials+frame+other;\n\n var price=\n cost*(1+margin\/100);\n\n document.getElementById(\"surfaceResult\").innerText=\n surface.toFixed(2)+\" m\u00b2\";\n\n document.getElementById(\"laborResult\").innerText=\n mad(labor);\n\n document.getElementById(\"costResult\").innerText=\n mad(cost);\n\n document.getElementById(\"priceResult\").innerText=\n mad(price);\n\n toast(\"\u2713 Fiche \u00e9conomique calcul\u00e9e.\");\n\n};\n\n\nwindow.mission=function(text,style){\n\n document.getElementById(\"arabicText\").value=\n text;\n\n document.getElementById(\"callStyle\").value=\n style;\n\n generateArt();\n\n callGo(\"studio\");\n\n setTimeout(function(){\n  toast(\n   \"MISSION ACTIV\u00c9E \u00b7 Commencez par \u00e9tudier la composition.\"\n  );\n },500);\n\n};\n\n\nwindow.callQuiz=function(button,correct){\n\n var parent=button.parentElement;\n\n var buttons=\n parent.querySelectorAll(\".answer\");\n\n buttons.forEach(function(b){\n  b.disabled=true;\n });\n\n if(correct){\n\n  button.classList.add(\"good\");\n\n  toast(\"\u2713 Bonne r\u00e9ponse.\");\n\n }else{\n\n  button.classList.add(\"bad\");\n\n  buttons.forEach(function(b){\n\n   var click=\n   b.getAttribute(\"onclick\")||\"\";\n\n   if(click.indexOf(\"true\")>-1){\n    b.classList.add(\"good\");\n   }\n\n  });\n\n  toast(\"Correction affich\u00e9e.\");\n\n }\n\n};\n\n\nwindow.masterCalligraphy=function(){\n\n document.getElementById(\"arabicText\").value=\n \"\u062d\u0631\u0648\u0641 \u0645\u0646 \u0627\u0644\u0645\u063a\u0631\u0628\";\n\n document.getElementById(\"callStyle\").value=\n \"Maghr\u00e9bi\";\n\n generateArt();\n\n callGo(\"studio\");\n\n setTimeout(function(){\n\n  toast(\n   \"\ud83d\udc51 MASTER PROJECT ACTIV\u00c9 \u00b7 \u0152UVRE 01\/12 \u00b7 Cr\u00e9ez votre premi\u00e8re composition.\"\n  );\n\n },500);\n\n};\n\n\nwindow.printArtwork=function(){\n\n window.print();\n\n};\n\n\ncalculateArt();\ngenerateArt();\n\n})();\n<\/script>\n\n\n\n<!-- =========================================================\n MZA CALLIGRAPHY ART GENERATOR\n GENERATEUR DE TABLEAUX CALLIGRAPHIQUES\n========================================================= -->\n\n<style>\n#mza-call-art{\n  margin-top:35px;\n  padding:32px;\n  border-radius:28px;\n  background:\n    radial-gradient(circle at 85% 10%,rgba(218,180,90,.12),transparent 28%),\n    linear-gradient(145deg,#0c1712,#07100d);\n  border:1px solid rgba(218,180,90,.25);\n  color:white;\n  font-family:Arial,Tahoma,sans-serif;\n}\n\n#mza-call-art *{box-sizing:border-box}\n\n#mza-call-art .ca-head{\n  margin-bottom:28px;\n}\n\n#mza-call-art .ca-head small{\n  color:#f0d28a;\n  font-weight:900;\n  letter-spacing:.14em;\n}\n\n#mza-call-art .ca-head h2{\n  margin:8px 0;\n  font-size:clamp(2rem,4vw,3.4rem);\n}\n\n#mza-call-art .ca-head p{\n  color:#c7beae;\n  max-width:850px;\n}\n\n#mza-call-art .ca-layout{\n  display:grid;\n  grid-template-columns:.85fr 1.15fr;\n  gap:24px;\n}\n\n#mza-call-art .ca-panel{\n  padding:24px;\n  border-radius:22px;\n  background:#101e18;\n  border:1px solid rgba(218,180,90,.17);\n}\n\n#mza-call-art label{\n  display:block;\n  margin:12px 0 5px;\n  font-size:.84rem;\n  font-weight:800;\n  color:#ded6c7;\n}\n\n#mza-call-art textarea,\n#mza-call-art select,\n#mza-call-art input{\n  width:100%;\n  padding:12px 13px;\n  border-radius:11px;\n  border:1px solid rgba(255,255,255,.12);\n  background:#07100d;\n  color:white;\n  outline:none;\n}\n\n#mza-call-art textarea{\n  min-height:105px;\n  resize:vertical;\n  font-size:1.3rem;\n  direction:rtl;\n}\n\n#mza-call-art .ca-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n}\n\n#mza-call-art .ca-btn{\n  width:100%;\n  margin-top:15px;\n  padding:14px;\n  border-radius:13px;\n  border:0;\n  cursor:pointer;\n  font-weight:900;\n  background:linear-gradient(135deg,#f3d88e,#d8b25d);\n  color:#07100d;\n}\n\n#mza-call-art .ca-btn.alt{\n  background:#15271f;\n  color:white;\n  border:1px solid rgba(218,180,90,.27);\n}\n\n#mza-call-art .ca-stage{\n  min-height:640px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  padding:28px;\n  border-radius:24px;\n  background:#050907;\n  overflow:hidden;\n}\n\n#mza-call-art .ca-frame{\n  width:min(100%,620px);\n  aspect-ratio:4\/5;\n  padding:18px;\n  background:#6e5128;\n  box-shadow:0 30px 65px rgba(0,0,0,.45);\n  transition:.3s;\n}\n\n#mza-call-art .ca-mat{\n  width:100%;\n  height:100%;\n  padding:22px;\n  background:#e9dec4;\n}\n\n#mza-call-art .ca-artboard{\n  width:100%;\n  height:100%;\n  position:relative;\n  overflow:hidden;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  padding:55px;\n  background:#f5eddb;\n}\n\n#mza-call-art .ca-border{\n  position:absolute;\n  inset:20px;\n  pointer-events:none;\n  border:2px solid rgba(111,78,29,.25);\n}\n\n#mza-call-art .ca-corners{\n  position:absolute;\n  inset:32px;\n  pointer-events:none;\n}\n\n#mza-call-art .corner{\n  position:absolute;\n  width:70px;\n  height:70px;\n  border-color:#b68c3c;\n}\n\n#mza-call-art .tl{\n  left:0;top:0;\n  border-left:3px solid;\n  border-top:3px solid;\n}\n\n#mza-call-art .tr{\n  right:0;top:0;\n  border-right:3px solid;\n  border-top:3px solid;\n}\n\n#mza-call-art .bl{\n  left:0;bottom:0;\n  border-left:3px solid;\n  border-bottom:3px solid;\n}\n\n#mza-call-art .br{\n  right:0;bottom:0;\n  border-right:3px solid;\n  border-bottom:3px solid;\n}\n\n#mza-call-art .ca-text{\n  position:relative;\n  z-index:5;\n  width:100%;\n  text-align:center;\n  direction:rtl;\n  white-space:pre-wrap;\n  word-break:break-word;\n  font-family:\"Traditional Arabic\",\"Amiri\",\"Scheherazade New\",serif;\n  font-size:4.4rem;\n  line-height:1.45;\n  color:#17110b;\n}\n\n#mza-call-art .ca-subtitle{\n  position:absolute;\n  left:0;\n  right:0;\n  bottom:38px;\n  text-align:center;\n  letter-spacing:.12em;\n  font-size:.68rem;\n  color:rgba(30,20,10,.55);\n  font-weight:900;\n}\n\n#mza-call-art .ca-info{\n  margin-top:14px;\n  padding:15px;\n  border-radius:14px;\n  background:#07100d;\n  color:#c8bfaf;\n  line-height:1.6;\n}\n\n#mza-call-art .ca-info strong{\n  color:#f2d78e;\n}\n\n#mza-call-art .palette{\n  display:flex;\n  gap:8px;\n  flex-wrap:wrap;\n  margin-top:8px;\n}\n\n#mza-call-art .swatch{\n  width:34px;\n  height:34px;\n  border-radius:50%;\n  border:2px solid rgba(255,255,255,.45);\n  cursor:pointer;\n}\n\n@media(max-width:900px){\n  #mza-call-art .ca-layout{\n    grid-template-columns:1fr;\n  }\n}\n\n@media(max-width:600px){\n  #mza-call-art{\n    padding:18px;\n  }\n\n  #mza-call-art .ca-grid{\n    grid-template-columns:1fr;\n  }\n\n  #mza-call-art .ca-stage{\n    min-height:460px;\n    padding:12px;\n  }\n\n  #mza-call-art .ca-text{\n    font-size:2.8rem;\n  }\n\n  #mza-call-art .ca-artboard{\n    padding:35px 24px;\n  }\n}\n<\/style>\n\n\n<section id=\"mza-call-art\">\n\n<div class=\"ca-head\">\n  <small>MZA CALLIGRAPHY STUDIO \u00b7 PRESTIGE ROYAL<\/small>\n\n  <h2>\n    G\u00e9n\u00e9rateur de tableaux\n    <span style=\"color:#f2d78e\">calligraphiques<\/span>\n  <\/h2>\n\n  <p>\n    \u00c9crivez votre texte arabe, choisissez l&#8217;univers visuel,\n    la composition, le cadre et les couleurs, puis cr\u00e9ez\n    votre tableau imm\u00e9diatement.\n  <\/p>\n<\/div>\n\n\n<div class=\"ca-layout\">\n\n\n<!-- COMMANDES -->\n\n<div class=\"ca-panel\">\n\n<h3>\u2712\ufe0f Cr\u00e9er le tableau<\/h3>\n\n<label>Texte calligraphique<\/label>\n\n<textarea id=\"caText\">\u0627\u0644\u0645\u063a\u0631\u0628 \u0632\u064a\u0646<\/textarea>\n\n\n<div class=\"ca-grid\">\n\n<div>\n<label>Style<\/label>\n<select id=\"caStyle\">\n  <option value=\"maghrebi\">Maghr\u00e9bi<\/option>\n  <option value=\"naskh\">Naskh<\/option>\n  <option value=\"thuluth\">Thuluth<\/option>\n  <option value=\"diwani\">Diwani<\/option>\n  <option value=\"kufi\">Kufi contemporain<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Composition<\/label>\n<select id=\"caComposition\">\n  <option value=\"center\">Centr\u00e9e<\/option>\n  <option value=\"vertical\">Verticale<\/option>\n  <option value=\"circle\">Circulaire<\/option>\n  <option value=\"diagonal\">Diagonale<\/option>\n  <option value=\"minimal\">Minimaliste<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Format<\/label>\n<select id=\"caFormat\">\n  <option value=\"portrait\">Portrait<\/option>\n  <option value=\"square\">Carr\u00e9<\/option>\n  <option value=\"landscape\">Paysage<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Univers<\/label>\n<select id=\"caTheme\">\n  <option value=\"royal\">Prestige Royal<\/option>\n  <option value=\"fes\">F\u00e8s<\/option>\n  <option value=\"marrakech\">Marrakech<\/option>\n  <option value=\"atlas\">Atlas<\/option>\n  <option value=\"andalou\">Andalou<\/option>\n  <option value=\"minimal\">Contemporain<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Encadrement<\/label>\n<select id=\"caFrame\">\n  <option value=\"walnut\">Bois fonc\u00e9<\/option>\n  <option value=\"gold\">Dor\u00e9<\/option>\n  <option value=\"black\">Noir<\/option>\n  <option value=\"white\">Ivoire<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Taille du texte<\/label>\n<input\n  id=\"caSize\"\n  type=\"range\"\n  min=\"45\"\n  max=\"110\"\n  value=\"72\"\n>\n<\/div>\n\n<\/div>\n\n\n<label>Couleur de calligraphie<\/label>\n\n<div class=\"palette\">\n\n<button class=\"swatch\"\nstyle=\"background:#17110b\"\nonclick=\"caSetInk('#17110b')\"><\/button>\n\n<button class=\"swatch\"\nstyle=\"background:#15583f\"\nonclick=\"caSetInk('#15583f')\"><\/button>\n\n<button class=\"swatch\"\nstyle=\"background:#9b2e2e\"\nonclick=\"caSetInk('#9b2e2e')\"><\/button>\n\n<button class=\"swatch\"\nstyle=\"background:#1f477b\"\nonclick=\"caSetInk('#1f477b')\"><\/button>\n\n<button class=\"swatch\"\nstyle=\"background:#b48b36\"\nonclick=\"caSetInk('#b48b36')\"><\/button>\n\n<\/div>\n\n\n<button class=\"ca-btn\" onclick=\"caGenerate()\">\n\u2728 G\u00c9N\u00c9RER LE TABLEAU\n<\/button>\n\n<button class=\"ca-btn alt\" onclick=\"caRandom()\">\n\ud83c\udfb2 SURPRENDS-MOI\n<\/button>\n\n<button class=\"ca-btn alt\" onclick=\"caDownloadSVG()\">\n\u2b07 ENREGISTRER EN SVG\n<\/button>\n\n<button class=\"ca-btn alt\" onclick=\"window.print()\">\n\ud83d\udda8\ufe0f IMPRIMER\n<\/button>\n\n<\/div>\n\n\n<!-- TABLEAU -->\n\n<div>\n\n<div class=\"ca-stage\">\n\n<div class=\"ca-frame\" id=\"caFrameBox\">\n\n<div class=\"ca-mat\">\n\n<div class=\"ca-artboard\" id=\"caBoard\">\n\n<div class=\"ca-border\"><\/div>\n\n<div class=\"ca-corners\">\n  <div class=\"corner tl\"><\/div>\n  <div class=\"corner tr\"><\/div>\n  <div class=\"corner bl\"><\/div>\n  <div class=\"corner br\"><\/div>\n<\/div>\n\n<div class=\"ca-text\" id=\"caPreview\">\n\u0627\u0644\u0645\u063a\u0631\u0628 \u0632\u064a\u0646\n<\/div>\n\n<div class=\"ca-subtitle\">\nMZA CALLIGRAPHY COLLECTION\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n\n<div class=\"ca-info\" id=\"caInfo\">\n\n<strong>TABLEAU MZA<\/strong><br>\nStyle : Maghr\u00e9bi \u00b7 Prestige Royal\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<script>\n(function(){\n\nlet ink=\"#17110b\";\n\n\nconst THEMES={\n\n royal:{\n   bg:\"#f3ead3\",\n   mat:\"#e6d8b8\",\n   border:\"#b38a3e\"\n },\n\n fes:{\n   bg:\"#f4efdf\",\n   mat:\"#dce8df\",\n   border:\"#30694f\"\n },\n\n marrakech:{\n   bg:\"#efe0cf\",\n   mat:\"#e8cab6\",\n   border:\"#9b4f37\"\n },\n\n atlas:{\n   bg:\"#eee5d2\",\n   mat:\"#ddd0ae\",\n   border:\"#7f3d35\"\n },\n\n andalou:{\n   bg:\"#eff3ed\",\n   mat:\"#dbe4dc\",\n   border:\"#315f5e\"\n },\n\n minimal:{\n   bg:\"#f5f5f2\",\n   mat:\"#ebebe7\",\n   border:\"#333\"\n }\n\n};\n\n\nconst FRAMES={\n walnut:\"#604527\",\n gold:\"#b99345\",\n black:\"#171717\",\n white:\"#e9e5d9\"\n};\n\n\nfunction el(id){\n return document.getElementById(id);\n}\n\n\nwindow.caSetInk=function(color){\n ink=color;\n caGenerate();\n};\n\n\nfunction applyFormat(format){\n\n const frame=el(\"caFrameBox\");\n\n if(format===\"portrait\"){\n   frame.style.aspectRatio=\"4 \/ 5\";\n   frame.style.width=\"min(100%,620px)\";\n }\n\n if(format===\"square\"){\n   frame.style.aspectRatio=\"1 \/ 1\";\n   frame.style.width=\"min(100%,620px)\";\n }\n\n if(format===\"landscape\"){\n   frame.style.aspectRatio=\"5 \/ 4\";\n   frame.style.width=\"min(100%,720px)\";\n }\n\n}\n\n\nfunction applyComposition(type){\n\n const preview=el(\"caPreview\");\n\n preview.style.transform=\"none\";\n preview.style.maxWidth=\"100%\";\n preview.style.writingMode=\"horizontal-tb\";\n preview.style.letterSpacing=\"normal\";\n\n if(type===\"center\"){\n   preview.style.textAlign=\"center\";\n }\n\n if(type===\"vertical\"){\n   preview.style.maxWidth=\"300px\";\n   preview.style.lineHeight=\"1.7\";\n }\n\n if(type===\"circle\"){\n   preview.style.maxWidth=\"420px\";\n   preview.style.padding=\"55px\";\n   preview.style.borderRadius=\"50%\";\n   preview.style.border=\"2px solid rgba(180,140,60,.25)\";\n }\n\n if(type===\"diagonal\"){\n   preview.style.transform=\"rotate(-8deg)\";\n }\n\n if(type===\"minimal\"){\n   preview.style.maxWidth=\"80%\";\n   preview.style.lineHeight=\"1.8\";\n   preview.style.letterSpacing=\".02em\";\n }\n\n}\n\n\nwindow.caGenerate=function(){\n\n const text=el(\"caText\").value.trim() || \"\u0627\u0644\u0645\u063a\u0631\u0628 \u0632\u064a\u0646\";\n const style=el(\"caStyle\").value;\n const composition=el(\"caComposition\").value;\n const format=el(\"caFormat\").value;\n const themeName=el(\"caTheme\").value;\n const frameName=el(\"caFrame\").value;\n const size=parseInt(el(\"caSize\").value);\n\n const theme=THEMES[themeName];\n\n const board=el(\"caBoard\");\n const preview=el(\"caPreview\");\n const frame=el(\"caFrameBox\");\n\n preview.innerText=text;\n preview.style.color=ink;\n preview.style.fontSize=size+\"px\";\n\n board.style.background=\n   \"radial-gradient(circle at center,\"+\n   theme.bg+\",#f8f4e8 80%)\";\n\n document.querySelector(\"#mza-call-art .ca-mat\")\n .style.background=theme.mat;\n\n frame.style.background=FRAMES[frameName];\n\n document.querySelectorAll(\"#mza-call-art .corner\")\n .forEach(function(c){\n   c.style.borderColor=theme.border;\n });\n\n applyFormat(format);\n applyComposition(composition);\n\n\n const styleNames={\n   maghrebi:\"Maghr\u00e9bi\",\n   naskh:\"Naskh\",\n   thuluth:\"Thuluth\",\n   diwani:\"Diwani\",\n   kufi:\"Kufi contemporain\"\n };\n\n\n const themeNames={\n   royal:\"Prestige Royal\",\n   fes:\"F\u00e8s\",\n   marrakech:\"Marrakech\",\n   atlas:\"Atlas\",\n   andalou:\"Andalou\",\n   minimal:\"Contemporain\"\n };\n\n\n el(\"caInfo\").innerHTML=\n \"<strong>TABLEAU MZA \u00b7 \"+\n styleNames[style]+\"<\/strong><br>\"+\n \"Univers : \"+themeNames[themeName]+\n \" \u00b7 Composition : \"+composition+\n \" \u00b7 Format : \"+format+\n \"<br><span style='color:#f2d78e'>VISUEL PR\u00caT POUR IMPRESSION<\/span>\";\n\n};\n\n\nwindow.caRandom=function(){\n\n const ids=[\n   \"caStyle\",\n   \"caComposition\",\n   \"caFormat\",\n   \"caTheme\",\n   \"caFrame\"\n ];\n\n ids.forEach(function(id){\n\n   const x=el(id);\n\n   x.selectedIndex=\n   Math.floor(Math.random()*x.options.length);\n\n });\n\n\n const inks=[\n \"#17110b\",\n \"#15583f\",\n \"#9b2e2e\",\n \"#1f477b\",\n \"#b48b36\"\n ];\n\n ink=\n inks[Math.floor(Math.random()*inks.length)];\n\n\n const texts=[\n \"\u0627\u0644\u0645\u063a\u0631\u0628 \u0632\u064a\u0646\",\n \"\u0627\u0644\u0639\u0644\u0645 \u0646\u0648\u0631\",\n \"\u0627\u0644\u0635\u0628\u0631 \u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0641\u0631\u062c\",\n \"\u0627\u0644\u0633\u0644\u0627\u0645\",\n \"\u0627\u0644\u062d\u0645\u062f \u0644\u0644\u0647\",\n \"\u0627\u0644\u062c\u0645\u0627\u0644 \u0641\u064a \u0627\u0644\u0628\u0633\u0627\u0637\u0629\",\n \"\u0645\u0646 \u062c\u062f \u0648\u062c\u062f\"\n ];\n\n el(\"caText\").value=\n texts[Math.floor(Math.random()*texts.length)];\n\n\n el(\"caSize\").value=\n 55+Math.floor(Math.random()*45);\n\n\n caGenerate();\n\n};\n\n\nwindow.caDownloadSVG=function(){\n\n const text=\n el(\"caText\").value || \"\u0627\u0644\u0645\u063a\u0631\u0628 \u0632\u064a\u0646\";\n\n const size=\n parseInt(el(\"caSize\").value);\n\n const theme=\n THEMES[el(\"caTheme\").value];\n\n const svg=`\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\nwidth=\"1600\"\nheight=\"2000\"\nviewBox=\"0 0 1600 2000\">\n\n<rect width=\"1600\" height=\"2000\"\nfill=\"${theme.bg}\"\/>\n\n<rect\nx=\"80\"\ny=\"80\"\nwidth=\"1440\"\nheight=\"1840\"\nfill=\"none\"\nstroke=\"${theme.border}\"\nstroke-width=\"8\"\/>\n\n<rect\nx=\"120\"\ny=\"120\"\nwidth=\"1360\"\nheight=\"1760\"\nfill=\"none\"\nstroke=\"${theme.border}\"\nstroke-width=\"3\"\nopacity=\".45\"\/>\n\n<text\nx=\"800\"\ny=\"1000\"\ntext-anchor=\"middle\"\ndominant-baseline=\"middle\"\ndirection=\"rtl\"\nfill=\"${ink}\"\nfont-size=\"${size*2.4}\"\nfont-family=\"Traditional Arabic, serif\">\n\n${text\n.replace(\/&\/g,\"&amp;\")\n.replace(\/<\/g,\"&lt;\")\n.replace(\/>\/g,\"&gt;\")}\n\n<\/text>\n\n<text\nx=\"800\"\ny=\"1850\"\ntext-anchor=\"middle\"\nfill=\"${theme.border}\"\nfont-size=\"28\"\nfont-family=\"Arial\"\nletter-spacing=\"7\">\n\nMZA CALLIGRAPHY COLLECTION\n\n<\/text>\n\n<\/svg>\n`;\n\n\n const blob=\n new Blob(\n   [svg],\n   {type:\"image\/svg+xml;charset=utf-8\"}\n );\n\n const url=\n URL.createObjectURL(blob);\n\n const a=\n document.createElement(\"a\");\n\n a.href=url;\n a.download=\"MZA-Tableau-Calligraphie.svg\";\n\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n\n URL.revokeObjectURL(url);\n\n};\n\n\n[\n \"caText\",\n \"caStyle\",\n \"caComposition\",\n \"caFormat\",\n \"caTheme\",\n \"caFrame\",\n \"caSize\"\n].forEach(function(id){\n\n el(id).addEventListener(\n   id===\"caText\" ? \"input\" : \"change\",\n   caGenerate\n );\n\n});\n\n\ncaGenerate();\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\uddf2\ud83c\udde6 MAROC ZAIN ACADEMY \u00b7 M\u00c9TIERS D&#8217;ART \u0641\u0646 \u0627\u0644\u062e\u0637 \u0627\u0644\u0639\u0631\u0628\u064a \u0648\u0627\u0644\u0645\u063a\u0631\u0628\u064a Calligraphie Arabe &#038; Marocaine Apprendre le geste, comprendre les proportions, ma\u00eetriser le qalam et explorer les grandes traditions calligraphiques arabes et maghr\u00e9bines avant de cr\u00e9er ses propres \u0153uvres contemporaines. COMMENCER L&#8217;ATELIER OUVRIR CALLIGRAPHY STUDIO Patrimoine \u00b7 geste \u00b7 g\u00e9om\u00e9trie \u00b7 cr\u00e9ation De la premi\u00e8re [&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-1842","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/comments?post=1842"}],"version-history":[{"count":2,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1842\/revisions"}],"predecessor-version":[{"id":1846,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1842\/revisions\/1846"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/media?parent=1842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}