{"id":3881,"date":"2026-06-20T21:14:36","date_gmt":"2026-06-20T21:14:36","guid":{"rendered":"https:\/\/e-power.ma\/?page_id=3881"},"modified":"2026-08-18T23:18:34","modified_gmt":"2026-08-18T23:18:34","slug":"boutique","status":"publish","type":"page","link":"https:\/\/e-power.ma\/ar\/boutique\/","title":{"rendered":"boutique"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3881\" class=\"elementor elementor-3881\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e3b682a e-flex e-con-boxed e-con e-parent\" data-id=\"4e3b682a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-373cb3e8 elementor-widget elementor-widget-text-editor\" data-id=\"373cb3e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;wdt_animation_effect&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-221b246 e-con e-atomic-element e-flexbox-base e-97c04f8 \" data-id=\"221b246\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"221b246\">\n    \t\t<div class=\"elementor-element elementor-element-098774f elementor-widget elementor-widget-html\" data-id=\"098774f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;wdt_animation_effect&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n====================================================================\nE-POWER MOTORS MAROC \u2014 CUSTOM SHOP \/ PRODUCT LISTING\nPaste this entire block into an Elementor HTML Widget.\nNamespace: .epower-shop (all CSS scoped, no global overrides)\nData source: WooCommerce Store API (\/wp-json\/wc\/store\/v1) \u2014 public,\nno consumer keys, safe for frontend use.\n====================================================================\n-->\n\n<section class=\"epower-shop\" data-epower-shop>\n\n  <!-- ============== SEARCH + SORT BAR ============== -->\n  <div class=\"epower-shop__toolbar\">\n    <div class=\"epower-shop__search\">\n      <svg class=\"epower-shop__search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n      <\/svg>\n      <input type=\"text\" class=\"epower-shop__search-input\" placeholder=\"Rechercher une moto...\" aria-label=\"Rechercher une moto\" data-epower-search>\n    <\/div>\n\n    <div class=\"epower-shop__sort-wrap\">\n      <label for=\"epower-sort\" class=\"epower-shop__sr-only\">Trier par<\/label>\n      <select id=\"epower-sort\" class=\"epower-shop__sort\" data-epower-sort aria-label=\"Trier les mod\u00e8les\">\n        <option value=\"relevance\">Pertinence<\/option>\n        <option value=\"price-asc\">Prix croissant<\/option>\n        <option value=\"price-desc\">Prix d\u00e9croissant<\/option>\n        <option value=\"date-desc\">Plus r\u00e9cent<\/option>\n        <option value=\"date-asc\">Plus ancien<\/option>\n      <\/select>\n    <\/div>\n\n    <button type=\"button\" class=\"epower-shop__mobile-filter-btn\" data-epower-open-drawer aria-haspopup=\"dialog\" aria-controls=\"epower-drawer\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n        <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n        <line x1=\"10\" y1=\"18\" x2=\"14\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n      <\/svg>\n      Cat\u00e9gories\n    <\/button>\n  <\/div>\n\n  <!-- ============== MAIN AREA ============== -->\n  <div class=\"epower-shop__main\">\n\n    <!-- SIDEBAR (desktop) -->\n    <aside class=\"epower-shop__sidebar\" aria-label=\"Cat\u00e9gories de produits\">\n      <div class=\"epower-shop__sidebar-block\">\n        <h3 class=\"epower-shop__sidebar-title\">Cat\u00e9gories<\/h3>\n        <ul class=\"epower-shop__cat-list\" data-epower-categories role=\"list\">\n          <li class=\"epower-shop__cat-skeleton\"><\/li>\n          <li class=\"epower-shop__cat-skeleton\"><\/li>\n          <li class=\"epower-shop__cat-skeleton\"><\/li>\n        <\/ul>\n      <\/div>\n    <\/aside>\n\n    <!-- PRODUCTS AREA -->\n    <div class=\"epower-shop__products-area\">\n\n      <div class=\"epower-shop__grid\" data-epower-grid role=\"list\" aria-live=\"polite\">\n        <!-- skeleton cards injected on load, real cards injected by JS -->\n      <\/div>\n\n      <div class=\"epower-shop__empty\" data-epower-empty hidden>\n        <h3>Aucun mod\u00e8le trouv\u00e9<\/h3>\n        <p>Essayez de modifier votre recherche ou vos filtres.<\/p>\n        <button type=\"button\" class=\"epower-shop__reset-btn\" data-epower-reset-empty>R\u00e9initialiser les filtres<\/button>\n      <\/div>\n\n      <div class=\"epower-shop__load-more-wrap\">\n        <button type=\"button\" class=\"epower-shop__load-more\" data-epower-load-more hidden>Charger plus<\/button>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- ============== MOBILE FILTER DRAWER ============== -->\n  <div class=\"epower-shop__drawer-overlay\" data-epower-overlay hidden><\/div>\n  <div class=\"epower-shop__drawer\" id=\"epower-drawer\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Cat\u00e9gories\" data-epower-drawer hidden>\n    <div class=\"epower-shop__drawer-header\">\n      <h3>Cat\u00e9gories<\/h3>\n      <button type=\"button\" class=\"epower-shop__drawer-close\" data-epower-close-drawer aria-label=\"Fermer\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n        <\/svg>\n      <\/button>\n    <\/div>\n    <div class=\"epower-shop__drawer-body\">\n      <div class=\"epower-shop__sidebar-block\">\n        <ul class=\"epower-shop__cat-list\" data-epower-categories-mobile role=\"list\"><\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<style>\n\/* ====================================================================\n   E-POWER SHOP \u2014 SCOPED STYLES (namespaced under .epower-shop)\n   ==================================================================== *\/\n.epower-shop{\n  --ep-bg:#0a0a0a;\n  --ep-card:#242424;\n  --ep-card-alt:#1c1c1c;\n  --ep-border:#333333;\n  --ep-yellow:#f0f000;\n  --ep-yellow-soft:rgba(240,240,0,0.14);\n  --ep-white:#ffffff;\n  --ep-gray:#a8a8a8;\n  --ep-gray-dim:#6f6f6f;\n  --ep-radius:10px;\n  --ep-transition:260ms cubic-bezier(.4,0,.2,1);\n  background:var(--ep-bg);\n  color:var(--ep-white);\n  font-family:inherit;\n  padding:56px 24px 72px;\n  box-sizing:border-box;\n  -webkit-font-smoothing:antialiased;\n}\n.epower-shop *{ box-sizing:border-box; }\n.epower-shop__sr-only{\n  position:absolute; width:1px; height:1px; padding:0; margin:-1px;\n  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;\n}\n\n\/* ---------- TOOLBAR ---------- *\/\n.epower-shop__toolbar{\n  max-width:1400px; margin:0 auto 32px;\n  display:flex; align-items:center; gap:16px; flex-wrap:wrap;\n}\n.epower-shop__search{\n  position:relative; flex:1 1 320px; min-width:220px;\n}\n.epower-shop__search-icon{\n  position:absolute; left:14px; top:50%; transform:translateY(-50%);\n  color:var(--ep-gray-dim); pointer-events:none;\n}\n.epower-shop__search-input{\n  width:100%; background:var(--ep-card); border:1px solid var(--ep-border);\n  border-radius:8px; padding:13px 16px 13px 42px; color:var(--ep-white);\n  font-size:14px; outline:none; transition:border-color var(--ep-transition);\n}\n.epower-shop__search-input::placeholder{ color:var(--ep-gray-dim); }\n.epower-shop__search-input:focus{ border-color:var(--ep-yellow); }\n\n.epower-shop__sort-wrap{ flex:0 0 auto; }\n.epower-shop__sort{\n  background:var(--ep-card); border:1px solid var(--ep-border); color:var(--ep-white);\n  border-radius:8px; padding:13px 40px 13px 16px; font-size:14px; outline:none;\n  cursor:pointer; appearance:none;\n  background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23f0f000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'\/><\/svg>\");\n  background-repeat:no-repeat; background-position:right 14px center;\n  transition:border-color var(--ep-transition);\n}\n.epower-shop__sort:focus{ border-color:var(--ep-yellow); }\n\n.epower-shop__mobile-filter-btn{\n  display:none; align-items:center; gap:8px;\n  background:var(--ep-card); border:1px solid var(--ep-border); color:var(--ep-white);\n  border-radius:8px; padding:13px 18px; font-size:14px; font-weight:600; cursor:pointer;\n}\n\n\/* ---------- MAIN LAYOUT ---------- *\/\n.epower-shop__main{\n  max-width:1400px; margin:0 auto; display:grid;\n  grid-template-columns:260px 1fr; gap:32px; align-items:start;\n}\n\n\/* ---------- SIDEBAR ---------- *\/\n.epower-shop__sidebar{\n  background:var(--ep-card-alt); border:1px solid var(--ep-border);\n  border-radius:var(--ep-radius); padding:24px; position:sticky; top:24px;\n}\n.epower-shop__sidebar-block + .epower-shop__sidebar-block{\n  margin-top:28px; padding-top:28px; border-top:1px solid var(--ep-border);\n}\n.epower-shop__sidebar-title{\n  font-size:13px; text-transform:uppercase; letter-spacing:1px;\n  color:var(--ep-white); font-weight:700; margin:0 0 16px;\n}\n.epower-shop__cat-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }\n.epower-shop__cat-item{\n  background:none; border:none; color:var(--ep-gray); text-align:left;\n  font-size:14px; padding:9px 12px; border-radius:6px; cursor:pointer; width:100%;\n  transition:background var(--ep-transition), color var(--ep-transition);\n  display:flex; align-items:center; justify-content:space-between;\n}\n.epower-shop__cat-item:hover{ background:rgba(255,255,255,0.05); color:var(--ep-white); }\n.epower-shop__cat-item[aria-current=\"true\"]{\n  background:var(--ep-yellow-soft); color:var(--ep-yellow); font-weight:600;\n}\n.epower-shop__cat-count{ font-size:12px; color:var(--ep-gray-dim); }\n.epower-shop__cat-item[aria-current=\"true\"] .epower-shop__cat-count{ color:var(--ep-yellow); }\n.epower-shop__cat-skeleton{\n  height:34px; border-radius:6px; background:linear-gradient(90deg,#242424 25%,#2c2c2c 50%,#242424 75%);\n  background-size:200% 100%; animation:epower-shimmer 1.4s infinite;\n}\n\n.epower-shop__reset-btn{\n  width:100%; background:transparent; border:1px solid var(--ep-border); color:var(--ep-white);\n  padding:11px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;\n  transition:border-color var(--ep-transition), color var(--ep-transition);\n}\n.epower-shop__reset-btn:hover{ border-color:var(--ep-yellow); color:var(--ep-yellow); }\n\n\/* ---------- PRODUCTS GRID ---------- *\/\n.epower-shop__grid{\n  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;\n}\n\n.epower-shop__card{\n  background:var(--ep-card); border:1px solid var(--ep-border); border-radius:var(--ep-radius);\n  overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit;\n  transition:transform var(--ep-transition), border-color var(--ep-transition), box-shadow var(--ep-transition);\n  position:relative;\n}\n.epower-shop__card:hover{\n  transform:translateY(-5px); border-color:rgba(240,240,0,0.35);\n  box-shadow:0 16px 32px -18px rgba(0,0,0,0.7);\n}\n.epower-shop__card:focus-visible{ outline:2px solid var(--ep-yellow); outline-offset:2px; }\n.epower-shop__card-media{\n  position:relative; aspect-ratio:1\/1; overflow:hidden;\n  background:radial-gradient(circle at 50% 40%, #1a1a1a 0%, #0d0d0d 100%);\n  padding:14px;\n}\n.epower-shop__card-media img{\n  width:100%; height:100%; object-fit:contain; display:block;\n  image-rendering:-webkit-optimize-contrast;\n  transition:transform 400ms cubic-bezier(.4,0,.2,1);\n}\n.epower-shop__card:hover .epower-shop__card-media img{ transform:scale(1.05); }\n.epower-shop__badge{\n  position:absolute; top:14px; left:14px; background:var(--ep-yellow); color:#111;\n  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;\n  padding:6px 10px; border-radius:5px;\n}\n.epower-shop__card-body{ padding:20px; display:flex; flex-direction:column; gap:4px; flex:1; }\n.epower-shop__card-name{ font-size:17px; font-weight:700; margin:0; color:var(--ep-white); }\n.epower-shop__card-cat{ font-size:13px; color:var(--ep-gray-dim); margin:0 0 12px; }\n.epower-shop__card-cta{\n  margin-top:auto; display:inline-flex; align-items:center; gap:6px;\n  font-size:13px; font-weight:600; color:var(--ep-gray);\n  border-top:1px solid var(--ep-border); padding-top:14px;\n  transition:color var(--ep-transition), gap var(--ep-transition);\n}\n.epower-shop__card:hover .epower-shop__card-cta{ color:var(--ep-yellow); gap:10px; }\n.epower-shop__card-cta svg{ transition:transform var(--ep-transition); }\n.epower-shop__card:hover .epower-shop__card-cta svg{ transform:translateX(2px); }\n\n\/* skeleton cards *\/\n.epower-shop__skel-card{\n  background:var(--ep-card); border:1px solid var(--ep-border); border-radius:var(--ep-radius); overflow:hidden;\n}\n.epower-shop__skel-media{ aspect-ratio:4\/3; background:linear-gradient(90deg,#242424 25%,#2c2c2c 50%,#242424 75%); background-size:200% 100%; animation:epower-shimmer 1.4s infinite; }\n.epower-shop__skel-line{ height:12px; margin:16px 20px; border-radius:4px; background:linear-gradient(90deg,#242424 25%,#2c2c2c 50%,#242424 75%); background-size:200% 100%; animation:epower-shimmer 1.4s infinite; }\n.epower-shop__skel-line.short{ width:50%; }\n@keyframes epower-shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }\n\n\/* ---------- EMPTY STATE ---------- *\/\n.epower-shop__empty{\n  text-align:center; padding:80px 20px; border:1px dashed var(--ep-border); border-radius:var(--ep-radius);\n}\n.epower-shop__empty h3{ margin:0 0 8px; font-size:20px; color:var(--ep-white); }\n.epower-shop__empty p{ margin:0 0 20px; color:var(--ep-gray); font-size:14px; }\n.epower-shop__empty .epower-shop__reset-btn{ max-width:240px; margin:0 auto; }\n\n\/* ---------- LOAD MORE ---------- *\/\n.epower-shop__load-more-wrap{ display:flex; justify-content:center; margin-top:44px; }\n.epower-shop__load-more{\n  background:transparent; border:1px solid var(--ep-yellow); color:var(--ep-yellow);\n  padding:14px 36px; border-radius:8px; font-size:14px; font-weight:700; letter-spacing:0.3px; cursor:pointer;\n  transition:background var(--ep-transition), color var(--ep-transition);\n}\n.epower-shop__load-more:hover{ background:var(--ep-yellow); color:#111; }\n.epower-shop__load-more:disabled{ opacity:0.5; cursor:default; background:transparent; color:var(--ep-yellow); }\n\n\/* ---------- MOBILE DRAWER ---------- *\/\n.epower-shop__drawer-overlay{\n  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9998;\n  opacity:0; transition:opacity var(--ep-transition);\n}\n.epower-shop__drawer-overlay.epower-is-open{ opacity:1; }\n.epower-shop__drawer{\n  position:fixed; top:0; right:0; height:100%; width:min(340px,86vw); background:var(--ep-bg);\n  border-left:1px solid var(--ep-border); z-index:9999; transform:translateX(100%);\n  transition:transform var(--ep-transition); display:flex; flex-direction:column;\n}\n.epower-shop__drawer.epower-is-open{ transform:translateX(0); }\n.epower-shop__drawer-header{\n  display:flex; align-items:center; justify-content:space-between; padding:20px;\n  border-bottom:1px solid var(--ep-border);\n}\n.epower-shop__drawer-header h3{ margin:0; font-size:17px; color:var(--ep-white); }\n.epower-shop__drawer-close{ background:none; border:none; color:var(--ep-white); cursor:pointer; padding:4px; }\n.epower-shop__drawer-body{ padding:20px; overflow-y:auto; flex:1; }\n.epower-shop__drawer .epower-shop__cat-item{ font-size:15px; padding:11px 12px; }\n\n\/* ---------- RESPONSIVE ---------- *\/\n@media (max-width:1024px){\n  .epower-shop__main{ grid-template-columns:1fr; }\n  .epower-shop__sidebar{ display:none; }\n  .epower-shop__mobile-filter-btn{ display:inline-flex; }\n  .epower-shop__grid{ grid-template-columns:repeat(2,1fr); }\n}\n@media (max-width:640px){\n  .epower-shop{ padding:40px 16px 56px; }\n  .epower-shop__grid{ grid-template-columns:1fr; gap:20px; }\n  .epower-shop__toolbar{ flex-direction:column; align-items:stretch; }\n  .epower-shop__sort-wrap, .epower-shop__mobile-filter-btn{ width:100%; justify-content:center; }\n  .epower-shop__sort{ width:100%; }\n}\n\n\/* Reduced motion *\/\n@media (prefers-reduced-motion:reduce){\n  .epower-shop *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }\n}\n<\/style>\n\n<script>\n(function(){\n  \"use strict\";\n\n  \/* ==================== CONFIG ==================== *\/\n  const EPOWER_SHOP_CONFIG = {\n    productsPerPage: 9,\n    apiBase: '\/wp-json\/wc\/store\/v1'\n  };\n\n  const root = document.querySelector('[data-epower-shop]');\n  if(!root) return;\n\n  const els = {\n    grid: root.querySelector('[data-epower-grid]'),\n    empty: root.querySelector('[data-epower-empty]'),\n    loadMoreBtn: root.querySelector('[data-epower-load-more]'),\n    search: root.querySelector('[data-epower-search]'),\n    sort: root.querySelector('[data-epower-sort]'),\n    catList: root.querySelector('[data-epower-categories]'),\n    catListMobile: root.querySelector('[data-epower-categories-mobile]'),\n    resetEmptyBtn: root.querySelector('[data-epower-reset-empty]'),\n    openDrawerBtn: root.querySelector('[data-epower-open-drawer]'),\n    closeDrawerBtn: root.querySelector('[data-epower-close-drawer]'),\n    drawer: root.querySelector('[data-epower-drawer]'),\n    overlay: root.querySelector('[data-epower-overlay]')\n  };\n\n  \/* ==================== STATE ==================== *\/\n  const state = {\n    category: '',      \/\/ category slug, '' = all\n    search: '',\n    sort: 'relevance',\n    page: 1,\n    allLoadedProducts: [],\n    totalAvailable: 0,\n    loading: false\n  };\n\n  let searchDebounce;\n\n  \/* ==================== API ==================== *\/\n  async function fetchCategories(){\n    try{\n      const res = await fetch(`${EPOWER_SHOP_CONFIG.apiBase}\/products\/categories?per_page=50&hide_empty=true`);\n      if(!res.ok) throw new Error('categories fetch failed');\n      return await res.json();\n    }catch(err){\n      console.error('[epower-shop] category fetch error', err);\n      return [];\n    }\n  }\n\n  async function fetchProducts(){\n    const params = new URLSearchParams();\n    params.set('per_page', EPOWER_SHOP_CONFIG.productsPerPage);\n    params.set('page', state.page);\n\n    if(state.category) params.set('category', state.category);\n    if(state.search) params.set('search', state.search);\n\n    \/\/ Store API orderby mapping\n    if(state.sort === 'price-asc'){ params.set('orderby','price'); params.set('order','asc'); }\n    else if(state.sort === 'price-desc'){ params.set('orderby','price'); params.set('order','desc'); }\n    else if(state.sort === 'date-desc'){ params.set('orderby','date'); params.set('order','desc'); }\n    else if(state.sort === 'date-asc'){ params.set('orderby','date'); params.set('order','asc'); }\n    else { params.set('orderby','menu_order'); params.set('order','asc'); }\n\n    try{\n      const res = await fetch(`${EPOWER_SHOP_CONFIG.apiBase}\/products?${params.toString()}`);\n      if(!res.ok) throw new Error('products fetch failed');\n      const total = res.headers.get('X-WP-Total');\n      const data = await res.json();\n      return { products: data, total: total ? parseInt(total,10) : data.length };\n    }catch(err){\n      console.error('[epower-shop] products fetch error', err);\n      return { products: [], total: 0 };\n    }\n  }\n\n  \/* ==================== RENDER: CATEGORIES ==================== *\/\n  function renderCategoryList(container, categories, totalCount){\n    container.innerHTML = '';\n\n    const allItem = document.createElement('li');\n    allItem.innerHTML = `<button type=\"button\" class=\"epower-shop__cat-item\" data-slug=\"\" aria-current=\"${state.category === '' ? 'true':'false'}\">\n      <span>Tous les mod\u00e8les<\/span><span class=\"epower-shop__cat-count\">${totalCount}<\/span>\n    <\/button>`;\n    container.appendChild(allItem);\n\n    categories.forEach(cat => {\n      const li = document.createElement('li');\n      li.innerHTML = `<button type=\"button\" class=\"epower-shop__cat-item\" data-slug=\"${cat.slug}\" aria-current=\"${state.category === cat.slug ? 'true':'false'}\">\n        <span>${escapeHtml(cat.name)}<\/span><span class=\"epower-shop__cat-count\">${cat.count}<\/span>\n      <\/button>`;\n      container.appendChild(li);\n    });\n\n    container.querySelectorAll('.epower-shop__cat-item').forEach(btn => {\n      btn.addEventListener('click', () => {\n        state.category = btn.getAttribute('data-slug');\n        syncCategoryUI();\n        resetAndLoad();\n        if(container === els.catListMobile) closeDrawer();\n      });\n    });\n  }\n\n  function syncCategoryUI(){\n    [els.catList, els.catListMobile].forEach(list => {\n      if(!list) return;\n      list.querySelectorAll('.epower-shop__cat-item').forEach(btn => {\n        btn.setAttribute('aria-current', btn.getAttribute('data-slug') === state.category ? 'true':'false');\n      });\n    });\n  }\n\n  \/* ==================== RENDER: PRODUCTS ==================== *\/\n  function escapeHtml(str){\n    const d = document.createElement('div');\n    d.textContent = str || '';\n    return d.innerHTML;\n  }\n\n  function renderSkeletons(count){\n    els.grid.innerHTML = '';\n    for(let i=0;i<count;i++){\n      const s = document.createElement('div');\n      s.className = 'epower-shop__skel-card';\n      s.innerHTML = `<div class=\"epower-shop__skel-media\"><\/div>\n        <div class=\"epower-shop__skel-line\"><\/div>\n        <div class=\"epower-shop__skel-line short\"><\/div>`;\n      els.grid.appendChild(s);\n    }\n  }\n\n  function productCardHTML(p){\n    const img = (p.images && p.images[0]) ? p.images[0] : null;\n    const imgUrl = img ? img.src : '';\n    const imgAlt = img ? (img.alt || p.name) : p.name;\n    const imgSrcset = img && img.srcset ? img.srcset : '';\n    const imgSizes = img && img.sizes ? img.sizes : '(max-width: 640px) 100vw, 33vw';\n    const catName = (p.categories && p.categories[0]) ? p.categories[0].name : '';\n\n    const prices = p.prices || {};\n    const onSale = p.on_sale && prices.regular_price && prices.price && prices.regular_price !== prices.price;\n\n    let badge = '';\n    if(onSale) badge = 'Promo';\n    else if(p.is_new) badge = 'Nouveau';\n    else if(p.stock_status === 'instock' && p.date_created){\n      const created = new Date(p.date_created);\n      const daysOld = (Date.now() - created.getTime()) \/ 86400000;\n      if(daysOld <= 30) badge = 'Nouveau';\n    }\n\n    return `\n      <a class=\"epower-shop__card\" href=\"${p.permalink}\" role=\"listitem\" aria-label=\"${escapeHtml(p.name)}\">\n        <div class=\"epower-shop__card-media\">\n          ${badge ? `<span class=\"epower-shop__badge\">${badge}<\/span>` : ''}\n          ${imgUrl ? `<img decoding=\"async\" src=\"${imgUrl}\" ${imgSrcset ? `srcset=\"${imgSrcset}\" sizes=\"${imgSizes}\"` : ''} alt=\"${escapeHtml(imgAlt)}\" loading=\"lazy\">` : ''}\n        <\/div>\n        <div class=\"epower-shop__card-body\">\n          <h3 class=\"epower-shop__card-name\">${escapeHtml(p.name)}<\/h3>\n          <p class=\"epower-shop__card-cat\">${escapeHtml(catName)}<\/p>\n          <span class=\"epower-shop__card-cta\">\n            D\u00e9couvrir\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n              <polyline points=\"12 5 19 12 12 19\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/span>\n        <\/div>\n      <\/a>`;\n  }\n\n  function appendProducts(products, isFirstPage){\n    if(isFirstPage) els.grid.innerHTML = '';\n    products.forEach(p => {\n      els.grid.insertAdjacentHTML('beforeend', productCardHTML(p));\n    });\n  }\n\n  \/* ==================== MAIN LOAD ==================== *\/\n  async function loadProducts(isFirstPage){\n    if(state.loading) return;\n    state.loading = true;\n    els.loadMoreBtn.disabled = true;\n\n    if(isFirstPage) renderSkeletons(3);\n\n    const { products, total } = await fetchProducts();\n\n    if(isFirstPage){\n      state.allLoadedProducts = products;\n    }else{\n      state.allLoadedProducts = state.allLoadedProducts.concat(products);\n    }\n    state.totalAvailable = total;\n\n    appendProducts(products, isFirstPage);\n\n    const hasResults = state.allLoadedProducts.length > 0;\n    els.empty.hidden = hasResults;\n    els.grid.style.display = hasResults ? '' : 'none';\n\n    const loadedCount = state.allLoadedProducts.length;\n    const canLoadMore = loadedCount < total && products.length > 0;\n    els.loadMoreBtn.hidden = !canLoadMore;\n    els.loadMoreBtn.disabled = false;\n\n    state.loading = false;\n  }\n\n  function resetAndLoad(){\n    state.page = 1;\n    loadProducts(true);\n  }\n\n  \/* ==================== EVENTS ==================== *\/\n  els.search.addEventListener('input', () => {\n    clearTimeout(searchDebounce);\n    searchDebounce = setTimeout(() => {\n      state.search = els.search.value.trim();\n      resetAndLoad();\n    }, 350);\n  });\n\n  els.sort.addEventListener('change', () => {\n    state.sort = els.sort.value;\n    resetAndLoad();\n  });\n\n  els.loadMoreBtn.addEventListener('click', () => {\n    state.page += 1;\n    loadProducts(false);\n  });\n\n  function resetFilters(){\n    state.category = '';\n    state.search = '';\n    state.sort = 'relevance';\n\n    els.search.value = '';\n    els.sort.value = 'relevance';\n\n    syncCategoryUI();\n    resetAndLoad();\n  }\n  els.resetEmptyBtn.addEventListener('click', resetFilters);\n\n  \/* ---- Mobile drawer ---- *\/\n  function openDrawer(){\n    els.drawer.hidden = false;\n    els.overlay.hidden = false;\n    requestAnimationFrame(() => {\n      els.drawer.classList.add('epower-is-open');\n      els.overlay.classList.add('epower-is-open');\n    });\n    els.closeDrawerBtn.focus();\n  }\n  function closeDrawer(){\n    els.drawer.classList.remove('epower-is-open');\n    els.overlay.classList.remove('epower-is-open');\n    setTimeout(() => { els.drawer.hidden = true; els.overlay.hidden = true; }, 260);\n  }\n  els.openDrawerBtn.addEventListener('click', openDrawer);\n  els.closeDrawerBtn.addEventListener('click', closeDrawer);\n  els.overlay.addEventListener('click', closeDrawer);\n  document.addEventListener('keydown', (e) => {\n    if(e.key === 'Escape' && !els.drawer.hidden) closeDrawer();\n  });\n\n  \/* ==================== INIT ==================== *\/\n  async function init(){\n    renderSkeletons(3);\n    const categories = await fetchCategories();\n\n    \/\/ first pass: load products to get accurate \"all models\" count\n    const { total } = await fetchProducts();\n\n    renderCategoryList(els.catList, categories, total);\n    if(els.catListMobile) renderCategoryList(els.catListMobile, categories, total);\n\n    resetAndLoad();\n  }\n\n  init();\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Trier par PertinencePrix croissantPrix d\u00e9croissantPlus r\u00e9centPlus ancien Cat\u00e9gories Cat\u00e9gories Aucun mod\u00e8le trouv\u00e9 Essayez de modifier votre recherche ou vos filtres. R\u00e9initialiser les filtres Charger plus Cat\u00e9gories<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3881","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/e-power.ma\/ar\/wp-json\/wp\/v2\/pages\/3881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-power.ma\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/e-power.ma\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/e-power.ma\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-power.ma\/ar\/wp-json\/wp\/v2\/comments?post=3881"}],"version-history":[{"count":8,"href":"https:\/\/e-power.ma\/ar\/wp-json\/wp\/v2\/pages\/3881\/revisions"}],"predecessor-version":[{"id":3936,"href":"https:\/\/e-power.ma\/ar\/wp-json\/wp\/v2\/pages\/3881\/revisions\/3936"}],"wp:attachment":[{"href":"https:\/\/e-power.ma\/ar\/wp-json\/wp\/v2\/media?parent=3881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}