From 7f5d86449eaf5cf6f26226a0914dc8df2201f58a Mon Sep 17 00:00:00 2001
From: Alpinux <cedric.abonnel@gmail.com>
Date: Wed, 6 May 2026 11:36:53 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20s=C3=A9lecteur=20de=20largeur=20du=20co?=
 =?UTF-8?q?ntenu=20(S/M/L/=E2=88=9E)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajoute 4 boutons dans le header pour choisir la largeur du contenu :
- S : ~900 px  M : ~1200 px  L : ~1600 px  ∞ : plein écran
La préférence est mémorisée en localStorage et appliquée instantanément
via la CSS custom property --content-width sur <main>.

Closes #33

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/static/app.css      |  9 ++++++++-
 app/templates/base.html | 28 ++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/app/static/app.css b/app/static/app.css
index 253c92e..3eff4c6 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -49,8 +49,15 @@ header { background: var(--blue-dark); color: #fff; }
                    border: 1px solid rgba(255,255,255,.3); transition: background .15s, color .15s; }
 .btn-logout-icon:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
 
+.width-switcher { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
+.width-switcher button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
+  color: rgba(255,255,255,.6); border-radius: 4px; padding: .2rem .45rem; font-size: .72rem;
+  font-weight: 700; cursor: pointer; transition: background .15s, color .15s; line-height: 1.3; }
+.width-switcher button:hover { background: rgba(255,255,255,.18); 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 { margin: 2rem 1.5rem; padding: 0 0 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
+main { max-width: var(--content-width, none); margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
 
 /* ── 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 5084d28..05802c8 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -28,6 +28,12 @@
              value="{{ request.args.get('q', '') }}" aria-label="Recherche">
       <button type="submit" aria-label="Lancer la recherche">🔍</button>
     </form>
+    <div class="width-switcher" title="Largeur du contenu">
+      <button data-width="900"  title="Étroit (~900 px)">S</button>
+      <button data-width="1200" title="Normal (~1200 px)">M</button>
+      <button data-width="1600" title="Large (~1600 px)">L</button>
+      <button data-width=""     title="Plein écran">∞</button>
+    </div>
     <div class="header-user">
       {% if user %}
         <span class="user-chip" title="{{ user.name }}">
@@ -59,5 +65,27 @@
   </div>
 </footer>
 
+<script>
+(function () {
+  const KEY = 'content-width';
+  const WIDTHS = ['900', '1200', '1600', ''];
+  const btns = document.querySelectorAll('.width-switcher button');
+
+  function apply(val) {
+    document.documentElement.style.setProperty(
+      '--content-width', val ? val + 'px' : 'none'
+    );
+    btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === val));
+  }
+
+  apply(localStorage.getItem(KEY) ?? '');
+
+  btns.forEach(btn => btn.addEventListener('click', () => {
+    const val = btn.dataset.width;
+    localStorage.setItem(KEY, val);
+    apply(val);
+  }));
+})();
+</script>
 </body>
 </html>