.mpg-wrap,.mpg-wrap *,.mpg-wrap *::before,.mpg-wrap *::after{box-sizing:border-box;margin:0;padding:0;}
.mpg-wrap{width:100%;border:2px solid #2C3E50;border-radius:18px;padding:22px 0;position:relative;overflow:hidden;background:transparent;}
.mpg-wrap::before,.mpg-wrap::after{content:"";position:absolute;top:0;height:100%;width:80px;z-index:3;pointer-events:none;}
.mpg-wrap::before{left:0;background:linear-gradient(to right,#fff 0%,transparent 100%);}
.mpg-wrap::after{right:0;background:linear-gradient(to left,#fff 0%,transparent 100%);}
.mpg-viewport{overflow:hidden;width:100%;}
.mpg-track{display:flex;align-items:center;gap:32px;padding:0 50px;will-change:transform;}
.mpg-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:130px;height:65px;}
.mpg-logo img{height:55px;width:auto;max-width:130px;object-fit:contain;mix-blend-mode:multiply;display:block;}
.mpg-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:34px;height:34px;border-radius:50%;border:1.5px solid #2C3E50;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:#2C3E50;transition:background .2s,color .2s;outline:none;padding:0;}
.mpg-btn:hover{background:#2C3E50;color:#fff;}
.mpg-btn.prev{left:8px;}
.mpg-btn.next{right:8px;}
@media(max-width:768px){.mpg-logo{width:100px;height:52px;}.mpg-logo img{height:40px;max-width:100px;}.mpg-track{gap:20px;padding:0 44px;}}
/* ============================================================
REMPLACE LES src par tes vraies URLs d'images WordPress
exemple: "https://ton-site.com/wp-content/uploads/logo-face.png"
============================================================ */
var LOGOS = [
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/logo-general-couleur-1024x675-1.png", alt: "La Cravate Solidaire" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/Reseau_E2C_France_logo_2019-1-1024x1024-1.png", alt: "e2c France" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/The_Shift_Project_Logo_small_bleu.png", alt: "The shift project" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/Logo_Konexio.png", alt: "Konexio" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/LogoStop500-×-200-px.webp", alt: "#StopIllettrisme" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/logo-ellesbougent-1024x162-1-1.png", alt: "Elles bougent" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/logo-100000-1024x420-2.png", alt: "100000 Entrepreneurs" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/tousenstage.png", alt: "Tous8 stage" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/Logo-WeTechCare-black-blue-1024x392-1.png",alt: "WeTechCare" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/3ace904e-9f38-4c8d-bd0b-da9547f85ce6-1024x300-1.png", alt: "RURA" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/Logo_JRS_France-1024x368-1.jpg", alt: "JRS" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/logo-noir-compact.fgJd7lIisd.png", alt: "WKF" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/bb0f6d54-8479-4216-af97-a941cbeb0ef0-1024x328-1.webp" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/logo100c100e_VERT_fondtransparent-1-1024x421-1.png", alt: "100 Chances 100 Emplois" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/Diversidays-Logo-2-1-1500x844-1-1024x576-1.webp", alt: "diversdays" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/apprentis-auteuil-logo.jpg", alt: "Apprentis d'Auteuil" },
{ src: "https://www.manpowergroup.fr/wp-content/uploads/2026/07/Logo_EPA_RVB-1024x440-1.png", alt: "EPA" }
];
(function () {
var track = document.getElementById('mpgTrack');
var prevBtn = document.getElementById('mpgPrev');
var nextBtn = document.getElementById('mpgNext');
var wrap = document.getElementById('mpgWrap');
/* Build items x3 for infinite loop */
var allLogos = LOGOS.concat(LOGOS).concat(LOGOS);
allLogos.forEach(function(l){
var div = document.createElement('div');
div.className = 'mpg-logo';
var img = document.createElement('img');
img.src = l.src;
img.alt = l.alt;
img.title = l.alt;
div.appendChild(img);
track.appendChild(div);
});
var GAP = 32;
var ITEM_W = 130 + GAP;
var SPEED = 35; /* px/s - augmente pour aller plus vite */
var totalW = LOGOS.length * ITEM_W;
var offset = totalW; /* start at 2nd set */
var running = true;
var last = null;
var manStep = ITEM_W * 3;
function animate(ts) {
if (!last) last = ts;
var dt = (ts - last) / 1000;
last = ts;
if (running) {
offset -= SPEED * dt;
if (offset totalW * 2) offset -= totalW;
}
track.style.transform = 'translateX(-' + offset.toFixed(2) + 'px)';
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
wrap.addEventListener('mouseenter', function(){ running = false; });
wrap.addEventListener('mouseleave', function(){ running = true; });
var tx = 0;
wrap.addEventListener('touchstart', function(e){ tx = e.touches[0].clientX; }, {passive:true});
wrap.addEventListener('touchend', function(e){
var dx = tx - e.changedTouches[0].clientX;
if (Math.abs(dx) > 40) { offset += dx > 0 ? manStep : -manStep; }
}, {passive:true});
prevBtn.addEventListener('click', function(){ offset -= manStep; });
nextBtn.addEventListener('click', function(){ offset += manStep; });
})();
