From 5e88d44129acba2b6a1847e8450d087df34f1520 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9drix?= <cedric@abonnel.fr>
Date: Fri, 15 May 2026 20:35:59 +0200
Subject: [PATCH] =?UTF-8?q?fix=20:=20densit=C3=A9=20L/M/S=20=E2=80=94=20wi?=
 =?UTF-8?q?dget=20fixe=20haut-droite,=20CSS=20!important?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Widget retiré du hero-search, replacé en position:fixed top-right (sous navbar)
- max-width !important pour garantir l'override de Bootstrap sur main.container-fluid
- transition douce sur main, caché en < 576px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/assets/css/style.css | 38 ++++++++++++++++++++++---------------
 templates/post_list.php     | 36 ++++++++++++++---------------------
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 9e49b76..82dc90f 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1259,28 +1259,35 @@ footer.mt-5 { margin-top: 0 !important; }
     transition: background .2s;
 }
 .hero-search-btn:hover { background: var(--vl-accent-dark); }
-.hero-search-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: .75rem;
-    margin-top: .8rem;
-}
 .hero-search-stats {
+    margin-top: .8rem;
     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; }
+main { transition: max-width .22s ease, padding-left .22s ease, padding-right .22s ease; }
+body[data-density="m"] main { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
+body[data-density="s"] main { max-width: 660px !important; margin-left: auto !important; margin-right: auto !important; }
 
-.density-toggle { display: flex; gap: 2px; }
+/* Widget fixe haut-droite */
+.density-widget {
+    position: fixed;
+    top: 3.6rem;
+    right: 1rem;
+    z-index: 1010;
+    display: flex;
+    gap: 2px;
+    background: var(--vl-surface);
+    border: 1px solid var(--vl-border);
+    border-radius: 6px;
+    padding: 3px;
+    box-shadow: var(--vl-shadow-sm);
+}
 .density-btn {
     background: none;
-    border: 1px solid var(--vl-border);
+    border: 1px solid transparent;
     border-radius: 4px;
     color: var(--vl-muted);
     cursor: pointer;
@@ -1288,11 +1295,12 @@ body[data-density="s"] main { max-width: 660px; margin-left: auto; margin-right:
     font-weight: 700;
     letter-spacing: .06em;
     line-height: 1;
-    padding: 3px 7px;
+    padding: 4px 8px;
     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); }
+.density-btn:hover { background: rgba(0,0,0,.06); color: var(--vl-text); }
+.density-btn.active { background: var(--vl-text); color: var(--vl-bg); }
+@media (max-width: 576px) { .density-widget { display: none; } }
 
 /* ─── Page de recherche ───────────────────── */
 .search-page { max-width: 780px; margin: 0 auto; }
diff --git a/templates/post_list.php b/templates/post_list.php
index 4135dae..86b3169 100644
--- a/templates/post_list.php
+++ b/templates/post_list.php
@@ -86,17 +86,10 @@ function _renderCard(array $post, array $privateCats, array $allCats, \Parsedown
                autofocus>
         <button type="submit" class="hero-search-btn">Rechercher</button>
     </form>
-    <div class="hero-search-footer">
-        <p class="hero-search-stats">
-            <?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
-            <?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>
+    <p class="hero-search-stats">
+        <?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
+        <?php if ($totalUpcoming > 0): ?>· <?= $totalUpcoming ?> à venir<?php endif; ?>
+    </p>
 </div>
 
 <?php /* ─── Héro + derniers articles ─────────────────────────────────── */ ?>
@@ -271,17 +264,10 @@ function _renderCard(array $post, array $privateCats, array $allCats, \Parsedown
                autofocus>
         <button type="submit" class="hero-search-btn">Rechercher</button>
     </form>
-    <div class="hero-search-footer">
-        <p class="hero-search-stats">
-            <?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
-            <?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>
+    <p class="hero-search-stats">
+        <?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
+        <?php if ($totalUpcoming > 0): ?>· <?= $totalUpcoming ?> à venir<?php endif; ?>
+    </p>
 </div>
 <?php endif; ?>
 
@@ -352,6 +338,12 @@ if (!empty($_tagCats)):
 <a href="/new" class="fab-new" title="Nouvel article" aria-label="Nouvel article">+</a>
 <?php endif; ?>
 
+<div class="density-widget" id="density-toggle-widget" 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>
+
 <script>
 (function(){
     var KEY = 'folio_density';