Make search page header more compact and fix layout structure

- Reduce all spacing and padding in header for more compact fit
- Fix back button overflow by removing width: 100% and adding overflow handling
- Make filter section more compact with smaller fonts and spacing
- Add main-wrapper div to group main and footer
- Keep rounded corners (40px) on all three sections like main.css
- Footer stays at bottom of main content area
- Fix HTML structure: footer outside main, both inside wrapper

justfile

@@ -113,10 +113,10 @@ deploy:
 deploy-database:
     @echo "⚠️  Deploying test database (will overwrite remote test.db)"
     @echo "Creating database directory if needed..."
-    ssh posterg "mkdir -p /var/www/posterg/database"
+    ssh posterg "mkdir -p /var/www/posterg/storage"
     rsync -vur --progress ./storage/test.db posterg:/var/www/posterg/storage/test.db
     @echo "Setting correct permissions..."
-    ssh posterg "chown www-data:posterg /var/www/posterg/database /var/www/posterg/storage/test.db && chmod 775 /var/www/posterg/database && chmod 660 /var/www/posterg/storage/test.db"
+    ssh posterg "chown www-data:posterg /var/www/posterg/storage /var/www/posterg/storage/test.db && chmod 775 /var/www/posterg/storage && chmod 660 /var/www/posterg/storage/test.db"
     @echo "✅ Test database deployed and configured"
 
 # Legacy alias

public/assets/search.css

