{"id":1772,"date":"2026-09-06T20:54:04","date_gmt":"2026-09-06T20:54:04","guid":{"rendered":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/?page_id=1772"},"modified":"2026-09-06T20:54:04","modified_gmt":"2026-09-06T20:54:04","slug":"master-class-zellidge","status":"publish","type":"page","link":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/master-class-zellidge\/","title":{"rendered":"Master Class Zellidge"},"content":{"rendered":"\n<!-- =========================================================\n MAROC ZAIN ACADEMY\n MASTER CLASS ZELLIGE MAROCAIN\n MA\u00c2LEM ZELLIGE \u00b7 PRO MAX\n PAGE COMPLETE WORDPRESS \/ ELEMENTOR\n========================================================= -->\n\n<div id=\"mza-zellige-master\">\n\n<style>\n#mza-zellige-master,\n#mza-zellige-master *{\n  box-sizing:border-box;\n}\n\n#mza-zellige-master{\n  --green:#073d2e;\n  --green2:#0b5a43;\n  --gold:#c8a45d;\n  --gold2:#ecd89d;\n  --ivory:#faf6ed;\n  --cream:#eee3d1;\n  --terracotta:#a64f35;\n  --blue:#155d77;\n  --wine:#702738;\n  --ink:#181512;\n  --muted:#736c63;\n  --line:#d7c7a8;\n  --white:#fff;\n  --dark:#101410;\n\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-zellige-master button,\n#mza-zellige-master input,\n#mza-zellige-master select{\n  font:inherit;\n}\n\n#mza-zellige-master button{\n  cursor:pointer;\n}\n\n#mza-zellige-master img{\n  display:block;\n  width:100%;\n}\n\n#mza-zellige-master .wrap{\n  width:min(1380px,calc(100% - 34px));\n  margin:auto;\n}\n\n#mza-zellige-master .eyebrow{\n  color:#977239;\n  font-size:9px;\n  font-weight:900;\n  letter-spacing:3px;\n  text-transform:uppercase;\n}\n\n#mza-zellige-master h2{\n  margin:14px 0 22px;\n  color:var(--green);\n  font:400 clamp(44px,6vw,72px)\/.97 Georgia,serif;\n}\n\n#mza-zellige-master h2 em{\n  display:block;\n  color:var(--wine);\n  font-weight:400;\n}\n\n#mza-zellige-master .section-head{\n  max-width:900px;\n  margin:0 auto 56px;\n  text-align:center;\n}\n\n#mza-zellige-master .section-head p{\n  color:var(--muted);\n  line-height:1.8;\n}\n\n#mza-zellige-master .gold-line{\n  width:76px;\n  height:1px;\n  margin:24px auto;\n  background:var(--gold);\n}\n\n\/* =========================================================\n IMAGE FALLBACK\n========================================================= *\/\n\n#mza-zellige-master .visual{\n  position:relative;\n  overflow:hidden;\n  background:\n    radial-gradient(circle at 20% 20%,rgba(236,216,157,.30),transparent 25%),\n    radial-gradient(circle at 80% 70%,rgba(20,91,112,.28),transparent 30%),\n    linear-gradient(135deg,#073d2e,#0b5943 55%,#17120c);\n}\n\n#mza-zellige-master .visual:after{\n  content:\"MZA \u00b7 ZELLIGE\";\n  position:absolute;\n  left:25px;\n  bottom:22px;\n  z-index:1;\n  color:rgba(255,255,255,.17);\n  font:20px Georgia,serif;\n  letter-spacing:5px;\n}\n\n#mza-zellige-master .visual img{\n  width:100%;\n  height:100%;\n  position:relative;\n  z-index:2;\n  object-fit:cover;\n}\n\n\/* =========================================================\n HERO\n========================================================= *\/\n\n#mza-zellige-master .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-zellige-master .hero-photo{\n  position:absolute;\n  inset:0;\n}\n\n#mza-zellige-master .hero-photo img{\n  height:100%;\n  object-fit:cover;\n}\n\n#mza-zellige-master .hero-overlay{\n  position:absolute;\n  inset:0;\n  z-index:3;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(3,25,17,.97) 0%,\n      rgba(3,25,17,.84) 40%,\n      rgba(3,25,17,.34) 72%,\n      rgba(0,0,0,.15) 100%\n    ),\n    linear-gradient(\n      180deg,\n      rgba(0,0,0,.02),\n      rgba(0,0,0,.5)\n    );\n}\n\n#mza-zellige-master .hero-frame{\n  position:absolute;\n  inset:24px;\n  z-index:4;\n  border:1px solid rgba(236,216,157,.56);\n}\n\n#mza-zellige-master .hero-frame:after{\n  content:\"\";\n  position:absolute;\n  inset:8px;\n  border:1px solid rgba(236,216,157,.16);\n}\n\n#mza-zellige-master .hero-copy{\n  width:min(850px,88%);\n  position:relative;\n  z-index:5;\n  margin-left:max(5vw,40px);\n  padding:100px 0;\n}\n\n#mza-zellige-master .seal{\n  width:108px;\n  height:108px;\n  display:grid;\n  place-items:center;\n  margin-bottom:30px;\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-zellige-master .hero .eyebrow{\n  color:var(--gold2);\n}\n\n#mza-zellige-master .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-zellige-master .hero h1 span,\n#mza-zellige-master .hero h1 em{\n  display:block;\n}\n\n#mza-zellige-master .hero h1 em{\n  color:var(--gold2);\n  font-weight:400;\n}\n\n#mza-zellige-master .hero p{\n  max-width:720px;\n  color:rgba(255,255,255,.78);\n  font:17px\/1.8 Georgia,serif;\n}\n\n#mza-zellige-master .actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:9px;\n  margin-top:32px;\n}\n\n#mza-zellige-master .btn-gold,\n#mza-zellige-master .btn-outline,\n#mza-zellige-master .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-zellige-master .btn-gold{\n  border:1px solid var(--gold);\n  background:var(--gold);\n  color:#20180d;\n}\n\n#mza-zellige-master .btn-outline{\n  border:1px solid var(--gold);\n  background:rgba(0,0,0,.15);\n  color:#fff;\n}\n\n#mza-zellige-master .btn-green{\n  border:1px solid var(--green);\n  background:var(--green);\n  color:#fff;\n}\n\n\/* =========================================================\n NAV\n========================================================= *\/\n\n#mza-zellige-master .nav{\n  background:#fff;\n  border-bottom:1px solid var(--line);\n}\n\n#mza-zellige-master .nav .wrap{\n  display:flex;\n  justify-content:center;\n  flex-wrap:wrap;\n}\n\n#mza-zellige-master .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  letter-spacing:1px;\n}\n\n\/* =========================================================\n INTRO\n========================================================= *\/\n\n#mza-zellige-master .intro{\n  padding:120px 0;\n}\n\n#mza-zellige-master .intro-grid{\n  display:grid;\n  grid-template-columns:.95fr 1.05fr;\n  gap:85px;\n  align-items:center;\n}\n\n#mza-zellige-master .intro-photo{\n  height:700px;\n  position:relative;\n}\n\n#mza-zellige-master .intro-photo:before{\n  content:\"\";\n  position:absolute;\n  inset:-15px 15px 15px -15px;\n  border:1px solid var(--gold);\n}\n\n#mza-zellige-master .intro-photo img{\n  height:100%;\n  object-fit:cover;\n}\n\n#mza-zellige-master .chapter{\n  color:rgba(200,164,93,.22);\n  font:110px\/.8 Georgia,serif;\n}\n\n#mza-zellige-master .intro p{\n  color:var(--muted);\n  line-height:1.9;\n}\n\n#mza-zellige-master .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 6 GESTES\n========================================================= *\/\n\n#mza-zellige-master .gestes{\n  padding:110px 0;\n  background:var(--green);\n  color:#fff;\n}\n\n#mza-zellige-master .gestes h2{\n  color:#fff;\n}\n\n#mza-zellige-master .gestes h2 em{\n  color:var(--gold2);\n}\n\n#mza-zellige-master .gestes .section-head p{\n  color:rgba(255,255,255,.6);\n}\n\n#mza-zellige-master .gesture-grid{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  border-top:1px solid rgba(236,216,157,.27);\n  border-left:1px solid rgba(236,216,157,.27);\n}\n\n#mza-zellige-master .gesture{\n  min-height:250px;\n  padding:32px 27px;\n  border-right:1px solid rgba(236,216,157,.27);\n  border-bottom:1px solid rgba(236,216,157,.27);\n}\n\n#mza-zellige-master .gesture small{\n  color:var(--gold2);\n  font:18px Georgia,serif;\n}\n\n#mza-zellige-master .gesture h3{\n  margin:17px 0 10px;\n  font:400 28px Georgia,serif;\n}\n\n#mza-zellige-master .gesture p{\n  color:rgba(255,255,255,.58);\n  font-size:12px;\n  line-height:1.65;\n}\n\n\/* =========================================================\n GALLERY\n========================================================= *\/\n\n#mza-zellige-master .gallery{\n  padding:120px 0;\n  background:#fff;\n}\n\n#mza-zellige-master .gallery-grid{\n  display:grid;\n  grid-template-columns:1.15fr .85fr;\n  gap:17px;\n}\n\n#mza-zellige-master .gallery-main,\n#mza-zellige-master .gallery-side{\n  min-height:680px;\n}\n\n#mza-zellige-master .gallery-side{\n  display:grid;\n  grid-template-rows:1fr 1fr;\n  gap:17px;\n}\n\n#mza-zellige-master .gallery-card{\n  position:relative;\n  overflow:hidden;\n  min-height:330px;\n  background:var(--green);\n}\n\n#mza-zellige-master .gallery-card img{\n  height:100%;\n  object-fit:cover;\n  transition:.5s;\n}\n\n#mza-zellige-master .gallery-card:hover img{\n  transform:scale(1.025);\n}\n\n#mza-zellige-master .gallery-card:before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  z-index:3;\n  background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.84));\n}\n\n#mza-zellige-master .gallery-copy{\n  position:absolute;\n  z-index:4;\n  left:28px;\n  bottom:27px;\n  color:#fff;\n}\n\n#mza-zellige-master .gallery-copy small{\n  color:var(--gold2);\n  letter-spacing:2px;\n}\n\n#mza-zellige-master .gallery-copy h3{\n  margin:8px 0 0;\n  font:400 32px Georgia,serif;\n}\n\n\/* =========================================================\n PROGRAMME\n========================================================= *\/\n\n#mza-zellige-master .programme{\n  padding:115px 0;\n  background:var(--cream);\n}\n\n#mza-zellige-master .tools{\n  display:flex;\n  justify-content:space-between;\n  flex-wrap:wrap;\n  gap:12px;\n  margin-bottom:25px;\n}\n\n#mza-zellige-master #zellige-search{\n  width:min(440px,100%);\n  padding:14px;\n  border:1px solid #c9b78e;\n  background:#fff;\n  outline:none;\n}\n\n#mza-zellige-master .filters{\n  display:flex;\n  flex-wrap:wrap;\n  gap:7px;\n}\n\n#mza-zellige-master .filter{\n  padding:11px 13px;\n  border:1px solid #c9b78e;\n  background:#fff;\n  color:var(--green);\n  font-size:9px;\n  font-weight:900;\n}\n\n#mza-zellige-master .filter.active{\n  background:var(--green);\n  border-color:var(--green);\n  color:#fff;\n}\n\n#mza-zellige-master .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-zellige-master .count{\n  color:var(--gold2);\n  font:39px Georgia,serif;\n}\n\n#mza-zellige-master .track{\n  height:7px;\n  margin-top:8px;\n  background:rgba(255,255,255,.16);\n}\n\n#mza-zellige-master .fill{\n  width:0;\n  height:100%;\n  background:var(--gold2);\n}\n\n#mza-zellige-master .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-zellige-master .level-title{\n  margin:54px 0 22px;\n  padding-bottom:13px;\n  border-bottom:1px solid #c8b58e;\n}\n\n#mza-zellige-master .level-title small{\n  color:#927039;\n  font-weight:900;\n  letter-spacing:3px;\n}\n\n#mza-zellige-master .level-title h3{\n  margin:7px 0 0;\n  color:var(--green);\n  font:400 31px Georgia,serif;\n}\n\n#mza-zellige-master .courses{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:14px;\n}\n\n#mza-zellige-master .course{\n  min-height:330px;\n  overflow:hidden;\n  padding:0;\n  border:1px solid #d4c3a3;\n  background:#fff;\n  text-align:left;\n  transition:.25s;\n}\n\n#mza-zellige-master .course:hover{\n  transform:translateY(-4px);\n  box-shadow:0 14px 34px rgba(0,0,0,.08);\n}\n\n#mza-zellige-master .course.done{\n  border-color:var(--gold);\n}\n\n#mza-zellige-master .course-image{\n  height:160px;\n}\n\n#mza-zellige-master .course-image img{\n  height:100%;\n  object-fit:cover;\n}\n\n#mza-zellige-master .course-body{\n  padding:18px;\n}\n\n#mza-zellige-master .course-number{\n  color:var(--gold);\n  font:17px Georgia,serif;\n}\n\n#mza-zellige-master .course h4{\n  margin:9px 0;\n  color:var(--green);\n  font:400 20px Georgia,serif;\n}\n\n#mza-zellige-master .course p{\n  color:var(--muted);\n  font-size:11px;\n  line-height:1.55;\n}\n\n#mza-zellige-master .enter{\n  display:block;\n  margin-top:12px;\n  color:var(--wine);\n  font-size:8px;\n  font-weight:900;\n  letter-spacing:1px;\n}\n\n\/* =========================================================\n DETAIL\n========================================================= *\/\n\n#mza-zellige-master .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-zellige-master .detail.show{\n  display:grid;\n}\n\n#mza-zellige-master .detail-image{\n  min-height:590px;\n}\n\n#mza-zellige-master .detail-image img{\n  height:100%;\n  min-height:590px;\n  object-fit:cover;\n}\n\n#mza-zellige-master .detail-copy{\n  position:relative;\n  padding:45px;\n}\n\n#mza-zellige-master .detail-copy h3{\n  margin:10px 0;\n  color:var(--green);\n  font:400 clamp(36px,5vw,51px) Georgia,serif;\n}\n\n#mza-zellige-master .detail-copy>p{\n  color:var(--muted);\n  line-height:1.8;\n}\n\n#mza-zellige-master .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-zellige-master .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-zellige-master .meta div{\n  padding:14px;\n  border-right:1px solid var(--line);\n  border-bottom:1px solid var(--line);\n}\n\n#mza-zellige-master .meta small{\n  display:block;\n  color:#947039;\n  font-size:8px;\n}\n\n#mza-zellige-master .meta strong{\n  display:block;\n  margin-top:5px;\n  color:var(--green);\n}\n\n#mza-zellige-master .learning{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n}\n\n#mza-zellige-master .learning-box{\n  padding:17px;\n  background:var(--ivory);\n}\n\n#mza-zellige-master .learning-box h4{\n  margin:0 0 9px;\n  color:var(--green);\n  font:400 18px Georgia,serif;\n}\n\n#mza-zellige-master .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-zellige-master .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-zellige-master .detail-actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n  margin-top:18px;\n}\n\n\/* =========================================================\n LAB\n========================================================= *\/\n\n#mza-zellige-master .lab{\n  padding:115px 0;\n  background:#fff;\n}\n\n#mza-zellige-master .lab-grid{\n  display:grid;\n  grid-template-columns:.9fr 1.1fr;\n  gap:20px;\n}\n\n#mza-zellige-master .panel{\n  padding:30px;\n  border:1px solid var(--line);\n  background:var(--ivory);\n}\n\n#mza-zellige-master .panel h3{\n  margin:0 0 9px;\n  color:var(--green);\n  font:400 30px Georgia,serif;\n}\n\n#mza-zellige-master .panel>p{\n  color:var(--muted);\n  font-size:12px;\n  line-height:1.65;\n}\n\n#mza-zellige-master .form-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n  margin-top:20px;\n}\n\n#mza-zellige-master label{\n  display:block;\n  color:#947039;\n  font-size:8px;\n  font-weight:900;\n}\n\n#mza-zellige-master input,\n#mza-zellige-master 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-zellige-master .lab-actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n  margin-top:18px;\n}\n\n#mza-zellige-master .result{\n  margin-top:20px;\n  padding:20px;\n  background:var(--green);\n  color:#fff;\n}\n\n#mza-zellige-master .result-grid{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:1px;\n  background:rgba(255,255,255,.18);\n}\n\n#mza-zellige-master .result-grid div{\n  padding:15px;\n  background:var(--green);\n}\n\n#mza-zellige-master .result-grid small{\n  display:block;\n  color:var(--gold2);\n  font-size:8px;\n}\n\n#mza-zellige-master .result-grid strong{\n  display:block;\n  margin-top:5px;\n  font:22px Georgia,serif;\n}\n\n\/* MOTIF LAB *\/\n\n#mza-zellige-master .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:#eee7d8;\n}\n\n#mza-zellige-master #zellige-svg{\n  width:100%;\n  max-width:580px;\n  background:#fff;\n  box-shadow:0 15px 35px rgba(0,0,0,.08);\n}\n\n\/* =========================================================\n FINAL\n========================================================= *\/\n\n#mza-zellige-master .final{\n  padding:125px 0;\n  background:var(--dark);\n  color:#fff;\n}\n\n#mza-zellige-master .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-zellige-master .final-box:after{\n  content:\"\";\n  position:absolute;\n  inset:8px;\n  border:1px solid rgba(236,216,157,.24);\n}\n\n#mza-zellige-master .final-box>*{\n  position:relative;\n  z-index:2;\n}\n\n#mza-zellige-master .final .eyebrow{\n  color:var(--gold2);\n}\n\n#mza-zellige-master .final h2{\n  color:#fff;\n}\n\n#mza-zellige-master .final h2 em{\n  color:var(--gold2);\n}\n\n#mza-zellige-master .final p{\n  max-width:750px;\n  margin:auto;\n  color:rgba(255,255,255,.64);\n  line-height:1.8;\n}\n\n#mza-zellige-master .final-grid{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  margin:38px 0;\n  border-top:1px solid rgba(236,216,157,.25);\n  border-bottom:1px solid rgba(236,216,157,.25);\n}\n\n#mza-zellige-master .final-grid div{\n  padding:21px 8px;\n  border-right:1px solid rgba(236,216,157,.25);\n}\n\n#mza-zellige-master .final-grid div:last-child{\n  border-right:0;\n}\n\n#mza-zellige-master .final-grid strong{\n  display:block;\n  color:var(--gold2);\n  font:31px Georgia,serif;\n}\n\n#mza-zellige-master .final-grid span{\n  color:rgba(255,255,255,.48);\n  font-size:8px;\n}\n\n\/* =========================================================\n RESPONSIVE\n========================================================= *\/\n\n@media(max-width:1100px){\n  #mza-zellige-master .courses{\n    grid-template-columns:repeat(3,1fr);\n  }\n\n  #mza-zellige-master .gesture-grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n}\n\n@media(max-width:900px){\n\n  #mza-zellige-master .intro-grid,\n  #mza-zellige-master .detail.show,\n  #mza-zellige-master .lab-grid,\n  #mza-zellige-master .gallery-grid{\n    grid-template-columns:1fr;\n  }\n\n  #mza-zellige-master .gallery-main{\n    min-height:520px;\n  }\n}\n\n@media(max-width:680px){\n\n  #mza-zellige-master .hero-copy{\n    margin:auto;\n  }\n\n  #mza-zellige-master .hero h1{\n    letter-spacing:-1px;\n  }\n\n  #mza-zellige-master .courses,\n  #mza-zellige-master .gesture-grid,\n  #mza-zellige-master .learning,\n  #mza-zellige-master .meta,\n  #mza-zellige-master .form-grid,\n  #mza-zellige-master .result-grid,\n  #mza-zellige-master .final-grid{\n    grid-template-columns:1fr;\n  }\n\n  #mza-zellige-master .progress{\n    grid-template-columns:1fr;\n  }\n}\n\n\/* =========================================================\n PRINT\n========================================================= *\/\n\n@media print{\n  #mza-zellige-master .hero,\n  #mza-zellige-master .nav,\n  #mza-zellige-master .intro,\n  #mza-zellige-master .gestes,\n  #mza-zellige-master .gallery,\n  #mza-zellige-master .programme,\n  #mza-zellige-master .final{\n    display:none!important;\n  }\n\n  #mza-zellige-master .lab{\n    padding:0;\n  }\n\n  #mza-zellige-master .lab-actions{\n    display:none!important;\n  }\n}\n\n<\/style>\n\n\n<!-- =========================================================\n HERO\n========================================================= -->\n\n<section class=\"hero\">\n\n  <div class=\"hero-photo visual\">\n\n    <img decoding=\"async\"\n      src=\"https:\/\/media.cntraveler.com\/photos\/55eefd75cdd1761348bdf8c3\/master\/w_1200%2Cc_limit\/fez-13.jpg\"\n      alt=\"Zellige marocain traditionnel\">\n\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\">\n      MZA\n    <\/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>Zellige<\/em>\n    <\/h1>\n\n    <p>\n      Terre, couleur, g\u00e9om\u00e9trie, taille, composition,\n      assemblage et pose : entrer dans l&#8217;univers\n      du zellige marocain et apprendre \u00e0 construire\n      un d\u00e9cor depuis le carreau jusqu&#8217;au panneau final.\n    <\/p>\n\n    <div class=\"actions\">\n\n      <button\n        type=\"button\"\n        class=\"btn-gold\"\n        data-scroll=\"mza-zellige-programme\">\n        LES 40 ATELIERS\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"btn-outline\"\n        data-scroll=\"mza-zellige-lab\">\n        OUVRIR LE ZELLIGE LAB\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n NAVIGATION\n========================================================= -->\n\n<nav class=\"nav\">\n\n  <div class=\"wrap\">\n\n    <button type=\"button\" data-scroll=\"mza-zellige-intro\">\n      L&#8217;ART DU ZELLIGE\n    <\/button>\n\n    <button type=\"button\" data-scroll=\"mza-zellige-gestes\">\n      LES GESTES\n    <\/button>\n\n    <button type=\"button\" data-scroll=\"mza-zellige-gallery\">\n      INSPIRATIONS\n    <\/button>\n\n    <button type=\"button\" data-scroll=\"mza-zellige-programme\">\n      40 ATELIERS\n    <\/button>\n\n    <button type=\"button\" data-scroll=\"mza-zellige-lab\">\n      ZELLIGE LAB\n    <\/button>\n\n    <button type=\"button\" data-scroll=\"mza-zellige-final\">\n      PROJET FINAL\n    <\/button>\n\n  <\/div>\n\n<\/nav>\n\n\n<!-- =========================================================\n INTRO\n========================================================= -->\n\n<section class=\"intro\" id=\"mza-zellige-intro\">\n\n  <div class=\"wrap intro-grid\">\n\n    <div class=\"intro-photo visual\">\n\n      <img decoding=\"async\"\n        src=\"https:\/\/moroccanberbercarpets.com\/cdn\/shop\/articles\/Zellige-Moroccan-Tile-Moroccan-Berber-Carpets.jpg\"\n        alt=\"Artisans du zellige marocain\">\n\n    <\/div>\n\n\n    <div>\n\n      <div class=\"chapter\">01<\/div>\n\n      <div class=\"eyebrow\">\n        LE GESTE DU MA\u00c2LEM\n      <\/div>\n\n      <h2>\n        De la terre\n        <em>\u00e0 la g\u00e9om\u00e9trie.<\/em>\n      <\/h2>\n\n      <p>\n        Le zellige associe mati\u00e8re, calcul, pr\u00e9cision\n        et composition d\u00e9corative.\n      <\/p>\n\n      <p>\n        Le carreau est pr\u00e9par\u00e9, color\u00e9 et d\u00e9coup\u00e9\n        en petites formes g\u00e9om\u00e9triques qui sont ensuite\n        assembl\u00e9es pour constituer frises, \u00e9toiles,\n        rosaces et grands panneaux.\n      <\/p>\n\n      <p>\n        La Master Class MZA aborde le m\u00e9tier\n        comme un v\u00e9ritable parcours de conception :\n        comprendre le mat\u00e9riau, lire un motif,\n        calculer une trame, d\u00e9couper les pi\u00e8ces,\n        composer puis pr\u00e9parer la pose.\n      <\/p>\n\n      <div class=\"signature\">\n        MAROC ZAIN ACADEMY \u00b7 M\u00e9tiers d&#8217;Art du Maroc\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n LES SIX GESTES\n========================================================= -->\n\n<section class=\"gestes\" id=\"mza-zellige-gestes\">\n\n  <div class=\"wrap\">\n\n    <header class=\"section-head\">\n\n      <div class=\"eyebrow\">\n        SAVOIR-FAIRE\n      <\/div>\n\n      <h2>\n        Six Gestes\n        <em>fondamentaux<\/em>\n      <\/h2>\n\n      <div class=\"gold-line\"><\/div>\n\n      <p>\n        La transformation progressive du carreau\n        en composition g\u00e9om\u00e9trique.\n      <\/p>\n\n    <\/header>\n\n\n    <div class=\"gesture-grid\">\n\n      <article class=\"gesture\">\n        <small>I<\/small>\n        <h3>Pr\u00e9parer<\/h3>\n        <p>\n          Comprendre terre, carreau,\n          cuisson, dimensions et \u00e9tat de surface.\n        <\/p>\n      <\/article>\n\n      <article class=\"gesture\">\n        <small>II<\/small>\n        <h3>Tracer<\/h3>\n        <p>\n          Construire la g\u00e9om\u00e9trie avant\n          toute op\u00e9ration de taille.\n        <\/p>\n      <\/article>\n\n      <article class=\"gesture\">\n        <small>III<\/small>\n        <h3>Tailler<\/h3>\n        <p>\n          Transformer le carreau\n          en \u00e9l\u00e9ments g\u00e9om\u00e9triques pr\u00e9cis.\n        <\/p>\n      <\/article>\n\n      <article class=\"gesture\">\n        <small>IV<\/small>\n        <h3>Composer<\/h3>\n        <p>\n          Organiser \u00e9toiles, polygones,\n          bordures et r\u00e9p\u00e9titions.\n        <\/p>\n      <\/article>\n\n      <article class=\"gesture\">\n        <small>V<\/small>\n        <h3>Assembler<\/h3>\n        <p>\n          Constituer le panneau\n          et ma\u00eetriser alignements et raccords.\n        <\/p>\n      <\/article>\n\n      <article class=\"gesture\">\n        <small>VI<\/small>\n        <h3>Poser<\/h3>\n        <p>\n          Pr\u00e9parer support, implantation,\n          contr\u00f4le et finition.\n        <\/p>\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n GALLERY\n========================================================= -->\n\n<section class=\"gallery\" id=\"mza-zellige-gallery\">\n\n  <div class=\"wrap\">\n\n    <header class=\"section-head\">\n\n      <div class=\"eyebrow\">\n        INSPIRATION MAROCAINE\n      <\/div>\n\n      <h2>\n        G\u00e9om\u00e9trie\n        <em>&#038; Architecture<\/em>\n      <\/h2>\n\n      <div class=\"gold-line\"><\/div>\n\n    <\/header>\n\n\n    <div class=\"gallery-grid\">\n\n      <div class=\"gallery-card gallery-main visual\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/www.emaratalyoum.com\/polopoly_fs\/1.1738804.1681583457!\/image\/image.jpeg\"\n          alt=\"Cour int\u00e9rieure en zellige marocain\">\n\n        <div class=\"gallery-copy\">\n          <small>ARCHITECTURE<\/small>\n          <h3>Le panneau dans son espace<\/h3>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"gallery-side\">\n\n        <div class=\"gallery-card visual\">\n\n          <img decoding=\"async\"\n            src=\"https:\/\/media.cntraveler.com\/photos\/55eefd75cdd1761348bdf8c3\/master\/w_1200%2Cc_limit\/fez-13.jpg\"\n            alt=\"Composition traditionnelle de zellige\">\n\n          <div class=\"gallery-copy\">\n            <small>COMPOSITION<\/small>\n            <h3>Rythme &#038; r\u00e9p\u00e9tition<\/h3>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"gallery-card visual\">\n\n          <img decoding=\"async\"\n            src=\"https:\/\/moroccanberbercarpets.com\/cdn\/shop\/articles\/Zellige-Moroccan-Tile-Moroccan-Berber-Carpets.jpg\"\n            alt=\"Atelier zellige\">\n\n          <div class=\"gallery-copy\">\n            <small>ATELIER<\/small>\n            <h3>Le geste de l&#8217;artisan<\/h3>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n 40 ATELIERS\n========================================================= -->\n\n<section class=\"programme\" id=\"mza-zellige-programme\">\n\n  <div class=\"wrap\">\n\n    <header class=\"section-head\">\n\n      <div class=\"eyebrow\">\n        MASTER CLASS ZELLIGE MZA \u00b7 PRO MAX\n      <\/div>\n\n      <h2>\n        40 Ateliers\n      <\/h2>\n\n      <div class=\"gold-line\"><\/div>\n\n      <p>\n        De la d\u00e9couverte du mat\u00e9riau\n        jusqu&#8217;\u00e0 la conception d&#8217;un panneau signature.\n      <\/p>\n\n    <\/header>\n\n\n    <div class=\"tools\">\n\n      <input\n        type=\"search\"\n        id=\"zellige-search\"\n        placeholder=\"Rechercher : \u00e9toile, coupe, couleur, pose\u2026\">\n\n      <div class=\"filters\">\n\n        <button type=\"button\" class=\"filter active\" data-level=\"all\">\n          TOUS\n        <\/button>\n\n        <button type=\"button\" class=\"filter\" data-level=\"1\">\n          MATI\u00c8RE\n        <\/button>\n\n        <button type=\"button\" class=\"filter\" data-level=\"2\">\n          G\u00c9OM\u00c9TRIE\n        <\/button>\n\n        <button type=\"button\" class=\"filter\" data-level=\"3\">\n          COMPOSITION\n        <\/button>\n\n        <button type=\"button\" class=\"filter\" data-level=\"4\">\n          MA\u00c2LEM\n        <\/button>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"progress\">\n\n      <strong class=\"count\" id=\"zellige-count\">\n        0\/40\n      <\/strong>\n\n      <div>\n\n        <strong>\n          Progression Master Class\n        <\/strong>\n\n        <div class=\"track\">\n          <div class=\"fill\" id=\"zellige-fill\"><\/div>\n        <\/div>\n\n      <\/div>\n\n      <button\n        type=\"button\"\n        class=\"reset\"\n        id=\"zellige-reset\">\n        R\u00c9INITIALISER\n      <\/button>\n\n    <\/div>\n\n\n    <div id=\"zellige-detail\" class=\"detail\"><\/div>\n\n    <div id=\"zellige-courses\"><\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n ZELLIGE LAB\n========================================================= -->\n\n<section class=\"lab\" id=\"mza-zellige-lab\">\n\n  <div class=\"wrap\">\n\n    <header class=\"section-head\">\n\n      <div class=\"eyebrow\">\n        MZA ZELLIGE LAB\n      <\/div>\n\n      <h2>\n        Calcul &#038; Cr\u00e9ation\n        <em>du motif<\/em>\n      <\/h2>\n\n      <div class=\"gold-line\"><\/div>\n\n      <p>\n        Estimer une surface puis exp\u00e9rimenter\n        une composition g\u00e9om\u00e9trique.\n      <\/p>\n\n    <\/header>\n\n\n    <div class=\"lab-grid\">\n\n\n      <!-- CALCULATEUR -->\n\n      <div class=\"panel\">\n\n        <h3>Calculateur de Surface<\/h3>\n\n        <p>\n          Estimation p\u00e9dagogique du besoin en carreaux.\n        <\/p>\n\n\n        <div class=\"form-grid\">\n\n          <label>\n            LARGEUR DU PANNEAU \u00b7 CM\n            <input\n              id=\"zl-width\"\n              type=\"number\"\n              value=\"200\"\n              min=\"1\">\n          <\/label>\n\n          <label>\n            HAUTEUR DU PANNEAU \u00b7 CM\n            <input\n              id=\"zl-height\"\n              type=\"number\"\n              value=\"150\"\n              min=\"1\">\n          <\/label>\n\n          <label>\n            CARREAU DE BASE \u00b7 CM\n            <input\n              id=\"zl-tile\"\n              type=\"number\"\n              value=\"10\"\n              min=\"1\">\n          <\/label>\n\n          <label>\n            PERTES \/ COUPES \u00b7 %\n            <input\n              id=\"zl-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\n            type=\"button\"\n            class=\"btn-green\"\n            id=\"zl-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=\"zl-area\">\u2014<\/strong>\n            <\/div>\n\n            <div>\n              <small>CARREAUX TH\u00c9ORIQUES<\/small>\n              <strong id=\"zl-count\">\u2014<\/strong>\n            <\/div>\n\n            <div>\n              <small>AVEC PERTES<\/small>\n              <strong id=\"zl-total\">\u2014<\/strong>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- MOTIF GENERATOR -->\n\n      <div class=\"panel\">\n\n        <h3>Moteur de Motifs<\/h3>\n\n        <p>\n          G\u00e9n\u00e9rateur p\u00e9dagogique de compositions\n          inspir\u00e9es de la g\u00e9om\u00e9trie du zellige.\n        <\/p>\n\n\n        <div class=\"form-grid\">\n\n          <label>\n            MOTIF\n            <select id=\"zl-pattern\">\n              <option value=\"star\">\u00c9toile 8 branches<\/option>\n              <option value=\"diamond\">Losanges<\/option>\n              <option value=\"cross\">Croix &#038; carr\u00e9s<\/option>\n              <option value=\"rosette\">Rosace<\/option>\n            <\/select>\n          <\/label>\n\n          <label>\n            DENSIT\u00c9\n            <select id=\"zl-density\">\n              <option value=\"3\">Large<\/option>\n              <option value=\"5\" selected>Moyenne<\/option>\n              <option value=\"7\">Fine<\/option>\n            <\/select>\n          <\/label>\n\n        <\/div>\n\n\n        <div class=\"lab-actions\">\n\n          <button\n            type=\"button\"\n            class=\"btn-green\"\n            id=\"zl-generate\">\n            G\u00c9N\u00c9RER LE MOTIF\n          <\/button>\n\n          <button\n            type=\"button\"\n            class=\"btn-green\"\n            onclick=\"window.print()\">\n            IMPRIMER\n          <\/button>\n\n        <\/div>\n\n\n        <div class=\"motif-stage\">\n\n          <svg\n            id=\"zellige-svg\"\n            viewBox=\"0 0 600 600\"\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<!-- =========================================================\n FINAL\n========================================================= -->\n\n<section class=\"final\" id=\"mza-zellige-final\">\n\n  <div class=\"wrap\">\n\n    <div class=\"final-box\">\n\n      <div class=\"eyebrow\">\n        EXAMEN FINAL MZA \u00b7 M\u00c9TIERS D&#8217;ART\n      <\/div>\n\n      <h2>\n        Le Grand Panneau\n        <em>du Ma\u00e2lem<\/em>\n      <\/h2>\n\n      <p>\n        Imaginer une composition originale,\n        produire son plan g\u00e9om\u00e9trique,\n        calculer les pi\u00e8ces n\u00e9cessaires,\n        construire la palette chromatique\n        et pr\u00e9senter le projet final.\n      <\/p>\n\n\n      <div class=\"final-grid\">\n\n        <div>\n          <strong>1<\/strong>\n          <span>PANNEAU<\/span>\n        <\/div>\n\n        <div>\n          <strong>1<\/strong>\n          <span>PLAN G\u00c9OM\u00c9TRIQUE<\/span>\n        <\/div>\n\n        <div>\n          <strong>1<\/strong>\n          <span>CALCUL M\u00c9TR\u00c9<\/span>\n        <\/div>\n\n        <div>\n          <strong>1<\/strong>\n          <span>SOUTENANCE<\/span>\n        <\/div>\n\n      <\/div>\n\n\n      <p id=\"zellige-final-status\">\n        0\/40 ateliers valid\u00e9s.\n      <\/p>\n\n      <br>\n\n      <button\n        type=\"button\"\n        class=\"btn-gold\"\n        id=\"zellige-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\n\/* =========================================================\n IMAGES\n========================================================= *\/\n\nconst IMG={\n\n  artisan:\n  \"https:\/\/moroccanberbercarpets.com\/cdn\/shop\/articles\/Zellige-Moroccan-Tile-Moroccan-Berber-Carpets.jpg\",\n\n  palace:\n  \"https:\/\/www.emaratalyoum.com\/polopoly_fs\/1.1738804.1681583457!\/image\/image.jpeg\",\n\n  wall:\n  \"https:\/\/media.cntraveler.com\/photos\/55eefd75cdd1761348bdf8c3\/master\/w_1200%2Cc_limit\/fez-13.jpg\"\n\n};\n\n\n\/* =========================================================\n 40 ATELIERS\n========================================================= *\/\n\nconst COURSE_DATA=[\n\n\/* NIVEAU 1 *\/\n\n[1,1,\"Histoire du zellige marocain\",\n\"Comprendre les origines, usages et grandes familles d\u00e9coratives.\",\"2 h\",IMG.wall],\n\n[2,1,\"La terre et l'argile\",\n\"D\u00e9couvrir la mati\u00e8re premi\u00e8re et ses propri\u00e9t\u00e9s.\",\"3 h\",IMG.artisan],\n\n[3,1,\"Fabrication du carreau\",\n\"De la pr\u00e9paration de la terre jusqu'au carreau brut.\",\"4 h\",IMG.artisan],\n\n[4,1,\"S\u00e9chage\",\n\"Comprendre le retrait et les risques de d\u00e9formation.\",\"3 h\",IMG.artisan],\n\n[5,1,\"Premi\u00e8re cuisson\",\n\"Comprendre la transformation de la mati\u00e8re par la chaleur.\",\"3 h\",IMG.artisan],\n\n[6,1,\"\u00c9maillage\",\n\"D\u00e9couvrir les principes de couverture et finition color\u00e9e.\",\"4 h\",IMG.artisan],\n\n[7,1,\"Palette traditionnelle\",\n\"\u00c9tudier les associations chromatiques du zellige.\",\"3 h\",IMG.wall],\n\n[8,1,\"Outils du zellige\",\n\"D\u00e9couvrir marteau, support, tra\u00e7age et \u00e9quipements.\",\"3 h\",IMG.artisan],\n\n[9,1,\"S\u00e9curit\u00e9 de l'atelier\",\n\"Organiser un poste de travail s\u00fbr et propre.\",\"2 h\",IMG.artisan],\n\n[10,1,\"Contr\u00f4le du carreau\",\n\"Identifier d\u00e9fauts, plan\u00e9it\u00e9 et qualit\u00e9 de finition.\",\"3 h\",IMG.artisan],\n\n\n\/* NIVEAU 2 *\/\n\n[11,2,\"G\u00e9om\u00e9trie du zellige\",\n\"Comprendre r\u00e9p\u00e9tition, sym\u00e9trie et construction modulaire.\",\"4 h\",IMG.wall],\n\n[12,2,\"Carr\u00e9 & diagonale\",\n\"Construire les premi\u00e8res trames g\u00e9om\u00e9triques.\",\"3 h\",IMG.wall],\n\n[13,2,\"Triangle\",\n\"D\u00e9velopper des compositions \u00e0 partir du triangle.\",\"3 h\",IMG.wall],\n\n[14,2,\"Losange\",\n\"Tracer et combiner les formes losang\u00e9es.\",\"3 h\",IMG.wall],\n\n[15,2,\"\u00c9toile \u00e0 8 branches\",\n\"Construire une \u00e9toile r\u00e9guli\u00e8re \u00e9tape par \u00e9tape.\",\"5 h\",IMG.wall],\n\n[16,2,\"\u00c9toile \u00e0 12 branches\",\n\"Approfondir la g\u00e9om\u00e9trie radiale.\",\"5 h\",IMG.wall],\n\n[17,2,\"Rosace\",\n\"Cr\u00e9er une composition centr\u00e9e et r\u00e9p\u00e9titive.\",\"5 h\",IMG.palace],\n\n[18,2,\"Entrelacs\",\n\"Comprendre continuit\u00e9 et croisement du motif.\",\"4 h\",IMG.wall],\n\n[19,2,\"Frises\",\n\"Construire une bordure r\u00e9p\u00e9titive.\",\"4 h\",IMG.wall],\n\n[20,2,\"Raccords\",\n\"Faire co\u00efncider plusieurs modules sans rupture visuelle.\",\"4 h\",IMG.wall],\n\n\n\/* NIVEAU 3 *\/\n\n[21,3,\"Tra\u00e7age sur carreau\",\n\"Reporter une forme avec pr\u00e9cision.\",\"4 h\",IMG.artisan],\n\n[22,3,\"Premi\u00e8res tailles\",\n\"D\u00e9couvrir les principes de d\u00e9coupe contr\u00f4l\u00e9e.\",\"5 h\",IMG.artisan],\n\n[23,3,\"Taille du triangle\",\n\"Produire des \u00e9l\u00e9ments g\u00e9om\u00e9triques r\u00e9p\u00e9tables.\",\"5 h\",IMG.artisan],\n\n[24,3,\"Taille du losange\",\n\"Travailler angles et r\u00e9gularit\u00e9.\",\"5 h\",IMG.artisan],\n\n[25,3,\"Taille des \u00e9toiles\",\n\"Pr\u00e9parer les \u00e9l\u00e9ments d'une composition \u00e9toil\u00e9e.\",\"6 h\",IMG.artisan],\n\n[26,3,\"Calibrage\",\n\"Contr\u00f4ler dimensions et r\u00e9p\u00e9titivit\u00e9 des pi\u00e8ces.\",\"4 h\",IMG.artisan],\n\n[27,3,\"Composition \u00e0 blanc\",\n\"Assembler le motif avant fixation d\u00e9finitive.\",\"5 h\",IMG.palace],\n\n[28,3,\"Lecture invers\u00e9e\",\n\"Comprendre l'assemblage depuis la face arri\u00e8re.\",\"5 h\",IMG.artisan],\n\n[29,3,\"Montage du panneau\",\n\"Assembler m\u00e9thodiquement les \u00e9l\u00e9ments d\u00e9coup\u00e9s.\",\"6 h\",IMG.artisan],\n\n[30,3,\"Bordures & finitions\",\n\"Fermer proprement une composition.\",\"4 h\",IMG.wall],\n\n\n\/* NIVEAU 4 *\/\n\n[31,4,\"Implantation sur chantier\",\n\"Lire les dimensions et organiser la pose.\",\"5 h\",IMG.palace],\n\n[32,4,\"Calcul du m\u00e9trage\",\n\"Calculer surface, quantit\u00e9s et marge de perte.\",\"4 h\",IMG.wall],\n\n[33,4,\"Calepinage\",\n\"Pr\u00e9parer un plan de pose coh\u00e9rent.\",\"5 h\",IMG.wall],\n\n[34,4,\"Supports & pr\u00e9paration\",\n\"Comprendre plan\u00e9it\u00e9, adh\u00e9rence et implantation.\",\"4 h\",IMG.artisan],\n\n[35,4,\"Pose d'un panneau\",\n\"Organiser alignement et contr\u00f4le de la composition.\",\"6 h\",IMG.palace],\n\n[36,4,\"Angles & raccords complexes\",\n\"Traiter changements de plan et bordures.\",\"5 h\",IMG.wall],\n\n[37,4,\"Contr\u00f4le qualit\u00e9\",\n\"\u00c9valuer g\u00e9om\u00e9trie, couleur, alignement et finition.\",\"4 h\",IMG.palace],\n\n[38,4,\"Restauration & remplacement\",\n\"Comprendre les principes d'intervention respectueuse.\",\"4 h\",IMG.wall],\n\n[39,4,\"Cr\u00e9ation Signature MZA\",\n\"Cr\u00e9er une composition personnelle coh\u00e9rente.\",\"7 h\",IMG.palace],\n\n[40,4,\"Grand Projet Final\",\n\"Concevoir un panneau complet et d\u00e9fendre son projet.\",\"Projet\",IMG.palace]\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 logique technique\",\n     \"Identifier les outils et mat\u00e9riaux\",\n     \"Ex\u00e9cuter l'exercice p\u00e9dagogique\",\n     \"Contr\u00f4ler la pr\u00e9cision obtenue\"\n   ],\n\n   techniques:[\n     \"Observation\",\n     \"Tra\u00e7age\",\n     \"Pr\u00e9cision g\u00e9om\u00e9trique\",\n     \"Contr\u00f4le qualit\u00e9\"\n   ],\n\n   mission:\n   x[0]===40\n   ?\n   \"Cr\u00e9er un panneau signature avec plan g\u00e9om\u00e9trique, palette, m\u00e9trage, nomenclature des pi\u00e8ces et pr\u00e9sentation finale.\"\n   :\n   \"R\u00e9aliser l'exercice de l'atelier et v\u00e9rifier pr\u00e9cision, r\u00e9p\u00e9tition et r\u00e9gularit\u00e9.\"\n };\n\n});\n\n\nfunction levelTitle(n){\n\n return{\n   1:\"Mati\u00e8re & Fondations\",\n   2:\"G\u00e9om\u00e9trie & Motifs\",\n   3:\"Taille & Composition\",\n   4:\"Pose \u00b7 Ma\u00e2lem \u00b7 Projet\"\n }[n];\n\n}\n\n\n\/* =========================================================\n PROGRESSION\n========================================================= *\/\n\nfunction loadProgress(){\n\n try{\n\n   const p=JSON.parse(\n     localStorage.getItem(\"mzaZelligeProgress\") || \"[]\"\n   );\n\n   return Array.isArray(p) ? p : [];\n\n }catch(e){\n\n   return[];\n\n }\n\n}\n\n\nlet done=loadProgress();\nlet activeLevel=\"all\";\n\n\nfunction saveProgress(){\n\n try{\n\n   localStorage.setItem(\n     \"mzaZelligeProgress\",\n     JSON.stringify(done)\n   );\n\n }catch(e){}\n\n}\n\n\nfunction updateProgress(){\n\n const n=done.length;\n\n document.getElementById(\n   \"zellige-count\"\n ).textContent=n+\"\/40\";\n\n document.getElementById(\n   \"zellige-fill\"\n ).style.width=(n\/40*100)+\"%\";\n\n document.getElementById(\n   \"zellige-final-status\"\n ).textContent=\n   n===40\n   ?\n   \"40\/40 ateliers valid\u00e9s \u00b7 Projet final accessible.\"\n   :\n   n+\"\/40 ateliers valid\u00e9s.\";\n\n}\n\n\n\/* =========================================================\n IMAGES\n========================================================= *\/\n\nfunction protectImages(){\n\n document.querySelectorAll(\n   \"#mza-zellige-master img\"\n ).forEach(function(img){\n\n   if(img.dataset.mzaProtected===\"1\") return;\n\n   img.dataset.mzaProtected=\"1\";\n\n   img.addEventListener(\"error\",function(){\n\n     this.style.opacity=\"0\";\n\n   });\n\n });\n\n}\n\n\n\/* =========================================================\n RENDER\n========================================================= *\/\n\nfunction render(){\n\n const q=\n document.getElementById(\n   \"zellige-search\"\n ).value.toLowerCase().trim();\n\n let html=\"\";\n\n\n [1,2,3,4].forEach(function(level){\n\n   const list=COURSE_DATA.filter(function(c){\n\n     const filterOK=\n       activeLevel===\"all\" ||\n       String(c.level)===activeLevel;\n\n     const queryOK=\n       !q ||\n       (\n         c.title+\" \"+c.desc\n       ).toLowerCase().includes(q);\n\n     return(\n       c.level===level &&\n       filterOK &&\n       queryOK\n     );\n\n   });\n\n\n   if(!list.length) return;\n\n\n   html+=`\n\n   <div class=\"level-title\">\n\n     <small>\n       NIVEAU ${level}\n     <\/small>\n\n     <h3>\n       ${levelTitle(level)}\n     <\/h3>\n\n   <\/div>\n\n   <div class=\"courses\">\n\n   `;\n\n\n   list.forEach(function(c){\n\n     html+=`\n\n     <button\n       type=\"button\"\n       class=\"course ${done.includes(c.id) ? \"done\" : \"\"}\"\n       data-zellige-course=\"${c.id}\">\n\n       <div class=\"course-image visual\">\n\n         <img decoding=\"async\"\n           loading=\"lazy\"\n           src=\"${c.img}\"\n           alt=\"${c.title}\">\n\n       <\/div>\n\n       <div class=\"course-body\">\n\n         <span class=\"course-number\">\n           ${String(c.id).padStart(2,\"0\")}\n         <\/span>\n\n         <h4>\n           ${c.title}\n         <\/h4>\n\n         <p>\n           ${c.desc}\n         <\/p>\n\n         <span class=\"enter\">\n\n           ${\n             done.includes(c.id)\n             ? \"\u2713 ATELIER VALID\u00c9\"\n             : \"OUVRIR L'ATELIER \u2192\"\n           }\n\n         <\/span>\n\n       <\/div>\n\n     <\/button>\n\n     `;\n\n   });\n\n\n   html+=\"<\/div>\";\n\n });\n\n\n document.getElementById(\n   \"zellige-courses\"\n ).innerHTML=html;\n\n\n document.querySelectorAll(\n   \"#mza-zellige-master [data-zellige-course]\"\n ).forEach(function(btn){\n\n   btn.onclick=function(){\n\n     openCourse(\n       Number(btn.dataset.zelligeCourse)\n     );\n\n   };\n\n });\n\n\n protectImages();\n\n}\n\n\n\/* =========================================================\n DETAIL\n========================================================= *\/\n\nfunction openCourse(id){\n\n const c=COURSE_DATA.find(function(x){\n   return x.id===id;\n });\n\n if(!c) return;\n\n\n const d=\n document.getElementById(\n   \"zellige-detail\"\n );\n\n\n d.innerHTML=`\n\n <div class=\"detail-image visual\">\n\n   <img decoding=\"async\"\n     src=\"${c.img}\"\n     alt=\"${c.title}\">\n\n <\/div>\n\n\n <div class=\"detail-copy\">\n\n   <button\n     type=\"button\"\n     class=\"close\"\n     id=\"zl-close\">\n     \u00d7\n   <\/button>\n\n\n   <div class=\"eyebrow\">\n\n     ATELIER ${String(c.id).padStart(2,\"0\")}\n     \u00b7 ${levelTitle(c.level)}\n\n   <\/div>\n\n\n   <h3>\n     ${c.title}\n   <\/h3>\n\n\n   <p>\n     ${c.desc}\n   <\/p>\n\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\n       <h4>Objectifs<\/h4>\n\n       <ul>\n\n       ${\n         c.objectives\n         .map(function(x){\n           return\"<li>\"+x+\"<\/li>\";\n         })\n         .join(\"\")\n       }\n\n       <\/ul>\n\n     <\/div>\n\n\n     <div class=\"learning-box\">\n\n       <h4>Comp\u00e9tences travaill\u00e9es<\/h4>\n\n       <ul>\n\n       ${\n         c.techniques\n         .map(function(x){\n           return\"<li>\"+x+\"<\/li>\";\n         })\n         .join(\"\")\n       }\n\n       <\/ul>\n\n     <\/div>\n\n   <\/div>\n\n\n   <div class=\"mission\">\n\n     <strong>\n       MISSION MZA\n     <\/strong>\n\n     <br><br>\n\n     ${c.mission}\n\n   <\/div>\n\n\n   <div class=\"detail-actions\">\n\n     <button\n       type=\"button\"\n       class=\"btn-green\"\n       id=\"zl-valid\">\n\n       ${\n         done.includes(c.id)\n         ? \"\u2713 ATELIER VALID\u00c9\"\n         : \"VALIDER L'ATELIER\"\n       }\n\n     <\/button>\n\n\n     ${\n       c.id<40\n       ?\n       `\n       <button\n         type=\"button\"\n         class=\"btn-green\"\n         id=\"zl-next\">\n         ATELIER SUIVANT \u2192\n       <\/button>\n       `\n       :\n       \"\"\n     }\n\n   <\/div>\n\n <\/div>\n\n `;\n\n\n d.classList.add(\"show\");\n\n\n d.scrollIntoView({\n   behavior:\"smooth\",\n   block:\"start\"\n });\n\n\n protectImages();\n\n\n document.getElementById(\n   \"zl-close\"\n ).onclick=function(){\n\n   d.classList.remove(\"show\");\n\n };\n\n\n document.getElementById(\n   \"zl-valid\"\n ).onclick=function(){\n\n   if(!done.includes(c.id)){\n\n     done.push(c.id);\n\n     done.sort(function(a,b){\n       return a-b;\n     });\n\n     saveProgress();\n\n   }\n\n   updateProgress();\n   render();\n   openCourse(c.id);\n\n };\n\n\n const next=\n document.getElementById(\n   \"zl-next\"\n );\n\n\n if(next){\n\n   next.onclick=function(){\n     openCourse(c.id+1);\n   };\n\n }\n\n}\n\n\n\/* =========================================================\n FILTERS\n========================================================= *\/\n\ndocument.querySelectorAll(\n \"#mza-zellige-master .filter\"\n).forEach(function(btn){\n\n btn.onclick=function(){\n\n   document.querySelectorAll(\n     \"#mza-zellige-master .filter\"\n   ).forEach(function(x){\n\n     x.classList.remove(\"active\");\n\n   });\n\n   btn.classList.add(\"active\");\n\n   activeLevel=btn.dataset.level;\n\n   render();\n\n };\n\n});\n\n\ndocument.getElementById(\n \"zellige-search\"\n).oninput=render;\n\n\n\/* =========================================================\n RESET\n========================================================= *\/\n\ndocument.getElementById(\n \"zellige-reset\"\n).onclick=function(){\n\n if(!confirm(\n   \"R\u00e9initialiser la progression du parcours Zellige ?\"\n )) return;\n\n\n done=[];\n\n saveProgress();\n\n updateProgress();\n\n render();\n\n\n document.getElementById(\n   \"zellige-detail\"\n ).classList.remove(\"show\");\n\n};\n\n\n\/* =========================================================\n NAVIGATION\n========================================================= *\/\n\nfunction go(id){\n\n const el=document.getElementById(id);\n\n if(el){\n\n   el.scrollIntoView({\n     behavior:\"smooth\",\n     block:\"start\"\n   });\n\n }\n\n}\n\n\ndocument.querySelectorAll(\n \"#mza-zellige-master [data-scroll]\"\n).forEach(function(btn){\n\n btn.onclick=function(){\n\n   go(btn.dataset.scroll);\n\n };\n\n});\n\n\ndocument.getElementById(\n \"zellige-start\"\n).onclick=function(){\n\n go(\"mza-zellige-programme\");\n\n};\n\n\n\/* =========================================================\n CALCULATEUR SURFACE\n========================================================= *\/\n\ndocument.getElementById(\n \"zl-calculate\"\n).onclick=function(){\n\n const width=\n Math.max(\n   1,\n   Number(\n     document.getElementById(\"zl-width\").value\n   ) || 1\n );\n\n\n const height=\n Math.max(\n   1,\n   Number(\n     document.getElementById(\"zl-height\").value\n   ) || 1\n );\n\n\n const tile=\n Math.max(\n   1,\n   Number(\n     document.getElementById(\"zl-tile\").value\n   ) || 10\n );\n\n\n const waste=\n Math.max(\n   0,\n   Number(\n     document.getElementById(\"zl-waste\").value\n   ) || 0\n );\n\n\n const areaCm2=\n width*height;\n\n\n const areaM2=\n areaCm2\/10000;\n\n\n const tileArea=\n tile*tile;\n\n\n const theoretical=\n Math.ceil(\n   areaCm2\/tileArea\n );\n\n\n const total=\n Math.ceil(\n   theoretical*(1+waste\/100)\n );\n\n\n document.getElementById(\n   \"zl-area\"\n ).textContent=\n areaM2.toFixed(2)+\" m\u00b2\";\n\n\n document.getElementById(\n   \"zl-count\"\n ).textContent=\n theoretical;\n\n\n document.getElementById(\n   \"zl-total\"\n ).textContent=\n total;\n\n};\n\n\n\/* =========================================================\n SVG MOTIF GENERATOR\n========================================================= *\/\n\nfunction polygonPoints(cx,cy,r,n,rotation){\n\n const pts=[];\n\n for(let i=0;i<n;i++){\n\n   const a=\n   rotation+\n   i*Math.PI*2\/n;\n\n   pts.push(\n     (cx+Math.cos(a)*r)+\",\"+\n     (cy+Math.sin(a)*r)\n   );\n\n }\n\n return pts.join(\" \");\n\n}\n\n\nfunction starPoints(cx,cy,r1,r2,n){\n\n const pts=[];\n\n for(let i=0;i<n*2;i++){\n\n   const a=\n   -Math.PI\/2+\n   i*Math.PI\/n;\n\n   const r=\n   i%2===0 ? r1:r2;\n\n   pts.push(\n     (cx+Math.cos(a)*r)+\",\"+\n     (cy+Math.sin(a)*r)\n   );\n\n }\n\n return pts.join(\" \");\n\n}\n\n\nfunction generatePattern(){\n\n const svg=\n document.getElementById(\n   \"zellige-svg\"\n );\n\n\n const pattern=\n document.getElementById(\n   \"zl-pattern\"\n ).value;\n\n\n const density=\n Number(\n   document.getElementById(\n     \"zl-density\"\n   ).value\n );\n\n\n const size=\n 600\/density;\n\n\n let html=`\n\n <rect\n   x=\"0\"\n   y=\"0\"\n   width=\"600\"\n   height=\"600\"\n   fill=\"#f5eedf\"\/>\n\n `;\n\n\n for(let row=0;row<density;row++){\n\n   for(let col=0;col<density;col++){\n\n     const cx=\n     col*size+size\/2;\n\n     const cy=\n     row*size+size\/2;\n\n\n     if(pattern===\"star\"){\n\n       html+=`\n\n       <polygon\n         points=\"${starPoints(\n           cx,\n           cy,\n           size*.40,\n           size*.19,\n           8\n         )}\"\n         fill=\"${(row+col)%2===0 ? \"#0b5943\":\"#155d77\"}\"\n         stroke=\"#c8a45d\"\n         stroke-width=\"3\"\/>\n\n       <circle\n         cx=\"${cx}\"\n         cy=\"${cy}\"\n         r=\"${size*.08}\"\n         fill=\"#c8a45d\"\/>\n\n       `;\n\n     }\n\n\n     if(pattern===\"diamond\"){\n\n       html+=`\n\n       <polygon\n         points=\"\n         ${cx},${cy-size*.42}\n         ${cx+size*.42},${cy}\n         ${cx},${cy+size*.42}\n         ${cx-size*.42},${cy}\"\n         fill=\"${(row+col)%2===0 ? \"#073d2e\":\"#a64f35\"}\"\n         stroke=\"#ecd89d\"\n         stroke-width=\"3\"\/>\n\n       `;\n\n     }\n\n\n     if(pattern===\"cross\"){\n\n       const s=size*.18;\n\n       html+=`\n\n       <rect\n         x=\"${cx-s}\"\n         y=\"${cy-size*.38}\"\n         width=\"${s*2}\"\n         height=\"${size*.76}\"\n         fill=\"#0b5943\"\n         stroke=\"#c8a45d\"\n         stroke-width=\"2\"\/>\n\n       <rect\n         x=\"${cx-size*.38}\"\n         y=\"${cy-s}\"\n         width=\"${size*.76}\"\n         height=\"${s*2}\"\n         fill=\"#155d77\"\n         stroke=\"#c8a45d\"\n         stroke-width=\"2\"\/>\n\n       `;\n\n     }\n\n\n     if(pattern===\"rosette\"){\n\n       html+=`\n\n       <polygon\n         points=\"${polygonPoints(\n           cx,\n           cy,\n           size*.38,\n           12,\n           -Math.PI\/2\n         )}\"\n         fill=\"${(row+col)%2===0 ? \"#155d77\":\"#073d2e\"}\"\n         stroke=\"#c8a45d\"\n         stroke-width=\"3\"\/>\n\n       <polygon\n         points=\"${starPoints(\n           cx,\n           cy,\n           size*.29,\n           size*.13,\n           6\n         )}\"\n         fill=\"#f5eedf\"\n         stroke=\"#c8a45d\"\n         stroke-width=\"2\"\/>\n\n       <circle\n         cx=\"${cx}\"\n         cy=\"${cy}\"\n         r=\"${size*.055}\"\n         fill=\"#a64f35\"\/>\n\n       `;\n\n     }\n\n   }\n\n }\n\n\n svg.innerHTML=html;\n\n}\n\n\ndocument.getElementById(\n \"zl-generate\"\n).onclick=generatePattern;\n\n\n\/* =========================================================\n INIT\n========================================================= *\/\n\nrender();\n\nupdateProgress();\n\ngeneratePattern();\n\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 Zellige Terre, couleur, g\u00e9om\u00e9trie, taille, composition, assemblage et pose : entrer dans l&#8217;univers du zellige marocain et apprendre \u00e0 construire un d\u00e9cor depuis le carreau jusqu&#8217;au panneau final. LES 40 ATELIERS OUVRIR LE ZELLIGE LAB L&#8217;ART DU ZELLIGE LES GESTES INSPIRATIONS 40 ATELIERS ZELLIGE [&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-1772","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1772","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=1772"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1772\/revisions"}],"predecessor-version":[{"id":1774,"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/pages\/1772\/revisions\/1774"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/patrimoine.maroczain.com\/wp-json\/wp\/v2\/media?parent=1772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}