Update via AnyCoder

index.html

@@ -8,7 +8,6 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
-  <!-- Icons -->
   <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
 
   <style>
@@ -60,63 +59,24 @@
       overflow-x: hidden;
     }
 
-    /* Header */
     header.appbar {
-      position: sticky;
-      top: 0;
-      z-index: 50;
-      backdrop-filter: blur(var(--blur));
-      -webkit-backdrop-filter: blur(var(--blur));
+      position: sticky; top: 0; z-index: 50;
+      backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
       background: color-mix(in oklab, var(--bg-soft) 80%, transparent);
       border-bottom: 1px solid color-mix(in oklab, var(--txt) 8%, transparent);
     }
     .appbar-inner {
-      max-width: 1200px;
-      margin: 0 auto;
+      max-width: 1200px; margin: 0 auto;
       padding: 14px clamp(14px, 3vw, 28px);
-      display: grid;
-      grid-template-columns: 1fr auto 1fr;
-      align-items: center;
-      gap: 12px;
-    }
-    .brand {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .logo {
-      width: 40px; height: 40px;
-      background: linear-gradient(135deg, var(--primary), var(--accent));
-      border-radius: 14px;
-      box-shadow: var(--shadow);
-      position: relative;
-      isolation: isolate;
-    }
-    .logo::after {
-      content: "";
-      position: absolute; inset: 2px;
-      background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.18), transparent 30%, rgba(255,255,255,.18) 60%, transparent 85%);
-      mix-blend-mode: overlay;
-      border-radius: 12px;
-      filter: blur(6px);
-    }
-    .brand h1 {
-      margin: 0;
-      font-size: clamp(16px, 2.3vw, 20px);
-      letter-spacing: .3px;
-      font-weight: 800;
-    }
-    .brand small {
-      display: block;
-      color: var(--muted);
-      font-weight: 500;
-      font-size: 12px;
-      letter-spacing: .4px;
+      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
     }
+    .brand { display: flex; align-items: center; gap: 12px; }
+    .logo { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 14px; box-shadow: var(--shadow); position: relative; isolation: isolate; }
+    .logo::after { content: ""; position: absolute; inset: 2px; background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.18), transparent 30%, rgba(255,255,255,.18) 60%, transparent 85%); mix-blend-mode: overlay; border-radius: 12px; filter: blur(6px); }
+    .brand h1 { margin: 0; font-size: clamp(16px, 2.3vw, 20px); letter-spacing: .3px; font-weight: 800; }
+    .brand small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: .4px; }
 
-    .top-actions {
-      display: flex; align-items: center; justify-content: center; gap: 12px;
-    }
+    .top-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
     .top-actions a {
       color: var(--muted); text-decoration: none; font-weight: 600;
       font-size: 13px; padding: 8px 12px; border-radius: 999px;
@@ -125,35 +85,16 @@
     }
     .top-actions a:hover { color: var(--txt); border-color: color-mix(in oklab, var(--txt) 16%, transparent); }
 
-    .header-right {
-      display: flex; justify-content: flex-end; align-items: center; gap: 8px;
-    }
-    .anycoder {
-      color: var(--primary); text-decoration: none; font-weight: 700;
-      border: 1px dashed color-mix(in oklab, var(--primary) 60%, transparent);
-      padding: 8px 12px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 12%, transparent);
-    }
-    .theme-toggle {
-      width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
-      border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent);
-      background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent);
-      cursor: pointer; color: var(--muted);
-    }
+    .header-right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
+    .anycoder { color: var(--primary); text-decoration: none; font-weight: 700; border: 1px dashed color-mix(in oklab, var(--primary) 60%, transparent); padding: 8px 12px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 12%, transparent); }
+    .theme-toggle { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent); cursor: pointer; color: var(--muted); }
 
-    /* Layout */
     main {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: clamp(18px, 3vw, 28px);
-      display: grid;
-      grid-template-columns: 360px 1fr;
-      gap: var(--gap);
-    }
-    @media (max-width: 980px) {
-      main { grid-template-columns: 1fr; }
+      max-width: 1200px; margin: 0 auto; padding: clamp(18px, 3vw, 28px);
+      display: grid; grid-template-columns: 360px 1fr; gap: var(--gap);
     }
