feat(cockpit): création du dashboard custom Forgium 100% sur-mesure

site-web/console/cockpit.js

@@ -0,0 +1,297 @@
+// FORGIUM CLOUD COCKPIT CONTROLLER
+const FORGIUM_API_BASE = 'https://panel.forgium.fr/api/client';
+const DEFAULT_KEY = 'ptlc_8mAbydxokymforgium_144010543bd11119f4fe424b643e49d6d2e17c8271224b81';
+
+class ForgiumCockpit {
+    constructor() {
+        this.apiKey = localStorage.getItem('forgium_cockpit_key') || DEFAULT_KEY;
+        this.servers = [];
+        this.currentServer = null;
+        this.socket = null;
+        this.pollInterval = null;
+
+        this.initDOMElements();
+        this.bindEvents();
+        this.checkAuthAndStart();
+    }
+
+    initDOMElements() {
+        this.fleetView = document.getElementById('fleet-view');
+        this.serverView = document.getElementById('server-view');
+        this.serversGrid = document.getElementById('servers-grid');
+        this.configModal = document.getElementById('config-modal');
+        this.apiKeyInput = document.getElementById('api-key-input');
+        
+        // Detail View Elements
+        this.backBtn = document.getElementById('back-to-fleet');
+        this.serverTitle = document.getElementById('server-detail-title');
+        this.serverDesc = document.getElementById('server-detail-desc');
+        this.serverBadge = document.getElementById('server-detail-badge');
+        this.terminalOutput = document.getElementById('terminal-output');
+        this.terminalInput = document.getElementById('terminal-input');
+        
+        // Stat counters
+        this.countTotal = document.getElementById('stat-total-servers');
+        this.countRunning = document.getElementById('stat-running-servers');
+        
+        // Detail Gauges
+        this.gaugeCpu = document.getElementById('gauge-cpu');
+        this.gaugeCpuFill = document.getElementById('gauge-cpu-fill');
+        this.gaugeRam = document.getElementById('gauge-ram');
+        this.gaugeRamFill = document.getElementById('gauge-ram-fill');
+        this.gaugeDisk = document.getElementById('gauge-disk');
+        this.gaugeDiskFill = document.getElementById('gauge-disk-fill');
+
+        // Power Buttons
+        this.btnStart = document.getElementById('btn-power-start');
+        this.btnRestart = document.getElementById('btn-power-restart');
+        this.btnStop = document.getElementById('btn-power-stop');
+    }
+
+    bindEvents() {
+        document.getElementById('save-key-btn').addEventListener('click', () => {
+            const key = this.apiKeyInput.value.trim();
+            if (key) {
+                this.apiKey = key;
+                localStorage.setItem('forgium_cockpit_key', key);
+                this.configModal.classList.add('hidden');
+                this.loadFleet();
+            }
+        });
+
+        document.getElementById('btn-settings').addEventListener('click', () => {
+            this.apiKeyInput.value = this.apiKey;
+            this.configModal.classList.remove('hidden');
+        });
+
+        this.backBtn.addEventListener('click', () => {
+            this.showFleetView();
+        });
+
+        this.terminalInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                const cmd = this.terminalInput.value.trim();
+                if (cmd) {
+                    this.sendCommand(cmd);
+                    this.terminalInput.value = '';
+                }
+            }
+        });
+
+        this.btnStart.addEventListener('click', () => this.sendPowerSignal('start'));
+        this.btnRestart.addEventListener('click', () => this.sendPowerSignal('restart'));
+        this.btnStop.addEventListener('click', () => this.sendPowerSignal('stop'));
+    }
+
+    checkAuthAndStart() {
+        if (!this.apiKey) {
+            this.configModal.classList.remove('hidden');
+        } else {
+            this.loadFleet();
+        }
+    }
+
+    async apiRequest(endpoint, method = 'GET', body = null) {
+        const headers = {
+            'Authorization': `Bearer ${this.apiKey}`,
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        };
+
+        const res = await fetch(`${FORGIUM_API_BASE}${endpoint}`, {
+            method,
+            headers,
+            body: body ? JSON.stringify(body) : null
+        });
+
+        if (!res.ok) {
+            if (res.status === 401 || res.status === 403) {
+                this.configModal.classList.remove('hidden');
+            }
+            throw new Error(`Erreur API: ${res.status}`);
+        }
+
+        return res.json();
+    }
+
+    async loadFleet() {
+        try {
+            const data = await this.apiRequest('');
+            this.servers = data.data.map(item => item.attributes);
+            this.renderFleet();
+        } catch (err) {
+            console.error('Erreur chargement flotte:', err);
+        }
+    }
+
+    async renderFleet() {
+        this.serversGrid.innerHTML = '';
+        this.countTotal.textContent = this.servers.length;
+        let onlineCount = 0;
+
+        for (const s of this.servers) {
+            const card = document.createElement('div');
+            card.className = 'server-card';
+            
+            // Récupérer ressources en temps réel
+            let resState = 'offline';
+            let cpu = '0.0%';
+            let ram = '0 Mo';
+            try {
+                const stats = await this.apiRequest(`/servers/${s.identifier}/resources`);
+                resState = stats.attributes.current_state;
+                if (resState === 'running' || resState === 'starting') {
+                    onlineCount++;
+                }
+                cpu = (stats.attributes.resources.cpu_absolute || 0).toFixed(1) + '%';
+                const ramMb = (stats.attributes.resources.memory_bytes / 1024 / 1024).toFixed(0);
+                ram = `${ramMb} Mo / ${s.limits.memory} Mo`;
+            } catch (e) {
+                console.log('Stats offline:', s.name);
+            }
+
+            const isOnline = resState === 'running' || resState === 'starting';
+            const badgeClass = isOnline ? 'status-running' : 'status-offline';
+            const badgeText = isOnline ? 'EN LIGNE' : 'ARRÊTÉ';
+
+            const defaultAlloc = s.relationships?.allocations?.data[0]?.attributes;
+            const alias = defaultAlloc ? `node.forgium.fr:${defaultAlloc.port}` : 'Réseau Dédié';
+
+            card.innerHTML = `
+                <div class="card-top">
+                    <div class="server-info">
+                        <h3>${s.name}</h3>
+                        <span class="server-type">AMD RYZEN 7 3700X &bull; ${s.docker_image.split('/').pop().replace('yolks:', '')}</span>
+                    </div>
+                    <span class="status-badge ${badgeClass}">
+                        <span class="pulse-indicator" style="background: ${isOnline ? 'var(--accent-green)' : 'var(--text-dim)'}"></span>
+                        ${badgeText}
+                    </span>
+                </div>
+                <div class="metrics-row">
+                    <div class="metric-item">
+                        <span class="metric-name">CPU</span>
+                        <span class="metric-val">${cpu}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-name">RAM</span>
+                        <span class="metric-val">${ram}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-name">DISQUE</span>
+                        <span class="metric-val">${s.limits.disk} Mo</span>
+                    </div>
+                </div>
+                <div class="card-actions">
+                    <span class="conn-alias">${alias}</span>
+                    <button class="btn-manage">Ouvrir le Cockpit &rarr;</button>
+                </div>
+            `;
+
+            card.addEventListener('click', () => this.openServerCockpit(s));
+            this.serversGrid.appendChild(card);
+        }
+
+        this.countRunning.textContent = onlineCount;
+    }
+
+    openServerCockpit(server) {
+        this.currentServer = server;
+        this.fleetView.style.display = 'none';
+        this.serverView.classList.add('active');
+
+        this.serverTitle.textContent = server.name;
+        this.serverDesc.textContent = server.description || `Instance Cloud haute performance sur AMD Ryzen 7 3700X`;
+        this.terminalOutput.textContent = `[Forgium Console Gateway] Connexion au nœud Wings sécurisé...\n[Forgium Console Gateway] Authentification TLS / WebSocket pour le serveur [${server.name}] (UUID: ${server.identifier})\n`;
+
+        this.startTelemetryPoll();
+    }
+
+    showFleetView() {
+        this.stopTelemetryPoll();
+        this.serverView.classList.remove('active');
+        this.fleetView.style.display = 'block';
+        this.currentServer = null;
+        this.loadFleet();
+    }
+
+    startTelemetryPoll() {
+        this.updateTelemetry();
+        this.pollInterval = setInterval(() => this.updateTelemetry(), 3000);
+    }
+
+    stopTelemetryPoll() {
+        if (this.pollInterval) {
+            clearInterval(this.pollInterval);
+            this.pollInterval = null;
+        }
+    }
+
+    async updateTelemetry() {
+        if (!this.currentServer) return;
+        try {
+            const stats = await this.apiRequest(`/servers/${this.currentServer.identifier}/resources`);
+            const res = stats.attributes.resources;
+            const state = stats.attributes.current_state;
+
+            const isOnline = state === 'running' || state === 'starting';
+            this.serverBadge.className = `status-badge ${isOnline ? 'status-running' : 'status-offline'}`;
+            this.serverBadge.innerHTML = `<span class="pulse-indicator" style="background: ${isOnline ? 'var(--accent-green)' : 'var(--text-dim)'}"></span> ${isOnline ? 'EN LIGNE' : 'ARRÊTÉ'}`;
+
+            // CPU
+            const cpuPercent = (res.cpu_absolute || 0).toFixed(1);
+            this.gaugeCpu.textContent = `${cpuPercent}% / ${this.currentServer.limits.cpu}%`;
+            this.gaugeCpuFill.style.width = `${Math.min(100, (res.cpu_absolute / this.currentServer.limits.cpu) * 100)}%`;
+
+            // RAM
+            const ramMb = (res.memory_bytes / 1024 / 1024).toFixed(1);
+            const ramMax = this.currentServer.limits.memory;
+            this.gaugeRam.textContent = `${ramMb} Mo / ${ramMax} Mo`;
+            this.gaugeRamFill.style.width = `${Math.min(100, (ramMb / ramMax) * 100)}%`;
+
+            // DISK
+            const diskMb = (res.disk_bytes / 1024 / 1024).toFixed(1);
+            const diskMax = this.currentServer.limits.disk;
+            this.gaugeDisk.textContent = `${diskMb} Mo / ${diskMax} Mo`;
+            this.gaugeDiskFill.style.width = `${Math.min(100, (diskMb / diskMax) * 100)}%`;
+
+            // Log stream imitation for testing
+            if (isOnline && Math.random() > 0.4) {
+                this.appendTerminal(`[Node ${this.currentServer.node}] Heartbeat sync: CPU=${cpuPercent}% | RAM=${ramMb}Mo | Uptime=${(res.uptime / 60).toFixed(0)}m`);
+            }
+        } catch (e) {
+            console.error('Erreur télémétrie serveur:', e);
+        }
+    }
+
+    appendTerminal(text) {
+        this.terminalOutput.textContent += `${text}\n`;
+        this.terminalOutput.scrollTop = this.terminalOutput.scrollHeight;
+    }
+
+    async sendPowerSignal(signal) {
+        if (!this.currentServer) return;
+        this.appendTerminal(`[Forgium Cockpit] Envoi du signal d'alimentation: ${signal.toUpperCase()}...`);
+        try {
+            await this.apiRequest(`/servers/${this.currentServer.identifier}/power`, 'POST', { signal });
+            this.appendTerminal(`[Forgium Cockpit] Ordre ${signal.toUpperCase()} exécuté avec succès par Wings.`);
+            setTimeout(() => this.updateTelemetry(), 1000);
+        } catch (e) {
+            this.appendTerminal(`[Forgium Cockpit] ERREUR signal ${signal}: ${e.message}`);
+        }
+    }
+
+    async sendCommand(command) {
+        if (!this.currentServer) return;
+        this.appendTerminal(`> ${command}`);
+        try {
+            await this.apiRequest(`/servers/${this.currentServer.identifier}/command`, 'POST', { command });
+        } catch (e) {
+            this.appendTerminal(`[Forgium Cockpit] Erreur commande: ${e.message}`);
+        }
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    window.cockpit = new ForgiumCockpit();
+});

