From 58a110d5b93d5e82000578205a1e70199fadf609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9drix?= <cedric@abonnel.fr>
Date: Fri, 15 May 2026 20:49:08 +0200
Subject: [PATCH] =?UTF-8?q?fix=20:=20densit=C3=A9=20L/M/S=20=E2=80=94=20in?=
 =?UTF-8?q?jection=20<style>=20dynamique=20dans=20<head>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remplace body[data-density] + CSS externe par un élément <style id="density-fouc">
injecté dynamiquement dans <head>, insensible aux problèmes de spécificité et de cache CSS.
Remplace aussi closest() par une boucle parentNode et dataset par getAttribute.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/assets/css/style.css |  4 +---
 templates/layout.php        |  2 +-
 templates/post_list.php     | 34 +++++++++++++++++++++++-----------
 3 files changed, 25 insertions(+), 15 deletions(-)
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 82dc90f..cd62a6c 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1267,9 +1267,7 @@ footer.mt-5 { margin-top: 0 !important; }
 }
 
 /* ─── Densité d'affichage L / M / S ──────── */
-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; }
+main { transition: max-width .22s ease; }
 
 /* Widget fixe haut-droite */
 .density-widget {
diff --git a/templates/layout.php b/templates/layout.php
index 6987c5f..ee64ef2 100644
--- a/templates/layout.php
+++ b/templates/layout.php
@@ -50,7 +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>
+<script>(function(){var d=localStorage.getItem('folio_density');if(d&&d!=='l'){var s=document.createElement('style');s.id='density-fouc';s.textContent='main[role="main"]{max-width:'+(d==='m'?'980px':'660px')+'!important;margin-left:auto!important;margin-right:auto!important}';document.head.appendChild(s);}})();</script>
 
 <header>
     <nav class="navbar navbar-expand-lg navbar-dark mb-0" role="navigation" aria-label="Navigation principale">
diff --git a/templates/post_list.php b/templates/post_list.php
index 86b3169..aa2404a 100644
--- a/templates/post_list.php
+++ b/templates/post_list.php
@@ -349,25 +349,37 @@ if (!empty($_tagCats)):
     var KEY = 'folio_density';
     var cur = localStorage.getItem(KEY) || 'l';
 
-    function apply(d) {
-        if (d === 'l') {
-            delete document.body.dataset.density;
+    function applyDensity(d) {
+        var fouc = document.getElementById('density-fouc');
+        if (d !== 'l') {
+            var mw = d === 'm' ? '980px' : '660px';
+            if (!fouc) {
+                fouc = document.createElement('style');
+                fouc.id = 'density-fouc';
+                document.head.appendChild(fouc);
+            }
+            fouc.textContent = 'main[role="main"]{max-width:' + mw + '!important;margin-left:auto!important;margin-right:auto!important}';
         } else {
-            document.body.dataset.density = d;
+            if (fouc) { fouc.parentNode.removeChild(fouc); }
         }
         document.querySelectorAll('.density-btn').forEach(function(btn){
-            btn.classList.toggle('active', btn.dataset.d === d);
+            btn.classList.toggle('active', btn.getAttribute('data-d') === d);
         });
     }
 
-    apply(cur);
+    applyDensity(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);
+        var el = e.target;
+        while (el && el !== document) {
+            if (el.classList && el.classList.contains('density-btn')) {
+                cur = el.getAttribute('data-d') || 'l';
+                try { localStorage.setItem(KEY, cur); } catch(ignore) {}
+                applyDensity(cur);
+                return;
+            }
+            el = el.parentNode;
+        }
     });
 })();
 </script>
