Ajout nouveaux thèmes

index.php

@@ -17,31 +17,21 @@ $m3u_url    = htmlspecialchars($config["m3u_url"] ?? "");
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>GridTV — <?= $group_name ?></title>
 <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
+<link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
 <style>
+  /* Variables de layout — indépendantes du thème */
   :root {
-    --bg: #0a0b0d;
-    --surface: #111318;
-    --surface2: #181b22;
-    --border: #232733;
-    --border-bright: #2e3444;
-    --accent: #e8c842;
-    --accent2: #4a9eff;
-    --accent-live: #ff4444;
-    --text: #c8cdd8;
-    --text-dim: #5a6070;
-    --text-bright: #eef0f5;
     --channel-w: 160px;
     --row-h: 80px;
     --header-h: 52px;
   }
 
-  * { box-sizing: border-box; margin: 0; padding: 0; }
   html, body { height: 100%; }
 
   body {
     background: var(--bg);
     color: var(--text);
-    font-family: 'Barlow Condensed', sans-serif;
+    font-family: var(--font-ui);
     font-size: 14px;
     overflow: hidden;
     display: flex;
@@ -585,6 +575,27 @@ $m3u_url    = htmlspecialchars($config["m3u_url"] ?? "");
     .clock { font-size: 16px; }
   }
 
+  /* ═══════════════════════════════════════════
+     SÉLECTEUR DE THÈME
+  ═══════════════════════════════════════════ */
+  .theme-select {
+    background: transparent;
+    border: 1px solid var(--border-bright);
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    padding: 4px 8px;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: all 0.15s;
+    flex-shrink: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .theme-select:hover { border-color: var(--accent2); color: var(--accent2); }
+  .theme-select option { background: #111; color: #eee; font-family: sans-serif; }
+
   @media (max-width: 600px) {
     html, body { height: 100%; overflow: hidden; }
     body { overflow: hidden; }
@@ -642,6 +653,12 @@ $m3u_url    = htmlspecialchars($config["m3u_url"] ?? "");
     <button class="copy-btn" onclick="copyUrl('m3u')" title="Copier l'URL M3U">M3U</button>
 <?php endif; ?>
   </div>
+  <select class="theme-select" id="themeSelect" onchange="setTheme(this.value)" title="Thème">
+    <option value="default">⬛ Default</option>
+    <option value="magazine">📰 Magazine</option>
+    <option value="cyberpunk">🌆 Cyberpunk</option>
+    <option value="steampunk">⚙️ Steampunk</option>
+  </select>
   <div class="live-dot">LIVE</div>
 </div>
 
@@ -1007,6 +1024,20 @@ function moveTooltip(e) {
 }
 function hideTooltip() { document.getElementById('tooltip').classList.remove('visible'); }
 
+
+// ── THÈMES ────────────────────────────────────────────────────────────────────
+function setTheme(theme) {
+  document.getElementById('themeStylesheet').href = 'themes/' + theme + '.css';
+  localStorage.setItem('gridtv-theme', theme);
+  document.getElementById('themeSelect').value = theme;
+}
+
+function initTheme() {
+  const saved = localStorage.getItem('gridtv-theme') || 'default';
+  setTheme(saved);
+}
+initTheme();
+
 // ── LIVE UPDATES ──────────────────────────────────────────────────────────────
 function startLiveUpdates() {
   setInterval(() => { if (!isMobile()) positionNowLine(); }, 30000);