class Documentation:

def __init__(self):
self.docs = {
"python": "Documentation Python officielle",
"javascript": "Documentation JavaScript MDN",
"api": "Documentation API du projet"
}

def provide_docs(self, topic=""):
if topic in self.docs:
return f"Documentation pour {topic}: {self.docs[topic]}"
return "Documentation générale disponible"

class CodeEditor:
def __init__(self, language="python"):
self.language = language
self.code = ""
self.documentation = Documentation()
self.terminal = Terminal()
self.debugger = Debugger()
self.build_system = BuildSystem(language)
self.version_control = VersionControl()
self.testing_framework = TestingFramework()
self.deployment = Deployment()

def write_code(self, code):
self.code = code
print(f"Code {self.language} écrit:\n{self.code}")
return self.code

def get_suggestions(self):
suggestions = {
"python": ["import ", "def ", "class ", "print(", "if __name__"],
"javascript": ["function ", "const ", "let ", "console.log("]
}
return suggestions.get(self.language, ["// Commencez à coder..."])

def build(self):
print(f"Construction du projet {self.language}...")
return self.build_system.build(self.code)

def debug(self):
print("Débogage en cours...")
return self.debugger.debug(self.code)

def test(self):
print("Exécution des tests...")
return self.testing_framework.run_tests()

def deploy(self, environment="production"):
print(f"Déploiement sur {environment}...")
return self.deployment.deploy(environment)

def commit(self, message="Mise à jour du code"):
print(f"Commit: {message}")
return self.version_control.commit(message)

def run_terminal_command(self, command):
return self.terminal.execute_command(command)

def show_docs(self, topic=""):
return self.documentation.provide_docs(topic)

class Terminal:
def __init__(self):
self.history = []

def execute_command(self, command):
print(f"Terminal: {command}")
self.history.append(command)

commands = {
"ls": "fichier1.py fichier2.js dossier1/",
"pwd": "/home/user/projet",
"python --version": "Python 3.11.0",
"node --version": "v18.12.0"
}

if command in commands:
return commands[command]
return f"Commande exécutée: {command}"

def get_history(self):
return self.history

class Debugger:
def __init__(self):
self.breakpoints = []

def debug(self, code):
issues = self.analyze_code(code)
print(f"{len(issues)} problèmes détectés")
return issues

def analyze_code(self, code):
issues = []

if "print(" in code and "python" in code.lower():
issues.append("Utilisation de print() pour le débogage - considérez un logger")

if "TODO" in code:
issues.append("TODO trouvé dans le code")

if len(code) > 1000:
issues.append("Code très long - considérez la modularisation")

return issues

def add_breakpoint(self, line):
self.breakpoints.append(line)
print(f"Point d'arrêt ajouté à la ligne {line}")

def step_through(self):
print("Exécution pas à pas...")

class BuildSystem:
def __init__(self, language):
self.language = language
self.dependencies = []

def build(self, code):
build_commands = {
"python": "python -m py_compile",
"javascript": "npm run build",
"java": "mvn compile"
}

command = build_commands.get(self.language, "build")
print(f"Exécution: {command}")

if self.language == "python" and "import " in code:
self.dependencies = self.extract_imports(code)
print(f"Dépendances détectées: {self.dependencies}")

return {"status": "succès", "language": self.language}

def extract_imports(self, code):
imports = []
lines = code.split('\n')
for line in lines:
if line.strip().startswith("import "):
imports.append(line.strip())
elif line.strip().startswith("from "):
imports.append(line.strip())
return imports

class VersionControl:
def __init__(self):
self.commits = []
self.branch = "main"

def commit(self, message):
from datetime import datetime
commit = {
"id": len(self.commits) + 1,
"message": message,
"timestamp": datetime.now().isoformat(),
"branch": self.branch
}
self.commits.append(commit)
print(f"Commit #{commit['id']} créé sur la branche {self.branch}")
return commit

def create_branch(self, name):
self.branch = name
print(f"Branche '{name}' créée")
return self.branch

def get_history(self):
return self.commits

class TestingFramework:
def __init__(self):
self.tests = []

def run_tests(self):
print("Exécution des tests automatisés...")

test_results = {
"total": 5,
"passed": 4,
"failed": 1,
"coverage": "85%"
}

print(f"Résultats: {test_results['passed']}/{test_results['total']} tests réussis")
print(f"Couverture de code: {test_results['coverage']}")

return test_results

def add_test(self, test_name, test_function):
self.tests.append({"name": test_name, "function": test_function})
print(f"Test ajouté: {test_name}")

class Deployment:
def __init__(self):
self.environments = ["development", "staging", "production"]

def deploy(self, environment="production"):
if environment not in self.environments:
print(f"Environnement {environment} non reconnu")
return False

print(f"Déploiement sur {environment}...")

deployment_steps = [
"Validation du build",
"Exécution des tests",
"Backup de la version actuelle",
"Déploiement des fichiers",
"Redémarrage des services",
"Vérification de la santé"
]

