{"id":3652,"date":"2026-08-22T18:13:50","date_gmt":"2026-08-22T18:13:50","guid":{"rendered":"https:\/\/maroczain.com\/?p=3652"},"modified":"2026-08-22T18:13:50","modified_gmt":"2026-08-22T18:13:50","slug":"3652","status":"publish","type":"post","link":"https:\/\/maroczain.com\/en\/2026\/08\/22\/3652\/","title":{"rendered":""},"content":{"rendered":"<div id=\"mzp-app\">\n\n<style>\n#mzp-app{\n  --navy:#072b4a;\n  --blue:#0a6aa1;\n  --cyan:#16b6d9;\n  --gold:#e3bf57;\n  --ink:#172033;\n  --muted:#6c7890;\n  --bg:#f4f7fb;\n  --card:#ffffff;\n  --line:#e5ebf2;\n  --success:#17945b;\n  --danger:#c93f4e;\n  --shadow:0 18px 55px rgba(19,45,72,.10);\n  font-family:Inter,Arial,Helvetica,sans-serif;\n  color:var(--ink);\n}\n\n#mzp-app *{box-sizing:border-box}\n\n#mzp-app .mzp-shell{\n  max-width:1240px;\n  margin:auto;\n  padding:28px 18px 50px;\n}\n\n#mzp-app .mzp-hero{\n  position:relative;\n  overflow:hidden;\n  border-radius:30px;\n  background:\n    radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 30%),\n    linear-gradient(135deg,#062844,#0b5e8c 58%,#0a83ad);\n  padding:46px;\n  color:white;\n  box-shadow:var(--shadow);\n}\n\n#mzp-app .mzp-hero:after{\n  content:\"\";\n  position:absolute;\n  width:260px;\n  height:260px;\n  border-radius:50%;\n  background:rgba(255,255,255,.06);\n  right:-80px;\n  bottom:-90px;\n}\n\n#mzp-app .mzp-badge{\n  display:inline-flex;\n  align-items:center;\n  gap:8px;\n  padding:8px 13px;\n  border-radius:999px;\n  background:rgba(255,255,255,.14);\n  border:1px solid rgba(255,255,255,.18);\n  font-size:13px;\n  font-weight:700;\n  margin-bottom:18px;\n}\n\n#mzp-app .mzp-hero-grid{\n  display:grid;\n  grid-template-columns:1.3fr .7fr;\n  gap:30px;\n  align-items:center;\n}\n\n#mzp-app .mzp-hero h1{\n  margin:0;\n  font-size:46px;\n  line-height:1.05;\n  max-width:760px;\n}\n\n#mzp-app .mzp-hero p{\n  max-width:720px;\n  margin:16px 0 0;\n  opacity:.9;\n  font-size:17px;\n  line-height:1.7;\n}\n\n#mzp-app .mzp-kpis{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n}\n\n#mzp-app .mzp-kpi{\n  background:rgba(255,255,255,.11);\n  border:1px solid rgba(255,255,255,.15);\n  border-radius:20px;\n  padding:18px;\n}\n\n#mzp-app .mzp-kpi strong{\n  font-size:26px;\n  display:block;\n}\n\n#mzp-app .mzp-kpi span{\n  font-size:12px;\n  opacity:.8;\n}\n\n#mzp-app .mzp-toolbar{\n  display:flex;\n  gap:12px;\n  align-items:center;\n  justify-content:space-between;\n  margin:28px 0 18px;\n  flex-wrap:wrap;\n}\n\n#mzp-app .mzp-toolbar h2{\n  margin:0;\n  font-size:28px;\n}\n\n#mzp-app .mzp-search{\n  min-width:320px;\n  position:relative;\n}\n\n#mzp-app .mzp-search input{\n  width:100%;\n  border:1px solid var(--line);\n  background:white;\n  border-radius:14px;\n  padding:14px 16px 14px 42px;\n  outline:none;\n  box-shadow:0 5px 20px rgba(0,0,0,.04);\n}\n\n#mzp-app .mzp-search span{\n  position:absolute;\n  left:15px;\n  top:50%;\n  transform:translateY(-50%);\n}\n\n#mzp-app .mzp-bank-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));\n  gap:16px;\n}\n\n#mzp-app .mzp-bank-card{\n  background:var(--card);\n  border:1px solid var(--line);\n  border-radius:20px;\n  padding:20px;\n  transition:.25s ease;\n  box-shadow:0 8px 25px rgba(0,0,0,.04);\n}\n\n#mzp-app .mzp-bank-card:hover{\n  transform:translateY(-4px);\n  box-shadow:var(--shadow);\n}\n\n#mzp-app .mzp-bank-top{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:10px;\n  margin-bottom:15px;\n}\n\n#mzp-app .mzp-bank-icon{\n  width:48px;\n  height:48px;\n  display:grid;\n  place-items:center;\n  border-radius:15px;\n  background:linear-gradient(135deg,#e9f5fb,#f7fbfd);\n  font-size:24px;\n}\n\n#mzp-app .mzp-chip{\n  font-size:11px;\n  font-weight:800;\n  padding:6px 9px;\n  background:#ecf8f1;\n  color:var(--success);\n  border-radius:999px;\n}\n\n#mzp-app .mzp-bank-card h3{\n  margin:0 0 8px;\n  font-size:19px;\n}\n\n#mzp-app .mzp-bank-card p{\n  margin:0 0 14px;\n  color:var(--muted);\n  font-size:13px;\n  line-height:1.6;\n}\n\n#mzp-app .mzp-bank-actions{\n  display:flex;\n  gap:8px;\n}\n\n#mzp-app button,\n#mzp-app .mzp-btn{\n  border:0;\n  cursor:pointer;\n  border-radius:12px;\n  padding:12px 15px;\n  font-weight:800;\n  transition:.2s;\n}\n\n#mzp-app .mzp-btn-primary{\n  background:var(--blue);\n  color:white;\n}\n\n#mzp-app .mzp-btn-gold{\n  background:var(--gold);\n  color:#2d2817;\n}\n\n#mzp-app .mzp-btn-soft{\n  background:#edf4f8;\n  color:var(--navy);\n}\n\n#mzp-app button:hover,\n#mzp-app .mzp-btn:hover{\n  transform:translateY(-1px);\n  filter:brightness(.98);\n}\n\n#mzp-app .mzp-layout{\n  display:grid;\n  grid-template-columns:1fr 380px;\n  gap:22px;\n  margin-top:28px;\n}\n\n#mzp-app .mzp-panel{\n  background:white;\n  border:1px solid var(--line);\n  border-radius:24px;\n  padding:24px;\n  box-shadow:0 10px 30px rgba(0,0,0,.04);\n}\n\n#mzp-app .mzp-panel h2{\n  margin:0 0 6px;\n  font-size:25px;\n}\n\n#mzp-app .mzp-panel-sub{\n  margin:0 0 22px;\n  color:var(--muted);\n  font-size:14px;\n}\n\n#mzp-app .mzp-methods{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:12px;\n  margin-bottom:22px;\n}\n\n#mzp-app .mzp-method{\n  border:1px solid var(--line);\n  background:#fff;\n  padding:16px;\n  border-radius:16px;\n  cursor:pointer;\n  text-align:left;\n}\n\n#mzp-app .mzp-method.active{\n  border-color:var(--blue);\n  background:#f1f9fd;\n  box-shadow:0 0 0 2px rgba(10,106,161,.06);\n}\n\n#mzp-app .mzp-method strong{\n  display:block;\n  margin-top:6px;\n}\n\n#mzp-app .mzp-method span{\n  color:var(--muted);\n  font-size:12px;\n}\n\n#mzp-app .mzp-payment-pane{display:none}\n#mzp-app .mzp-payment-pane.active{display:block}\n\n#mzp-app .mzp-details{\n  border:1px solid var(--line);\n  border-radius:18px;\n  overflow:hidden;\n}\n\n#mzp-app .mzp-row{\n  display:grid;\n  grid-template-columns:170px 1fr auto;\n  gap:10px;\n  align-items:center;\n  padding:13px 15px;\n  border-bottom:1px solid var(--line);\n}\n\n#mzp-app .mzp-row:last-child{border-bottom:0}\n\n#mzp-app .mzp-row .label{\n  font-size:12px;\n  text-transform:uppercase;\n  letter-spacing:.04em;\n  color:var(--muted);\n  font-weight:800;\n}\n\n#mzp-app .mzp-row .value{\n  font-weight:700;\n  word-break:break-word;\n}\n\n#mzp-app .mzp-copy{\n  padding:7px 10px;\n  font-size:12px;\n  background:#eff4f8;\n  color:var(--navy);\n}\n\n#mzp-app .mzp-alert{\n  margin-top:15px;\n  padding:14px 16px;\n  border-radius:14px;\n  background:#fff7dd;\n  border:1px solid #f2dda0;\n  color:#6e5a20;\n  font-size:13px;\n  line-height:1.6;\n}\n\n#mzp-app .mzp-card-payment{\n  background:linear-gradient(135deg,#0b3150,#135f85);\n  color:white;\n  border-radius:22px;\n  padding:24px;\n}\n\n#mzp-app .mzp-card-payment h3{margin-top:0}\n\n#mzp-app .mzp-card-brands{\n  display:flex;\n  gap:8px;\n  flex-wrap:wrap;\n  margin:18px 0;\n}\n\n#mzp-app .mzp-card-brand{\n  padding:8px 11px;\n  border-radius:9px;\n  background:rgba(255,255,255,.13);\n  border:1px solid rgba(255,255,255,.13);\n  font-size:12px;\n  font-weight:800;\n}\n\n#mzp-app .mzp-summary{\n  position:sticky;\n  top:20px;\n}\n\n#mzp-app .mzp-summary-box{\n  background:linear-gradient(180deg,#fff,#f8fafc);\n  border:1px solid var(--line);\n  border-radius:24px;\n  padding:22px;\n}\n\n#mzp-app .mzp-summary-line{\n  display:flex;\n  justify-content:space-between;\n  gap:12px;\n  padding:11px 0;\n  border-bottom:1px dashed #dfe6ed;\n  font-size:14px;\n}\n\n#mzp-app .mzp-summary-total{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-end;\n  padding-top:18px;\n}\n\n#mzp-app .mzp-summary-total strong{\n  font-size:27px;\n  color:var(--navy);\n}\n\n#mzp-app .mzp-secure{\n  margin-top:16px;\n  display:flex;\n  gap:10px;\n  align-items:flex-start;\n  padding:13px;\n  background:#eff9f4;\n  color:#276345;\n  border-radius:14px;\n  font-size:12px;\n  line-height:1.5;\n}\n\n#mzp-app .mzp-form-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:14px;\n}\n\n#mzp-app .mzp-field label{\n  display:block;\n  font-size:12px;\n  font-weight:800;\n  margin-bottom:6px;\n  color:#354259;\n}\n\n#mzp-app .mzp-field input,\n#mzp-app .mzp-field select,\n#mzp-app .mzp-field textarea{\n  width:100%;\n  border:1px solid #dce4ec;\n  border-radius:12px;\n  padding:13px 14px;\n  outline:none;\n  font:inherit;\n  background:white;\n}\n\n#mzp-app .mzp-field input:focus,\n#mzp-app .mzp-field select:focus,\n#mzp-app .mzp-field textarea:focus{\n  border-color:#7db6d2;\n  box-shadow:0 0 0 3px rgba(10,106,161,.08);\n}\n\n#mzp-app .mzp-field.full{grid-column:1\/-1}\n\n#mzp-app .mzp-submit{\n  width:100%;\n  margin-top:16px;\n  padding:15px;\n  font-size:15px;\n}\n\n#mzp-app .mzp-status{\n  display:none;\n  margin-top:14px;\n  padding:13px 15px;\n  border-radius:12px;\n  font-weight:700;\n  font-size:13px;\n}\n\n#mzp-app .mzp-status.ok{\n  display:block;\n  background:#e9f8f0;\n  color:#1e7548;\n}\n\n#mzp-app .mzp-status.bad{\n  display:block;\n  background:#fdeced;\n  color:#a53640;\n}\n\n#mzp-app .mzp-section-title{\n  margin:34px 0 16px;\n}\n\n#mzp-app .mzp-section-title h2{\n  margin:0 0 5px;\n}\n\n#mzp-app .mzp-section-title p{\n  margin:0;\n  color:var(--muted);\n  font-size:14px;\n}\n\n@media(max-width:900px){\n  #mzp-app .mzp-hero-grid,\n  #mzp-app .mzp-layout{\n    grid-template-columns:1fr;\n  }\n\n  #mzp-app .mzp-summary{\n    position:static;\n  }\n\n  #mzp-app .mzp-hero h1{\n    font-size:36px;\n  }\n}\n\n@media(max-width:650px){\n  #mzp-app .mzp-hero{\n    padding:30px 22px;\n  }\n\n  #mzp-app .mzp-methods,\n  #mzp-app .mzp-form-grid{\n    grid-template-columns:1fr;\n  }\n\n  #mzp-app .mzp-row{\n    grid-template-columns:1fr;\n  }\n\n  #mzp-app .mzp-search{\n    min-width:100%;\n    width:100%;\n  }\n}\n<\/style>\n\n<div class=\"mzp-shell\">\n\n  <section class=\"mzp-hero\">\n    <div class=\"mzp-hero-grid\">\n\n      <div>\n        <div class=\"mzp-badge\">\ud83d\udd10 Paiement s\u00e9curis\u00e9 \u2022 Maroc<\/div>\n\n        <h1>Banques &#038; Paiements Maroc Zain<\/h1>\n\n        <p>\n          Une interface professionnelle pour centraliser les virements,\n          paiements par carte, paiements en agence et demandes clients.\n        <\/p>\n      <\/div>\n\n      <div class=\"mzp-kpis\">\n        <div class=\"mzp-kpi\">\n          <strong>100%<\/strong>\n          <span>interface responsive<\/span>\n        <\/div>\n\n        <div class=\"mzp-kpi\">\n          <strong>MAD<\/strong>\n          <span>devise principale<\/span>\n        <\/div>\n\n        <div class=\"mzp-kpi\">\n          <strong>3<\/strong>\n          <span>modes de paiement<\/span>\n        <\/div>\n\n        <div class=\"mzp-kpi\">\n          <strong>24\/7<\/strong>\n          <span>page accessible<\/span>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n\n  <div class=\"mzp-toolbar\">\n    <div>\n      <h2>Banques disponibles<\/h2>\n    <\/div>\n\n    <div class=\"mzp-search\">\n      <span>\ud83d\udd0e<\/span>\n      <input\n        id=\"mzpSearch\"\n        type=\"text\"\n        placeholder=\"Rechercher une banque...\"\n      >\n    <\/div>\n  <\/div>\n\n\n  <div class=\"mzp-bank-grid\" id=\"mzpBankGrid\">\n\n    <div class=\"mzp-bank-card\" data-bank=\"attijariwafa\">\n      <div class=\"mzp-bank-top\">\n        <div class=\"mzp-bank-icon\">\ud83c\udfe6<\/div>\n        <div class=\"mzp-chip\">Disponible<\/div>\n      <\/div>\n\n      <h3>Attijariwafa bank<\/h3>\n      <p>Virement, r\u00e8glement de commande et encaissement client.<\/p>\n\n      <div class=\"mzp-bank-actions\">\n        <button class=\"mzp-btn-soft\" onclick=\"mzpSelectBank('Attijariwafa bank')\">\n          S\u00e9lectionner\n        <\/button>\n      <\/div>\n    <\/div>\n\n\n    <div class=\"mzp-bank-card\" data-bank=\"banque populaire\">\n      <div class=\"mzp-bank-top\">\n        <div class=\"mzp-bank-icon\">\ud83c\udfe6<\/div>\n        <div class=\"mzp-chip\">Disponible<\/div>\n      <\/div>\n\n      <h3>Banque Populaire<\/h3>\n      <p>Paiements professionnels et virements bancaires.<\/p>\n\n      <div class=\"mzp-bank-actions\">\n        <button class=\"mzp-btn-soft\" onclick=\"mzpSelectBank('Banque Populaire')\">\n          S\u00e9lectionner\n        <\/button>\n      <\/div>\n    <\/div>\n\n\n    <div class=\"mzp-bank-card\" data-bank=\"bank of africa boa\">\n      <div class=\"mzp-bank-top\">\n        <div class=\"mzp-bank-icon\">\ud83c\udf0d<\/div>\n        <div class=\"mzp-chip\">Disponible<\/div>\n      <\/div>\n\n      <h3>BANK OF AFRICA<\/h3>\n      <p>Virements nationaux et internationaux.<\/p>\n\n      <div class=\"mzp-bank-actions\">\n        <button class=\"mzp-btn-soft\" onclick=\"mzpSelectBank('BANK OF AFRICA')\">\n          S\u00e9lectionner\n        <\/button>\n      <\/div>\n    <\/div>\n\n\n    <div class=\"mzp-bank-card\" data-bank=\"cih bank\">\n      <div class=\"mzp-bank-top\">\n        <div class=\"mzp-bank-icon\">\ud83d\udcb3<\/div>\n        <div class=\"mzp-chip\">Disponible<\/div>\n      <\/div>\n\n      <h3>CIH BANK<\/h3>\n      <p>Compte bancaire, paiement et services digitaux.<\/p>\n\n      <div class=\"mzp-bank-actions\">\n        <button class=\"mzp-btn-soft\" onclick=\"mzpSelectBank('CIH BANK')\">\n          S\u00e9lectionner\n        <\/button>\n      <\/div>\n    <\/div>\n\n\n    <div class=\"mzp-bank-card\" data-bank=\"credit du maroc\">\n      <div class=\"mzp-bank-top\">\n        <div class=\"mzp-bank-icon\">\ud83d\udcbc<\/div>\n        <div class=\"mzp-chip\">Disponible<\/div>\n      <\/div>\n\n      <h3>Cr\u00e9dit du Maroc<\/h3>\n      <p>Virements et r\u00e8glements professionnels.<\/p>\n\n      <div class=\"mzp-bank-actions\">\n        <button class=\"mzp-btn-soft\" onclick=\"mzpSelectBank('Cr\u00e9dit du Maroc')\">\n          S\u00e9lectionner\n        <\/button>\n      <\/div>\n    <\/div>\n\n\n    <div class=\"mzp-bank-card\" data-bank=\"societe generale sahambank\">\n      <div class=\"mzp-bank-top\">\n        <div class=\"mzp-bank-icon\">\ud83c\udfdb\ufe0f<\/div>\n        <div class=\"mzp-chip\">Disponible<\/div>\n      <\/div>\n\n      <h3>Autre banque<\/h3>\n      <p>Ajoutez ici votre \u00e9tablissement bancaire professionnel.<\/p>\n\n      <div class=\"mzp-bank-actions\">\n        <button class=\"mzp-btn-soft\" onclick=\"mzpSelectBank('Autre banque')\">\n          S\u00e9lectionner\n        <\/button>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mzp-layout\">\n\n    <section class=\"mzp-panel\">\n\n      <h2>Choisissez votre paiement<\/h2>\n\n      <p class=\"mzp-panel-sub\">\n        S\u00e9lectionnez le moyen de paiement adapt\u00e9 \u00e0 votre commande.\n      <\/p>\n\n\n      <div class=\"mzp-methods\">\n\n        <div class=\"mzp-method active\" data-target=\"mzpWire\">\n          \ud83c\udfe6\n          <strong>Virement<\/strong>\n          <span>RIB \/ IBAN<\/span>\n        <\/div>\n\n        <div class=\"mzp-method\" data-target=\"mzpCard\">\n          \ud83d\udcb3\n          <strong>Carte<\/strong>\n          <span>CMI \/ PSP<\/span>\n        <\/div>\n\n        <div class=\"mzp-method\" data-target=\"mzpAgency\">\n          \ud83c\udfe2\n          <strong>Agence<\/strong>\n          <span>Paiement direct<\/span>\n        <\/div>\n\n      <\/div>\n\n\n      <div id=\"mzpWire\" class=\"mzp-payment-pane active\">\n\n        <div class=\"mzp-details\">\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">Banque<\/div>\n            <div class=\"value\" id=\"mzpSelectedBank\">\n              Banque \u00e0 s\u00e9lectionner\n            <\/div>\n          <\/div>\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">B\u00e9n\u00e9ficiaire<\/div>\n            <div class=\"value\">MAROC ZAIN<\/div>\n            <button class=\"mzp-copy\" onclick=\"mzpCopy('MAROC ZAIN')\">\n              Copier\n            <\/button>\n          <\/div>\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">RIB<\/div>\n            <div class=\"value\" id=\"mzpRib\">\u00c0 RENSEIGNER<\/div>\n            <button class=\"mzp-copy\" onclick=\"mzpCopyText('mzpRib')\">\n              Copier\n            <\/button>\n          <\/div>\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">IBAN<\/div>\n            <div class=\"value\" id=\"mzpIban\">\u00c0 RENSEIGNER<\/div>\n            <button class=\"mzp-copy\" onclick=\"mzpCopyText('mzpIban')\">\n              Copier\n            <\/button>\n          <\/div>\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">SWIFT \/ BIC<\/div>\n            <div class=\"value\" id=\"mzpSwift\">\u00c0 RENSEIGNER<\/div>\n            <button class=\"mzp-copy\" onclick=\"mzpCopyText('mzpSwift')\">\n              Copier\n            <\/button>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"mzp-alert\">\n          \u26a0\ufe0f Remplacez les mentions \u00ab \u00c0 RENSEIGNER \u00bb par vos v\u00e9ritables\n          coordonn\u00e9es bancaires avant de publier la page.\n        <\/div>\n\n      <\/div>\n\n\n      <div id=\"mzpCard\" class=\"mzp-payment-pane\">\n\n        <div class=\"mzp-card-payment\">\n\n          <h3>Paiement par carte bancaire<\/h3>\n\n          <p>\n            Redirigez votre client vers votre passerelle CMI ou votre\n            prestataire de paiement s\u00e9curis\u00e9.\n          <\/p>\n\n          <div class=\"mzp-card-brands\">\n            <div class=\"mzp-card-brand\">VISA<\/div>\n            <div class=\"mzp-card-brand\">Mastercard<\/div>\n            <div class=\"mzp-card-brand\">CMI<\/div>\n            <div class=\"mzp-card-brand\">3D Secure<\/div>\n          <\/div>\n\n          <button\n            class=\"mzp-btn mzp-btn-gold\"\n            onclick=\"mzpCardPay()\"\n          >\n            Continuer vers le paiement\n          <\/button>\n\n          <div id=\"mzpCardStatus\" class=\"mzp-status\"><\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div id=\"mzpAgency\" class=\"mzp-payment-pane\">\n\n        <div class=\"mzp-details\">\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">\u00c9tablissement<\/div>\n            <div class=\"value\">Maroc Zain<\/div>\n          <\/div>\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">Adresse<\/div>\n            <div class=\"value\">\u00c0 renseigner<\/div>\n          <\/div>\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">T\u00e9l\u00e9phone<\/div>\n            <div class=\"value\">\u00c0 renseigner<\/div>\n          <\/div>\n\n          <div class=\"mzp-row\">\n            <div class=\"label\">Horaires<\/div>\n            <div class=\"value\">\u00c0 renseigner<\/div>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <aside class=\"mzp-summary\">\n\n      <div class=\"mzp-summary-box\">\n\n        <h2>R\u00e9sum\u00e9<\/h2>\n\n        <div class=\"mzp-summary-line\">\n          <span>Produit<\/span>\n          <strong id=\"mzpSumProduct\">Formation \/ Voyage<\/strong>\n        <\/div>\n\n        <div class=\"mzp-summary-line\">\n          <span>R\u00e9f\u00e9rence<\/span>\n          <strong id=\"mzpRef\">MZ-2026-001<\/strong>\n        <\/div>\n\n        <div class=\"mzp-summary-line\">\n          <span>Frais<\/span>\n          <strong>0 MAD<\/strong>\n        <\/div>\n\n        <div class=\"mzp-summary-total\">\n          <span>Total<\/span>\n          <strong id=\"mzpTotal\">0 MAD<\/strong>\n        <\/div>\n\n        <div class=\"mzp-secure\">\n          \ud83d\udd12\n          <div>\n            <strong>Paiement prot\u00e9g\u00e9<\/strong><br>\n            Ne saisissez jamais vos donn\u00e9es bancaires directement dans ce HTML.\n            La carte doit \u00eatre trait\u00e9e par votre prestataire s\u00e9curis\u00e9.\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/aside>\n\n  <\/div>\n\n\n  <div class=\"mzp-section-title\">\n    <h2>Demande de paiement<\/h2>\n    <p>Le client peut pr\u00e9parer sa demande avant r\u00e8glement.<\/p>\n  <\/div>\n\n\n  <section class=\"mzp-panel\">\n\n    <form id=\"mzpForm\" action=\"\">\n\n      <div class=\"mzp-form-grid\">\n\n        <div class=\"mzp-field\">\n          <label>Nom complet *<\/label>\n          <input id=\"mzpName\" required>\n        <\/div>\n\n        <div class=\"mzp-field\">\n          <label>T\u00e9l\u00e9phone *<\/label>\n          <input id=\"mzpPhone\" type=\"tel\" required>\n        <\/div>\n\n        <div class=\"mzp-field\">\n          <label>Email *<\/label>\n          <input id=\"mzpEmail\" type=\"email\" required>\n        <\/div>\n\n        <div class=\"mzp-field\">\n          <label>Produit \/ Formation \/ Voyage *<\/label>\n          <input id=\"mzpProduct\" required>\n        <\/div>\n\n        <div class=\"mzp-field\">\n          <label>Montant *<\/label>\n          <input id=\"mzpAmount\" type=\"number\" min=\"1\" required>\n        <\/div>\n\n        <div class=\"mzp-field\">\n          <label>Devise<\/label>\n\n          <select id=\"mzpCurrency\">\n            <option>MAD<\/option>\n            <option>EUR<\/option>\n            <option>USD<\/option>\n          <\/select>\n        <\/div>\n\n        <div class=\"mzp-field full\">\n          <label>Message<\/label>\n          <textarea id=\"mzpMessage\" rows=\"4\"><\/textarea>\n        <\/div>\n\n      <\/div>\n\n      <button\n        type=\"submit\"\n        class=\"mzp-btn mzp-btn-primary mzp-submit\"\n      >\n        G\u00e9n\u00e9rer ma demande de paiement\n      <\/button>\n\n      <div id=\"mzpFormStatus\" class=\"mzp-status\"><\/div>\n\n    <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n\n  <\/section>\n\n<\/div>\n\n\n<script>\n(function(){\n\n  const methods = document.querySelectorAll('#mzp-app .mzp-method');\n  const panes = document.querySelectorAll('#mzp-app .mzp-payment-pane');\n\n  methods.forEach(method=>{\n    method.addEventListener('click',function(){\n\n      methods.forEach(x=>x.classList.remove('active'));\n      panes.forEach(x=>x.classList.remove('active'));\n\n      this.classList.add('active');\n\n      const target = document.getElementById(\n        this.getAttribute('data-target')\n      );\n\n      if(target){\n        target.classList.add('active');\n      }\n\n    });\n  });\n\n\n  const search = document.getElementById('mzpSearch');\n\n  search.addEventListener('input',function(){\n\n    const term = this.value.toLowerCase().trim();\n\n    document\n      .querySelectorAll('#mzpBankGrid .mzp-bank-card')\n      .forEach(card=>{\n\n        const txt = card.innerText.toLowerCase();\n\n        card.style.display =\n          txt.includes(term) ? '' : 'none';\n\n      });\n\n  });\n\n\n  window.mzpSelectBank = function(bank){\n\n    document.getElementById('mzpSelectedBank').textContent = bank;\n\n    document\n      .getElementById('mzpWire')\n      .scrollIntoView({\n        behavior:'smooth',\n        block:'center'\n      });\n\n  };\n\n\n  window.mzpCopy = function(value){\n\n    navigator.clipboard.writeText(value);\n\n  };\n\n\n  window.mzpCopyText = function(id){\n\n    const el = document.getElementById(id);\n\n    if(el){\n      navigator.clipboard.writeText(el.textContent.trim());\n    }\n\n  };\n\n\n  window.mzpCardPay = function(){\n\n    const status = document.getElementById('mzpCardStatus');\n\n    status.className='mzp-status bad';\n\n    status.innerHTML =\n      'Le lien CMI r\u00e9el n\u2019est pas encore configur\u00e9. ' +\n      'Remplacez cette action par votre URL ou API de paiement s\u00e9curis\u00e9e.';\n\n  };\n\n\n  const amount = document.getElementById('mzpAmount');\n  const currency = document.getElementById('mzpCurrency');\n  const product = document.getElementById('mzpProduct');\n\n  function refreshSummary(){\n\n    document.getElementById('mzpTotal').textContent =\n      (amount.value || 0) + ' ' + currency.value;\n\n    document.getElementById('mzpSumProduct').textContent =\n      product.value || 'Formation \/ Voyage';\n\n  }\n\n  amount.addEventListener('input',refreshSummary);\n  currency.addEventListener('change',refreshSummary);\n  product.addEventListener('input',refreshSummary);\n\n\n  document\n    .getElementById('mzpForm')\n    .addEventListener('submit',function(e){\n\n      e.preventDefault();\n\n      const name =\n        document.getElementById('mzpName').value.trim();\n\n      const email =\n        document.getElementById('mzpEmail').value.trim();\n\n      const phone =\n        document.getElementById('mzpPhone').value.trim();\n\n      const prod =\n        document.getElementById('mzpProduct').value.trim();\n\n      const amt =\n        document.getElementById('mzpAmount').value;\n\n      const status =\n        document.getElementById('mzpFormStatus');\n\n      if(!name || !email || !phone || !prod || !amt){\n\n        status.className='mzp-status bad';\n\n        status.textContent =\n          'Veuillez compl\u00e9ter tous les champs obligatoires.';\n\n        return;\n\n      }\n\n\n      const ref =\n        'MZ-' +\n        new Date().getFullYear() +\n        '-' +\n        Math.floor(1000 + Math.random()*9000);\n\n      document.getElementById('mzpRef').textContent = ref;\n\n      status.className='mzp-status ok';\n\n      status.innerHTML =\n        '\u2705 Demande pr\u00e9par\u00e9e avec succ\u00e8s. R\u00e9f\u00e9rence : <strong>' +\n        ref +\n        '<\/strong>.';\n\n      refreshSummary();\n\n    });\n\n})();\n<\/script>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd10 Paiement s\u00e9curis\u00e9 \u2022 Maroc Banques &#038; Paiements Maroc Zain Une interface professionnelle pour centraliser les virements, paiements par carte, paiements en agence et demandes clients. 100% interface responsive MAD devise principale 3 modes de paiement 24\/7 page accessible Banques disponibles \ud83d\udd0e \ud83c\udfe6 Disponible Attijariwafa bank Virement, r\u00e8glement de commande et encaissement client. S\u00e9lectionner \ud83c\udfe6 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-3652","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/comments?post=3652"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3652\/revisions"}],"predecessor-version":[{"id":3653,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3652\/revisions\/3653"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=3652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/categories?post=3652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/tags?post=3652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}