+    @media (max-width: 980px) { main { grid-template-columns: 1fr; } }
 
-    /* Card */
     .card {
       background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent);
       border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent);
@@ -161,202 +102,114 @@
       box-shadow: var(--shadow);
     }
 
-    /* Login */
-    .login {
-      padding: clamp(18px, 3.2vw, 28px);
-      position: sticky;
-      top: calc(62px + 12px);
-      align-self: start;
-    }
-    @media (max-width: 980px) {
-      .login { position: relative; top: 0; }
-    }
-    .login-header {
-      display: grid; gap: 8px;
-    }
-    .login-header h2 {
-      margin: 0; font-size: clamp(18px, 2.6vw, 22px);
-    }
+    .login { padding: clamp(18px, 3.2vw, 28px); position: sticky; top: calc(62px + 12px); align-self: start; }
+    @media (max-width: 980px) { .login { position: relative; top: 0; } }
+    .login-header { display: grid; gap: 8px; }
+    .login-header h2 { margin: 0; font-size: clamp(18px, 2.6vw, 22px); }
     .subtitle { color: var(--muted); font-size: 13px; }
 
-    .mac-grid {
-      display: grid;
-      grid-template-columns: repeat(6, 1fr);
-      gap: 8px;
-      margin: 16px 0 6px;
-    }
-    .mac-input {
-      position: relative;
-    }
+    .mac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 16px 0 6px; }
+    .mac-input { position: relative; }
     .mac-input input {
-      width: 100%;
-      padding: 14px 0;
-      text-align: center;
-      font-size: 18px;
-      letter-spacing: 1px;
-      border-radius: var(--radius-lg);
-      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
-      background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
-      color: var(--txt);
-      outline: none;
-      transition: .2s border-color, .2s background;
+      width: 100%; padding: 14px 0; text-align: center; font-size: 18px; letter-spacing: 1px;
+      border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
+      background: color-mix(in oklab, var(--bg-soft) 70%, transparent); color: var(--txt);
+      outline: none; transition: .2s border-color, .2s background;
     }
     .mac-input input:focus {
       border-color: color-mix(in oklab, var(--primary) 60%, transparent);
       background: color-mix(in oklab, var(--primary) 8%, transparent);
       box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 10%, transparent);
     }
-    .login .actions {
-      display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap;
-    }
+    .login .actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
     .btn {
-      display: inline-flex; align-items: center; gap: 8px;
-      padding: 12px 16px; border-radius: 12px;
+      display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px;
       border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
       background: linear-gradient(180deg, color-mix(in oklab, var(--elev) 86%, transparent), transparent);
-      color: var(--txt); font-weight: 700; cursor: pointer;
-      transition: .2s transform, .2s border-color, .2s background, .2s color;
+      color: var(--txt); font-weight: 700; cursor: pointer; transition: .2s transform, .2s border-color, .2s background, .2s color;
     }
     .btn:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--txt) 16%, transparent); }
     .btn.primary {
       border-color: color-mix(in oklab, var(--primary) 60%, transparent);
       background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 22%, transparent), transparent);
-      color: white;
-      box-shadow: 0 10px 18px color-mix(in oklab, var(--primary) 22%, transparent);
+      color: white; box-shadow: 0 10px 18px color-mix(in oklab, var(--primary) 22%, transparent);
     }
     .btn.ghost { background: transparent; }
