security: harden proxy.php with config whitelist, fix XSS via EPG innerHTML

2026-03-14 02:31:25 +01:00 · 2026-03-14 02:29:09 +01:00 · 2026-03-14 02:26:36 +01:00 · 2026-03-14 01:22:16 +01:00 · 2026-03-14 01:22:05 +01:00 · 2026-03-14 01:18:38 +01:00
36 changed files with 1430 additions and 1167 deletions
@@ -1,4 +1,2 @@
 config.json
 .DS_Store
 generate_epg.php
 epg.xml
@@ -40,8 +40,10 @@ This demo runs with sample XMLTV feeds to showcase the interface.
 - 📡 **Multi-EPG sources** — configure multiple EPG/M3U sources, switch from the topbar
 - 👤 **Personal EPG** — optionally let visitors use your instance with their own EPG/M3U URLs (saved in localStorage)
 - 🔍 **Search** — filter the grid by channel name or program title/synopsis (debounced)
 - ⭐ **Favorites** — pin channels to the top of the grid, persisted in localStorage
 - 🌍 **i18n** — auto-detects browser language, supports EN / FR / ES (add your own in `locales/`)
- ⚙️ **Guided setup** on first launch — no config files to edit manually
+- ⚙️ **Re-editable setup** — protected by an admin key, no SSH required to update config
 - 🔔 **Update notifications** — a badge appears in the topbar when a new release is available on GitHub
 - 🔄 **Auto-reload** EPG every 30 minutes
 - 0️⃣ **Zero JS dependencies** — vanilla PHP, hls.js loaded from CDN
@@ -172,6 +174,8 @@ You can re-open the setup page at any time using the admin key generated during
 http://guide.your-domain.com/setup.php
 ```
 Enter your admin key to unlock the configuration form. The key is stored in `config.json` under `admin_key` — if you lose it, you can retrieve it there via SSH.
 Or edit `config.json` directly:
 ```bash
@@ -206,8 +210,9 @@ nano /var/www/gridtv/config.json
 ```
 gridtv/
 ├── index.php            # Entry point
-├── setup.php            # First-launch + re-configuration page
+├── setup.php            # Setup + re-configuration (admin key protected)
 ├── proxy.php            # HTTP→HTTPS stream proxy
 ├── version.json         # Current version (used for update check)
 ├── config.example.json  # Config template
 ├── Dockerfile
 ├── docker-compose.yml
@@ -223,13 +228,24 @@ gridtv/
 │   └── steampunk.css
 └── src/
    ├── config.php       # Config loader, migration, locale detection
    ├── css/             # CSS modules (one file per feature)
    │   ├── base.css     # Variables, reset, global layout
    │   ├── topbar.css   # Topbar, nav, source switcher, theme selector
    │   ├── grid.css     # Grid, channels, programs, ruler, tooltip, loading
    │   ├── mobile.css   # Mobile list view
    │   ├── player.css   # HLS PiP player
    │   ├── modals.css   # Personal EPG modal
    │   ├── search.css   # Search bar + highlight
    │   ├── program.css  # Program info modal + midnight marker
    │   ├── favorites.css# Favorite button + separator
    │   └── updater.css  # Update notification badge
    ├── tpl/             # HTML templates
-    │   ├── head.php     # DOCTYPE, <head>, CSS
+    │   ├── head.php     # DOCTYPE, <head>, includes CSS modules
    │   ├── topbar.php   # Topbar (nav, source switcher, search, theme)
    │   ├── grid.php     # Grid + mobile + PiP + overlays
    │   ├── modals.php   # Program info modal + Personal EPG modal
    │   └── footer.php   # JS modules loader, </body></html>
-    └── js/              # JavaScript modules
+    └── js/              # JavaScript modules (one file per feature)
        ├── config.js    # Constants + PHP-injected vars (incl. locale)
        ├── utils.js     # Helpers, clock, EPG fetch
        ├── epg.js       # Grid rendering
@@ -241,6 +257,8 @@ gridtv/
        ├── themes.js    # Theme switcher
        ├── search.js    # Search + filter (debounced)
        ├── program.js   # Program info modal + IMDb link
        ├── favorites.js # Favorites (localStorage)
        ├── updater.js   # GitHub update checker
        └── live.js      # Live updates + responsive
 ```
@@ -345,15 +363,16 @@ GNU Affero General Public License v3.0 (AGPLv3)
 - Theme system (4 built-in themes)
 - Multi-EPG sources with topbar switcher
 - Personal EPG (localStorage)
- Modular codebase (src/tpl + src/js)
+- Modular codebase (src/tpl + src/js + src/css)
 - Docker support
 - **Search** — filter grid by channel name or program title/synopsis (debounced)
 - **Date in timebar** — midnight markers with day/date in the ruler
 - **Program popup** — full details + IMDb search link on any program click
 - **i18n** — EN / FR / ES with browser auto-detection, extensible via locales/
 - **Favorites** — pin channels to the top of the grid (localStorage)
 - **Setup re-editable** — protected by an admin key, auto-generated on first setup
 - **Update notifications** — topbar badge links to latest GitHub release
 ### 🔜 Coming soon
 - **Favorites** — pin channels to the top of the grid (localStorage)
 - **Setup re-editable** — reopen setup.php with an admin key, no SSH required
 - **Dark/Light auto mode** — follow system preference when using the default theme
 - **Grid export** — export today's schedule as PDF or image
@@ -1,5 +0,0 @@
 {
  "group_name": "MonGroupe TV",
  "epg_url": "http://votre-serveur/api/xmltv.xml",
  "m3u_url": "http://votre-serveur/api/channels.m3u"
 }
@@ -49,5 +49,7 @@
  "shift_back": "◄ 1h",
  "shift_fwd": "1h ►",
  "fav_add": "Add to favorites",
-  "fav_remove": "Remove from favorites"
+  "fav_remove": "Remove from favorites",
  "update_available": "&#8593; Update available:",
  "update_title": "Click to download the latest version"
 }
@@ -49,5 +49,7 @@
  "shift_back": "◄ 1h",
  "shift_fwd": "1h ►",
  "fav_add": "Agregar a favoritos",
-  "fav_remove": "Quitar de favoritos"
+  "fav_remove": "Quitar de favoritos",
  "update_available": "&#8593; Actualizacion disponible:",
  "update_title": "Haz clic para descargar la ultima version"
 }
@@ -49,5 +49,7 @@
  "shift_back": "◄ 1h",
  "shift_fwd": "1h ►",
  "fav_add": "Ajouter aux favoris",
-  "fav_remove": "Retirer des favoris"
+  "fav_remove": "Retirer des favoris",
  "update_available": "&#8593; Mise a jour disponible :",
  "update_title": "Cliquez pour telecharger la derniere version"
 }
