{"id":1775,"date":"2026-09-06T21:00:35","date_gmt":"2026-09-06T21:00:35","guid":{"rendered":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/?page_id=1775"},"modified":"2026-09-06T21:00:35","modified_gmt":"2026-09-06T21:00:35","slug":"master-class-tapis-marocain","status":"publish","type":"page","link":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/master-class-tapis-marocain\/","title":{"rendered":"Master Class Tapis Marocain"},"content":{"rendered":"\n<!-- ============================================================\n MAROC ZAIN ACADEMY\n MASTER CLASS TAPIS MAROCAIN\n ART DU TISSAGE \u00b7 PRO MAX\n WORDPRESS \/ ELEMENTOR\n============================================================ -->\n\n<div id=\"mza-tapis-marocain\">\n\n<style>\n#mza-tapis-marocain,\n#mza-tapis-marocain *{box-sizing:border-box}\n\n#mza-tapis-marocain{\n --green:#073b2d;\n --green2:#0b5741;\n --gold:#c8a35c;\n --gold2:#ebd69c;\n --ivory:#faf6ed;\n --cream:#eee2cf;\n --terracotta:#a54c35;\n --burgundy:#6f2435;\n --ink:#181511;\n --muted:#746c62;\n --line:#dac9a9;\n --white:#fff;\n --dark:#10130f;\n width:100%;\n overflow:hidden;\n background:var(--ivory);\n color:var(--ink);\n font-family:Arial,Helvetica,sans-serif;\n}\n\n#mza-tapis-marocain button,\n#mza-tapis-marocain input,\n#mza-tapis-marocain select{\n font:inherit;\n}\n\n#mza-tapis-marocain button{cursor:pointer}\n#mza-tapis-marocain img{display:block;width:100%}\n\n#mza-tapis-marocain .wrap{\n width:min(1380px,calc(100% - 34px));\n margin:auto;\n}\n\n#mza-tapis-marocain .eyebrow{\n color:#97713a;\n font-size:9px;\n font-weight:900;\n letter-spacing:3px;\n text-transform:uppercase;\n}\n\n#mza-tapis-marocain h2{\n margin:14px 0 22px;\n color:var(--green);\n font:400 clamp(44px,6vw,72px)\/.96 Georgia,serif;\n}\n\n#mza-tapis-marocain h2 em{\n display:block;\n color:var(--burgundy);\n font-weight:400;\n}\n\n#mza-tapis-marocain .section-head{\n max-width:900px;\n margin:0 auto 58px;\n text-align:center;\n}\n\n#mza-tapis-marocain .section-head p{\n color:var(--muted);\n line-height:1.8;\n}\n\n#mza-tapis-marocain .gold-line{\n width:76px;\n height:1px;\n margin:24px auto;\n background:var(--gold);\n}\n\n\/* IMAGE FALLBACK *\/\n\n#mza-tapis-marocain .visual{\n position:relative;\n overflow:hidden;\n background:\n radial-gradient(circle at 20% 20%,rgba(235,214,156,.28),transparent 25%),\n radial-gradient(circle at 80% 70%,rgba(165,76,53,.27),transparent 30%),\n linear-gradient(135deg,#073b2d,#49291e);\n}\n\n#mza-tapis-marocain .visual:after{\n content:\"MZA \u00b7 TAPIS MAROCAIN\";\n position:absolute;\n z-index:1;\n left:24px;\n bottom:22px;\n color:rgba(255,255,255,.17);\n font:19px Georgia,serif;\n letter-spacing:4px;\n}\n\n#mza-tapis-marocain .visual img{\n width:100%;\n height:100%;\n object-fit:cover;\n position:relative;\n z-index:2;\n}\n\n\n\/* ============================================================\n HERO\n============================================================ *\/\n\n#mza-tapis-marocain .hero{\n min-height:96vh;\n position:relative;\n display:flex;\n align-items:center;\n color:#fff;\n background:var(--green);\n}\n\n#mza-tapis-marocain .hero-photo{\n position:absolute;\n inset:0;\n}\n\n#mza-tapis-marocain .hero-photo img{\n height:100%;\n object-fit:cover;\n}\n\n#mza-tapis-marocain .hero-overlay{\n position:absolute;\n inset:0;\n z-index:3;\n background:\n linear-gradient(\n  90deg,\n  rgba(3,24,17,.98) 0%,\n  rgba(3,24,17,.86) 39%,\n  rgba(3,24,17,.38) 70%,\n  rgba(0,0,0,.18) 100%\n ),\n linear-gradient(180deg,transparent,rgba(0,0,0,.45));\n}\n\n#mza-tapis-marocain .hero-frame{\n position:absolute;\n z-index:4;\n inset:24px;\n border:1px solid rgba(235,214,156,.58);\n}\n\n#mza-tapis-marocain .hero-frame:after{\n content:\"\";\n position:absolute;\n inset:8px;\n border:1px solid rgba(235,214,156,.17);\n}\n\n#mza-tapis-marocain .hero-copy{\n width:min(860px,88%);\n position:relative;\n z-index:5;\n margin-left:max(5vw,40px);\n padding:100px 0;\n}\n\n#mza-tapis-marocain .seal{\n width:108px;\n height:108px;\n display:grid;\n place-items:center;\n margin-bottom:31px;\n border:1px solid var(--gold);\n border-radius:50%;\n color:var(--gold2);\n font:20px Georgia,serif;\n letter-spacing:5px;\n}\n\n#mza-tapis-marocain .hero .eyebrow{color:var(--gold2)}\n\n#mza-tapis-marocain .hero h1{\n margin:17px 0 24px;\n font:400 clamp(58px,8.5vw,116px)\/.87 Georgia,serif;\n letter-spacing:-4px;\n}\n\n#mza-tapis-marocain .hero h1 span,\n#mza-tapis-marocain .hero h1 em{display:block}\n\n#mza-tapis-marocain .hero h1 em{\n color:var(--gold2);\n font-weight:400;\n}\n\n#mza-tapis-marocain .hero p{\n max-width:720px;\n color:rgba(255,255,255,.78);\n font:17px\/1.8 Georgia,serif;\n}\n\n#mza-tapis-marocain .actions{\n display:flex;\n flex-wrap:wrap;\n gap:9px;\n margin-top:32px;\n}\n\n#mza-tapis-marocain .btn-gold,\n#mza-tapis-marocain .btn-outline,\n#mza-tapis-marocain .btn-green{\n min-height:50px;\n padding:14px 20px;\n font-size:9px;\n font-weight:900;\n letter-spacing:1.2px;\n}\n\n#mza-tapis-marocain .btn-gold{\n border:1px solid var(--gold);\n background:var(--gold);\n color:#21190e;\n}\n\n#mza-tapis-marocain .btn-outline{\n border:1px solid var(--gold);\n background:rgba(0,0,0,.15);\n color:#fff;\n}\n\n#mza-tapis-marocain .btn-green{\n border:1px solid var(--green);\n background:var(--green);\n color:#fff;\n}\n\n\n\/* NAV *\/\n\n#mza-tapis-marocain .nav{\n background:#fff;\n border-bottom:1px solid var(--line);\n}\n\n#mza-tapis-marocain .nav .wrap{\n display:flex;\n justify-content:center;\n flex-wrap:wrap;\n}\n\n#mza-tapis-marocain .nav button{\n padding:16px 15px;\n border:0;\n background:transparent;\n color:var(--green);\n font-size:9px;\n font-weight:900;\n}\n\n\n\/* INTRO *\/\n\n#mza-tapis-marocain .intro{\n padding:120px 0;\n}\n\n#mza-tapis-marocain .intro-grid{\n display:grid;\n grid-template-columns:.93fr 1.07fr;\n gap:85px;\n align-items:center;\n}\n\n#mza-tapis-marocain .intro-photo{\n height:700px;\n position:relative;\n}\n\n#mza-tapis-marocain .intro-photo:before{\n content:\"\";\n position:absolute;\n inset:-15px 15px 15px -15px;\n border:1px solid var(--gold);\n}\n\n#mza-tapis-marocain .intro-photo img{\n height:100%;\n object-fit:cover;\n}\n\n#mza-tapis-marocain .chapter{\n color:rgba(200,163,92,.22);\n font:110px\/.8 Georgia,serif;\n}\n\n#mza-tapis-marocain .intro p{\n color:var(--muted);\n line-height:1.9;\n}\n\n#mza-tapis-marocain .signature{\n margin-top:27px;\n padding-top:22px;\n border-top:1px solid var(--line);\n color:var(--green);\n font:italic 21px Georgia,serif;\n}\n\n\n\/* REGIONS *\/\n\n#mza-tapis-marocain .regions{\n padding:110px 0;\n background:var(--green);\n color:#fff;\n}\n\n#mza-tapis-marocain .regions h2{color:#fff}\n#mza-tapis-marocain .regions h2 em{color:var(--gold2)}\n\n#mza-tapis-marocain .regions .section-head p{\n color:rgba(255,255,255,.63);\n}\n\n#mza-tapis-marocain .region-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n border-top:1px solid rgba(235,214,156,.27);\n border-left:1px solid rgba(235,214,156,.27);\n}\n\n#mza-tapis-marocain .region-card{\n min-height:270px;\n padding:31px 25px;\n border-right:1px solid rgba(235,214,156,.27);\n border-bottom:1px solid rgba(235,214,156,.27);\n}\n\n#mza-tapis-marocain .region-card small{\n color:var(--gold2);\n font:18px Georgia,serif;\n}\n\n#mza-tapis-marocain .region-card h3{\n margin:17px 0 9px;\n font:400 27px Georgia,serif;\n}\n\n#mza-tapis-marocain .region-card p{\n color:rgba(255,255,255,.58);\n font-size:12px;\n line-height:1.7;\n}\n\n\n\/* COLLECTION VISUELLE *\/\n\n#mza-tapis-marocain .collection{\n padding:120px 0;\n background:#fff;\n}\n\n#mza-tapis-marocain .rug-grid{\n display:grid;\n grid-template-columns:repeat(2,1fr);\n gap:18px;\n}\n\n#mza-tapis-marocain .rug-card{\n min-height:600px;\n position:relative;\n overflow:hidden;\n border:0;\n padding:0;\n background:#153125;\n text-align:left;\n}\n\n#mza-tapis-marocain .rug-card img{\n height:600px;\n object-fit:cover;\n transition:.5s;\n}\n\n#mza-tapis-marocain .rug-card:hover img{\n transform:scale(1.025);\n}\n\n#mza-tapis-marocain .rug-card:before{\n content:\"\";\n position:absolute;\n inset:0;\n z-index:3;\n background:linear-gradient(180deg,transparent 38%,rgba(4,9,7,.92));\n}\n\n#mza-tapis-marocain .rug-copy{\n position:absolute;\n z-index:4;\n left:32px;\n right:32px;\n bottom:32px;\n color:#fff;\n}\n\n#mza-tapis-marocain .rug-copy small{\n color:var(--gold2);\n letter-spacing:2px;\n}\n\n#mza-tapis-marocain .rug-copy h3{\n margin:8px 0;\n font:400 40px Georgia,serif;\n}\n\n#mza-tapis-marocain .rug-copy p{\n color:rgba(255,255,255,.65);\n font-size:12px;\n line-height:1.6;\n}\n\n\n\/* PROGRAMME *\/\n\n#mza-tapis-marocain .programme{\n padding:115px 0;\n background:var(--cream);\n}\n\n#mza-tapis-marocain .tools{\n display:flex;\n justify-content:space-between;\n flex-wrap:wrap;\n gap:12px;\n margin-bottom:25px;\n}\n\n#mza-tapis-marocain #tapis-search{\n width:min(440px,100%);\n padding:14px;\n border:1px solid #cbb78e;\n background:#fff;\n}\n\n#mza-tapis-marocain .filters{\n display:flex;\n flex-wrap:wrap;\n gap:7px;\n}\n\n#mza-tapis-marocain .filter{\n padding:11px 13px;\n border:1px solid #cbb78e;\n background:#fff;\n color:var(--green);\n font-size:9px;\n font-weight:900;\n}\n\n#mza-tapis-marocain .filter.active{\n background:var(--green);\n color:#fff;\n border-color:var(--green);\n}\n\n#mza-tapis-marocain .progress{\n display:grid;\n grid-template-columns:auto 1fr auto;\n gap:20px;\n align-items:center;\n margin-bottom:42px;\n padding:25px;\n background:var(--green);\n color:#fff;\n}\n\n#mza-tapis-marocain .count{\n color:var(--gold2);\n font:39px Georgia,serif;\n}\n\n#mza-tapis-marocain .track{\n height:7px;\n margin-top:8px;\n background:rgba(255,255,255,.16);\n}\n\n#mza-tapis-marocain .fill{\n width:0;\n height:100%;\n background:var(--gold2);\n}\n\n#mza-tapis-marocain .reset{\n padding:10px 12px;\n border:1px solid rgba(255,255,255,.35);\n background:transparent;\n color:#fff;\n font-size:9px;\n}\n\n#mza-tapis-marocain .level-title{\n margin:54px 0 22px;\n padding-bottom:13px;\n border-bottom:1px solid #c8b58d;\n}\n\n#mza-tapis-marocain .level-title small{\n color:#927039;\n font-weight:900;\n letter-spacing:3px;\n}\n\n#mza-tapis-marocain .level-title h3{\n margin:7px 0 0;\n color:var(--green);\n font:400 31px Georgia,serif;\n}\n\n#mza-tapis-marocain .courses{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:14px;\n}\n\n#mza-tapis-marocain .course{\n min-height:340px;\n padding:0;\n overflow:hidden;\n border:1px solid #d5c4a4;\n background:#fff;\n text-align:left;\n transition:.25s;\n}\n\n#mza-tapis-marocain .course:hover{\n transform:translateY(-4px);\n box-shadow:0 14px 35px rgba(0,0,0,.08);\n}\n\n#mza-tapis-marocain .course.done{\n border-color:var(--gold);\n}\n\n#mza-tapis-marocain .course-img{\n height:165px;\n}\n\n#mza-tapis-marocain .course-img img{\n height:100%;\n object-fit:cover;\n}\n\n#mza-tapis-marocain .course-body{\n padding:18px;\n}\n\n#mza-tapis-marocain .course-no{\n color:var(--gold);\n font:17px Georgia,serif;\n}\n\n#mza-tapis-marocain .course h4{\n margin:9px 0;\n color:var(--green);\n font:400 20px Georgia,serif;\n}\n\n#mza-tapis-marocain .course p{\n color:var(--muted);\n font-size:11px;\n line-height:1.55;\n}\n\n#mza-tapis-marocain .enter{\n display:block;\n margin-top:12px;\n color:var(--burgundy);\n font-size:8px;\n font-weight:900;\n}\n\n\n\/* DETAIL *\/\n\n#mza-tapis-marocain .detail{\n display:none;\n grid-template-columns:.85fr 1.15fr;\n margin:35px 0;\n border:1px solid var(--gold);\n background:#fff;\n}\n\n#mza-tapis-marocain .detail.show{display:grid}\n\n#mza-tapis-marocain .detail-image{\n min-height:580px;\n}\n\n#mza-tapis-marocain .detail-image img{\n height:100%;\n min-height:580px;\n object-fit:cover;\n}\n\n#mza-tapis-marocain .detail-copy{\n position:relative;\n padding:45px;\n}\n\n#mza-tapis-marocain .detail-copy h3{\n margin:10px 0;\n color:var(--green);\n font:400 clamp(36px,5vw,51px) Georgia,serif;\n}\n\n#mza-tapis-marocain .detail-copy>p{\n color:var(--muted);\n line-height:1.8;\n}\n\n#mza-tapis-marocain .close{\n position:absolute;\n right:13px;\n top:13px;\n width:38px;\n height:38px;\n border:1px solid var(--line);\n background:#fff;\n}\n\n#mza-tapis-marocain .meta{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n margin:22px 0;\n border-top:1px solid var(--line);\n border-left:1px solid var(--line);\n}\n\n#mza-tapis-marocain .meta div{\n padding:14px;\n border-right:1px solid var(--line);\n border-bottom:1px solid var(--line);\n}\n\n#mza-tapis-marocain .meta small{\n display:block;\n color:#947039;\n font-size:8px;\n}\n\n#mza-tapis-marocain .meta strong{\n display:block;\n margin-top:5px;\n color:var(--green);\n}\n\n#mza-tapis-marocain .learning{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:12px;\n}\n\n#mza-tapis-marocain .learning-box{\n padding:17px;\n background:var(--ivory);\n}\n\n#mza-tapis-marocain .learning-box h4{\n margin:0 0 9px;\n color:var(--green);\n font:400 18px Georgia,serif;\n}\n\n#mza-tapis-marocain .learning-box ul{\n margin:0;\n padding-left:17px;\n color:var(--muted);\n font-size:12px;\n line-height:1.7;\n}\n\n#mza-tapis-marocain .mission{\n margin-top:15px;\n padding:17px;\n border-left:3px solid var(--gold);\n background:#f2e7d5;\n color:var(--muted);\n font-size:12px;\n line-height:1.7;\n}\n\n#mza-tapis-marocain .detail-actions{\n display:flex;\n flex-wrap:wrap;\n gap:8px;\n margin-top:18px;\n}\n\n\n\/* TAPIS LAB *\/\n\n#mza-tapis-marocain .lab{\n padding:115px 0;\n background:#fff;\n}\n\n#mza-tapis-marocain .lab-grid{\n display:grid;\n grid-template-columns:.9fr 1.1fr;\n gap:20px;\n}\n\n#mza-tapis-marocain .panel{\n padding:30px;\n border:1px solid var(--line);\n background:var(--ivory);\n}\n\n#mza-tapis-marocain .panel h3{\n margin:0 0 9px;\n color:var(--green);\n font:400 30px Georgia,serif;\n}\n\n#mza-tapis-marocain .panel>p{\n color:var(--muted);\n font-size:12px;\n line-height:1.65;\n}\n\n#mza-tapis-marocain .form-grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:10px;\n margin-top:20px;\n}\n\n#mza-tapis-marocain label{\n display:block;\n color:#947039;\n font-size:8px;\n font-weight:900;\n}\n\n#mza-tapis-marocain input,\n#mza-tapis-marocain select{\n width:100%;\n margin-top:5px;\n padding:12px;\n border:1px solid #d4c4a5;\n background:#fff;\n color:#222;\n}\n\n#mza-tapis-marocain .lab-actions{\n display:flex;\n flex-wrap:wrap;\n gap:8px;\n margin-top:18px;\n}\n\n#mza-tapis-marocain .result{\n margin-top:20px;\n padding:20px;\n background:var(--green);\n color:#fff;\n}\n\n#mza-tapis-marocain .result-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:1px;\n background:rgba(255,255,255,.17);\n}\n\n#mza-tapis-marocain .result-grid div{\n padding:15px;\n background:var(--green);\n}\n\n#mza-tapis-marocain .result-grid small{\n display:block;\n color:var(--gold2);\n font-size:8px;\n}\n\n#mza-tapis-marocain .result-grid strong{\n display:block;\n margin-top:6px;\n font:22px Georgia,serif;\n}\n\n\n\/* MOTIF *\/\n\n#mza-tapis-marocain .motif-stage{\n min-height:500px;\n display:grid;\n place-items:center;\n margin-top:20px;\n padding:20px;\n border:1px solid var(--line);\n background:#e9ddc8;\n}\n\n#mza-tapis-marocain #tapis-svg{\n width:100%;\n max-width:580px;\n background:#f4ead9;\n box-shadow:0 14px 35px rgba(0,0,0,.08);\n}\n\n\n\/* FINAL *\/\n\n#mza-tapis-marocain .final{\n padding:125px 0;\n background:var(--dark);\n color:#fff;\n}\n\n#mza-tapis-marocain .final-box{\n max-width:1050px;\n position:relative;\n margin:auto;\n padding:76px 45px;\n border:1px solid var(--gold);\n text-align:center;\n}\n\n#mza-tapis-marocain .final-box:after{\n content:\"\";\n position:absolute;\n inset:8px;\n border:1px solid rgba(235,214,156,.24);\n pointer-events:none;\n}\n\n#mza-tapis-marocain .final-box>*{\n position:relative;\n z-index:2;\n}\n\n#mza-tapis-marocain .final .eyebrow{color:var(--gold2)}\n#mza-tapis-marocain .final h2{color:#fff}\n#mza-tapis-marocain .final h2 em{color:var(--gold2)}\n\n#mza-tapis-marocain .final p{\n max-width:760px;\n margin:auto;\n color:rgba(255,255,255,.64);\n line-height:1.8;\n}\n\n#mza-tapis-marocain .final-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n margin:38px 0;\n border-top:1px solid rgba(235,214,156,.25);\n border-bottom:1px solid rgba(235,214,156,.25);\n}\n\n#mza-tapis-marocain .final-grid div{\n padding:21px 8px;\n border-right:1px solid rgba(235,214,156,.25);\n}\n\n#mza-tapis-marocain .final-grid div:last-child{border-right:0}\n\n#mza-tapis-marocain .final-grid strong{\n display:block;\n color:var(--gold2);\n font:31px Georgia,serif;\n}\n\n#mza-tapis-marocain .final-grid span{\n color:rgba(255,255,255,.48);\n font-size:8px;\n}\n\n\n\/* RESPONSIVE *\/\n\n@media(max-width:1100px){\n #mza-tapis-marocain .courses{grid-template-columns:repeat(3,1fr)}\n #mza-tapis-marocain .region-grid{grid-template-columns:repeat(2,1fr)}\n}\n\n@media(max-width:900px){\n #mza-tapis-marocain .intro-grid,\n #mza-tapis-marocain .detail.show,\n #mza-tapis-marocain .lab-grid{\n  grid-template-columns:1fr;\n }\n #mza-tapis-marocain .rug-grid{grid-template-columns:1fr}\n}\n\n@media(max-width:680px){\n #mza-tapis-marocain .hero-copy{margin:auto}\n #mza-tapis-marocain .hero h1{letter-spacing:-1px}\n\n #mza-tapis-marocain .courses,\n #mza-tapis-marocain .region-grid,\n #mza-tapis-marocain .learning,\n #mza-tapis-marocain .meta,\n #mza-tapis-marocain .form-grid,\n #mza-tapis-marocain .result-grid,\n #mza-tapis-marocain .final-grid{\n  grid-template-columns:1fr;\n }\n\n #mza-tapis-marocain .progress{grid-template-columns:1fr}\n}\n\n<\/style>\n\n\n<!-- ============================================================\n HERO\n============================================================ -->\n\n<section class=\"hero\">\n\n <div class=\"hero-photo visual\">\n   <img decoding=\"async\"\n     src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0018\/9156\/5614\/files\/Kenza_Co_About_us.png?v=1774379669\"\n     alt=\"Artisane marocaine tissant un tapis\">\n <\/div>\n\n <div class=\"hero-overlay\"><\/div>\n <div class=\"hero-frame\"><\/div>\n\n <div class=\"hero-copy\">\n\n   <div class=\"seal\">MZA<\/div>\n\n   <div class=\"eyebrow\">\n     MAROC ZAIN ACADEMY \u00b7 M\u00c9TIERS D&#8217;ART DU MAROC\n   <\/div>\n\n   <h1>\n     <span>Master Class<\/span>\n     <em>Tapis Marocain<\/em>\n   <\/h1>\n\n   <p>\n     Laine, filage, teinture, cha\u00eene, trame, nouage,\n     motifs, couleurs et finitions : entrer dans\n     l&#8217;univers du tapis marocain depuis la fibre brute\n     jusqu&#8217;\u00e0 la cr\u00e9ation d&#8217;une pi\u00e8ce signature.\n   <\/p>\n\n   <div class=\"actions\">\n\n     <button type=\"button\"\n       class=\"btn-gold\"\n       data-scroll=\"mza-tapis-programme\">\n       D\u00c9COUVRIR LES 40 ATELIERS\n     <\/button>\n\n     <button type=\"button\"\n       class=\"btn-outline\"\n       data-scroll=\"mza-tapis-lab\">\n       OUVRIR LE TAPIS LAB\n     <\/button>\n\n   <\/div>\n\n <\/div>\n\n<\/section>\n\n\n<!-- NAV -->\n\n<nav class=\"nav\">\n <div class=\"wrap\">\n\n   <button type=\"button\" data-scroll=\"mza-tapis-intro\">\n     L&#8217;ART DU TAPIS\n   <\/button>\n\n   <button type=\"button\" data-scroll=\"mza-tapis-regions\">\n     R\u00c9GIONS\n   <\/button>\n\n   <button type=\"button\" data-scroll=\"mza-tapis-collection\">\n     COLLECTION\n   <\/button>\n\n   <button type=\"button\" data-scroll=\"mza-tapis-programme\">\n     40 ATELIERS\n   <\/button>\n\n   <button type=\"button\" data-scroll=\"mza-tapis-lab\">\n     TAPIS LAB\n   <\/button>\n\n   <button type=\"button\" data-scroll=\"mza-tapis-final\">\n     PROJET FINAL\n   <\/button>\n\n <\/div>\n<\/nav>\n\n\n<!-- INTRO -->\n\n<section class=\"intro\" id=\"mza-tapis-intro\">\n\n <div class=\"wrap intro-grid\">\n\n   <div class=\"intro-photo visual\">\n     <img decoding=\"async\"\n       src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0018\/9156\/5614\/files\/Kenza_Co_About_us.png?v=1774379669\"\n       alt=\"Tissage traditionnel marocain\">\n   <\/div>\n\n   <div>\n\n     <div class=\"chapter\">01<\/div>\n\n     <div class=\"eyebrow\">\n       LA M\u00c9MOIRE TISS\u00c9E\n     <\/div>\n\n     <h2>\n       De la laine\n       <em>\u00e0 l&#8217;\u0153uvre.<\/em>\n     <\/h2>\n\n     <p>\n       Le tapis marocain est \u00e0 la fois objet d&#8217;usage,\n       cr\u00e9ation d\u00e9corative, travail textile et expression\n       culturelle.\n     <\/p>\n\n     <p>\n       Sa r\u00e9alisation mobilise la pr\u00e9paration de la laine,\n       le filage, la teinture, le montage du m\u00e9tier,\n       la ma\u00eetrise de la cha\u00eene et de la trame,\n       le nouage et la construction progressive du d\u00e9cor.\n     <\/p>\n\n     <p>\n       Les traditions diff\u00e8rent selon les territoires.\n       La Master Class MZA apprend donc \u00e0 reconna\u00eetre\n       les grandes familles sans r\u00e9duire le tapis marocain\n       \u00e0 un seul style.\n     <\/p>\n\n     <div class=\"signature\">\n       MAROC ZAIN ACADEMY \u00b7 Patrimoine textile du Maroc\n     <\/div>\n\n   <\/div>\n\n <\/div>\n\n<\/section>\n\n\n<!-- REGIONS -->\n\n<section class=\"regions\" id=\"mza-tapis-regions\">\n\n <div class=\"wrap\">\n\n   <header class=\"section-head\">\n     <div class=\"eyebrow\">G\u00c9OGRAPHIE DU TAPIS<\/div>\n     <h2>\n       Quatre univers\n       <em>\u00e0 distinguer<\/em>\n     <\/h2>\n     <div class=\"gold-line\"><\/div>\n     <p>\n       Des traditions, mati\u00e8res et expressions diff\u00e9rentes\n       selon les territoires.\n     <\/p>\n   <\/header>\n\n\n   <div class=\"region-grid\">\n\n     <article class=\"region-card\">\n       <small>I<\/small>\n       <h3>Beni Ouarain<\/h3>\n       <p>\n         Tapis \u00e0 laine g\u00e9n\u00e9reuse, souvent caract\u00e9ris\u00e9s\n         par des compositions g\u00e9om\u00e9triques \u00e9pur\u00e9es.\n       <\/p>\n     <\/article>\n\n     <article class=\"region-card\">\n       <small>II<\/small>\n       <h3>Azilal<\/h3>\n       <p>\n         Expression graphique vive,\n         variations de couleurs et compositions libres.\n       <\/p>\n     <\/article>\n\n     <article class=\"region-card\">\n       <small>III<\/small>\n       <h3>Taznakht<\/h3>\n       <p>\n         Tradition du Haut Atlas et de l&#8217;Anti-Atlas,\n         richesse des couleurs et g\u00e9om\u00e9tries \u00e9labor\u00e9es.\n       <\/p>\n     <\/article>\n\n     <article class=\"region-card\">\n       <small>IV<\/small>\n       <h3>Rabat<\/h3>\n       <p>\n         Tradition urbaine avec compositions structur\u00e9es,\n         m\u00e9daillons, bordures et organisation d\u00e9corative.\n       <\/p>\n     <\/article>\n\n   <\/div>\n\n <\/div>\n\n<\/section>\n\n\n<!-- COLLECTION -->\n\n<section class=\"collection\" id=\"mza-tapis-collection\">\n\n <div class=\"wrap\">\n\n   <header class=\"section-head\">\n\n     <div class=\"eyebrow\">\n       COLLECTION MZA\n     <\/div>\n\n     <h2>\n       Quatre \u00e9critures\n       <em>du tapis marocain<\/em>\n     <\/h2>\n\n     <div class=\"gold-line\"><\/div>\n\n   <\/header>\n\n\n   <div class=\"rug-grid\">\n\n     <button type=\"button\"\n       class=\"rug-card visual\"\n       data-course=\"23\">\n\n       <img decoding=\"async\"\n         src=\"https:\/\/js-rugs.com\/wp-content\/uploads\/2021\/01\/il_1588xN.2769949990_k63p.jpg\"\n         alt=\"Tapis Beni Ouarain\">\n\n       <div class=\"rug-copy\">\n         <small>ATLAS<\/small>\n         <h3>Beni Ouarain<\/h3>\n         <p>\n           Laine naturelle et construction g\u00e9om\u00e9trique.\n         <\/p>\n       <\/div>\n\n     <\/button>\n\n\n     <button type=\"button\"\n       class=\"rug-card visual\"\n       data-course=\"24\">\n\n       <img decoding=\"async\"\n         src=\"https:\/\/i.etsystatic.com\/12765903\/r\/il\/7289c0\/2255287039\/il_794xN.2255287039_q8ga.jpg\"\n         alt=\"Tapis Azilal\">\n\n       <div class=\"rug-copy\">\n         <small>HAUT ATLAS<\/small>\n         <h3>Azilal<\/h3>\n         <p>\n           Couleur, spontan\u00e9it\u00e9 et langage graphique.\n         <\/p>\n       <\/div>\n\n     <\/button>\n\n\n     <button type=\"button\"\n       class=\"rug-card visual\"\n       data-course=\"25\">\n\n       <img decoding=\"async\"\n         src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0018\/9156\/5614\/files\/Kenza_Co_About_us.png?v=1774379669\"\n         alt=\"Tissage artisanal\">\n\n       <div class=\"rug-copy\">\n         <small>SAVOIR-FAIRE<\/small>\n         <h3>L&#8217;Atelier<\/h3>\n         <p>\n           M\u00e9tier, laine, geste, tension et patience.\n         <\/p>\n       <\/div>\n\n     <\/button>\n\n\n     <button type=\"button\"\n       class=\"rug-card visual\"\n       data-course=\"39\">\n\n       <img decoding=\"async\"\n         src=\"https:\/\/js-rugs.com\/wp-content\/uploads\/2021\/01\/il_1588xN.2769949990_k63p.jpg\"\n         alt=\"Tapis marocain signature\">\n\n       <div class=\"rug-copy\">\n         <small>CR\u00c9ATION MZA<\/small>\n         <h3>Tapis Signature<\/h3>\n         <p>\n           R\u00e9interpr\u00e9ter le patrimoine sans le d\u00e9naturer.\n         <\/p>\n       <\/div>\n\n     <\/button>\n\n   <\/div>\n\n <\/div>\n\n<\/section>\n\n\n<!-- PROGRAMME -->\n\n<section class=\"programme\" id=\"mza-tapis-programme\">\n\n <div class=\"wrap\">\n\n   <header class=\"section-head\">\n     <div class=\"eyebrow\">\n       MASTER CLASS TAPIS MAROCAIN \u00b7 PRO MAX\n     <\/div>\n     <h2>40 Ateliers<\/h2>\n     <div class=\"gold-line\"><\/div>\n     <p>\n       De la fibre jusqu&#8217;\u00e0 la collection finale.\n     <\/p>\n   <\/header>\n\n\n   <div class=\"tools\">\n\n     <input\n       type=\"search\"\n       id=\"tapis-search\"\n       placeholder=\"Rechercher : laine, n\u0153ud, Azilal, couleur\u2026\">\n\n     <div class=\"filters\">\n\n       <button type=\"button\"\n         class=\"filter active\"\n         data-level=\"all\">TOUS<\/button>\n\n       <button type=\"button\"\n         class=\"filter\"\n         data-level=\"1\">MATI\u00c8RE<\/button>\n\n       <button type=\"button\"\n         class=\"filter\"\n         data-level=\"2\">TISSAGE<\/button>\n\n       <button type=\"button\"\n         class=\"filter\"\n         data-level=\"3\">STYLES<\/button>\n\n       <button type=\"button\"\n         class=\"filter\"\n         data-level=\"4\">ATELIER PRO<\/button>\n\n     <\/div>\n\n   <\/div>\n\n\n   <div class=\"progress\">\n\n     <strong class=\"count\" id=\"tapis-count\">0\/40<\/strong>\n\n     <div>\n       <strong>Progression Master Class<\/strong>\n       <div class=\"track\">\n         <div class=\"fill\" id=\"tapis-fill\"><\/div>\n       <\/div>\n     <\/div>\n\n     <button type=\"button\"\n       class=\"reset\"\n       id=\"tapis-reset\">\n       R\u00c9INITIALISER\n     <\/button>\n\n   <\/div>\n\n\n   <div id=\"tapis-detail\" class=\"detail\"><\/div>\n\n   <div id=\"tapis-courses\"><\/div>\n\n <\/div>\n\n<\/section>\n\n\n<!-- TAPIS LAB -->\n\n<section class=\"lab\" id=\"mza-tapis-lab\">\n\n <div class=\"wrap\">\n\n   <header class=\"section-head\">\n\n     <div class=\"eyebrow\">MZA TAPIS LAB<\/div>\n\n     <h2>\n       Calcul &#038; Motif\n       <em>du tapis<\/em>\n     <\/h2>\n\n     <div class=\"gold-line\"><\/div>\n\n     <p>\n       Pr\u00e9parer les dimensions d&#8217;un projet\n       puis dessiner son langage graphique.\n     <\/p>\n\n   <\/header>\n\n\n   <div class=\"lab-grid\">\n\n     <div class=\"panel\">\n\n       <h3>Calculateur de Projet<\/h3>\n\n       <p>\n         Estimation p\u00e9dagogique de surface,\n         cha\u00eene et laine n\u00e9cessaire.\n       <\/p>\n\n\n       <div class=\"form-grid\">\n\n         <label>\n           LARGEUR \u00b7 CM\n           <input id=\"tp-width\"\n             type=\"number\"\n             value=\"160\"\n             min=\"1\">\n         <\/label>\n\n         <label>\n           LONGUEUR \u00b7 CM\n           <input id=\"tp-length\"\n             type=\"number\"\n             value=\"240\"\n             min=\"1\">\n         <\/label>\n\n         <label>\n           DENSIT\u00c9 DE PROJET\n           <select id=\"tp-density\">\n             <option value=\"1.2\">L\u00e9g\u00e8re<\/option>\n             <option value=\"1.8\" selected>Moyenne<\/option>\n             <option value=\"2.5\">Dense<\/option>\n           <\/select>\n         <\/label>\n\n         <label>\n           MARGE MATI\u00c8RE \u00b7 %\n           <input id=\"tp-waste\"\n             type=\"number\"\n             value=\"12\"\n             min=\"0\"\n             max=\"50\">\n         <\/label>\n\n       <\/div>\n\n\n       <div class=\"lab-actions\">\n\n         <button type=\"button\"\n           class=\"btn-green\"\n           id=\"tp-calculate\">\n           CALCULER\n         <\/button>\n\n       <\/div>\n\n\n       <div class=\"result\">\n\n         <div class=\"result-grid\">\n\n           <div>\n             <small>SURFACE<\/small>\n             <strong id=\"tp-area\">\u2014<\/strong>\n           <\/div>\n\n           <div>\n             <small>LAINE ESTIM\u00c9E<\/small>\n             <strong id=\"tp-wool\">\u2014<\/strong>\n           <\/div>\n\n           <div>\n             <small>AVEC MARGE<\/small>\n             <strong id=\"tp-total\">\u2014<\/strong>\n           <\/div>\n\n         <\/div>\n\n       <\/div>\n\n     <\/div>\n\n\n     <div class=\"panel\">\n\n       <h3>Moteur de Motifs<\/h3>\n\n       <p>\n         Cr\u00e9ez une \u00e9tude graphique avant tissage.\n       <\/p>\n\n\n       <div class=\"form-grid\">\n\n         <label>\n           STYLE\n           <select id=\"tp-pattern\">\n             <option value=\"diamond\">\n               Losanges\n             <\/option>\n             <option value=\"zigzag\">\n               Zigzag\n             <\/option>\n             <option value=\"grid\">\n               Trame\n             <\/option>\n             <option value=\"free\">\n               Composition libre\n             <\/option>\n           <\/select>\n         <\/label>\n\n         <label>\n           DENSIT\u00c9 VISUELLE\n           <select id=\"tp-grid\">\n             <option value=\"4\">Large<\/option>\n             <option value=\"6\" selected>Moyenne<\/option>\n             <option value=\"8\">Fine<\/option>\n           <\/select>\n         <\/label>\n\n       <\/div>\n\n\n       <div class=\"lab-actions\">\n\n         <button type=\"button\"\n           class=\"btn-green\"\n           id=\"tp-generate\">\n           G\u00c9N\u00c9RER LE MOTIF\n         <\/button>\n\n       <\/div>\n\n\n       <div class=\"motif-stage\">\n\n         <svg\n           id=\"tapis-svg\"\n           viewBox=\"0 0 600 800\"\n           xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n         <\/svg>\n\n       <\/div>\n\n     <\/div>\n\n   <\/div>\n\n <\/div>\n\n<\/section>\n\n\n<!-- FINAL -->\n\n<section class=\"final\" id=\"mza-tapis-final\">\n\n <div class=\"wrap\">\n\n   <div class=\"final-box\">\n\n     <div class=\"eyebrow\">\n       EXAMEN FINAL MZA \u00b7 PATRIMOINE TEXTILE\n     <\/div>\n\n     <h2>\n       Le Tapis\n       <em>Signature<\/em>\n     <\/h2>\n\n     <p>\n       Concevoir une pi\u00e8ce compl\u00e8te :\n       dimensions, choix de laine, palette,\n       composition graphique, calcul de mati\u00e8re,\n       fiche technique et pr\u00e9sentation du projet.\n     <\/p>\n\n\n     <div class=\"final-grid\">\n\n       <div>\n         <strong>1<\/strong>\n         <span>TAPIS<\/span>\n       <\/div>\n\n       <div>\n         <strong>1<\/strong>\n         <span>MOTIF ORIGINAL<\/span>\n       <\/div>\n\n       <div>\n         <strong>1<\/strong>\n         <span>FICHE TECHNIQUE<\/span>\n       <\/div>\n\n       <div>\n         <strong>1<\/strong>\n         <span>SOUTENANCE<\/span>\n       <\/div>\n\n     <\/div>\n\n\n     <p id=\"tapis-final-status\">\n       0\/40 ateliers valid\u00e9s.\n     <\/p>\n\n     <br>\n\n     <button type=\"button\"\n       class=\"btn-gold\"\n       id=\"tapis-start\">\n       COMMENCER LE PARCOURS\n     <\/button>\n\n   <\/div>\n\n <\/div>\n\n<\/section>\n\n\n<script>\n(function(){\n\n\"use strict\";\n\n\nconst IMG={\n\n artisan:\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0018\/9156\/5614\/files\/Kenza_Co_About_us.png?v=1774379669\",\n\n beni:\n \"https:\/\/js-rugs.com\/wp-content\/uploads\/2021\/01\/il_1588xN.2769949990_k63p.jpg\",\n\n azilal:\n \"https:\/\/i.etsystatic.com\/12765903\/r\/il\/7289c0\/2255287039\/il_794xN.2255287039_q8ga.jpg\"\n\n};\n\n\n\/* ============================================================\n 40 ATELIERS\n============================================================ *\/\n\nconst COURSES=[\n\n[1,1,\"Histoire du tapis marocain\",\n\"Comprendre ses fonctions, ses territoires et sa diversit\u00e9.\",\"2 h\",IMG.artisan],\n\n[2,1,\"La laine\",\n\"Reconna\u00eetre qualit\u00e9s, fibres et usages.\",\"3 h\",IMG.artisan],\n\n[3,1,\"Tri de la laine\",\n\"Pr\u00e9parer la fibre avant transformation.\",\"3 h\",IMG.artisan],\n\n[4,1,\"Lavage de la laine\",\n\"Nettoyer la fibre sans d\u00e9t\u00e9riorer ses qualit\u00e9s.\",\"3 h\",IMG.artisan],\n\n[5,1,\"Cardage\",\n\"Aligner et pr\u00e9parer les fibres.\",\"4 h\",IMG.artisan],\n\n[6,1,\"Filage\",\n\"Transformer la fibre en fil utilisable.\",\"4 h\",IMG.artisan],\n\n[7,1,\"Teintures naturelles\",\n\"D\u00e9couvrir les principes des couleurs v\u00e9g\u00e9tales et min\u00e9rales.\",\"4 h\",IMG.azilal],\n\n[8,1,\"Palette chromatique\",\n\"Construire une harmonie adapt\u00e9e au projet.\",\"3 h\",IMG.azilal],\n\n[9,1,\"Qualit\u00e9 du fil\",\n\"Contr\u00f4ler diam\u00e8tre, r\u00e9gularit\u00e9 et r\u00e9sistance.\",\"3 h\",IMG.artisan],\n\n[10,1,\"Pr\u00e9paration des \u00e9cheveaux\",\n\"Organiser les fils pour le tissage.\",\"3 h\",IMG.artisan],\n\n\n[11,2,\"Le m\u00e9tier \u00e0 tisser\",\n\"Identifier structure, montants et traverses.\",\"3 h\",IMG.artisan],\n\n[12,2,\"Montage de la cha\u00eene\",\n\"Construire la structure verticale du tapis.\",\"5 h\",IMG.artisan],\n\n[13,2,\"Tension de cha\u00eene\",\n\"Obtenir une tension r\u00e9guli\u00e8re.\",\"4 h\",IMG.artisan],\n\n[14,2,\"La trame\",\n\"Comprendre son r\u00f4le dans la structure textile.\",\"4 h\",IMG.artisan],\n\n[15,2,\"Nouage de base\",\n\"D\u00e9couvrir la construction d'un tapis nou\u00e9.\",\"5 h\",IMG.artisan],\n\n[16,2,\"Serrage\",\n\"Compacter les rangs avec r\u00e9gularit\u00e9.\",\"4 h\",IMG.artisan],\n\n[17,2,\"Gestion des lisi\u00e8res\",\n\"Stabiliser les bords du tapis.\",\"4 h\",IMG.artisan],\n\n[18,2,\"Changement de couleur\",\n\"Introduire plusieurs fils proprement.\",\"4 h\",IMG.azilal],\n\n[19,2,\"Lecture d'un motif\",\n\"Transformer une composition graphique en s\u00e9quence de tissage.\",\"5 h\",IMG.azilal],\n\n[20,2,\"Premi\u00e8re pi\u00e8ce\",\n\"R\u00e9aliser un petit \u00e9chantillon complet.\",\"Projet\",IMG.artisan],\n\n\n[21,3,\"Motifs g\u00e9om\u00e9triques\",\n\"Cr\u00e9er r\u00e9p\u00e9titions, losanges et lignes.\",\"4 h\",IMG.beni],\n\n[22,3,\"Symboles & composition\",\n\"Observer les vocabulaires graphiques sans g\u00e9n\u00e9raliser leur sens.\",\"4 h\",IMG.azilal],\n\n[23,3,\"Tapis Beni Ouarain\",\n\"\u00c9tudier mati\u00e8re, proportions et g\u00e9om\u00e9trie.\",\"5 h\",IMG.beni],\n\n[24,3,\"Tapis Azilal\",\n\"\u00c9tudier composition libre et couleur.\",\"5 h\",IMG.azilal],\n\n[25,3,\"Tapis Taznakht\",\n\"\u00c9tudier structure, couleurs et construction d\u00e9corative.\",\"5 h\",IMG.artisan],\n\n[26,3,\"Tapis Rbati\",\n\"Observer m\u00e9daillons, bordures et construction urbaine.\",\"5 h\",IMG.azilal],\n\n[27,3,\"Boucherouite\",\n\"Comprendre le principe de r\u00e9cup\u00e9ration textile.\",\"4 h\",IMG.azilal],\n\n[28,3,\"Bandes & bordures\",\n\"Construire l'encadrement graphique.\",\"4 h\",IMG.azilal],\n\n[29,3,\"Composition centrale\",\n\"Organiser le point focal du tapis.\",\"5 h\",IMG.beni],\n\n[30,3,\"Cr\u00e9ation contemporaine\",\n\"R\u00e9interpr\u00e9ter sans copier m\u00e9caniquement.\",\"5 h\",IMG.azilal],\n\n\n[31,4,\"Calcul des dimensions\",\n\"Pr\u00e9parer largeur, longueur et proportions.\",\"4 h\",IMG.beni],\n\n[32,4,\"Calcul mati\u00e8re\",\n\"Estimer laine et marge de production.\",\"4 h\",IMG.artisan],\n\n[33,4,\"Fiche technique\",\n\"Formaliser dimensions, fibres, couleurs et motif.\",\"4 h\",IMG.artisan],\n\n[34,4,\"Plan de tissage\",\n\"Organiser le projet avant ex\u00e9cution.\",\"5 h\",IMG.azilal],\n\n[35,4,\"Contr\u00f4le qualit\u00e9\",\n\"Contr\u00f4ler r\u00e9gularit\u00e9, tension et finition.\",\"4 h\",IMG.beni],\n\n[36,4,\"Finitions\",\n\"Coupe, nettoyage, franges et pr\u00e9sentation.\",\"4 h\",IMG.beni],\n\n[37,4,\"Calcul du prix de revient\",\n\"\u00c9valuer mati\u00e8re, temps et co\u00fbts d'atelier.\",\"4 h\",IMG.artisan],\n\n[38,4,\"Collection de trois tapis\",\n\"Cr\u00e9er une petite famille coh\u00e9rente.\",\"6 h\",IMG.azilal],\n\n[39,4,\"Tapis Signature MZA\",\n\"D\u00e9velopper une cr\u00e9ation personnelle.\",\"7 h\",IMG.beni],\n\n[40,4,\"Grand Projet Final\",\n\"Pr\u00e9senter une pi\u00e8ce compl\u00e8te et son dossier.\",\"Projet\",IMG.artisan]\n\n].map(function(x){\n\n return{\n  id:x[0],\n  level:x[1],\n  title:x[2],\n  desc:x[3],\n  duration:x[4],\n  img:x[5],\n\n  objectives:[\n   \"Comprendre la technique\",\n   \"Pr\u00e9parer correctement le travail\",\n   \"Ex\u00e9cuter l'exercice pratique\",\n   \"Contr\u00f4ler la r\u00e9gularit\u00e9\"\n  ],\n\n  skills:[\n   \"Observation\",\n   \"Pr\u00e9paration\",\n   \"Tissage\",\n   \"Contr\u00f4le qualit\u00e9\"\n  ],\n\n  mission:\n   x[0]===40\n   ? \"Concevoir un tapis complet avec palette, plan du motif, calcul de mati\u00e8re, fiche technique et soutenance.\"\n   : \"R\u00e9aliser un \u00e9chantillon ou exercice correspondant \u00e0 l'atelier et documenter le r\u00e9sultat.\"\n };\n\n});\n\n\nfunction levelTitle(n){\n\n return{\n  1:\"Laine \u00b7 Fibres \u00b7 Couleur\",\n  2:\"M\u00e9tier \u00b7 Cha\u00eene \u00b7 Trame \u00b7 Nouage\",\n  3:\"Styles \u00b7 Motifs \u00b7 R\u00e9gions\",\n  4:\"Atelier \u00b7 Cr\u00e9ation \u00b7 Collection\"\n }[n];\n\n}\n\n\n\/* PROGRESSION *\/\n\nfunction loadProgress(){\n\n try{\n  const a=JSON.parse(\n   localStorage.getItem(\"mzaTapisProgress\")||\"[]\"\n  );\n  return Array.isArray(a)?a:[];\n }catch(e){\n  return[];\n }\n\n}\n\n\nlet done=loadProgress();\nlet active=\"all\";\n\n\nfunction saveProgress(){\n try{\n  localStorage.setItem(\n   \"mzaTapisProgress\",\n   JSON.stringify(done)\n  );\n }catch(e){}\n}\n\n\nfunction updateProgress(){\n\n const n=done.length;\n\n document.getElementById(\"tapis-count\").textContent=n+\"\/40\";\n\n document.getElementById(\"tapis-fill\").style.width=\n (n\/40*100)+\"%\";\n\n document.getElementById(\"tapis-final-status\").textContent=\n n===40\n ? \"40\/40 ateliers valid\u00e9s \u00b7 Projet final pr\u00eat.\"\n : n+\"\/40 ateliers valid\u00e9s.\";\n\n}\n\n\n\/* IMAGE FALLBACK *\/\n\nfunction protectImages(){\n\n document.querySelectorAll(\n  \"#mza-tapis-marocain img\"\n ).forEach(function(img){\n\n  if(img.dataset.protected===\"1\")return;\n\n  img.dataset.protected=\"1\";\n\n  img.addEventListener(\"error\",function(){\n   this.style.opacity=\"0\";\n  });\n\n });\n\n}\n\n\n\/* RENDER *\/\n\nfunction render(){\n\n const q=\n document.getElementById(\"tapis-search\")\n .value.toLowerCase().trim();\n\n let html=\"\";\n\n\n [1,2,3,4].forEach(function(level){\n\n  const list=COURSES.filter(function(c){\n\n   return(\n    c.level===level &&\n    (active===\"all\" || String(c.level)===active) &&\n    (\n     !q ||\n     (c.title+\" \"+c.desc).toLowerCase().includes(q)\n    )\n   );\n\n  });\n\n\n  if(!list.length)return;\n\n\n  html+=`\n  <div class=\"level-title\">\n   <small>NIVEAU ${level}<\/small>\n   <h3>${levelTitle(level)}<\/h3>\n  <\/div>\n\n  <div class=\"courses\">\n  `;\n\n\n  list.forEach(function(c){\n\n   html+=`\n   <button\n    type=\"button\"\n    class=\"course ${done.includes(c.id)?\"done\":\"\"}\"\n    data-tapis-course=\"${c.id}\">\n\n    <div class=\"course-img visual\">\n     <img decoding=\"async\"\n      loading=\"lazy\"\n      src=\"${c.img}\"\n      alt=\"${c.title}\">\n    <\/div>\n\n    <div class=\"course-body\">\n\n     <span class=\"course-no\">\n      ${String(c.id).padStart(2,\"0\")}\n     <\/span>\n\n     <h4>${c.title}<\/h4>\n\n     <p>${c.desc}<\/p>\n\n     <span class=\"enter\">\n      ${\n       done.includes(c.id)\n       ? \"\u2713 ATELIER VALID\u00c9\"\n       : \"OUVRIR L'ATELIER \u2192\"\n      }\n     <\/span>\n\n    <\/div>\n\n   <\/button>\n   `;\n\n  });\n\n\n  html+=\"<\/div>\";\n\n });\n\n\n document.getElementById(\"tapis-courses\").innerHTML=html;\n\n\n document.querySelectorAll(\n  \"#mza-tapis-marocain [data-tapis-course]\"\n ).forEach(function(btn){\n\n  btn.onclick=function(){\n   openCourse(Number(btn.dataset.tapisCourse));\n  };\n\n });\n\n\n protectImages();\n\n}\n\n\n\/* DETAIL *\/\n\nfunction openCourse(id){\n\n const c=COURSES.find(function(x){\n  return x.id===id;\n });\n\n if(!c)return;\n\n\n const d=document.getElementById(\"tapis-detail\");\n\n\n d.innerHTML=`\n\n <div class=\"detail-image visual\">\n  <img decoding=\"async\" src=\"${c.img}\" alt=\"${c.title}\">\n <\/div>\n\n <div class=\"detail-copy\">\n\n  <button type=\"button\"\n   class=\"close\"\n   id=\"tapis-close\">\u00d7<\/button>\n\n  <div class=\"eyebrow\">\n   ATELIER ${String(c.id).padStart(2,\"0\")}\n   \u00b7 ${levelTitle(c.level)}\n  <\/div>\n\n  <h3>${c.title}<\/h3>\n\n  <p>${c.desc}<\/p>\n\n  <div class=\"meta\">\n\n   <div>\n    <small>DUR\u00c9E<\/small>\n    <strong>${c.duration}<\/strong>\n   <\/div>\n\n   <div>\n    <small>NIVEAU<\/small>\n    <strong>${c.level}\/4<\/strong>\n   <\/div>\n\n   <div>\n    <small>PARCOURS<\/small>\n    <strong>${c.id}\/40<\/strong>\n   <\/div>\n\n  <\/div>\n\n\n  <div class=\"learning\">\n\n   <div class=\"learning-box\">\n    <h4>Objectifs<\/h4>\n    <ul>\n     ${c.objectives.map(function(x){\n      return\"<li>\"+x+\"<\/li>\";\n     }).join(\"\")}\n    <\/ul>\n   <\/div>\n\n   <div class=\"learning-box\">\n    <h4>Comp\u00e9tences<\/h4>\n    <ul>\n     ${c.skills.map(function(x){\n      return\"<li>\"+x+\"<\/li>\";\n     }).join(\"\")}\n    <\/ul>\n   <\/div>\n\n  <\/div>\n\n\n  <div class=\"mission\">\n\n   <strong>MISSION MZA<\/strong>\n\n   <br><br>\n\n   ${c.mission}\n\n  <\/div>\n\n\n  <div class=\"detail-actions\">\n\n   <button type=\"button\"\n    class=\"btn-green\"\n    id=\"tapis-valid\">\n    ${\n     done.includes(c.id)\n     ?\"\u2713 ATELIER VALID\u00c9\"\n     :\"VALIDER L'ATELIER\"\n    }\n   <\/button>\n\n   ${\n    c.id<40\n    ? `\n    <button type=\"button\"\n     class=\"btn-green\"\n     id=\"tapis-next\">\n     ATELIER SUIVANT \u2192\n    <\/button>`\n    :\"\"\n   }\n\n  <\/div>\n\n <\/div>\n `;\n\n\n d.classList.add(\"show\");\n\n d.scrollIntoView({\n  behavior:\"smooth\",\n  block:\"start\"\n });\n\n protectImages();\n\n\n document.getElementById(\"tapis-close\").onclick=function(){\n  d.classList.remove(\"show\");\n };\n\n\n document.getElementById(\"tapis-valid\").onclick=function(){\n\n  if(!done.includes(c.id)){\n   done.push(c.id);\n   done.sort(function(a,b){return a-b});\n   saveProgress();\n  }\n\n  updateProgress();\n  render();\n  openCourse(c.id);\n\n };\n\n\n const next=document.getElementById(\"tapis-next\");\n\n if(next){\n  next.onclick=function(){\n   openCourse(c.id+1);\n  };\n }\n\n}\n\n\n\/* FILTERS *\/\n\ndocument.querySelectorAll(\n \"#mza-tapis-marocain .filter\"\n).forEach(function(btn){\n\n btn.onclick=function(){\n\n  document.querySelectorAll(\n   \"#mza-tapis-marocain .filter\"\n  ).forEach(function(x){\n   x.classList.remove(\"active\");\n  });\n\n  btn.classList.add(\"active\");\n\n  active=btn.dataset.level;\n\n  render();\n\n };\n\n});\n\n\ndocument.getElementById(\"tapis-search\").oninput=render;\n\n\n\/* RESET *\/\n\ndocument.getElementById(\"tapis-reset\").onclick=function(){\n\n if(!confirm(\"R\u00e9initialiser toute la progression ?\"))return;\n\n done=[];\n\n saveProgress();\n updateProgress();\n render();\n\n document.getElementById(\"tapis-detail\").classList.remove(\"show\");\n\n};\n\n\n\/* NAV *\/\n\nfunction go(id){\n\n const el=document.getElementById(id);\n\n if(el){\n  el.scrollIntoView({\n   behavior:\"smooth\",\n   block:\"start\"\n  });\n }\n\n}\n\n\ndocument.querySelectorAll(\n \"#mza-tapis-marocain [data-scroll]\"\n).forEach(function(btn){\n\n btn.onclick=function(){\n  go(btn.dataset.scroll);\n };\n\n});\n\n\ndocument.querySelectorAll(\n \"#mza-tapis-marocain [data-course]\"\n).forEach(function(btn){\n\n btn.onclick=function(){\n\n  go(\"mza-tapis-programme\");\n\n  setTimeout(function(){\n   openCourse(Number(btn.dataset.course));\n  },350);\n\n };\n\n});\n\n\ndocument.getElementById(\"tapis-start\").onclick=function(){\n go(\"mza-tapis-programme\");\n};\n\n\n\/* CALCUL MATIERE\n Estimation p\u00e9dagogique, \u00e0 calibrer ensuite\n avec les donn\u00e9es r\u00e9elles d'un atelier.\n*\/\n\ndocument.getElementById(\"tp-calculate\").onclick=function(){\n\n const width=Math.max(\n  1,\n  Number(document.getElementById(\"tp-width\").value)||1\n );\n\n const length=Math.max(\n  1,\n  Number(document.getElementById(\"tp-length\").value)||1\n );\n\n const density=Number(\n  document.getElementById(\"tp-density\").value\n )||1.8;\n\n const waste=Math.max(\n  0,\n  Number(document.getElementById(\"tp-waste\").value)||0\n );\n\n const area=(width\/100)*(length\/100);\n\n const wool=area*density;\n\n const total=wool*(1+waste\/100);\n\n\n document.getElementById(\"tp-area\").textContent=\n area.toFixed(2)+\" m\u00b2\";\n\n document.getElementById(\"tp-wool\").textContent=\n wool.toFixed(2)+\" kg\";\n\n document.getElementById(\"tp-total\").textContent=\n total.toFixed(2)+\" kg\";\n\n};\n\n\n\/* MOTIF GENERATOR *\/\n\nfunction generatePattern(){\n\n const svg=document.getElementById(\"tapis-svg\");\n\n const type=document.getElementById(\"tp-pattern\").value;\n\n const cells=Number(\n  document.getElementById(\"tp-grid\").value\n )||6;\n\n const W=600;\n const H=800;\n\n const cw=W\/cells;\n const ch=H\/(cells+2);\n\n let html=`\n <rect x=\"0\" y=\"0\"\n width=\"${W}\" height=\"${H}\"\n fill=\"#eadfc9\"\/>\n `;\n\n\n if(type===\"diamond\"){\n\n  for(let r=0;r<cells+2;r++){\n   for(let c=0;c<cells;c++){\n\n    const cx=c*cw+cw\/2;\n    const cy=r*ch+ch\/2;\n\n    html+=`\n    <polygon\n     points=\"\n     ${cx},${cy-ch*.34}\n     ${cx+cw*.34},${cy}\n     ${cx},${cy+ch*.34}\n     ${cx-cw*.34},${cy}\"\n     fill=\"none\"\n     stroke=\"${(r+c)%2===0?\"#191713\":\"#7a2d32\"}\"\n     stroke-width=\"7\"\/>\n    `;\n   }\n  }\n\n }\n\n\n if(type===\"zigzag\"){\n\n  for(let r=0;r<cells+2;r++){\n\n   let pts=\"\";\n\n   for(let c=0;c<=cells;c++){\n\n    const x=c*cw;\n    const y=r*ch+\n    (c%2===0 ? ch*.2 : ch*.8);\n\n    pts+=x+\",\"+y+\" \";\n\n   }\n\n   html+=`\n   <polyline\n    points=\"${pts}\"\n    fill=\"none\"\n    stroke=\"${r%2===0?\"#073b2d\":\"#a54c35\"}\"\n    stroke-width=\"9\"\/>\n   `;\n\n  }\n\n }\n\n\n if(type===\"grid\"){\n\n  for(let x=0;x<=W;x+=cw){\n\n   html+=`\n   <line\n    x1=\"${x}\" y1=\"0\"\n    x2=\"${x}\" y2=\"${H}\"\n    stroke=\"#073b2d\"\n    stroke-width=\"5\"\/>\n   `;\n\n  }\n\n  for(let y=0;y<=H;y+=ch){\n\n   html+=`\n   <line\n    x1=\"0\" y1=\"${y}\"\n    x2=\"${W}\" y2=\"${y}\"\n    stroke=\"#a54c35\"\n    stroke-width=\"5\"\/>\n   `;\n\n  }\n\n }\n\n\n if(type===\"free\"){\n\n  for(let r=0;r<cells+2;r++){\n   for(let c=0;c<cells;c++){\n\n    const x=c*cw+cw*.15;\n    const y=r*ch+ch*.15;\n\n    const mode=(r+c)%3;\n\n    if(mode===0){\n\n     html+=`\n     <circle\n      cx=\"${x+cw*.35}\"\n      cy=\"${y+ch*.35}\"\n      r=\"${Math.min(cw,ch)*.23}\"\n      fill=\"#7a2d32\"\/>\n     `;\n\n    }else if(mode===1){\n\n     html+=`\n     <rect\n      x=\"${x}\"\n      y=\"${y}\"\n      width=\"${cw*.65}\"\n      height=\"${ch*.65}\"\n      fill=\"#073b2d\"\n      transform=\"rotate(45 ${x+cw*.325} ${y+ch*.325})\"\/>\n     `;\n\n    }else{\n\n     html+=`\n     <polygon\n      points=\"\n      ${x+cw*.32},${y}\n      ${x+cw*.65},${y+ch*.65}\n      ${x},${y+ch*.65}\"\n      fill=\"#c8a35c\"\/>\n     `;\n\n    }\n\n   }\n  }\n\n }\n\n\n \/* bordure *\/\n\n html+=`\n <rect\n  x=\"12\" y=\"12\"\n  width=\"576\" height=\"776\"\n  fill=\"none\"\n  stroke=\"#181511\"\n  stroke-width=\"10\"\/>\n `;\n\n\n svg.innerHTML=html;\n\n}\n\n\ndocument.getElementById(\"tp-generate\").onclick=generatePattern;\n\n\n\/* INIT *\/\n\nrender();\nupdateProgress();\ngeneratePattern();\nprotectImages();\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 Tapis Marocain Laine, filage, teinture, cha\u00eene, trame, nouage, motifs, couleurs et finitions : entrer dans l&#8217;univers du tapis marocain depuis la fibre brute jusqu&#8217;\u00e0 la cr\u00e9ation d&#8217;une pi\u00e8ce signature. D\u00c9COUVRIR LES 40 ATELIERS OUVRIR LE TAPIS LAB L&#8217;ART DU TAPIS R\u00c9GIONS COLLECTION 40 ATELIERS [&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-1775","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1775","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=1775"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1775\/revisions"}],"predecessor-version":[{"id":1777,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1775\/revisions\/1777"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/media?parent=1775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}