-    .hint {
-      font-size: 12px; color: var(--muted); margin-top: 6px;
-      display: flex; align-items: center; gap: 6px;
-    }
+    .hint { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
 
-    .provider {
-      margin-top: 18px;
-      display: grid; gap: 10px;
-    }
-    .provider .row {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      gap: 10px;
-      align-items: center;
-    }
-    .select, .input {
-      position: relative;
-    }
+    .provider { margin-top: 18px; display: grid; gap: 10px; }
+    .provider .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
+    .select, .input { position: relative; }
     select, .input input {
-      width: 100%;
-      appearance: none;
-      padding: 14px 16px;
-      border-radius: var(--radius-lg);
+      width: 100%; appearance: none; padding: 14px 16px; border-radius: var(--radius-lg);
       border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
-      background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
-      color: var(--txt);
-      outline: none;
-      transition: .2s border-color, .2s background;
-      font-weight: 600;
+      background: color-mix(in oklab, var(--bg-soft) 70%, transparent); color: var(--txt);
+      outline: none; transition: .2s border-color, .2s background; font-weight: 600;
     }
     select:focus, .input input:focus {
       border-color: color-mix(in oklab, var(--accent) 60%, transparent);
       background: color-mix(in oklab, var(--accent) 8%, transparent);
       box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 10%, transparent);
     }
-    .select i {
-      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
-      color: var(--muted);
-      pointer-events: none;
-    }
+    .select i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
 
-    .divider {
-      height: 1px; background: color-mix(in oklab, var(--txt) 10%, transparent);
-      margin: 16px 0;
-    }
+    .divider { height: 1px; background: color-mix(in oklab, var(--txt) 10%, transparent); margin: 16px 0; }
 
-    .status {
-      display: grid; gap: 8px;
-      padding: 10px 12px;
-      background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
-      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
-      border-radius: var(--radius-md);
-    }
-    .status .line {
-      display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
-    }
+    .status { display: grid; gap: 8px; padding: 10px 12px; background: color-mix(in oklab, var(--bg-soft) 60%, transparent); border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent); border-radius: var(--radius-md); }
+    .status .line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
 
-    /* Content Area */
-    .content {
-      display: grid; gap: var(--gap);
-    }
+    .content { display: grid; gap: var(--gap); }
     .hero {
       position: relative; overflow: clip; border-radius: var(--radius-xl);
       background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 16%, transparent), color-mix(in oklab, var(--accent) 10%, transparent)),
                   url('https://images.unsplash.com/photo-1478720568477-152d9b164e26?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
       min-height: 200px;
     }
-    .hero::after {
-      content: ""; position: absolute; inset: 0;
-      background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%, rgba(0,0,0,.55));
-      pointer-events: none;
-    }
-    .hero-inner {
-      position: relative; z-index: 1; padding: clamp(18px, 3vw, 28px);
-      display: grid; gap: 8px;
-    }
+    .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%, rgba(0,0,0,.55)); pointer-events: none; }
+    .hero-inner { position: relative; z-index: 1; padding: clamp(18px, 3vw, 28px); display: grid; gap: 8px; }
     .hero h2 { margin: 0; font-size: clamp(20px, 3vw, 28px); }
     .hero p { margin: 0; color: #dfe7ff; max-width: 70ch; }
 
-    /* Tabs */
     .tabs {
       display: flex; gap: 10px; flex-wrap: wrap;
       background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent);
       border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent);
-      border-radius: var(--radius-xl);
-      padding: 8px;
+      border-radius: var(--radius-xl); padding: 8px;
+      position: sticky; top: calc(62px + 12px); z-index: 10;
     }
-    .tab {
-      padding: 10px 14px; border-radius: 999px; cursor: pointer; font-weight: 700;
-      color: var(--muted);
-      border: 1px solid transparent;
-      background: transparent;
-      transition: .2s;
+    .tab { padding: 10px 14px; border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--muted); border: 1px solid transparent; background: transparent; transition: .2s; }
+    .tab.active { color: var(--txt); background: color-mix(in oklab, var(--primary) 12%, transparent); border-color: color-mix(in oklab, var(--primary) 40%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 18%, transparent); }
+
+    .toolbar {
+      display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
     }
-    .tab.active {
-      color: var(--txt);
-      background: color-mix(in oklab, var(--primary) 12%, transparent);
-      border-color: color-mix(in oklab, var(--primary) 40%, transparent);
-      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 18%, transparent);
+    .searchbar {
+      display: grid; grid-template-columns: 24px 1fr 24px; align-items: center;
+      padding: 10px 12px; border-radius: 12px;
+      background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
+      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
     }
