/* ===== COMPOSANT LIENS (extrait de style.css) ===== */
.liens-section {
    padding: 20px 0;
    background: var(--background-primary);
    position: relative;
}

.liens-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    color: var(--text-primary);
}

.liens-header { text-align: center; margin-bottom: 50px; }

/* Liens Sociaux */
.social-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 50px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.social-link-card { background: var(--link-bg, var(--primary-color)); border-radius: 15px; padding: 20px; display: flex; align-items: center; gap: 20px; text-decoration: none; color: white; transition: all 0.3s ease; border: 2px solid transparent; position: relative; overflow: hidden; }
.social-link-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s ease; }
.social-link-card:hover::before { left: 100%; }
.social-link-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.2); }
.social-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.social-icon svg { width: 32px; height: 32px; color: white; }
.social-icon .icon-text { font-size: 1.2rem; font-weight: 700; color: white; }
.social-name { font-size: 1.5rem; font-weight: 600; flex-grow: 1; }

/* Bannières */
.banners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-top: 50px; }
.banner-item { position: relative; border-radius: 20px; overflow: hidden; background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: all 0.3s ease; }
.banner-item:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); }
.banner-link { display: block; text-decoration: none; }
.banner-image { width: 100%; height: auto; object-fit: contain; transition: all 0.3s ease; display: block; }
.banner-item:hover .banner-image { transform: scale(1.05); }
.banner-title { padding: 20px; font-size: 1.2rem; font-weight: 600; color: var(--text-primary); text-align: center; }

/* Responsive pour les liens - utilise les classes standard */
@media (max-width: 768px) {
    .social-links-grid { grid-template-columns: 1fr; gap: 15px; }
    .social-link-card { padding: 15px; gap: 15px; }
    .social-icon { width: 50px; height: 50px; }
    .social-icon svg { width: 24px; height: 24px; }
    .social-name { font-size: 1.2rem; }
    .banners-grid { grid-template-columns: 1fr; gap: 20px; }
}