Add accordion + active-filter chip bar for mobile repertoire

- repertoire-index.php: wrap each filter column in rep-accordion with toggle
  button, chevron, badge (active filter count); add rep-chip-bar with
  removable active-filter chips above the columns
- repertoire.css: mobile (≤640px) accordion mode — columns collapse to
  single-open accordion sections with 48px touch targets; chip bar becomes
  sticky; desktop/tablet layout unchanged via display:none on toggle elements
- repertoire.php: JS for single-accordion-open behavior on mobile, HTMX
  re-init after swap, resize-breakpoint cleanup
- docs/repertoire-mobile-propositions.md: analysis + 4 architecture proposals

app/templates/public/repertoire.php

@@ -44,3 +44,81 @@
     }, true);
 }());
 </script>
+
+<script>
+// Mobile accordion: single-open behavior + HTMX re-init
+(function () {
+    var INDEX_SEL = '#repertoire-index';
+    var ACCORDION_SEL = '.rep-accordion';
+    var TOGGLE_SEL = '.rep-accordion__toggle';
+    var PANEL_SEL = '.rep-accordion__panel';
+
+    function isMobile() {
+        return window.matchMedia('(max-width: 1025px)').matches;
+    }
+
+    function initAccordions(root) {
+        if (!isMobile()) return;
+        var toggles = root.querySelectorAll(TOGGLE_SEL);
+        toggles.forEach(function (btn) {
+            // Skip students column — always visible, not an accordion
+            if (btn.closest('[data-col="students"]')) return;
+            if (btn._accordionBound) return;
+            btn._accordionBound = true;
+            btn.addEventListener('click', function () {
+                var section = btn.closest(ACCORDION_SEL);
+                var panel = section.querySelector(PANEL_SEL);
+                var isOpen = btn.getAttribute('aria-expanded') === 'true';
+
+                // Close all others (except students)
+                root.querySelectorAll(ACCORDION_SEL).forEach(function (s) {
+                    if (s.dataset.col === 'students') return;
+                    var p = s.querySelector(PANEL_SEL);
+                    var t = s.querySelector(TOGGLE_SEL);
+                    if (s !== section) {
+                        t.setAttribute('aria-expanded', 'false');
+                        p.classList.remove('is-open');
+                    }
+                });
+
+                // Toggle this one
+                var nowOpen = !isOpen;
+                btn.setAttribute('aria-expanded', nowOpen ? 'true' : 'false');
+                if (nowOpen) {
+                    panel.classList.add('is-open');
+                } else {
+                    panel.classList.remove('is-open');
+                }
+            });
+        });
+    }
+
+    // Initial bind
+    initAccordions(document);
+
+    // Re-bind after HTMX swaps
+    document.body.addEventListener('htmx:afterSwap', function (e) {
+        if (e.detail.target && e.detail.target.matches && e.detail.target.matches(INDEX_SEL)) {
+            initAccordions(e.detail.target);
+        }
+    });
+
+    // Re-bind on resize crossing the breakpoint
+    var wasMobile = isMobile();
+    window.addEventListener('resize', function () {
+        var nowMobile = isMobile();
+        if (nowMobile !== wasMobile) {
+            wasMobile = nowMobile;
+            // When switching to desktop, close all panels
+            if (!nowMobile) {
+                document.querySelectorAll(INDEX_SEL + ' ' + TOGGLE_SEL).forEach(function (btn) {
+                    btn.setAttribute('aria-expanded', 'false');
+                });
+                document.querySelectorAll(INDEX_SEL + ' ' + PANEL_SEL).forEach(function (p) {
+                    p.classList.remove('is-open');
+                });
+            }
+        }
+    });
+}());
+</script>