+    .searchbar input { border: none; outline: none; background: transparent; color: var(--txt); font-weight: 600; }
+    .filters { display: flex; gap: 8px; flex-wrap: wrap; }
+    .filter-chip { padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent); background: color-mix(in oklab, var(--bg-soft) 60%, transparent); color: var(--muted); font-weight: 700; cursor: pointer; }
+    .filter-chip.active { color: var(--txt); border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
 
-    /* Grid of channels */
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
-      gap: var(--gap);
-    }
+    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: var(--gap); }
     .channel {
       position: relative; overflow: clip; border-radius: 16px; isolation: isolate;
       background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent);
       border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent);
       transition: .2s transform, .2s box-shadow, .2s border-color;
     }
-    .channel:hover {
-      transform: translateY(-3px);
-      border-color: color-mix(in oklab, var(--primary) 24%, transparent);
-      box-shadow: 0 16px 30px rgba(0,0,0,.18);
-    }
-    .poster {
-      aspect-ratio: 16/9; background: #0a0d14; position: relative;
-    }
+    .channel:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--primary) 24%, transparent); box-shadow: 0 16px 30px rgba(0,0,0,.18); }
+    .poster { aspect-ratio: 16/9; background: #0a0d14; position: relative; }
     .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
     .badge {
       position: absolute; top: 10px; left: 10px;
-      background: color-mix(in oklab, var(--accent) 26%, transparent);
-      color: white; padding: 6px 10px; font-size: 12px; border-radius: 999px;
-      display: inline-flex; align-items: center; gap: 6px;
-      box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 18%, transparent);
-    }
-    .meta {
-      padding: 12px; display: grid; gap: 6px;
+      background: color-mix(in oklab, var(--accent) 26%, transparent); color: white; padding: 6px 10px; font-size: 12px; border-radius: 999px;
+      display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 18%, transparent);
     }
+    .meta { padding: 12px; display: grid; gap: 6px; }
     .meta .title { font-weight: 800; }
     .meta .sub { color: var(--muted); font-size: 13px; }
     .meta .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@@ -367,72 +220,28 @@
       color: white; display: inline-flex; align-items: center; gap: 8px;
     }
 
-    /* Player modal */
-    dialog.player {
-      width: min(980px, 96vw);
-      border: none;
-      padding: 0;
-      background: transparent;
-    }
+    dialog.player { width: min(980px, 96vw); border: none; padding: 0; background: transparent; }
     dialog::backdrop {
       background: radial-gradient(800px 400px at 80% 10%, rgba(91,140,255,.3), transparent 60%),
                   radial-gradient(600px 300px at 20% 90%, rgba(33,212,163,.25), transparent 60%),
                   rgba(0,0,0,.65);
       backdrop-filter: blur(10px);
     }
-    .player-card {
-      border-radius: 18px; overflow: clip; background: var(--surface);
-      border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent);
-      box-shadow: var(--shadow);
-    }
-    .player-top {
-      position: relative; background: #000; aspect-ratio: 16/9;
-      display: grid; place-items: center;
-    }
-    video {
-      width: 100%; height: 100%; object-fit: contain; background: #000;
-    }
-    .player-bottom {
-      padding: 12px; display: grid; gap: 10px;
-    }
-    .player-actions {
-      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
-    }
-    .chip {
-      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
-      background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
-      padding: 8px 12px; border-radius: 999px; color: var(--muted); font-weight: 700;
-    }
-    .close {
-      margin-left: auto;
-      background: transparent; border: 1px solid color-mix(in oklab, var(--txt) 12%, transparent);
-      color: var(--muted); padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 800;
-    }
+    .player-card { border-radius: 18px; overflow: clip; background: var(--surface); border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent); box-shadow: var(--shadow); }
+    .player-top { position: relative; background: #000; aspect-ratio: 16/9; display: grid; place-items: center; }
+    video { width: 100%; height: 100%; object-fit: contain; background: #000; }
+    .player-bottom { padding: 12px; display: grid; gap: 10px; }
+    .player-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+    .chip { border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent); background: color-mix(in oklab, var(--bg-soft) 60%, transparent); padding: 8px 12px; border-radius: 999px; color: var(--muted); font-weight: 700; }
+    .close { margin-left: auto; background: transparent; border: 1px solid color-mix(in oklab, var(--txt) 12%, transparent); color: var(--muted); padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 800; }
     .close:hover { color: var(--txt); }
 
-    /* Empty state */
-    .empty {
-      padding: 30px; text-align: center; color: var(--muted);
-      border: 1px dashed color-mix(in oklab, var(--txt) 14%, transparent);
-      border-radius: var(--radius-xl);
-      background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent);
-    }
+    .empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed color-mix(in oklab, var(--txt) 14%, transparent); border-radius: var(--radius-xl); background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent); }
 
