system.php: extract inline JS and style= attrs into separate assets

Move the ~130-line $extraJsInline heredoc from admin/system.php into a
static file public/assets/js/system.js, loaded via $extraJs so the
template footer emits a normal <script src=…>.

Replace 4 inline style= attributes with named CSS modifier classes in
system.css:
  - style="margin:0;border:none;padding:0" on .srv-section-title
    → .srv-section-title--compact
  - style="margin-bottom:.75rem" on sub-heading <h3>
    → .srv-section-title--sub
  - style="margin-bottom:0" on .php-grid
    → .php-grid--flush
  - style="font-size:.84rem;color:var(--text-secondary)" on <label>
    → .log-toolbar label rule in system.css

The one remaining inline style (--disk-pct / --disk-color CSS custom
properties on .disk-bar) is intentionally kept: it carries PHP runtime
values that cannot be expressed in a static stylesheet.

public/assets/css/system.css

@@ -119,6 +119,14 @@
     margin: 0 0 1rem;
     font-weight: 500;
 }
+/* Compact variant: no border, no margin — used inside sys-status-header */
+.srv-section-title--compact {
+    margin: 0;
+    border: none;
+    padding: 0;
+}
+/* Sub-section variant: tighter bottom margin — used for PHP/disk sub-headings */
+.srv-section-title--sub { margin-bottom: .75rem; }
 
 /* ── PHP info grid ─────────────────────────────────────────────────────── */
 .php-grid {
@@ -127,6 +135,8 @@
     gap: .5rem .75rem;
     margin-bottom: 2.5rem;
 }
+/* Flush variant: no bottom margin — used inside sys-status-meta cell */
+.php-grid--flush { margin-bottom: 0; }
 .php-item {
     background: #242424;
     border: 1px solid #555;
@@ -208,6 +218,10 @@
     gap: .6rem;
     margin-bottom: 1.25rem;
 }
+.log-toolbar label {
+    font-size: .84rem;
+    color: var(--text-secondary);
+}
 .log-toolbar select {
     background: #242424;
     border: 1px solid #555;

public/assets/js/system.js

@@ -0,0 +1,146 @@
+(function () {
+
+    // ── Status section collapse toggle ────────────────────────────────
+    var toggleBtn  = document.getElementById('sys-status-toggle');
+    var statusBody = document.getElementById('sys-status-body');
+    if (toggleBtn && statusBody) {
+        toggleBtn.addEventListener('click', function () {
+            var collapsed = statusBody.hidden;
+            statusBody.hidden = !collapsed;
+            toggleBtn.setAttribute('aria-expanded', collapsed ? 'true' : 'false');
+            toggleBtn.textContent = collapsed ? '▲ Réduire' : '▼ Développer';
+            try { localStorage.setItem('sys_status_collapsed', collapsed ? '0' : '1'); } catch(e) {}
+        });
+        try {
+            if (localStorage.getItem('sys_status_collapsed') === '1') {
+                statusBody.hidden = true;
+                toggleBtn.setAttribute('aria-expanded', 'false');
+                toggleBtn.textContent = '▼ Développer';
+            }
+        } catch(e) {}
+    }
+
+    // ── fetch()-based tab panel loading ───────────────────────────────
+    var panel   = document.getElementById('sys-tab-panel');
+    var tabNav  = document.querySelector('.sys-tabs');
+    if (!panel || !tabNav || !window.fetch) return;
+
+    var currentTab = panel.dataset.tab;
+    var currentN   = panel.dataset.n;
+
+    function loadPanel(tab, n, pushState) {
+        var url     = new URL(window.location.href);
+        var fragUrl = new URL('/admin/system-fragment.php', window.location.origin);
+        fragUrl.searchParams.set('tab', tab);
+        fragUrl.searchParams.set('n',   n);
+
+        // Mark the panel as loading
+        panel.classList.add('sys-panel-loading');
+
+        fetch(fragUrl.toString(), { credentials: 'same-origin' })
+            .then(function (r) {
+                if (!r.ok) throw new Error('HTTP ' + r.status);
+                return r.text();
+            })
+            .then(function (html) {
+                panel.innerHTML = html;
+                panel.dataset.tab = tab;
+                panel.dataset.n   = n;
+                currentTab = tab;
+                currentN   = n;
+                panel.classList.remove('sys-panel-loading');
+
+                // Update active tab indicators
+                tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
+                    var isActive = a.dataset.tab === tab;
+                    a.classList.toggle('active', isActive);
+                    if (isActive) {
+                        a.setAttribute('aria-current', 'page');
+                    } else {
+                        a.removeAttribute('aria-current');
+                    }
+                });
+
+                // Re-bind inner controls (lines-select, copy btn)
+                bindPanelControls();
+
+                // Update browser URL without reloading
+                if (pushState) {
+                    url.searchParams.set('tab', tab);
+                    url.searchParams.set('n',   n);
+                    history.pushState({ tab: tab, n: n }, '', url.toString());
+                }
+            })
+            .catch(function () {
+                // Graceful degradation: fall back to full page load
+                panel.classList.remove('sys-panel-loading');
+                url.searchParams.set('tab', tab);
+                url.searchParams.set('n',   n);
+                window.location.href = url.toString();
+            });
+    }
+
+    // Wire tab links
+    tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
+        a.addEventListener('click', function (e) {
+            e.preventDefault();
+            var tab = a.dataset.tab;
+            if (tab && tab !== currentTab) {
+                loadPanel(tab, currentN, true);
+            }
+        });
+    });
+
+    // Handle browser back/forward
+    window.addEventListener('popstate', function (e) {
+        if (e.state && e.state.tab) {
+            loadPanel(e.state.tab, e.state.n || 100, false);
+        }
+    });
+
+    function bindPanelControls() {
+        // Lines-select
+        var sel = panel.querySelector('#lines-select');
+        if (sel) {
+            sel.addEventListener('change', function () {
+                loadPanel(currentTab, parseInt(this.value, 10), true);
+            });
+        }
+        // Copy button
+        var copyBtn = panel.querySelector('#log-copy-btn');
+        var logOut  = panel.querySelector('#log-output');
+        if (copyBtn && logOut) {
+            copyBtn.addEventListener('click', function () {
+                var text = Array.from(logOut.querySelectorAll('.log-line'))
+                    .map(function (el) { return el.textContent; })
+                    .join('\n');
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    navigator.clipboard.writeText(text).then(function () {
+                        copyBtn.textContent = '✓ Copié';
+                        copyBtn.classList.add('copied');
+                        setTimeout(function () {
+                            copyBtn.textContent = 'Copier';
+                            copyBtn.classList.remove('copied');
+                        }, 2000);
+                    }).catch(function () { fallbackCopy(text); });
+                } else {
+                    fallbackCopy(text);
+                }
+            });
+        }
+    }
+
+    // Bind controls already present on first load
+    bindPanelControls();
+
+    function fallbackCopy(text) {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); } catch (e) {}
+        document.body.removeChild(ta);
+    }
+
+})();