@@ -0,0 +1,24 @@
 {
  "name": "GridTV",
  "short_name": "GridTV",
  "description": "Self-hosted IPTV TV guide",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0a0b0d",
  "theme_color": "#0a0b0d",
  "orientation": "any",
  "icons": [
    {
      "src": "assets/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "assets/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
 }
@@ -1,18 +1,64 @@
 <?php
 /**
- * GridTV — proxy.php (Apache + cURL)
+ * GridTV — proxy.php
 * Proxy HTTP->HTTPS restreint aux hotes autorises dans config.json
 */
 // ── Charger la whitelist depuis config.json ────────────────────────────────────
 $config_path = __DIR__ . '/config.json';
 $allowed_hosts = [];
 if (file_exists($config_path)) {
    $config = json_decode(file_get_contents($config_path), true);
    foreach ($config['epg_sources'] ?? [] as $src) {
        foreach (['epg_url', 'm3u_url'] as $key) {
            if (!empty($src[$key])) {
                $host = parse_url($src[$key], PHP_URL_HOST);
                if ($host) $allowed_hosts[] = strtolower($host);
            }
        }
    }
 }
 // ── Valider l'URL demandee ─────────────────────────────────────────────────────
 $url = $_GET['url'] ?? '';
 if (empty($url) || !preg_match('#^https?://#i', $url)) {
    http_response_code(400); die('Invalid URL');
 }
 $parsed = parse_url($url);
 $host   = strtolower($parsed['host'] ?? '');
 // Bloquer si hote absent de la whitelist
 if (empty($allowed_hosts) || !in_array($host, $allowed_hosts, true)) {
    http_response_code(403); die('Host not allowed');
 }
 // Bloquer les IPs privees, loopback, metadata cloud
 function is_private_host(string $host): bool {
    // Loopback / localhost
    if ($host === 'localhost' || $host === '::1') return true;
    // Metadata AWS/GCP/Azure
    if ($host === '169.254.169.254' || $host === 'metadata.google.internal') return true;
    // Resoudre et verifier si IP privee
    $ip = filter_var($host, FILTER_VALIDATE_IP) ? $host : gethostbyname($host);
    if (!filter_var($ip, FILTER_VALIDATE_IP)) return true; // echec resolution
    return !filter_var($ip, FILTER_VALIDATE_IP, [
        'flags' => FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE
    ]);
 }
 // Note : on autorise les IPs privees si elles sont explicitement dans config.json
 // (cas Tunarr/Jellyfin sur le reseau local) — on bloque seulement les hotes
 // qui ne sont PAS dans la whitelist, ce qui couvre deja le SSRF.
 // ── Proxy ─────────────────────────────────────────────────────────────────────
 $base   = preg_replace('#[^/]*(\?.*)?$#', '', $url);
-$origin = parse_url($url, PHP_URL_SCHEME) . '://' . parse_url($url, PHP_URL_HOST);
+$origin = $parsed['scheme'] . '://' . $parsed['host'];
-$port   = parse_url($url, PHP_URL_PORT);
+$port   = $parsed['port'] ?? null;
 if ($port) $origin .= ':' . $port;
-$path = parse_url($url, PHP_URL_PATH) ?? '';
+$path = $parsed['path'] ?? '';
 $is_segment = preg_match('#\.(ts|aac|mp4|m4s|fmp4)(\?|$)#i', $path);
 header('Access-Control-Allow-Origin: *');
@@ -21,7 +67,6 @@ header('Cache-Control: no-cache');
 $ua = $_SERVER['HTTP_USER_AGENT'] ?? 'Mozilla/5.0';
 if ($is_segment) {
    // Segment binaire — stream via cURL chunk par chunk
    header('Content-Type: video/MP2T');
    header('X-Content-Type-Options: nosniff');
@@ -35,28 +80,20 @@ if ($is_segment) {
        CURLOPT_HTTPHEADER     => ['Accept: */*'],
        CURLOPT_RETURNTRANSFER => false,
        CURLOPT_WRITEFUNCTION  => function($ch, $data) {
-            echo $data;
+            echo $data; flush(); return strlen($data);
            flush();
            return strlen($data);
        },
        CURLOPT_HEADERFUNCTION => function($ch, $header) {
            $h = trim($header);
-            if (preg_match('/^Content-Type:/i', $h)) {
+            if (preg_match('/^Content-Type:/i', $h)) header($h);
                header($h);
            }
            return strlen($header);
        },
    ]);
-
+    $ok   = curl_exec($ch);
    $ok = curl_exec($ch);
    $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
-    if (!$ok || $code >= 400) {
+    if (!$ok || $code >= 400) http_response_code($code ?: 502);
        http_response_code($code ?: 502);
    }
    curl_close($ch);
 } else {
    // Playlist .m3u8 — fetch + réécriture URLs
    $ch = curl_init($url);
    curl_setopt_array($ch, [
        CURLOPT_FOLLOWLOCATION => true,
@@ -70,8 +107,7 @@ if ($is_segment) {
    curl_close($ch);
    if ($body === false || $code >= 400) {
-        http_response_code($code ?: 502);
+        http_response_code($code ?: 502); die("Upstream error $code");
        die("Upstream error $code");
    }
    header('Content-Type: application/vnd.apple.mpegurl');
@@ -85,7 +121,7 @@ if ($is_segment) {
    foreach (explode("\n", $body) as $line) {
        $line = rtrim($line);
        if ($line === '' || $line[0] === '#') {
-            $line = preg_replace_callback('/URI="([^"]+)"/', function($m) use ($base, $proxy_base) {
+            $line = preg_replace_callback('/URI="([^"]+)"/', function($m) use ($base, $origin, $proxy_base) {
                $seg = strpos($m[1], 'http') === 0 ? $m[1]
                     : ($m[1][0] === '/' ? $origin . $m[1] : $base . $m[1]);
                return 'URI="' . $proxy_base . urlencode($seg) . '"';
@@ -1,10 +1,9 @@
 <?php
 // ── Migration automatique ancien format → nouveau ─────────────────────────────
 $config_path = __DIR__ . '/config.json';
 // Migration automatique ancien format
 if (file_exists($config_path)) {
    $existing = json_decode(file_get_contents($config_path), true);
    // Vieille instance : epg_url à la racine, pas de epg_sources
    if (isset($existing['epg_url']) && !isset($existing['epg_sources'])) {
        $existing['epg_sources'] = [[
            'name'    => 'Main',
@@ -15,18 +14,45 @@ if (file_exists($config_path)) {
        unset($existing['epg_url'], $existing['m3u_url']);
        file_put_contents($config_path, json_encode($existing, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
    }
-    http_response_code(403);
+    // Bootstrap : config existante sans cle admin -> on en genere une maintenant
-    die('Configuration déjà effectuée. Modifiez config.json via SSH pour changer les paramètres.');
+    if (empty($existing['admin_key'])) {
        $existing['admin_key'] = bin2hex(random_bytes(16));
        file_put_contents($config_path, json_encode($existing, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
    }
 }
-$error   = '';
+$is_first_setup = !file_exists($config_path);
-$success = false;
+$existing       = $is_first_setup ? [] : json_decode(file_get_contents($config_path), true);
 $admin_key      = $existing['admin_key'] ?? null;
-if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+$mode    = 'setup';
 $error   = '';
 $new_key = '';
 if (!$is_first_setup) {
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['admin_key_input'])) {
        if (trim($_POST['admin_key_input']) === $admin_key) {
            $mode = 'setup';
        } else {
            $mode  = 'lock';
            $error = 'Invalid admin key.';
        }
    } elseif ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['group_name'])) {
        if (trim($_POST['admin_key_hidden'] ?? '') !== $admin_key) {
            $mode  = 'lock';
            $error = 'Invalid admin key.';
        } else {
            $mode = 'setup';
        }
    } else {
        $mode = 'lock';
    }
 }
 if ($mode === 'setup' && $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['group_name'])) {
    $group_name         = trim($_POST['group_name'] ?? '');
    $allow_personal_epg = isset($_POST['allow_personal_epg']);
    // Récupérer les sources EPG dynamiques
    $names    = $_POST['source_name']    ?? [];
    $epg_urls = $_POST['source_epg_url'] ?? [];
    $m3u_urls = $_POST['source_m3u_url'] ?? [];
@@ -37,13 +63,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $m3u_url = trim($m3u_urls[$i] ?? '');
        if (empty($epg_url)) continue;
        if (!filter_var($epg_url, FILTER_VALIDATE_URL)) {
-            $error = "URL EPG invalide pour la source « $name »."; break;
+            $error = "Invalid EPG URL for source \"$name\"."; break;
        }
        if (!empty($m3u_url) && !filter_var($m3u_url, FILTER_VALIDATE_URL)) {
-            $error = "URL M3U invalide pour la source « $name »."; break;
+            $error = "Invalid M3U URL for source \"$name\"."; break;
        }
        $epg_sources[] = [
-            'name'    => trim($name) ?: "Source " . ($i + 1),
+            'name'    => trim($name) ?: 'Source ' . ($i + 1),
            'epg_url' => $epg_url,
            'm3u_url' => $m3u_url,
        ];
@@ -51,303 +77,224 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (empty($error)) {
        if (empty($group_name)) {
-            $error = 'Le nom du groupe est obligatoire.';
+            $error = 'Group name is required.';
        } elseif (empty($epg_sources)) {
-            $error = 'Au moins une source EPG est obligatoire.';
+            $error = 'At least one EPG source is required.';
        } else {
-            $config = [
+            $new_key = $is_first_setup ? strtoupper(bin2hex(random_bytes(8))) : $admin_key;
            $config  = [
                'group_name'         => $group_name,
                'epg_sources'        => $epg_sources,
                'allow_personal_epg' => $allow_personal_epg,
                'admin_key'          => $new_key,
            ];
-            $written = file_put_contents(
+            $written = file_put_contents($config_path, json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
                $config_path,
                json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)
            );
            if ($written === false) {
-                $error = 'Impossible d\'écrire config.json. Vérifiez les permissions (chmod 775 .).';
+                $error = 'Cannot write config.json. Check permissions (chmod 775 .).';
            } else {
-                $success = true;
+                $mode = 'success';
            }
        }
    }
 }
 $prefill_group   = $_POST['group_name'] ?? $existing['group_name']     ?? '';
 $prefill_sources = $existing['epg_sources']                            ?? [];
 $prefill_epg     = !empty($existing['allow_personal_epg']);
 $submitted_key   = trim($_POST['admin_key_input'] ?? $_POST['admin_key_hidden'] ?? '');
 ?>
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>GridTV — Configuration</title>
+<title>GridTV — Setup</title>
 <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
 <style>
  :root {
-    --bg: #0a0b0d; --surface: #111318; --surface2: #181b22;
+    --bg:#0a0b0d;--surface:#111318;--surface2:#181b22;
-    --border: #232733; --border-bright: #2e3444;
+    --border:#232733;--border-bright:#2e3444;
-    --accent: #e8c842; --accent2: #4a9eff;
+    --accent:#e8c842;--accent2:#4a9eff;
-    --text: #c8cdd8; --text-dim: #5a6070; --text-bright: #eef0f5;
+    --text:#c8cdd8;--text-dim:#5a6070;--text-bright:#eef0f5;
-    --error: #ff4444; --success: #44cc77;
+    --error:#ff4444;--success:#44cc77;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    min-height: 100%; background: var(--bg); color: var(--text);
    font-family: 'Barlow Condensed', sans-serif;
    display: flex; align-items: flex-start; justify-content: center;
  }
  .setup-card {
    width: 100%; max-width: 580px;
    background: var(--surface); border: 1px solid var(--border-bright);
    padding: 40px 40px 36px; margin: 40px 16px;
  }
  .setup-logo {
    font-family: 'Share Tech Mono', monospace; font-size: 22px;
    color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px;
  }
  .setup-logo span { color: var(--text-dim); margin: 0 6px; }
  .setup-subtitle {
    font-size: 13px; color: var(--text-dim); letter-spacing: 0.05em;
    margin-bottom: 32px; line-height: 1.5;
  }
  .form-group { margin-bottom: 22px; }
  .section-title {
    font-family: 'Share Tech Mono', monospace; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent); margin: 32px 0 16px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  label {
    display: block; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-dim);
    margin-bottom: 7px; font-family: 'Share Tech Mono', monospace;
  }
  label .required { color: var(--accent); margin-left: 3px; }
  label .optional { color: var(--text-dim); font-size: 10px; text-transform: none; letter-spacing: 0; margin-left: 4px; opacity: 0.6; }
  input[type="text"], input[type="url"] {
    width: 100%; background: var(--surface2); border: 1px solid var(--border-bright);
    color: var(--text-bright); font-family: 'Share Tech Mono', monospace;
    font-size: 13px; padding: 10px 12px; outline: none; transition: border-color 0.15s;
  }
  input[type="text"]:focus, input[type="url"]:focus { border-color: var(--accent); }
  input::placeholder { color: var(--text-dim); opacity: 0.5; }
  .hint { font-size: 11px; color: var(--text-dim); margin-top: 5px; line-height: 1.4; }
  /* Sources EPG */
  .sources-list { display: flex; flex-direction: column; gap: 16px; }
  .source-block {
    background: var(--surface2); border: 1px solid var(--border);
    padding: 16px; position: relative;
  }
  .source-block .source-num {
    font-family: 'Share Tech Mono', monospace; font-size: 10px;
    color: var(--accent); letter-spacing: 0.1em; margin-bottom: 12px;
  }
  .source-fields { display: grid; gap: 10px; }
  .source-remove {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; color: var(--text-dim);
    font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 5px;
  }
  .source-remove:hover { color: var(--error); }
  .btn-add-source {
    width: 100%; background: none; border: 1px dashed var(--border-bright);
    color: var(--accent2); font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 10px; cursor: pointer;
    margin-top: 8px; transition: border-color 0.15s, color 0.15s;
  }
  .btn-add-source:hover { border-color: var(--accent2); color: var(--text-bright); }
  /* Toggle personal EPG */
  .toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface2); border: 1px solid var(--border);
    padding: 14px 16px; margin-bottom: 22px;
  }
  .toggle-label { font-size: 13px; color: var(--text); line-height: 1.4; }
  .toggle-label small { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .toggle {
    position: relative; width: 40px; height: 22px; flex-shrink: 0; margin-left: 16px;
  }
  .toggle input { opacity: 0; width: 0; height: 0; }
  .toggle-slider {
    position: absolute; inset: 0; background: var(--border-bright);
    cursor: pointer; transition: background 0.2s; border-radius: 22px;
  }
  .toggle-slider:before {
    content: ''; position: absolute; width: 16px; height: 16px;
    left: 3px; top: 3px; background: var(--text-dim);
    transition: transform 0.2s, background 0.2s; border-radius: 50%;
  }
  .toggle input:checked + .toggle-slider { background: var(--accent); }
  .toggle input:checked + .toggle-slider:before { transform: translateX(18px); background: #000; }
  .btn-submit {
    width: 100%; background: var(--accent); color: #000; border: none;
    font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; padding: 13px;
    cursor: pointer; margin-top: 8px; transition: opacity 0.15s;
  }
  .btn-submit:hover { opacity: 0.85; }
  .alert {
    padding: 12px 14px; font-size: 13px; margin-bottom: 24px;
    line-height: 1.5; border-left: 3px solid;
  }
  .alert-error  { background: rgba(255,68,68,0.08);  border-color: var(--error);   color: var(--error);   }
  .alert-success{ background: rgba(68,204,119,0.08); border-color: var(--success); color: var(--success); }
  .success-actions { text-align: center; margin-top: 28px; }
  .btn-go {
    display: inline-block; background: var(--accent); color: #000;
    font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; padding: 13px 40px;
    text-decoration: none; transition: opacity 0.15s;
  }
  .btn-go:hover { opacity: 0.85; }
  .setup-note {
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-dim); line-height: 1.6;
  }
  .setup-note code {
    font-family: 'Share Tech Mono', monospace; background: var(--surface2);
    padding: 1px 5px; border: 1px solid var(--border); color: var(--accent2); font-size: 11px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'Barlow Condensed',sans-serif;display:flex;align-items:flex-start;justify-content:center;}
  .setup-card{width:100%;max-width:580px;background:var(--surface);border:1px solid var(--border-bright);padding:40px 40px 36px;margin:40px 16px;}
  .setup-logo{font-family:'Share Tech Mono',monospace;font-size:22px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
  .setup-logo span{color:var(--text-dim);margin:0 6px;}
  .setup-subtitle{font-size:13px;color:var(--text-dim);letter-spacing:.05em;margin-bottom:32px;line-height:1.5;}
  .form-group{margin-bottom:22px;}
  .section-title{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:32px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border);}
  label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;font-family:'Share Tech Mono',monospace;}
  label .required{color:var(--accent);margin-left:3px;}
  label .optional{color:var(--text-dim);font-size:10px;text-transform:none;letter-spacing:0;margin-left:4px;opacity:.6;}
  input[type=text],input[type=url],input[type=password]{width:100%;background:var(--surface2);border:1px solid var(--border-bright);color:var(--text-bright);font-family:'Share Tech Mono',monospace;font-size:13px;padding:10px 12px;outline:none;transition:border-color .15s;}
  input:focus{border-color:var(--accent);}
  input::placeholder{color:var(--text-dim);opacity:.5;}
  .hint{font-size:11px;color:var(--text-dim);margin-top:5px;line-height:1.4;}
  .sources-list{display:flex;flex-direction:column;gap:16px;}
  .source-block{background:var(--surface2);border:1px solid var(--border);padding:16px;position:relative;}
  .source-block .source-num{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:.1em;margin-bottom:12px;}
  .source-fields{display:grid;gap:10px;}
  .source-remove{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;line-height:1;padding:2px 5px;}
  .source-remove:hover{color:var(--error);}
  .btn-add-source{width:100%;background:none;border:1px dashed var(--border-bright);color:var(--accent2);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:10px;cursor:pointer;margin-top:8px;transition:border-color .15s,color .15s;}
  .btn-add-source:hover{border-color:var(--accent2);color:var(--text-bright);}
  .toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);padding:14px 16px;margin-bottom:22px;}
  .toggle-label{font-size:13px;color:var(--text);line-height:1.4;}
  .toggle-label small{display:block;font-size:11px;color:var(--text-dim);margin-top:2px;}
  .toggle{position:relative;width:40px;height:22px;flex-shrink:0;margin-left:16px;}
  .toggle input{opacity:0;width:0;height:0;}
  .toggle-slider{position:absolute;inset:0;background:var(--border-bright);cursor:pointer;transition:background .2s;border-radius:22px;}
  .toggle-slider:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--text-dim);transition:transform .2s,background .2s;border-radius:50%;}
  .toggle input:checked+.toggle-slider{background:var(--accent);}
  .toggle input:checked+.toggle-slider:before{transform:translateX(18px);background:#000;}
  .btn-submit{width:100%;background:var(--accent);color:#000;border:none;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:13px;cursor:pointer;margin-top:8px;transition:opacity .15s;}
  .btn-submit:hover{opacity:.85;}
  .alert{padding:12px 14px;font-size:13px;margin-bottom:24px;line-height:1.5;border-left:3px solid;}
  .alert-error{background:rgba(255,68,68,.08);border-color:var(--error);color:var(--error);}
  .alert-success{background:rgba(68,204,119,.08);border-color:var(--success);color:var(--success);}
  .success-actions{text-align:center;margin-top:28px;}
  .btn-go{display:inline-block;background:var(--accent);color:#000;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:13px 40px;text-decoration:none;transition:opacity .15s;}
  .btn-go:hover{opacity:.85;}
  .key-box{background:var(--surface2);border:1px solid var(--accent);padding:18px 20px;margin:24px 0;text-align:center;}
  .key-label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px;}
  .key-value{font-family:'Share Tech Mono',monospace;font-size:22px;color:var(--accent);letter-spacing:.15em;word-break:break-all;}
  .key-warning{font-size:11px;color:var(--text-dim);margin-top:10px;line-height:1.5;}
  .key-warning strong{color:var(--error);}
  .lock-screen{text-align:center;padding:10px 0 20px;}
  .lock-icon{font-size:36px;margin-bottom:16px;}
  .lock-title{font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:.1em;color:var(--text);margin-bottom:8px;}
  .lock-sub{font-size:12px;color:var(--text-dim);margin-bottom:24px;line-height:1.5;}
  .lock-form{display:flex;gap:8px;}
  .lock-form input{flex:1;}
  .setup-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);line-height:1.6;}
  .setup-note code{font-family:'Share Tech Mono',monospace;background:var(--surface2);padding:1px 5px;border:1px solid var(--border);color:var(--accent2);font-size:11px;}
 </style>
 </head>
 <body>
 <div class="setup-card">
  <div class="setup-logo">Grid<span>/</span>TV</div>
  <div class="setup-subtitle">
    Bienvenue sur GridTV — votre guide TV IPTV.<br>
    Configurez votre instance en remplissant les champs ci-dessous.
  </div>
-  <?php if ($error): ?>
+  <?php if ($mode === 'lock'): ?>
-    <div class="alert alert-error"><?= htmlspecialchars($error) ?></div>
+    <div class="setup-subtitle">Enter your admin key to access the configuration.</div>
-  <?php endif; ?>
+    <?php if ($error): ?><div class="alert alert-error"><?= htmlspecialchars($error) ?></div><?php endif; ?>
    <div class="lock-screen">
      <div class="lock-icon">&#128274;</div>
      <div class="lock-title">Configuration locked</div>
      <div class="lock-sub">GridTV is already configured.<br>Enter your admin key to edit the settings.</div>
      <form method="POST" action="setup.php">
        <div class="lock-form">
          <input type="password" name="admin_key_input" placeholder="Your admin key" autofocus autocomplete="off">
          <button type="submit" class="btn-submit" style="width:auto;padding:10px 20px;">Unlock</button>
        </div>
      </form>
    </div>
-  <?php if ($success): ?>
+  <?php elseif ($mode === 'success'): ?>
-    <div class="alert alert-success">
+    <div class="setup-subtitle">Configuration saved successfully.</div>
-      ✓ Configuration enregistrée dans <code>config.json</code>.<br>
+    <div class="alert alert-success">&#10003; Settings saved to <code>config.json</code>.</div>
-      Cette page ne sera plus accessible. Pour modifier la config, éditez <code>config.json</code> via SSH.
+    <?php if ($is_first_setup): ?>
-    </div>
+    <div class="key-box">
-    <div class="success-actions">
+      <div class="key-label">Your admin key</div>
-      <a href="index.php" class="btn-go">Ouvrir GridTV →</a>
+      <div class="key-value"><?= htmlspecialchars($new_key) ?></div>
      <div class="key-warning"><strong>Save this key now.</strong> It will not be shown again.<br>You will need it to access this setup page in the future.</div>
    </div>
    <?php else: ?>
    <div class="alert alert-success" style="margin-top:0">Your admin key is unchanged.</div>
    <?php endif; ?>
    <div class="success-actions"><a href="index.php" class="btn-go">Open GridTV &rarr;</a></div>
  <?php else: ?>
-
+    <div class="setup-subtitle">
-  <form method="POST" action="setup.php">
+      <?= $is_first_setup ? 'Welcome to GridTV. Fill in the fields below to get started.' : 'Edit your GridTV configuration.' ?>
    <div class="form-group">
      <label>Nom du groupe TV <span class="required">*</span></label>
      <input type="text" name="group_name"
             value="<?= htmlspecialchars($_POST['group_name'] ?? '') ?>"
             placeholder="Ex: JohnnyBeGood, MaTV, FamilleTV..."
             required>
      <div class="hint">S'affiche en haut à gauche dans la topbar.</div>
    </div>
    <?php if ($error): ?><div class="alert alert-error"><?= htmlspecialchars($error) ?></div><?php endif; ?>
-    <div class="section-title">Sources EPG</div>
+    <form method="POST" action="setup.php">
      <?php if (!$is_first_setup): ?>
        <input type="hidden" name="admin_key_hidden" value="<?= htmlspecialchars($submitted_key ?: $admin_key) ?>">
      <?php endif; ?>
-    <div class="sources-list" id="sourcesList">
+      <div class="form-group">
-      <div class="source-block" data-index="0">
+        <label>TV Group Name <span class="required">*</span></label>
-        <div class="source-num">SOURCE 1</div>
+        <input type="text" name="group_name" value="<?= htmlspecialchars($prefill_group) ?>" placeholder="e.g. JohnnyBeGood, MyTV, FamilyTV..." required>
-        <button type="button" class="source-remove" onclick="removeSource(this)" style="display:none">✕</button>
+        <div class="hint">Displayed top-left in the topbar.</div>
-        <div class="source-fields">
+      </div>
-          <div>
+
-            <label>Nom de la source</label>
+      <div class="section-title">EPG Sources</div>
-            <input type="text" name="source_name[]" value="Main" placeholder="Ex: Main, Sports, Films...">
+      <div class="sources-list" id="sourcesList">
-          </div>
+        <?php
-          <div>
+        $sources_to_show = !empty($prefill_sources) ? $prefill_sources : [['name'=>'Main','epg_url'=>'','m3u_url'=>'']];
-            <label>URL EPG (XMLTV) <span class="required">*</span></label>
+        foreach ($sources_to_show as $i => $src): ?>
-            <input type="url" name="source_epg_url[]" placeholder="http://votre-serveur/api/xmltv.xml" required>
+        <div class="source-block" data-index="<?= $i ?>">
-          </div>
+          <div class="source-num">SOURCE <?= $i + 1 ?></div>
-          <div>
+          <button type="button" class="source-remove" onclick="removeSource(this)"<?= count($sources_to_show) === 1 ? ' style="display:none"' : '' ?>>&#10005;</button>
-            <label>URL M3U <span class="optional">(optionnel)</span></label>
+          <div class="source-fields">
-            <input type="url" name="source_m3u_url[]" placeholder="http://votre-serveur/api/channels.m3u">
+            <div>
-            <div class="hint">Utilisé par le lecteur intégré pour matcher les chaînes.</div>
+              <label>Source name</label>
              <input type="text" name="source_name[]" value="<?= htmlspecialchars($src['name'] ?? '') ?>" placeholder="e.g. Main, Sports, Movies...">
            </div>
            <div>
              <label>EPG URL (XMLTV) <span class="required">*</span></label>
              <input type="url" name="source_epg_url[]" value="<?= htmlspecialchars($src['epg_url'] ?? '') ?>" placeholder="http://your-server/api/xmltv.xml">
            </div>
            <div>
              <label>M3U URL <span class="optional">(optional)</span></label>
              <input type="url" name="source_m3u_url[]" value="<?= htmlspecialchars($src['m3u_url'] ?? '') ?>" placeholder="http://your-server/api/channels.m3u">
              <div class="hint">Used by the built-in player to match channels to streams.</div>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
-    </div>
+      <button type="button" class="btn-add-source" onclick="addSource()">+ Add EPG source</button>
-    <button type="button" class="btn-add-source" onclick="addSource()">+ Ajouter une source EPG</button>
+      <div class="section-title">Options</div>
-
+      <div class="toggle-row">
-    <div class="section-title">Options</div>
+        <div class="toggle-label">
-
+          Allow personal EPG
-    <div class="toggle-row">
+          <small>Visitors can use your instance with their own EPG/M3U URLs.</small>
-      <div class="toggle-label">
+        </div>
-        Autoriser les EPG personnels
+        <label class="toggle">
-        <small>Les visiteurs peuvent utiliser votre instance avec leur propre EPG/M3U.</small>
+          <input type="checkbox" name="allow_personal_epg" id="allowPersonalEpg"<?= $prefill_epg ? ' checked' : '' ?>>
          <span class="toggle-slider"></span>
        </label>
      </div>
      <label class="toggle">
        <input type="checkbox" name="allow_personal_epg" id="allowPersonalEpg">
        <span class="toggle-slider"></span>
      </label>
    </div>
-    <button type="submit" class="btn-submit">Enregistrer la configuration</button>
+      <button type="submit" class="btn-submit">Save configuration</button>
-
+    </form>
  </form>
  <?php endif; ?>
  <div class="setup-note">
-    <strong>Note :</strong> La configuration est stockée dans <code>config.json</code> sur le serveur.
+    <strong>Note:</strong> Configuration is stored in <code>config.json</code> on the server.
-    Ce fichier est exclu du dépôt Git (<code>.gitignore</code>).
+    This file is excluded from the Git repository (<code>.gitignore</code>).
    Pour modifier les paramètres ultérieurement, éditez ce fichier directement via SSH.
  </div>
 </div>
 <script>
-let sourceCount = 1;
+let sourceCount = document.querySelectorAll('.source-block').length;
 function addSource() {
  sourceCount++;
  const list = document.getElementById('sourcesList');
  const div  = document.createElement('div');
-  div.className   = 'source-block';
+  div.className = 'source-block';
  div.dataset.index = sourceCount - 1;
  div.innerHTML = `
    <div class="source-num">SOURCE ${sourceCount}</div>
-    <button type="button" class="source-remove" onclick="removeSource(this)">✕</button>
+    <button type="button" class="source-remove" onclick="removeSource(this)">&#10005;</button>
    <div class="source-fields">
-      <div>
+      <div><label>Source name</label><input type="text" name="source_name[]" placeholder="e.g. Sports, Movies..."></div>
-        <label>Nom de la source</label>
+      <div><label>EPG URL (XMLTV) <span class="required">*</span></label><input type="url" name="source_epg_url[]" placeholder="http://your-server/api/xmltv.xml"></div>
-        <input type="text" name="source_name[]" placeholder="Ex: Sports, Films...">
+      <div><label>M3U URL <span class="optional">(optional)</span></label><input type="url" name="source_m3u_url[]" placeholder="http://your-server/api/channels.m3u"><div class="hint">Used by the built-in player to match channels to streams.</div></div>
      </div>
      <div>
        <label>URL EPG (XMLTV) <span class="required">*</span></label>
        <input type="url" name="source_epg_url[]" placeholder="http://votre-serveur/api/xmltv.xml">
      </div>
      <div>
        <label>URL M3U <span class="optional">(optionnel)</span></label>
        <input type="url" name="source_m3u_url[]" placeholder="http://votre-serveur/api/channels.m3u">
        <div class="hint">Utilisé par le lecteur intégré pour matcher les chaînes.</div>
      </div>
    </div>`;
  list.appendChild(div);
  updateRemoveButtons();
 }
-
+function removeSource(btn) { btn.closest('.source-block').remove(); renumberSources(); updateRemoveButtons(); }
-function removeSource(btn) {
+function renumberSources() { document.querySelectorAll('.source-block').forEach((b,i) => b.querySelector('.source-num').textContent = `SOURCE ${i+1}`); }
-  btn.closest('.source-block').remove();
+function updateRemoveButtons() { const b = document.querySelectorAll('.source-block'); b.forEach(bl => bl.querySelector('.source-remove').style.display = b.length > 1 ? '' : 'none'); }
  renumberSources();
  updateRemoveButtons();
 }
 function renumberSources() {
  document.querySelectorAll('.source-block').forEach((block, i) => {
    block.querySelector('.source-num').textContent = `SOURCE ${i + 1}`;
  });
 }
 function updateRemoveButtons() {
  const blocks = document.querySelectorAll('.source-block');
  blocks.forEach(block => {
    block.querySelector('.source-remove').style.display = blocks.length > 1 ? '' : 'none';
  });
 }
 </script>
 </body>
 </html>
@@ -0,0 +1,36 @@
 /* Variables de base — surchargées par le fichier thème */
  :root {
    color-scheme: dark;
    --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;
    --prog-bg: #141820;
    --prog-border: #1e2a3a;
    --prog-live-bg: #0d2040;
    --prog-live-border: #4a9eff;
    --font-ui: 'Barlow Condensed', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    --channel-w: 160px;
    --row-h: 80px;
    --header-h: 52px;
  }
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
@@ -0,0 +1,16 @@
 /* ── FAVORITES ───────────────────────────────────────────────────────────── */
  .fav-btn {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; line-height: 1;
    margin-left: auto; padding: 2px 4px; flex-shrink: 0;
    transition: color .15s, transform .15s;
    opacity: 0;
  }
  .channel-cell:hover .fav-btn { opacity: 1; }
  .fav-btn.is-fav { color: var(--accent); opacity: 1; }
  .fav-btn:hover { transform: scale(1.2); }
  .fav-separator {
    height: 2px; background: var(--accent);
    opacity: .3; margin: 0;
  }
@@ -0,0 +1,215 @@
 /* ═══════════════════════════════════════════
     GRID VIEW (desktop / tablet)
  ═══════════════════════════════════════════ */
  .grid-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 0;
  }
  .channels-col {
    width: var(--channel-w);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border-bright);
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .channels-col-header {
    height: var(--header-h);
    border-bottom: 1px solid var(--border-bright);
    display: flex;
    align-items: center;
    padding: 0 12px;
    flex-shrink: 0;
  }
  .channels-col-header span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .channels-list {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
  }
  .channels-list::-webkit-scrollbar { display: none; }
  .channel-cell {
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    flex-shrink: 0;
  }
  .channel-logo {
    width: 32px; height: 32px;
    border-radius: 4px;
    object-fit: contain;
    background: var(--surface2);
    flex-shrink: 0;
  }
  .channel-logo-placeholder {
    width: 32px; height: 32px;
    border-radius: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    flex-shrink: 0;
  }
  .channel-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
  }
  .timeline-area {
    flex: 1;
    overflow: auto;
    position: relative;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-bright) transparent;
  }
  .timeline-area::-webkit-scrollbar { height: 4px; width: 4px; }
  .timeline-area::-webkit-scrollbar-track { background: transparent; }
  .timeline-area::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
  /* Conteneur unique — ruler + programmes scrollent ensemble */
  .timeline-inner {
    position: relative;
    display: block;
    min-width: 100%;
  }
  .time-ruler {
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border-bright);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .time-ruler-inner {
    position: relative;
    height: 100%;
  }
  .time-tick {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .time-tick-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    padding: 0 6px 6px;
    white-space: nowrap;
  }
  .time-tick-label.hour { color: var(--text); font-size: 12px; }
  .time-tick-line { width: 1px; height: 8px; background: var(--border-bright); }
  .time-tick-line.hour { height: 14px; }
  .now-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--accent-live);
    z-index: 50;
    pointer-events: none;
  }
  .now-line::before {
    content: '';
    position: absolute;
    top: 0; left: -4px;
    width: 10px; height: 10px;
    background: var(--accent-live);
    border-radius: 50%;
  }
  .programs-inner {
    position: relative;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 79px,
      var(--border) 79px, var(--border) 80px
    );
  }
  .program-row {
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    position: absolute;
    left: 0; right: 0;
  }
  .program-block {
    position: absolute;
    top: 5px; bottom: 5px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    transition: background 0.12s, border-color 0.12s;
    min-width: 2px;
  }
  .program-block:hover { background: var(--surface); border-color: var(--accent2); z-index: 5; }
  .program-block.is-live { border-color: var(--accent2); background: #0d1a2e; }
  .program-block.is-live::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--accent2);
    width: var(--progress, 0%);
    transition: width 1s linear;
  }
  .program-block.is-past { opacity: 0.35; }
  .program-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
  }
  .program-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