-    /* Footer */
-    footer {
-      max-width: 1200px; margin: 20px auto 60px; padding: 0 clamp(18px, 3vw, 28px);
-      color: var(--muted); font-size: 12px;
-      display: grid; gap: 10px;
-    }
-    .credits {
-      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
-    }
-    .tag {
-      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
-      border-radius: 999px; padding: 6px 10px; background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
-    }
+    footer { max-width: 1200px; margin: 20px auto 60px; padding: 0 clamp(18px, 3vw, 28px); color: var(--muted); font-size: 12px; display: grid; gap: 10px; }
+    .credits { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+    .tag { border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent); border-radius: 999px; padding: 6px 10px; background: color-mix(in oklab, var(--bg-soft) 60%, transparent); }
 
-    /* Utility */
     .hidden { display: none !important; }
     .shake { animation: shake .22s 2; }
     @keyframes shake {
@@ -468,7 +277,6 @@
   </header>
 
   <main>
-    <!-- Login / Settings -->
     <section class="card login" id="loginCard">
       <div class="login-header">
         <h2>Se connecter</h2>
@@ -513,11 +321,9 @@
       </form>
 
       <div class="divider"></div>
-
       <div class="hint"><i class='bx bx-shield-quarter'></i> Astuce: Appuyez sur Tab pour passer au bloc suivant. Seuls les caractères 0-9 et A-F sont acceptés.</div>
     </section>
 
-    <!-- Content -->
     <section class="content">
       <div class="hero">
         <div class="hero-inner">
@@ -534,10 +340,20 @@
         <button class="tab" data-tab="recent"><i class='bx bx-time-five'></i> Récents</button>
       </div>
 
-      <!-- Grids -->
-      <div id="grid-live" class="grid" role="region" aria-label="Chaînes en direct">
-        <!-- Filled by JS -->
+      <div class="toolbar">
+        <div class="searchbar">
+          <i class='bx bx-search' aria-hidden="true"></i>
+          <input id="searchInput" type="search" placeholder="Rechercher dans tous les onglets…" />
+          <button id="clearSearch" title="Effacer" class="btn ghost" style="border:none;background:transparent;color:var(--muted);padding:0;display:grid;place-items:center"><i class='bx bx-x'></i></button>
+        </div>
+        <div class="filters">
+          <button class="filter-chip active" data-filter="all"><i class='bx bx-layer'></i> Tous</button>
+          <button class="filter-chip" data-filter="hd"><i class='bx bx-video'></i> HD/4K</button>
+          <button class="filter-chip" data-filter="recent"><i class='bx bx-bolt-circle'></i> Nouveautés</button>
+        </div>
       </div>
+
+      <div id="grid-live" class="grid" role="region" aria-label="Chaînes en direct"></div>
       <div id="grid-vod" class="grid hidden" role="region" aria-label="Films VOD"></div>
       <div id="grid-series" class="grid hidden" role="region" aria-label="Séries TV"></div>
       <div id="grid-favs" class="grid hidden" role="region" aria-label="Favoris">
@@ -555,7 +371,6 @@
     </section>
   </main>
 
-  <!-- Player Modal -->
   <dialog class="player" id="playerDialog">
     <div class="player-card">
       <div class="player-top">
@@ -610,14 +425,10 @@
     const pasteMacBtn = document.getElementById('pasteMac');
     const saveConfigBtn = document.getElementById('saveConfig');
 
-    function formatHex(val) {
-      return val.replace(/[^0-9a-f]/gi, '').toUpperCase().slice(0, 2);
-    }
-
+    function formatHex(val) { return val.replace(/[^0-9a-f]/gi, '').toUpperCase().slice(0, 2); }
     macBlocks.forEach((inp, idx) => {
-      inp.addEventListener('input', (e) => {
-        const v = formatHex(inp.value);
-        inp.value = v;
+      inp.addEventListener('input', () => {
+        const v = formatHex(inp.value); inp.value = v;
         if (v.length === 2 && idx < macBlocks.length - 1) macBlocks[idx + 1].focus();
       });
       inp.addEventListener('keydown', (e) => {
@@ -627,40 +438,28 @@
       });
       inp.addEventListener('paste', (e) => {
         const text = (e.clipboardData || window.clipboardData).getData('text');
-        if (!text) return;
-        e.preventDefault();
-        fillMacFromString(text);
+        if (!text) return; e.preventDefault(); fillMacFromString(text);
       });
     });
 
-    function macToString() {
-      return macBlocks.map(b => (b.value || '00')).join(':');
-    }
+    function macToString() { return macBlocks.map(b => (b.value || '00')).join(':'); }
     function setStatus(text, extra) {
       statusBox.innerHTML = `
         <div class="line"><i class='bx bx-info-circle'></i> ${text}</div>
         <div class="line"><i class='bx bx-time'></i> Valide jusqu’à: ${extra || '—'}</div>
       `;
     }
-    function validMacString(s) {
-      return /^([0-9A-F]{2}:){5}[0-9A-F]{2}$/.test(s);
-    }
+    function validMacString(s) { return /^([0-9A-F]{2}:){5}[0-9A-F]{2}$/.test(s); }
     function fillMacFromString(text) {
       const cleaned = text.trim().replace(/-/g, ':').replace(/\./g, '').toUpperCase();
       let mac = cleaned;
-      if (/^[0-9A-F]{12}$/.test(cleaned)) {
-        mac = cleaned.match(/.{1,2}/g).join(':');
-      }
+      if (/^[0-9A-F]{12}$/.test(cleaned)) mac = cleaned.match(/.{1,2}/g).join(':');
       if (/^([0-9A-F]{2}[:]){5}[0-9A-F]{2}$/.test(mac)) {
         mac.split(':').forEach((pair, i) => macBlocks[i].value = pair);
-      } else {
-        flashInvalid();
-      }
+      } else { flashInvalid(); }
     }
     function flashInvalid() {
-      macForm.classList.remove('shake');
-      void macForm.offsetWidth;
-      macForm.classList.add('shake');
+      macForm.classList.remove('shake'); void macForm.offsetWidth; macForm.classList.add('shake');
     }
 
     randomMacBtn.addEventListener('click', () => {
@@ -681,15 +480,11 @@
     });
 
     saveConfigBtn.addEventListener('click', () => {
-      const cfg = {
-        provider: providerSelect.value,
-        portal: portalUrl.value
-      };
+      const cfg = { provider: providerSelect.value, portal: portalUrl.value };
       localStorage.setItem('iptv_cfg', JSON.stringify(cfg));
       setStatus('Configuration sauvegardée', new Date(Date.now() + 86400000).toLocaleString());
     });
 
-    // Load saved config to inputs
     (function loadCfg(){
       const cfg = JSON.parse(localStorage.getItem('iptv_cfg') || '{"provider":"custom","portal":""}');
       providerSelect.value = cfg.provider || 'custom';
@@ -698,30 +493,23 @@
       if (macSaved && validMacString(macSaved)) fillMacFromString(macSaved);
     })();
 
-    // Simulated MAC auth
     macForm.addEventListener('submit', async (e) => {
       e.preventDefault();
       const mac = macToString();
-      if (!validMacString(mac)) {
-        flashInvalid();
-        setStatus('Code MAC invalide', '—');
-        return;
-      }
+      if (!validMacString(mac)) { flashInvalid(); setStatus('Code MAC invalide', '—'); return; }
       setStatus('Connexion en cours...', '—');
-      await new Promise(r => setTimeout(r, 800));
-      const cfg = JSON.parse(localStorage.getItem('iptv_cfg') || '{"provider":"custom"}');
+      await new Promise(r => setTimeout(r, 600));
       const last = parseInt(mac.split(':')[5], 16);
       if (Number.isFinite(last) && last % 2 === 0) {
         setStatus('Connecté', new Date(Date.now() + 7 * 86400000).toLocaleString());
         localStorage.setItem('iptv_mac', mac);
-        document.body.dispatchEvent(new CustomEvent('iptv:connected', { detail: { mac, cfg } }));
+        document.body.dispatchEvent(new CustomEvent('iptv:connected', { detail: { mac } }));
       } else {
-        setStatus('Accès refusé par le portail', '—');
-        flashInvalid();
+        setStatus('Accès refusé par le portail', '—'); flashInvalid();
       }
     });
 
-    // Content data (demo)
+    // Demo data
     const data = {
       live: [
         { id: 'l1', title: 'Infos 24', group: 'News', logo: 'https://picsum.photos/seed/news1/800/450', url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', tag: 'HD' },
@@ -754,15 +542,20 @@
       recent: document.getElementById('grid-recent')
     };
 
+    // Make all tabs accessible without login (per request)
     tabs.forEach(tab => {
       tab.addEventListener('click', () => {
         tabs.forEach(t => t.classList.remove('active'));
         tab.classList.add('active');
         const chosen = tab.dataset.tab;
         Object.keys(grids).forEach(k => grids[k].classList.toggle('hidden', k !== chosen));
+        // Persist selected tab
+        localStorage.setItem('iptv_tab', chosen);
+        applySearchAndFilters();
       });
     });
 
+    // Build cards
     function createCard(item, type) {
       const el = document.createElement('div');
       el.className = 'channel';
@@ -784,45 +577,13 @@
           </div>
         </div>
       `;
+      el.dataset.search = [item.title, item.group || '', item.year || '', item.tag || ''].join(' ').toLowerCase();
+      el.dataset.quality = ((item.tag || '').toLowerCase().includes('hd') || (item.tag || '').toLowerCase().includes('4k')) ? 'hd' : 'other';
+      el.dataset.recent = (['l3','v3','s3'].includes(item.id)) ? '1' : '0';
       el.querySelector('.play').addEventListener('click', () => openPlayer(item, type));
-      el.querySelector('.add-fav').addEventListener('click', (ev) => {
-        ev.stopPropagation();
-        toggleFav(item);
-      });
+      el.querySelector('.add-fav').addEventListener('click', (ev) => { ev.stopPropagation(); toggleFav(item, type); });
       return el;
     }
 
-    function renderAll() {
-      grids.live.innerHTML = '';
-      data.live.forEach(ch => grids.live.appendChild(createCard(ch, 'live')));
-      grids.vod.innerHTML = '';
-      data.vod.forEach(v => grids.vod.appendChild(createCard(v, 'vod')));
-      grids.series.innerHTML = '';
-      data.series.forEach(s => grids.series.appendChild(createCard(s, 'series')));
-      renderFavs();
-      renderRecent();
-    }
-
-    // Favorites
-    function getFavs() { return JSON.parse(localStorage.getItem('iptv_favs') || '[]'); }
-    function setFavs(f) { localStorage.setItem('iptv_favs', JSON.stringify(f)); renderFavs(); }
-    function toggleFav(item) {
-      const favs = getFavs();
-      const idx = favs.findIndex(x => x.id === item.id);
-      if (idx >= 0) favs.splice(idx, 1); else favs.push(item);
-      setFavs(favs);
-    }
-    function renderFavs() {
-      const favs = getFavs();
-      const wrap = grids.favs;
-      wrap.innerHTML = '';
-      if (!favs.length) {
-        const empty = document.createElement('div');
-        empty.className = 'empty';
-        empty.innerHTML = "<i class='bx bx-star' style='font-size:32px;'></i><div>Aucun favori pour le moment.</div>";
-        wrap.appendChild(empty);
-        return;
-      }
-      wrap.classList.add('grid');
-      favs.forEach(it => {
-        const type = it.year ? 'vod' : (it.group ? 'live
+    // Render functions
+    function