/* =================================================================== KLOE BURO - vanilla JS Sprite injection · reveal-on-scroll · tabs · accordion · qty steppers · checkout stepper · color swatches · forms · filters Every behaviour is feature-detected, so each page only runs what it has. =================================================================== */ (function () { 'use strict'; /* ---------- 1. SVG icon sprite ---------- */ var ICONS = { search:' ', cart:' ', user:' ', arrow:' ', chevron:'', chevDown:'', check:'', plus:' ', minus:'', close:' ', phone:'', mail:' ', pin:' ', clock:' ', truck:' ', shield:' ', spark:' ', headset:'', drop:'', cylinder:' ', wrench:'', printer:' ', cog:' ', plug:' ', download:' ', star:'', box:' ', doc:' ', chat:'', layers:' ', refresh:' ', globe:' ', filter:'' }; // Inline every with the real // SVG paths from ICONS - no external library, no sprite, no cross-reference. // Robust when the page is embedded in another system (base tag, shadow DOM, etc.). function inlineIcons(scope) { if (!scope || !scope.querySelectorAll) return; var uses = scope.querySelectorAll('use'); for (var i = 0; i < uses.length; i++) { var u = uses[i]; var href = u.getAttribute('href') || u.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || ''; var m = href.match(/#i-(.+)$/); var svg = u.parentNode; if (m && svg && svg.tagName && svg.tagName.toLowerCase() === 'svg' && ICONS[m[1]]) { if (!svg.getAttribute('viewBox')) svg.setAttribute('viewBox', '0 0 24 24'); svg.innerHTML = ICONS[m[1]]; } } } // Catch icons added to the DOM after load (dynamic cards, checkout labels, etc.) function observeIcons() { if (!('MutationObserver' in window)) return; new MutationObserver(function (muts) { for (var i = 0; i < muts.length; i++) { var added = muts[i].addedNodes; for (var j = 0; j < added.length; j++) { var n = added[j]; if (n.nodeType !== 1) continue; inlineIcons(n.tagName === 'USE' ? (n.parentNode || n) : n); } } }).observe(document.body, { childList: true, subtree: true }); } /* Brand mark SVG string */ window.KB_MARK = function (size, spin) { size = size || 34; return ''; }; /* ---------- 2. Reveal on scroll ---------- */ function initReveal() { var els = [].slice.call(document.querySelectorAll('[data-reveal]')); if (!els.length) return; function show(el) { var d = parseInt(el.getAttribute('data-delay') || '0', 10); setTimeout(function () { el.setAttribute('data-in', ''); }, d); } if (!('IntersectionObserver' in window)) { els.forEach(show); return; } var io = new IntersectionObserver(function (ents) { ents.forEach(function (e) { if (e.isIntersecting) { show(e.target); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -5% 0px' }); els.forEach(function (el) { io.observe(el); }); // Safety net: reveal anything still hidden after load (covers odd iframe cases) window.addEventListener('load', function () { setTimeout(function () { els.forEach(function (el) { var r = el.getBoundingClientRect(); if (r.top < innerHeight && r.bottom > 0) show(el); }); }, 400); }); } /* ---------- 3. Tabs ---------- */ function initTabs() { document.querySelectorAll('[data-tabs]').forEach(function (group) { var tabs = group.querySelectorAll('[data-tab]'); tabs.forEach(function (tab) { tab.addEventListener('click', function () { var id = tab.getAttribute('data-tab'); tabs.forEach(function (t) { t.toggleAttribute('data-active', t === tab); }); group.querySelectorAll('[data-panel]').forEach(function (p) { p.toggleAttribute('data-active', p.getAttribute('data-panel') === id); }); }); }); }); } /* ---------- 4. Accordion (single-open per group) ---------- */ function initAccordion() { document.querySelectorAll('[data-accordion]').forEach(function (group) { var items = group.querySelectorAll('details'); items.forEach(function (d) { d.addEventListener('toggle', function () { if (d.open) items.forEach(function (o) { if (o !== d) o.open = false; }); }); }); }); } /* ---------- 5. Qty steppers ---------- */ function initQty() { document.querySelectorAll('[data-qty]').forEach(function (q) { var val = q.querySelector('.val'); var dec = q.querySelector('[data-dec]'); var inc = q.querySelector('[data-inc]'); var min = parseInt(q.getAttribute('data-min') || '1', 10); function set(n) { val.textContent = Math.max(min, n); q.dispatchEvent(new CustomEvent('qtychange', { detail: +val.textContent })); } dec && dec.addEventListener('click', function () { set(+val.textContent - 1); }); inc && inc.addEventListener('click', function () { set(+val.textContent + 1); }); }); } /* ---------- 6. Color swatch family ---------- */ function initSwatch() { document.querySelectorAll('[data-swatches]').forEach(function (group) { var btns = group.querySelectorAll('[data-swatch]'); btns.forEach(function (b) { b.addEventListener('click', function () { btns.forEach(function (x) { x.toggleAttribute('data-on', x === b); }); }); }); }); } /* ---------- 7. Checkout stepper ---------- */ function initCheckout() { var root = document.querySelector('[data-checkout]'); if (!root) return; var steps = root.querySelectorAll('[data-cstep]'); var lines = root.querySelectorAll('[data-stepline]'); var panels = root.querySelectorAll('[data-cpanel]'); var cur = 0; function render() { steps.forEach(function (s, i) { s.toggleAttribute('data-active', i === cur); s.toggleAttribute('data-done', i < cur); }); lines.forEach(function (l, i) { l.toggleAttribute('data-done', i < cur); }); panels.forEach(function (p, i) { p.style.display = i === cur ? '' : 'none'; }); window.scrollTo({ top: 0, behavior: 'smooth' }); } root.addEventListener('click', function (e) { var next = e.target.closest('[data-next]'); var prev = e.target.closest('[data-prev]'); var jump = e.target.closest('[data-cstep]'); if (next) { cur = Math.min(panels.length - 1, cur + 1); render(); } else if (prev) { cur = Math.max(0, cur - 1); render(); } else if (jump) { var i = [].indexOf.call(steps, jump); if (i < cur) { cur = i; render(); } } }); render(); } /* ---------- 8. Generic "fake submit -> success" forms ---------- */ function initForms() { document.querySelectorAll('[data-success]').forEach(function (form) { var ok = document.querySelector(form.getAttribute('data-success')); form.addEventListener('submit', function (e) { e.preventDefault(); form.style.display = 'none'; if (ok) { ok.hidden = false; ok.scrollIntoView({ block: 'center', behavior: 'smooth' }); } }); var reset = ok && ok.querySelector('[data-reset]'); reset && reset.addEventListener('click', function () { ok.hidden = true; form.style.display = ''; }); }); } /* ---------- 9. Login -> dashboard toggle (compte) ---------- */ function initAccount() { var login = document.querySelector('[data-loginview]'); var dash = document.querySelector('[data-dashview]'); if (!login || !dash) return; document.querySelectorAll('[data-dologin]').forEach(function (f) { f.addEventListener('submit', function (e) { e.preventDefault(); login.hidden = true; dash.hidden = false; window.scrollTo(0, 0); }); }); document.querySelectorAll('[data-logout]').forEach(function (b) { b.addEventListener('click', function () { dash.hidden = true; login.hidden = false; window.scrollTo(0, 0); }); }); // auth mode switch (login / register) var modeBtns = login.querySelectorAll('[data-mode]'); modeBtns.forEach(function (b) { b.addEventListener('click', function () { modeBtns.forEach(function (x) { x.toggleAttribute('data-active', x === b); }); var reg = b.getAttribute('data-mode') === 'register'; login.querySelectorAll('[data-regonly]').forEach(function (el) { el.hidden = !reg; }); login.querySelectorAll('[data-loginonly]').forEach(function (el) { el.hidden = reg; }); var t = login.querySelector('[data-authtitle]'); var s = login.querySelector('[data-authsub]'); var sub = login.querySelector('[data-authbtn]'); if (t) t.textContent = reg ? 'Devenir partenaire' : 'Espace partenaire'; if (s) s.textContent = reg ? 'Réservé aux professionnels. Validation sous 24h ouvrées.' : 'Accédez à vos tarifs négociés, vos commandes et votre encours.'; if (sub) sub.textContent = reg ? 'Créer mon compte pro' : 'Se connecter'; }); }); } /* ---------- 10. News filter ---------- */ function initNewsFilter() { var root = document.querySelector('[data-newsfilter]'); if (!root) return; var pills = root.querySelectorAll('[data-tag]'); var cards = document.querySelectorAll('[data-newsitem]'); pills.forEach(function (p) { p.addEventListener('click', function () { var tag = p.getAttribute('data-tag'); pills.forEach(function (x) { x.toggleAttribute('data-active', x === p); }); cards.forEach(function (c) { c.style.display = (tag === 'all' || c.getAttribute('data-newsitem') === tag) ? '' : 'none'; }); }); }); } /* ---------- boot ---------- */ function boot() { inlineIcons(document); observeIcons(); document.querySelectorAll('[data-mark]').forEach(function (el) { el.innerHTML = window.KB_MARK(+el.getAttribute('data-mark') || 34, el.hasAttribute('data-spin')); }); initReveal(); initTabs(); initAccordion(); initQty(); initSwatch(); initCheckout(); initForms(); initAccount(); initNewsFilter(); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot); else boot(); })(); /* ================================================================= Script spécifique à la page : actualites.html ================================================================= */ var NEWS = [ { tag:'Formation', date:'15 mai 2026', title:'Atelier technique : maintenance TASKalfa niveau 2', excerpt:"Une journée d'immersion avec nos formateurs certifiés pour maîtriser le dépannage et l'entretien des multifonctions couleur.", icon:'spark', cta:"S'inscrire", img:'/files/2026/06/19/TASKalfa-MA3500ci-3.png' }, { tag:'Solutions', date:'02 avr. 2026', title:"Lexmark renforce sa politique d'impression sécurisée", excerpt:'Nouvelles fonctions de chiffrement et d\'authentification embarquées sur les séries CS et CX, déployables en marque blanche.', icon:'doc', img:'/files/2026/06/19/XC9645-3.png' }, { tag:'Webinar', date:'06 juin 2026', title:'Webinar CBS Solutions : dématérialisation des factures', excerpt:"Comment accompagner vos clients sur la gestion documentaire et répondre à l'obligation de facturation électronique 2026.", icon:'spark', cta:'Réserver', img:'/files/2026/06/19/cbs-solutions-1.png' }, { tag:'Services', date:'19 mars 2026', title:'Euro Maintenance : +30 % d\'interventions sous 4h en 2025', excerpt:'Notre réseau national de maintenance en marque blanche poursuit son maillage du territoire pour réduire les temps d\'arrêt.', icon:'doc', img:'/files/2026/06/19/euromaintenance-kloeburo.png' }, { tag:'Formation', date:'24 juin 2026', title:'Certification revendeur Kyocera 2026', excerpt:'Le parcours complet pour devenir partenaire certifié et accéder aux conditions commerciales privilégiées.', icon:'spark', cta:"S'inscrire", img:'/files/2026/06/19/ECOSYS-MA4000cifx-3.png' }, { tag:'Produits', date:'28 avr. 2026', title:'Kyocera dévoile la série ECOSYS PA4500x', excerpt:'Une gamme A4 monochrome pensée pour la productivité des PME, avec un coût à la page maîtrisé.', icon:'doc', img:'/files/2026/06/19/ECOSYS-PA4500x-3.png' } ]; var TONE = { Formation:'bg-[#F57215]/10 text-[#bb4309]', Webinar:'bg-[#ED0357]/10 text-[#ED0357]', Produits:'bg-[#111114] text-white', Solutions:'bg-[#F57215]/10 text-[#bb4309]', Services:'bg-[#F57215]/10 text-[#bb4309]' }; var PH = 'flex items-center justify-center bg-[#faf8f5] bg-[repeating-linear-gradient(135deg,rgba(17,17,20,.05)_0_10px,rgba(17,17,20,0)_10px_20px)]'; var PHTAG = 'absolute bottom-2 right-2.5 text-[.6rem] uppercase tracking-[.06em] text-[#111114]/30 font-mono'; function ncard(n){ var foot = n.cta ? '' : 'Lire la suite '; var media = n.img ? '

' : '

'; return '

'+ '

'+media+ '

'+n.tag+'

'+ '

'+n.date+'

'+ '

'+n.title+'

'+n.excerpt+'

'+foot+'

'; } document.getElementById('newsgrid').innerHTML = NEWS.map(ncard).join('');

Actualités & formations.

Kyocera dévoile la nouvelle série ECOSYS PA4500x

Recevez nos actus & sessions de formation.