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

TODO.md

@@ -1,9 +1,11 @@
 # TODO
 
-> Last updated: 2026-06-21
+> Last updated: 2026-06-22
-> Context: Migrate all <img>-based icons to inline SVG via PHP helper so CSS color cascade works
+> Context: Add mobile-responsive accordion + chip bar to repertoire filter index (column headings restored)
 
 ## Pending
+- [ ] #rep-student-touch Replace hover student popover with tap-to-open drawer for mobile `(repertoire.php, repertoire.css)`
+- [ ] #rep-polish Polish: scroll-position memory on HTMX swap, animation tuning `(repertoire.css)`
 - [ ] #icon-color-verify Verify icon colors render correctly across all pages (header, admin tables, forms, dialogs, cleanup modal)
 
 ## Completed

app/public/assets/css/repertoire.css

@@ -16,7 +16,7 @@
     display: grid;
     grid-template-columns:
         minmax(3rem, 0.45fr)
-        minmax(12rem, 1fr)
+        minmax(16rem, 1.2fr)
         minmax(9rem, 1fr)
         minmax(7rem, 1fr)
         minmax(8rem, 1fr)
@@ -29,45 +29,92 @@
     height: 100%;
 }
 
-@media (max-width: 1024px) {
+/* ---- Active filter chip bar ---- */
-    .repertoire-index {
+.rep-chip-bar {
-        grid-template-columns: 1fr 1fr 1fr;
+    display: none;
-        padding: 0;
-        grid-template-rows: auto auto 1fr;
-        min-height: auto;
-    }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 1025px) {
-    .repertoire-index {
+    .rep-chip-bar {
-        grid-template-columns: 1fr;
-        padding: 0;
-        grid-template-rows: none;
-        min-height: auto;
-    }
-
-    /* On single column, each section is a self-contained block again */
-    .repertoire-col {
         display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
-        overflow: hidden;
+        align-items: center;
-        min-height: 12rem;
+        gap: var(--space-2xs);
-        border-bottom: 1px solid var(--border-primary);
+        padding: var(--space-2xs) var(--space-s);
+        border-bottom: 1px solid var(--border-secondary);
+        margin: 0;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        background: var(--bg-primary);
+    }
 }
 
-    .repertoire-col:last-child {
+.rep-chip-bar__label {
-        border-bottom: none;
+    font-family: var(--font-display);
+    font-size: var(--step--2);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    margin-right: var(--space-3xs);
+    white-space: nowrap;
 }
 
-    .repertoire-col > h2 {
+.rep-chip {
-        grid-row: unset;
+    display: inline-flex;
-        align-self: unset;
+    align-items: center;
+    gap: var(--space-3xs);
+    padding: var(--space-3xs) var(--space-2xs);
+    background: var(--accent-muted);
+    border: 1px solid var(--accent-primary);
+    border-radius: 99px;
+    font-family: var(--font-body);
+    font-size: var(--step--2);
+    color: var(--accent-primary);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.15s, color 0.15s;
 }
 
-    .repertoire-col > ul {
+.rep-chip:hover {
-        grid-row: unset;
+    background: var(--accent-primary);
-        flex: 1;
+    color: var(--accent-foreground);
 }
+
+.rep-chip__dim {
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.75em;
+    color: var(--accent-secondary);
+}
+
+.rep-chip:hover .rep-chip__dim {
+    color: inherit;
+    opacity: 0.8;
+}
+
+.rep-chip__remove {
+    font-size: 1.1em;
+    line-height: 1;
+    font-weight: 600;
+}
+
+/* ---- Accordion: visible only on mobile (≤ 640px) ---- */
+
+/* Desktop: heading-text visible, toggle hidden */
+.rep-accordion__heading-text {
+    /* visible — inherits the h2 styling above */
+}
+
+.rep-accordion__toggle,
+.rep-accordion__chevron,
+.rep-accordion__badge {
+    display: none;
+}
+
+.rep-accordion__panel {
+    display: contents;
 }
 
 /* Each section becomes transparent to the grid so h2+ul sit in the 2-row layout */
@@ -79,33 +126,215 @@
     grid-row: 1;
     font-family: var(--font-display);
     font-size: var(--step--1);
-    letter-spacing: 0.12em;
+    letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--text-primary);
     font-weight: 398;
-    line-height: 23px;
+    line-height: 1.3;
     margin: 0;
     padding: var(--space-xs) 0 var(--space-3xs) 0;
     border-bottom: 1px solid var(--text-primary);
     align-self: end;
-    hyphens: manual;
+    hyphens: auto;
     word-break: normal;
-    overflow-wrap: normal;
+    overflow-wrap: break-word;
 }
 
 .repertoire-col > ul {
     grid-row: 2;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: var(--space-2xs) 0 var(--space-l) 0;
+    padding-top: var(--space-2xs);
+    padding-bottom: var(--space-l);
+    padding-left: 0;
+    padding-right: 0;
 }
 
 /* Strip list chrome inside repertoire columns */
 .repertoire-col ul {
     list-style: none;
     margin: 0;
+    padding: 0;
 }
 
+/* ---- Responsive (≤ 1025px): accordion mode, chip bar, students as results ---- */
+@media (max-width: 1025px) {
+    .repertoire-index {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        height: 100%;
+        overflow-y: hidden;
+        gap: 0;
+        margin: 0;
+    }
+
+    /* Each column becomes a block-level accordion section */
+    .repertoire-col {
+        display: block;
+        border-bottom: 1px solid var(--text-primary);
+    }
+
+    .repertoire-col[data-col="students"] {
+        border-bottom: none;
+    }
+
+    /* Flex order: years/ap/or/fi first, then keywords, students last */
+    .repertoire-col[data-col="years"]    { order: 0; }
+    .repertoire-col[data-col="ap"]       { order: 1; }
+    .repertoire-col[data-col="or"]       { order: 2; }
+    .repertoire-col[data-col="fi"]       { order: 3; }
+    .repertoire-col[data-col="kw"]       { order: 4; }
+    .repertoire-col[data-col="students"]  { order: 5; }
+
+    /* Students column: not an accordion — open results list below filters */
+    .repertoire-col[data-col="students"] {
+        border-bottom: none;
+        border-top: none;
+        margin-top: 0;
+        padding-top: 0;
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .repertoire-col[data-col="students"] .rep-accordion__toggle {
+        display: none;
+    }
+
+    .repertoire-col[data-col="students"] .rep-accordion__heading-text {
+        display: none;
+    }
+
+    .repertoire-col[data-col="students"] .rep-accordion__panel {
+        display: block;
+        max-height: none;
+        overflow-y: auto;
+        flex: 1;
+    }
+
+    /* Hide the plain h2 — the toggle button replaces it */
+    .repertoire-col > h2 {
+        display: block;
+        grid-row: unset;
+        align-self: unset;
+        border-bottom: none;
+        padding: 0;
+        margin: 0;
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    /* Hide heading text on mobile (toggle button replaces it) */
+    .rep-accordion__heading-text {
+        display: none;
+    }
+
+    /* Accordion toggle: full-width touch target */
+    .rep-accordion__toggle {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        min-height: 48px;
+        padding: var(--space-xs) var(--space-s);
+        background: none;
+        border: none;
+        font-family: var(--font-display);
+        font-size: var(--step--2);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-primary);
+        font-weight: 398;
+        text-align: left;
+        cursor: pointer;
+    }
+
+    .rep-accordion__toggle:active {
+        background: var(--bg-secondary);
+    }
+
+    /* Badge: active filter count */
+    .rep-accordion__badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 1.4em;
+        height: 1.4em;
+        padding: 0 0.35em;
+        margin-left: var(--space-2xs);
+        background: var(--accent-primary);
+        color: var(--accent-foreground);
+        border-radius: 99px;
+        font-family: var(--font-body);
+        font-size: var(--step--2);
+        font-weight: 500;
+        letter-spacing: 0;
+        text-transform: none;
+    }
+
+    /* Chevron: CSS triangle */
+    .rep-accordion__chevron {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        flex-shrink: 0;
+        margin-left: var(--space-2xs);
+        border-right: 2px solid var(--text-secondary);
+        border-bottom: 2px solid var(--text-secondary);
+        transform: rotate(45deg);
+        transition: transform 0.2s;
+    }
+
+    .rep-accordion__toggle[aria-expanded="true"] .rep-accordion__chevron {
+        transform: rotate(-135deg);
+    }
+
+    /* Panel: collapsed by default */
+    .rep-accordion__panel {
+        display: block;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+    }
+
+    .rep-accordion__panel.is-open {
+        max-height: 60vh;
+        overflow-y: auto;
+    }
+
+    /* Reposition the <ul> inside the panel */
+    .repertoire-col ul {
+        grid-row: unset;
+        overflow-y: visible;
+        padding: 0;
+        padding-left: 1ch;
+    }
+
+    /* Larger touch targets for filter entries */
+    .rep-entry {
+        padding: var(--space-2xs) 0;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+    }
+
+    /* Years column: keep big numbers but smaller on mobile */
+    .repertoire-col[data-col="years"] .rep-entry {
+        font-size: var(--step-2);
+        min-height: 48px;
+    }
+
+    /* Column heading font-size is handled by the toggle button */
+    .repertoire-col > h2 {
+        font-size: inherit;
+        line-height: inherit;
+    }
+}
+
+
+
 /* ---- rep-entry: shared base (button + link variants) ---- */
 .rep-entry {
     display: block;

app/templates/partials/repertoire-index.php

@@ -106,9 +106,50 @@ foreach ($filterColumns as $col) {
         fn($i) => $i['matched']
     ));
 }
+
+// ── Active filter chips ─────────────────────────────────────────────────────
+// Build a flat list of {dim, label, value, url} for every active filter entry.
+$activeChips = [];
+$dimLabels = [
+    'years' => 'Année',
+    'ap'    => 'AP',
+    'or'    => 'Orientation',
+    'fi'    => 'Finalité',
+    'kw'    => 'Mot-clé',
+];
+foreach (['years', 'ap', 'or', 'fi', 'kw'] as $dim) {
+    foreach ($activeSets[$dim] as $val) {
+        $activeChips[] = [
+            'dim'   => $dim,
+            'label' => $dimLabels[$dim],
+            'value' => $val,
+            'url'   => repToggleUrl($activeSets, $dim, $val),
+        ];
+    }
+}
 ?>
 <div id="repertoire-index" class="repertoire-index">
 
+<?php if ($anyActive): ?>
+    <!-- Active filter chips bar -->
+    <div class="rep-chip-bar" role="status" aria-label="Filtres actifs">
+        <span class="rep-chip-bar__label">Filtres&nbsp;:</span>
+        <?php foreach ($activeChips as $chip): ?>
+        <button type="button" class="rep-chip"
+                hx-get="<?= htmlspecialchars($chip['url']) ?>"
+                hx-target="#repertoire-index"
+                hx-swap="outerHTML"
+                hx-push-url="true"
+                hx-indicator="#rep-indicator"
+                aria-label="Retirer le filtre <?= htmlspecialchars($chip['label']) ?> : <?= htmlspecialchars($chip['value']) ?>">
+            <span class="rep-chip__dim"><?= htmlspecialchars($chip['label']) ?></span>
+            <span class="rep-chip__value"><?= htmlspecialchars($chip['value']) ?></span>
+            <span class="rep-chip__remove" aria-hidden="true">×</span>
+        </button>
+        <?php endforeach; ?>
+    </div>
+<?php endif; ?>
+
 <?php
 // Render filter columns in the correct left-to-right order.
 // Students column (non-filter) is inserted between keywords and AP/or/fi/years.
@@ -117,8 +158,15 @@ $renderOrder = ['years', 'ap', 'or', 'fi', 'students', 'kw'];
 foreach ($renderOrder as $colKey):
     if ($colKey === 'students'): ?>
     <!-- ÉTUDIANTES -->
-    <section class="repertoire-col" data-col="students">
+    <section class="repertoire-col rep-accordion" data-col="students">
-        <h2>Étudiant·es</h2>
+        <h2>
+            <span class="rep-accordion__heading-text">Étudiant·es</span>
+            <button type="button" class="rep-accordion__toggle" aria-expanded="false">
+                Étudiant·es
+                <span class="rep-accordion__chevron" aria-hidden="true"></span>
+            </button>
+        </h2>
+        <div class="rep-accordion__panel">
         <ul>
         <?php if (empty($studentWorks)): ?>
             <li class="rep-empty">—</li>
@@ -143,16 +191,32 @@ foreach ($renderOrder as $colKey):
             <?php endforeach; ?>
         <?php endif; ?>
         </ul>
+        </div>
     </section>
 <?php else:
-        $col = array_values(array_filter($filterColumns, fn($c) => $c['dim'] === $colKey))[0]; ?>
+        $col = array_values(array_filter($filterColumns, fn($c) => $c['dim'] === $colKey))[0];
-    <section class="repertoire-col" data-col="<?= $col['dim'] ?>">
+
-        <h2><?= $col['heading'] ?></h2>
+        // Count active filters in this column for the badge
+        $activeCount = count($activeSets[$col['dim']]);
+        ?>
+    <section class="repertoire-col rep-accordion" data-col="<?= $col['dim'] ?>">
+        <h2>
+            <span class="rep-accordion__heading-text"><?= $col['heading'] ?></span>
+            <button type="button" class="rep-accordion__toggle" aria-expanded="false">
+                <?= $col['heading'] ?>
+                <?php if ($activeCount > 0): ?>
+                <span class="rep-accordion__badge"><?= $activeCount ?></span>
+                <?php endif; ?>
+                <span class="rep-accordion__chevron" aria-hidden="true"></span>
+            </button>
+        </h2>
+        <div class="rep-accordion__panel">
         <ul>
 <?php   foreach ($repData[$col['dataKey']] as $item):
             repFilterEntry($item, $col['dim'], $activeSets, $anyActive, $colHasMatches[$col['dim']], $hx);
         endforeach; ?>
         </ul>
+        </div>
     </section>
 <?php endif;
 endforeach; ?>

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>

docs/repertoire-mobile-propositions.md

@@ -0,0 +1,111 @@
+# Répertoire — Mobile Responsive Propositions
+
+> Date: 2026-06-22
+> Context: Adapting the interactive 6-column filter model to mobile viewports
+
+## Current Architecture
+
+- `repertoire.php` — page wrapper, loads HTMX + popover JS
+- `repertoire-index.php` — 6-column filter index (also served as HTMX partial on filter toggles)
+- `repertoire.css` — all styling, 3 breakpoints: 1024px → 3 cols, 600px → 1 col
+
+**Desktop interactive model:**
+1. **6-column filter grid** — years, AP, orientations, finality, students, keywords. Each entry is a `<button>` with `hx-get` swapping `#repertoire-index` via HTMX.
+2. **Hover-to-preview** on student names — `hx-get` on `mouseenter`, renders `<div id="student-popover">` positioned via JS.
+3. **Pure CSS hamburger menu** in global header, separate from this page.
+
+## Problems on Mobile
+
+1. **Column overload** — Six vertically-stacked scrollable lists, each with independent `overflow-y: auto`, create deeply nested scrolling. Hostile UX — scroll hijacking, content below hard to discover.
+
+2. **Hover-based preview impossible on touch** — `mouseenter`/`mouseleave` has no equivalent on touch devices. Student links navigate to `/tfe?id=…` on tap, but preview popover never fires.
+
+3. **HTMX navigation cost** — Each filter tap triggers full HTTP round-trip + grid re-render. On mobile networks, latency is perceptible. pushState doubles the fetch on back-navigation.
+
+4. **Touch targets** — Filter entries use `padding: var(--space-3xs) 0` (~5px vertical). Tapping "Design et Politique du Multiple" without mis-hitting neighbors is error-prone.
+
+5. **No filter state visibility** — Once scrolled past the first 2-3 sections, selected filter states are invisible (buried in scroll regions).
+
+6. **Header search bar competition** — `header-search-wrap` renders above main, competing for vertical space with the full-height column layout.
+
+---
+
+## Proposition A — Accordion + Active Filters Bar (minimal JS)
+
+Each of the 6 filter columns becomes a collapsible accordion section. A persistent "active filters" bar shows selected filters as removable chips. Students column becomes a tap-to-open drawer (replaces hover).
+
+**Implementation:**
+- `<details>` + `<summary>` on each section heading for no-JS baseline. Enhanced with a tiny JS toggle for smooth animation if desired.
+- On mobile, only one accordion section open at a time. On desktop, all remain open (unchanged).
+- Extract selected filters into a horizontal chip bar above the accordion — each chip fires the same HTMX toggle URL to de-select.
+- Replace hover popover with a click-to-open bottom sheet: tap a student name → slide-up panel shows thesis cards.
+- Years column optionally becomes a horizontal pill bar (scannable horizontally).
+
+**Pros:** Progressive enhancement, works without JS (details/summary), low structural change to PHP partial.
+**Cons:** Opening/closing accordions to scan filters is slower than the all-visible desktop model.
+
+---
+
+## Proposition B — Tab Bar with Filter View Switcher
+
+The 6 filter dimensions become horizontal tabs (scrollable on small screens). Tapping a tab shows only that dimension's list full-width. A "Résultats" badge in the header shows match count.
+
+**Implementation:**
+- `<nav role="tablist">` across the top, horizontally scrollable (CSS `scroll-snap`).
+- Each tab panel renders one `<section>` at full width. Single filter column, no nested scroll — the list scrolls with the page.
+- Students tab replaces hover popover with inline cards: tap a name → inline expand to show thesis previews.
+- Selected filter count shown as a badge on each tab.
+- Active filter chips in a persistent bar.
+
+**Pros:** Single scroll context, excellent for scanning one dimension at a time, familiar mobile pattern.
+**Cons:** Significant PHP restructuring — each tab panel excludes the other 5 columns. Needs JS for tab switching (or HTMX per tab). Separates filters from each other visually.
+
+---
+
+## Proposition C — Drawer/Panel Pattern (most native-feeling)
+
+Results-first view with a filter drawer. A "Filtres" button opens a side panel / bottom sheet containing all filter columns. Applying filters updates results and closes the drawer.
+
+**Implementation:**
+- Mobile: fixed "Filtres (N)" button at the top. Tap → sliding bottom sheet with all 6 filter columns in a single scrollable panel.
+- Tapping an entry applies the filter via HTMX, optionally closes the sheet (or stays open for multi-filtering).
+- Count badge shows active filter count.
+- Desktop: unchanged — 6-column grid remains.
+- Students: scrollable list in main content area below filter button, tap-to-expand cards.
+- Popover JS deleted entirely.
+
+**Pros:** Extensively tested pattern (maps apps, e-commerce). Closest to native mobile filter UX. Desktop unchanged. Single scroll container — no nested scrolling.
+**Cons:** Needs new drawer/sheet component. Results-first approach changes the page's purpose — currently the page *is* the filters, not a results view.
+
+---
+
+## Proposition D — Hybrid: Filter Bar + Scrollable Carousel Sections
+
+Keep the 6-column structure but transform into a horizontally scrollable carousel on mobile. Sections sit in a horizontal scroll container with snap points.
+
+**Implementation:**
+- `@media (max-width: 640px)`: `.repertoire-index` grid becomes flex row with `overflow-x: auto; scroll-snap-type: x mandatory`.
+- Each `.repertoire-col` becomes `scroll-snap-align: start; min-width: 85vw`.
+- Heading acts as sticky within each snap panel.
+- Students column moves to full-width below the carousel.
+- Navigation dots or scroll hint at the bottom.
+- Popover becomes long-press or tap-and-hold on students.
+
+**Pros:** Preserves "browse everything" mental model. Low structural change — just CSS. Sections independently scannable.
+**Cons:** Horizontal carousels have discoverability issues. Popover still needs touch replacement. Horizontal+vertical scroll nesting creates gesture conflicts.
+
+---
+
+## Recommended Approach
+
+**Proposition A (Accordion + Chip Bar)** is the most pragmatic starting point:
+1. Least structural PHP changes
+2. Eliminates nested scrolling (the #1 problem)
+3. Provides clear filter-state visibility via chips
+4. Degrades gracefully (details/summary works without JS)
+5. Same HTMX endpoints work — only container shape changes
+
+### Phased Implementation
+1. **Phase 1:** Accordion sections + active filter chip bar (mobile only via CSS media query). Desktop unchanged.
+2. **Phase 2:** Replace student hover popover with tap-to-open bottom sheet (touch-aware JS, keep hover for desktop).
+3. **Phase 3:** Polish — touch target sizing (min 44px), filtered count badges, scroll-position memory on HTMX swap.