From 8ca85e778e89f99f80a8b74542e1ee7602fe4dac Mon Sep 17 00:00:00 2001
From: Johnnybegood90 <droidente@me.com>
Date: Fri, 13 Mar 2026 23:04:55 +0100
Subject: [PATCH] Split the CSS from head.php into separate files.

---
 src/css/grid.css   | 96 ----------------------------------------------
 src/css/mobile.css | 88 ++++++++++++++++++++++++++++++++++++++++++
 src/css/topbar.css | 61 +++++++++--------------------
 3 files changed, 106 insertions(+), 139 deletions(-)

diff --git a/src/css/grid.css b/src/css/grid.css
index 48c62b5..b5199ef 100644
--- a/src/css/grid.css
+++ b/src/css/grid.css
@@ -213,99 +213,3 @@
     letter-spacing: 0.06em;
     white-space: nowrap;
   }
-
-  /* ═══════════════════════════════════════════
-     MOBILE LIST VIEW
-  ═══════════════════════════════════════════ */
-  .mobile-view {
-    display: none;
-    flex: 1;
-    overflow-y: auto;
-    min-height: 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;
-  }
diff --git a/src/css/mobile.css b/src/css/mobile.css
index 38fb563..d36bdfb 100644
--- a/src/css/mobile.css
+++ b/src/css/mobile.css
@@ -101,3 +101,91 @@
     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;
+  }
diff --git a/src/css/topbar.css b/src/css/topbar.css
index b1974c6..a314444 100644
--- a/src/css/topbar.css
+++ b/src/css/topbar.css
@@ -117,7 +117,7 @@
     color: var(--accent);
   }
 
-  /* ═══════════════════════════════════════════
+/* ═══════════════════════════════════════════
      RESPONSIVE
   ═══════════════════════════════════════════ */
   @media (max-width: 900px) {
@@ -127,7 +127,7 @@
     .clock { font-size: 16px; }
   }
 
-  /* ═══════════════════════════════════════════
+/* ═══════════════════════════════════════════
      SÉLECTEUR DE THÈME
   ═══════════════════════════════════════════ */
   .theme-select {
@@ -167,45 +167,20 @@
     #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;
+/* ── 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;
   }
-  .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-select:hover { border-color: var(--accent2); color: var(--accent2); }
+  .source-select option { background: #111; color: #eee; font-family: sans-serif; }