@@ -0,0 +1,210 @@
 /* ═══════════════════════════════════════════
     MOBILE LIST VIEW
  ═══════════════════════════════════════════ */
  .mobile-view {
    display: none;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-channel {
    border-bottom: 2px solid var(--border-bright);
  }
  .mobile-channel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
  }
  .mobile-programs {
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-program {
    display: flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface2);
    position: relative;
  }
  .mobile-program.is-live { border-color: var(--accent2); background: #0d1a2e; }
  .mobile-program.is-past { opacity: 0.4; }
  .mobile-program-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--accent2);
  }
  .mobile-program-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    padding: 8px 10px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 72px;
    flex-shrink: 0;
    gap: 2px;
  }
  .mobile-program.is-live .mobile-program-time { color: var(--accent2); }
  .mobile-program-info {
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
  }
  .mobile-program-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-program-dur {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
    font-family: 'Share Tech Mono', monospace;
  }
  .mobile-live-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--accent-live);
    background: rgba(255,68,68,0.12);
    border: 1px solid var(--accent-live);
    border-radius: 2px;
    padding: 2px 5px;
    letter-spacing: 0.1em;
    align-self: center;
    margin-right: 8px;
    flex-shrink: 0;
  }
  /* TOOLTIP */
  .tooltip {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--accent2);
    border-radius: 4px;
    padding: 10px 14px;
    z-index: 999;
    pointer-events: none;
    max-width: 300px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .tooltip.visible { opacity: 1; }
  .tooltip-title { font-size: 14px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
  .tooltip-time { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--accent2); margin-bottom: 6px; }
  .tooltip-desc { font-size: 12px; color: var(--text); line-height: 1.4; max-height: 80px; overflow: hidden; }
  /* LOADING */
  .loading {
    position: fixed; inset: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 20px;
  }
  .loading-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .loading-bar {
    width: 200px; height: 2px;
    background: var(--border);
    position: relative;
    overflow: hidden;
  }
  .loading-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 60%; height: 100%;
    background: var(--accent);
    animation: loading-anim 1.2s ease-in-out infinite;
  }
  @keyframes loading-anim { to { left: 110%; } }
  .error-msg {
    position: fixed; inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 16px;
    display: none;
    padding: 20px;
  }
  .err-title { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--accent-live); letter-spacing: 0.1em; }
  .err-sub { font-size: 13px; color: var(--text-dim); text-align: center; max-width: 400px; line-height: 1.5; }
  .epg-input-bar { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
  .epg-input {
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    color: var(--text-bright);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 8px 12px;
    width: 320px;
    outline: none;
  }
  .epg-input:focus { border-color: var(--accent); }
  .epg-btn {
    background: var(--accent);
    border: none; color: #000;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 18px;
    cursor: pointer;
  }
@media (max-width: 600px) {
    html, body { height: 100%; overflow: hidden; }
    body { overflow: hidden; }
    .topbar {
      height: auto;
      flex-wrap: wrap;
      padding: 8px 12px;
      gap: 8px;
    }
    .logo { font-size: 11px; }
    .clock { font-size: 14px; }
    .grid-wrapper { display: none; }
    .mobile-view { display: block; }
    .tooltip { display: none !important; }
    #navBtns { display: none !important; }
  }
@@ -0,0 +1,40 @@
 /* ── MODAL PERSONAL EPG ─────────────────────────────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    z-index: 3000; display: none; align-items: center; justify-content: center;
  }
  .modal-overlay.visible { display: flex; }
  .modal-card {
    background: var(--surface); border: 1px solid var(--border-bright);
    padding: 28px; width: 100%; max-width: 420px; margin: 16px;
  }
  .modal-title {
    font-family: var(--font-mono); font-size: 13px; color: var(--accent);
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px;
  }
  .modal-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
  .modal-field { margin-bottom: 14px; }
  .modal-field label {
    display: block; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
  }
  .modal-field input {
    width: 100%; background: var(--surface2); border: 1px solid var(--border-bright);
    color: var(--text-bright); font-family: var(--font-mono); font-size: 12px;
    padding: 9px 10px; outline: none; transition: border-color 0.15s;
  }
  .modal-field input:focus { border-color: var(--accent); }
  .modal-field input::placeholder { color: var(--text-dim); opacity: 0.4; }
  .modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
  .modal-btn-cancel {
    background: none; border: 1px solid var(--border-bright); color: var(--text-dim);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 8px 16px; cursor: pointer; transition: border-color 0.15s;
  }
  .modal-btn-cancel:hover { border-color: var(--text-dim); color: var(--text); }
  .modal-btn-apply {
    background: var(--accent); border: none; color: #000;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 8px 20px; cursor: pointer; transition: opacity 0.15s;
  }
  .modal-btn-apply:hover { opacity: 0.85; }
@@ -0,0 +1,78 @@
 /* ═══════════════════════════════════════════
     PLAYER PiP
  ═══════════════════════════════════════════ */
  .pip {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    background: #000;
    border: 1px solid var(--border-bright);
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
    z-index: 2000;
    display: none;
    flex-direction: column;
  }
  .pip.visible { display: flex; }
  .pip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 8px;
    flex-shrink: 0;
  }
  .pip-channel {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  .pip-program {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 2;
    text-align: center;
  }
  .pip-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
  }
  .pip-close:hover { color: var(--accent-live); }
  .pip video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    background: #000;
  }
  .pip-error {
    padding: 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-live);
    letter-spacing: 0.06em;
  }
  .channel-cell { cursor: pointer; }
  .channel-cell:hover { background: var(--surface2); }
  .program-block.is-live { cursor: pointer; }
  @media (max-width: 600px) {
    .pip { width: calc(100vw - 16px); bottom: 8px; right: 8px; left: 8px; }
  }
