<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Espace Codage — 3 Colonnes</title>

<style>
:root{
--bg:#0b0f1a;
--panel:#0f172a;
--panel2:#0b1222;
--border:#1f2a44;
--text:#e7eefc;
--muted:#98a6c7;
--accent:#23f3c7;
--accent2:#ff2d7a;
}

*{ box-sizing:border-box; margin:0; padding:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ background:var(--bg); color:var(--text); height:100vh; }

.app{
height:100vh;
display:grid;
grid-template-columns: 280px 1fr 360px; /* ✅ 3 colonnes */
}

/* ===== COLONNE 1 (inchangée) ===== */
.sidebar{
background: linear-gradient(180deg, #0e1424, #0a1020);
border-right:1px solid var(--border);
padding:18px;
display:flex;
flex-direction:column;
gap:14px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
width:40px; height:40px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
background:#121b33; border:1px solid var(--border);
}
.brandName{ font-weight:800; font-size:20px; color:#7cf5dc; }
.brandSub{ font-size:12px; color:var(--muted); }

.btnPrimary{
width:100%;
padding:12px;
border:none;
border-radius:10px;
background: linear-gradient(90deg, var(--accent2), #ff6aa3);
color:white;
font-weight:700;
cursor:pointer;
}

.nav{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.navBtn{
width:100%;
padding:12px;
background:#121b33;
border:1px solid var(--border);
border-radius:10px;
color:var(--text);
text-align:left;
cursor:pointer;
}

.sectionTitle{
margin-top:10px;
font-size:12px;
letter-spacing:1px;
color:#7cf5dc;
font-weight:800;
}

.projects{ display:flex; flex-direction:column; gap:10px; }
.projectItem{
width:100%;
padding:12px;
background:#0f1a33;
border:1px solid var(--border);
border-radius:12px;
color:var(--text);
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
}
.projectItem.active{ outline:2px solid rgba(35,243,199,0.25); }

.pill{
font-size:11px;
padding:4px 8px;
border-radius:999px;
border:1px solid var(--border);
}
.pill.green{ background:rgba(40,199,111,.15); }
.pill.orange{ background:rgba(255,159,67,.15); }
.pill.blue{ background:rgba(54,162,235,.15); }
.pill.purple{ background:rgba(153,102,255,.15); }

.sidebarFooter{ margin-top:auto; color:var(--muted); font-size:12px; }

/* ===== COLONNE 2 ===== */
.main{
padding:22px;
display:flex;
flex-direction:column;
gap:16px;
min-width:0;
}

.smallHeader h1{ font-size:22px; font-weight:900; }
.smallHeader p{ color:var(--muted); margin-top:4px; font-size:12px; }

.codePanel{
background:rgba(5, 9, 20, .85);
border:1px solid var(--border);
border-radius:16px;
padding:16px;
min-height:260px;
}

.codeTop{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.codeTop h2{ font-size:16px; color:#7cf5dc; }

.codeActions{ display:flex; gap:10px; }
.smallBtn{
padding:10px 12px;
background:#121b33;
border:1px solid var(--border);
color:var(--text);
border-radius:10px;
cursor:pointer;
}
.smallBtn.danger{ background:rgba(255,45,122,.15); }

pre.codeOutput{
white-space:pre-wrap;
line-height:1.5;
color:#d9e6ff;
font-size:13px;
}

.examples{
background:rgba(15,23,42,.35);
border:1px solid var(--border);
border-radius:16px;
padding:14px;
}
.examplesTitle{ color:#7cf5dc; font-weight:800; margin-bottom:10px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
padding:10px 12px;
border-radius:999px;
background:#0f1a33;
border:1px solid var(--border);
color:var(--text);
cursor:pointer;
}

/* ✅ barre en bas */
.promptDock{
margin-top:auto;
background:rgba(15,23,42,.35);
border:1px solid var(--border);
border-radius:16px;
padding:14px;
}

/* ✅ Générer + Micro à GAUCHE du champ */
.promptBar{
display:flex;
gap:10px;
align-items:center;
}

.generateBtn{
padding:14px 16px;
border-radius:12px;
border:none;
background: linear-gradient(90deg, var(--accent2), #ff6aa3);
color:white;
font-weight:900;
cursor:pointer;
white-space:nowrap;
}

.micBtn{
padding:14px 16px;
border-radius:12px;
border:1px solid var(--border);
background:#121b33;
color:var(--text);
cursor:pointer;
white-space:nowrap;
}

#promptInput{
flex:1;
padding:14px;
border-radius:12px;
border:1px solid var(--border);
background:#0b1222;
color:var(--text);
outline:none;
min-width:0;
}

/* ===== COLONNE 3 : VIDE 100% ===== */
.right{
border-left:1px solid var(--border);
background: transparent;
}

/* toast discret */
.toast{
position:fixed;
bottom:18px;
left:50%;
transform:translateX(-50%);
background:rgba(15,23,42,.92);
border:1px solid rgba(124,245,220,.25);
color:#e7eefc;
padding:10px 14px;
border-radius:12px;
font-size:13px;
z-index:9999;
}
</style>
</head>

<body>
<div class="app">

<!-- COL 1 -->
<aside class="sidebar" id="colLeft">
<div class="brand">
<div class="logo">🚀</div>
<div class="brandText">
<div class="brandName">DeepSeed</div>
<div class="brandSub">Interface</div>
</div>
</div>

<button class="btnPrimary">+ Nouvelle tâche</button>

<div class="nav">
<button class="navBtn">🔍 Rechercher</button>
<button class="navBtn">📚 Bibliothèque</button>
</div>

<div class="sectionTitle">PROJETS</div>

<div class="projects">
<button class="projectItem">
<span>API Utilisateurs</span>
<span class="pill green">TERMINÉ</span>
</button>

<button class="projectItem active">
<span>Composant React</span>
<span class="pill orange">EN COURS</span>
</button>

<button class="projectItem">
<span>Base de données</span>
<span class="pill blue">BROUILLON</span>
</button>

<button class="projectItem">
<span>API REST</span>
<span class="pill purple">NOUVEAU</span>
</button>
</div>

<div class="sidebarFooter">
<div class="hint">✅ Colonne 1 fixe</div>
</div>
</aside>

<!-- COL 2 -->
<main class="main" id="colCenter">

<header class="smallHeader" id="mainHeader">
<h1 id="appTitle">Espace Codage</h1>
<p id="appSubtitle">Génération de code IA (mode simple)</p>
</header>

<section class="codePanel">
<div class="codeTop">
<h2>Code généré</h2>
<div class="codeActions">
<button id="copyBtn" class="smallBtn">📄 Copier</button>
<button id="clearBtn" class="smallBtn danger">🗑️ Effacer</button>
</div>
</div>

<pre id="codeOutput" class="codeOutput">// Le code généré apparaîtra ici…</pre>
</section>

<section class="examples">
<div class="examplesTitle">Exemples de demandes :</div>
<div class="chips">
<button class="chip" data-prompt="Crée une fonction Python qui calcule une factorielle.">Factorielle Python</button>
<button class="chip" data-prompt="Génère un composant React Card avec titre et bouton.">Composant React</button>
<button class="chip" data-prompt="Crée une classe Java simple pour gérer une pile (stack).">Classe Java</button>
<button class="chip" data-prompt="Écris du CSS pour une carte moderne (ombre, radius, hover).">CSS Carte</button>
</div>
</section>

<!-- ✅ BARRE EN BAS : actions à gauche -->
<section class="promptDock">
<div class="promptBar">
<button id="generateBtn" class="generateBtn">Générer ✨</button>
<button id="micBtn" class="micBtn" title="Parler">🎤</button>
<input id="promptInput" type="text" placeholder="Écrivez ici… (ex: bonjour)" />
</div>
</section>
</main>

<!-- COL 3 : vide -->
<aside class="right" id="colRight"></aside>
</div>

<div id="toast" class="toast" hidden></div>

<script>
// ===== util =====
const toastEl = document.getElementById("toast");
function toast(msg){
toastEl.hidden = false;
toastEl.textContent = msg;
clearTimeout(toast._t);
toast._t = setTimeout(()=>toastEl.hidden=true, 1400);
}

// ===== éléments =====
const promptInput = document.getElementById("promptInput");
const generateBtn = document.getElementById("generateBtn");
const micBtn = document.getElementById("micBtn");
const codeOutput = document.getElementById("codeOutput");
const copyBtn = document.getElementById("copyBtn");
const clearBtn = document.getElementById("clearBtn");

const colRight = document.getElementById("colRight");
const appTitle = document.getElementById("appTitle");
const appSubtitle = document.getElementById("appSubtitle");

// ===== générateur de code (temporaire) =====
function fakeGenerate(prompt){
const p = (prompt || "").trim();
if(!p) return "// Écris une demande puis clique sur Générer ✨";
return `// ✅ Demande reçue : ${p}

function main() {
console.log("Hello Espace Codage!");
}

main();`;
}

// ===== moteur de consignes UI (simple et efficace) =