@@ -0,0 +1,452 @@
+/* Search page - horizontal layout */
+body {
+  margin: 0;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
+}
+
+/* Layout: header sidebar, main+footer wrapper takes rest */
+header {
+  flex: 0 0 250px;
+  min-width: 0;
+  max-width: 250px;
+  height: 100vh;
+  font-family: "police1", sans-serif;
+  background: #9557b5ff;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.75rem 0.6rem;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  border-radius: 40px;
+}
+
+.main-wrapper {
+  flex: 1;
+  min-width: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+main {
+  flex: 1;
+  min-width: 0;
+  background: #3c856bff;
+  position: relative;
+  padding: 1rem;
+  margin: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border-radius: 40px;
+}
+
+footer {
+  background: #222222ff;
+  padding: 0.75rem 1rem;
+  margin: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 40px;
+}
+
+/* Search header */
+.search-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 0.35rem 0.6rem;
+  border-radius: 10px;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 0.8rem;
+  transition: all 0.2s;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: translateY(-1px);
+}
+
+.search-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+  font-size: 0.8rem;
+  background: rgba(255, 255, 255, 0.9);
+  color: #333;
+  box-sizing: border-box;
+}
+
+.search-input::placeholder {
+  color: #999;
+  font-size: 0.75rem;
+}
+
+.search-actions {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.search-button,
+.filter-button {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 0.35rem 0.5rem;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: all 0.2s;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.search-button:hover,
+.filter-button:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: translateY(-1px);
+}
+
+.filter-button.active {
+  background: rgba(255, 255, 255, 0.3);
+  font-weight: 600;
+}
+
+/* Filters panel */
+.filters-panel {
+  display: none;
+  background: rgba(255, 255, 255, 0.08);
+  padding: 0.4rem;
+  border-radius: 8px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.filters-panel.show {
+  display: block;
+}
+
+.filters-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.3rem;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.filter-label {
+  color: white;
+  font-weight: 600;
+  font-size: 0.65rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filter-select {
+  padding: 0.3rem 0.35rem;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 0.7rem;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.filter-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin-top: 0.3rem;
+  flex-shrink: 0;
+}
+
+.reset-button {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 0.3rem 0.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.7rem;
+  text-decoration: none;
+  display: inline-block;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.reset-button:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.error-message {
+  background: rgba(255, 100, 100, 0.2);
+  color: white;
+  padding: 0.35rem 0.5rem;
+  border-radius: 8px;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+/* Main content - results grid */
+.cards-container {
+  display: grid;
+  gap: 1rem;
+  flex: 1;
+  min-height: 0;
+  padding: 0.5rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow: row;
+}
+
+@media (min-width: 1400px) and (max-width: 1700px) {
+  .cards-container {
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 1701px) {
+  .cards-container {
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 1399px) {
+  .cards-container {
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.card-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  height: 100%;
+}
+
+.card {
+  background: #eee;
+  border-radius: 12px;
+  padding: 0.75rem;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  height: 100%;
+  overflow: hidden;
+}
+
+.card .title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.2;
+  color: #333;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card .authors {
+  font-size: 0.75rem;
+  margin: 0;
+  color: #666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card .year {
+  font-size: 0.75rem;
+  margin: 0;
+  color: #9557b5;
+  font-weight: 600;
+}
+
+.card .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: auto;
+  padding-top: 0.3rem;
+}
+
+.card .tag {
+  font-size: 0.65rem;
+  padding: 0.2rem 0.4rem;
+  background: rgba(149, 87, 181, 0.15);
+  color: #7a3d95;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  font-weight: 500;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  margin-top: 0.75rem;
+  width: fit-content;
+  align-self: center;
+  flex-shrink: 0;
+}
+
+.pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+  background: rgba(255, 255, 255, 0.9);
+  color: #3c856b;
+  text-decoration: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: all 0.2s;
+  border: 2px solid transparent;
+}
+
+.pagination-btn:hover:not(.disabled) {
+  background: white;
+  border-color: #9557b5;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.pagination-btn.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.pagination-info {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.5rem;
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.page-current {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #9557b5;
+  background: white;
+  padding: 0.2rem 0.6rem;
+  border-radius: 6px;
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.page-separator {
+  font-weight: 300;
+  opacity: 0.6;
+  padding: 0 0.15rem;
+}
+
+.page-total {
+  opacity: 0.8;
+}
+
+/* Footer - results count */
+.results-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1rem;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+.results-count {
+  font-weight: 700;
+  font-size: 1.5rem;
+  letter-spacing: -0.02em;
+}

public/search.php

@@ -29,7 +29,7 @@ if (rand(1, 100) === 1) {
 
 // Pagination - adjust to grid
 $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
-$itemsPerPage = 12; // Default grid size (3 rows × 4 columns)
+$itemsPerPage = 9; // Default grid size (3 rows × 3 columns)
 
 // Collect search parameters
 $searchParams = [];
@@ -118,195 +118,7 @@ try {
     <title>Recherche - Posterg</title>
     <link rel="stylesheet" href="assets/modern-normalize.css">
     <link rel="stylesheet" href="assets/common.css">
-    <link rel="stylesheet" href="assets/main.css">
+    <link rel="stylesheet" href="assets/search.css">
-    <style>
-        header {
-            padding: 1rem 2rem !important;
-            display: flex !important;
-            flex-direction: column !important;
-            gap: 0.75rem !important;
-            overflow-y: auto !important;
-        }
-        
-        .search-header {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            width: 100%;
-            flex-shrink: 0;
-        }
-        
-        .back-button {
-            background: rgba(255, 255, 255, 0.15);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            color: white;
-            padding: 0.5rem 0.9rem;
-            border-radius: 15px;
-            cursor: pointer;
-            text-decoration: none;
-            font-size: 0.9rem;
-            transition: all 0.2s;
-            white-space: nowrap;
-            display: inline-flex;
-            align-items: center;
-            flex-shrink: 0;
-        }
-        
-        .back-button:hover {
-            background: rgba(255, 255, 255, 0.25);
-            transform: translateY(-1px);
-        }
-        
-        .search-form {
-            flex: 1;
-            display: flex;
-            gap: 0.5rem;
-            align-items: center;
-            min-width: 0;
-        }
-        
-        .search-input {
-            flex: 1;
-            padding: 0.5rem 0.9rem;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
-            font-size: 0.9rem;
-            background: rgba(255, 255, 255, 0.9);
-            color: #333;
-            min-width: 0;
-        }
-        
-        .search-input::placeholder {
-            color: #999;
-        }
-        
-        .search-button, .filter-button {
-            background: rgba(255, 255, 255, 0.15);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            color: white;
-            padding: 0.5rem 0.9rem;
-            border-radius: 15px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            transition: all 0.2s;
-            white-space: nowrap;
-            flex-shrink: 0;
-        }
-        
-        .search-button:hover, .filter-button:hover {
-            background: rgba(255, 255, 255, 0.25);
-            transform: translateY(-1px);
-        }
-        
-        .filter-button.active {
-            background: rgba(255, 255, 255, 0.3);
-            font-weight: 600;
-        }
-        
-        .filters-panel {
-            display: none;
-            background: rgba(255, 255, 255, 0.1);
-            padding: 0.75rem;
-            border-radius: 12px;
-            flex-shrink: 0;
-            overflow: visible;
-        }
-        
-        .filters-panel.show {
-            display: block;
-        }
-        
-        .filters-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 0.5rem;
-        }
-        
-        @media (max-width: 1400px) {
-            .filters-grid {
-                grid-template-columns: repeat(3, 1fr);
-            }
-        }
-        
-        @media (max-width: 1000px) {
-            .filters-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-        
-        .filter-group {
-            display: flex;
-            flex-direction: column;
-            gap: 0.25rem;
-            min-width: 0;
-        }
-        
-        .filter-label {
-            color: white;
-            font-weight: 600;
-            font-size: 0.75rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        
-        .filter-select {
-            padding: 0.4rem;
-            border-radius: 8px;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            background: rgba(255, 255, 255, 0.9);
-            font-size: 0.8rem;
-            min-width: 0;
-        }
-        
-        .filter-actions {
-            display: flex;
-            gap: 0.5rem;
-            margin-top: 0.5rem;
-            flex-shrink: 0;
-        }
-        
-        .reset-button {
-            background: rgba(255, 255, 255, 0.15);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            color: white;
-            padding: 0.4rem 0.8rem;
-            border-radius: 12px;
-            cursor: pointer;
-            font-size: 0.8rem;
-            text-decoration: none;
-            display: inline-block;
-            white-space: nowrap;
-        }
-        
-        .reset-button:hover {
-            background: rgba(255, 255, 255, 0.25);
-        }
-        
-        .error-message {
-            background: rgba(255, 100, 100, 0.2);
-            color: white;
-            padding: 0.5rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.85rem;
-            flex-shrink: 0;
-        }
-        
-        .results-footer {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 1.1rem;
-            height: 100%;
-            gap: 0.5rem;
-        }
-        
-        .results-count {
-            font-weight: 700;
-            font-size: 1.3rem;
-        }
-    </style>
 </head>
 <body>
     <header>
@@ -318,14 +130,17 @@ try {
                     type="text" 
                     name="query" 
                     class="search-input" 
-                    placeholder="Rechercher par titre, auteur, mots-clés..."
+                    placeholder="Rechercher..."
                     value="<?= htmlspecialchars($_GET['query'] ?? ''); ?>"
                     autofocus
                 >
+                
+                <div class="search-actions">
                     <button type="submit" class="search-button">Rechercher</button>
                     <button type="button" class="filter-button <?= $showFilters ? 'active' : ''; ?>" onclick="toggleFilters()">
                         Filtres
                     </button>
+                </div>
                 
                 <!-- Hidden field to maintain filter panel state -->
                 <input type="hidden" name="filters" id="filters-state" value="<?= $showFilters ? 'show' : 'hide'; ?>">
@@ -466,6 +281,7 @@ try {
         </div>
     </header>
     
+    <div class="main-wrapper">
         <main>
         <div class="cards-container">
             <?php if (count($results) > 0): ?>
@@ -518,9 +334,10 @@ try {
         <footer>
             <div class="results-footer">
                 <span class="results-count"><?= (int)$totalItems; ?></span>
-            <span>résultat<?= $totalItems > 1 ? 's' : ''; ?> trouvé<?= $totalItems > 1 ? 's' : ''; ?></span>
+                <span>résultat<?= $totalItems > 1 ? 's' : ''; ?></span>
             </div>
         </footer>
+    </div>
     
     <script>
         function toggleFilters() {

src/cache/rate_limit/f528764d624db129b32c21fbca0cb8d6.json

@@ -1 +1 @@
-[1770898865]
+{"10":1770899252,"11":1770899274,"12":1770899301}