/* ===================================================== trending.css — Section Tendances À inclure dans le avec style.css ===================================================== */ /* ---- EN-TÊTE DE SECTION ---- */ .trending-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .trending-title { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 1.5px; color: var(--text); display: flex; align-items: center; gap: 10px; margin: 0; } /* ---- ONGLETS ---- */ .trending-tabs { display: flex; gap: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 50px; padding: 3px; } .tab-btn { padding: 6px 18px; border-radius: 50px; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); background: transparent; border: none; cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; } .tab-btn.active { background: var(--text); color: var(--bg); } [data-theme="light"] .tab-btn.active { background: #111; color: #fff; } /* ---- WRAPPER SCROLL ---- */ .trending-scroll-wrapper { position: relative; } /* ---- TRACK (scroll horizontal) ---- */ .trending-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px 4px 16px; /* Cache la scrollbar */ scrollbar-width: none; } .trending-track::-webkit-scrollbar { display: none; } /* ---- FLÈCHES ---- */ .trending-arrow { position: absolute; top: 50%; transform: translateY(-60%); /* Ajusté pour être au niveau des images */ background: var(--bg-card); border: 1px solid var(--border); color: var(--text); width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background 0.2s, opacity 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .trending-arrow:hover { background: var(--bg-card-hover); box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .trending-arrow.left { left: -18px; } .trending-arrow.right { right: -18px; } /* ---- CARTE ---- */ .trend-card { flex-shrink: 0; width: 150px; scroll-snap-align: start; cursor: pointer; transition: transform 0.25s ease; } .trend-card:hover { transform: translateY(-4px); } /* Image */ .trend-card-img { position: relative; width: 150px; height: 220px; border-radius: 10px; overflow: hidden; background: var(--bg-surface); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .trend-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .trend-card:hover .trend-card-img img { transform: scale(1.05); } /* Overlay badges (type + note) */ .trend-card-overlay { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; } .trend-type-badge { background: rgba(0,0,0,0.7); color: #fff; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 50px; backdrop-filter: blur(4px); } .trend-rating { background: rgba(0,0,0,0.7); color: #f5c518; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 50px; backdrop-filter: blur(4px); } /* ---- BARRES DE SON (style AlloCiné) ---- */ .trend-soundbars { position: absolute; bottom: 0; left: 0; right: 0; height: 28px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 6px 4px; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); opacity: 0; transition: opacity 0.3s; } .trend-card:hover .trend-soundbars { opacity: 1; } .soundbar { display: block; width: 3px; border-radius: 2px; background: #1db954; /* Vert style Spotify/AlloCiné */ animation: soundwave 0.8s ease-in-out infinite alternate; transform-origin: bottom; } /* Chaque barre a une hauteur et un délai différent */ .soundbar:nth-child(1) { height: 8px; animation-delay: 0.0s; } .soundbar:nth-child(2) { height: 16px; animation-delay: 0.15s; } .soundbar:nth-child(3) { height: 12px; animation-delay: 0.05s; } .soundbar:nth-child(4) { height: 20px; animation-delay: 0.25s; } .soundbar:nth-child(5) { height: 10px; animation-delay: 0.1s; } .soundbar:nth-child(6) { height: 14px; animation-delay: 0.2s; } @keyframes soundwave { from { transform: scaleY(0.4); opacity: 0.7; } to { transform: scaleY(1.0); opacity: 1; } } /* ---- INFOS SOUS LA CARTE ---- */ .trend-card-info { padding: 10px 2px 4px; } .trend-card-title { font-size: 0.85rem; font-weight: 600; color: var(--text); line-height: 1.3; /* Tronque à 2 lignes */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 3px; } .trend-card-date { font-size: 0.72rem; color: var(--text-muted); } /* ---- ANIMATION D'ENTRÉE DES CARTES ---- */ .trend-card { animation: fadeSlideIn 0.35s ease both; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ---- SQUELETTE DE CHARGEMENT ---- */ .trending-skeleton { display: flex; gap: 16px; padding: 8px 4px; } .trend-card-skeleton { flex-shrink: 0; width: 150px; height: 220px; border-radius: 10px; background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-card) 50%, var(--bg-surface) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---- RESPONSIVE ---- */ @media (max-width: 600px) { .trend-card { width: 120px; } .trend-card-img { width: 120px; height: 178px; } .trending-arrow { display: none; } }