/* CONTENEUR */ .container { font-family: 'Arial', sans-serif; background: #fefefe; width: 650px; margin: 40px auto; padding: 30px; border-radius: 16px; border: 1px solid #ddd; box-shadow: 0 12px 28px rgba(0,0,0,0.15); } /* TITRE DU JOUR */ .container h2 { text-align: center; color: #1d4ed8; font-size: 24px; margin-bottom: 30px; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } /* LIENS COMME CARDS */ .links { display: flex; flex-direction: column; gap: 20px; } .links a { display: flex; align-items: center; gap: 16px; text-decoration: none; padding: 18px 24px; border-radius: 16px; font-weight: 700; font-size: 16px; color: white; transition: all 0.4s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.12); /* Dégradé initial identique pour tous les liens */ background: linear-gradient(135deg, #4f46e5, #6366f1); } .links a:hover { /* Dégradé différent au survol */ background: linear-gradient(135deg, #6366f1, #818cf8); transform: translateY(-3px) scale(1.02); } /* IMAGES DANS LES LIENS */ .links img { width: 70px; height: 70px; border-radius: 14px; object-fit: cover; border: 3px solid rgba(255,255,255,0.85); transition: transform 0.3s ease, box-shadow 0.3s ease; } .links a:hover img { transform: scale(1.2); box-shadow: 0 10px 25px rgba(0,0,0,0.3); } /* LIGHTBOX */ .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; z-index: 9999; animation: fadeIn 0.3s ease; } .lightbox img { max-width: 95%; max-height: 95%; border-radius: 14px; box-shadow: 0 12px 35px rgba(0,0,0,0.45); transition: transform 0.3s ease; } .lightbox.active { display: flex; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } /* RESPONSIVE */ @media (max-width: 768px) { .container { width: 95%; padding: 20px; } .links img { width: 55px; height: 55px; } .links a { font-size: 15px; padding: 14px 16px; } } document.addEventListener("DOMContentLoaded", function() { var links = document.querySelectorAll('.links a img'); var lightbox = document.getElementById("lightbox"); var lightboxImg = document.getElementById("lightbox-img"); links.forEach(function(img) { img.addEventListener('click', function(e) { e.preventDefault(); lightboxImg.src = this.src; lightbox.classList.add('active'); }); }); lightbox.addEventListener('click', function() { lightbox.classList.remove('active'); }); });