@@ -0,0 +1,52 @@
 /* ── PROGRAM MODAL ───────────────────────────────────────────────────────── */
  .program-card {
    max-width: 520px; padding: 28px; position: relative;
  }
  .pm-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 18px; line-height: 1;
    transition: color .2s;
  }
  .pm-close:hover { color: var(--accent); }
  .pm-channel {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 6px;
  }
  .pm-title {
    font-size: 20px; font-weight: 700; color: var(--text);
    margin-bottom: 8px; line-height: 1.2;
  }
  .pm-time {
    font-size: 12px; color: var(--accent); margin-bottom: 14px;
  }
  .pm-desc {
    font-size: 13px; color: var(--text-muted); line-height: 1.6;
    margin-bottom: 20px; max-height: 140px; overflow-y: auto;
  }
  .pm-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
  }
  .pm-btn {
    border-radius: 4px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; padding: 8px 16px;
    text-decoration: none; transition: opacity .2s;
    display: inline-flex; align-items: center; gap: 6px;
    border: none;
  }
  .pm-btn:hover { opacity: .8; }
  .pm-watch  { background: var(--accent); color: var(--bg); }
  .pm-imdb   { background: #f5c518; color: #000; }
  .pm-cancel { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
  /* Date midnight dans la timebar */
  .time-tick-label.midnight {
    color: var(--accent); font-weight: 700; font-size: 11px;
    white-space: nowrap;
  }
  .time-tick-line.midnight {
    background: var(--accent); opacity: .4; width: 2px;
  }
  /* ── FAVORITES ───────────────────────────────────────────────────────────── */
@@ -0,0 +1,39 @@
 /* ── SEARCH ───────────────────────────────────────────────────────────────── */
  .search-btn {
    background: none; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-muted); cursor: pointer; font-size: 14px;
    padding: 4px 8px; transition: color .2s, border-color .2s;
  }
  .search-btn:hover { color: var(--accent); border-color: var(--accent); }
  .search-bar {
    display: none; align-items: center; gap: 8px;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    padding: 8px 16px;
  }
  .search-bar.visible { display: flex; }
  .search-input {
    flex: 1; background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text); font-family: inherit;
    font-size: 14px; outline: none; padding: 6px 12px;
    transition: border-color .2s;
  }
  .search-input:focus { border-color: var(--accent); }
  .search-input::placeholder { color: var(--text-muted); }
  .search-clear {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 16px; padding: 4px 8px;
    transition: color .2s;
  }
  .search-clear:hover { color: var(--accent); }
  /* Highlight programmes qui matchent */
  .program-block.search-match {
    border: 1px solid var(--accent);
    box-shadow: 0 0 6px var(--accent);
  }
  .mobile-program.search-match {
    border-left: 3px solid var(--accent);
  }
