.container { font-family: Arial, sans-serif; background: #ffffff; width: 650px; margin: 30px auto; padding: 20px; border-radius: 8px; border: 1px solid #ddd; position: relative; } .slider-wrapper { position: relative !important; width: 100%; height: 400px; overflow: hidden; } .slider { display: flex; transition: transform 0.4s ease; height: 100%; } .slider img { width: 100%; height: 400px; object-fit: contain; flex-shrink: 0; cursor: pointer; } /* FLÈCHES FORCÉES */ .arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 50px !important; height: 50px !important; background: #2563eb !important; color: white !important; font-size: 28px !important; text-align: center !important; line-height: 50px !important; border-radius: 50% !important; cursor: pointer !important; z-index: 999999 !important; display: block !important; } .left { left: 10px !important; } .right { right: 10px !important; } /* LIENS */ .links { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; } .links a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 12px; border-radius: 6px; color: white; font-weight: bold; transition: 0.3s; } .link-blue { background: #2563eb; } .link-blue:hover { background: #1d4ed8; } .link-red { background: #dc2626; } .link-red:hover { background: #b91c1c; } .links img { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; } /* LIGHTBOX */ .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 999999; } .lightbox img { max-width: 90%; max-height: 90%; } .lightbox.active { display: flex; } document.addEventListener("DOMContentLoaded", function() { var slider = document.getElementById('slider'); var images = slider.getElementsByTagName("img"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var lightbox = document.getElementById("lightbox"); var lightboxImg = document.getElementById("lightbox-img"); var index = 0; var total = images.length; function showSlide() { slider.style.transform = "translateX(-" + (index * 100) + "%)"; } next.onclick = function() { index = (index + 1) % total; showSlide(); }; prev.onclick = function() { index = (index - 1 + total) % total; showSlide(); }; for (var i = 0; i < images.length; i++) { images[i].onclick = function() { lightboxImg.src = this.src; lightbox.classList.add("active"); }; } lightbox.onclick = function() { lightbox.classList.remove("active"); }; });