for step in deployment_steps:
print(f" ✓ {step}")

print("Déploiement terminé avec succès!")
return True

def rollback(self, version):
print(f"Retour à la version {version}...")
return True

# Exemple d'utilisation
if __name__ == "__main__":
print("=== Espace Codage - Environnement de développement intégré ===\n")

# Initialisation de l'éditeur
editeur = CodeEditor(language="python")

# Écriture de code
code_exemple = """
import math

def calculate_circle_area(radius):
\"\"\"Calcule l'aire d'un cercle\"\"\"
return math.pi * radius ** 2

# TODO: Ajouter une fonction pour le périmètre
print("Aire du cercle:", calculate_circle_area(5))
"""

editeur.write_code(code_exemple)

# Affichage des suggestions
print("\nSuggestions de code:")
for suggestion in editeur.get_suggestions():
print(f" - {suggestion}")

# Documentation
print(f"\n{editeur.show_docs('python')}")

# Construction
editeur.build()

# Débogage
issues = editeur.debug()
if issues:
print("\nProblèmes détectés:")
for issue in issues:
print(f" ⚠ {issue}")

# Terminal
print("\nTerminal:")
print(editeur.run_terminal_command("pwd"))
print(editeur.run_terminal_command("ls"))

# Tests
editeur.test()

# Version control
editeur.commit("Ajout fonction calcul aire cercle")
editeur.version_control.create_branch("feature/new-geometry")
editeur.commit("Ajout branche pour nouvelles fonctions géométriques")

# Déploiement
print("\n" + "="*50)
editeur.deploy("staging")

# Affichage historique
print("\nHistorique des commits:")
for commit in editeur.version_control.get_history():
print(f" #{commit['id']}: {commit['message']} ({commit['branch']})")

print("\n=== Espace Codage prêt à l'utilisation ===") from abc import ABC, abstractmethod
from datetime import datetime
import json

# Produit complexe : Un projet de développement complet
class ProjetCodage:
def __init__(self, nom="Nouveau Projet"):
self.nom = nom
self.date_creation = datetime.now()
self.fichiers = []
self.configurations = {}
self.dependances = []
self.environnements = {}
self.statistiques = {
"lignes_code": 0,
"tests": 0,
"complexite": "faible"
}

def ajouter_fichier(self, nom_fichier, contenu=""):
fichier = {
"nom": nom_fichier,
"contenu": contenu,
"date_modification": datetime.now(),
"langage": self._detecter_langage(nom_fichier)
}
self.fichiers.append(fichier)
print(f"✓ Fichier '{nom_fichier}' ajouté au projet")

def _detecter_langage(self, nom_fichier):
extensions = {
'.py': 'Python',
'.js': 'JavaScript',
'.java': 'Java',
'.html': 'HTML',
'.css': 'CSS',
'.md': 'Markdown'
}
for ext, lang in extensions.items():
if nom_fichier.endswith(ext):
return lang
return 'Autre'

def configurer(self, cle, valeur):
self.configurations[cle] = valeur
print(f"✓ Configuration '{cle}' = {valeur}")

def ajouter_dependance(self, dependance, version="latest"):
self.dependance

README.md

@@ -1,10 +1,13 @@
 ---
