Dark mode : pill toggle switch ☀️/🌙 + fix JS

Remplace le bouton emoji par un vrai switch pill CSS (track + thumb
glissant, soleil/lune qui s'estompent). État visuel entièrement piloté
par [data-theme="dark"] via CSS, JS se contente de toggler l'attribut.

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

global.css

@@ -739,13 +739,28 @@ p {
 [data-theme="dark"] .btn-icon-action.edit:hover   { background: rgba(59,130,246,.15); }
 [data-theme="dark"] .btn-icon-action.delete:hover { background: rgba(239,68,68,.1); }
 
-/* Toggle thème */
+/* ─── Pill toggle thème ────────────────────────────────────── */
-.theme-toggle {
+.theme-switch {
-  background: none; border: 1px solid var(--border-light);
+  display: inline-flex; align-items: center; gap: 5px;
-  border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1;
+  background: none; border: none; cursor: pointer;
-  padding: .28rem .45rem; color: var(--text-muted);
+  padding: 3px 5px; border-radius: 8px; transition: background .15s;
-  transition: background .15s, color .15s;
 }
-.theme-toggle:hover { background: #f1f5f9; color: var(--text-main); }
+.theme-switch:hover { background: #f1f5f9; }
-[data-theme="dark"] .theme-toggle { color: var(--text-muted); }
+[data-theme="dark"] .theme-switch:hover { background: rgba(255,255,255,.08); }
-[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.08); color: var(--text-main); }
+.ts-sun, .ts-moon { font-size: .85rem; line-height: 1; transition: opacity .2s; user-select: none; }
+[data-theme="dark"] .ts-sun { opacity: .3; }
+                    .ts-moon { opacity: .3; }
+[data-theme="dark"] .ts-moon { opacity: 1; }
+.ts-track {
+  position: relative; width: 36px; height: 20px;
+  background: #cbd5e1; border-radius: 999px;
+  flex-shrink: 0; transition: background .25s;
+}
+[data-theme="dark"] .ts-track { background: #2563eb; }
+.ts-thumb {
+  position: absolute; top: 3px; left: 3px;
+  width: 14px; height: 14px; border-radius: 50%;
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
+  transition: transform .25s cubic-bezier(.4,0,.2,1);
+}
+[data-theme="dark"] .ts-thumb { transform: translateX(16px); }

header.php

@@ -56,7 +56,11 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
     <?php endif; ?>
 
     <div class="pf-header-right">
-      <button class="theme-toggle" id="theme-toggle" title="Mode sombre / clair" onclick="toggleTheme()">🌙</button>
+      <button class="theme-switch" id="theme-toggle" onclick="toggleTheme()" title="Thème sombre / clair" aria-label="Basculer le thème">
+        <span class="ts-sun" aria-hidden="true">☀️</span>
+        <span class="ts-track"><span class="ts-thumb"></span></span>
+        <span class="ts-moon" aria-hidden="true">🌙</span>
+      </button>
 
       <?php if (isset($_SESSION['user'])): ?>
         <div class="pf-desktop-actions" style="display: flex; align-items: center; gap: 10px; border-left: 1px solid #cbd5e1; padding-left: 15px;">
@@ -121,19 +125,12 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
         return window.I18N[key] || key;
     }
 
-    // Thème clair/sombre
+    // Thème clair/sombre — état visuel géré entièrement par CSS via [data-theme="dark"]
     function toggleTheme(){
-      const html=document.documentElement;
+      const dark=document.documentElement.getAttribute('data-theme')==='dark';
-      const dark=html.getAttribute('data-theme')==='dark';
+      document.documentElement.setAttribute('data-theme',dark?'light':'dark');
-      html.setAttribute('data-theme',dark?'light':'dark');
       localStorage.setItem('hh-theme',dark?'light':'dark');
-      const btn=document.getElementById('theme-toggle');
-      if(btn)btn.textContent=dark?'🌙':'☀️';
     }
-    document.addEventListener('DOMContentLoaded',function(){
-      const btn=document.getElementById('theme-toggle');
-      if(btn)btn.textContent=document.documentElement.getAttribute('data-theme')==='dark'?'☀️':'🌙';
-    });
 
     // Gestion du menu mobile (Off-Canvas Sidebar)
     <?php if (isset($_SESSION['user'])): ?>