@@ -0,0 +1,225 @@
 /* ═══════════════════════════════════════════
     TOP BAR
  ═══════════════════════════════════════════ */
  .topbar {
    height: 50px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
  }
  .logo {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .logo span { color: var(--text-dim); margin: 0 5px; }
  .logo-sub { display: inline; }
  .live-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: 'Share Tech Mono', monospace;
    color: var(--accent-live);
    letter-spacing: 0.1em;
    margin-left: auto;
    flex-shrink: 0;
  }
  .live-dot::before {
    content: '';
    width: 7px; height: 7px;
    background: var(--accent-live);
    border-radius: 50%;
    animation: pulse 1.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:0.3; transform:scale(0.7); }
  }
  .clock {
    font-family: 'Share Tech Mono', monospace;
    font-size: 20px;
    color: var(--text-bright);
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  .date-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .nav-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .nav-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .nav-btn:hover, .nav-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
  }
  .copy-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .copy-btn {
    background: transparent;
    border: 1px solid var(--border-bright);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 4px 9px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
    white-space: nowrap;
    position: relative;
  }
  .copy-btn:hover {
    border-color: var(--accent2);
    color: var(--accent2);
  }
  .copy-btn.copied {
    border-color: var(--accent);
    color: var(--accent);
  }
 /* ═══════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════ */
  @media (max-width: 900px) {
    :root { --channel-w: 110px; }
    .logo-sub { display: none; }
    .date-label { display: none; }
    .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; }
      body { overflow: hidden; }
    .topbar {
      height: auto;
      flex-wrap: wrap;
      padding: 8px 12px;
      gap: 8px;
    }
    .logo { font-size: 11px; }
    .clock { font-size: 14px; }
    .grid-wrapper { display: none; }
    .mobile-view { display: block; }
    .tooltip { display: none !important; }
    #navBtns { display: none !important; }
  }
 /* ── SOURCE SELECTOR ─────────────────────────────────────────────────────── */
  .source-select {
    background-color: var(--surface2) !important;
    border: 1px solid var(--border-bright);
    color: var(--text) !important;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 5px 8px;
    cursor: pointer;
    letter-spacing: 0.06em;
    height: 28px;
    outline: none;
    transition: border-color 0.15s, color 0.15s;
    max-width: 130px;
    -webkit-appearance: none;
    appearance: none;
  }
  .source-select:hover { border-color: var(--accent2); color: var(--accent2) !important; }
  .source-select option { background: #111 !important; color: #eee !important; font-family: sans-serif; }
  /* ── SOURCE DROPDOWN ─────────────────────────────────────────────────────── */
  .source-dropdown {
    position: relative;
    flex-shrink: 0;
  }
  .source-dropdown-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface2); border: 1px solid var(--border-bright);
    color: var(--text); font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; padding: 5px 10px; height: 28px;
    cursor: pointer; white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
  }
  .source-dropdown-btn:hover { border-color: var(--accent2); color: var(--accent2); }
  .source-dropdown-arrow { font-size: 8px; opacity: 0.6; }
  .source-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    background: var(--surface); border: 1px solid var(--border-bright);
    min-width: 160px; z-index: 1000;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  }
  .source-dropdown-menu.open { display: flex; }
  .source-dropdown-item {
    background: none; border: none; color: var(--text);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; padding: 10px 14px;
    text-align: left; cursor: pointer; white-space: nowrap;
    transition: background 0.1s, color 0.1s;
    border-bottom: 1px solid var(--border);
  }
  .source-dropdown-item:last-child { border-bottom: none; }
  .source-dropdown-item:hover { background: var(--surface2); color: var(--accent2); }
  .source-dropdown-item.active { color: var(--accent); }
  .source-dropdown-personal { color: var(--accent2); }
