répertoire: rename search.php, 6-column layout, HTMX filter, faded entries disabled, URL-shareable

public/assets/css/search.css

@@ -1,5 +1,5 @@
 /* ============================================================
-   RÉPERTOIRE / SEARCH PAGE (search.php)
+   RÉPERTOIRE / SEARCH PAGE (repertoire.php)
    ============================================================ */
 
 @import url("./variables.css");
@@ -18,16 +18,33 @@
   overflow-x: hidden;
 }
 
-/* ---- 4-column index layout ---- */
+/* ---- 6-column index layout ---- */
 .repertoire-index {
   display: grid;
-  grid-template-columns: 1fr 2fr 2fr 1.5fr;
+  grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
   gap: 0;
   padding: 0 1.5rem;
   min-height: 100%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
+  .repertoire-index {
+    grid-template-columns: 1fr 1fr 1fr;
+    padding: 0 1rem;
+    min-height: auto;
+  }
+
+  .repertoire-col {
+    border-right: 1px solid var(--border-secondary);
+    border-bottom: 1px solid var(--border-primary);
+  }
+
+  .repertoire-col:nth-child(3n) {
+    border-right: none;
+  }
+}
+
+@media (max-width: 600px) {
   .repertoire-index {
     grid-template-columns: 1fr;
     padding: 0 1rem;
@@ -72,50 +89,85 @@
   padding: 0;
 }
 
-/* Years column - big bold numbers */
-.repertoire-col:first-child ul a {
+/* ---- rep-entry: shared base (button + link variants) ---- */
+.rep-entry {
   display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: 0.1rem 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  line-height: 1.4;
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.15s, opacity 0.15s;
+}
+
+.rep-entry:hover {
+  color: var(--accent-primary);
+}
+
+/* Link variant (students col) — no underline by default */
+.rep-entry--link {
+  text-decoration: none;
+}
+
+/* Selected: accent color */
+.rep-entry--selected {
+  color: var(--accent-primary) !important;
+}
+
+/* Faded/disabled: muted, not interactive */
+.rep-entry--faded {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Years column — big bold numbers */
+.repertoire-col[data-col="years"] .rep-entry {
   font-size: 2.2rem;
   font-weight: 700;
   line-height: 1.1;
-  color: var(--text-primary);
-  text-decoration: none;
-  padding: 0.1rem 0;
-  transition: color 0.15s;
   letter-spacing: -0.02em;
+  padding: 0.05rem 0;
 }
 
-.repertoire-col:first-child ul a:hover,
-.repertoire-col:first-child ul a[aria-current] {
-  color: var(--accent-primary);
-}
-
-/* Categories column */
-.cat-index-label {
-  font-size: 0.72rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-  font-weight: 400;
-  display: block;
-  margin-bottom: 0.15rem;
-  margin-top: 0.75rem;
-}
-
-/* Categories, students, keywords columns — shared link style */
-.repertoire-col:not(:first-child) ul a {
-  display: block;
-  font-size: 0.95rem;
-  color: var(--text-primary);
-  text-decoration: none;
+/* Empty state in students column */
+.rep-empty {
+  color: var(--text-tertiary);
+  font-size: 0.9rem;
   padding: 0.1rem 0;
-  line-height: 1.4;
-  transition: color 0.15s;
 }
 
-.repertoire-col:not(:first-child) ul a:hover,
-.repertoire-col:not(:first-child) ul a[aria-current] {
-  color: var(--accent-primary);
+/* ---- HTMX loading indicator ---- */
+.rep-indicator {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--accent-primary);
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.rep-indicator.htmx-request {
+  opacity: 1;
+  animation: rep-progress 1.2s ease-in-out infinite;
+}
+
+@keyframes rep-progress {
+  0%   { transform: scaleX(0);   transform-origin: left; }
+  50%  { transform: scaleX(0.7); transform-origin: left; }
+  100% { transform: scaleX(1);   transform-origin: left; }
 }
 
 /* ---- Search results view (grid) ---- */
@@ -165,35 +217,6 @@
   font-style: normal;
 }
 
-/* Toggle button (index/results) */
-.view-toggle {
-  display: flex;
-  gap: 0;
-  border: 1px solid var(--border-secondary);
-  border-radius: 3px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.view-toggle__btn {
-  padding: 0.25rem 0.75rem;
-  font-size: 0.78rem;
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  transition: all 0.15s;
-}
-
-.view-toggle__btn.active,
-.view-toggle__btn:hover {
-  background: var(--accent-primary);
-  color: var(--accent-foreground);
-}
-
 /* Search controls bar */
 .search-controls {
   display: flex;
@@ -205,7 +228,6 @@
   flex-wrap: wrap;
 }
 
-/* label now wraps the select directly — flex aligns label text + select */
 .search-filter-label {
   display: flex;
   align-items: center;
@@ -256,7 +278,7 @@
   cursor: pointer;
 }
 
-/* Search results pagination — reuses same token names as main.css */
+/* Search results pagination */
 .pagination-wrap {
   display: flex;
   justify-content: center;