site-web/console/index.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cockpit & Console | Forgium Cloud</title>
+    <meta name="description" content="Centre de pilotage haute performance Forgium Cloud. Gestion en temps réel de vos serveurs de jeux et bots.">
+    <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style-console.css">
+    <link rel="icon" type="image/svg+xml" href="../favicon.svg">
+</head>
+
+<body>
+
+    <!-- NAVBAR COCKPIT -->
+    <header class="cockpit-header">
+        <div class="header-container">
+            <div class="brand-area">
+                <a href="../index.html" class="brand-link">
+                    <img src="../logo.svg" alt="Forgium Logo" width="30" height="30">
+                    FORGIUM
+                    <span class="brand-badge">COCKPIT</span>
+                </a>
+                <div class="node-status">
+                    <span class="pulse-indicator"></span>
+                    <span>WINGS CLUSTER ONLINE</span>
+                </div>
+            </div>
+
+            <div class="user-area">
+                <div class="user-chip">
+                    <div class="user-avatar">F</div>
+                    <span>Mathias Z. (Admin)</span>
+                </div>
+                <button id="btn-settings" class="btn-manage" title="Configuration de l'accès API">⚙️ Clé API</button>
+            </div>
+        </div>
+    </header>
+
+    <!-- CONTENU PRINCIPAL DU COCKPIT -->
+    <main class="cockpit-main">
+
+        <!-- 1. VUE FLOTTE (LISTE DES SERVEURS) -->
+        <section id="fleet-view" class="fleet-view">
+            <div class="fleet-header">
+                <div class="fleet-title">
+                    <h1>Centre de Contrôle Matériel</h1>
+                    <p>Supervision et pilotage direct sur architecture dédiée AMD Ryzen 7 3700X.</p>
+                </div>
+                <div class="fleet-stats">
+                    <div class="stat-pill">
+                        <div class="stat-label">Serveurs Déployés</div>
+                        <div id="stat-total-servers" class="stat-value">--</div>
+                    </div>
+                    <div class="stat-pill">
+                        <div class="stat-label">En Fonctionnement</div>
+                        <div id="stat-running-servers" class="stat-value" style="color: var(--accent-green);">--</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- GRILLE DES SERVEURS -->
+            <div id="servers-grid" class="servers-grid">
+                <!-- Injecté par cockpit.js -->
+            </div>
+        </section>
+
+        <!-- 2. VUE COCKPIT SERVEUR INDIVIDUEL (DÉTAIL + CONSOLE) -->
+        <section id="server-view" class="server-view">
+            <div class="server-navbar">
+                <button id="back-to-fleet" class="back-btn">&larr; Retour à la flotte</button>
+                <div class="server-title-group">
+                    <h2 id="server-detail-title">Chargement...</h2>
+                    <p id="server-detail-desc" style="color: var(--text-muted); font-size: 0.85rem;"></p>
+                </div>
+                <div class="power-controls">
+                    <button id="btn-power-start" class="btn-power btn-start">▶ Démarrer</button>
+                    <button id="btn-power-restart" class="btn-power btn-restart">🔄 Redémarrer</button>
+                    <button id="btn-power-stop" class="btn-power btn-stop">⏹ Arrêter</button>
+                </div>
+            </div>
+
+            <div class="cockpit-grid">
+                <!-- CONSOLE TERMINAL -->
+                <div class="terminal-window">
+                    <div class="terminal-header">
+                        <div class="terminal-title">
+                            <span>TERMINAL SHELL</span>
+                            <span id="server-detail-badge" class="status-badge status-offline">--</span>
+                        </div>
+                        <div class="terminal-dots">
+                            <span class="dot-red"></span>
+                            <span class="dot-yellow"></span>
+                            <span class="dot-green"></span>
+                        </div>
+                    </div>
+                    <div id="terminal-output" class="terminal-output"></div>
+                    <div class="terminal-input-bar">
+                        <span class="terminal-prompt">&gt;</span>
+                        <input type="text" id="terminal-input" class="terminal-input" placeholder="Envoyer une commande au serveur..." autocomplete="off">
+                    </div>
+                </div>
+
+                <!-- SIDEBAR METRIQUES EN DIRECT -->
+                <div class="side-panel">
+                    <div class="gauge-box">
+                        <h4>
+                            <span>Charge Processeur</span>
+                            <span id="gauge-cpu" style="color: var(--accent-cyan);">--</span>
+                        </h4>
+                        <div class="progress-bar-bg">
+                            <div id="gauge-cpu-fill" class="progress-bar-fill" style="width: 0%;"></div>
+                        </div>
+                        <p style="font-size: 0.75rem; color: var(--text-dim);">AMD Ryzen 7 3700X High Performance Core</p>
+                    </div>
+
+                    <div class="gauge-box">
+                        <h4>
+                            <span>Mémoire Vive (RAM)</span>
+                            <span id="gauge-ram" style="color: var(--accent-cyan);">--</span>
+                        </h4>
+                        <div class="progress-bar-bg">
+                            <div id="gauge-ram-fill" class="progress-bar-fill" style="width: 0%;"></div>
+                        </div>
+                        <p style="font-size: 0.75rem; color: var(--text-dim);">Allocation stricte isolée sans dépassement</p>
+                    </div>
+
+                    <div class="gauge-box">
+                        <h4>
+                            <span>Espace Disque SSD</span>
+                            <span id="gauge-disk" style="color: var(--accent-cyan);">--</span>
+                        </h4>
+                        <div class="progress-bar-bg">
+                            <div id="gauge-disk-fill" class="progress-bar-fill" style="width: 0%;"></div>
+                        </div>
+                        <p style="font-size: 0.75rem; color: var(--text-dim);">NVMe Local haute vitesse</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- MODAL CONFIGURATION CLÉ API -->
+    <div id="config-modal" class="config-modal hidden">
+        <div class="modal-content">
+            <h2>Authentification Forgium</h2>
+            <p>Renseignez votre clé d'accès sécurisée pour connecter ce cockpit à vos instances de calcul isolées.</p>
+            <input type="password" id="api-key-input" class="input-field" placeholder="ptlc_...">
+            <button id="save-key-btn" class="modal-btn">Enregistrer & Déverrouiller &rarr;</button>
+        </div>
+    </div>
+
+    <script src="cockpit.js"></script>
+</body>
+
+</html>

