feat : sélecteur de densité L/M/S sur la page liste (v1.6.7)

Boutons [L][M][S] dans la barre de recherche hero : pleine largeur (défaut),
980 px centré, 660 px compact. Préférence localStorage. Anti-FOUC inline dans layout.php.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -9,6 +9,13 @@ Format : [Keep a Changelog](https://keepachangelog.com/fr/1.0.0/) — versionnag
 
 ---
 
+## [1.6.7] - 2026-05-15
+
+### Ajouté
+- Sélecteur de densité L / M / S sur la page liste : pleine largeur (défaut), normal (980 px), compact (660 px) — préférence persistée dans `localStorage`
+
+---
+
 ## [1.6.6] - 2026-05-15
 
 ### Modifié

public/assets/css/style.css

@@ -1259,13 +1259,41 @@ footer.mt-5 { margin-top: 0 !important; }
     transition: background .2s;
 }
 .hero-search-btn:hover { background: var(--vl-accent-dark); }
-.hero-search-stats {
+.hero-search-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .75rem;
     margin-top: .8rem;
+}
+.hero-search-stats {
     font-size: .83rem;
     color: var(--vl-muted);
     letter-spacing: .01em;
+    margin: 0;
 }
 
+/* ─── Densité d'affichage L / M / S ──────── */
+body[data-density="m"] main { max-width: 980px; margin-left: auto; margin-right: auto; }
+body[data-density="s"] main { max-width: 660px; margin-left: auto; margin-right: auto; }
+
+.density-toggle { display: flex; gap: 2px; }
+.density-btn {
+    background: none;
+    border: 1px solid var(--vl-border);
+    border-radius: 4px;
+    color: var(--vl-muted);
+    cursor: pointer;
+    font-size: .68rem;
+    font-weight: 700;
+    letter-spacing: .06em;
+    line-height: 1;
+    padding: 3px 7px;
+    transition: background .15s, color .15s, border-color .15s;
+}
+.density-btn:hover { background: rgba(0,0,0,.05); color: var(--vl-text); border-color: var(--vl-muted); }
+.density-btn.active { background: var(--vl-text); border-color: var(--vl-text); color: var(--vl-bg); }
+
 /* ─── Page de recherche ───────────────────── */
 .search-page { max-width: 780px; margin: 0 auto; }
 

public/version.txt

@@ -1 +1 @@
-1.6.6
+1.6.7

templates/layout.php

@@ -50,6 +50,7 @@
 </head>
 
 <body<?php if (!empty($bodyClass ?? '')): ?> class="<?= htmlspecialchars($bodyClass) ?>"<?php endif; ?>>
+<script>(function(){var d=localStorage.getItem('folio_density');if(d&&d!=='l')document.body.dataset.density=d;})();</script>
 
 <header>
     <nav class="navbar navbar-expand-lg navbar-dark mb-0" role="navigation" aria-label="Navigation principale">

templates/post_list.php

@@ -86,12 +86,17 @@ function _renderCard(array $post, array $privateCats, array $allCats, \Parsedown
                autofocus>
         <button type="submit" class="hero-search-btn">Rechercher</button>
     </form>
-    <p class="hero-search-stats">
+    <div class="hero-search-footer">
-        <?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
+        <p class="hero-search-stats">
-        <?php if ($totalUpcoming > 0): ?>
+            <?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
-            · <?= $totalUpcoming ?> à venir
+            <?php if ($totalUpcoming > 0): ?>· <?= $totalUpcoming ?> à venir<?php endif; ?>
-        <?php endif; ?>
+        </p>
-    </p>
+        <div class="density-toggle" role="group" aria-label="Taille d'affichage">
+            <button type="button" class="density-btn" data-d="l" title="Pleine largeur">L</button>
+            <button type="button" class="density-btn" data-d="m" title="Normal">M</button>
+            <button type="button" class="density-btn" data-d="s" title="Compact">S</button>
+        </div>
+    </div>
 </div>
 
 <?php /* ─── Héro + derniers articles ─────────────────────────────────── */ ?>
@@ -266,10 +271,17 @@ function _renderCard(array $post, array $privateCats, array $allCats, \Parsedown
                autofocus>
         <button type="submit" class="hero-search-btn">Rechercher</button>
     </form>
-    <p class="hero-search-stats">
+    <div class="hero-search-footer">
-        <?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
+        <p class="hero-search-stats">
-        <?php if ($totalUpcoming > 0): ?>· <?= $totalUpcoming ?> à venir<?php endif; ?>
+            <?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
-    </p>
+            <?php if ($totalUpcoming > 0): ?>· <?= $totalUpcoming ?> à venir<?php endif; ?>
+        </p>
+        <div class="density-toggle" role="group" aria-label="Taille d'affichage">
+            <button type="button" class="density-btn" data-d="l" title="Pleine largeur">L</button>
+            <button type="button" class="density-btn" data-d="m" title="Normal">M</button>
+            <button type="button" class="density-btn" data-d="s" title="Compact">S</button>
+        </div>
+    </div>
 </div>
 <?php endif; ?>
 
@@ -340,6 +352,34 @@ if (!empty($_tagCats)):
 <a href="/new" class="fab-new" title="Nouvel article" aria-label="Nouvel article">+</a>
 <?php endif; ?>
 
+<script>
+(function(){
+    var KEY = 'folio_density';
+    var cur = localStorage.getItem(KEY) || 'l';
+
+    function apply(d) {
+        if (d === 'l') {
+            delete document.body.dataset.density;
+        } else {
+            document.body.dataset.density = d;
+        }
+        document.querySelectorAll('.density-btn').forEach(function(btn){
+            btn.classList.toggle('active', btn.dataset.d === d);
+        });
+    }
+
+    apply(cur);
+
+    document.addEventListener('click', function(e){
+        var btn = e.target.closest('.density-btn');
+        if (!btn) return;
+        cur = btn.dataset.d;
+        localStorage.setItem(KEY, cur);
+        apply(cur);
+    });
+})();
+</script>
+
 <?php
 $content = ob_get_clean();
 $title   = siteTitle();