{"id":1778,"date":"2026-09-06T21:09:00","date_gmt":"2026-09-06T21:09:00","guid":{"rendered":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/?page_id=1778"},"modified":"2026-09-06T21:09:00","modified_gmt":"2026-09-06T21:09:00","slug":"master-class-poterie","status":"publish","type":"page","link":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/master-class-poterie\/","title":{"rendered":"Master Class Poterie"},"content":{"rendered":"\n<!-- ============================================================\n MAROC ZAIN ACADEMY\n MASTER CLASS POTERIE & CERAMIQUE MAROCAINE\n PRO MAX \u00b7 40 ATELIERS\n============================================================ -->\n\n<div id=\"mza-poterie\">\n\n<style>\n#mza-poterie,#mza-poterie *{box-sizing:border-box}\n#mza-poterie{\n --green:#073b2d;\n --green2:#0c5943;\n --gold:#c8a35c;\n --gold2:#ecd89e;\n --ivory:#faf6ed;\n --cream:#eee2cf;\n --clay:#a95839;\n --clay2:#c77b56;\n --blue:#17647a;\n --wine:#702738;\n --ink:#181511;\n --muted:#746c62;\n --line:#d8c6a6;\n --dark:#10130f;\n width:100%;overflow:hidden;\n background:var(--ivory);color:var(--ink);\n font-family:Arial,Helvetica,sans-serif\n}\n#mza-poterie button,#mza-poterie input,#mza-poterie select{font:inherit}\n#mza-poterie button{cursor:pointer}\n#mza-poterie img{display:block;width:100%}\n#mza-poterie .wrap{width:min(1380px,calc(100% - 34px));margin:auto}\n#mza-poterie .eyebrow{color:#98723a;font-size:9px;font-weight:900;letter-spacing:3px;text-transform:uppercase}\n#mza-poterie h2{margin:14px 0 22px;color:var(--green);font:400 clamp(44px,6vw,72px)\/.96 Georgia,serif}\n#mza-poterie h2 em{display:block;color:var(--wine);font-weight:400}\n#mza-poterie .section-head{max-width:900px;margin:0 auto 56px;text-align:center}\n#mza-poterie .section-head p{color:var(--muted);line-height:1.8}\n#mza-poterie .gold-line{width:76px;height:1px;margin:24px auto;background:var(--gold)}\n\n\/* VISUAL FALLBACK *\/\n#mza-poterie .visual{\n position:relative;overflow:hidden;\n background:\n radial-gradient(circle at 25% 25%,rgba(236,216,158,.3),transparent 26%),\n radial-gradient(circle at 75% 65%,rgba(169,88,57,.32),transparent 31%),\n linear-gradient(135deg,#073b2d,#6e3829)\n}\n#mza-poterie .visual:after{\n content:\"MZA \u00b7 POTERIE MAROCAINE\";\n position:absolute;z-index:1;left:24px;bottom:22px;\n color:rgba(255,255,255,.18);font:18px Georgia,serif;letter-spacing:4px\n}\n#mza-poterie .visual img{height:100%;object-fit:cover;position:relative;z-index:2}\n\n\/* HERO *\/\n#mza-poterie .hero{min-height:96vh;position:relative;display:flex;align-items:center;background:var(--green);color:#fff}\n#mza-poterie .hero-bg{position:absolute;inset:0}\n#mza-poterie .hero-bg img{height:100%;object-fit:cover}\n#mza-poterie .hero-overlay{\n position:absolute;inset:0;z-index:3;\n background:linear-gradient(90deg,rgba(3,24,17,.98),rgba(3,24,17,.86) 40%,rgba(3,24,17,.35) 72%,rgba(0,0,0,.15)),\n linear-gradient(180deg,transparent,rgba(0,0,0,.48))\n}\n#mza-poterie .hero-frame{position:absolute;z-index:4;inset:24px;border:1px solid rgba(236,216,158,.58)}\n#mza-poterie .hero-frame:after{content:\"\";position:absolute;inset:8px;border:1px solid rgba(236,216,158,.16)}\n#mza-poterie .hero-copy{width:min(870px,88%);position:relative;z-index:5;margin-left:max(5vw,40px);padding:100px 0}\n#mza-poterie .seal{width:108px;height:108px;display:grid;place-items:center;margin-bottom:30px;border:1px solid var(--gold);border-radius:50%;color:var(--gold2);font:20px Georgia,serif;letter-spacing:5px}\n#mza-poterie .hero .eyebrow{color:var(--gold2)}\n#mza-poterie .hero h1{margin:17px 0 24px;font:400 clamp(58px,8.2vw,112px)\/.87 Georgia,serif;letter-spacing:-4px}\n#mza-poterie .hero h1 span,#mza-poterie .hero h1 em{display:block}\n#mza-poterie .hero h1 em{color:var(--gold2);font-weight:400}\n#mza-poterie .hero p{max-width:730px;color:rgba(255,255,255,.78);font:17px\/1.8 Georgia,serif}\n#mza-poterie .actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}\n#mza-poterie .btn-gold,#mza-poterie .btn-line,#mza-poterie .btn-green{\n min-height:49px;padding:14px 20px;font-size:9px;font-weight:900;letter-spacing:1.1px\n}\n#mza-poterie .btn-gold{border:1px solid var(--gold);background:var(--gold);color:#21190e}\n#mza-poterie .btn-line{border:1px solid var(--gold);background:rgba(0,0,0,.15);color:#fff}\n#mza-poterie .btn-green{border:1px solid var(--green);background:var(--green);color:#fff}\n\n\/* NAV *\/\n#mza-poterie .nav{background:#fff;border-bottom:1px solid var(--line)}\n#mza-poterie .nav .wrap{display:flex;justify-content:center;flex-wrap:wrap}\n#mza-poterie .nav button{padding:16px 14px;border:0;background:transparent;color:var(--green);font-size:9px;font-weight:900}\n\n\/* INTRO *\/\n#mza-poterie .intro{padding:120px 0}\n#mza-poterie .intro-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:85px;align-items:center}\n#mza-poterie .intro-photo{height:690px;position:relative}\n#mza-poterie .intro-photo:before{content:\"\";position:absolute;inset:-15px 15px 15px -15px;border:1px solid var(--gold)}\n#mza-poterie .intro-photo img{height:100%;object-fit:cover}\n#mza-poterie .chapter{color:rgba(200,163,92,.22);font:110px\/.8 Georgia,serif}\n#mza-poterie .intro p{color:var(--muted);line-height:1.9}\n#mza-poterie .signature{margin-top:27px;padding-top:22px;border-top:1px solid var(--line);color:var(--green);font:italic 21px Georgia,serif}\n\n\/* REGIONS *\/\n#mza-poterie .regions{padding:110px 0;background:var(--green);color:#fff}\n#mza-poterie .regions h2{color:#fff}\n#mza-poterie .regions h2 em{color:var(--gold2)}\n#mza-poterie .regions .section-head p{color:rgba(255,255,255,.61)}\n#mza-poterie .region-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(236,216,158,.27);border-left:1px solid rgba(236,216,158,.27)}\n#mza-poterie .region{min-height:270px;padding:31px 25px;border-right:1px solid rgba(236,216,158,.27);border-bottom:1px solid rgba(236,216,158,.27)}\n#mza-poterie .region small{color:var(--gold2);font:18px Georgia,serif}\n#mza-poterie .region h3{margin:17px 0 9px;font:400 28px Georgia,serif}\n#mza-poterie .region p{color:rgba(255,255,255,.58);font-size:12px;line-height:1.7}\n\n\/* PROCESS *\/\n#mza-poterie .process{padding:115px 0;background:#fff}\n#mza-poterie .process-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}\n#mza-poterie .step{min-height:220px;padding:26px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}\n#mza-poterie .step strong{color:var(--gold);font:25px Georgia,serif}\n#mza-poterie .step h3{margin:16px 0 9px;color:var(--green);font:400 22px Georgia,serif}\n#mza-poterie .step p{color:var(--muted);font-size:11px;line-height:1.6}\n\n\/* PROGRAMME *\/\n#mza-poterie .programme{padding:115px 0;background:var(--cream)}\n#mza-poterie .tools{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:25px}\n#mza-poterie #pot-search{width:min(440px,100%);padding:14px;border:1px solid #cbb78e;background:#fff}\n#mza-poterie .filters{display:flex;flex-wrap:wrap;gap:7px}\n#mza-poterie .filter{padding:11px 13px;border:1px solid #cbb78e;background:#fff;color:var(--green);font-size:9px;font-weight:900}\n#mza-poterie .filter.active{background:var(--green);color:#fff;border-color:var(--green)}\n#mza-poterie .progress{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-bottom:42px;padding:25px;background:var(--green);color:#fff}\n#mza-poterie .count{color:var(--gold2);font:39px Georgia,serif}\n#mza-poterie .track{height:7px;margin-top:8px;background:rgba(255,255,255,.16)}\n#mza-poterie .fill{height:100%;width:0;background:var(--gold2)}\n#mza-poterie .reset{padding:10px 12px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:9px}\n#mza-poterie .level-title{margin:54px 0 22px;padding-bottom:13px;border-bottom:1px solid #c8b58d}\n#mza-poterie .level-title small{color:#927039;font-weight:900;letter-spacing:3px}\n#mza-poterie .level-title h3{margin:7px 0 0;color:var(--green);font:400 31px Georgia,serif}\n#mza-poterie .courses{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}\n#mza-poterie .course{min-height:320px;padding:0;border:1px solid #d5c4a4;background:#fff;text-align:left;transition:.25s;overflow:hidden}\n#mza-poterie .course:hover{transform:translateY(-4px);box-shadow:0 14px 35px rgba(0,0,0,.08)}\n#mza-poterie .course.done{border-color:var(--gold)}\n#mza-poterie .course-top{\n height:125px;display:flex;align-items:flex-end;padding:18px;\n background:\n radial-gradient(circle at 25% 30%,rgba(255,255,255,.12),transparent 23%),\n linear-gradient(135deg,var(--green),var(--clay))\n}\n#mza-poterie .course-no{color:var(--gold2);font:30px Georgia,serif}\n#mza-poterie .course-body{padding:18px}\n#mza-poterie .course h4{margin:0 0 9px;color:var(--green);font:400 20px Georgia,serif}\n#mza-poterie .course p{color:var(--muted);font-size:11px;line-height:1.55}\n#mza-poterie .enter{display:block;margin-top:12px;color:var(--wine);font-size:8px;font-weight:900}\n\n\/* DETAIL *\/\n#mza-poterie .detail{display:none;grid-template-columns:.72fr 1.28fr;margin:35px 0;border:1px solid var(--gold);background:#fff}\n#mza-poterie .detail.show{display:grid}\n#mza-poterie .detail-art{\n min-height:570px;display:grid;place-items:center;padding:35px;\n background:\n radial-gradient(circle at 30% 30%,rgba(236,216,158,.18),transparent 24%),\n linear-gradient(145deg,#073b2d,#713c2d)\n}\n#mza-poterie .pot-shape{\n width:min(290px,75%);aspect-ratio:.82;position:relative;\n background:linear-gradient(90deg,#8d472f,#c87850 45%,#9e5036);\n border-radius:18% 18% 42% 42% \/ 8% 8% 32% 32%;\n box-shadow:inset -20px 0 30px rgba(0,0,0,.15),0 30px 45px rgba(0,0,0,.2)\n}\n#mza-poterie .pot-shape:before{\n content:\"\";position:absolute;width:48%;height:14%;left:26%;top:-7%;\n border-radius:50%;background:#7e3e2b;border:8px solid #b86644\n}\n#mza-poterie .pot-shape:after{\n content:\"MZA\";position:absolute;left:0;right:0;top:43%;text-align:center;\n color:rgba(255,255,255,.35);font:32px Georgia,serif;letter-spacing:7px\n}\n#mza-poterie .detail-copy{position:relative;padding:45px}\n#mza-poterie .detail-copy h3{margin:10px 0;color:var(--green);font:400 clamp(36px,5vw,51px) Georgia,serif}\n#mza-poterie .detail-copy>p{color:var(--muted);line-height:1.8}\n#mza-poterie .close{position:absolute;right:13px;top:13px;width:38px;height:38px;border:1px solid var(--line);background:#fff}\n#mza-poterie .meta{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}\n#mza-poterie .meta div{padding:14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}\n#mza-poterie .meta small{display:block;color:#947039;font-size:8px}\n#mza-poterie .meta strong{display:block;margin-top:5px;color:var(--green)}\n#mza-poterie .learning{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n#mza-poterie .learning-box{padding:17px;background:var(--ivory)}\n#mza-poterie .learning-box h4{margin:0 0 9px;color:var(--green);font:400 18px Georgia,serif}\n#mza-poterie .learning-box ul{margin:0;padding-left:17px;color:var(--muted);font-size:12px;line-height:1.7}\n#mza-poterie .mission{margin-top:15px;padding:17px;border-left:3px solid var(--gold);background:#f2e7d5;color:var(--muted);font-size:12px;line-height:1.7}\n#mza-poterie .detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}\n\n\/* LAB *\/\n#mza-poterie .lab{padding:115px 0;background:#fff}\n#mza-poterie .lab-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}\n#mza-poterie .panel{padding:30px;border:1px solid var(--line);background:var(--ivory)}\n#mza-poterie .panel h3{margin:0 0 9px;color:var(--green);font:400 30px Georgia,serif}\n#mza-poterie .panel>p{color:var(--muted);font-size:12px;line-height:1.65}\n#mza-poterie .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}\n#mza-poterie label{display:block;color:#947039;font-size:8px;font-weight:900}\n#mza-poterie input,#mza-poterie select{width:100%;margin-top:5px;padding:12px;border:1px solid #d4c4a5;background:#fff}\n#mza-poterie .lab-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}\n#mza-poterie .result{margin-top:20px;padding:20px;background:var(--green);color:#fff}\n#mza-poterie .result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.17)}\n#mza-poterie .result-grid div{padding:15px;background:var(--green)}\n#mza-poterie .result-grid small{display:block;color:var(--gold2);font-size:8px}\n#mza-poterie .result-grid strong{display:block;margin-top:6px;font:21px Georgia,serif}\n\n\/* DECORATOR *\/\n#mza-poterie .decorator{min-height:520px;display:grid;place-items:center;margin-top:20px;padding:30px;background:#e8dcc6;border:1px solid var(--line)}\n#mza-poterie #pot-svg{width:100%;max-width:520px}\n\n\/* FINAL *\/\n#mza-poterie .final{padding:125px 0;background:var(--dark);color:#fff}\n#mza-poterie .final-box{max-width:1050px;position:relative;margin:auto;padding:76px 45px;border:1px solid var(--gold);text-align:center}\n#mza-poterie .final-box:after{content:\"\";position:absolute;inset:8px;border:1px solid rgba(236,216,158,.24);pointer-events:none}\n#mza-poterie .final-box>*{position:relative;z-index:2}\n#mza-poterie .final .eyebrow{color:var(--gold2)}\n#mza-poterie .final h2{color:#fff}\n#mza-poterie .final h2 em{color:var(--gold2)}\n#mza-poterie .final p{max-width:760px;margin:auto;color:rgba(255,255,255,.65);line-height:1.8}\n#mza-poterie .final-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:38px 0;border-top:1px solid rgba(236,216,158,.25);border-bottom:1px solid rgba(236,216,158,.25)}\n#mza-poterie .final-grid div{padding:21px 8px;border-right:1px solid rgba(236,216,158,.25)}\n#mza-poterie .final-grid div:last-child{border-right:0}\n#mza-poterie .final-grid strong{display:block;color:var(--gold2);font:31px Georgia,serif}\n#mza-poterie .final-grid span{color:rgba(255,255,255,.48);font-size:8px}\n\n@media(max-width:1100px){\n #mza-poterie .courses{grid-template-columns:repeat(3,1fr)}\n #mza-poterie .region-grid{grid-template-columns:repeat(2,1fr)}\n #mza-poterie .process-grid{grid-template-columns:repeat(3,1fr)}\n}\n@media(max-width:900px){\n #mza-poterie .intro-grid,#mza-poterie .detail.show,#mza-poterie .lab-grid{grid-template-columns:1fr}\n}\n@media(max-width:680px){\n #mza-poterie .hero-copy{margin:auto}\n #mza-poterie .hero h1{letter-spacing:-1px}\n #mza-poterie .courses,#mza-poterie .region-grid,#mza-poterie .process-grid,\n #mza-poterie .learning,#mza-poterie .meta,#mza-poterie .form-grid,\n #mza-poterie .result-grid,#mza-poterie .final-grid{grid-template-columns:1fr}\n #mza-poterie .progress{grid-template-columns:1fr}\n}\n<\/style>\n\n\n<!-- HERO -->\n<section class=\"hero\">\n <div class=\"hero-bg visual\"><\/div>\n <div class=\"hero-overlay\"><\/div>\n <div class=\"hero-frame\"><\/div>\n\n <div class=\"hero-copy\">\n  <div class=\"seal\">MZA<\/div>\n  <div class=\"eyebrow\">MAROC ZAIN ACADEMY \u00b7 M\u00c9TIERS D&#8217;ART DU MAROC<\/div>\n\n  <h1>\n   <span>Master Class<\/span>\n   <em>Poterie<\/em>\n  <\/h1>\n\n  <p>\n   Argile, modelage, tour, s\u00e9chage, cuisson, \u00e9maillage,\n   d\u00e9cor et cr\u00e9ation : apprendre la c\u00e9ramique marocaine\n   depuis la terre brute jusqu&#8217;\u00e0 la pi\u00e8ce signature.\n  <\/p>\n\n  <div class=\"actions\">\n   <button type=\"button\" class=\"btn-gold\" data-scroll=\"pot-programme\">\n    LES 40 ATELIERS\n   <\/button>\n   <button type=\"button\" class=\"btn-line\" data-scroll=\"pot-lab\">\n    OUVRIR LE POTERIE LAB\n   <\/button>\n  <\/div>\n <\/div>\n<\/section>\n\n\n<!-- NAV -->\n<nav class=\"nav\">\n <div class=\"wrap\">\n  <button type=\"button\" data-scroll=\"pot-intro\">L&#8217;ART DU POTIER<\/button>\n  <button type=\"button\" data-scroll=\"pot-regions\">TERROIRS<\/button>\n  <button type=\"button\" data-scroll=\"pot-process\">FABRICATION<\/button>\n  <button type=\"button\" data-scroll=\"pot-programme\">40 ATELIERS<\/button>\n  <button type=\"button\" data-scroll=\"pot-lab\">POTERIE LAB<\/button>\n  <button type=\"button\" data-scroll=\"pot-final\">PROJET FINAL<\/button>\n <\/div>\n<\/nav>\n\n\n<!-- INTRO -->\n<section class=\"intro\" id=\"pot-intro\">\n <div class=\"wrap intro-grid\">\n\n  <div class=\"intro-photo visual\">\n   <svg viewBox=\"0 0 600 800\" style=\"height:100%;position:relative;z-index:2\">\n    <rect width=\"600\" height=\"800\" fill=\"#e5d2b5\"\/>\n    <ellipse cx=\"300\" cy=\"685\" rx=\"190\" ry=\"35\" fill=\"#b79669\"\/>\n    <path d=\"M210 160 Q300 115 390 160 L410 470 Q405 640 300 675 Q195 640 190 470 Z\"\n          fill=\"#a95839\"\/>\n    <ellipse cx=\"300\" cy=\"160\" rx=\"90\" ry=\"27\" fill=\"#713622\"\/>\n    <ellipse cx=\"300\" cy=\"160\" rx=\"65\" ry=\"15\" fill=\"#241713\"\/>\n    <path d=\"M205 300 Q300 350 395 300\" fill=\"none\" stroke=\"#f0d9a1\" stroke-width=\"12\"\/>\n    <path d=\"M198 360 Q300 410 402 360\" fill=\"none\" stroke=\"#17647a\" stroke-width=\"15\"\/>\n    <path d=\"M195 430 Q300 480 405 430\" fill=\"none\" stroke=\"#f0d9a1\" stroke-width=\"9\"\/>\n    <text x=\"300\" y=\"550\" text-anchor=\"middle\" fill=\"#f3d99a\" font-size=\"35\" font-family=\"Georgia\">MZA<\/text>\n   <\/svg>\n  <\/div>\n\n  <div>\n   <div class=\"chapter\">01<\/div>\n   <div class=\"eyebrow\">LA TERRE &#038; LE GESTE<\/div>\n   <h2>Fa\u00e7onner <em>la mati\u00e8re.<\/em><\/h2>\n\n   <p>\n    La poterie transforme une mati\u00e8re \u00e9l\u00e9mentaire \u2014 la terre \u2014\n    en objet d&#8217;usage, r\u00e9cipient, \u00e9l\u00e9ment architectural ou cr\u00e9ation d\u00e9corative.\n   <\/p>\n\n   <p>\n    Le potier doit comprendre l&#8217;argile avant de la modeler :\n    humidit\u00e9, plasticit\u00e9, \u00e9paisseur, s\u00e9chage et comportement \u00e0 la cuisson\n    d\u00e9terminent la r\u00e9ussite de la pi\u00e8ce.\n   <\/p>\n\n   <p>\n    MZA aborde ensuite le d\u00e9cor, l&#8217;\u00e9mail et les grandes traditions\n    r\u00e9gionales afin de relier technique, patrimoine et cr\u00e9ation.\n   <\/p>\n\n   <div class=\"signature\">\n    MAROC ZAIN ACADEMY \u00b7 \u00c9cole des M\u00e9tiers d&#8217;Art du Maroc\n   <\/div>\n  <\/div>\n\n <\/div>\n<\/section>\n\n\n<!-- REGIONS -->\n<section class=\"regions\" id=\"pot-regions\">\n <div class=\"wrap\">\n\n  <header class=\"section-head\">\n   <div class=\"eyebrow\">TERROIRS C\u00c9RAMIQUES<\/div>\n   <h2>Quatre univers <em>\u00e0 explorer<\/em><\/h2>\n   <div class=\"gold-line\"><\/div>\n   <p>\n    Les productions marocaines varient par leurs techniques,\n    usages, formes et traditions d\u00e9coratives.\n   <\/p>\n  <\/header>\n\n  <div class=\"region-grid\">\n\n   <article class=\"region\">\n    <small>I<\/small>\n    <h3>F\u00e8s<\/h3>\n    <p>\n     C\u00e9ramique urbaine, d\u00e9cor peint, g\u00e9om\u00e9trie,\n     calligraphie d\u00e9corative et tradition du bleu.\n    <\/p>\n   <\/article>\n\n   <article class=\"region\">\n    <small>II<\/small>\n    <h3>Safi<\/h3>\n    <p>\n     Grand centre potier marocain,\n     production utilitaire et d\u00e9corative,\n     ateliers et savoir-faire c\u00e9ramiques.\n    <\/p>\n   <\/article>\n\n   <article class=\"region\">\n    <small>III<\/small>\n    <h3>Tamegroute<\/h3>\n    <p>\n     Tradition du Sud marocain connue notamment\n     pour ses tonalit\u00e9s vertes caract\u00e9ristiques.\n    <\/p>\n   <\/article>\n\n   <article class=\"region\">\n    <small>IV<\/small>\n    <h3>Rif<\/h3>\n    <p>\n     Traditions rurales de modelage,\n     formes utilitaires et d\u00e9cors graphiques.\n    <\/p>\n   <\/article>\n\n  <\/div>\n <\/div>\n<\/section>\n\n\n<!-- PROCESS -->\n<section class=\"process\" id=\"pot-process\">\n <div class=\"wrap\">\n\n  <header class=\"section-head\">\n   <div class=\"eyebrow\">DU SOL \u00c0 L&#8217;OBJET<\/div>\n   <h2>Six \u00e9tapes <em>fondamentales<\/em><\/h2>\n   <div class=\"gold-line\"><\/div>\n  <\/header>\n\n  <div class=\"process-grid\">\n   <article class=\"step\"><strong>01<\/strong><h3>Pr\u00e9parer<\/h3><p>Choisir, nettoyer et pr\u00e9parer l&#8217;argile.<\/p><\/article>\n   <article class=\"step\"><strong>02<\/strong><h3>Fa\u00e7onner<\/h3><p>Modelage, colombin, plaque ou tournage.<\/p><\/article>\n   <article class=\"step\"><strong>03<\/strong><h3>S\u00e9cher<\/h3><p>Contr\u00f4ler progressivement l&#8217;\u00e9vacuation de l&#8217;eau.<\/p><\/article>\n   <article class=\"step\"><strong>04<\/strong><h3>Cuire<\/h3><p>Transformer durablement la pi\u00e8ce par la chaleur.<\/p><\/article>\n   <article class=\"step\"><strong>05<\/strong><h3>D\u00e9corer<\/h3><p>Motifs, engobes, peinture et composition.<\/p><\/article>\n   <article class=\"step\"><strong>06<\/strong><h3>\u00c9mailler<\/h3><p>Apporter finition, couleur et protection selon la technique.<\/p><\/article>\n  <\/div>\n\n <\/div>\n<\/section>\n\n\n<!-- PROGRAMME -->\n<section class=\"programme\" id=\"pot-programme\">\n <div class=\"wrap\">\n\n  <header class=\"section-head\">\n   <div class=\"eyebrow\">MASTER CLASS POTERIE MAROCAINE \u00b7 PRO MAX<\/div>\n   <h2>40 Ateliers<\/h2>\n   <div class=\"gold-line\"><\/div>\n   <p>De la pr\u00e9paration de l&#8217;argile \u00e0 la collection finale.<\/p>\n  <\/header>\n\n  <div class=\"tools\">\n   <input type=\"search\" id=\"pot-search\"\n          placeholder=\"Rechercher : argile, tour, Safi, \u00e9mail\u2026\">\n\n   <div class=\"filters\">\n    <button type=\"button\" class=\"filter active\" data-level=\"all\">TOUS<\/button>\n    <button type=\"button\" class=\"filter\" data-level=\"1\">ARGILE<\/button>\n    <button type=\"button\" class=\"filter\" data-level=\"2\">FA\u00c7ONNAGE<\/button>\n    <button type=\"button\" class=\"filter\" data-level=\"3\">D\u00c9COR<\/button>\n    <button type=\"button\" class=\"filter\" data-level=\"4\">ATELIER PRO<\/button>\n   <\/div>\n  <\/div>\n\n  <div class=\"progress\">\n   <strong class=\"count\" id=\"pot-count\">0\/40<\/strong>\n   <div>\n    <strong>Progression Master Class<\/strong>\n    <div class=\"track\"><div class=\"fill\" id=\"pot-fill\"><\/div><\/div>\n   <\/div>\n   <button type=\"button\" class=\"reset\" id=\"pot-reset\">R\u00c9INITIALISER<\/button>\n  <\/div>\n\n  <div id=\"pot-detail\" class=\"detail\"><\/div>\n  <div id=\"pot-courses\"><\/div>\n\n <\/div>\n<\/section>\n\n\n<!-- LAB -->\n<section class=\"lab\" id=\"pot-lab\">\n <div class=\"wrap\">\n\n  <header class=\"section-head\">\n   <div class=\"eyebrow\">MZA POTERIE LAB<\/div>\n   <h2>Atelier <em>du C\u00e9ramiste<\/em><\/h2>\n   <div class=\"gold-line\"><\/div>\n   <p>\n    Calculer le retrait d&#8217;une pi\u00e8ce puis cr\u00e9er\n    une \u00e9tude d\u00e9corative avant r\u00e9alisation.\n   <\/p>\n  <\/header>\n\n  <div class=\"lab-grid\">\n\n   <div class=\"panel\">\n    <h3>Calculateur de Retrait<\/h3>\n    <p>\n     Le retrait r\u00e9el d\u00e9pend de l&#8217;argile et du cycle de cuisson.\n     Le calcul sert ici \u00e0 pr\u00e9parer les dimensions du projet.\n    <\/p>\n\n    <div class=\"form-grid\">\n\n     <label>\n      DIMENSION FINALE \u00b7 CM\n      <input type=\"number\" id=\"pc-final\" value=\"30\" min=\"1\">\n     <\/label>\n\n     <label>\n      RETRAIT TOTAL \u00b7 %\n      <input type=\"number\" id=\"pc-shrink\" value=\"12\" min=\"0\" max=\"40\">\n     <\/label>\n\n     <label>\n      NOMBRE DE PI\u00c8CES\n      <input type=\"number\" id=\"pc-qty\" value=\"12\" min=\"1\">\n     <\/label>\n\n     <label>\n      POIDS ARGILE \/ PI\u00c8CE \u00b7 KG\n      <input type=\"number\" id=\"pc-weight\" value=\"1.2\" min=\".01\" step=\".1\">\n     <\/label>\n\n    <\/div>\n\n    <div class=\"lab-actions\">\n     <button type=\"button\" class=\"btn-green\" id=\"pc-calculate\">\n      CALCULER\n     <\/button>\n    <\/div>\n\n    <div class=\"result\">\n     <div class=\"result-grid\">\n      <div>\n       <small>DIMENSION \u00c0 FA\u00c7ONNER<\/small>\n       <strong id=\"pc-start\">\u2014<\/strong>\n      <\/div>\n      <div>\n       <small>ARGILE TH\u00c9ORIQUE<\/small>\n       <strong id=\"pc-clay\">\u2014<\/strong>\n      <\/div>\n      <div>\n       <small>+ 10 % DE MARGE<\/small>\n       <strong id=\"pc-total\">\u2014<\/strong>\n      <\/div>\n     <\/div>\n    <\/div>\n   <\/div>\n\n\n   <div class=\"panel\">\n\n    <h3>Studio de D\u00e9coration<\/h3>\n    <p>\n     G\u00e9n\u00e9rateur p\u00e9dagogique de compositions\n     pour pr\u00e9parer une assiette ou un plat d\u00e9coratif.\n    <\/p>\n\n    <div class=\"form-grid\">\n\n     <label>\n      STYLE\n      <select id=\"pc-pattern\">\n       <option value=\"fes\">G\u00e9om\u00e9trie bleue<\/option>\n       <option value=\"green\">Vert du Sud<\/option>\n       <option value=\"geo\">G\u00e9om\u00e9trique<\/option>\n       <option value=\"floral\">Floral<\/option>\n      <\/select>\n     <\/label>\n\n     <label>\n      COMPLEXIT\u00c9\n      <select id=\"pc-density\">\n       <option value=\"8\">\u00c9pur\u00e9e<\/option>\n       <option value=\"12\" selected>Classique<\/option>\n       <option value=\"16\">Fine<\/option>\n      <\/select>\n     <\/label>\n\n    <\/div>\n\n    <div class=\"lab-actions\">\n     <button type=\"button\" class=\"btn-green\" id=\"pc-generate\">\n      CR\u00c9ER LE D\u00c9COR\n     <\/button>\n    <\/div>\n\n    <div class=\"decorator\">\n     <svg id=\"pot-svg\"\n          viewBox=\"0 0 600 600\"\n          xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/svg>\n    <\/div>\n\n   <\/div>\n\n  <\/div>\n <\/div>\n<\/section>\n\n\n<!-- FINAL -->\n<section class=\"final\" id=\"pot-final\">\n <div class=\"wrap\">\n\n  <div class=\"final-box\">\n\n   <div class=\"eyebrow\">PROJET FINAL \u00b7 MZA M\u00c9TIERS D&#8217;ART<\/div>\n\n   <h2>\n    Collection\n    <em>Terre du Maroc<\/em>\n   <\/h2>\n\n   <p>\n    Concevoir une petite collection coh\u00e9rente :\n    formes, choix d&#8217;argile, d\u00e9cor, palette,\n    param\u00e8tres techniques, calcul mati\u00e8re\n    et pr\u00e9sentation finale.\n   <\/p>\n\n   <div class=\"final-grid\">\n    <div><strong>5<\/strong><span>PI\u00c8CES<\/span><\/div>\n    <div><strong>1<\/strong><span>PALETTE<\/span><\/div>\n    <div><strong>1<\/strong><span>FICHE TECHNIQUE<\/span><\/div>\n    <div><strong>1<\/strong><span>PR\u00c9SENTATION<\/span><\/div>\n   <\/div>\n\n   <p id=\"pot-final-status\">0\/40 ateliers valid\u00e9s.<\/p>\n\n   <br>\n\n   <button type=\"button\" class=\"btn-gold\" id=\"pot-start\">\n    COMMENCER LE PARCOURS\n   <\/button>\n\n  <\/div>\n <\/div>\n<\/section>\n\n\n<script>\n(function(){\n\"use strict\";\n\nconst DATA=[\n[1,1,\"Histoire de la poterie marocaine\",\"D\u00e9couvrir usages, territoires et grandes traditions.\",\"2 h\"],\n[2,1,\"Comprendre l'argile\",\"Plasticit\u00e9, humidit\u00e9 et comportement de la mati\u00e8re.\",\"3 h\"],\n[3,1,\"Types d'argiles\",\"Comparer les mati\u00e8res selon le projet.\",\"3 h\"],\n[4,1,\"Pr\u00e9paration de la terre\",\"Nettoyage, homog\u00e9n\u00e9isation et pr\u00e9paration.\",\"4 h\"],\n[5,1,\"P\u00e9trissage\",\"\u00c9liminer les poches d'air et homog\u00e9n\u00e9iser.\",\"3 h\"],\n[6,1,\"Humidit\u00e9 & plasticit\u00e9\",\"Trouver la consistance adapt\u00e9e au fa\u00e7onnage.\",\"3 h\"],\n[7,1,\"\u00c9paisseurs\",\"Ma\u00eetriser r\u00e9gularit\u00e9 et r\u00e9sistance.\",\"3 h\"],\n[8,1,\"Outils du potier\",\"Identifier les principaux outils d'atelier.\",\"2 h\"],\n[9,1,\"Organisation de l'atelier\",\"Pr\u00e9parer espaces, mati\u00e8res et stockage.\",\"3 h\"],\n[10,1,\"S\u00e9curit\u00e9 & poussi\u00e8res\",\"Adopter de bonnes pratiques d'atelier.\",\"2 h\"],\n\n[11,2,\"Modelage \u00e0 la main\",\"Construire une premi\u00e8re forme simple.\",\"4 h\"],\n[12,2,\"Technique du pinc\u00e9\",\"Fa\u00e7onner directement dans la masse.\",\"4 h\"],\n[13,2,\"Technique du colombin\",\"Monter progressivement les parois.\",\"5 h\"],\n[14,2,\"Technique de la plaque\",\"Cr\u00e9er formes et surfaces r\u00e9guli\u00e8res.\",\"5 h\"],\n[15,2,\"Initiation au tour\",\"Comprendre centrage et gestes fondamentaux.\",\"5 h\"],\n[16,2,\"Centrage\",\"Stabiliser la masse sur le tour.\",\"5 h\"],\n[17,2,\"Ouverture\",\"Cr\u00e9er l'espace int\u00e9rieur de la pi\u00e8ce.\",\"4 h\"],\n[18,2,\"Mont\u00e9e des parois\",\"Affiner et \u00e9lever la forme.\",\"5 h\"],\n[19,2,\"Tournassage\",\"Retravailler la pi\u00e8ce \u00e0 consistance cuir.\",\"4 h\"],\n[20,2,\"Anses & assemblages\",\"Assembler plusieurs \u00e9l\u00e9ments correctement.\",\"4 h\"],\n\n[21,3,\"S\u00e9chage contr\u00f4l\u00e9\",\"Limiter fissures et d\u00e9formations.\",\"3 h\"],\n[22,3,\"Premi\u00e8re cuisson\",\"Comprendre le principe de cuisson du biscuit.\",\"4 h\"],\n[23,3,\"Engobes\",\"Appliquer une couche color\u00e9e ou d\u00e9corative.\",\"4 h\"],\n[24,3,\"D\u00e9cor g\u00e9om\u00e9trique\",\"Construire un motif organis\u00e9.\",\"5 h\"],\n[25,3,\"D\u00e9cor floral\",\"\u00c9tudier rythmes et compositions v\u00e9g\u00e9tales.\",\"5 h\"],\n[26,3,\"C\u00e9ramique de F\u00e8s\",\"\u00c9tudier une tradition urbaine majeure.\",\"5 h\"],\n[27,3,\"Poterie de Safi\",\"Explorer formes et production du centre potier.\",\"5 h\"],\n[28,3,\"Tamegroute\",\"D\u00e9couvrir les productions et tonalit\u00e9s du Sud.\",\"4 h\"],\n[29,3,\"Poteries du Rif\",\"Observer les traditions rurales model\u00e9es.\",\"4 h\"],\n[30,3,\"\u00c9maillage\",\"Comprendre couverture et finition vitrifi\u00e9e.\",\"5 h\"],\n\n[31,4,\"Deuxi\u00e8me cuisson\",\"Comprendre le cycle apr\u00e8s \u00e9maillage.\",\"4 h\"],\n[32,4,\"D\u00e9fauts de cuisson\",\"Identifier fissures, d\u00e9formations et d\u00e9fauts d'\u00e9mail.\",\"4 h\"],\n[33,4,\"Calcul du retrait\",\"Dimensionner une pi\u00e8ce avant fa\u00e7onnage.\",\"4 h\"],\n[34,4,\"Calcul mati\u00e8re\",\"Estimer l'argile n\u00e9cessaire \u00e0 une s\u00e9rie.\",\"3 h\"],\n[35,4,\"Fiche technique\",\"Documenter mati\u00e8re, dimensions et processus.\",\"4 h\"],\n[36,4,\"Contr\u00f4le qualit\u00e9\",\"\u00c9valuer forme, stabilit\u00e9, surface et finition.\",\"4 h\"],\n[37,4,\"Prix de revient\",\"Additionner mati\u00e8re, \u00e9nergie, temps et pertes.\",\"4 h\"],\n[38,4,\"Collection de table\",\"Cr\u00e9er une famille coh\u00e9rente d'objets.\",\"6 h\"],\n[39,4,\"Pi\u00e8ce Signature MZA\",\"D\u00e9velopper une cr\u00e9ation personnelle.\",\"7 h\"],\n[40,4,\"Projet Final\",\"Pr\u00e9senter une collection compl\u00e8te et son dossier.\",\"Projet\"]\n].map(x=>({\n id:x[0],level:x[1],title:x[2],desc:x[3],duration:x[4],\n objectives:[\n  \"Comprendre le principe technique\",\n  \"Pr\u00e9parer correctement la mati\u00e8re\",\n  \"R\u00e9aliser l'exercice propos\u00e9\",\n  \"Contr\u00f4ler la qualit\u00e9 obtenue\"\n ],\n skills:[\"Observation\",\"Pr\u00e9cision\",\"Ma\u00eetrise de la mati\u00e8re\",\"Contr\u00f4le qualit\u00e9\"],\n mission:x[0]===40\n ?\"Cr\u00e9er une collection de cinq pi\u00e8ces accompagn\u00e9e de sa palette, de ses fiches techniques et d'une pr\u00e9sentation finale.\"\n :\"Produire un exercice ou un \u00e9chantillon correspondant \u00e0 l'atelier et documenter le r\u00e9sultat.\"\n}));\n\nconst levels={\n 1:\"Terre \u00b7 Mati\u00e8re \u00b7 Atelier\",\n 2:\"Modelage \u00b7 Tour \u00b7 Formes\",\n 3:\"Cuisson \u00b7 D\u00e9cor \u00b7 Traditions\",\n 4:\"C\u00e9ramiste \u00b7 Collection \u00b7 Projet\"\n};\n\nfunction load(){\n try{\n  const a=JSON.parse(localStorage.getItem(\"mzaPoterieProgress\")||\"[]\");\n  return Array.isArray(a)?a:[];\n }catch(e){return[]}\n}\n\nlet done=load();\nlet active=\"all\";\n\nfunction save(){\n try{localStorage.setItem(\"mzaPoterieProgress\",JSON.stringify(done))}catch(e){}\n}\n\nfunction progress(){\n const n=done.length;\n document.getElementById(\"pot-count\").textContent=n+\"\/40\";\n document.getElementById(\"pot-fill\").style.width=(n\/40*100)+\"%\";\n document.getElementById(\"pot-final-status\").textContent=\n n===40?\"40\/40 ateliers valid\u00e9s \u00b7 Projet final accessible.\":n+\"\/40 ateliers valid\u00e9s.\";\n}\n\nfunction render(){\n const q=document.getElementById(\"pot-search\").value.toLowerCase().trim();\n let html=\"\";\n\n [1,2,3,4].forEach(level=>{\n  const list=DATA.filter(c=>\n   c.level===level &&\n   (active===\"all\"||String(c.level)===active) &&\n   (!q||(c.title+\" \"+c.desc).toLowerCase().includes(q))\n  );\n\n  if(!list.length)return;\n\n  html+=`\n   <div class=\"level-title\">\n    <small>NIVEAU ${level}<\/small>\n    <h3>${levels[level]}<\/h3>\n   <\/div>\n   <div class=\"courses\">\n  `;\n\n  list.forEach(c=>{\n   html+=`\n    <button type=\"button\"\n      class=\"course ${done.includes(c.id)?\"done\":\"\"}\"\n      data-pot-course=\"${c.id}\">\n\n     <div class=\"course-top\">\n      <span class=\"course-no\">${String(c.id).padStart(2,\"0\")}<\/span>\n     <\/div>\n\n     <div class=\"course-body\">\n      <h4>${c.title}<\/h4>\n      <p>${c.desc}<\/p>\n      <span class=\"enter\">\n       ${done.includes(c.id)?\"\u2713 ATELIER VALID\u00c9\":\"OUVRIR L'ATELIER \u2192\"}\n      <\/span>\n     <\/div>\n    <\/button>\n   `;\n  });\n\n  html+=\"<\/div>\";\n });\n\n document.getElementById(\"pot-courses\").innerHTML=html;\n\n document.querySelectorAll(\"[data-pot-course]\").forEach(btn=>{\n  btn.onclick=()=>openCourse(Number(btn.dataset.potCourse));\n });\n}\n\nfunction openCourse(id){\n const c=DATA.find(x=>x.id===id);\n if(!c)return;\n\n const d=document.getElementById(\"pot-detail\");\n\n d.innerHTML=`\n  <div class=\"detail-art\">\n   <div class=\"pot-shape\"><\/div>\n  <\/div>\n\n  <div class=\"detail-copy\">\n   <button type=\"button\" class=\"close\" id=\"pot-close\">\u00d7<\/button>\n\n   <div class=\"eyebrow\">\n    ATELIER ${String(c.id).padStart(2,\"0\")} \u00b7 ${levels[c.level]}\n   <\/div>\n\n   <h3>${c.title}<\/h3>\n   <p>${c.desc}<\/p>\n\n   <div class=\"meta\">\n    <div><small>DUR\u00c9E<\/small><strong>${c.duration}<\/strong><\/div>\n    <div><small>NIVEAU<\/small><strong>${c.level}\/4<\/strong><\/div>\n    <div><small>PARCOURS<\/small><strong>${c.id}\/40<\/strong><\/div>\n   <\/div>\n\n   <div class=\"learning\">\n    <div class=\"learning-box\">\n     <h4>Objectifs<\/h4>\n     <ul>${c.objectives.map(x=>\"<li>\"+x+\"<\/li>\").join(\"\")}<\/ul>\n    <\/div>\n    <div class=\"learning-box\">\n     <h4>Comp\u00e9tences<\/h4>\n     <ul>${c.skills.map(x=>\"<li>\"+x+\"<\/li>\").join(\"\")}<\/ul>\n    <\/div>\n   <\/div>\n\n   <div class=\"mission\">\n    <strong>MISSION MZA<\/strong><br><br>${c.mission}\n   <\/div>\n\n   <div class=\"detail-actions\">\n    <button type=\"button\" class=\"btn-green\" id=\"pot-valid\">\n     ${done.includes(c.id)?\"\u2713 ATELIER VALID\u00c9\":\"VALIDER L'ATELIER\"}\n    <\/button>\n\n    ${c.id<40?`\n     <button type=\"button\" class=\"btn-green\" id=\"pot-next\">\n      ATELIER SUIVANT \u2192\n     <\/button>`:\"\"}\n   <\/div>\n  <\/div>\n `;\n\n d.classList.add(\"show\");\n d.scrollIntoView({behavior:\"smooth\",block:\"start\"});\n\n document.getElementById(\"pot-close\").onclick=()=>d.classList.remove(\"show\");\n\n document.getElementById(\"pot-valid\").onclick=()=>{\n  if(!done.includes(c.id)){\n   done.push(c.id);\n   done.sort((a,b)=>a-b);\n   save();\n  }\n  progress();\n  render();\n  openCourse(c.id);\n };\n\n const next=document.getElementById(\"pot-next\");\n if(next)next.onclick=()=>openCourse(c.id+1);\n}\n\n\/* FILTERS *\/\ndocument.querySelectorAll(\"#mza-poterie .filter\").forEach(btn=>{\n btn.onclick=()=>{\n  document.querySelectorAll(\"#mza-poterie .filter\")\n   .forEach(x=>x.classList.remove(\"active\"));\n  btn.classList.add(\"active\");\n  active=btn.dataset.level;\n  render();\n };\n});\n\ndocument.getElementById(\"pot-search\").oninput=render;\n\n\/* RESET *\/\ndocument.getElementById(\"pot-reset\").onclick=()=>{\n if(!confirm(\"R\u00e9initialiser toute la progression Poterie ?\"))return;\n done=[];\n save();\n progress();\n render();\n document.getElementById(\"pot-detail\").classList.remove(\"show\");\n};\n\n\/* NAV *\/\nfunction go(id){\n const el=document.getElementById(id);\n if(el)el.scrollIntoView({behavior:\"smooth\",block:\"start\"});\n}\n\ndocument.querySelectorAll(\"#mza-poterie [data-scroll]\").forEach(btn=>{\n btn.onclick=()=>go(btn.dataset.scroll);\n});\n\ndocument.getElementById(\"pot-start\").onclick=()=>go(\"pot-programme\");\n\n\/* RETRAIT *\/\ndocument.getElementById(\"pc-calculate\").onclick=()=>{\n const finalSize=Math.max(1,Number(document.getElementById(\"pc-final\").value)||1);\n const shrink=Math.min(40,Math.max(0,Number(document.getElementById(\"pc-shrink\").value)||0));\n const qty=Math.max(1,Number(document.getElementById(\"pc-qty\").value)||1);\n const weight=Math.max(.01,Number(document.getElementById(\"pc-weight\").value)||.01);\n\n const factor=1-(shrink\/100);\n const start=finalSize\/factor;\n const clay=qty*weight;\n const total=clay*1.10;\n\n document.getElementById(\"pc-start\").textContent=start.toFixed(1)+\" cm\";\n document.getElementById(\"pc-clay\").textContent=clay.toFixed(1)+\" kg\";\n document.getElementById(\"pc-total\").textContent=total.toFixed(1)+\" kg\";\n};\n\n\/* DECORATOR *\/\nfunction points(cx,cy,r,n,rot){\n let a=[];\n for(let i=0;i<n;i++){\n  let t=rot+i*Math.PI*2\/n;\n  a.push((cx+Math.cos(t)*r)+\",\"+(cy+Math.sin(t)*r));\n }\n return a.join(\" \");\n}\n\nfunction generate(){\n const svg=document.getElementById(\"pot-svg\");\n const style=document.getElementById(\"pc-pattern\").value;\n const n=Number(document.getElementById(\"pc-density\").value)||12;\n\n let main=\"#17647a\",second=\"#0a4c61\",accent=\"#c8a35c\";\n\n if(style===\"green\"){\n  main=\"#3f6b42\";second=\"#8c7a37\";accent=\"#d3b86b\";\n }\n if(style===\"geo\"){\n  main=\"#073b2d\";second=\"#a95839\";accent=\"#c8a35c\";\n }\n if(style===\"floral\"){\n  main=\"#17647a\";second=\"#702738\";accent=\"#6d914d\";\n }\n\n let html=`\n  <rect width=\"600\" height=\"600\" fill=\"#e8ddc9\"\/>\n  <circle cx=\"300\" cy=\"300\" r=\"260\" fill=\"#f7f0df\" stroke=\"${main}\" stroke-width=\"12\"\/>\n  <circle cx=\"300\" cy=\"300\" r=\"220\" fill=\"none\" stroke=\"${accent}\" stroke-width=\"5\"\/>\n `;\n\n for(let i=0;i<n;i++){\n  const a=-Math.PI\/2+i*Math.PI*2\/n;\n  const x=300+Math.cos(a)*185;\n  const y=300+Math.sin(a)*185;\n\n  if(style===\"floral\"){\n   html+=`\n    <ellipse cx=\"${x}\" cy=\"${y}\" rx=\"24\" ry=\"48\"\n      fill=\"${i%2?main:second}\"\n      transform=\"rotate(${a*180\/Math.PI+90} ${x} ${y})\"\/>\n   `;\n  }else{\n   html+=`\n    <polygon points=\"${points(x,y,30,4,Math.PI\/4)}\"\n      fill=\"${i%2?main:second}\"\n      stroke=\"${accent}\" stroke-width=\"3\"\/>\n   `;\n  }\n }\n\n html+=`\n  <polygon points=\"${points(300,300,105,8,Math.PI\/8)}\"\n    fill=\"${main}\" stroke=\"${accent}\" stroke-width=\"7\"\/>\n  <polygon points=\"${points(300,300,68,8,0)}\"\n    fill=\"${second}\" stroke=\"#f7f0df\" stroke-width=\"5\"\/>\n  <circle cx=\"300\" cy=\"300\" r=\"25\" fill=\"${accent}\"\/>\n `;\n\n svg.innerHTML=html;\n}\n\ndocument.getElementById(\"pc-generate\").onclick=generate;\n\n\/* INIT *\/\nrender();\nprogress();\ngenerate();\n\n})();\n<\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>MZA MAROC ZAIN ACADEMY \u00b7 M\u00c9TIERS D&#8217;ART DU MAROC Master Class Poterie Argile, modelage, tour, s\u00e9chage, cuisson, \u00e9maillage, d\u00e9cor et cr\u00e9ation : apprendre la c\u00e9ramique marocaine depuis la terre brute jusqu&#8217;\u00e0 la pi\u00e8ce signature. LES 40 ATELIERS OUVRIR LE POTERIE LAB L&#8217;ART DU POTIER TERROIRS FABRICATION 40 ATELIERS POTERIE LAB PROJET FINAL MZA 01 LA [&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-1778","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1778","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=1778"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1778\/revisions"}],"predecessor-version":[{"id":1780,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1778\/revisions\/1780"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/media?parent=1778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}