@@ -0,0 +1,13 @@
 /* ── UPDATE BADGE ────────────────────────────────────────────────────────── */
  .update-badge {
    background: var(--accent); color: #000;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    padding: 4px 10px; text-decoration: none; white-space: nowrap;
    animation: pulse-badge 2s ease-in-out infinite;
    border-radius: 2px; margin-left: 4px;
  }
  .update-badge:hover { opacity: .85; }
  @keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: .65; }
  }
@@ -13,8 +13,7 @@ window.addEventListener('load', () => {
    if (epg) {
      currentEpgUrl = epg;
      currentM3uUrl = m3u;
-      const sel = document.getElementById('sourceSelect');
+      updateSourceDropdownLabel('✏ Personal EPG');
      if (sel) sel.value = 'personal';
      loadEPG(epg);
      if (m3u) loadM3U(m3u);
      return;
@@ -26,8 +25,7 @@ window.addEventListener('load', () => {
      activeSourceIndex = idx;
      currentEpgUrl = src.epg_url;
      currentM3uUrl = src.m3u_url ?? '';
-      const sel = document.getElementById('sourceSelect');
+      if (src) updateSourceDropdownLabel(src.name);
      if (sel) sel.value = idx;
    }
  }
  loadEPG(currentEpgUrl);
@@ -39,12 +39,12 @@ function renderMobile() {
      }
      const timeCol = document.createElement('div'); timeCol.className='mobile-program-time';
-      timeCol.innerHTML = `<span>${fmtTime(p.start)}</span><span>${fmtTime(p.stop)}</span>`;
+      timeCol.innerHTML = `<span>${esc(fmtTime(p.start))}</span><span>${esc(fmtTime(p.stop))}</span>`;
      item.appendChild(timeCol);
      const info = document.createElement('div'); info.className='mobile-program-info';
      const ep = fmtEpisode(p.season, p.episode);
-      info.innerHTML = `<div class="mobile-program-title">${p.title}</div><div class="mobile-program-dur">${ep ? ep + ' · ' : ''}${dur} min</div>`;
+      info.innerHTML = `<div class="mobile-program-title">${esc(p.title)}</div><div class="mobile-program-dur">${ep ? esc(ep) + ' · ' : ''}${dur} min</div>`;
      item.appendChild(info);
      if (isLive) {
@@ -179,12 +179,12 @@ function renderMobileFiltered(filteredChannels, q) {
      }
      const timeCol = document.createElement('div'); timeCol.className = 'mobile-program-time';
-      timeCol.innerHTML = `<span>${fmtTime(p.start)}</span><span>${fmtTime(p.stop)}</span>`;
+      timeCol.innerHTML = `<span>${esc(fmtTime(p.start))}</span><span>${esc(fmtTime(p.stop))}</span>`;
      item.appendChild(timeCol);
      const info = document.createElement('div'); info.className = 'mobile-program-info';
      const ep = fmtEpisode(p.season, p.episode);
-      info.innerHTML = `<div class="mobile-program-title">${p.title}</div><div class="mobile-program-dur">${ep ? ep + ' · ' : ''}${dur} min</div>`;
+      info.innerHTML = `<div class="mobile-program-title">${esc(p.title)}</div><div class="mobile-program-dur">${ep ? esc(ep) + ' · ' : ''}${dur} min</div>`;
      item.appendChild(info);
      if (isLive) {
@@ -49,6 +49,7 @@ function applyPersonalEpg() {
  localStorage.setItem('gridtv-personal-epg', epg);
  localStorage.setItem('gridtv-personal-m3u', m3u);
  localStorage.setItem('gridtv-active-source', 'personal');
  updateSourceDropdownLabel('✏ Personal EPG');
  currentEpgUrl = epg;
  currentM3uUrl = m3u;
  const sel = document.getElementById('sourceSelect');
@@ -58,3 +59,24 @@ function applyPersonalEpg() {
  if (m3u) loadM3U(m3u);
 }
 function toggleSourceDropdown() {
  document.getElementById('sourceDropdownMenu')?.classList.toggle('open');
 }
 function closeSourceDropdown() {
  document.getElementById('sourceDropdownMenu')?.classList.remove('open');
 }
 // Fermer si clic en dehors
 document.addEventListener('click', e => {
  if (!e.target.closest('.source-dropdown')) closeSourceDropdown();
 });
 function updateSourceDropdownLabel(label) {
  const el = document.getElementById('sourceDropdownLabel');
  if (el) el.textContent = label;
  // Mettre à jour la classe active
  document.querySelectorAll('.source-dropdown-item').forEach((btn, i) => {
    btn.classList.toggle('active', i === activeSourceIndex);
  });
 }
@@ -0,0 +1,38 @@
 // ── UPDATE CHECKER ────────────────────────────────────────────────────────────
 (async function checkForUpdate() {
  try {
    const [localRes, remoteRes] = await Promise.all([
      fetch('version.json'),
      fetch('https://api.github.com/repos/Johnnybegood90/GridTV/releases/latest')
    ]);
    if (!localRes.ok || !remoteRes.ok) return;
    const local  = (await localRes.json()).version  ?? '0.0.0';
    const remote = (await remoteRes.json()).tag_name ?? '0.0.0';
    const clean = v => v.replace(/^v/, '');
    const toNum = v => v.split('.').map(Number);
    const [lMaj, lMin, lPat] = toNum(clean(local));
    const [rMaj, rMin, rPat] = toNum(clean(remote));
    const hasUpdate =
      rMaj > lMaj ||
      (rMaj === lMaj && rMin > lMin) ||
      (rMaj === lMaj && rMin === lMin && rPat > lPat);
    if (!hasUpdate) return;
    const badge = document.createElement('a');
    badge.className  = 'update-badge';
    badge.href       = `https://github.com/Johnnybegood90/GridTV/releases/latest`;
    badge.target     = '_blank';
    badge.rel        = 'noopener';
    badge.innerHTML = `${L.update_available} ${clean(remote)}`;
    badge.title      = L.update_title;
    document.querySelector('.topbar')?.appendChild(badge);
  } catch (_) {
    // Silencieux — pas de connexion ou rate limit GitHub
  }
 })();
@@ -1,4 +1,11 @@
 // Echapper les donnees issues de l'EPG pour eviter les injections HTML
 function esc(str) {
  const d = document.createElement('div');
  d.textContent = str || '';
  return d.innerHTML;
 }
 let channels = [];
 let programs = {};
 let m3uStreams = {}; // slug normalisé → url stream
@@ -3,11 +3,19 @@
 <?php
 $js_dir = __DIR__ . '/../js/';
 include $js_dir . 'config.js';
-$js_modules = ['utils', 'favorites', 'epg', 'mobile', 'tooltip', 'sources', 'm3u', 'player', 'themes', 'search', 'program', 'live'];
+$js_modules = ['utils', 'favorites', 'epg', 'mobile', 'tooltip', 'sources', 'm3u', 'player', 'themes', 'search', 'program', 'updater', 'live'];
 foreach ($js_modules as $mod) {
    echo file_get_contents($js_dir . $mod . '.js');
 }
 ?>
 </script>
 <script>
 if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').catch(() => {});
  });
 }
 </script>
 </body>
 </html>
@@ -1,875 +1,27 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="<?= $locale ?>">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>GridTV — <?= $group_name ?></title>
 <link rel="manifest" href="/manifest.json">
 <link rel="icon" href="/assets/favicon.png" type="image/png">
 <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
 <meta name="theme-color" content="#0a0b0d">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="apple-mobile-web-app-title" content="GridTV">
 <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
-<style>
+<?php
-  /* Variables de base — surchargées par le fichier thème */
+$css_dir = __DIR__ . '/../css/';
-  :root {
+$css_files = ['base', 'topbar', 'grid', 'mobile', 'player', 'modals', 'search', 'program', 'favorites', 'updater'];
-    --bg: #0a0b0d;
+echo "<style>\n";
-    --surface: #111318;
+foreach ($css_files as $file) {
-    --surface2: #181b22;
+    echo file_get_contents($css_dir . $file . '.css') . "\n";
-    --border: #232733;
+}
-    --border-bright: #2e3444;
+echo "</style>\n";
-    --accent: #e8c842;
+?>
    --accent2: #4a9eff;
    --accent-live: #ff4444;
    --text: #c8cdd8;
    --text-dim: #5a6070;
    --text-bright: #eef0f5;
    --prog-bg: #141820;
    --prog-border: #1e2a3a;
    --prog-live-bg: #0d2040;
    --prog-live-border: #4a9eff;
    --font-ui: 'Barlow Condensed', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    --channel-w: 160px;
    --row-h: 80px;
    --header-h: 52px;
  }
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* ═══════════════════════════════════════════
     TOP BAR
  ═══════════════════════════════════════════ */
  .topbar {
    height: 50px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
  }
  .logo {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .logo span { color: var(--text-dim); margin: 0 5px; }
  .logo-sub { display: inline; }
  .live-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: 'Share Tech Mono', monospace;
    color: var(--accent-live);
    letter-spacing: 0.1em;
    margin-left: auto;
    flex-shrink: 0;
  }
  .live-dot::before {
    content: '';
    width: 7px; height: 7px;
    background: var(--accent-live);
    border-radius: 50%;
    animation: pulse 1.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:0.3; transform:scale(0.7); }
  }
  .clock {
    font-family: 'Share Tech Mono', monospace;
    font-size: 20px;
    color: var(--text-bright);
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  .date-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .nav-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .nav-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .nav-btn:hover, .nav-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
  }
  .copy-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .copy-btn {
    background: transparent;
    border: 1px solid var(--border-bright);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 4px 9px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
    white-space: nowrap;
    position: relative;
  }
  .copy-btn:hover {
    border-color: var(--accent2);
    color: var(--accent2);
  }
  .copy-btn.copied {
    border-color: var(--accent);
    color: var(--accent);
  }
  /* ═══════════════════════════════════════════
     GRID VIEW (desktop / tablet)
  ═══════════════════════════════════════════ */
  .grid-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 0;
  }
  .channels-col {
    width: var(--channel-w);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border-bright);
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .channels-col-header {
    height: var(--header-h);
    border-bottom: 1px solid var(--border-bright);
    display: flex;
    align-items: center;
    padding: 0 12px;
    flex-shrink: 0;
  }
  .channels-col-header span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .channels-list {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
  }
  .channels-list::-webkit-scrollbar { display: none; }
  .channel-cell {
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    flex-shrink: 0;
  }
  .channel-logo {
    width: 32px; height: 32px;
    border-radius: 4px;
    object-fit: contain;
    background: var(--surface2);
    flex-shrink: 0;
  }
  .channel-logo-placeholder {
    width: 32px; height: 32px;
    border-radius: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    flex-shrink: 0;
  }
  .channel-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
  }
  .timeline-area {
    flex: 1;
    overflow: auto;
    position: relative;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-bright) transparent;
  }
  .timeline-area::-webkit-scrollbar { height: 4px; width: 4px; }
  .timeline-area::-webkit-scrollbar-track { background: transparent; }
  .timeline-area::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
  /* Conteneur unique — ruler + programmes scrollent ensemble */
  .timeline-inner {
    position: relative;
    display: block;
    min-width: 100%;
  }
  .time-ruler {
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border-bright);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .time-ruler-inner {
    position: relative;
    height: 100%;
  }
  .time-tick {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .time-tick-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    padding: 0 6px 6px;
    white-space: nowrap;
  }
  .time-tick-label.hour { color: var(--text); font-size: 12px; }
  .time-tick-line { width: 1px; height: 8px; background: var(--border-bright); }
  .time-tick-line.hour { height: 14px; }
  .now-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--accent-live);
    z-index: 50;
    pointer-events: none;
  }
  .now-line::before {
    content: '';
    position: absolute;
    top: 0; left: -4px;
    width: 10px; height: 10px;
    background: var(--accent-live);
    border-radius: 50%;
  }
  .programs-inner {
    position: relative;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 79px,
      var(--border) 79px, var(--border) 80px
    );
  }
  .program-row {
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    position: absolute;
    left: 0; right: 0;
  }
  .program-block {
    position: absolute;
    top: 5px; bottom: 5px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    transition: background 0.12s, border-color 0.12s;
    min-width: 2px;
  }
  .program-block:hover { background: var(--surface); border-color: var(--accent2); z-index: 5; }
  .program-block.is-live { border-color: var(--accent2); background: #0d1a2e; }
  .program-block.is-live::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--accent2);
    width: var(--progress, 0%);
    transition: width 1s linear;
  }
  .program-block.is-past { opacity: 0.35; }
  .program-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
  }
  .program-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  /* ═══════════════════════════════════════════
     MOBILE LIST VIEW
  ═══════════════════════════════════════════ */
  .mobile-view {
    display: none;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-channel {
    border-bottom: 2px solid var(--border-bright);
  }
  .mobile-channel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
  }
  .mobile-programs {
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-program {
    display: flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface2);
    position: relative;
  }
  .mobile-program.is-live { border-color: var(--accent2); background: #0d1a2e; }
  .mobile-program.is-past { opacity: 0.4; }
  .mobile-program-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--accent2);
  }
  .mobile-program-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    padding: 8px 10px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 72px;
    flex-shrink: 0;
    gap: 2px;
  }
  .mobile-program.is-live .mobile-program-time { color: var(--accent2); }
  .mobile-program-info {
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
  }
  .mobile-program-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-program-dur {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
    font-family: 'Share Tech Mono', monospace;
  }
  .mobile-live-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--accent-live);
    background: rgba(255,68,68,0.12);
    border: 1px solid var(--accent-live);
    border-radius: 2px;
    padding: 2px 5px;
    letter-spacing: 0.1em;
    align-self: center;
    margin-right: 8px;
    flex-shrink: 0;
  }
  /* TOOLTIP */
  .tooltip {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--accent2);
    border-radius: 4px;
    padding: 10px 14px;
    z-index: 999;
    pointer-events: none;
    max-width: 300px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .tooltip.visible { opacity: 1; }
  .tooltip-title { font-size: 14px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
  .tooltip-time { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--accent2); margin-bottom: 6px; }
  .tooltip-desc { font-size: 12px; color: var(--text); line-height: 1.4; max-height: 80px; overflow: hidden; }
  /* LOADING */
  .loading {
    position: fixed; inset: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 20px;
  }
  .loading-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .loading-bar {
    width: 200px; height: 2px;
    background: var(--border);
    position: relative;
    overflow: hidden;
  }
  .loading-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 60%; height: 100%;
    background: var(--accent);
    animation: loading-anim 1.2s ease-in-out infinite;
  }
  @keyframes loading-anim { to { left: 110%; } }
  .error-msg {
    position: fixed; inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 16px;
    display: none;
    padding: 20px;
  }
  .err-title { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--accent-live); letter-spacing: 0.1em; }
  .err-sub { font-size: 13px; color: var(--text-dim); text-align: center; max-width: 400px; line-height: 1.5; }
  .epg-input-bar { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
  .epg-input {
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    color: var(--text-bright);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 8px 12px;
    width: 320px;
    outline: none;
  }
  .epg-input:focus { border-color: var(--accent); }
  .epg-btn {
    background: var(--accent);
    border: none; color: #000;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 18px;
    cursor: pointer;
  }
  /* ═══════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════ */
  @media (max-width: 900px) {
    :root { --channel-w: 110px; }
    .logo-sub { display: none; }
    .date-label { display: none; }
    .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; }
    .topbar {
      height: auto;
      flex-wrap: wrap;
      padding: 8px 12px;
      gap: 8px;
    }
    .logo { font-size: 11px; }
    .clock { font-size: 14px; }
    .grid-wrapper { display: none; }
    .mobile-view { display: block; }
    .tooltip { display: none !important; }
    #navBtns { display: none !important; }
  }
  /* ── MODAL PERSONAL EPG ─────────────────────────────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    z-index: 3000; display: none; align-items: center; justify-content: center;
  }
  .modal-overlay.visible { display: flex; }
  .modal-card {
    background: var(--surface); border: 1px solid var(--border-bright);
    padding: 28px; width: 100%; max-width: 420px; margin: 16px;
  }
  .modal-title {
    font-family: var(--font-mono); font-size: 13px; color: var(--accent);
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px;
  }
  .modal-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
  .modal-field { margin-bottom: 14px; }
  .modal-field label {
    display: block; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
  }
  .modal-field input {
    width: 100%; background: var(--surface2); border: 1px solid var(--border-bright);
    color: var(--text-bright); font-family: var(--font-mono); font-size: 12px;
    padding: 9px 10px; outline: none; transition: border-color 0.15s;
  }
  .modal-field input:focus { border-color: var(--accent); }
  .modal-field input::placeholder { color: var(--text-dim); opacity: 0.4; }
  .modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
  .modal-btn-cancel {
    background: none; border: 1px solid var(--border-bright); color: var(--text-dim);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 8px 16px; cursor: pointer; transition: border-color 0.15s;
  }
  .modal-btn-cancel:hover { border-color: var(--text-dim); color: var(--text); }
  .modal-btn-apply {
    background: var(--accent); border: none; color: #000;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 8px 20px; cursor: pointer; transition: opacity 0.15s;
  }
  .modal-btn-apply:hover { opacity: 0.85; }
  /* ── SOURCE SELECTOR ─────────────────────────────────────────────────────── */
  .source-select {
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 5px 8px;
    cursor: pointer;
    letter-spacing: 0.06em;
    height: 28px;
    outline: none;
    transition: border-color 0.15s, color 0.15s;
    max-width: 130px;
  }
  .source-select:hover { border-color: var(--accent2); color: var(--accent2); }
  .source-select option { background: #111; color: #eee; font-family: sans-serif; }
  /* ═══════════════════════════════════════════
     PLAYER PiP
  ═══════════════════════════════════════════ */
  .pip {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    background: #000;
    border: 1px solid var(--border-bright);
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
    z-index: 2000;
    display: none;
    flex-direction: column;
  }
  .pip.visible { display: flex; }
  .pip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 8px;
    flex-shrink: 0;
  }
  .pip-channel {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  .pip-program {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 2;
    text-align: center;
  }
  .pip-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
  }
  .pip-close:hover { color: var(--accent-live); }
  .pip video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    background: #000;
  }
  .pip-error {
    padding: 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-live);
    letter-spacing: 0.06em;
  }
  .channel-cell { cursor: pointer; }
  .channel-cell:hover { background: var(--surface2); }
  .program-block.is-live { cursor: pointer; }
  @media (max-width: 600px) {
    .pip { width: calc(100vw - 16px); bottom: 8px; right: 8px; left: 8px; }
  }
  /* ── SEARCH ───────────────────────────────────────────────────────────────── */
  .search-btn {
    background: none; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-muted); cursor: pointer; font-size: 14px;
    padding: 4px 8px; transition: color .2s, border-color .2s;
  }
  .search-btn:hover { color: var(--accent); border-color: var(--accent); }
  .search-bar {
    display: none; align-items: center; gap: 8px;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    padding: 8px 16px;
  }
  .search-bar.visible { display: flex; }
  .search-input {
    flex: 1; background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text); font-family: inherit;
    font-size: 14px; outline: none; padding: 6px 12px;
    transition: border-color .2s;
  }
  .search-input:focus { border-color: var(--accent); }
  .search-input::placeholder { color: var(--text-muted); }
  .search-clear {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 16px; padding: 4px 8px;
    transition: color .2s;
  }
  .search-clear:hover { color: var(--accent); }
  /* Highlight programmes qui matchent */
  .program-block.search-match {
    border: 1px solid var(--accent);
    box-shadow: 0 0 6px var(--accent);
  }
  .mobile-program.search-match {
    border-left: 3px solid var(--accent);
  }
  /* ── PROGRAM MODAL ───────────────────────────────────────────────────────── */
  .program-card {
    max-width: 520px; padding: 28px; position: relative;
  }
  .pm-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 18px; line-height: 1;
    transition: color .2s;
  }
  .pm-close:hover { color: var(--accent); }
  .pm-channel {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 6px;
  }
  .pm-title {
    font-size: 20px; font-weight: 700; color: var(--text);
    margin-bottom: 8px; line-height: 1.2;
  }
  .pm-time {
    font-size: 12px; color: var(--accent); margin-bottom: 14px;
  }
  .pm-desc {
    font-size: 13px; color: var(--text-muted); line-height: 1.6;
    margin-bottom: 20px; max-height: 140px; overflow-y: auto;
  }
  .pm-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
  }
  .pm-btn {
    border-radius: 4px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; padding: 8px 16px;
    text-decoration: none; transition: opacity .2s;
    display: inline-flex; align-items: center; gap: 6px;
    border: none;
  }
  .pm-btn:hover { opacity: .8; }
  .pm-watch  { background: var(--accent); color: var(--bg); }
  .pm-imdb   { background: #f5c518; color: #000; }
  .pm-cancel { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
  /* Date midnight dans la timebar */
  .time-tick-label.midnight {
    color: var(--accent); font-weight: 700; font-size: 11px;
    white-space: nowrap;
  }
  .time-tick-line.midnight {
    background: var(--accent); opacity: .4; width: 2px;
  }
  /* ── FAVORITES ───────────────────────────────────────────────────────────── */
  .fav-btn {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; line-height: 1;
    margin-left: auto; padding: 2px 4px; flex-shrink: 0;
    transition: color .15s, transform .15s;
    opacity: 0;
  }
  .channel-cell:hover .fav-btn { opacity: 1; }
  .fav-btn.is-fav { color: var(--accent); opacity: 1; }
  .fav-btn:hover { transform: scale(1.2); }
  .fav-separator {
    height: 2px; background: var(--accent);
    opacity: .3; margin: 0;
  }
 </style>
 <link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
 </head>
@@ -14,14 +14,24 @@
 <?php endif; ?>
  </div>
 <?php if (count($epg_sources) > 1 || $allow_personal_epg): ?>
-  <select class="source-select" id="sourceSelect" onchange="switchSource(this.value)" title="Source EPG">
+  <div class="source-dropdown" id="sourceDropdown">
    <button class="source-dropdown-btn" onclick="toggleSourceDropdown()" id="sourceDropdownBtn">
      <span id="sourceDropdownLabel"><?= htmlspecialchars($epg_sources[0]['name'] ?? 'EPG') ?></span>
      <span class="source-dropdown-arrow">&#9660;</span>
    </button>
    <div class="source-dropdown-menu" id="sourceDropdownMenu">
 <?php foreach ($epg_sources as $i => $src): ?>
-    <option value="<?= $i ?>"><?= htmlspecialchars($src['name']) ?></option>
+      <button class="source-dropdown-item<?= $i === 0 ? ' active' : '' ?>" onclick="switchSource(<?= $i ?>); closeSourceDropdown()">
        <?= htmlspecialchars($src['name']) ?>
      </button>
 <?php endforeach; ?>
 <?php if ($allow_personal_epg): ?>
-    <option value="personal">✏ Personal EPG</option>
+      <button class="source-dropdown-item source-dropdown-personal" onclick="switchSource('personal'); closeSourceDropdown()">
        &#9998; Personal EPG
      </button>
 <?php endif; ?>
-  </select>
+    </div>
  </div>
 <?php endif; ?>
  <select class="theme-select" id="themeSelect" onchange="setTheme(this.value)" title="Thème">
 <?php
@@ -0,0 +1,76 @@
 const CACHE_NAME = 'gridtv-v1';
 // Ressources statiques à mettre en cache immédiatement
 const STATIC_ASSETS = [
  '/',
  '/index.php',
  '/manifest.json',
  '/assets/icon-192.png',
  '/assets/icon-512.png',
  'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap',
  'https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.12/hls.min.js'
 ];
 // Install : mise en cache des assets statiques
 self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(STATIC_ASSETS))
      .then(() => self.skipWaiting())
  );
 });
 // Activate : purger les anciens caches
 self.addEventListener('activate', e => {
  e.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
    ).then(() => self.clients.claim())
  );
 });
 // Fetch : stratégie selon le type de ressource
 self.addEventListener('fetch', e => {
  const url = new URL(e.request.url);
  // Flux EPG/M3U et API GitHub : network only (pas de cache)
  if (
    url.pathname.includes('xmltv') ||
    url.pathname.includes('.m3u') ||
    url.hostname === 'api.github.com' ||
    url.pathname.includes('proxy.php')
  ) {
    return;
  }
  // Assets statiques : cache first
  if (
    e.request.destination === 'style' ||
    e.request.destination === 'script' ||
    e.request.destination === 'font' ||
    e.request.destination === 'image' ||
    url.pathname.endsWith('.json') ||
    url.pathname.endsWith('.css') ||
    url.pathname.endsWith('.js')
  ) {
    e.respondWith(
      caches.match(e.request).then(cached => cached || fetch(e.request).then(res => {
        const clone = res.clone();
        caches.open(CACHE_NAME).then(cache => cache.put(e.request, clone));
        return res;
      }))
    );
    return;
  }
  // Pages PHP (index.php) : network first, fallback cache
  e.respondWith(
    fetch(e.request)
      .then(res => {
        const clone = res.clone();
        caches.open(CACHE_NAME).then(cache => cache.put(e.request, clone));
        return res;
      })
      .catch(() => caches.match(e.request))
  );
 });
