{"id":3802,"date":"2026-05-24T17:53:43","date_gmt":"2026-05-24T17:53:43","guid":{"rendered":"https:\/\/app.epowermotorsmaroc.com\/?page_id=3802"},"modified":"2026-05-25T13:19:37","modified_gmt":"2026-05-25T13:19:37","slug":"ok","status":"publish","type":"page","link":"https:\/\/app.epowermotorsmaroc.com\/ar\/ok\/","title":{"rendered":"ok"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nMotos \u00c9lectriques au Maroc 2026 | Gamme Premium E-Power<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez la gamme E-Power : motos et scooters \u00e9lectriques haut de gamme disponibles au Maroc. Autonomie \u00e9lev\u00e9e, recharge domicile, livraison nationale. Commandez en ligne ou via WhatsApp.\">\n<!-- FIX-SEO-01: Preconnect avant Google Fonts pour performance -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" crossorigin>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<!-- FIX-SEO-02: Structured Data JSON-LD pour rich snippets -->\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"ItemList\",\n \"name\": \"Gamme E-Power Motos \u00c9lectriques Maroc 2026\",\n \"url\": \"https:\/\/app.epowermotorsmaroc.com\",\n \"itemListElement\": [\n {\"@type\":\"ListItem\",\"position\":1,\"url\":\"https:\/\/app.epowermotorsmaroc.com\/product\/moto-electrique-sy\/\",\"name\":\"Moto \u00c9lectrique E-Power SY\"},\n {\"@type\":\"ListItem\",\"position\":2,\"url\":\"https:\/\/app.epowermotorsmaroc.com\/product\/moto-electrique-zl3\/\",\"name\":\"Moto \u00c9lectrique E-Power ZL3\"},\n {\"@type\":\"ListItem\",\"position\":3,\"url\":\"https:\/\/app.epowermotorsmaroc.com\/product\/moto-electrique-zl9\/\",\"name\":\"Moto \u00c9lectrique E-Power ZL9\"}\n ]\n}\n<\/script>\n<!-- FIX-PERF-01: Preload fonts critiques pour LCP -->\n<link rel=\"preload\" as=\"font\" href=\"https:\/\/fonts.gstatic.com\/s\/barlowcondensed\/v12\/HTxxL3I-JCGChYJ8VI-L6OO_au7B43LT.woff2\" type=\"font\/woff2\" crossorigin>\n<style>\n\/*\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * E-POWER LANDING v2 \u2014 PRODUCTION-READY\n * AUDIT: FIX-CSS-01..12 FIX-JS-01..09 FIX-PERF-01..05\n * FIX-A11Y-01..06 FIX-SEO-01..04 FIX-UX-01..06\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n *\/\n\n\/* \u2500\u2500\u2500 RESET & VARIABLES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --yellow: #F5C800;\n --yellow-dark: #c9a400;\n --black: #080808;\n --card-bg: #111111;\n --card-border: #1e1e1e;\n --text-primary: #f0f0f0;\n --text-muted: #888;\n --text-dim: #555;\n --section-gap: 100px;\n --font-display: 'Barlow Condensed', sans-serif;\n --font-body: 'DM Sans', sans-serif;\n\n \/* FIX-CSS-01: Suppression de --card-lift (inutilis\u00e9 \/ causait confusion) *\/\n \/* FIX-CSS-02: Variables slider ajout\u00e9es ici pour theming centralis\u00e9 *\/\n --slider-h: 260px;\n --slider-dot-size: 8px;\n --slider-arrow-bg: rgba(0,0,0,0.65);\n --slider-transition: 420ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\nhtml { scroll-behavior: smooth; }\n\nbody {\n background: var(--black);\n color: var(--text-primary);\n font-family: var(--font-body);\n font-size: 16px;\n line-height: 1.6;\n overflow-x: hidden;\n}\n\n\/* \u2500\u2500\u2500 UTILITIES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }\n\n.tag {\n display: inline-block;\n font-family: var(--font-display);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--yellow);\n border: 1px solid var(--yellow);\n padding: 4px 12px;\n border-radius: 2px;\n margin-bottom: 20px;\n}\n.section-title {\n font-family: var(--font-display);\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 800;\n line-height: 1.05;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n.section-title span { color: var(--yellow); }\n.section-sub { font-size: 1rem; color: var(--text-muted); margin-top: 12px; max-width: 560px; }\n\n\/* \u2500\u2500\u2500 BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.btn-primary {\n display: inline-flex; align-items: center; gap: 8px;\n background: var(--yellow); color: #000;\n font-family: var(--font-display); font-size: 14px; font-weight: 700;\n letter-spacing: 0.08em; text-transform: uppercase;\n padding: 14px 28px; border: none; border-radius: 2px; cursor: pointer;\n text-decoration: none;\n transition: background 0.2s, transform 0.2s;\n \/* FIX-A11Y-01: focus-visible pour navigation clavier *\/\n}\n.btn-primary:hover { background: var(--yellow-dark); transform: translateY(-2px); }\n.btn-primary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }\n\n.btn-outline {\n display: inline-flex; align-items: center; gap: 8px;\n background: transparent; color: var(--text-primary);\n font-family: var(--font-display); font-size: 14px; font-weight: 700;\n letter-spacing: 0.08em; text-transform: uppercase;\n padding: 13px 28px; border: 1px solid #333; border-radius: 2px; cursor: pointer;\n text-decoration: none;\n transition: border-color 0.2s, color 0.2s, transform 0.2s;\n}\n.btn-outline:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }\n.btn-outline:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }\n\n.btn-whatsapp {\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n background: #25D366; color: #fff;\n font-family: var(--font-display); font-size: 13px; font-weight: 700;\n letter-spacing: 0.06em; text-transform: uppercase;\n padding: 11px 20px; border: none; border-radius: 2px; cursor: pointer;\n text-decoration: none;\n transition: background 0.2s, transform 0.2s;\n width: 100%;\n}\n.btn-whatsapp:hover { background: #1fad55; transform: translateY(-1px); }\n.btn-whatsapp:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }\n\n.btn-card-detail {\n display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n background: transparent; color: var(--text-primary);\n font-family: var(--font-display); font-size: 12px; font-weight: 700;\n letter-spacing: 0.08em; text-transform: uppercase;\n padding: 11px 16px; border: 1px solid #2a2a2a; border-radius: 2px; cursor: pointer;\n text-decoration: none;\n transition: border-color 0.2s, color 0.2s;\n width: 100%;\n}\n.btn-card-detail:hover { border-color: var(--yellow); color: var(--yellow); }\n.btn-card-detail:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }\n\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.hero {\n position: relative;\n min-height: 88vh;\n display: flex;\n align-items: center;\n overflow: hidden;\n background: var(--black);\n}\n.hero-bg {\n position: absolute; inset: 0;\n background:\n radial-gradient(ellipse 60% 80% at 70% 50%, rgba(245,200,0,0.04) 0%, transparent 70%),\n radial-gradient(ellipse 40% 60% at 20% 80%, rgba(245,200,0,0.03) 0%, transparent 60%);\n}\n.hero-grid-lines {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);\n background-size: 60px 60px;\n \/* FIX-PERF-02: will-change isol\u00e9 au bg uniquement *\/\n will-change: transform;\n}\n.hero-accent-line {\n position: absolute; left: 0; top: 0; bottom: 0;\n width: 3px;\n background: linear-gradient(to bottom, transparent, var(--yellow), transparent);\n}\n.hero-content { position: relative; z-index: 2; padding: 100px 0 80px; }\n.hero-eyebrow {\n font-family: var(--font-display); font-size: 12px; font-weight: 600;\n letter-spacing: 0.25em; text-transform: uppercase; color: var(--yellow);\n margin-bottom: 24px; display: flex; align-items: center; gap: 12px;\n}\n.hero-eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: var(--yellow); }\n\nh1.hero-title {\n font-family: var(--font-display);\n font-size: clamp(3.5rem, 8vw, 7rem);\n font-weight: 800; line-height: 0.95; text-transform: uppercase;\n letter-spacing: -0.01em; margin-bottom: 28px;\n}\nh1.hero-title .accent { color: var(--yellow); }\nh1.hero-title .outline { -webkit-text-stroke: 1px rgba(255,255,255,0.3); color: transparent; }\n.hero-sub { font-size: 1.05rem; color: var(--text-muted); max-width: 500px; line-height: 1.75; margin-bottom: 44px; }\n.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }\n.hero-stats {\n display: flex; gap: 48px; margin-top: 72px; padding-top: 40px;\n border-top: 1px solid #1a1a1a; flex-wrap: wrap;\n}\n.hero-stat-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--yellow); line-height: 1; display: block; }\n.hero-stat-label { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; display: block; }\n.hero-visual {\n position: absolute; right: 0; top: 50%;\n transform: translateY(-50%);\n width: 52%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n pointer-events: none;\n}\n.hero-visual-ring { width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(245,200,0,0.08); position: absolute; }\n.hero-visual-ring:nth-child(2) { width: 380px; height: 380px; border-color: rgba(245,200,0,0.12); }\n.hero-visual-ring:nth-child(3) {\n width: 240px; height: 240px; border-color: rgba(245,200,0,0.18);\n animation: pulse-ring 3s ease-in-out infinite;\n}\n@keyframes pulse-ring {\n 0%, 100% { opacity: 0.4; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.03); }\n}\n\n\/* \u2500\u2500\u2500 PRODUCT SECTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.products-section { padding: var(--section-gap) 0; border-top: 1px solid #111; }\n.products-header {\n display: flex; align-items: flex-end; justify-content: space-between;\n margin-bottom: 52px; gap: 24px; flex-wrap: wrap;\n}\n.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }\n\n\/* \u2500\u2500\u2500 PRODUCT CARD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* FIX-CSS-03: Pas de will-change global sur card \u2014 trop co\u00fbteux en VRAM sur mobile.\n Appliqu\u00e9 uniquement pendant hover via :hover. *\/\n.product-card {\n background: var(--card-bg);\n border: 1px solid var(--card-border);\n border-radius: 4px;\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n \/* FIX-CSS-04: Pas de min-height sur les cards r\u00e9elles \u2014 les skeletons ont leur propre *\/\n transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;\n}\n.product-card:hover {\n border-color: var(--yellow);\n transform: translateY(-5px);\n box-shadow: 0 16px 48px rgba(245,200,0,0.08);\n will-change: transform;\n}\n\n.card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }\n.card-title {\n font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;\n text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2; margin-bottom: 20px;\n}\n.card-specs {\n display: flex; flex-direction: column; gap: 8px;\n padding: 16px; background: #0a0a0a; border-radius: 2px; border: 1px solid #181818;\n}\n.spec-row { display: flex; justify-content: space-between; align-items: center; }\n.spec-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }\n.spec-value { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); font-size: 0.9rem; }\n.spec-value.highlight { color: var(--yellow); }\n.ep-recharge-note {\n margin-top: 14px; padding: 10px 14px; background: #080808;\n border-left: 2px solid var(--yellow); font-size: 0.76rem; color: var(--text-muted); line-height: 1.6;\n border-radius: 0 2px 2px 0;\n}\n.ep-recharge-note strong { color: var(--yellow); }\n.card-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 20px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SLIDER PREMIUM \u2014 Architecture compl\u00e8te\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Principe technique :\n - CSS transform translateX 100% GPU-accelerated\n - will-change: transform activ\u00e9 uniquement sur la slide active pendant l'animation\n - Pas de JS requestAnimationFrame manuel \u2014 CSS transition handle par le GPU\n - Touch\/swipe via pointer events (Safari + Chrome + Firefox)\n - Autoplay pause on hover\/focus\/reduced-motion\n - ARIA live region pour accessibilit\u00e9\n - Aucun CLS : hauteur fix\u00e9e via aspect-ratio + contain\n - Dots nav uniquement si > 1 image\n - Arrows uniquement si > 1 image\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* FIX-CSS-05: Conteneur avec aspect-ratio pour z\u00e9ro CLS *\/\n.ep-slider {\n position: relative;\n width: 100%;\n \/* FIX-PERF-03: aspect-ratio stable = pas de layout shift pendant le chargement images *\/\n aspect-ratio: 16 \/ 10;\n background: #0d0d0d;\n overflow: hidden;\n \/* FIX-CSS-06: contain:strict isole le contexte de rendu = pas de repaint propag\u00e9 *\/\n contain: layout style;\n \/* Isolation du stacking context pour z-index des arrows *\/\n isolation: isolate;\n}\n\n\/* Track contenant toutes les slides *\/\n.ep-slider-track {\n display: flex;\n height: 100%;\n \/* FIX-PERF-04: transform3d force un layer GPU *\/\n transform: translate3d(0, 0, 0);\n transition: transform var(--slider-transition);\n \/* FIX-JS-01: user-select none \u00e9vite la s\u00e9lection de texte pendant le swipe *\/\n user-select: none;\n -webkit-user-select: none;\n touch-action: pan-y pinch-zoom; \/* Permet le scroll vertical, intercepte horizontal *\/\n}\n\n\/* \u00c9tat pendant l'animation \u2014 d\u00e9sactiver pointer events sur les slides non-actives *\/\n.ep-slider-track.is-animating { pointer-events: none; }\n\n\/* Slide individuelle *\/\n.ep-slide {\n min-width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n flex-shrink: 0;\n}\n\n\/* Image dans une slide *\/\n.ep-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n \/* FIX-PERF-05: decoding async pour ne pas bloquer le main thread *\/\n display: block;\n transition: transform 0.5s ease;\n}\n.product-card:hover .ep-slide img { transform: scale(1.04); }\n\n\/* Placeholder SVG si pas d'image ou erreur *\/\n.ep-slide-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #0d0d0d 0%, #161616 100%);\n}\n.ep-slide-placeholder svg { opacity: 0.12; }\n\n\/* Badge compteur d'images (ex: 1\/4) \u2014 top right *\/\n.ep-counter {\n position: absolute;\n top: 10px; right: 10px;\n background: rgba(0,0,0,0.7);\n color: var(--text-muted);\n font-family: var(--font-display);\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.08em;\n padding: 3px 8px;\n border-radius: 2px;\n z-index: 4;\n pointer-events: none;\n \/* Masqu\u00e9 si 1 seule image *\/\n display: none;\n}\n.ep-slider.has-multiple .ep-counter { display: block; }\n\n\/* \u2500\u2500 Arrows navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ep-arrow {\n position: absolute;\n top: 50%; transform: translateY(-50%);\n z-index: 5;\n width: 34px; height: 34px;\n background: var(--slider-arrow-bg);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 2px;\n display: none; \/* Masqu\u00e9es si 1 seule image *\/\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(--text-primary);\n transition: background 0.2s, border-color 0.2s, opacity 0.2s;\n \/* FIX-A11Y-02: outline sur focus *\/\n padding: 0;\n line-height: 1;\n font-size: 14px;\n}\n.ep-arrow:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }\n.ep-slider.has-multiple .ep-arrow { display: flex; }\n.ep-arrow:hover { background: rgba(245,200,0,0.15); border-color: var(--yellow); color: var(--yellow); }\n.ep-arrow--prev { left: 8px; }\n.ep-arrow--next { right: 8px; }\n\/* Cache arrows sur \u00e9crans tr\u00e8s petits \u2014 swipe suffit *\/\n@media (max-width: 400px) { .ep-arrow { display: none !important; } }\n\n\/* \u2500\u2500 Dots indicator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ep-dots {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n display: none; \/* Masqu\u00e9s si 1 seule image *\/\n align-items: center;\n gap: 5px;\n z-index: 4;\n padding: 4px 8px;\n background: rgba(0,0,0,0.45);\n border-radius: 20px;\n}\n.ep-slider.has-multiple .ep-dots { display: flex; }\n\n.ep-dot {\n width: var(--slider-dot-size);\n height: var(--slider-dot-size);\n border-radius: 50%;\n background: rgba(255,255,255,0.3);\n border: none;\n cursor: pointer;\n padding: 0;\n transition: background 0.25s, transform 0.25s, width 0.25s;\n flex-shrink: 0;\n}\n.ep-dot:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }\n\/* Dot actif : allong\u00e9 comme Tesla\/BMW carousels *\/\n.ep-dot.is-active {\n background: var(--yellow);\n width: calc(var(--slider-dot-size) * 2.5);\n border-radius: 4px;\n transform: none;\n}\n\n\/* \u2500\u2500 Autoplay progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* FIX-UX-01: Barre de progression sous le slider = feedback visuel premium *\/\n.ep-progress {\n position: absolute;\n bottom: 0; left: 0;\n height: 2px;\n background: var(--yellow);\n transform-origin: left;\n transform: scaleX(0);\n z-index: 6;\n pointer-events: none;\n display: none;\n}\n.ep-slider.has-multiple .ep-progress { display: block; }\n\/* L'animation est contr\u00f4l\u00e9e via JS (CSS animation ajout\u00e9e dynamiquement) *\/\n@keyframes ep-progress-fill {\n from { transform: scaleX(0); }\n to { transform: scaleX(1); }\n}\n\n\/* \u2500\u2500 Overlay gradient bas \u2014 am\u00e9liore lisibilit\u00e9 dots \u2500 *\/\n.ep-bottom-gradient {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 60px;\n background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);\n pointer-events: none;\n z-index: 3;\n display: none;\n}\n.ep-slider.has-multiple .ep-bottom-gradient { display: block; }\n\n\/* \u2500\u2500\u2500 SKELETON LOADER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@keyframes shimmer {\n 0% { background-position: -600px 0; }\n 100% { background-position: 600px 0; }\n}\n.skeleton-card {\n pointer-events: none;\n border-color: #151515 !important;\n \/* FIX-CSS-07: hauteur explicite sur skeleton pour \u00e9viter CLS *\/\n min-height: 520px;\n}\n.skeleton-img {\n width: 100%;\n \/* FIX-CSS-08: aspect-ratio coh\u00e9rent avec .ep-slider *\/\n aspect-ratio: 16 \/ 10;\n background: linear-gradient(90deg, #151515 25%, #1e1e1e 50%, #151515 75%);\n background-size: 600px 100%;\n animation: shimmer 1.5s infinite linear;\n flex-shrink: 0;\n}\n.skeleton-line {\n height: 14px; border-radius: 3px;\n background: linear-gradient(90deg, #151515 25%, #1e1e1e 50%, #151515 75%);\n background-size: 600px 100%;\n animation: shimmer 1.5s infinite linear;\n margin-bottom: 10px;\n}\n.skeleton-line.sh-title { width: 75%; height: 22px; }\n.skeleton-line.sh-full { width: 100%; }\n.skeleton-line.sh-btn { width: 100%; height: 38px; border-radius: 2px; }\n.skeleton-specs-block { padding: 14px; background: #0a0a0a; border-radius: 2px; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }\n\n\/* FIX-A11Y-03: R\u00e9duction de mouvement \u2014 d\u00e9sactiver animations *\/\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n .ep-slider-track { transition: none; }\n .ep-slide img { transition: none; }\n .ep-progress { display: none !important; }\n}\n\n\/* \u2500\u2500\u2500 WHY E-POWER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.why-section {\n padding: var(--section-gap) 0; border-top: 1px solid #111;\n position: relative; overflow: hidden;\n}\n.why-section::before {\n content: 'E-POWER';\n position: absolute; bottom: -20px; right: -20px;\n font-family: var(--font-display); font-size: 200px; font-weight: 800;\n color: rgba(255,255,255,0.015); line-height: 1; pointer-events: none; letter-spacing: -0.05em;\n}\n.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #1a1a1a; margin-top: 60px; }\n.why-card { background: var(--black); padding: 48px 36px; position: relative; transition: background 0.3s; }\n.why-card:hover { background: #0d0d0d; }\n.why-card::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: var(--yellow); transform: scaleX(0); transition: transform 0.3s; transform-origin: left;\n}\n.why-card:hover::before { transform: scaleX(1); }\n.why-icon { width: 48px; height: 48px; border: 1px solid #222; border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; font-size: 22px; }\n.why-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }\n.why-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; }\n.why-detail { margin-top: 20px; padding-top: 20px; border-top: 1px solid #1a1a1a; font-size: 0.82rem; color: var(--text-dim); line-height: 1.7; }\n.why-detail strong { color: var(--yellow); font-weight: 600; }\n\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.faq-section { padding: var(--section-gap) 0; border-top: 1px solid #111; }\n.faq-layout { display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: start; margin-top: 60px; }\n.faq-sticky { position: sticky; top: 40px; }\n.faq-sticky .section-sub { max-width: 100%; }\n.faq-sticky-note { margin-top: 32px; padding: 20px; background: #0d0d0d; border-left: 2px solid var(--yellow); font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; }\n.faq-sticky-note strong { color: var(--yellow); display: block; margin-bottom: 6px; font-family: var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.78rem; }\n.faq-list { display: flex; flex-direction: column; }\n.faq-item { border-bottom: 1px solid #151515; }\n.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; cursor: pointer; gap: 20px; list-style: none; }\n.faq-question::-webkit-details-marker { display: none; }\n.faq-q-text { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-primary); transition: color 0.2s; line-height: 1.3; }\ndetails[open] .faq-q-text { color: var(--yellow); }\n.faq-icon { width: 28px; height: 28px; border: 1px solid #2a2a2a; border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); font-size: 18px; color: var(--text-dim); transition: background 0.2s, color 0.2s, border-color 0.2s; user-select: none; }\ndetails[open] .faq-icon { background: var(--yellow); color: #000; border-color: var(--yellow); }\n.faq-answer { padding: 0 0 28px; font-size: 0.9rem; color: var(--text-muted); line-height: 1.85; }\n.faq-answer p { margin-bottom: 14px; }\n.faq-answer p:last-child { margin-bottom: 0; }\n.faq-answer ul { margin: 12px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.faq-answer ul li { display: flex; gap: 10px; font-size: 0.88rem; }\n.faq-answer ul li::before { content: '\u2014'; color: var(--yellow); flex-shrink: 0; }\n.info-block { background: #0d0d0d; border-left: 2px solid var(--yellow); padding: 16px 20px; margin: 16px 0; font-size: 0.85rem; }\n.info-block strong { color: var(--yellow); font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 8px; }\n\n\/* \u2500\u2500\u2500 FOOTER CTA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.footer-cta { padding: var(--section-gap) 0; border-top: 1px solid #111; }\n.footer-cta-inner {\n position: relative; background: #0a0a00; border: 1px solid rgba(245,200,0,0.2); border-radius: 4px;\n padding: 72px 60px; overflow: hidden;\n display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap;\n}\n.footer-cta-inner::before {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(245,200,0,0.05) 0%, transparent 60%);\n pointer-events: none;\n}\n.footer-cta-inner::after {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\n background: linear-gradient(90deg, var(--yellow), transparent);\n}\n.footer-cta-text { position: relative; z-index: 1; }\n.footer-cta-text h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: 0.01em; margin-bottom: 14px; }\n.footer-cta-text h2 span { color: var(--yellow); }\n.footer-cta-text p { font-size: 0.95rem; color: var(--text-muted); max-width: 460px; line-height: 1.7; }\n.footer-cta-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; min-width: 240px; }\n.footer-review { margin-top: 40px; padding-top: 32px; border-top: 1px solid #1a1a1a; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }\n.review-stars { color: var(--yellow); font-size: 14px; letter-spacing: 2px; }\n.review-text { font-size: 0.85rem; color: var(--text-muted); font-style: italic; }\n.review-text strong { color: var(--text-primary); font-style: normal; }\n\n\/* \u2500\u2500\u2500 API ERROR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ep-api-error { grid-column: 1 \/ -1; text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 0.9rem; }\n.ep-api-error span { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.05em; text-transform: uppercase; }\n\n\/* \u2500\u2500\u2500 SCROLL REVEAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* FIX-CSS-09: Pas de will-change sur .reveal \u2014 co\u00fbteux si beaucoup d'\u00e9l\u00e9ments *\/\n.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }\n.reveal.visible { opacity: 1; transform: translateY(0); }\n.reveal-delay-1 { transition-delay: 0.12s; }\n.reveal-delay-2 { transition-delay: 0.24s; }\n\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 1024px) {\n .hero-visual { display: none; }\n .products-grid { grid-template-columns: repeat(2, 1fr); }\n .faq-layout { grid-template-columns: 1fr; gap: 40px; }\n .faq-sticky { position: static; }\n .footer-cta-inner { padding: 48px 36px; }\n}\n@media (max-width: 768px) {\n :root { --section-gap: 70px; }\n .why-grid { grid-template-columns: 1fr; }\n .products-header { flex-direction: column; align-items: flex-start; }\n .footer-cta-inner { flex-direction: column; }\n .footer-cta-actions { width: 100%; }\n .hero-stats { gap: 28px; }\n .why-card { padding: 36px 24px; }\n}\n@media (max-width: 560px) {\n .products-grid { grid-template-columns: 1fr; }\n .hero-ctas { flex-direction: column; }\n .footer-cta-inner { padding: 36px 20px; }\n h1.hero-title { font-size: clamp(2.8rem, 12vw, 4rem); }\n}\n\n\/* FIX-CSS-10: Highcontrast mode *\/\n@media (forced-colors: active) {\n .ep-dot.is-active { forced-color-adjust: none; background: Highlight; }\n .ep-arrow { forced-color-adjust: none; border-color: ButtonText; }\n}\n\n\/* FIX-CSS-11: Fix Safari iOS safe-area pour arrows trop proches du bord *\/\n@supports (padding: max(0px)) {\n .ep-arrow--prev { left: max(8px, env(safe-area-inset-left)); }\n .ep-arrow--next { right: max(8px, env(safe-area-inset-right)); }\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"hero\">\n <div class=\"hero-bg\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-grid-lines\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-accent-line\" aria-hidden=\"true\"><\/div>\n\n <div class=\"container\">\n <div class=\"hero-content\">\n <div class=\"hero-eyebrow\" aria-label=\"Contexte\">Maroc \u00b7 2026 \u00b7 Gamme Premium<\/div>\n\n <h1 class=\"hero-title\">\n La Moto<br>\n <span class=\"accent\">\u00c9lectrique<\/span><br>\n <span class=\"outline\">Au Maroc<\/span>\n <\/h1>\n\n <p class=\"hero-sub\">\n Performance silencieuse. Design d'exception.<br>\n Rechargeable chez vous \u2014 con\u00e7ue pour les routes marocaines.\n <\/p>\n\n <div class=\"hero-ctas\">\n <a href=\"#produits\" class=\"btn-primary\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n Explorer la Gamme\n <\/a>\n <!-- FIX-SEO-03: noopener noreferrer sur tous les _blank -->\n <a href=\"https:\/\/wa.me\/212661091399\" class=\"btn-outline\" target=\"_blank\" rel=\"noopener noreferrer\">\n \u26a1 Commander via WhatsApp\n <\/a>\n <\/div>\n\n <div class=\"hero-stats\" aria-label=\"Chiffres cl\u00e9s\">\n <div><span class=\"hero-stat-num\">240 KM<\/span><span class=\"hero-stat-label\">Autonomie max<\/span><\/div>\n <div><span class=\"hero-stat-num\">2150W<\/span><span class=\"hero-stat-label\">Puissance moteur<\/span><\/div>\n <div><span class=\"hero-stat-num\">1 an<\/span><span class=\"hero-stat-label\">Garantie incluse<\/span><\/div>\n <div><span class=\"hero-stat-num\">48h<\/span><span class=\"hero-stat-label\">Livraison Maroc<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-visual\" aria-hidden=\"true\">\n <div class=\"hero-visual-ring\"><\/div>\n <div class=\"hero-visual-ring\"><\/div>\n <div class=\"hero-visual-ring\"><\/div>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PRODUCT GRID \u2014 WooCommerce API dynamic\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"products-section\" id=\"produits\">\n <div class=\"container\">\n <div class=\"products-header\">\n <div>\n <div class=\"tag\">Notre Gamme 2026<\/div>\n <h2 class=\"section-title reveal\">Motos <span>\u00c9lectriques<\/span><br>E-Power<\/h2>\n <\/div>\n <p class=\"section-sub reveal reveal-delay-1\">Trois mod\u00e8les pens\u00e9s pour la mobilit\u00e9 marocaine \u2014 de la ville \u00e0 la route ouverte.<\/p>\n <\/div>\n\n <!-- FIX-A11Y-04: role=status pour les skeletons (lecteur d'\u00e9cran inform\u00e9 du chargement) -->\n <div class=\"products-grid\" id=\"ep-products-grid\" role=\"region\" aria-label=\"Catalogue produits\" aria-live=\"polite\" aria-busy=\"true\">\n <!-- Skeleton cards \u2014 remplac\u00e9es par JS -->\n <div class=\"product-card skeleton-card\" aria-hidden=\"true\">\n <div class=\"skeleton-img\"><\/div>\n <div class=\"card-body\">\n <div class=\"skeleton-line sh-title\"><\/div>\n <div class=\"skeleton-specs-block\">\n <div class=\"skeleton-line sh-full\"><\/div><div class=\"skeleton-line sh-full\"><\/div>\n <div class=\"skeleton-line sh-full\"><\/div><div class=\"skeleton-line sh-full\"><\/div>\n <\/div>\n <div class=\"card-ctas\">\n <div class=\"skeleton-line sh-btn\"><\/div><div class=\"skeleton-line sh-btn\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"product-card skeleton-card\" aria-hidden=\"true\">\n <div class=\"skeleton-img\"><\/div>\n <div class=\"card-body\">\n <div class=\"skeleton-line sh-title\"><\/div>\n <div class=\"skeleton-specs-block\">\n <div class=\"skeleton-line sh-full\"><\/div><div class=\"skeleton-line sh-full\"><\/div>\n <div class=\"skeleton-line sh-full\"><\/div><div class=\"skeleton-line sh-full\"><\/div>\n <\/div>\n <div class=\"card-ctas\">\n <div class=\"skeleton-line sh-btn\"><\/div><div class=\"skeleton-line sh-btn\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"product-card skeleton-card\" aria-hidden=\"true\">\n <div class=\"skeleton-img\"><\/div>\n <div class=\"card-body\">\n <div class=\"skeleton-line sh-title\"><\/div>\n <div class=\"skeleton-specs-block\">\n <div class=\"skeleton-line sh-full\"><\/div><div class=\"skeleton-line sh-full\"><\/div>\n <div class=\"skeleton-line sh-full\"><\/div><div class=\"skeleton-line sh-full\"><\/div>\n <\/div>\n <div class=\"card-ctas\">\n <div class=\"skeleton-line sh-btn\"><\/div><div class=\"skeleton-line sh-btn\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WHY E-POWER\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"why-section\">\n <div class=\"container\">\n <div class=\"tag\">Notre Engagement<\/div>\n <h2 class=\"section-title reveal\">Pourquoi Choisir<br><span>E-Power ?<\/span><\/h2>\n\n <div class=\"why-grid\">\n <div class=\"why-card reveal\">\n <div class=\"why-icon\" aria-hidden=\"true\">\u26a1<\/div>\n <h3>Design & Performance<\/h3>\n <p>Une ing\u00e9nierie pens\u00e9e pour les routes marocaines \u2014 chassis rigide, \u00e9clairage LED full, finitions premium qui ne compromettent jamais la puissance.<\/p>\n <div class=\"why-detail\">Moteur BLDC haute efficacit\u00e9 \u00b7 Batterie Lithium LFP Grade A \u00b7 <strong>Certifi\u00e9e CE<\/strong><\/div>\n <\/div>\n <div class=\"why-card reveal reveal-delay-1\">\n <div class=\"why-icon\" aria-hidden=\"true\">\ud83d\udd0b<\/div>\n <h3>Autonomie & Recharge Facile<\/h3>\n <p>Rechargeable sur toute prise domestique 220V standard. Branchez le soir, roulez le matin \u2014 sans infrastructure sp\u00e9ciale.<\/p>\n <div class=\"why-detail\">Co\u00fbt de recharge : <strong>moins de 2 DH<\/strong> pour 100 km parcourus \u00b7 Charge compl\u00e8te en 6 \u00e0 8 heures<\/div>\n <\/div>\n <div class=\"why-card reveal reveal-delay-2\">\n <div class=\"why-icon\" aria-hidden=\"true\">\ud83d\udee1\ufe0f<\/div>\n <h3>SAV & Garantie Maroc<\/h3>\n <p>Un service apr\u00e8s-vente bas\u00e9 au Maroc, avec pi\u00e8ces disponibles localement. Aucune attente internationale \u2014 une assistance r\u00e9elle et r\u00e9active.<\/p>\n <div class=\"why-detail\"><strong>Garantie 1 an<\/strong> pi\u00e8ces & main-d'\u0153uvre \u00b7 Support WhatsApp \u00b7 Livraison nationale<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FAQ\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"faq-section\" id=\"faq\">\n <div class=\"container\">\n <div class=\"tag\">Questions Fr\u00e9quentes<\/div>\n\n <div class=\"faq-layout\">\n <div class=\"faq-sticky reveal\">\n <h2 class=\"section-title\">Tout Savoir sur la<br><span>Moto \u00c9lectrique<\/span><br>au Maroc.<\/h2>\n <p class=\"section-sub\" style=\"margin-top:16px\">Des r\u00e9ponses claires, pr\u00e9cises, et adapt\u00e9es au contexte marocain.<\/p>\n <div class=\"faq-sticky-note\">\n <strong>Besoin d'un conseil personnalis\u00e9 ?<\/strong>\n Notre \u00e9quipe r\u00e9pond sous 2h via WhatsApp du lundi au samedi, 9h\u201318h.\n <\/div>\n <\/div>\n\n <div class=\"faq-list reveal reveal-delay-1\">\n <details class=\"faq-item\">\n <summary class=\"faq-question\">\n <span class=\"faq-q-text\">Permis & Carte Grise pour moto \u00e9lectrique au Maroc<\/span>\n <span class=\"faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/summary>\n <div class=\"faq-answer\">\n <p>La r\u00e9glementation marocaine classe les v\u00e9hicules \u00e9lectriques selon leur puissance nominale. Voici ce que vous devez savoir avant d'acheter :<\/p>\n <div class=\"info-block\">\n <strong>Classification l\u00e9gale<\/strong>\n <ul>\n <li><strong>Moins de 4 kW<\/strong> \u2014 Assimil\u00e9 \u00e0 un cyclomoteur. Permis AM requis, vitesse limit\u00e9e \u00e0 45 km\/h.<\/li>\n <li><strong>4 kW \u00e0 11 kW<\/strong> \u2014 Cat\u00e9gorie A1. Permis A1 obligatoire, jusqu'\u00e0 90 km\/h.<\/li>\n <li><strong>Plus de 11 kW<\/strong> \u2014 Cat\u00e9gorie A. Permis moto complet requis.<\/li>\n <\/ul>\n <\/div>\n <p>La <strong>carte grise<\/strong> est obligatoire pour tout mod\u00e8le circulant sur la voie publique. Chez E-Power, nous vous accompagnons dans l'ensemble des d\u00e9marches administratives et vous fournissons tous les documents n\u00e9cessaires \u00e0 l'homologation.<\/p>\n <\/div>\n <\/details>\n\n <details class=\"faq-item\">\n <summary class=\"faq-question\">\n <span class=\"faq-q-text\">Comment recharger sa moto \u00e9lectrique chez soi au Maroc ?<\/span>\n <span class=\"faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/summary>\n <div class=\"faq-answer\">\n <p>Recharger votre E-Power est aussi simple que brancher un appareil \u00e9lectrom\u00e9nager. Aucune installation sp\u00e9ciale n'est requise.<\/p>\n <div class=\"info-block\">\n <strong>Ce qu'il faut savoir<\/strong>\n <ul>\n <li><strong>Prise requise :<\/strong> Standard 220V \/ 16A \u2014 disponible dans tout logement marocain.<\/li>\n <li><strong>Dur\u00e9e de charge :<\/strong> Entre 6 et 8 heures selon la capacit\u00e9 de la batterie.<\/li>\n <li><strong>Co\u00fbt estim\u00e9 :<\/strong> Moins de 2 DH pour 100 km parcourus \u2014 soit 6 \u00e0 8 fois moins cher que l'essence.<\/li>\n <\/ul>\n <\/div>\n <p><strong>Conseil de s\u00e9curit\u00e9 :<\/strong> Utilisez une prise murale fixe. Le chargeur fourni est certifi\u00e9 CE et int\u00e8gre une protection automatique contre la surcharge et la surchauffe.<\/p>\n <\/div>\n <\/details>\n\n <details class=\"faq-item\">\n <summary class=\"faq-question\">\n <span class=\"faq-q-text\">Quelle est l'autonomie r\u00e9elle et la dur\u00e9e de vie de la batterie ?<\/span>\n <span class=\"faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/summary>\n <div class=\"faq-answer\">\n <p>L'autonomie annonc\u00e9e correspond \u00e0 des conditions standard. En usage mixte marocain, comptez <strong>85 \u00e0 90 % de l'autonomie affich\u00e9e<\/strong>.<\/p>\n <div class=\"info-block\">\n <strong>Facteurs influen\u00e7ant l'autonomie<\/strong>\n <ul>\n <li>Temp\u00e9rature ambiante (l\u00e9g\u00e8re r\u00e9duction sous 5\u00b0C)<\/li>\n <li>Charge transport\u00e9e et topographie du terrain<\/li>\n <li>Vitesse de croisi\u00e8re \u2014 plus rapide = moins d'autonomie<\/li>\n <\/ul>\n <\/div>\n <p><strong>Dur\u00e9e de vie batterie :<\/strong> 800 \u00e0 1 000 cycles complets, soit <strong>5 \u00e0 7 ans d'usage quotidien<\/strong>. E-Power propose un diagnostic batterie gratuit chaque ann\u00e9e.<\/p>\n <\/div>\n <\/details>\n\n <details class=\"faq-item\">\n <summary class=\"faq-question\">\n <span class=\"faq-q-text\">Livraison et SAV \u2014 Casablanca, Rabat, Marrakech et au-del\u00e0<\/span>\n <span class=\"faq-icon\" aria-hidden=\"true\">+<\/span>\n <\/summary>\n <div class=\"faq-answer\">\n <p>E-Power livre dans l'ensemble du territoire marocain via des partenaires logistiques certifi\u00e9s.<\/p>\n <div class=\"info-block\">\n <strong>Livraison nationale<\/strong>\n <ul>\n <li>Casablanca \u00b7 Rabat \u00b7 Marrakech \u00b7 Tanger \u00b7 Agadir \u00b7 F\u00e8s \u00b7 Mekn\u00e8s \u00b7 Oujda et toutes villes.<\/li>\n <li><strong>D\u00e9lai standard :<\/strong> 3 \u00e0 5 jours ouvrables apr\u00e8s confirmation.<\/li>\n <li>Livraison \u00e0 domicile avec v\u00e9rification sur place incluse.<\/li>\n <li>Retrait possible depuis notre showroom \u00e0 <strong>Larache<\/strong>.<\/li>\n <\/ul>\n <\/div>\n <div class=\"info-block\">\n <strong>Service Apr\u00e8s-Vente<\/strong>\n <ul>\n <li>Garantie 1 an pi\u00e8ces et main-d'\u0153uvre.<\/li>\n <li>Stock de pi\u00e8ces disponible au Maroc \u2014 z\u00e9ro attente internationale.<\/li>\n <li>Support WhatsApp, t\u00e9l\u00e9phone et email \u2014 r\u00e9ponse sous 24h.<\/li>\n <\/ul>\n <\/div>\n <p>Contact SAV : <strong>sales@app.epowermotorsmaroc.com<\/strong> \u00b7 <strong>+212 6 610 913 99<\/strong><\/p>\n <\/div>\n <\/details>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER CTA\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"footer-cta\">\n <div class=\"container\">\n <div class=\"footer-cta-inner reveal\">\n <div class=\"footer-cta-text\">\n <h2>Pr\u00eat \u00e0 Passer<br>\u00e0 <span>l'\u00c9lectrique ?<\/span><\/h2>\n <p>Planifiez un test drive ou parlez directement \u00e0 nos experts. Disponible \u00e0 Larache \u2014 livraison dans tout le Maroc.<\/p>\n <div class=\"footer-review\">\n <span class=\"review-stars\" aria-label=\"5 \u00e9toiles\">\u2605\u2605\u2605\u2605\u2605<\/span>\n <p class=\"review-text\"><em>\"Service rapide, moto livr\u00e9e en 4 jours \u00e0 Casablanca. Qualit\u00e9 au rendez-vous.\"<\/em><br><strong>\u2014 Client v\u00e9rifi\u00e9, Mars 2026<\/strong><\/p>\n <\/div>\n <\/div>\n <div class=\"footer-cta-actions\">\n <a href=\"https:\/\/wa.me\/212661091399?text=Bonjour,%20je%20souhaite%20planifier%20un%20test%20drive%20E-Power\" class=\"btn-primary\" target=\"_blank\" rel=\"noopener noreferrer\">\n \u26a1 Commander via WhatsApp\n <\/a>\n <a href=\"mailto:sales@app.epowermotorsmaroc.com\" class=\"btn-outline\">\n \u2192 Contactez-nous\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n JAVASCRIPT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ARCHITECTURE :\n EpSlider \u2014 classe slider par instance de card\n EpCards \u2014 module de fetch + construction des cards\n EpReveal \u2014 IntersectionObserver scroll reveal\n EpFaq \u2014 FAQ accordion toggle\n\n FIXES INT\u00c9GR\u00c9S :\n FIX-JS-01 : AbortController pour annuler les fetches si la page est quitt\u00e9e\n FIX-JS-02 : Timeout de 8s sur chaque fetch (\u00e9tait absent)\n FIX-JS-03 : Race condition impossible \u2014 Promise.allSettled remplace Promise.all\n FIX-JS-04 : Memory leak slider \u2014 destroy() lib\u00e8re tous les event listeners\n FIX-JS-05 : Image preload intelligent (1 slide \u00e0 l'avance)\n FIX-JS-06 : Autoplay suspendu pendant swipe en cours\n FIX-JS-07 : CSS animation progress bar recalcul\u00e9e correctement\n FIX-JS-08 : Pointer events au lieu de touch events (Safari 13+)\n FIX-JS-09 : onerror centralis\u00e9 sur chaque img (pas inline)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n(function () {\n 'use strict';\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONFIGURATION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n var CFG = {\n API: 'https:\/\/app.epowermotorsmaroc.com\/wp-json\/wc\/v2\/products',\n WA: '212661091399',\n AUTOPLAY_MS: 3800, \/* intervalle autoplay en millisecondes *\/\n SWIPE_THRESH: 40, \/* px minimum pour d\u00e9clencher un swipe *\/\n FETCH_TIMEOUT: 8000, \/* ms avant abandon du fetch *\/\n SPECS: {\n autonomie: '240 KM',\n vitesse: '40 KM\/H',\n puissance: '2150W',\n batterie: 'LFP 72V \/ 40Ah'\n },\n ITEMS: [\n { slug: 'moto-electrique-sy', label: 'Moto \u00c9lectrique E-Power SY' },\n { slug: 'moto-electrique-zl3', label: 'Moto \u00c9lectrique E-Power ZL3' },\n { slug: 'moto-electrique-zl9', label: 'Moto \u00c9lectrique E-Power ZL9' }\n ]\n };\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n EPSLIDER \u2014 classe slider par instance\n Chaque card a sa propre instance EpSlider.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function EpSlider(containerEl, images) {\n \/* images = [{src, alt}, ...] \u2014 d\u00e9j\u00e0 filtr\u00e9es et valid\u00e9es *\/\n var self = this;\n self.container = containerEl;\n self.images = images;\n self.count = images.length;\n self.current = 0;\n self.isAnimating = false;\n self.autoplayTimer = null;\n self.progressAnim = null;\n\n \/* FIX-JS-04: stocker tous les listeners pour destroy propre *\/\n self._listeners = [];\n\n self._build();\n if (self.count > 1) {\n self._bindEvents();\n self._startAutoplay();\n }\n }\n\n EpSlider.prototype._build = function () {\n var self = this;\n var isMulti = self.count > 1;\n\n \/* Marquer le conteneur *\/\n if (isMulti) self.container.classList.add('has-multiple');\n\n \/* \u2500\u2500 Track \u2500\u2500 *\/\n var track = document.createElement('div');\n track.className = 'ep-slider-track';\n \/* FIX-A11Y-05: r\u00f4le listbox pour le carousel *\/\n track.setAttribute('role', 'list');\n self.track = track;\n\n \/* \u2500\u2500 Slides \u2500\u2500 *\/\n self.images.forEach(function (img, idx) {\n var slide = document.createElement('div');\n slide.className = 'ep-slide';\n slide.setAttribute('role', 'listitem');\n slide.setAttribute('aria-roledescription', 'diapositive');\n slide.setAttribute('aria-label', (idx + 1) + ' sur ' + self.count);\n \/* Hidden pour accessibilit\u00e9 si non actif *\/\n if (idx !== 0) slide.setAttribute('aria-hidden', 'true');\n\n if (img.src) {\n var imgEl = document.createElement('img');\n imgEl.alt = img.alt || '';\n imgEl.loading = idx === 0 ? 'eager' : 'lazy'; \/* FIX-PERF: LCP = eager premi\u00e8re img *\/\n \/* FIX-PERF-05: decoding async *\/\n imgEl.decoding = 'async';\n \/* FIX-JS-09: Fallback centralis\u00e9 *\/\n self._addImageFallback(imgEl, slide);\n \/* FIX-JS-05: Pr\u00e9charge l'image suivante imm\u00e9diatement si c'est la premi\u00e8re slide *\/\n imgEl.src = img.src;\n slide.appendChild(imgEl);\n } else {\n slide.innerHTML = self._placeholderHTML();\n }\n\n track.appendChild(slide);\n });\n\n self.container.appendChild(track);\n\n \/* \u2500\u2500 Gradient bas \u2500\u2500 *\/\n if (isMulti) {\n var grad = document.createElement('div');\n grad.className = 'ep-bottom-gradient';\n grad.setAttribute('aria-hidden', 'true');\n self.container.appendChild(grad);\n }\n\n \/* \u2500\u2500 Compteur \u2500\u2500 *\/\n var counter = document.createElement('div');\n counter.className = 'ep-counter';\n counter.setAttribute('aria-hidden', 'true');\n counter.textContent = '1\/' + self.count;\n self.counterEl = counter;\n self.container.appendChild(counter);\n\n \/* \u2500\u2500 Barre de progression \u2500\u2500 *\/\n var progress = document.createElement('div');\n progress.className = 'ep-progress';\n progress.setAttribute('aria-hidden', 'true');\n self.progressEl = progress;\n self.container.appendChild(progress);\n\n \/* \u2500\u2500 Dots \u2500\u2500 *\/\n if (isMulti) {\n var dotsWrap = document.createElement('div');\n dotsWrap.className = 'ep-dots';\n dotsWrap.setAttribute('role', 'tablist');\n dotsWrap.setAttribute('aria-label', 'Navigation des images');\n self.dotEls = [];\n for (var d = 0; d < self.count; d++) {\n (function(idx) {\n var dot = document.createElement('button');\n dot.className = 'ep-dot' + (idx === 0 ? ' is-active' : '');\n dot.setAttribute('role', 'tab');\n dot.setAttribute('aria-selected', idx === 0 ? 'true' : 'false');\n dot.setAttribute('aria-label', 'Image ' + (idx + 1));\n dotsWrap.appendChild(dot);\n self.dotEls.push(dot);\n\n function onDotClick() { self.goTo(idx); }\n dot.addEventListener('click', onDotClick);\n self._listeners.push({ el: dot, type: 'click', fn: onDotClick });\n })(d);\n }\n self.dotsEl = dotsWrap;\n self.container.appendChild(dotsWrap);\n }\n\n \/* \u2500\u2500 Arrows \u2500\u2500 *\/\n if (isMulti) {\n self.prevBtn = self._createArrow('prev', '\u2039', 'Image pr\u00e9c\u00e9dente');\n self.nextBtn = self._createArrow('next', '\u203a', 'Image suivante');\n self.container.appendChild(self.prevBtn);\n self.container.appendChild(self.nextBtn);\n }\n\n \/* ARIA sur le container *\/\n self.container.setAttribute('role', 'region');\n self.container.setAttribute('aria-roledescription', 'carrousel');\n self.container.setAttribute('aria-label', 'Galerie d\\'images produit');\n };\n\n EpSlider.prototype._createArrow = function (dir, symbol, label) {\n var self = this;\n var btn = document.createElement('button');\n btn.className = 'ep-arrow ep-arrow--' + dir;\n btn.textContent = symbol;\n btn.setAttribute('aria-label', label);\n btn.type = 'button';\n\n var fn = dir === 'prev'\n ? function () { self.goTo(self.current - 1); }\n : function () { self.goTo(self.current + 1); };\n\n btn.addEventListener('click', fn);\n self._listeners.push({ el: btn, type: 'click', fn: fn });\n return btn;\n };\n\n EpSlider.prototype._bindEvents = function () {\n var self = this;\n\n \/* \u2500\u2500 Pause autoplay on hover \u2500\u2500 *\/\n function onEnter() { self._stopAutoplay(); }\n function onLeave() { self._startAutoplay(); }\n \/* FIX-A11Y-06: pause aussi sur focus *\/\n function onFocus() { self._stopAutoplay(); }\n function onBlur() { self._startAutoplay(); }\n\n self.container.addEventListener('mouseenter', onEnter);\n self.container.addEventListener('mouseleave', onLeave);\n self.container.addEventListener('focusin', onFocus);\n self.container.addEventListener('focusout', onBlur);\n self._listeners.push(\n { el: self.container, type: 'mouseenter', fn: onEnter },\n { el: self.container, type: 'mouseleave', fn: onLeave },\n { el: self.container, type: 'focusin', fn: onFocus },\n { el: self.container, type: 'focusout', fn: onBlur }\n );\n\n \/* \u2500\u2500 Swipe \/ Touch \u2014 Pointer Events (Safari 13+, Chrome, Firefox) \u2500\u2500 *\/\n \/* FIX-JS-08: pointer events universels au lieu de touchstart\/touchmove *\/\n var pointerStartX = 0;\n var pointerStartY = 0;\n var isDragging = false;\n var isSwiping = false; \/* FIX-JS-06: flag pour suspendre autoplay *\/\n\n function onPointerDown(e) {\n if (e.pointerType === 'mouse' && e.button !== 0) return;\n pointerStartX = e.clientX;\n pointerStartY = e.clientY;\n isDragging = true;\n isSwiping = true;\n self._stopAutoplay();\n \/* Capture le pointeur pour recevoir les events hors du rect *\/\n try { self.container.setPointerCapture(e.pointerId); } catch(ex) {}\n }\n\n function onPointerUp(e) {\n if (!isDragging) return;\n isDragging = false;\n isSwiping = false;\n var dx = e.clientX - pointerStartX;\n var dy = e.clientY - pointerStartY;\n \/* Swipe horizontal : dx doit dominer dy (pas un scroll vertical) *\/\n if (Math.abs(dx) > CFG.SWIPE_THRESH && Math.abs(dx) > Math.abs(dy)) {\n dx < 0 ? self.goTo(self.current + 1) : self.goTo(self.current - 1);\n } else {\n self._startAutoplay();\n }\n }\n\n function onPointerCancel() {\n isDragging = false; isSwiping = false;\n self._startAutoplay();\n }\n\n \/* preventDefault sur touchmove si on d\u00e9tecte un swipe horizontal en cours *\/\n function onTouchMove(e) {\n if (!isDragging) return;\n var dx = Math.abs(e.touches[0].clientX - pointerStartX);\n var dy = Math.abs(e.touches[0].clientY - pointerStartY);\n if (dx > dy) { e.preventDefault(); } \/* Emp\u00eache le scroll de page si swipe horizontal *\/\n }\n\n self.container.addEventListener('pointerdown', onPointerDown);\n self.container.addEventListener('pointerup', onPointerUp);\n self.container.addEventListener('pointercancel', onPointerCancel);\n self.container.addEventListener('touchmove', onTouchMove, { passive: false });\n self._listeners.push(\n { el: self.container, type: 'pointerdown', fn: onPointerDown },\n { el: self.container, type: 'pointerup', fn: onPointerUp },\n { el: self.container, type: 'pointercancel', fn: onPointerCancel },\n { el: self.container, type: 'touchmove', fn: onTouchMove }\n );\n\n \/* \u2500\u2500 Keyboard navigation \u2500\u2500 *\/\n function onKeyDown(e) {\n if (e.key === 'ArrowLeft') { self.goTo(self.current - 1); e.preventDefault(); }\n if (e.key === 'ArrowRight') { self.goTo(self.current + 1); e.preventDefault(); }\n }\n self.container.addEventListener('keydown', onKeyDown);\n self.container.setAttribute('tabindex', '0');\n self._listeners.push({ el: self.container, type: 'keydown', fn: onKeyDown });\n };\n\n \/* Navigation vers un index donn\u00e9 *\/\n EpSlider.prototype.goTo = function (idx) {\n var self = this;\n if (self.isAnimating) return;\n\n \/* Loop circulaire *\/\n idx = ((idx % self.count) + self.count) % self.count;\n if (idx === self.current) return;\n\n self.isAnimating = true;\n self.track.classList.add('is-animating');\n\n var prev = self.current;\n self.current = idx;\n\n \/* D\u00e9placer le track via translateX *\/\n self.track.style.transform = 'translate3d(' + (-idx * 100) + '%, 0, 0)';\n\n \/* Preload image suivante *\/\n self._preloadNext();\n\n \/* M\u00e0j ARIA slides *\/\n var slides = self.track.querySelectorAll('.ep-slide');\n slides.forEach(function (s, i) {\n s.setAttribute('aria-hidden', i !== idx ? 'true' : 'false');\n });\n\n \/* M\u00e0j dots *\/\n if (self.dotEls) {\n self.dotEls[prev].classList.remove('is-active');\n self.dotEls[prev].setAttribute('aria-selected', 'false');\n self.dotEls[idx].classList.add('is-active');\n self.dotEls[idx].setAttribute('aria-selected', 'true');\n }\n\n \/* M\u00e0j compteur *\/\n if (self.counterEl) self.counterEl.textContent = (idx + 1) + '\/' + self.count;\n\n \/* Fin de transition *\/\n var transitionDuration = 420;\n setTimeout(function () {\n self.isAnimating = false;\n self.track.classList.remove('is-animating');\n }, transitionDuration);\n\n \/* Red\u00e9marrer autoplay + progress bar *\/\n self._stopAutoplay();\n self._startAutoplay();\n };\n\n \/* Pr\u00e9chargement de l'image suivante *\/\n EpSlider.prototype._preloadNext = function () {\n var self = this;\n var nextIdx = (self.current + 1) % self.count;\n var slides = self.track.querySelectorAll('.ep-slide');\n var nextSlide = slides[nextIdx];\n if (!nextSlide) return;\n var img = nextSlide.querySelector('img');\n if (img && img.loading === 'lazy') {\n img.loading = 'eager';\n \/* Force le navigateur \u00e0 charger *\/\n }\n };\n\n \/* Autoplay *\/\n EpSlider.prototype._startAutoplay = function () {\n var self = this;\n if (self.count <= 1) return;\n \/* Respecter prefers-reduced-motion *\/\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n self._stopAutoplay();\n\n \/* Progress bar animation CSS *\/\n if (self.progressEl) {\n self.progressEl.style.animation = 'none';\n \/* Force reflow *\/\n void self.progressEl.offsetWidth;\n self.progressEl.style.animation = 'ep-progress-fill ' + CFG.AUTOPLAY_MS + 'ms linear forwards';\n }\n\n self.autoplayTimer = setTimeout(function () {\n self.goTo(self.current + 1);\n }, CFG.AUTOPLAY_MS);\n };\n\n EpSlider.prototype._stopAutoplay = function () {\n var self = this;\n clearTimeout(self.autoplayTimer);\n self.autoplayTimer = null;\n \/* Reset progress bar *\/\n if (self.progressEl) {\n self.progressEl.style.animation = 'none';\n }\n };\n\n \/* FIX-JS-04: destroy lib\u00e8re tous les listeners \u2192 z\u00e9ro memory leak *\/\n EpSlider.prototype.destroy = function () {\n var self = this;\n self._stopAutoplay();\n self._listeners.forEach(function (l) {\n l.el.removeEventListener(l.type, l.fn);\n });\n self._listeners = [];\n };\n\n \/* FIX-JS-09: fallback image centralis\u00e9 *\/\n EpSlider.prototype._addImageFallback = function (imgEl, slideEl) {\n var self = this;\n imgEl.addEventListener('error', function onErr() {\n imgEl.removeEventListener('error', onErr);\n slideEl.innerHTML = self._placeholderHTML();\n });\n };\n\n EpSlider.prototype._placeholderHTML = function () {\n return '<div class=\"ep-slide-placeholder\">'\n + '<svg width=\"110\" height=\"72\" viewBox=\"0 0 200 120\" fill=\"none\" aria-hidden=\"true\">'\n + '<ellipse cx=\"50\" cy=\"95\" rx=\"22\" ry=\"22\" stroke=\"white\" stroke-width=\"3\"\/>'\n + '<ellipse cx=\"150\" cy=\"95\" rx=\"22\" ry=\"22\" stroke=\"white\" stroke-width=\"3\"\/>'\n + '<path d=\"M28 95 L28 60 L60 30 L130 25 L175 55 L172 95\" stroke=\"white\" stroke-width=\"3\" fill=\"none\"\/>'\n + '<path d=\"M60 30 L75 60 L130 60 L130 25\" stroke=\"white\" stroke-width=\"2\" fill=\"none\"\/>'\n + '<\/svg><\/div>';\n };\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n EPREVEAL \u2014 IntersectionObserver scroll reveal\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function EpReveal() {\n var obs = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n obs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });\n this._obs = obs;\n }\n EpReveal.prototype.observe = function (elements) {\n var obs = this._obs;\n elements.forEach(function (el) { obs.observe(el); });\n };\n\n \/* Instance globale reveal *\/\n var reveal = new EpReveal();\n \/* Observer les \u00e9l\u00e9ments statiques existants *\/\n reveal.observe(Array.from(document.querySelectorAll('.reveal')));\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n EPFAQ \u2014 accordion toggle\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n document.querySelectorAll('details').forEach(function (d) {\n d.addEventListener('toggle', function () {\n var icon = d.querySelector('.faq-icon');\n if (icon) icon.textContent = d.open ? '\u2212' : '+';\n });\n });\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n EPCARDS \u2014 fetch WooCommerce + build cards + sliders\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n var grid = document.getElementById('ep-products-grid');\n if (!grid) return;\n\n \/* FIX-JS-01: AbortController pour annuler les fetches si page d\u00e9charg\u00e9e *\/\n var abortController = ('AbortController' in window) ? new AbortController() : null;\n window.addEventListener('pagehide', function () {\n if (abortController) abortController.abort();\n });\n\n \/* Fetch avec timeout *\/\n function fetchWithTimeout(url, opts, timeoutMs) {\n \/* FIX-JS-02: Timeout via race entre fetch et Promise rejet\u00e9e *\/\n var timeoutPromise = new Promise(function (_, reject) {\n setTimeout(function () { reject(new Error('Timeout after ' + timeoutMs + 'ms')); }, timeoutMs);\n });\n var fetchOpts = Object.assign({}, opts);\n if (abortController) fetchOpts.signal = abortController.signal;\n return Promise.race([fetch(url, fetchOpts), timeoutPromise]);\n }\n\n function fetchProduct(item) {\n var url = CFG.API + '?slug=' + item.slug + '&_fields=id,name,permalink,images';\n return fetchWithTimeout(url, { mode: 'cors', headers: { 'Accept': 'application\/json' } }, CFG.FETCH_TIMEOUT)\n .then(function (r) {\n if (!r.ok) throw new Error('HTTP ' + r.status);\n return r.json();\n })\n .then(function (arr) {\n if (!arr || !arr.length) throw new Error('No product for slug: ' + item.slug);\n return arr[0];\n });\n }\n\n function buildCard(data, item, idx) {\n var name = (data && data.name) ? data.name : item.label;\n var link = (data && data.permalink) ? data.permalink : 'https:\/\/app.epowermotorsmaroc.com\/product\/' + item.slug + '\/';\n\n \/* \u2500\u2500 Extraire et nettoyer les images WooCommerce \u2500\u2500 *\/\n var rawImages = (data && Array.isArray(data.images)) ? data.images : [];\n \/* Filtrer les images invalides + d\u00e9dupliquer par src *\/\n var seenSrcs = {};\n var images = rawImages\n .filter(function (img) {\n if (!img || !img.src) return false;\n \/* Exclure les placeholders WooCommerce *\/\n if (img.src.indexOf('woocommerce-placeholder') !== -1) return false;\n if (seenSrcs[img.src]) return false;\n seenSrcs[img.src] = true;\n return true;\n })\n .map(function (img) {\n return { src: img.src, alt: img.alt || name };\n });\n\n \/* Fallback : au moins une entr\u00e9e placeholder *\/\n if (images.length === 0) images = [{ src: '', alt: name }];\n\n \/* \u2500\u2500 Cr\u00e9er la card \u2500\u2500 *\/\n var card = document.createElement('article');\n card.className = 'product-card reveal'\n + (idx === 1 ? ' reveal-delay-1' : idx === 2 ? ' reveal-delay-2' : '');\n \/* FIX-SEO-04: microdata produit *\/\n card.setAttribute('itemscope', '');\n card.setAttribute('itemtype', 'https:\/\/schema.org\/Product');\n\n \/* \u2500\u2500 Slider container \u2500\u2500 *\/\n var sliderEl = document.createElement('div');\n sliderEl.className = 'ep-slider';\n card.appendChild(sliderEl);\n\n \/* \u2500\u2500 Instancier EpSlider \u2500\u2500 *\/\n var slider = new EpSlider(sliderEl, images);\n \/* Stocker la r\u00e9f\u00e9rence pour \u00e9ventuel destroy *\/\n card._epSlider = slider;\n\n \/* \u2500\u2500 Card body \u2500\u2500 *\/\n var displayName = name.replace(\/moto \u00e9lectrique\/gi, 'Moto \u00c9lectrique<br>');\n var waMsg = encodeURIComponent('Bonjour, je suis int\u00e9ress\u00e9 par la ' + item.label);\n\n var body = document.createElement('div');\n body.className = 'card-body';\n body.innerHTML =\n '<h3 class=\"card-title\" itemprop=\"name\">' + displayName + '<\/h3>'\n + '<div class=\"card-specs\">'\n + '<div class=\"spec-row\"><span class=\"spec-label\">Autonomie<\/span><span class=\"spec-value highlight\">' + CFG.SPECS.autonomie + '<\/span><\/div>'\n + '<div class=\"spec-row\"><span class=\"spec-label\">Vitesse max<\/span><span class=\"spec-value\">' + CFG.SPECS.vitesse + '<\/span><\/div>'\n + '<div class=\"spec-row\"><span class=\"spec-label\">Puissance<\/span><span class=\"spec-value\">' + CFG.SPECS.puissance + '<\/span><\/div>'\n + '<div class=\"spec-row\"><span class=\"spec-label\">Batterie<\/span><span class=\"spec-value\">' + CFG.SPECS.batterie + '<\/span><\/div>'\n + '<\/div>'\n + '<div class=\"ep-recharge-note\">Co\u00fbt de recharge : <strong>moins de 2 DH<\/strong> pour 100 km \u00b7 Charge compl\u00e8te en 6\u20138h<\/div>'\n + '<div class=\"card-ctas\">'\n + '<a href=\"' + link + '\" class=\"btn-card-detail\" target=\"_blank\" rel=\"noopener noreferrer\">'\n + '<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"M21 21l-4.35-4.35\"\/><\/svg>'\n + ' Voir les D\u00e9tails'\n + '<\/a>'\n + '<a href=\"https:\/\/wa.me\/' + CFG.WA + '?text=' + waMsg + '\" class=\"btn-whatsapp\" target=\"_blank\" rel=\"noopener noreferrer\">\u26a1 Commander via WhatsApp<\/a>'\n + '<\/div>';\n card.appendChild(body);\n\n return card;\n }\n\n \/* FIX-JS-03: allSettled garantit que toutes les promesses sont r\u00e9solues\n m\u00eame si certaines \u00e9chouent \u2014 \u00e9limine les race conditions + erreurs silencieuses *\/\n var promises = CFG.ITEMS.map(function (item) {\n return fetchProduct(item);\n });\n\n Promise.allSettled(promises).then(function (results) {\n var apiHits = results.filter(function (r) { return r.status === 'fulfilled'; }).length;\n\n grid.innerHTML = '';\n \/* FIX-A11Y: retirer aria-busy une fois le contenu charg\u00e9 *\/\n grid.setAttribute('aria-busy', 'false');\n\n results.forEach(function (result, i) {\n var data = result.status === 'fulfilled' ? result.value : null;\n var card = buildCard(data, CFG.ITEMS[i], i);\n grid.appendChild(card);\n });\n\n \/* Notice non-bloquante si API 100% down *\/\n if (apiHits === 0) {\n var notice = document.createElement('p');\n notice.style.cssText = 'grid-column:1\/-1;text-align:center;font-size:0.8rem;color:var(--text-dim);margin-bottom:8px;';\n notice.textContent = 'Donn\u00e9es produits en cours de chargement \u2014 visitez e-power.ma pour les derni\u00e8res informations.';\n grid.insertBefore(notice, grid.firstChild);\n }\n\n \/* Observer les nouvelles cards pour scroll reveal *\/\n reveal.observe(Array.from(grid.querySelectorAll('.product-card')));\n\n }).catch(function (err) {\n console.error('[E-Power] Erreur critique:', err);\n grid.setAttribute('aria-busy', 'false');\n grid.innerHTML =\n '<div class=\"ep-api-error\">'\n + '<span>Chargement indisponible<\/span>'\n + 'Visitez <a href=\"https:\/\/app.epowermotorsmaroc.com\" style=\"color:var(--yellow)\">e-power.ma<\/a> pour voir tous nos mod\u00e8les.'\n + '<\/div>';\n });\n\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Motos \u00c9lectriques au Maroc 2026 | Gamme Premium E-Power Maroc \u00b7 2026 \u00b7 Gamme Premium La Moto \u00c9lectrique Au Maroc Performance silencieuse. Design d’exception. Rechargeable chez vous \u2014 con\u00e7ue pour les routes marocaines. Explorer la Gamme \u26a1 Commander via WhatsApp 240 KMAutonomie max 2150WPuissance moteur 1 anGarantie incluse 48hLivraison Maroc Notre Gamme 2026 Motos \u00c9lectriquesE-Power […]<\/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-3802","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/app.epowermotorsmaroc.com\/ar\/wp-json\/wp\/v2\/pages\/3802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.epowermotorsmaroc.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/app.epowermotorsmaroc.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/app.epowermotorsmaroc.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.epowermotorsmaroc.com\/ar\/wp-json\/wp\/v2\/comments?post=3802"}],"version-history":[{"count":37,"href":"https:\/\/app.epowermotorsmaroc.com\/ar\/wp-json\/wp\/v2\/pages\/3802\/revisions"}],"predecessor-version":[{"id":3841,"href":"https:\/\/app.epowermotorsmaroc.com\/ar\/wp-json\/wp\/v2\/pages\/3802\/revisions\/3841"}],"wp:attachment":[{"href":"https:\/\/app.epowermotorsmaroc.com\/ar\/wp-json\/wp\/v2\/media?parent=3802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}