Spaces:

Abmacode12
/

espace-codage-theme

Running

App Files Files Community

Abmacode12 commited on Dec 17, 2025

Commit

bbce725

verified ·

1 Parent(s): 774c336

from pathlib import Path

Browse files

# Créer le dossier pour les fichiers du thème complet
theme_path = Path("/mnt/data/espace_codage_theme")
theme_path.mkdir(parents=True, exist_ok=True)

# 1. index.html
html_code = """<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Espace Codage</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
</head>
<body>
<div class="container">


<aside class="sidebar">
<div class="header">
<a href="#" class="logo">Espace Codage</a>
</div>
<nav class="menu">
<button>Nouvelle tâche</button>
<button>Rechercher</button>
<button>Bibliothèque</button>
</nav>
<div class="projects">
<h3>Projets</h3>
<ul id="projectList">

</ul>
</div>
</aside>


<main class="chat">
<div class="chat-header">
<h2>Espace Codage – Rosalinda</h2>
<div class="activity-monitor">[ Activité IA en cours... ]</div>
</div>
<div class="chat-messages" id="chatMessages">

</div>
<div class="chat-input">
<button title="Ajouter un fichier"><i class="fas fa-plus"></i></button>
<button title="Connexion"><i class="fas fa-plug"></i></button>
<input type="text" placeholder="Écrire à Rosalinda..." />
<button title="Micro"><i class="fas fa-microphone"></i></button>
<button title="Envoyer"><i class="fas fa-paper-plane"></i></button>
</div>
</main>


<section class="output">
<div class="output-tabs">
<button><i class="fas fa-code"></i> Code</button>
<button><i class="fas fa-chart-pie"></i> Tableau de bord</button>
<button><i class="fas fa-database"></i> Base de données</button>
<button><i class="fas fa-folder"></i> Stockage</button>
<button><i class="fas fa-cog"></i> Paramètres</button>
</div>
<div class="code-output" id="codeOutput">
<pre><code>// Code généré s'affichera ici...</code></pre>
</div>
<div class="result-output">
<p>Résultat final ici (image, vidéo ou page)...</p>
</div>
</section>

</div>
<script src="script.js"></script>
</body>
</html>
"""

# 2. styles.css
css_code = """
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body, html {
height: 100%;
width: 100%;
}
.container {
display: flex;
height: 100vh;
}
/* Colonne 1 */
.sidebar {
width: 20%;
background: #f1f1f1;
border-right: 1px solid #ccc;
padding: 20px;
display: flex;
flex-direction: column;
}
.sidebar .logo {
font-weight: bold;
font-size: 18px;
text-decoration: none;
color: #222;
margin-bottom: 20px;
display: block;
}
.menu button {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
background: #e0e0e0;
border: none;
cursor: pointer;
}
.projects h3 {
margin-top: 20px;
margin-bottom: 10px;
}
.projects ul {
list-style: none;
}
.projects li {
padding: 5px 0;
border-bottom: 1px solid #ccc;
}
/* Colonne 2 */
.chat {
width: 45%;
display: flex;
flex-direction: column;
padding: 20px;
}
.chat-header h2 {
font-size: 18px;
margin-bottom: 5px;
}
.activity-monitor {
font-size: 12px;
color: gray;
margin-bottom: 15px;
}
.chat-messages {
flex: 1;
background: #fafafa;
padding: 10px;
border: 1px solid #ddd;
overflow-y: auto;
}
.chat-input {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.chat-input input {
flex: 1;
padding: 10px;
}
.chat-input button {
background: #ddd;
border: none;
padding: 10px;
cursor: pointer;
}
/* Colonne 3 */
.output {
width: 35%;
background: #fcfcfc;
border-left: 1px solid #ccc;
display: flex;
flex-direction: column;
padding: 20px;
}
.output-tabs {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.output-tabs button {
flex: 1;
padding: 8px;
font-size: 12px;
background: #e8e8e8;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
}
.code-output {
flex: 1;
background: #000;
color: #0f0;
padding: 10px;
font-family: monospace;
overflow-y: auto;
margin-bottom: 10px;
}
.result-output {
background: #fff;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
"""

