.footer { .rf-label { display: none; } .rf-star { font-size: 0.8rem; } .rating-filter-btn { padding: 0.4rem 0.65rem; } } /* ══════════════════════════════════════════════════════════════ AMÉLIORATIONS UI PUBLIQUE (Recherche, Pagination, Cartes) ═══════════════════════════════════════════════════════════════ */ /* Barre de recherche publique */ .pub-filters { display: flex; justify-content: center; margin-bottom: 2.5rem; } .pub-search-box { position: relative; width: 100%; max-width: 480px; } .pub-search-box input { width: 100%; padding: 0.85rem 1.2rem 0.85rem 3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 30px; color: var(--text); font-family: inherit; font-size: 0.95rem; transition: all 0.25s; } .pub-search-box input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); background: var(--surface-card); } .pub-search-box input::placeholder { color: var(--muted); } .pub-search-box i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.2rem; } /* Pagination publique */ .pub-pagination { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 3rem; padding: 1rem 0; flex-wrap: wrap; } .pub-pagination button { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); min-width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s; font-weight: 500; font-size: 0.9rem; font-family: inherit; } .pub-pagination button:hover:not(:disabled):not(.active) { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } .pub-pagination button.active { background: var(--gold); color: var(--background); border-color: var(--gold); font-weight: 600; box-shadow: 0 4px 12px var(--gold-glow); } .pub-pagination button:disabled { opacity: 0.3; cursor: not-allowed; } .pub-pagination-info { color: var(--muted); font-size: 0.85rem; margin: 0 1rem; font-weight: 500; letter-spacing: 0.03em; } /* Amélioration des cartes */ .card { position: relative; } .card-streaming-badge { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); color: var(--gold); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 20px; border: 1px solid rgba(201, 168, 76, 0.3); z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .card-physical-badge { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); color: var(--muted); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); z-index: 2; } .card-rating-badge { display: inline-block; background: var(--surface); border: 1px solid var(--border); color: var(--gold); font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 5px; margin-left: 0.4rem; vertical-align: middle; } .card-director { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; font-style: italic; } @media (max-width: 720px) { .pub-search-box { max-width: 100%; } .pub-pagination button { min-width: 36px; height: 36px; font-size: 0.85rem; } } /* ══════════════════════════════════════════════════════════════ FILTRE PAR PLATEFORME DE STREAMING ═══════════════════════════════════════════════════════════════ */ .streaming-filter-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .streaming-filter-btn { background: var(--surface-card); border: 1px solid var(--border); border-radius: 20px; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); font-family: inherit; } .streaming-filter-btn:hover { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); } .streaming-filter-btn.active { border-color: var(--gold); background: var(--gold); color: var(--background); font-weight: 600; box-shadow: 0 0 12px var(--gold-glow); } @media (max-width: 720px) { .streaming-filter-bar { gap: 0.5rem; padding: 0.8rem; } .streaming-filter-btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; } }