diff --git a/css/public.css b/css/public.css index 8653ffa..72de23c 100644 --- a/css/public.css +++ b/css/public.css @@ -601,4 +601,158 @@ 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; } } \ No newline at end of file