# 3. script.js
js_code = """console.log("Interface Espace Codage chargée.");

// Tu pourras ajouter ici les fonctions pour Rosalinda plus tard
"""

# Sauvegarder les fichiers
(theme_path / "index.html").write_text(html_code, encoding="utf-8")
(theme_path / "styles.css").write_text(css_code, encoding="utf-8")
(theme_path / "script.js").write_text(js_code, encoding="utf-8")

# Créer le ZIP pour téléchargement
import shutil
zip_file = "/mnt/data/espace_codage_theme.zip"
shutil.make_archive(str(theme_path), 'zip', str(theme_path))

zip_file
Résultat
'/mnt/data/espace_codage_theme.zip'
✅ Le thème complet Espace Codage que tu m’as décrit est prêt !

👉 Clique ici pour télécharger le projet complet

Le dossier contient :

index.html — structure HTML en 3 colonnes avec tous les éléments que tu as demandés

styles.css — design avec icônes et mise en page

script.js — fichier JavaScript prêt à être enrichi

Intégration de Font Awesome pour toutes les icônes personnalisées

Tu peux :

Extraire le .zip sur ton ordinateur

Ouvrir index.html dans ton navigateur pour voir le rendu

Modifier les fichiers à volonté

Si tu veux maintenant ajouter :

Des actions à Rosalinda (texte / image / vidéo)

Des appels API (OpenAI, Whisper, DALL·E, etc.)

L’enregistrement des projets dans une base de données

Files changed (4) hide show

README.md +7 -4
index.html +141 -19
script.js +183 -0
styles.css +282 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Espace Codage Theme
-emoji: 📚
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Espace Codage Theme
+colorFrom: blue
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,141 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr" class="h-full">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Espace Codage</title>
+  <!-- TailwindCSS (CDN) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: {
+              500: 'var(--primary-500, #6366F1)',
+            },
+            secondary: {
+              500: 'var(--secondary-500, #22C55E)',
+            },
+          },
+        },
+      },
+      darkMode: 'class',
+    }
+  </script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body class="h-full bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors">
+  <div class="container">
+    <!-- Colonne 1 : Navigation -->
+    <aside class="sidebar">
+      <div class="flex items-center justify-between mb-6">
+        <a href="#" class="logo">
+          <i class="fa-solid fa-code"></i>
+          <span>Espace Codage</span>
+        </a>
+        <button id="themeToggle" class="theme-toggle" title="Basculer le thème">
+          <i class="fa-solid fa-moon"></i>
+        </button>
+      </div>
+      <nav class="menu">
+        <button id="newTaskBtn" class="btn">
+          <i class="fa-solid fa-plus"></i>
+          Nouvelle tâche
+        </button>
+        <button id="searchBtn" class="btn">
+          <i class="fa-solid fa-magnifying-glass"></i>
+          Rechercher
+        </button>
+        <button id="libraryBtn" class="btn">
+          <i class="fa-solid fa-book"></i>
+          Bibliothèque
+        </button>
+      </nav>
+      <div class="projects">
+        <h3>Projets</h3>
+        <ul id="projectList" class="project-list">
+          <!-- Projets ajoutés ici -->
+        </ul>
+      </div>
+    </aside>
+    <!-- Colonne 2 : Chat IA Rosalinda -->
+    <main class="chat">
+      <div class="chat-header">
+        <h2>Espace Codage – Rosalinda</h2>
+        <div class="activity-monitor">
+          <span id="aiActivityDot" class="dot"></span>
+          <span id="aiActivityText">IA en veille</span>
+        </div>
+      </div>
+      <div class="chat-messages" id="chatMessages">
+        <div class="msg msg-ai">
+          <div class="avatar">
+            <i class="fa-solid fa-robot"></i>
+          </div>
+          <div class="bubble">
+            Bonjour ! Je suis Rosalinda, votre assistante IA. Comment puis-je vous aider aujourd’hui ?
+          </div>
+        </div>
+      </div>
+      <div class="chat-input">
+        <button id="attachBtn" title="Ajouter un fichier">
+          <i class="fas fa-plus"></i>
+        </button>
+        <button id="connectBtn" title="Connexion">
+          <i class="fas fa-plug"></i>
+        </button>
+        <input type="text" id="chatInput" placeholder="Écrire à Rosalinda..." />
+        <button id="micBtn" title="Micro">
+          <i class="fas fa-microphone"></i>
+        </button>
+        <button id="sendBtn" title="Envoyer">
+          <i class="fas fa-paper-plane"></i>
+        </button>
+      </div>
+    </main>
+    <!-- Colonne 3 : Résultat & Code -->
+    <section class="output">
+      <div class="output-tabs">
+        <button class="tab-btn active" data-tab="code">
+          <i class="fas fa-code"></i> Code
+        </button>
+        <button class="tab-btn" data-tab="dashboard">
+          <i class="fas fa-chart-pie"></i> Tableau de bord
+        </button>
+        <button class="tab-btn" data-tab="db">
+          <i class="fas fa-database"></i> Base de données
+        </button>
+        <button class="tab-btn" data-tab="storage">
+          <i class="fas fa-folder"></i> Stockage
+        </button>
+        <button class="tab-btn" data-tab="settings">
+          <i class="fas fa-cog"></i> Paramètres
+        </button>
+      </div>
+      <div class="code-output" id="codeOutput">
+        <pre><code>// Code généré s’affichera ici...
+</code></pre>
+      </div>
+      <div class="result-output">
+        <p>Résultat final ici (image, vidéo ou page)...</p>
+      </div>
+    </section>
+  </div>
+  <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,183 @@

