feat: refactorer la pagination avec design moderne, styles flexbox optimisés, support thème clair/sombre, label dynamique Notes/Bookmarks selon contexte, correction de la syntaxe de boucle des plugins, et masquage temporaire du titre dans le header

shaarli-pro/css/style.css

@@ -1068,6 +1068,111 @@ input:checked+.theme-slider:before {
     color: white;
 }
 
+/* ===== Pagination ===== */
+.paging {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    width: 100%;
+    margin: 1.25rem 0 0;
+    padding: 0.75rem 0.9rem;
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    background: var(--bg-card);
+}
+
+.content-toolbar .paging {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+}
+
+.paging-links {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.paging-newer,
+.paging-older {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    background: var(--bg-body);
+    text-decoration: none;
+    transition: all 0.15s ease;
+}
+
+.paging-newer:hover,
+.paging-older:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+    background: var(--primary-light);
+}
+
+.paging-current {
+    font-size: 0.86rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.paging-current strong {
+    color: var(--text-main);
+}
+
+.paging-stats {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: var(--text-main);
+}
+
+.paging.single-page .paging-stats {
+    font-size: 0.95rem;
+}
+
+.paging-plugin {
+    display: inline-flex;
+    align-items: center;
+}
+
+.paging-plugin a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 30px;
+    min-height: 30px;
+    padding: 0.2rem 0.45rem;
+    border-radius: 0.45rem;
+    border: 1px solid var(--border);
+    background: var(--bg-body);
+    color: var(--text-secondary);
+    text-decoration: none;
+}
+
+body.view-notes .paging {
+    margin-top: 1rem;
+}
+
+@media (max-width: 768px) {
+    .paging {
+        padding: 0.65rem 0.75rem;
+    }
+
+    .paging-stats {
+        width: 100%;
+        order: -1;
+    }
+}
 
 /* ===== Links Grid/List ===== */
 .links-list {

shaarli-pro/linklist.paging.html

@@ -13,6 +13,11 @@
 {/if}
 {$from=($page_current - 1) * $links_per_page + 1}
 {$to=min($total, ($page_current - 1) * $links_per_page + $links_per_page)}
+{if="!empty($search_tags) && stripos($search_tags, 'note') !== false"}
+{$paging_label="Notes"}
+{else}
+{$paging_label="Bookmarks"}
+{/if}
 <div class="paging{if="$page_max <=1"} single-page{/if}">
     {if="$page_max > 1"}
     <div class="paging-links">
@@ -22,11 +27,12 @@
     </div>
     {/if}
     <div class="paging-stats">
-        Bookmarks <strong>{$from}</strong> - <strong>{$to}</strong> / <strong>{$total}</strong>
+        {$paging_label} <strong>{$from}</strong> - <strong>{$to}</strong> / <strong>{$total}</strong>
     </div>
     {loop="$action_plugin"}
     <div class="paging-plugin">
-        <a {loop="$value.attr" }{$key}="{$value}">{$value.html}</a>
+        {$plugin_html=$value.html}
+        <a {loop="$value.attr"}{$key}="{$value}"{/loop}>{$plugin_html}</a>
     </div>
     {/loop}
 </div>

shaarli-pro/page.header.html

@@ -105,7 +105,7 @@ Bookmarklet detection logic
                     aria-controls="sidebar">
                     <i class="mdi mdi-menu" aria-hidden="true"></i>
                 </button>
-                <a href="{$titleLink}" class="header-brand">{$shaarlititle}</a>
+                <!-- <a href="{$titleLink}" class="header-brand">{$shaarlititle}</a> -->
             </div>
 
             <!-- Main Navigation -->