-title: Espace Codage Builder Pattern
-emoji: ⚡
-colorFrom: gray
-colorTo: purple
+title: Espace Codage - Builder Pattern
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,692 @@
-<!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">
+<head>
+  <meta charset="UTF-8" />
+  <title>Espace Codage – Modèle Constructeur (Builder Pattern)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <!-- Tailwind CSS CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: {
+              DEFAULT: '#4f46e5',   // indigo-600
+              fg: '#ffffff',
+              soft: 'rgba(79,70,229,0.2)',
+            },
+            secondary: {
+              DEFAULT: '#64748b',   // slate-500
+              fg: '#ffffff',
+              soft: 'rgba(100,116,139,0.2)',
+            },
+            accent: {
+              DEFAULT: '#22d3ee',   // cyan-400
+              soft: 'rgba(34,211,238,0.2)',
+            },
+            success: '#22c55e',
+            danger: '#ef4444',
+            warning: '#f59e0b',
+            surface: {
+              DEFAULT: '#0b1020',
+              soft: '#0f172a',
+            },
+            card: {
+              DEFAULT: '#0f172a',
+              soft: '#111827',
+            },
+            code: '#0b132b',
+            grid: 'rgba(255,255,255,0.06)',
+            border: 'rgba(255,255,255,0.12)',
+          },
+          boxShadow: {
+            soft: '0 18px 45px rgba(0,0,0,0.6)',
+          },
+          borderRadius: {
+            xl: '1rem',
+            '2xl': '1.25rem',
+          },
+          fontFamily: {
+            mono: ['JetBrains Mono','ui-monospace','SFMono-Regular','Menlo','Monaco','Consolas','Liberation Mono','Courier New','monospace'],
+            display: ['Inter','ui-sans-serif','system-ui','-apple-system','BlinkMacSystemFont','Segoe UI','Roboto','Helvetica Neue','Arial','Noto Sans','sans-serif','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'],
+          },
+        },
+      },
+      darkMode: 'class',
+    }
+  </script>
+
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+
+  <style>
+    :root { color-scheme: dark; }
+    body { background-color: #050714; }
+    /* subtle grid background */
+    .grid-bg {
+      background-image:
+        linear-gradient(to bottom, var(--tw-colors-grid) 1px, transparent 1px),
+        linear-gradient(to right, var(--tw-colors-grid) 1px, transparent 1px);
+      background-size: 40px 40px, 40px 40px;
+    }
+  </style>
+</head>
+<body class="bg-surface text-slate-100 font-display antialiased selection:bg-primary/30 selection:text-white">
+  <main class="max-w-7xl mx-auto px-5 py-8 md:px-8 md:py-10">
+    <!-- Header -->
+    <header class="relative overflow-hidden rounded-2xl border border-border bg-gradient-to-br from-card to-surface shadow-soft p-5 md:p-7" data-animate="1">
+      <div class="absolute inset-0 pointer-events-none opacity-30">
+        <div class="absolute -top-24 -left-20 w-72 h-72 rounded-full bg-primary/20 blur-3xl"></div>
+        <div class="absolute -bottom-24 -right-20 w-72 h-72 rounded-full bg-accent/20 blur-3xl"></div>
+      </div>
+      <div class="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent animate-spin-slow"></div>
+          <div>
+            <div class="text-xs uppercase tracking-[0.2em] text-slate-400">Espace Codage</div>
+            <h1 class="text-xl md:text-2xl font-bold tracking-wide">Modèle Constructeur · Builder Pattern</h1>
+          </div>
+        </div>
+        <p class="text-sm text-slate-400 max-w-2xl">
+          Visualisation de l'espace de codage et implémentation du pattern
+          <span class="text-white font-semibold">Builder</span> pour créer un
+          <span class="text-white font-semibold">ProjetEspaceCodage</span> étape par étape.
+        </p>
+      </div>
+    </header>
+
+    <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Diagramme Espace Codage -->
+      <section class="relative rounded-2xl border border-border bg-gradient-to-br from-card to-surface shadow-soft p-5" data-animate="2" aria-label="Schéma Espace Codage">
+        <div class="flex items-center justify-between mb-3">
+          <div>
+            <h2 class="text-sm uppercase tracking-[0.2em] text-accent">Espace Codage</h2>
+            <p class="text-xs text-slate-400">Vue conceptuelle des outils : éditeur, terminal, build, tests, déploiement…</p>
+          </div>
+          <span class="text-[10px] uppercase tracking-[0.25em] text-slate-500">SCHEMA</span>
+        </div>
+
+        <div class="relative grid-bg rounded-xl border border-border p-4 md:p-5 min-h-[420px]">
+          <!-- Overlay SVG pour les flèches -->
+          <svg class="absolute inset-0 w-full h-full pointer-events-none" id="arrowLayer" style="z-index: 0;"></svg>
+
+          <div class="relative grid grid-rows-[auto,1fr,auto] gap-4 h-full" id="schemaRoot" style="z-index: 1;">
+            <!-- Ligne du haut : Documentation -->
+            <div class="flex justify-center">
+              <button class="node-btn" data-id="documentation" data-name="Documentation" title="Documentation">
+                Documentation
+              </button>
+            </div>
+
+            <!-- Ligne centrale -->
+            <div class="grid grid-cols-3 gap-3 md:gap-4 items-center">
+              <!-- Version Control (gauche) -->
+              <div class="flex justify-center">
+                <button class="node-btn" data-id="version" data-name="Version Control" title="Version Control">
+                  Version Control
+                </button>
+              </div>
+
+              <!-- Colonne centrale -->
+              <div class="flex flex-col items-center gap-3">
+                <!-- Code Editor (centre principal) -->
+                <button class="node-btn node-main" data-id="editor" data-name="Code Editor" title="Code Editor">
+                  Code Editor
+                </button>
+
+                <!-- Terminal + Debugger -->
+                <div class="flex gap-3">
+                  <button class="node-btn" data-id="terminal" data-name="Terminal" title="Terminal">
+                    Terminal
+                  </button>
+                  <button class="node-btn" data-id="debugger" data-name="Debugger" title="Debugger">
+                    Debugger
+                  </button>
+                </div>
+
+                <!-- Testing Framework -->
+                <button class="node-btn" data-id="testing" data-name="Testing Framework" title="Testing Framework">
+                  Testing Framework
+                </button>
+              </div>
+
+              <!-- Build System (droite) -->
+              <div class="flex justify-center">
+                <button class="node-btn" data-id="build" data-name="Build System" title="Build System">
+                  Build System
+                </button>
+              </div>
+            </div>
+
+            <!-- Ligne du bas : Deployment -->
+            <div class="flex justify-center">
+              <button class="node-btn" data-id="deploy" data-name="Deployment" title="Deployment">
+                Deployment
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 text-xs text-slate-400">
+          Cliquez sur un nœud pour voir une info rapide. Utilisez les boutons de démonstration ci-dessous pour simuler la construction.
+        </div>
+      </section>
+
+      <!-- Code + Démonstration Builder -->
+      <section class="rounded-2xl border border-border bg-gradient-to-br from-card to-surface shadow-soft p-5" data-animate="3" aria-label="Code Builder Pattern">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-sm uppercase tracking-[0.2em] text-primary">Code · Builder Pattern</h2>
+            <p class="text-xs text-slate-400">
+              Implémentation en <strong class="text-white">Python</strong> du pattern
+              <strong class="text-white">Builder</strong> pour un <em>ProjetEspaceCodage</em> complexe.
+            </p>
+            <div class="mt-2 flex flex-wrap gap-2">
+              <span class="badge">Builder Pattern</span>
+              <span class="badge">Objet complexe</span>
+              <span class="badge">Python</span>
+              <span class="badge">Espace Codage</span>
+            </div>
+          </div>
+          <span class="text-[10px] uppercase tracking-[0.25em] text-slate-500">BUILDER</span>
+        </div>
+
+        <!-- Editeur simulé -->
+        <div class="mt-4 rounded-xl border border-border bg-code shadow-soft overflow-hidden">
+          <div class="flex items-center justify-between px-3 py-2 border-b border-border bg-slate-900/50">
+            <div class="flex items-center gap-1.5">
+              <span class="w-2.5 h-2.5 rounded-full bg-danger"></span>
+              <span class="w-2.5 h-2.5 rounded-full bg-warning"></span>
+              <span class="w-2.5 h-2.5 rounded-full bg-success"></span>
+            </div>
+            <div class="flex items-center gap-2 text-[10px] uppercase tracking-[0.18em] text-slate-400">
+              espace_codage_builder.py · Python
+            </div>
+            <div></div>
+          </div>
+          <pre class="font-mono text-[11px] leading-5 p-3 md:p-4 overflow-auto max-h-[420px]"><code><span class="text-slate-400"># === ESPACE CODAGE · MODÈLE CONSTRUCTEUR (BUILDER) ===</span>
+<span class="text-slate-400"># Situation :</span>
+<span class="text-slate-400"># - on veut créer un "objet complexe" ProjetEspaceCodage</span>
+<span class="text-slate-400">#   indépendamment de la manière dont chaque partie est construite.</span>
+<span class="text-slate-400"># - différents Builders produisent différentes représentations</span>
+<span class="text-slate-400">#   (projet minimal, projet full‑stack, etc.).</span>
+
+<span class="text-primary">from</span> abc <span class="text-primary">import</span> ABC, abstractmethod
+<span class="text-primary">from</span> typing <span class="text-primary">import</span> List, Dict
+
+
+<span class="text-accent">class</span> <span class="text-white">ProjetEspaceCodage</span>:
+    <span class="text-slate-400">"""Produit complexe : représente l'espace de codage complet."""</span>
+
+    <span class="text-primary">def</span> <span class="text-accent">__init__</span>(<span class="text-white">self</span>, <span class="text-white">nom</span>: <span class="text-secondary">str</span> = <span class="text-warning">"Nouveau Projet"</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.nom = nom
+        <span class="text-white">self</span>.composants: List[str] = []
+        <span class="text-white">self</span>.configurations: Dict[str, str] = {}
+        <span class="text-white">self</span>.etapes: List[str] = []
+
+    <span class="text-primary">def</span> <span class="text-accent">ajouter_composant</span>(<span class="text-white">self</span>, <span class="text-white">description</span>: <span class="text-secondary">str</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.composants.append(description)
+
+    <span class="text-primary">def</span> <span class="text-accent">ajouter_configuration</span>(<span class="text-white">self</span>, <span class="text-white">cle</span>: <span class="text-secondary">str</span>, <span class="text-white">valeur</span>: <span class="text-secondary">str</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.configurations[cle] = valeur
+
+    <span class="text-primary">def</span> <span class="text-accent">ajouter_etape</span>(<span class="text-white">self</span>, <span class="text-white">etape</span>: <span class="text-secondary">str</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.etapes.append(etape)
+
+    <span class="text-primary">def</span> <span class="text-accent">decrire</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-primary">print</span>(<span class="text-warning">f"</span><span class="text-warning">=== ESPACE CODAGE : {</span><span class="text-white">self</span>.nom<span class="text-warning">} ==="</span>)
+        <span class="text-primary">print</span>(<span class="text-warning">"Composants :"</span>)
+        <span class="text-primary">for</span> i, comp <span class="text-primary">in</span> <span class="text-primary">enumerate</span>(<span class="text-white">self</span>.composants, <span class="text-warning">1</span>):
+            <span class="text-primary">print</span>(<span class="text-warning">f"</span><span class="text-warning">  {i}. {comp}"</span>)
+
+        <span class="text-primary">if</span> <span class="text-white">self</span>.configurations:
+            <span class="text-primary">print</span>(<span class="text-warning">"</span><span class="text-warning">Configurations :"</span>)
+            <span class="text-primary">for</span> cle, val <span class="text-primary">in</span> <span class="text-white">self</span>.configurations.items():
+                <span class="text-primary">print</span>(<span class="text-warning">f"</span><span class="text-warning">  • {cle}: {val}"</span>)
+
+        <span class="text-primary">if</span> <span class="text-white">self</span>.etapes:
+            <span class="text-primary">print</span>(<span class="text-warning">"</span><span class="text-warning">Étapes de construction :"</span>)
+            <span class="text-primary">for</span> etape <span class="text-primary">in</span> <span class="text-white">self</span>.etapes:
+                <span class="text-primary">print</span>(<span class="text-warning">f"</span><span class="text-warning">  → {etape}"</span>)
+
+
+<span class="text-accent">class</span> <span class="text-white">ConstructeurEspaceCodage</span>(ABC):
+    <span class="text-slate-400">"""Interface d'assemblage & construction."""</span>
+
+    <span class="text-primary">def</span> <span class="text-accent">__init__</span>(<span class="text-white">self</span>, <span class="text-white">nom_projet</span>: <span class="text-secondary">str</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet = ProjetEspaceCodage(nom_projet)
+
+    @abstractmethod
+    <span class="text-primary">def</span> <span class="text-accent">configurer_documentation</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span>
+
+    @abstractmethod
+    <span class="text-primary">def</span> <span class="text-accent">configurer_editeur</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span>
+
+    @abstractmethod
+    <span class="text-primary">def</span> <span class="text-accent">configurer_terminal_debugger</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span>
+
+    @abstractmethod
+    <span class="text-primary">def</span> <span class="text-accent">configurer_build_system</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span>
+
+    @abstractmethod
+    <span class="text-primary">def</span> <span class="text-accent">configurer_tests</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span>
+
+    @abstractmethod
+    <span class="text-primary">def</span> <span class="text-accent">configurer_deploiement</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span>
+
+    <span class="text-primary">def</span> <span class="text-accent">obtenir_projet</span>(<span class="text-white">self</span>) -> ProjetEspaceCodage:
+        <span class="text-primary">return</span> <span class="text-white">self</span>.projet
+
+    <span class="text-primary">def</span> <span class="text-accent">operation_optionnelle</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span>
+
+
+<span class="text-accent">class</span> <span class="text-white">ConstructeurMinimal</span>(ConstructeurEspaceCodage):
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_documentation</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Documentation : README.md simple"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Documentation minimale configurée"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_editeur</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Code Editor : VS Code avec thème par défaut"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"editor.theme"</span>, <span class="text-warning">"default-dark"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Éditeur de code configuré"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_terminal_debugger</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Terminal intégré + debug minimal (print)"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Terminal et debugger basique configurés"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_build_system</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Build System : exécution directe du script"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Système de build minimal configuré"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_tests</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Tests : quelques tests manuels"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Tests manuels configurés"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_deploiement</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Déploiement : exécution locale seulement"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"deployment.target"</span>, <span class="text-warning">"local"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Déploiement local configuré"</span>)
+
+
+<span class="text-accent">class</span> <span class="text-white">ConstructeurFullStack</span>(ConstructeurEspaceCodage):
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_documentation</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Documentation : wiki, UML, API complète"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"docs.format"</span>, <span class="text-warning">"OpenAPI + Markdown"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Documentation complète configurée"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_editeur</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Code Editor : IDE complet + plugins"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"editor.plugins"</span>, <span class="text-warning">"lint, format, refactor, git, ..."</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Éditeur avancé configuré"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_terminal_debugger</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Terminal multi‑onglets + debugger graphique"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"debugger.features"</span>, <span class="text-warning">"breakpoints, watch, stack, step-by-step"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Terminal et debugger avancés configurés"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_build_system</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Build System : pipeline CI/CD automatisé"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"build.pipeline"</span>, <span class="text-warning">"tests → build → packaging → deployment"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Système de build avancé configuré"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_tests</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Testing Framework : unitaires, intégration, e2e"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"testing.coverage"</span>, <span class="text-warning">">= 90%"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Framework de tests complet configuré"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">configurer_deploiement</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Déploiement : CI/CD vers staging/production (cloud)"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"deployment.providers"</span>, <span class="text-warning">"AWS, Docker, Kubernetes"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Déploiement cloud configuré"</span>)
+
+    <span class="text-primary">def</span> <span class="text-accent">operation_optionnelle</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Analyse statique + métriques + revues automatisées"</span>)
+        <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"quality.metrics"</span>, <span class="text-warning">"complexité, dette technique, vulnérabilités"</span>)
+        <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Analyses avancées configurées (optionnel)"</span>)
+
+
+<span class="text-accent">class</span> <span class="text-white">DirecteurEspaceCodage</span>:
+    <span class="text-slate-400">"""Le Directeur orchestre les étapes de construction."""</span>
+
+    <span class="text-primary">def</span> <span class="text-accent">__init__</span>(<span class="text-white">self</span>, <span class="text-white">builder</span>: ConstructeurEspaceCodage) -> <span class="text-primary">None</span>:
+        <span class="text-white">self</span>._builder = builder
+
+    <span class="text-primary">def</span> <span class="text-accent">construire_espace_codage</span>(<span class="text-white">self</span>) -> ProjetEspaceCodage:
+        <span class="text-white">self</span>._builder.configurer_documentation()
+        <span class="text-white">self</span>._builder.configurer_editeur()
+        <span class="text-white">self</span>._builder.configurer_terminal_debugger()
+        <span class="text-white">self</span>._builder.configurer_build_system()
+        <span class="text-white">self</span>._builder.configurer_tests()
+        <span class="text-white">self</span>._builder.configurer_deploiement()
+        <span class="text-white">self</span>._builder.operation_optionnelle()
+        <span class="text-primary">return</span> <span class="text-white">self</span>._builder.obtenir_projet()
+
+
+<span class="text-primary">if</span> __name__ == <span class="text-warning">"__main__"</span>:
+    <span class="text-primary">print</span>(<span class="text-warning">"=== ESPACE CODAGE · PROJET MINIMAL ==="</span>)
+    directeur = DirecteurEspaceCodage(ConstructeurMinimal(<span class="text-warning">"Script Python Simple"</span>))
+    projet_min = directeur.construire_espace_codage()
+    projet_min.decrire()
+
+    <span class="text-primary">print</span>(<span class="text-warning">"</span><span class="text-warning">=== ESPACE CODAGE · PROJET FULL‑STACK ==="</span>)
+    directeur = DirecteurEspaceCodage(ConstructeurFullStack(<span class="text-warning">"Application Web Avancée"</span>))
+    projet_full = directeur.construire_espace_codage()
+    projet_full.decrire()
+</code></pre>
+        </div>
+
+        <!-- Démonstration Builder -->
+        <div class="mt-5 rounded-xl border border-border bg-slate-900/40 p-4">
+          <div class="flex items-center justify-between">
+            <h3 class="text-xs uppercase tracking-[0.2em] text-accent">Démonstration du Builder Pattern</h3>
+            <div class="text-[10px] uppercase tracking-[0.2em] text-slate-500">DEMO</div>
+          </div>
+          <div class="mt-3 flex flex-wrap gap-2">
+            <button class="btn-primary" id="btn-minimal">Construire Projet Minimal</button>
+            <button class="btn-secondary" id="btn-fullstack">Construire Projet Full‑Stack</button>
+            <button class="btn-ghost" id="btn-reset">Réinitialiser</button>
+          </div>
+          <div id="demoOutput" class="mt-4 rounded-lg border border-border bg-black/40 p-3 font-mono text-[12px] leading-5 max-h-56 overflow-auto text-accent">
+            <div>Prêt à construire un espace de codage…</div>
+          </div>
+        </div>
+
+        <div class="mt-4 text-xs text-slate-400">
+          <strong class="text-white">Note :</strong> Le <strong>modèle Constructeur</strong> se concentre sur un seul
+          <em>objet complexe</em> (ProjetEspaceCodage) construit étape par étape. Une
+          <strong>Abstract Factory</strong> fournirait plusieurs familles d’objets (éditeur, terminal, debugger, …)
+          sans orchestrer le processus de construction comme le fait le <code>DirecteurEspaceCodage</code>.
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <!-- Tooltip flottant -->
+  <div id="nodeTooltip" class="hidden absolute z-50 max-w-[240px] rounded-lg border border-primary/40 bg-slate-900/95 px-3 py-2 text-[11px] leading-5 shadow-xl backdrop-blur">
+    <div class="text-primary font-semibold" id="nodeTitle"></div>
+    <div class="text-slate-300" id="nodeDesc"></div>
+  </div>
+
+  <script>
+    // Animation helpers
+    const animateItems = document.querySelectorAll('[data-animate]');
+    animateItems.forEach(el => {
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(10px)';
+      setTimeout(() => {
+        el.style.transition = 'all .6s cubic-bezier(.2,.7,.2,1)';
+        el.style.opacity = '1';
+        el.style.transform = 'translateY(0)';
+      }, 120);
+    });
+
+    // Node definitions and info
+    const nodeInfo = {
+      documentation: {
+        title: 'Documentation',
+        desc: 'Système de documentation intégré avec recherche et exemples (wiki, API, UML).'
+      },
+      editor: {
+        title: 'Code Editor',
+        desc: 'Éditeur de code avec coloration syntaxique, auto-complétion, refactorisations.'
+      },
+      terminal: {
+        title: 'Terminal',
+        desc: 'Terminal intégré multi‑onglets avec support de plusieurs shells et historique.'
+      },
+      debugger: {
+        title: 'Debugger',
+        desc: 'Debugger graphique avec breakpoints, inspection, watch, step‑by‑step.'
+      },
+      version: {
+        title: 'Version Control',
+        desc: 'Contrôle de version (Git) avec interface graphique, branches et historial.'
+      },
+      testing: {
+        title: 'Testing Framework',
+        desc: 'Tests unitaires, d’intégration et end‑to‑end. Couverture de code et rapports.'
+      },
+      build: {
+        title: 'Build System',
+        desc: 'Pipeline de build et CI/CD : compilation, packaging et déploiement automatisés.'
+      },
+      deploy: {
+        title: 'Deployment',
+        desc: 'Déploiement vers staging/production (cloud), rollback et monitoring.'
+      },
+    };
+
+    // Connections for arrows (visual only)
+    const connections = [
+      { from: 'documentation', to: 'editor', label: 'docs' },
+      { from: 'editor', to: 'terminal', label: 'exec' },
+      { from: 'editor', to: 'debugger', label: 'debug' },
+      { from: 'editor', to: 'build', label: 'build' },
+      { from: 'version', to: 'editor', label: 'vcs' },
+      { from: 'terminal', to: 'testing', label: 'test' },
+      { from: 'debugger', to: 'testing', label: 'verify' },
+      { from: 'testing', to: 'deploy', label: 'deploy' },
+      { from: 'build', to: 'deploy', label: 'package' },
+      { from: 'deploy', to: 'version', label: 'release' },
+    ];
+
+    // Build arrows
+    function drawArrows() {
+      const svg = document.getElementById('arrowLayer');
+      if (!svg) return;
+      svg.innerHTML = '';
+
+      const root = document.getElementById('schemaRoot');
+      const rootRect = root.getBoundingClientRect();
+
+      function centerOf(id) {
+        const el = root.querySelector(`[data-id="${id}"]`);
+        if (!el) return { x: 0, y: 0 };
+        const r = el.getBoundingClientRect();
+        return {
+          x: r.left - rootRect.left + r.width / 2,
+          y: r.top - rootRect.top + r.height / 2
+        };
+      }
+
+      connections.forEach((c, idx) => {
+        const from = centerOf(c.from);
+        const to = centerOf(c.to);
+
+        // Curved path
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const dist = Math.hypot(dx, dy);
+        const curve = Math.min(80, Math.max(30, dist * 0.25));
+
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        const d = `M ${from.x} ${from.y}
+                   C ${from.x + curve} ${from.y}
+                     ${to.x - curve} ${to.y}
+                     ${to.x} ${to.y}`;
+        path.setAttribute('d', d);
+        path.setAttribute('fill', 'none');
+        path.setAttribute('stroke', 'rgba(148,163,184,0.55)');
+        path.setAttribute('stroke-width', '1.25');
+        path.setAttribute('marker-end', 'url(#arrowHead)');
+        svg.appendChild(path);
+      });
+
+      // Marker
+      let defs = svg.querySelector('defs');
+      if (!defs) {
+        defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        svg.appendChild(defs);
+      }
+      let marker = svg.querySelector('#arrowHead');
+      if (!marker) {
+        marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+        marker.setAttribute('id', 'arrowHead');
+        marker.setAttribute('viewBox', '0 0 10 10');
+        marker.setAttribute('refX', '8');
+        marker.setAttribute('refY', '5');
+        marker.setAttribute('markerWidth', '6');
+        marker.setAttribute('markerHeight', '6');
+        marker.setAttribute('orient', 'auto-start-reverse');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+        path.setAttribute('fill', 'rgba(148,163,184,0.9)');
+        marker.appendChild(path);
+        defs.appendChild(marker);
+      }
+    }
+
+    // Node interactions + tooltip
+    function setupNodes() {
+      const tooltip = document.getElementById('nodeTooltip');
+      const title = document.getElementById('nodeTitle');
+      const desc = document.getElementById('nodeDesc');
+
+      document.querySelectorAll('.node-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          const id = btn.dataset.id;
+          const info = nodeInfo[id];
+          if (!info) return;
+
+          // Visual pulse
+          btn.classList.add('ring-2', 'ring-primary/60');
+          setTimeout(() => btn.classList.remove('ring-2', 'ring-primary/60'), 600);
+
+          // Tooltip content
+          title.textContent = info.title;
+          desc.textContent = info.desc;
+          tooltip.classList.remove('hidden');
+
+          // Position near button
+          const r = btn.getBoundingClientRect();
+          tooltip.style.left = `${Math.min(window.innerWidth - 260, r.right + 10)}px`;
+          tooltip.style.top = `${r.top + window.scrollY}px`;
+
+          setTimeout(() => tooltip.classList.add('hidden'), 2800);
+        });
+      });
+
+      document.addEventListener('click', (e) => {
+        if (!e.target.closest('.node-btn')) {
+          tooltip.classList.add('hidden');
+        }
+      });
+    }
+
+    // Builder demo logic
+    function setupBuilderDemo() {
+      const output = document.getElementById('demoOutput');
+      const btnMinimal = document.getElementById('btn-minimal');
+      const btnFullstack = document.getElementById('btn-fullstack');
+      const btnReset = document.getElementById('btn-reset');
+
+      function clearOutput() {
+        output.innerHTML = '<div>Prêt à construire un espace de codage…</div>';
+      }
+      function addLine(text, kind = 'info') {
+        const line = document.createElement('div');
+        line.className = 'mb-1';
+        if (kind === 'ok') line.classList.add('text-success');
+        if (kind === 'warn') line.classList.add('text-warning');
+        line.textContent = text;
+        output.appendChild(line);
+        output.scrollTop = output.scrollHeight;
+      }
+      function highlightNode(id) {
+        const node = document.querySelector(`[data-id="${id}"]`);
+        if (!node) return;
+        node.classList.add('ring-2', 'ring-accent/70');
+        setTimeout(() => node.classList.remove('ring-2', 'ring-accent/70'), 900);
+      }
+
+      const minimalSteps = [
+        { id: 'documentation', msg: 'Configuration de la documentation simple (README).' },
+        { id: 'editor', msg: 'Configuration de l’éditeur VS Code (thème par défaut).' },
+        { id: 'terminal', msg: 'Configuration du terminal intégré et du debug minimal.' },
+        { id: 'build', msg: 'Configuration du système de build minimal (exécution directe).' },
+        { id: 'testing', msg: 'Configuration des tests manuels.' },
+        { id: 'deploy', msg: 'Configuration du déploiement local.' },
+      ];
+
+      const fullstackSteps = [
+        { id: 'documentation', msg: 'Configuration de la documentation complète (wiki, UML, API).' },
+        { id: 'editor', msg: 'Configuration de l’IDE avancé et des plugins.' },
+        { id: 'terminal', msg: 'Configuration du terminal multi‑onglets et debugger graphique.' },
+        { id: 'build', msg: 'Configuration du pipeline CI/CD automatisé.' },
+        { id: 'testing', msg: 'Configuration du framework de tests complet (unitaires, intégration, e2e).' },
+        { id: 'deploy', msg: 'Configuration du déploiement cloud (AWS, Docker, Kubernetes).' },
+      ];
+
+      function runDemo(type) {
+        clearOutput();
+        const steps = type === 'minimal' ? minimalSteps : fullstackSteps;
+
+        let delay = 0;
+        steps.forEach((s, i) => {
+          setTimeout(() => {
+            addLine(`→ ${s.msg}`);
+            highlightNode(s.id);
+          }, delay);
+          delay += 650;
+        });
+
+        // Completion
+        setTimeout(() => {
+          addLine('✅ Projet ' + (type === 'minimal' ? 'minimal' : 'full‑stack') + ' construit avec succès.', 'ok');
+        }, delay + 200);
+      }
+
+      btnMinimal.addEventListener('click', () => runDemo('minimal'));
+      btnFullstack.addEventListener('click', () => runDemo('fullstack'));
+      btnReset.addEventListener('click', () => clearOutput());
+    }
+
+    // Initial draw
+    window.addEventListener('load', () => {
+      drawArrows();
+      setupNodes();
+      setupBuilderDemo();
+    });
+    window.addEventListener('resize', () => {
+      // Throttle redraw
+      clearTimeout(window.__arrowTimer);
+      window.__arrowTimer = setTimeout(drawArrows, 120);
+    });
+  </script>
+
+  <!-- Tailwind utilities via @apply -->
+  <style type="text/tailwindcss">
+    @layer utilities {
+      .animate-spin-slow {
+        animation: spin 8s linear infinite;
+      }
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+      .node-btn {
+        @apply inline-flex items-center justify-center px-4 py-2 text-[11px] tracking-[0.18em] uppercase rounded-full border border-border bg-slate-900/60 hover:bg-slate-800/70 transition;
+      }
+      .node-main {
+        @apply border-primary/70 bg-gradient-to-br from-primary/15 to-accent/10 text-white;
+      }
+      .btn-primary {
+        @apply inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/60 bg-primary/15 hover:bg-primary/25 text-primary transition;
+      }
+      .btn-secondary {
+        @apply inline-flex items-center gap-2 px-4 py-2 rounded-full border border-secondary/60 bg-secondary/15 hover:bg-secondary/25 text-secondary transition;
+      }
+      .btn-ghost {
+        @apply inline-flex items-center gap-2 px-4 py-2 rounded-full border border-border bg-transparent hover:bg-slate-800/50 text-slate-300 transition;
+      }
+      .badge {
+        @apply text-[10px] uppercase tracking-[0.18em] rounded-full border border-border px-2 py-0.5 text-slate-300;
+      }
+    }
+  </style>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>