+console.log("Interface Espace Codage chargée.");
+// ===== Thème (light/dark) =====
+const themeToggle = document.getElementById('themeToggle');
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+const storedTheme = localStorage.getItem('theme'); // 'dark' | 'light' | null
+const setTheme = (mode) => {
+  const html = document.documentElement;
+  if (mode === 'dark') {
+    html.classList.add('dark');
+    localStorage.setItem('theme', 'dark');
+    themeToggle.innerHTML = '<i class="fa-solid fa-sun"></i>';
+  } else {
+    html.classList.remove('dark');
+    localStorage.setItem('theme', 'light');
+    themeToggle.innerHTML = '<i class="fa-solid fa-moon"></i>';
+  }
+};
+setTheme(storedTheme ? storedTheme : (prefersDark.matches ? 'dark' : 'light'));
+themeToggle.addEventListener('click', () => {
+  const current = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+  setTheme(current === 'dark' ? 'light' : 'dark');
+});
+prefersDark.addEventListener('change', (e) => {
+  if (!localStorage.getItem('theme')) {
+    setTheme(e.matches ? 'dark' : 'light');
+  }
+});
+// ===== Éléments du DOM =====
+const projectList = document.getElementById('projectList');
+const chatMessages = document.getElementById('chatMessages');
+const chatInput = document.getElementById('chatInput');
+const sendBtn = document.getElementById('sendBtn');
+const micBtn = document.getElementById('micBtn');
+const connectBtn = document.getElementById('connectBtn');
+const attachBtn = document.getElementById('attachBtn');
+const codeOutput = document.getElementById('codeOutput').querySelector('code');
+const aiActivityText = document.getElementById('aiActivityText');
+const aiActivityDot = document.getElementById('aiActivityDot');
+const tabButtons = document.querySelectorAll('.tab-btn');
+// ===== Gestion des projets =====
+let projects = JSON.parse(localStorage.getItem('projects') || '[]');
+function saveProjects() {
+  localStorage.setItem('projects', JSON.stringify(projects));
+}
+function renderProjects() {
+  projectList.innerHTML = '';
+  if (projects.length === 0) {
+    const li = document.createElement('li');
+    li.className = 'text-slate-500';
+    li.textContent = 'Aucun projet. Cliquez sur "Nouvelle tâche" pour commencer.';
+    projectList.appendChild(li);
+    return;
+  }
+  projects.forEach((p, idx) => {
+    const li = document.createElement('li');
+    li.innerHTML = `
+      <span>${p}</span>
+      <span class="actions">
+        <button title="Renommer" data-action="rename" data-index="${idx}"><i class="fa-solid fa-pen"></i></button>
+        <button title="Supprimer" data-action="delete" data-index="${idx}"><i class="fa-solid fa-trash"></i></button>
+      </span>
+    `;
+    projectList.appendChild(li);
+  });
+}
+function addProject(name) {
+  if (!name) return;
+  projects.push(name);
+  saveProjects();
+  renderProjects();
+}
+function renameProject(index) {
+  const newName = prompt('Nouveau nom du projet:', projects[index]);
+  if (newName && newName.trim()) {
+    projects[index] = newName.trim();
+    saveProjects();
+    renderProjects();
+  }
+}
+function deleteProject(index) {
+  if (confirm('Supprimer ce projet ?')) {
+    projects.splice(index, 1);
+    saveProjects();
+    renderProjects();
+  }
+}
+projectList.addEventListener('click', (e) => {
+  const btn = e.target.closest('button[data-action]');
+  if (!btn) return;
+  const idx = Number(btn.dataset.index);
+  if (btn.dataset.action === 'rename') renameProject(idx);
+  if (btn.dataset.action === 'delete') deleteProject(idx);
+});
+document.getElementById('newTaskBtn').addEventListener('click', () => {
+  const name = prompt('Nom du nouveau projet:');
+  if (name) addProject(name.trim());
+});
+document.getElementById('searchBtn').addEventListener('click', () => {
+  alert('Fonction "Rechercher" à implémenter.');
+});
+document.getElementById('libraryBtn').addEventListener('click', () => {
+  alert('Fonction "Bibliothèque" à implémenter.');
+});
+renderProjects();
+// ===== Chat (Rosalinda) =====
+function setAIActivity(text, active = true) {
+  aiActivityText.textContent = text;
+  aiActivityDot.style.background = active ? 'rgb(34,197,94)' : 'rgb(100,116,139)'; // emerald vs slate
+}
+function addMessage(role, content) {
+  const msg = document.createElement('div');
+  msg.className = 'msg ' + (role === 'user' ? 'msg-user' : 'msg-ai');
+  if (role === 'user') {
+    msg.innerHTML = `
+      <div class="bubble">${escapeHTML(content)}</div>
+      <div class="avatar">
+        <i class="fa-solid fa-user"></i>
+      </div>
+    `;
+  } else {
+    msg.innerHTML = `
+      <div class="avatar">
+        <i class="fa-solid fa-robot"></i>
+      </div>
+      <div class="bubble">${content}</div>
+    `;
+  }
+  chatMessages.appendChild(msg);
+  chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+function escapeHTML(str) {
+  return str.replace(/[&<>"']/g, (m) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+  }[m]));
+}
+function sendMessage() {
+  const text = chatInput.value.trim();
+  if (!text) return;
+  addMessage('user', text);
+  chatInput.value = '';
+  // Simulation d'activité IA
+  setAIActivity('Rosalinda réfléchit...', true);
+  setTimeout(() => {
+    setAIActivity('IA en veille', false);
+    addMessage('ai', `J’ai bien reçu: "${text}". Comment souhaitez-vous continuer ?`);
+    codeOutput.textContent = `// Exemple de sortie pour: ${text}\nconsole.log("${text}");`;
+  }, 800);
+}
+sendBtn.addEventListener('click', sendMessage);
+chatInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') sendMessage();
+});
+micBtn.addEventListener('click', () => {
+  alert('Fonction "Micro" à implémenter (Web Speech API, Whisper, etc.).');
+});
+connectBtn.addEventListener('click', () => {
+  alert('Fonction "Connexion" à implémenter (OAuth, clés API, etc.).');
+});
+attachBtn.addEventListener('click', () => {
+  alert('Fonction "Ajouter un fichier" à implémenter (FileReader, uploads, etc.).');
+});
+// ===== Onglets =====
+tabButtons.forEach(btn => {
+  btn.addEventListener('click', () => {
+    tabButtons.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    const tab = btn.dataset.tab;
+    const demo = {
+      code: '// Code généré s’affichera ici...',
+      dashboard: 'Tableau de bord (graphiques, KPIs)...',
+      db: 'Visualisation base de données (tables, requêtes)...',
+      storage: 'Gestion du stockage (fichiers, objets)...',
+      settings: 'Paramètres (thème, clés API, intégrations)...'
+    };
+    codeOutput.textContent = demo[tab] || '// ...';
+  });
+});

styles.css ADDED Viewed

	@@ -0,0 +1,282 @@

+/* CSS Variables (avec valeurs de secours) */
+:root {
+  --primary-500: var(--primary-500, #6366F1); /* Indigo */
+  --secondary-500: var(--secondary-500, #22C55E); /* Green */
+}
+/* Mise en page globale */
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
+/* Container principal en 3 colonnes */
+.container {
+  display: flex;
+  height: 100vh;
+}
+/* Colonne 1 : Sidebar */
+.sidebar {
+  width: 20%;
+  min-width: 240px;
+  background: rgb(248 250 252); /* slate-50 */
+  border-right: 1px solid rgb(226 232 240); /* slate-200 */
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.dark .sidebar {
+  background: rgb(15 23 42); /* slate-900 */
+  border-right-color: rgb(30 41 59); /* slate-800 */
+}
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 18px;
+  color: rgb(15 23 42);
+  text-decoration: none;
+}
+.dark .logo { color: rgb(248 250 252); }
+.menu { display: flex; flex-direction: column; gap: 8px; }
+.btn {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  background: rgb(241 245 249); /* slate-100 */
+  color: rgb(15 23 42);
+  border: 1px solid rgb(226 232 240);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.btn:hover { background: rgb(226 232 240); } /* slate-200 */
+.dark .btn {
+  background: rgb(30 41 59); /* slate-800 */
+  color: rgb(226 232 240);
+  border-color: rgb(51 65 85); /* slate-700 */
+}
+.dark .btn:hover { background: rgb(51 65 85); }
+.projects h3 {
+  font-size: 14px;
+  color: rgb(100 116 139); /* slate-500 */
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.dark .projects h3 { color: rgb(148 163 184); }
+.project-list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; }
+.project-list li {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 10px; border: 1px solid rgb(226 232 240); border-radius: 8px;
+  background: white;
+}
+.dark .project-list li { background: rgb(30 41 59); border-color: rgb(51 65 85); }
+.project-list .actions { display: flex; gap: 6px; }
+.project-list button {
+  padding: 4px 6px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); border-radius: 6px; cursor: pointer;
+}
+.dark .project-list button { background: rgb(15 23 42); border-color: rgb(51 65 85); }
+/* Colonne 2 : Chat */
+.chat {
+  width: 45%;
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 12px;
+}
+.chat-header h2 { font-size: 18px; margin: 0; }
+.activity-monitor {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 12px; color: rgb(100 116 139);
+}
+.dark .activity-monitor { color: rgb(148 163 184); }
+.dot {
+  width: 8px; height: 8px; border-radius: 9999px;
+  background: rgb(34 197 94); /* emerald-500 */
+  display: inline-block;
+}
+.chat-messages {
+  flex: 1;
+  background: rgb(255 255 255);
+  border: 1px solid rgb(226 232 240);
+  border-radius: 12px;
+  padding: 12px;
+  overflow-y: auto;
+}
+.dark .chat-messages {
+  background: rgb(2 6 23); /* slate-950 */
+  border-color: rgb(30 41 59);
+}
+.msg {
+  display: flex; gap: 10px; margin-bottom: 12px;
+}
+.msg-ai .avatar {
+  width: 32px; height: 32px; border-radius: 9999px;
+  display: grid; place-items: center;
+  background: var(--primary-500);
+  color: white;
+}
+.msg-user { justify-content: flex-end; }
+.msg-user .bubble {
+  background: var(--secondary-500);
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+.msg-ai .bubble {
+  background: rgb(241 245 249); color: rgb(15 23 42);
+  border-bottom-left-radius: 4px;
+}
+.dark .msg-ai .bubble {
+  background: rgb(30 41 59); color: rgb(226 232 240);
+}
+.bubble {
+  max-width: 70%;
+  padding: 10px 12px;
+  border-radius: 12px;
+  box-shadow: 0 1px 0 rgba(0,0,0,.04);
+}
+.chat-input {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto;
+  gap: 8px;
+  align-items: center;
+}
+.chat-input input {
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgb(226 232 240);
+  background: white;
+  outline: none;
+}
+.dark .chat-input input {
+  background: rgb(2 6 23);
+  border-color: rgb(30 41 59);
+  color: rgb(226 232 240);
+}
+.chat-input button {
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgb(226 232 240);
+  background: rgb(248 250 252);
+  cursor: pointer;
+}
+.dark .chat-input button {
+  background: rgb(15 23 42);
+  border-color: rgb(30 41 59);
+}
+.chat-input button:hover { background: rgb(241 245 249); }
+.dark .chat-input button:hover { background: rgb(30 41 59); }
+/* Colonne 3 : Output */
+.output {
+  width: 35%;
+  min-width: 300px;
+  background: rgb(252 252 252);
+  border-left: 1px solid rgb(226 232 240);
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 12px;
+}
+.dark .output {
+  background: rgb(12 16 24);
+  border-left-color: rgb(30 41 59);
+}
+.output-tabs {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+}
+.output-tabs .tab-btn {
+  padding: 8px;
+  font-size: 12px;
+  background: rgb(232 232 232);
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+.output-tabs .tab-btn.active {
+  background: var(--primary-500);
+  color: white;
+}
+.code-output {
+  flex: 1;
+  background: #000;
+  color: #0f0;
+  padding: 12px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  overflow-y: auto;
+  border-radius: 10px;
+  border: 1px solid rgb(30 41 59);
+}
+.code-output code { white-space: pre; display: block; }
+.result-output {
+  background: #fff;
+  border: 1px solid rgb(226 232 240);
+  padding: 12px;
+  text-align: center;
+  border-radius: 10px;
+}
+.dark .result-output {
+  background: rgb(2 6 23);
+  border-color: rgb(30 41 59);
+}
+/* Thème (mode undefined = fallback par défaut déjà appliqué) */
+.theme-toggle {
+  border: 1px solid rgb(226 232 240);
+  background: rgb(248 250 252);
+  color: rgb(15 23 42);
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.dark .theme-toggle {
+  background: rgb(15 23 42);
+  border-color: rgb(30 41 59);
+  color: rgb(226 232 240);
+}
+/* Scrollbar (Webkit) */
+.chat-messages::-webkit-scrollbar,
+.code-output::-webkit-scrollbar {
+  width: 10px;
+}
+.chat-messages::-webkit-scrollbar-thumb,
+.code-output::-webkit-scrollbar-thumb {
+  background: rgb(226 232 240);
+  border-radius: 8px;
+}
+.dark .chat-messages::-webkit-scrollbar-thumb,
+.dark .code-output::-webkit-scrollbar-thumb {
+  background: rgb(51 65 85);
+}
+/* Responsive */
+@media (max-width: 1100px) {
+  .container { flex-direction: column; }
+  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgb(226 232 240); }
+  .chat { width: 100%; }
+  .output { width: 100%; }
+}