mémorisation catégorie par cookie, URLs propres /categorie/

public/assets/css/style.css

@@ -1195,36 +1195,48 @@ footer.mt-5 { margin-top: 0 !important; }
 .tag-cloud {
     display: flex;
     flex-wrap: wrap;
-    gap: .4rem .7rem;
-    align-items: baseline;
-    padding: 1rem 0;
+    gap: .5rem;
+    align-items: center;
+    padding: 1.25rem 0;
     border-top: 1px solid var(--vl-border, #e5e7eb);
 }
 
 .tag-cloud-item {
+    display: inline-flex;
+    align-items: center;
+    gap: .3em;
+    padding: .25em .75em;
+    border-radius: 999px;
+    border: 1px solid var(--vl-border, #e5e7eb);
+    background: transparent;
     color: var(--vl-muted);
     text-decoration: none;
-    transition: color .15s;
     white-space: nowrap;
+    transition: background .15s, color .15s, border-color .15s;
+    font-size: .85rem !important;
 }
 
-.tag-cloud-item:hover,
-.tag-cloud-item.active {
-    color: var(--vl-accent);
+.tag-cloud-item:hover {
+    background: var(--vl-accent);
+    border-color: var(--vl-accent);
+    color: #fff;
 }
 
 .tag-cloud-item.active {
+    background: var(--vl-accent);
+    border-color: var(--vl-accent);
+    color: #fff;
     font-weight: 600;
 }
 
 .tag-count {
-    font-size: .65em;
-    opacity: .6;
+    font-size: .8em;
+    opacity: .7;
 }
 
 .tag-cloud-reset {
     margin-left: auto;
-    font-size: .85em;
+    font-size: .85rem;
     color: var(--vl-muted);
     text-decoration: none;
 }