site-web/console/style-console.css

@@ -0,0 +1,633 @@
+:root {
+    --bg-deep: #030712;
+    --bg-surface: #0a101f;
+    --bg-card: rgba(13, 22, 41, 0.75);
+    --bg-card-hover: rgba(18, 30, 56, 0.85);
+    --border: rgba(56, 189, 248, 0.15);
+    --border-hover: rgba(56, 189, 248, 0.4);
+    --accent-cyan: #38bdf8;
+    --accent-blue: #2563eb;
+    --accent-green: #10b981;
+    --accent-amber: #f59e0b;
+    --accent-rose: #f43f5e;
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --text-dim: #64748b;
+    --glow-cyan: 0 0 25px rgba(56, 189, 248, 0.25);
+    --glow-green: 0 0 20px rgba(16, 185, 129, 0.3);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--bg-deep);
+    background-image: 
+        radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.08) 0%, transparent 45%),
+        radial-gradient(circle at 85% 85%, rgba(37, 99, 235, 0.08) 0%, transparent 45%);
+    color: var(--text-main);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* NAVBAR COCKPIT */
+.cockpit-header {
+    background: rgba(10, 16, 31, 0.8);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0.8rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.brand-area {
+    display: flex;
+    align-items: center;
+    gap: 1.2rem;
+}
+
+.brand-link {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    text-decoration: none;
+    color: var(--text-main);
+    font-weight: 800;
+    font-size: 1.2rem;
+    letter-spacing: -0.5px;
+}
+
+.brand-badge {
+    background: rgba(56, 189, 248, 0.12);
+    border: 1px solid var(--border);
+    color: var(--accent-cyan);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.7rem;
+    padding: 0.2rem 0.6rem;
+    border-radius: 6px;
+    font-weight: 700;
+}
+
+.node-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.pulse-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--accent-green);
+    box-shadow: var(--glow-green);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.95); opacity: 0.8; }
+    50% { transform: scale(1.2); opacity: 1; }
+    100% { transform: scale(0.95); opacity: 0.8; }
+}
+
+.user-area {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.user-chip {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 0.4rem 0.9rem;
+    border-radius: 100px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.user-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    font-weight: 800;
+}
+
+/* LAYOUT PRINCIPAL */
+.cockpit-main {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    flex: 1;
+    width: 100%;
+}
+
+/* VUE LISTE SERVEURS (FLEET OVERVIEW) */
+.fleet-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 2rem;
+}
+
+.fleet-title h1 {
+    font-size: 1.8rem;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+    margin-bottom: 0.3rem;
+}
+
+.fleet-title p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+}
+
+.fleet-stats {
+    display: flex;
+    gap: 1.5rem;
+}
+
+.stat-pill {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    padding: 0.6rem 1.2rem;
+    border-radius: 12px;
+    backdrop-filter: blur(8px);
+}
+
+.stat-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat-value {
+    font-size: 1.2rem;
+    font-weight: 700;
+    font-family: 'JetBrains Mono', monospace;
+    color: var(--accent-cyan);
+}
+
+/* GRILLE DE CARTES SERVEURS */
+.servers-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    gap: 1.5rem;
+}
+
+.server-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 18px;
+    padding: 1.6rem;
+    backdrop-filter: blur(14px);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.server-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.server-card:hover {
+    border-color: var(--border-hover);
+    transform: translateY(-4px);
+    box-shadow: var(--glow-cyan);
+}
+
+.server-card:hover::before {
+    opacity: 1;
+}
+
+.card-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1.2rem;
+}
+
+.server-info h3 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-bottom: 0.3rem;
+}
+
+.server-type {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.status-badge {
+    padding: 0.3rem 0.7rem;
+    border-radius: 100px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.status-running {
+    background: rgba(16, 185, 129, 0.15);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    color: var(--accent-green);
+}
+
+.status-offline {
+    background: rgba(100, 116, 139, 0.15);
+    border: 1px solid rgba(100, 116, 139, 0.3);
+    color: var(--text-dim);
+}
+
+.metrics-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.8rem;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 0.9rem;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    margin-bottom: 1.2rem;
+}
+
+.metric-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.metric-name {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    margin-bottom: 0.2rem;
+}
+
+.metric-val {
+    font-size: 0.95rem;
+    font-weight: 700;
+    font-family: 'JetBrains Mono', monospace;
+    color: var(--text-main);
+}
+
+.card-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.conn-alias {
+    font-size: 0.8rem;
+    font-family: 'JetBrains Mono', monospace;
+    color: var(--accent-cyan);
+    background: rgba(56, 189, 248, 0.08);
+    padding: 0.2rem 0.5rem;
+    border-radius: 6px;
+}
+
+.btn-manage {
+    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.2));
+    border: 1px solid var(--border);
+    color: var(--text-main);
+    padding: 0.4rem 0.9rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-manage:hover {
+    background: var(--accent-cyan);
+    color: #000;
+    box-shadow: var(--glow-cyan);
+}
+
+/* VUE DÉTAIL SERVEUR (COCKPIT VIEW) */
+.server-view {
+    display: none;
+}
+
+.server-view.active {
+    display: block;
+}
+
+.server-navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.back-btn {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border);
+    color: var(--text-main);
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.back-btn:hover {
+    border-color: var(--accent-cyan);
+    color: var(--accent-cyan);
+}
+
+.power-controls {
+    display: flex;
+    gap: 0.6rem;
+}
+
+.btn-power {
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    transition: all 0.2s;
+}
+
+.btn-start {
+    background: var(--accent-green);
+    color: #000;
+}
+.btn-start:hover {
+    box-shadow: var(--glow-green);
+    filter: brightness(1.1);
+}
+
+.btn-restart {
+    background: var(--accent-amber);
+    color: #000;
+}
+
+.btn-stop {
+    background: var(--accent-rose);
+    color: #fff;
+}
+
+/* COCKPIT GRID : CONSOLE + FILE/METRICS TABS */
+.cockpit-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 1.5rem;
+}
+
+/* CONSOLE CYBERPUNK */
+.terminal-window {
+    background: #02040a;
+    border: 1px solid rgba(56, 189, 248, 0.2);
+    border-radius: 16px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 600px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+}
+
+.terminal-header {
+    background: rgba(13, 22, 41, 0.95);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 0.8rem 1.2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.terminal-title {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.85rem;
+    color: var(--accent-cyan);
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.terminal-dots {
+    display: flex;
+    gap: 6px;
+}
+
+.terminal-dots span {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+.dot-red { background: #ef4444; }
+.dot-yellow { background: #f59e0b; }
+.dot-green { background: #10b981; }
+
+.terminal-output {
+    flex: 1;
+    padding: 1.2rem;
+    overflow-y: auto;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    color: #cbd5e1;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.terminal-input-bar {
+    background: rgba(10, 16, 31, 0.9);
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 0.8rem 1.2rem;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+
+.terminal-prompt {
+    color: var(--accent-cyan);
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 700;
+}
+
+.terminal-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-main);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem;
+    outline: none;
+}
+
+/* SIDE PANEL : METRIQUES EN DIRECT */
+.side-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.gauge-box {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 1.5rem;
+    backdrop-filter: blur(14px);
+}
+
+.gauge-box h4 {
+    font-size: 0.95rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+.progress-bar-bg {
+    background: rgba(255, 255, 255, 0.05);
+    height: 10px;
+    border-radius: 100px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.progress-bar-fill {
+    height: 100%;
+    border-radius: 100px;
+    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
+    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* MODAL CONFIG / TOKEN */
+.config-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(12px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+}
+
+.config-modal.hidden {
+    display: none;
+}
+
+.modal-content {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    padding: 2.5rem;
+    max-width: 480px;
+    width: 90%;
+    box-shadow: var(--glow-cyan);
+}
+
+.modal-content h2 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin-bottom: 0.8rem;
+}
+
+.modal-content p {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.5;
+}
+
+.input-field {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--border);
+    padding: 0.8rem 1rem;
+    border-radius: 10px;
+    color: var(--text-main);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.85rem;
+    margin-bottom: 1.2rem;
+    outline: none;
+}
+
+.input-field:focus {
+    border-color: var(--accent-cyan);
+    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
+}
+
+.modal-btn {
+    width: 100%;
+    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
+    border: none;
+    color: #000;
+    font-weight: 800;
+    padding: 0.9rem;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: all 0.2s;
+}
+
+.modal-btn:hover {
+    filter: brightness(1.1);
+    box-shadow: var(--glow-cyan);
+}
+
+@media (max-width: 900px) {
+    .cockpit-grid {
+        grid-template-columns: 1fr;
+    }
+    .fleet-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+    .terminal-window {
+        height: 450px;
+    }
+}