diff --git a/css/public.css b/css/public.css index b1618bc..545246e 100644 --- a/css/public.css +++ b/css/public.css @@ -892,9 +892,75 @@ footer { display: block; } -/* ══════════════════════════════════════════════════════════════ - RESPONSIVE MOBILE - ═══════════════════════════════════════════════════════════════ */ +/* Filtre support physique */ +.physical-filter-box { + display: flex; + justify-content: center; + margin: 1.5rem 0; +} + +.physical-filter-label { + display: flex; + align-items: center; + gap: 0.6rem; + cursor: pointer; + padding: 0.6rem 1.2rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 30px; + transition: all 0.25s; + user-select: none; +} + +.physical-filter-label:hover { + border-color: var(--gold); + background: var(--gold-dim); +} + +.physical-filter-label input[type="checkbox"] { + display: none; +} + +.checkmark { + width: 20px; + height: 20px; + border: 2px solid var(--muted); + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + position: relative; +} + +.physical-filter-label input[type="checkbox"]:checked + .checkmark { + background: var(--gold); + border-color: var(--gold); +} + +.physical-filter-label input[type="checkbox"]:checked + .checkmark::after { + content: '✓'; + color: var(--background); + font-size: 12px; + font-weight: 900; +} + +.filter-text { + color: var(--text-secondary); + font-size: 0.9rem; + font-weight: 500; +} + +.physical-filter-label:hover .filter-text { + color: var(--gold); +} + +/* Version admin */ +.physical-filter-admin { + display: flex; + align-items: center; +} + /* ══════════════════════════════════════════════════════════════ RESPONSIVE MOBILE (index.html) @@ -1123,6 +1189,16 @@ footer { .empty-state i { font-size: 2.5rem; } + + .physical-filter-box { + margin: 1rem 0; + } + .physical-filter-label { + padding: 0.5rem 1rem; + } + .filter-text { + font-size: 0.85rem; + } } /* Très petits écrans */