diff --git a/app/static/app.css b/app/static/app.css
index 8591ef5..077462d 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -57,7 +57,10 @@ header { background: var(--blue-dark); color: #fff; }
.width-switcher button.ws-active { background: rgba(255,255,255,.25); color: #fff; border-color: rgba(255,255,255,.5); }
/* ── Mise en page ─────────────────────────────────────────────── */
-main { max-width: var(--content-width, none); margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
+main { width: 100%; margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
+html[data-cw="900"] main { max-width: 900px; }
+html[data-cw="1200"] main { max-width: 1200px; }
+html[data-cw="1600"] main { max-width: 1600px; }
/* ── Carte générique ──────────────────────────────────────────── */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.8rem; }
diff --git a/app/templates/base.html b/app/templates/base.html
index 5cbb21b..16ec6f3 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -7,7 +7,7 @@
@@ -72,17 +72,23 @@
(function () {
const KEY = 'content-width';
const btns = document.querySelectorAll('.width-switcher button');
+ const html = document.documentElement;
function applyActive(val) {
- btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === (val ?? '')));
+ btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === (val || '')));
}
applyActive(localStorage.getItem(KEY));
btns.forEach(btn => btn.addEventListener('click', () => {
const val = btn.dataset.width;
- try { localStorage.setItem(KEY, val); } catch(_) {}
- document.documentElement.style.setProperty('--content-width', val ? val + 'px' : 'none');
+ if (val) {
+ localStorage.setItem(KEY, val);
+ html.dataset.cw = val;
+ } else {
+ localStorage.removeItem(KEY);
+ delete html.dataset.cw;
+ }
applyActive(val);
}));
})();