{"id":1839,"date":"2026-09-07T23:08:54","date_gmt":"2026-09-07T23:08:54","guid":{"rendered":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/?page_id=1839"},"modified":"2026-09-07T23:16:25","modified_gmt":"2026-09-07T23:16:25","slug":"atelier-bijoux-marocains","status":"publish","type":"page","link":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/atelier-bijoux-marocains\/","title":{"rendered":"Atelier Bijoux Marocains"},"content":{"rendered":"\n<!-- =========================================================\n MZA ACADEMY\n ATELIER BIJOUX MAROCAINS \u2014 PRESTIGE ROYAL\n WordPress \/ Elementor HTML\n========================================================= -->\n\n<style>\n#mza-jewel{\n --bg:#080d0b;\n --panel:#101b17;\n --panel2:#16261f;\n --green:#173c30;\n --gold:#d8b25d;\n --gold2:#f2d78e;\n --cream:#f7f0df;\n --text:#faf7ef;\n --muted:#c9c2b4;\n --border:rgba(216,178,93,.20);\n --shadow:0 22px 60px rgba(0,0,0,.32);\n font-family:Arial,Helvetica,sans-serif;\n background:var(--bg);\n color:var(--text);\n line-height:1.6;\n width:100%;\n overflow:hidden;\n}\n\n#mza-jewel *{box-sizing:border-box}\n\n#mza-jewel .wrap{\n width:min(1240px,92%);\n margin:auto;\n}\n\n#mza-jewel .section{\n padding:85px 0;\n}\n\n#mza-jewel h1,\n#mza-jewel h2,\n#mza-jewel h3{\n margin-top:0;\n}\n\n#mza-jewel h1{\n font-size:clamp(3rem,7vw,6.4rem);\n line-height:.92;\n letter-spacing:-.05em;\n margin:22px 0;\n}\n\n#mza-jewel h2{\n font-size:clamp(2rem,4vw,3.8rem);\n line-height:1.05;\n margin:10px 0 18px;\n}\n\n#mza-jewel .gold{color:var(--gold2)}\n\n#mza-jewel .eyebrow{\n color:var(--gold2);\n font-weight:900;\n font-size:.78rem;\n letter-spacing:.16em;\n text-transform:uppercase;\n}\n\n#mza-jewel .lead{\n max-width:850px;\n color:var(--muted);\n font-size:1.08rem;\n}\n\n\/* HERO *\/\n\n#mza-jewel .hero{\n min-height:92vh;\n display:flex;\n align-items:center;\n background:\n linear-gradient(90deg,rgba(4,10,8,.96),rgba(4,10,8,.58)),\n url(\"https:\/\/images.unsplash.com\/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1900&q=85\")\n center\/cover no-repeat;\n}\n\n#mza-jewel .hero-content{\n max-width:850px;\n padding:100px 0;\n}\n\n#mza-jewel .badge{\n display:inline-block;\n padding:9px 16px;\n border-radius:999px;\n border:1px solid rgba(216,178,93,.45);\n color:var(--gold2);\n background:rgba(0,0,0,.3);\n font-weight:900;\n font-size:.78rem;\n letter-spacing:.09em;\n}\n\n#mza-jewel .actions{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-top:28px;\n}\n\n#mza-jewel button{\n font-family:inherit;\n}\n\n#mza-jewel .btn{\n border:0;\n border-radius:14px;\n padding:15px 22px;\n font-weight:900;\n cursor:pointer;\n transition:.25s;\n}\n\n#mza-jewel .btn:hover{\n transform:translateY(-3px);\n}\n\n#mza-jewel .primary{\n background:linear-gradient(135deg,var(--gold2),var(--gold));\n color:#09110d;\n}\n\n#mza-jewel .secondary{\n background:rgba(255,255,255,.05);\n color:white;\n border:1px solid rgba(255,255,255,.18);\n}\n\n\/* STATS *\/\n\n#mza-jewel .stats{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:15px;\n margin-top:38px;\n}\n\n#mza-jewel .stat{\n text-align:center;\n padding:25px 15px;\n border-radius:20px;\n background:linear-gradient(145deg,var(--panel),#0c1511);\n border:1px solid var(--border);\n}\n\n#mza-jewel .stat strong{\n display:block;\n color:var(--gold2);\n font-size:2rem;\n}\n\n\/* CARDS *\/\n\n#mza-jewel .grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:18px;\n margin-top:38px;\n}\n\n#mza-jewel .card{\n border-radius:24px;\n overflow:hidden;\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-jewel .card:hover{\n transform:translateY(-5px);\n border-color:rgba(216,178,93,.5);\n}\n\n#mza-jewel .card img{\n width:100%;\n height:210px;\n object-fit:cover;\n display:block;\n}\n\n#mza-jewel .cardbody{\n padding:24px;\n}\n\n#mza-jewel .num{\n color:var(--gold2);\n font-size:.76rem;\n letter-spacing:.13em;\n font-weight:900;\n}\n\n#mza-jewel .card h3{\n margin:7px 0;\n font-size:1.3rem;\n}\n\n#mza-jewel .card p{\n color:var(--muted);\n margin-bottom:0;\n}\n\n\/* COLLECTION *\/\n\n#mza-jewel .collection{\n background:#0d1612;\n}\n\n#mza-jewel .collection-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:15px;\n margin-top:35px;\n}\n\n#mza-jewel .piece{\n padding:25px;\n border-radius:20px;\n background:var(--panel);\n border:1px solid var(--border);\n}\n\n#mza-jewel .piece-icon{\n font-size:2rem;\n}\n\n#mza-jewel .piece h3{\n margin:10px 0 5px;\n}\n\n#mza-jewel .piece p{\n color:var(--muted);\n font-size:.92rem;\n}\n\n\/* ENGINE *\/\n\n#mza-jewel .engine{\n background:\n radial-gradient(circle at 90% 10%,rgba(216,178,93,.12),transparent 30%),\n #0b1310;\n}\n\n#mza-jewel .engine-grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:22px;\n margin-top:35px;\n}\n\n#mza-jewel .tool{\n padding:28px;\n border-radius:25px;\n background:linear-gradient(145deg,#14231c,#0e1914);\n border:1px solid var(--border);\n}\n\n#mza-jewel .tool h3{\n font-size:1.4rem;\n margin-bottom:18px;\n}\n\n#mza-jewel .formgrid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:13px;\n}\n\n#mza-jewel label{\n display:block;\n font-size:.84rem;\n color:#ddd6c8;\n font-weight:800;\n margin-bottom:5px;\n}\n\n#mza-jewel input,\n#mza-jewel select,\n#mza-jewel textarea{\n width:100%;\n border-radius:11px;\n border:1px solid rgba(255,255,255,.13);\n background:#08110d;\n color:white;\n padding:12px 13px;\n outline:none;\n}\n\n#mza-jewel textarea{\n min-height:90px;\n resize:vertical;\n}\n\n#mza-jewel input:focus,\n#mza-jewel select:focus{\n border-color:var(--gold);\n}\n\n#mza-jewel .result{\n margin-top:17px;\n padding:18px;\n background:#08110d;\n border:1px solid var(--border);\n border-radius:16px;\n}\n\n#mza-jewel .metrics{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:9px;\n margin-top:10px;\n}\n\n#mza-jewel .metric{\n padding:11px;\n border-radius:11px;\n background:rgba(255,255,255,.04);\n}\n\n#mza-jewel .metric small{\n display:block;\n color:var(--muted);\n}\n\n#mza-jewel .metric b{\n color:var(--gold2);\n}\n\n\/* MISSION *\/\n\n#mza-jewel .mission-grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:25px;\n align-items:stretch;\n}\n\n#mza-jewel .mission{\n padding:32px;\n border-radius:25px;\n background:linear-gradient(145deg,var(--panel),#0d1712);\n border:1px solid var(--border);\n}\n\n#mza-jewel .checks{\n list-style:none;\n padding:0;\n}\n\n#mza-jewel .checks li{\n margin:10px 0;\n color:#ddd6c8;\n}\n\n#mza-jewel .checks li:before{\n content:\"\u2713\";\n color:var(--gold2);\n font-weight:900;\n margin-right:9px;\n}\n\n\/* QCM *\/\n\n#mza-jewel .question{\n padding:24px;\n border-radius:20px;\n background:var(--panel);\n border:1px solid var(--border);\n margin-top:15px;\n}\n\n#mza-jewel .answer{\n width:100%;\n display:block;\n text-align:left;\n padding:12px;\n margin-top:8px;\n border-radius:10px;\n border:1px solid rgba(255,255,255,.12);\n background:#0a1410;\n color:white;\n cursor:pointer;\n}\n\n#mza-jewel .answer.good{\n background:rgba(55,140,93,.18);\n border-color:#478e67;\n}\n\n#mza-jewel .answer.bad{\n background:rgba(180,70,70,.17);\n border-color:#b44f4f;\n}\n\n\/* MASTER *\/\n\n#mza-jewel .master{\n text-align:center;\n background:\n radial-gradient(circle at center,rgba(216,178,93,.12),transparent 40%),\n #0a110e;\n}\n\n#mza-jewel .masterbox{\n padding:55px 30px;\n border-radius:30px;\n border:1px solid rgba(216,178,93,.3);\n background:linear-gradient(145deg,#15231d,#090f0c);\n}\n\n#mza-jewel .masterbox .lead{\n margin:auto;\n}\n\n#mza-jewel .toast{\n display:none;\n position:fixed;\n right:20px;\n bottom:20px;\n z-index:99999;\n background:var(--gold2);\n color:#08100c;\n padding:15px 19px;\n border-radius:13px;\n font-weight:900;\n box-shadow:var(--shadow);\n}\n\n@media(max-width:900px){\n #mza-jewel .grid{grid-template-columns:1fr 1fr}\n #mza-jewel .collection-grid{grid-template-columns:1fr 1fr}\n #mza-jewel .stats{grid-template-columns:1fr 1fr}\n #mza-jewel .engine-grid{grid-template-columns:1fr}\n #mza-jewel .mission-grid{grid-template-columns:1fr}\n}\n\n@media(max-width:600px){\n #mza-jewel .grid,\n #mza-jewel .collection-grid,\n #mza-jewel .stats,\n #mza-jewel .formgrid{\n   grid-template-columns:1fr;\n }\n\n #mza-jewel .section{padding:58px 0}\n #mza-jewel .hero{min-height:auto}\n #mza-jewel .hero-content{padding:75px 0}\n #mza-jewel .btn{width:100%}\n}\n<\/style>\n\n\n<div id=\"mza-jewel\">\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<h1>\nAtelier<br>\n<span class=\"gold\">Bijoux Marocains<\/span>\n<\/h1>\n\n<p class=\"lead\">\nExplorer le patrimoine joaillier marocain, comprendre ses formes,\nmati\u00e8res et techniques puis apprendre \u00e0 imaginer, chiffrer et\npr\u00e9senter une collection contemporaine inspir\u00e9e des savoir-faire du Maroc.\n<\/p>\n\n<div class=\"actions\">\n<button class=\"btn primary\" onclick=\"mzaGo('parcours')\">\nCOMMENCER L&#8217;ATELIER\n<\/button>\n\n<button class=\"btn secondary\" onclick=\"mzaGo('studio')\">\nOUVRIR LE STUDIO DE CR\u00c9ATION\n<\/button>\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\">Patrimoine \u00d7 cr\u00e9ation \u00d7 m\u00e9tier<\/span>\n\n<h2>\nDu bijou patrimonial \u00e0 la\n<span class=\"gold\">collection signature.<\/span>\n<\/h2>\n\n<p class=\"lead\">\nChaque apprenant progresse de l&#8217;observation du patrimoine vers\nla conception d&#8217;un produit : dessin, mat\u00e9riaux, technique,\nco\u00fbt de fabrication, prix de vente, storytelling et pr\u00e9sentation.\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>30+<\/strong>\nMissions\n<\/div>\n\n<div class=\"stat\">\n<strong>12<\/strong>\nPi\u00e8ces finales\n<\/div>\n\n<div class=\"stat\">\n<strong>1<\/strong>\nCollection signature\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- PARCOURS -->\n\n<section class=\"section\" id=\"parcours\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">Parcours MZA<\/span>\n\n<h2>\n10 ateliers pour comprendre,\n<span class=\"gold\">cr\u00e9er et vendre.<\/span>\n<\/h2>\n\n<div class=\"grid\">\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 01<\/span>\n<h3>Histoire du bijou marocain<\/h3>\n<p>\nFonctions sociales, esth\u00e9tiques et patrimoniales du bijou\ndans diff\u00e9rentes p\u00e9riodes et communaut\u00e9s du Maroc.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 02<\/span>\n<h3>Styles &#038; territoires<\/h3>\n<p>\nObserver et comparer diff\u00e9rentes traditions r\u00e9gionales :\nAtlas, Souss, F\u00e8s, T\u00e9touan, r\u00e9gions sahariennes et autres influences.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 03<\/span>\n<h3>Fibules &#038; formes embl\u00e9matiques<\/h3>\n<p>\n\u00c9tudier proportions, g\u00e9om\u00e9trie, syst\u00e8mes d&#8217;attache,\ncomposition et r\u00e9interpr\u00e9tation contemporaine.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 04<\/span>\n<h3>Dessin du bijou<\/h3>\n<p>\nCroquis, vue de face, profil, dimensions, sym\u00e9trie,\nfiche technique et pr\u00e9paration du prototype.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 05<\/span>\n<h3>M\u00e9taux &#038; mati\u00e8res<\/h3>\n<p>\nArgent et autres m\u00e9taux, pierres, perles, \u00e9mail,\n\u00e9l\u00e9ments d\u00e9coratifs et crit\u00e8res de s\u00e9lection.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 06<\/span>\n<h3>Motifs marocains<\/h3>\n<p>\nG\u00e9om\u00e9trie, v\u00e9g\u00e9tal, symboles, r\u00e9p\u00e9titions,\n\u00e9quilibre visuel et cr\u00e9ation d&#8217;un langage graphique.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 07<\/span>\n<h3>Techniques artisanales<\/h3>\n<p>\nIntroduction aux principes de d\u00e9coupe, mise en forme,\ngravure, filigrane, assemblage, sertissage et finition.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 08<\/span>\n<h3>Prototypage<\/h3>\n<p>\nPasser du dessin au prototype, contr\u00f4ler les dimensions,\nle confort, le poids et l&#8217;\u00e9quilibre de la pi\u00e8ce.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 09<\/span>\n<h3>Prix &#038; rentabilit\u00e9<\/h3>\n<p>\nMati\u00e8res, composants, main-d&#8217;\u0153uvre, frais,\nco\u00fbt de revient, marge et prix public.\n<\/p>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"cardbody\">\n<span class=\"num\">ATELIER 10<\/span>\n<h3>Cr\u00e9er sa collection<\/h3>\n<p>\nConcept, gamme, coh\u00e9rence, nom des pi\u00e8ces,\npackaging, photographie, storytelling et pr\u00e9sentation commerciale.\n<\/p>\n<\/div>\n<\/div>\n\n<\/div>\n<\/div>\n<\/section>\n\n\n<!-- PIECES -->\n\n<section class=\"section collection\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">Laboratoire cr\u00e9atif<\/span>\n\n<h2>\nLes pi\u00e8ces \u00e0\n<span class=\"gold\">concevoir.<\/span>\n<\/h2>\n\n<div class=\"collection-grid\">\n\n<div class=\"piece\">\n<div class=\"piece-icon\">\u25c6<\/div>\n<h3>Fibule<\/h3>\n<p>Tradition r\u00e9interpr\u00e9t\u00e9e.<\/p>\n<\/div>\n\n<div class=\"piece\">\n<div class=\"piece-icon\">\u25c9<\/div>\n<h3>Pendentif<\/h3>\n<p>Motif central signature.<\/p>\n<\/div>\n\n<div class=\"piece\">\n<div class=\"piece-icon\">\u25ef<\/div>\n<h3>Bracelet<\/h3>\n<p>Structure et r\u00e9p\u00e9tition.<\/p>\n<\/div>\n\n<div class=\"piece\">\n<div class=\"piece-icon\">\u25c7<\/div>\n<h3>Boucles<\/h3>\n<p>Sym\u00e9trie et l\u00e9g\u00e8ret\u00e9.<\/p>\n<\/div>\n\n<div class=\"piece\">\n<div class=\"piece-icon\">\u2726<\/div>\n<h3>Collier<\/h3>\n<p>Composition principale.<\/p>\n<\/div>\n\n<div class=\"piece\">\n<div class=\"piece-icon\">\u2b21<\/div>\n<h3>Bague<\/h3>\n<p>Miniature architecturale.<\/p>\n<\/div>\n\n<div class=\"piece\">\n<div class=\"piece-icon\">\u2727<\/div>\n<h3>Broche<\/h3>\n<p>Cr\u00e9ation contemporaine.<\/p>\n<\/div>\n\n<div class=\"piece\">\n<div class=\"piece-icon\">\u265b<\/div>\n<h3>Parure<\/h3>\n<p>Pi\u00e8ce Prestige Royal.<\/p>\n<\/div>\n\n<\/div>\n<\/div>\n<\/section>\n\n\n<!-- ENGINE -->\n\n<section class=\"section engine\" id=\"studio\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">MZA Jewelry Studio<\/span>\n\n<h2>\nLe moteur de\n<span class=\"gold\">cr\u00e9ation &#038; rentabilit\u00e9.<\/span>\n<\/h2>\n\n<p class=\"lead\">\nCr\u00e9ez une pi\u00e8ce, d\u00e9finissez ses caract\u00e9ristiques puis estimez\nson co\u00fbt de fabrication et son prix de vente.\n<\/p>\n\n<div class=\"engine-grid\">\n\n<!-- CONFIGURATEUR -->\n\n<div class=\"tool\">\n\n<h3>\ud83d\udc8e 1 \u00b7 Configurateur du bijou<\/h3>\n\n<div class=\"formgrid\">\n\n<div>\n<label>Type de bijou<\/label>\n<select id=\"typeBijou\">\n<option>Fibule<\/option>\n<option>Collier<\/option>\n<option>Bracelet<\/option>\n<option>Bague<\/option>\n<option>Boucles d&#8217;oreilles<\/option>\n<option>Pendentif<\/option>\n<option>Broche<\/option>\n<option>Parure<\/option>\n<\/select>\n<\/div>\n\n<div>\n<label>Inspiration<\/label>\n<select id=\"inspiration\">\n<option>Atlas<\/option>\n<option>Souss<\/option>\n<option>F\u00e8s<\/option>\n<option>T\u00e9touan<\/option>\n<option>Sahara marocain<\/option>\n<option>Maroc contemporain<\/option>\n<option>Prestige Royal<\/option>\n<\/select>\n<\/div>\n\n<div>\n<label>M\u00e9tal<\/label>\n<select id=\"metal\">\n<option>Argent<\/option>\n<option>Vermeil<\/option>\n<option>Laiton<\/option>\n<option>M\u00e9tal dor\u00e9<\/option>\n<option>Autre<\/option>\n<\/select>\n<\/div>\n\n<div>\n<label>D\u00e9cor<\/label>\n<select id=\"decor\">\n<option>Gravure<\/option>\n<option>Filigrane<\/option>\n<option>\u00c9mail<\/option>\n<option>Pierres<\/option>\n<option>G\u00e9om\u00e9trique<\/option>\n<option>Mixte<\/option>\n<\/select>\n<\/div>\n\n<div>\n<label>Poids estim\u00e9 (g)<\/label>\n<input id=\"poids\" type=\"number\" value=\"38\" min=\"0\" step=\".1\">\n<\/div>\n\n<div>\n<label>Nombre de pierres \/ \u00e9l\u00e9ments<\/label>\n<input id=\"pierres\" type=\"number\" value=\"4\" min=\"0\">\n<\/div>\n\n<\/div>\n\n<br>\n\n<button class=\"btn primary\" onclick=\"creerBijou()\">\nCR\u00c9ER LA FICHE\n<\/button>\n\n<div class=\"result\" id=\"ficheBijou\">\nConfigurez votre premi\u00e8re cr\u00e9ation.\n<\/div>\n\n<\/div>\n\n\n<!-- COST ENGINE -->\n\n<div class=\"tool\">\n\n<h3>\ud83e\uddee 2 \u00b7 Calculateur de co\u00fbt<\/h3>\n\n<div class=\"formgrid\">\n\n<div>\n<label>Poids m\u00e9tal (g)<\/label>\n<input id=\"poidsCout\" type=\"number\" value=\"38\" min=\"0\" step=\".1\">\n<\/div>\n\n<div>\n<label>Co\u00fbt m\u00e9tal saisi (MAD\/g)<\/label>\n<input id=\"prixMetal\" type=\"number\" value=\"12\" min=\"0\" step=\".1\">\n<\/div>\n\n<div>\n<label>Nombre d&#8217;\u00e9l\u00e9ments d\u00e9coratifs<\/label>\n<input id=\"nbElements\" type=\"number\" value=\"4\" min=\"0\">\n<\/div>\n\n<div>\n<label>Co\u00fbt \/ \u00e9l\u00e9ment (MAD)<\/label>\n<input id=\"prixElement\" type=\"number\" value=\"30\" min=\"0\">\n<\/div>\n\n<div>\n<label>Temps de travail (heures)<\/label>\n<input id=\"heures\" type=\"number\" value=\"6\" min=\"0\" step=\".5\">\n<\/div>\n\n<div>\n<label>Main-d&#8217;\u0153uvre (MAD\/h)<\/label>\n<input id=\"coutHeure\" type=\"number\" value=\"70\" min=\"0\">\n<\/div>\n\n<div>\n<label>Autres co\u00fbts (MAD)<\/label>\n<input id=\"autres\" type=\"number\" value=\"100\" min=\"0\">\n<\/div>\n\n<div>\n<label>Pertes mati\u00e8re (%)<\/label>\n<input id=\"pertes\" type=\"number\" value=\"8\" min=\"0\">\n<\/div>\n\n<\/div>\n\n<br>\n\n<button class=\"btn primary\" onclick=\"calculerCout()\">\nCALCULER\n<\/button>\n\n<div class=\"result\">\n\n<div class=\"metrics\">\n\n<div class=\"metric\">\n<small>M\u00e9tal<\/small>\n<b id=\"coutMetal\">0 MAD<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>D\u00e9coration<\/small>\n<b id=\"coutDecor\">0 MAD<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>Main-d&#8217;\u0153uvre<\/small>\n<b id=\"coutMO\">0 MAD<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>Co\u00fbt de revient<\/small>\n<b id=\"coutRevient\">0 MAD<\/b>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<!-- PRIX -->\n\n<div class=\"tool\">\n\n<h3>\ud83c\udff7\ufe0f 3 \u00b7 Prix de vente<\/h3>\n\n<div class=\"formgrid\">\n\n<div>\n<label>Co\u00fbt de revient (MAD)<\/label>\n<input id=\"revientPrix\" type=\"number\" value=\"0\">\n<\/div>\n\n<div>\n<label>Marge artisan (%)<\/label>\n<input id=\"margeArtisan\" type=\"number\" value=\"35\" min=\"0\">\n<\/div>\n\n<div>\n<label>Packaging (MAD)<\/label>\n<input id=\"packaging\" type=\"number\" value=\"80\" min=\"0\">\n<\/div>\n\n<div>\n<label>Marge boutique (%)<\/label>\n<input id=\"margeBoutique\" type=\"number\" value=\"40\" min=\"0\">\n<\/div>\n\n<\/div>\n\n<br>\n\n<button class=\"btn primary\" onclick=\"calculerPrix()\">\nCALCULER LE PRIX PUBLIC\n<\/button>\n\n<div class=\"result\">\n\n<div class=\"metrics\">\n\n<div class=\"metric\">\n<small>Prix sortie atelier<\/small>\n<b id=\"prixAtelier\">0 MAD<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>Avec packaging<\/small>\n<b id=\"prixPack\">0 MAD<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>Prix public indicatif<\/small>\n<b id=\"prixPublic\">0 MAD<\/b>\n<\/div>\n\n<div class=\"metric\">\n<small>Coefficient \/ revient<\/small>\n<b id=\"coefficient\">0<\/b>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<!-- COLLECTION BUILDER -->\n\n<div class=\"tool\">\n\n<h3>\ud83d\udc51 4 \u00b7 Collection Builder<\/h3>\n\n<div class=\"formgrid\">\n\n<div>\n<label>Nom de la collection<\/label>\n<input id=\"nomCollection\" value=\"Tr\u00e9sors du Maroc\">\n<\/div>\n\n<div>\n<label>Nombre de pi\u00e8ces<\/label>\n<input id=\"nombrePieces\" type=\"number\" value=\"12\" min=\"1\">\n<\/div>\n\n<div>\n<label>Univers<\/label>\n<select id=\"univers\">\n<option>Patrimoine<\/option>\n<option>Atlas<\/option>\n<option>Andalou<\/option>\n<option>Sahara<\/option>\n<option>Maroc contemporain<\/option>\n<option>Prestige Royal<\/option>\n<\/select>\n<\/div>\n\n<div>\n<label>Client\u00e8le<\/label>\n<select id=\"clientele\">\n<option>Artisanat premium<\/option>\n<option>Tourisme<\/option>\n<option>Boutique de cr\u00e9ateur<\/option>\n<option>Luxe<\/option>\n<option>Mariage<\/option>\n<option>International<\/option>\n<\/select>\n<\/div>\n\n<\/div>\n\n<br>\n\n<label>Concept de la collection<\/label>\n<textarea id=\"concept\">\nUne collection contemporaine inspir\u00e9e des formes et savoir-faire marocains.\n<\/textarea>\n\n<br><br>\n\n<button class=\"btn primary\" onclick=\"creerCollection()\">\nG\u00c9N\u00c9RER LE DOSSIER COLLECTION\n<\/button>\n\n<div class=\"result\" id=\"resultCollection\">\nVotre collection appara\u00eetra ici.\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/div>\n<\/section>\n\n\n<!-- MISSIONS -->\n\n<section class=\"section\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">Learning by doing<\/span>\n\n<h2>\nMissions\n<span class=\"gold\">cr\u00e9atives.<\/span>\n<\/h2>\n\n<div class=\"mission-grid\">\n\n<div class=\"mission\">\n\n<h3>MISSION 01 \u00b7 Fibule contemporaine<\/h3>\n\n<p>\nCr\u00e9er une fibule inspir\u00e9e d&#8217;un vocabulaire d\u00e9coratif marocain\ntout en d\u00e9veloppant une identit\u00e9 contemporaine personnelle.\n<\/p>\n\n<ul class=\"checks\">\n<li>Rechercher les r\u00e9f\u00e9rences patrimoniales<\/li>\n<li>Cr\u00e9er 3 croquis<\/li>\n<li>Choisir le m\u00e9tal<\/li>\n<li>D\u00e9finir dimensions et poids cible<\/li>\n<li>Choisir les techniques d\u00e9coratives<\/li>\n<li>Calculer le co\u00fbt<\/li>\n<li>D\u00e9terminer le prix<\/li>\n<li>Cr\u00e9er la fiche produit<\/li>\n<\/ul>\n\n<button class=\"btn primary\" onclick=\"missionBijou('Fibule contemporaine')\">\nLANCER LA MISSION\n<\/button>\n\n<\/div>\n\n\n<div class=\"mission\">\n\n<h3>MISSION 02 \u00b7 Parure de c\u00e9r\u00e9monie<\/h3>\n\n<p>\nCr\u00e9er une parure coh\u00e9rente compos\u00e9e d&#8217;un collier,\nde boucles d&#8217;oreilles et d&#8217;un bracelet.\n<\/p>\n\n<ul class=\"checks\">\n<li>D\u00e9finir le th\u00e8me<\/li>\n<li>Cr\u00e9er le motif signature<\/li>\n<li>D\u00e9cliner le motif sur trois pi\u00e8ces<\/li>\n<li>Contr\u00f4ler la coh\u00e9rence de la gamme<\/li>\n<li>Calculer les co\u00fbts<\/li>\n<li>Cr\u00e9er le coffret<\/li>\n<li>D\u00e9finir le storytelling<\/li>\n<li>Pr\u00e9senter la collection<\/li>\n<\/ul>\n\n<button class=\"btn primary\" onclick=\"missionBijou('Parure de c\u00e9r\u00e9monie')\">\nLANCER LA MISSION\n<\/button>\n\n<\/div>\n\n<\/div>\n<\/div>\n<\/section>\n\n\n<!-- QCM -->\n\n<section class=\"section\">\n<div class=\"wrap\">\n\n<span class=\"eyebrow\">Contr\u00f4le des connaissances<\/span>\n\n<h2>\nQCM\n<span class=\"gold\">Bijoux Marocains.<\/span>\n<\/h2>\n\n<div class=\"question\">\n\n<strong>\n1 \u00b7 Pourquoi r\u00e9aliser une fiche technique avant le prototype ?\n<\/strong>\n\n<button class=\"answer\" onclick=\"quiz(this,false)\">\nUniquement pour choisir le nom du bijou.\n<\/button>\n\n<button class=\"answer\" onclick=\"quiz(this,true)\">\nPour d\u00e9finir notamment dimensions, mat\u00e9riaux et caract\u00e9ristiques de fabrication.\n<\/button>\n\n<button class=\"answer\" onclick=\"quiz(this,false)\">\nPour remplacer totalement le prototype.\n<\/button>\n\n<\/div>\n\n\n<div class=\"question\">\n\n<strong>\n2 \u00b7 Le co\u00fbt de revient doit notamment int\u00e9grer :\n<\/strong>\n\n<button class=\"answer\" onclick=\"quiz(this,true)\">\nMati\u00e8res, composants, main-d&#8217;\u0153uvre et autres co\u00fbts imputables.\n<\/button>\n\n<button class=\"answer\" onclick=\"quiz(this,false)\">\nUniquement le m\u00e9tal.\n<\/button>\n\n<button class=\"answer\" onclick=\"quiz(this,false)\">\nUniquement la marge boutique.\n<\/button>\n\n<\/div>\n\n\n<div class=\"question\">\n\n<strong>\n3 \u00b7 Une collection coh\u00e9rente poss\u00e8de g\u00e9n\u00e9ralement :\n<\/strong>\n\n<button class=\"answer\" onclick=\"quiz(this,false)\">\nDes pi\u00e8ces sans aucun lien esth\u00e9tique.\n<\/button>\n\n<button class=\"answer\" onclick=\"quiz(this,true)\">\nUn concept et un langage visuel communs.\n<\/button>\n\n<button class=\"answer\" onclick=\"quiz(this,false)\">\nObligatoirement une seule forme de bijou.\n<\/button>\n\n<\/div>\n\n<\/div>\n<\/section>\n\n\n<!-- MASTER PROJECT -->\n\n<section class=\"section master\">\n<div class=\"wrap\">\n\n<div class=\"masterbox\">\n\n<span class=\"eyebrow\">\nEXAMEN FINAL \u00b7 MZA COLLECTION ROYAL\n<\/span>\n\n<h2>\nTR\u00c9SORS\n<span class=\"gold\">DU MAROC<\/span>\n<\/h2>\n\n<p class=\"lead\">\nCr\u00e9er une collection signature de 12 bijoux puis construire\nson identit\u00e9, son dossier technique, son mod\u00e8le \u00e9conomique\net sa pr\u00e9sentation commerciale.\n<\/p>\n\n<div class=\"stats\">\n\n<div class=\"stat\">\n<strong>12<\/strong>\nBijoux\n<\/div>\n\n<div class=\"stat\">\n<strong>12<\/strong>\nFiches techniques\n<\/div>\n\n<div class=\"stat\">\n<strong>1<\/strong>\nCoffret signature\n<\/div>\n\n<div class=\"stat\">\n<strong>1<\/strong>\nSoutenance\n<\/div>\n\n<\/div>\n\n<div class=\"actions\" style=\"justify-content:center\">\n\n<button class=\"btn primary\" onclick=\"masterBijoux()\">\n\ud83d\udc51 COMMENCER LE MASTER PROJECT\n<\/button>\n\n<button class=\"btn secondary\" onclick=\"window.print()\">\nIMPRIMER LE DOSSIER\n<\/button>\n\n<\/div>\n\n<\/div>\n<\/div>\n<\/section>\n\n\n<div class=\"toast\" id=\"jewelToast\"><\/div>\n\n<\/div>\n\n\n<script>\n(function(){\n\nwindow.mzaGo=function(id){\n var el=document.getElementById(id);\n if(el){\n   el.scrollIntoView({\n     behavior:\"smooth\",\n     block:\"start\"\n   });\n }\n};\n\nfunction toast(txt){\n var t=document.getElementById(\"jewelToast\");\n t.innerHTML=txt;\n t.style.display=\"block\";\n\n setTimeout(function(){\n   t.style.display=\"none\";\n },3200);\n}\n\nfunction mad(n){\n return new Intl.NumberFormat(\n   \"fr-FR\",\n   {maximumFractionDigits:0}\n ).format(n)+\" MAD\";\n}\n\n\n\/* CREATION *\/\n\nwindow.creerBijou=function(){\n\n var type=document.getElementById(\"typeBijou\").value;\n var inspiration=document.getElementById(\"inspiration\").value;\n var metal=document.getElementById(\"metal\").value;\n var decor=document.getElementById(\"decor\").value;\n var poids=parseFloat(document.getElementById(\"poids\").value)||0;\n var pierres=parseInt(document.getElementById(\"pierres\").value)||0;\n\n document.getElementById(\"ficheBijou\").innerHTML=\n \"<strong>FICHE CR\u00c9ATION MZA<\/strong><br><br>\"+\n \"<b>Pi\u00e8ce :<\/b> \"+type+\"<br>\"+\n \"<b>Inspiration :<\/b> \"+inspiration+\"<br>\"+\n \"<b>M\u00e9tal :<\/b> \"+metal+\"<br>\"+\n \"<b>D\u00e9cor :<\/b> \"+decor+\"<br>\"+\n \"<b>Poids cible :<\/b> \"+poids+\" g<br>\"+\n \"<b>\u00c9l\u00e9ments d\u00e9coratifs :<\/b> \"+pierres+\n \"<br><br><span style='color:#f2d78e'>STATUT \u00b7 CONCEPT CR\u00c9\u00c9<\/span>\";\n\n document.getElementById(\"poidsCout\").value=poids;\n document.getElementById(\"nbElements\").value=pierres;\n\n toast(\"\ud83d\udc8e Fiche cr\u00e9ation g\u00e9n\u00e9r\u00e9e.\");\n};\n\n\n\/* COST ENGINE *\/\n\nwindow.calculerCout=function(){\n\n var poids=parseFloat(document.getElementById(\"poidsCout\").value)||0;\n var prixMetal=parseFloat(document.getElementById(\"prixMetal\").value)||0;\n var nb=parseFloat(document.getElementById(\"nbElements\").value)||0;\n var prixElement=parseFloat(document.getElementById(\"prixElement\").value)||0;\n var heures=parseFloat(document.getElementById(\"heures\").value)||0;\n var coutHeure=parseFloat(document.getElementById(\"coutHeure\").value)||0;\n var autres=parseFloat(document.getElementById(\"autres\").value)||0;\n var pertes=parseFloat(document.getElementById(\"pertes\").value)||0;\n\n var metal=poids*prixMetal*(1+pertes\/100);\n var decor=nb*prixElement;\n var mo=heures*coutHeure;\n var revient=metal+decor+mo+autres;\n\n document.getElementById(\"coutMetal\").innerText=mad(metal);\n document.getElementById(\"coutDecor\").innerText=mad(decor);\n document.getElementById(\"coutMO\").innerText=mad(mo);\n document.getElementById(\"coutRevient\").innerText=mad(revient);\n\n document.getElementById(\"revientPrix\").value=revient.toFixed(2);\n\n calculerPrix();\n\n toast(\"\u2713 Co\u00fbt de revient calcul\u00e9.\");\n};\n\n\n\/* PRICE ENGINE *\/\n\nwindow.calculerPrix=function(){\n\n var revient=parseFloat(document.getElementById(\"revientPrix\").value)||0;\n var margeA=parseFloat(document.getElementById(\"margeArtisan\").value)||0;\n var pack=parseFloat(document.getElementById(\"packaging\").value)||0;\n var margeB=parseFloat(document.getElementById(\"margeBoutique\").value)||0;\n\n var atelier=revient*(1+margeA\/100);\n var avecPack=atelier+pack;\n var publicPrice=avecPack*(1+margeB\/100);\n\n var coef=revient>0 ? publicPrice\/revient : 0;\n\n document.getElementById(\"prixAtelier\").innerText=mad(atelier);\n document.getElementById(\"prixPack\").innerText=mad(avecPack);\n document.getElementById(\"prixPublic\").innerText=mad(publicPrice);\n document.getElementById(\"coefficient\").innerText=coef.toFixed(2)+\" \u00d7\";\n\n};\n\n\n\/* COLLECTION *\/\n\nwindow.creerCollection=function(){\n\n var nom=document.getElementById(\"nomCollection\").value;\n var nombre=document.getElementById(\"nombrePieces\").value;\n var univers=document.getElementById(\"univers\").value;\n var clientele=document.getElementById(\"clientele\").value;\n var concept=document.getElementById(\"concept\").value;\n\n document.getElementById(\"resultCollection\").innerHTML=\n \"<strong>COLLECTION \u00b7 \"+nom.toUpperCase()+\"<\/strong><br><br>\"+\n \"<b>Nombre de pi\u00e8ces :<\/b> \"+nombre+\"<br>\"+\n \"<b>Univers :<\/b> \"+univers+\"<br>\"+\n \"<b>March\u00e9 :<\/b> \"+clientele+\"<br><br>\"+\n \"<b>Concept :<\/b><br>\"+concept+\n \"<br><br><span style='color:#f2d78e'>DOSSIER COLLECTION INITIALIS\u00c9<\/span>\";\n\n toast(\"\ud83d\udc51 Collection cr\u00e9\u00e9e.\");\n};\n\n\n\/* MISSIONS *\/\n\nwindow.missionBijou=function(nom){\n\n mzaGo(\"studio\");\n\n setTimeout(function(){\n   toast(\n     \"MISSION ACTIV\u00c9E \u00b7 \"+nom+\n     \" \u00b7 Commencez par configurer votre cr\u00e9ation.\"\n   );\n },500);\n\n};\n\n\n\/* QCM *\/\n\nwindow.quiz=function(btn,correct){\n\n var parent=btn.parentElement;\n\n var buttons=parent.querySelectorAll(\".answer\");\n\n buttons.forEach(function(b){\n   b.disabled=true;\n });\n\n if(correct){\n   btn.classList.add(\"good\");\n   toast(\"\u2713 Bonne r\u00e9ponse.\");\n }else{\n   btn.classList.add(\"bad\");\n\n   buttons.forEach(function(b){\n     var click=b.getAttribute(\"onclick\")||\"\";\n\n     if(click.indexOf(\"true\")>-1){\n       b.classList.add(\"good\");\n     }\n   });\n\n   toast(\"R\u00e9ponse incorrecte \u00b7 correction affich\u00e9e.\");\n }\n\n};\n\n\n\/* MASTER *\/\n\nwindow.masterBijoux=function(){\n\n mzaGo(\"studio\");\n\n document.getElementById(\"nomCollection\").value=\n \"Tr\u00e9sors du Maroc\";\n\n document.getElementById(\"nombrePieces\").value=\n 12;\n\n document.getElementById(\"univers\").value=\n \"Prestige Royal\";\n\n setTimeout(function(){\n   toast(\n     \"\ud83d\udc51 MASTER PROJECT ACTIV\u00c9 \u00b7 Cr\u00e9ez la premi\u00e8re pi\u00e8ce de votre collection.\"\n   );\n },500);\n\n};\n\n\n\/* INITIALISATION *\/\n\ncalculerCout();\n\n})();\n<\/script>\n\n\n\n<!-- =========================================================\n MZA JEWEL IMAGE GENERATOR\n \u00c0 INS\u00c9RER DANS LA PAGE BIJOUX MAROCAINS\n========================================================= -->\n\n<style>\n#mza-jewel-generator{\n  margin-top:35px;\n  padding:30px;\n  border-radius:26px;\n  background:linear-gradient(145deg,#14231c,#09130f);\n  border:1px solid rgba(216,178,93,.24);\n}\n\n#mza-jewel-generator .jg-layout{\n  display:grid;\n  grid-template-columns:.85fr 1.15fr;\n  gap:24px;\n}\n\n#mza-jewel-generator .jg-panel{\n  background:#0c1712;\n  border:1px solid rgba(216,178,93,.16);\n  border-radius:22px;\n  padding:24px;\n}\n\n#mza-jewel-generator h3{\n  margin:0 0 18px;\n  color:#f2d78e;\n}\n\n#mza-jewel-generator .jg-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n}\n\n#mza-jewel-generator label{\n  display:block;\n  font-size:.84rem;\n  font-weight:800;\n  margin-bottom:5px;\n  color:#ddd4c5;\n}\n\n#mza-jewel-generator select,\n#mza-jewel-generator input{\n  width:100%;\n  padding:12px;\n  border-radius:11px;\n  border:1px solid rgba(255,255,255,.13);\n  background:#07100d;\n  color:white;\n}\n\n#mza-jewel-generator .jg-btn{\n  width:100%;\n  margin-top:18px;\n  padding:15px;\n  border:0;\n  border-radius:13px;\n  cursor:pointer;\n  font-weight:900;\n  color:#07100d;\n  background:linear-gradient(135deg,#f2d78e,#d8b25d);\n}\n\n#mza-jewel-generator .jg-canvas{\n  min-height:520px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:22px;\n  overflow:hidden;\n  position:relative;\n\n  background:\n    radial-gradient(circle at 50% 45%,#f8f0dc,#d9c9a5 75%);\n}\n\n#mza-jewel-generator .jg-canvas svg{\n  width:88%;\n  max-width:560px;\n  height:auto;\n  filter:drop-shadow(0 20px 25px rgba(0,0,0,.22));\n}\n\n#mza-jewel-generator .jg-caption{\n  margin-top:15px;\n  padding:15px;\n  border-radius:14px;\n  background:#08110d;\n  color:#cfc6b6;\n  line-height:1.6;\n}\n\n#mza-jewel-generator .jg-caption strong{\n  color:#f2d78e;\n}\n\n#mza-jewel-generator .palette{\n  display:flex;\n  gap:8px;\n  margin-top:10px;\n  flex-wrap:wrap;\n}\n\n#mza-jewel-generator .swatch{\n  width:34px;\n  height:34px;\n  border-radius:50%;\n  border:2px solid rgba(255,255,255,.4);\n  cursor:pointer;\n}\n\n@media(max-width:850px){\n  #mza-jewel-generator .jg-layout{\n    grid-template-columns:1fr;\n  }\n}\n\n@media(max-width:560px){\n  #mza-jewel-generator .jg-grid{\n    grid-template-columns:1fr;\n  }\n\n  #mza-jewel-generator{\n    padding:18px;\n  }\n\n  #mza-jewel-generator .jg-canvas{\n    min-height:370px;\n  }\n}\n<\/style>\n\n\n<section id=\"mza-jewel-generator\">\n\n<div class=\"jg-layout\">\n\n<!-- COMMANDES -->\n\n<div class=\"jg-panel\">\n\n<h3>\u2728 MZA Jewel Image Generator<\/h3>\n\n<p style=\"color:#bfb6a6\">\nComposez visuellement un bijou marocain.\nChaque modification g\u00e9n\u00e8re une nouvelle proposition.\n<\/p>\n\n<div class=\"jg-grid\">\n\n<div>\n<label>Type de bijou<\/label>\n\n<select id=\"jgType\">\n  <option value=\"fibule\">Fibule<\/option>\n  <option value=\"pendentif\">Pendentif<\/option>\n  <option value=\"collier\">Collier<\/option>\n  <option value=\"boucles\">Boucles d&#8217;oreilles<\/option>\n  <option value=\"bracelet\">Bracelet<\/option>\n  <option value=\"bague\">Bague<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Inspiration<\/label>\n\n<select id=\"jgStyle\">\n  <option value=\"atlas\">Atlas<\/option>\n  <option value=\"souss\">Souss<\/option>\n  <option value=\"fes\">F\u00e8s<\/option>\n  <option value=\"tetouan\">T\u00e9touan<\/option>\n  <option value=\"sahara\">Sahara<\/option>\n  <option value=\"royal\">Prestige Royal<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>M\u00e9tal<\/label>\n\n<select id=\"jgMetal\">\n  <option value=\"silver\">Argent<\/option>\n  <option value=\"gold\">Dor\u00e9<\/option>\n  <option value=\"rose\">Or ros\u00e9<\/option>\n  <option value=\"bronze\">Bronze<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Pierre principale<\/label>\n\n<select id=\"jgStone\">\n  <option value=\"emerald\">Vert \u00e9meraude<\/option>\n  <option value=\"ruby\">Rouge rubis<\/option>\n  <option value=\"sapphire\">Bleu saphir<\/option>\n  <option value=\"turquoise\">Turquoise<\/option>\n  <option value=\"amber\">Ambre<\/option>\n  <option value=\"pearl\">Ivoire<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Motif<\/label>\n\n<select id=\"jgPattern\">\n  <option value=\"star\">\u00c9toile marocaine<\/option>\n  <option value=\"diamond\">Losange<\/option>\n  <option value=\"floral\">Arabesque<\/option>\n  <option value=\"geometry\">G\u00e9om\u00e9trique<\/option>\n<\/select>\n<\/div>\n\n\n<div>\n<label>Complexit\u00e9<\/label>\n\n<select id=\"jgComplexity\">\n  <option value=\"1\">\u00c9pur\u00e9<\/option>\n  <option value=\"2\" selected>Prestige<\/option>\n  <option value=\"3\">Royal<\/option>\n<\/select>\n<\/div>\n\n<\/div>\n\n\n<label style=\"margin-top:16px\">Couleur d&#8217;\u00e9mail<\/label>\n\n<div class=\"palette\">\n\n<button class=\"swatch\"\nstyle=\"background:#125b4b\"\nonclick=\"jgSetEnamel('#125b4b')\"><\/button>\n\n<button class=\"swatch\"\nstyle=\"background:#163b6c\"\nonclick=\"jgSetEnamel('#163b6c')\"><\/button>\n\n<button class=\"swatch\"\nstyle=\"background:#9b322f\"\nonclick=\"jgSetEnamel('#9b322f')\"><\/button>\n\n<button class=\"swatch\"\nstyle=\"background:#101010\"\nonclick=\"jgSetEnamel('#101010')\"><\/button>\n\n<button class=\"swatch\"\nstyle=\"background:#efe3c2\"\nonclick=\"jgSetEnamel('#efe3c2')\"><\/button>\n\n<\/div>\n\n\n<button class=\"jg-btn\" onclick=\"jgGenerate()\">\n\u2728 G\u00c9N\u00c9RER LE BIJOU\n<\/button>\n\n<button\nclass=\"jg-btn\"\nstyle=\"\nmargin-top:9px;\nbackground:#13261e;\ncolor:white;\nborder:1px solid rgba(216,178,93,.3)\n\"\nonclick=\"jgRandom()\">\n\ud83c\udfb2 SURPRENDS-MOI\n<\/button>\n\n<button\nclass=\"jg-btn\"\nstyle=\"\nmargin-top:9px;\nbackground:#13261e;\ncolor:white;\nborder:1px solid rgba(216,178,93,.3)\n\"\nonclick=\"jgDownload()\">\n\u2b07 ENREGISTRER LE VISUEL\n<\/button>\n\n<\/div>\n\n\n<!-- APER\u00c7U -->\n\n<div>\n\n<div class=\"jg-canvas\" id=\"jgCanvas\">\n\n<svg\nid=\"jgSvg\"\nviewBox=\"0 0 600 600\"\nxmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<\/svg>\n\n<\/div>\n\n<div class=\"jg-caption\" id=\"jgCaption\">\n<strong>Collection MZA<\/strong><br>\nVotre cr\u00e9ation appara\u00eetra ici.\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<script>\n(function(){\n\nlet enamel=\"#125b4b\";\n\n\nconst METALS={\n silver:{\n   light:\"#f6f8f8\",\n   base:\"#bcc5c7\",\n   dark:\"#687276\"\n },\n gold:{\n   light:\"#fff0a7\",\n   base:\"#d7ad43\",\n   dark:\"#856418\"\n },\n rose:{\n   light:\"#ffd5c8\",\n   base:\"#c98273\",\n   dark:\"#78463f\"\n },\n bronze:{\n   light:\"#ddb882\",\n   base:\"#956739\",\n   dark:\"#50331c\"\n }\n};\n\n\nconst STONES={\n emerald:\"#0b7d59\",\n ruby:\"#9e2231\",\n sapphire:\"#204fa1\",\n turquoise:\"#31aeb3\",\n amber:\"#cb791e\",\n pearl:\"#eee9d8\"\n};\n\n\nfunction val(id){\n return document.getElementById(id).value;\n}\n\n\nwindow.jgSetEnamel=function(color){\n enamel=color;\n jgGenerate();\n};\n\n\nfunction star(cx,cy,r1,r2,count){\n\n let pts=[];\n\n for(let i=0;i<count*2;i++){\n\n  let angle=\n  -Math.PI\/2+\n  i*Math.PI\/count;\n\n  let r=\n  i%2===0?r1:r2;\n\n  pts.push(\n   (cx+Math.cos(angle)*r)+\",\"+\n   (cy+Math.sin(angle)*r)\n  );\n\n }\n\n return pts.join(\" \");\n}\n\n\nfunction ornament(cx,cy,size,metal,stone){\n\n const pattern=val(\"jgPattern\");\n\n if(pattern===\"star\"){\n\n  return `\n  <polygon\n   points=\"${star(cx,cy,size,size*.46,8)}\"\n   fill=\"${enamel}\"\n   stroke=\"${metal.light}\"\n   stroke-width=\"7\"\n  \/>\n\n  <circle\n   cx=\"${cx}\"\n   cy=\"${cy}\"\n   r=\"${size*.22}\"\n   fill=\"${stone}\"\n   stroke=\"${metal.light}\"\n   stroke-width=\"5\"\n  \/>\n  `;\n }\n\n\n if(pattern===\"diamond\"){\n\n  return `\n  <polygon\n   points=\"\n   ${cx},${cy-size}\n   ${cx+size},${cy}\n   ${cx},${cy+size}\n   ${cx-size},${cy}\n   \"\n   fill=\"${enamel}\"\n   stroke=\"${metal.light}\"\n   stroke-width=\"7\"\n  \/>\n\n  <circle\n   cx=\"${cx}\"\n   cy=\"${cy}\"\n   r=\"${size*.22}\"\n   fill=\"${stone}\"\n  \/>\n  `;\n }\n\n\n if(pattern===\"floral\"){\n\n  return `\n  <g fill=\"${enamel}\" stroke=\"${metal.light}\" stroke-width=\"5\">\n\n   <ellipse cx=\"${cx}\" cy=\"${cy-size*.4}\"\n   rx=\"${size*.33}\" ry=\"${size*.58}\"\/>\n\n   <ellipse cx=\"${cx}\" cy=\"${cy+size*.4}\"\n   rx=\"${size*.33}\" ry=\"${size*.58}\"\/>\n\n   <ellipse cx=\"${cx-size*.4}\" cy=\"${cy}\"\n   rx=\"${size*.58}\" ry=\"${size*.33}\"\/>\n\n   <ellipse cx=\"${cx+size*.4}\" cy=\"${cy}\"\n   rx=\"${size*.58}\" ry=\"${size*.33}\"\/>\n\n  <\/g>\n\n  <circle\n   cx=\"${cx}\"\n   cy=\"${cy}\"\n   r=\"${size*.23}\"\n   fill=\"${stone}\"\n   stroke=\"${metal.light}\"\n   stroke-width=\"5\"\n  \/>\n  `;\n }\n\n\n return `\n <rect\n  x=\"${cx-size*.7}\"\n  y=\"${cy-size*.7}\"\n  width=\"${size*1.4}\"\n  height=\"${size*1.4}\"\n  transform=\"rotate(45 ${cx} ${cy})\"\n  fill=\"${enamel}\"\n  stroke=\"${metal.light}\"\n  stroke-width=\"7\"\n \/>\n\n <circle\n  cx=\"${cx}\"\n  cy=\"${cy}\"\n  r=\"${size*.23}\"\n  fill=\"${stone}\"\n \/>\n `;\n}\n\n\nfunction fibule(metal,stone,complexity){\n\n let extras=\"\";\n\n if(complexity>=2){\n\n  extras+=`\n  <circle cx=\"220\" cy=\"385\" r=\"17\"\n  fill=\"${stone}\" stroke=\"${metal.light}\" stroke-width=\"5\"\/>\n\n  <circle cx=\"380\" cy=\"385\" r=\"17\"\n  fill=\"${stone}\" stroke=\"${metal.light}\" stroke-width=\"5\"\/>\n  `;\n }\n\n if(complexity>=3){\n\n  extras+=`\n  <circle cx=\"260\" cy=\"430\" r=\"12\" fill=\"${stone}\"\/>\n  <circle cx=\"300\" cy=\"445\" r=\"12\" fill=\"${stone}\"\/>\n  <circle cx=\"340\" cy=\"430\" r=\"12\" fill=\"${stone}\"\/>\n  `;\n }\n\n return `\n <g>\n\n <polygon\n points=\"300,85 455,360 145,360\"\n fill=\"${metal.base}\"\n stroke=\"${metal.light}\"\n stroke-width=\"12\"\n \/>\n\n <polygon\n points=\"300,125 415,335 185,335\"\n fill=\"${enamel}\"\n opacity=\".92\"\n \/>\n\n ${ornament(300,275,78,metal,stone)}\n\n <line\n x1=\"155\" y1=\"385\"\n x2=\"445\" y2=\"385\"\n stroke=\"${metal.dark}\"\n stroke-width=\"15\"\n stroke-linecap=\"round\"\n \/>\n\n ${extras}\n\n <\/g>\n `;\n}\n\n\nfunction pendentif(metal,stone,complexity){\n\n return `\n <g>\n\n <circle\n cx=\"300\"\n cy=\"285\"\n r=\"145\"\n fill=\"${metal.base}\"\n stroke=\"${metal.light}\"\n stroke-width=\"12\"\n \/>\n\n <circle\n cx=\"300\"\n cy=\"285\"\n r=\"112\"\n fill=\"${enamel}\"\n stroke=\"${metal.dark}\"\n stroke-width=\"5\"\n \/>\n\n ${ornament(300,285,75,metal,stone)}\n\n <rect\n x=\"276\"\n y=\"90\"\n width=\"48\"\n height=\"75\"\n rx=\"22\"\n fill=\"none\"\n stroke=\"${metal.base}\"\n stroke-width=\"18\"\n \/>\n\n ${complexity>=3 ? `\n <circle cx=\"230\" cy=\"415\" r=\"15\" fill=\"${stone}\"\/>\n <circle cx=\"300\" cy=\"435\" r=\"15\" fill=\"${stone}\"\/>\n <circle cx=\"370\" cy=\"415\" r=\"15\" fill=\"${stone}\"\/>\n `:\"\"}\n\n <\/g>\n `;\n}\n\n\nfunction collier(metal,stone,complexity){\n\n let pendants=\"\";\n\n const count=\n complexity===3?7:\n complexity===2?5:3;\n\n for(let i=0;i<count;i++){\n\n  let x=\n  190+i*(220\/(count-1));\n\n  let dy=\n  Math.abs(i-(count-1)\/2)*18;\n\n  pendants+=`\n  <circle\n   cx=\"${x}\"\n   cy=\"${365-dy}\"\n   r=\"${i==Math.floor(count\/2)?34:24}\"\n   fill=\"${enamel}\"\n   stroke=\"${metal.light}\"\n   stroke-width=\"7\"\n  \/>\n\n  <circle\n   cx=\"${x}\"\n   cy=\"${365-dy}\"\n   r=\"${i==Math.floor(count\/2)?13:9}\"\n   fill=\"${stone}\"\n  \/>\n  `;\n }\n\n return `\n <path\n d=\"M125 175 Q300 500 475 175\"\n fill=\"none\"\n stroke=\"${metal.base}\"\n stroke-width=\"22\"\n stroke-linecap=\"round\"\n \/>\n\n ${pendants}\n `;\n}\n\n\nfunction bracelet(metal,stone,complexity){\n\n return `\n <ellipse\n cx=\"300\"\n cy=\"300\"\n rx=\"180\"\n ry=\"115\"\n fill=\"none\"\n stroke=\"${metal.base}\"\n stroke-width=\"${complexity*18+30}\"\n \/>\n\n ${ornament(\n  300,\n  185,\n  complexity===3?62:48,\n  metal,\n  stone\n )}\n `;\n}\n\n\nfunction ring(metal,stone,complexity){\n\n return `\n <circle\n cx=\"300\"\n cy=\"350\"\n r=\"125\"\n fill=\"none\"\n stroke=\"${metal.base}\"\n stroke-width=\"50\"\n \/>\n\n <circle\n cx=\"300\"\n cy=\"190\"\n r=\"${complexity===3?85:65}\"\n fill=\"${enamel}\"\n stroke=\"${metal.light}\"\n stroke-width=\"12\"\n \/>\n\n ${ornament(\n  300,\n  190,\n  complexity===3?48:36,\n  metal,\n  stone\n )}\n `;\n}\n\n\nfunction earrings(metal,stone,complexity){\n\n function one(x){\n\n  return `\n  <circle\n   cx=\"${x}\"\n   cy=\"145\"\n   r=\"25\"\n   fill=\"${stone}\"\n   stroke=\"${metal.light}\"\n   stroke-width=\"6\"\n  \/>\n\n  <line\n   x1=\"${x}\"\n   y1=\"170\"\n   x2=\"${x}\"\n   y2=\"215\"\n   stroke=\"${metal.base}\"\n   stroke-width=\"10\"\n  \/>\n\n  <circle\n   cx=\"${x}\"\n   cy=\"315\"\n   r=\"${complexity===3?92:75}\"\n   fill=\"${metal.base}\"\n   stroke=\"${metal.light}\"\n   stroke-width=\"9\"\n  \/>\n\n  ${ornament(\n   x,\n   315,\n   complexity===3?55:43,\n   metal,\n   stone\n  )}\n  `;\n }\n\n return one(195)+one(405);\n}\n\n\nwindow.jgGenerate=function(){\n\n const type=val(\"jgType\");\n const style=val(\"jgStyle\");\n const metalName=val(\"jgMetal\");\n const stoneName=val(\"jgStone\");\n const complexity=parseInt(val(\"jgComplexity\"));\n\n const metal=METALS[metalName];\n const stone=STONES[stoneName];\n\n let drawing=\"\";\n\n if(type===\"fibule\"){\n  drawing=fibule(metal,stone,complexity);\n }\n\n if(type===\"pendentif\"){\n  drawing=pendentif(metal,stone,complexity);\n }\n\n if(type===\"collier\"){\n  drawing=collier(metal,stone,complexity);\n }\n\n if(type===\"bracelet\"){\n  drawing=bracelet(metal,stone,complexity);\n }\n\n if(type===\"bague\"){\n  drawing=ring(metal,stone,complexity);\n }\n\n if(type===\"boucles\"){\n  drawing=earrings(metal,stone,complexity);\n }\n\n\n document.getElementById(\"jgSvg\").innerHTML=`\n\n <defs>\n\n <radialGradient id=\"metalGlow\">\n\n <stop offset=\"0%\"\n stop-color=\"${metal.light}\"\/>\n\n <stop offset=\"65%\"\n stop-color=\"${metal.base}\"\/>\n\n <stop offset=\"100%\"\n stop-color=\"${metal.dark}\"\/>\n\n <\/radialGradient>\n\n <\/defs>\n\n <circle\n cx=\"300\"\n cy=\"300\"\n r=\"260\"\n fill=\"none\"\n stroke=\"rgba(125,90,37,.12)\"\n stroke-width=\"2\"\n \/>\n\n ${drawing}\n `;\n\n\n const labels={\n\n fibule:\"Fibule\",\n pendentif:\"Pendentif\",\n collier:\"Collier\",\n boucles:\"Boucles d'oreilles\",\n bracelet:\"Bracelet\",\n bague:\"Bague\"\n\n };\n\n\n document.getElementById(\"jgCaption\").innerHTML=`\n\n <strong>\n ${labels[type]} \u00b7 Collection ${style.toUpperCase()}\n <\/strong>\n\n <br>\n\n M\u00e9tal : ${metalName}\n \u00b7 Pierre : ${stoneName}\n \u00b7 Motif : ${val(\"jgPattern\")}\n \u00b7 Niveau : ${\n complexity===3\n ? \"Prestige Royal\"\n : complexity===2\n ? \"Prestige\"\n : \"\u00c9pur\u00e9\"\n }\n\n <br><br>\n\n <span style=\"color:#f2d78e\">\n CONCEPT VISUEL MZA \u00b7 PR\u00caT POUR FICHE TECHNIQUE\n <\/span>\n `;\n\n};\n\n\nwindow.jgRandom=function(){\n\n const choose=function(id){\n\n  const el=\n  document.getElementById(id);\n\n  el.selectedIndex=\n  Math.floor(\n   Math.random()*el.options.length\n  );\n\n };\n\n choose(\"jgType\");\n choose(\"jgStyle\");\n choose(\"jgMetal\");\n choose(\"jgStone\");\n choose(\"jgPattern\");\n choose(\"jgComplexity\");\n\n const colors=[\n \"#125b4b\",\n \"#163b6c\",\n \"#9b322f\",\n \"#101010\",\n \"#efe3c2\",\n \"#76315d\"\n ];\n\n enamel=\n colors[\n  Math.floor(Math.random()*colors.length)\n ];\n\n jgGenerate();\n\n};\n\n\nwindow.jgDownload=function(){\n\n const svg=\n document.getElementById(\"jgSvg\");\n\n const serializer=\n new XMLSerializer();\n\n let source=\n serializer.serializeToString(svg);\n\n if(!source.match(\/^<svg[^>]+xmlns=\/)){\n  source=\n  source.replace(\n   \/^<svg\/,\n   '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"'\n  );\n }\n\n const blob=\n new Blob(\n  [source],\n  {type:\"image\/svg+xml;charset=utf-8\"}\n );\n\n const url=\n URL.createObjectURL(blob);\n\n const link=\n document.createElement(\"a\");\n\n link.href=url;\n\n link.download=\n \"MZA-Bijou-Marocain.svg\";\n\n document.body.appendChild(link);\n\n link.click();\n\n document.body.removeChild(link);\n\n URL.revokeObjectURL(url);\n\n};\n\n\n[\n \"jgType\",\n \"jgStyle\",\n \"jgMetal\",\n \"jgStone\",\n \"jgPattern\",\n \"jgComplexity\"\n].forEach(function(id){\n\n document\n .getElementById(id)\n .addEventListener(\n  \"change\",\n  jgGenerate\n );\n\n});\n\n\njgGenerate();\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\uddf2\ud83c\udde6 MAROC ZAIN ACADEMY \u00b7 M\u00c9TIERS D&#8217;ART Atelier Bijoux Marocains Explorer le patrimoine joaillier marocain, comprendre ses formes, mati\u00e8res et techniques puis apprendre \u00e0 imaginer, chiffrer et pr\u00e9senter une collection contemporaine inspir\u00e9e des savoir-faire du Maroc. COMMENCER L&#8217;ATELIER OUVRIR LE STUDIO DE CR\u00c9ATION Patrimoine \u00d7 cr\u00e9ation \u00d7 m\u00e9tier Du bijou patrimonial \u00e0 la collection signature. [&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-1839","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1839","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=1839"}],"version-history":[{"count":2,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1839\/revisions"}],"predecessor-version":[{"id":1845,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1839\/revisions\/1845"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/media?parent=1839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}