@@ -0,0 +1,3 @@
 {
  "version": "1.4.2"
 }
Author	SHA1	Message	Date
Johnnybegood90	25dabc97b2	security: harden proxy.php with config whitelist, fix XSS via EPG innerHTML	2026-03-14 02:31:25 +01:00
Johnnybegood90	e81cd8b64d	security: harden proxy.php with config whitelist, fix XSS via EPG innerHTML	2026-03-14 02:29:09 +01:00
Johnnybegood90	30d8a24927	security: harden proxy.php with config whitelist, fix XSS via EPG innerHTML	2026-03-14 02:26:36 +01:00
Johnnybegood90	d6532d3501	Improvment: Replacing change EPG menu.	2026-03-14 01:22:16 +01:00
Johnnybegood90	17db9f56f7	Fix version.json	2026-03-14 01:22:05 +01:00
Johnnybegood90	874214aa41	Improvment: Replacing change EPG menu.	2026-03-14 01:18:38 +01:00
Johnnybegood90	de0e1adf44	Improvment: Replacing change EPG menu.	2026-03-14 01:18:02 +01:00
Johnnybegood90	42d161beff	Update topbar CSS	2026-03-14 01:10:58 +01:00
Johnnybegood90	30c0de2a2d	Fix: CSS Topbar.	2026-03-14 01:09:33 +01:00
Johnnybegood90	77f0c2523b	Fix: CSS Topbar.	2026-03-14 01:06:32 +01:00
Johnnybegood90	73bdde5093	Fix: CSS Topbar.	2026-03-14 01:03:44 +01:00
Johnnybegood90	0c2bce40fb	Update assets.	2026-03-14 00:30:04 +01:00
Johnnybegood90	005fca9a05	Adjusting assets.	2026-03-14 00:28:52 +01:00
Johnnybegood90	f82bc65472	Fix: CSS Topbar.	2026-03-14 00:11:34 +01:00
Johnnybegood90	d57855c385	Hotfix desktop CSS	2026-03-14 00:08:29 +01:00
Johnnybegood90	ca25d5000b	Hotfix css desktop	2026-03-14 00:07:10 +01:00
Johnnybegood90	f935a82e91	Hotfix mobile CSS	2026-03-14 00:01:17 +01:00
Johnnybegood90	96c9835a27	Hotfix css mobile	2026-03-14 00:00:05 +01:00
Johnnybegood90	b312e8cc26	Updating favicon.	2026-03-13 23:51:49 +01:00
Johnnybegood90	79a077a85f	Adding PWA support.	2026-03-13 23:46:14 +01:00
Johnnybegood90	8e3dc664ed	Remove Sublime workspace file	2026-03-13 23:27:25 +01:00
Johnnybegood90	2172202d25	update .gitignore	2026-03-13 23:24:54 +01:00
Johnnybegood90	804bb96e07	Update .gitignore.	2026-03-13 23:23:20 +01:00
Johnnybegood90	d7541c0fa4	update .gitignore	2026-03-13 23:23:05 +01:00
Johnnybegood90	7f23ba92ad	Update README.md.	2026-03-13 23:12:20 +01:00
Johnnybegood90	9e4614d8df	Update README.md	2026-03-13 23:12:00 +01:00
Johnnybegood90	5fd4eb8a5c	Split the CSS from head.php into separate files.	2026-03-13 23:06:43 +01:00
Johnnybegood90	8ca85e778e	Split the CSS from head.php into separate files.	2026-03-13 23:04:55 +01:00
Johnnybegood90	181e477a0e	Split the CSS from head.php into separate files.	2026-03-13 22:56:40 +01:00
Johnnybegood90	da501bccc7	removing useless config.example.json	2026-03-13 22:05:28 +01:00
Johnnybegood90	8a465dc6da	removing useless config.example.json	2026-03-13 22:05:06 +01:00
Johnnybegood90	2d4d8c031e	Feat: Update available checker.	2026-03-13 21:49:02 +01:00
Johnnybegood90	8b032f56de	Update available fix.	2026-03-13 21:47:49 +01:00
Johnnybegood90	44f4eeaafe	Update available tag.	2026-03-13 21:39:34 +01:00
Johnnybegood90	aac2b4404f	Feat: Possibility added to reconfigure via setup.php. A key is created into the config file.	2026-03-13 21:30:00 +01:00
Johnnybegood90	8460771d20	Fix: setup.php now add a key in existing setup post update.	2026-03-13 21:28:18 +01:00
Johnnybegood90	76dbd18ca7	Feat: Reconfigure in setup.php	2026-03-13 21:24:51 +01:00