Spaces:

MAALOUFimad02
/

Machine_Learning_Training

Running

App Files Files Community

maalouf imad commited on Apr 2

Commit

47f1575

verified ·

1 Parent(s): a266016

V1

Browse files

Files changed (13) hide show

cours-pdf.html +915 -0
cours.html +1421 -0
cours.pdf +0 -0
css/shared.css +944 -0
feedback.html +1149 -0
index.html +1009 -18
js/feedback-storage.js +236 -0
js/shared.js +394 -0
notebooks/TP1_Titanic_Survival.ipynb +508 -0
notebooks/TP2_House_Prices.ipynb +436 -0
notebooks/TP3_Iris_Classification.ipynb +182 -0
notebooks/TP4_LSTM_TimeSeries.ipynb +371 -0
tp.html +1389 -0

cours-pdf.html ADDED Viewed

	@@ -0,0 +1,915 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Cours de Machine Learning - ML Academy</title>
+  <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <script>
+    window.MathJax = {
+      tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] },
+      options: { skipHtmlTags: ['script','noscript','style','textarea','pre'] }
+    };
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <style>
+    /* Reset */
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, sans-serif; }
+    /* Page setup */
+    @page {
+      size: A4;
+      margin: 2.5cm 2cm;
+      @bottom-center {
+        content: "Imad Maalouf — ML Academy";
+        font-size: 9pt;
+        color: #666;
+      }
+      @bottom-right {
+        content: counter(page);
+        font-size: 9pt;
+        color: #666;
+      }
+    }
+    @page :first {
+      margin: 0;
+      @bottom-center { content: none; }
+      @bottom-right { content: none; }
+    }
+    /* Cover page */
+    .cover {
+      width: 210mm;
+      height: 297mm;
+      margin: 0;
+      position: relative;
+      overflow: hidden;
+      page-break-after: always;
+      background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #252542 100%);
+    }
+    .cover-decoration {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+    .cover-circle {
+      position: absolute;
+      border-radius: 50%;
+      opacity: 0.1;
+    }
+    .cover-circle-1 {
+      width: 400px;
+      height: 400px;
+      background: #6366f1;
+      top: -100px;
+      right: -100px;
+    }
+    .cover-circle-2 {
+      width: 300px;
+      height: 300px;
+      background: #06b6d4;
+      bottom: 10%;
+      left: -80px;
+    }
+    .cover-circle-3 {
+      width: 200px;
+      height: 200px;
+      background: #f59e0b;
+      top: 40%;
+      right: 15%;
+    }
+    .cover-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      width: 80%;
+      z-index: 1;
+    }
+    .cover-badge {
+      display: inline-block;
+      padding: 8px 16px;
+      background: rgba(99, 102, 241, 0.2);
+      border: 1px solid rgba(99, 102, 241, 0.4);
+      border-radius: 20px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10pt;
+      color: #818cf8;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      margin-bottom: 30px;
+    }
+    .cover-title {
+      font-size: 36pt;
+      font-weight: 700;
+      color: #f8fafc;
+      margin-bottom: 15px;
+      line-height: 1.2;
+    }
+    .cover-subtitle {
+      font-size: 14pt;
+      color: #94a3b8;
+      margin-bottom: 60px;
+    }
+    .cover-author {
+      font-size: 12pt;
+      color: #818cf8;
+      margin-bottom: 10px;
+    }
+    .cover-info {
+      font-size: 10pt;
+      color: #64748b;
+    }
+    /* Content styles */
+    .content {
+      padding: 0;
+    }
+    h1 {
+      font-size: 20pt;
+      font-weight: 700;
+      color: #1a1a2e;
+      margin: 30pt 0 15pt 0;
+      padding-bottom: 8pt;
+      border-bottom: 2px solid #6366f1;
+      page-break-after: avoid;
+    }
+    h2 {
+      font-size: 14pt;
+      font-weight: 600;
+      color: #1a1a2e;
+      margin: 20pt 0 10pt 0;
+      page-break-after: avoid;
+    }
+    h3 {
+      font-size: 12pt;
+      font-weight: 600;
+      color: #333;
+      margin: 15pt 0 8pt 0;
+      page-break-after: avoid;
+    }
+    p {
+      font-size: 11pt;
+      line-height: 1.7;
+      color: #333;
+      margin-bottom: 10pt;
+      text-align: justify;
+      text-align-last: left;
+    }
+    strong {
+      font-weight: 600;
+      color: #1a1a2e;
+    }
+    em {
+      font-style: italic;
+      color: #444;
+    }
+    /* Info box */
+    .info-box {
+      background: #f8f9fa;
+      border-left: 4px solid #6366f1;
+      padding: 12pt 15pt;
+      margin: 15pt 0;
+      page-break-inside: avoid;
+    }
+    .info-box-title {
+      font-weight: 600;
+      color: #6366f1;
+      margin-bottom: 5pt;
+      font-size: 10pt;
+    }
+    .info-box p {
+      margin: 0;
+      font-size: 10pt;
+    }
+    /* Equation block */
+    .equation-block {
+      background: #f8f9fa;
+      border: 1px solid #e2e8f0;
+      border-left: 3px solid #6366f1;
+      border-radius: 4px;
+      padding: 15pt;
+      margin: 15pt 0;
+      text-align: center;
+      page-break-inside: avoid;
+    }
+    .equation-label {
+      display: block;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 8pt;
+      color: #64748b;
+      text-align: right;
+      margin-top: 8pt;
+    }
+    /* Cards grid */
+    .cards-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12pt;
+      margin: 15pt 0;
+    }
+    .card {
+      background: #f8f9fa;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      padding: 12pt;
+      page-break-inside: avoid;
+    }
+    .card-icon {
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(135deg, #6366f1, #06b6d4);
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12pt;
+      font-weight: 700;
+      color: white;
+      margin-bottom: 8pt;
+    }
+    .card-title {
+      font-size: 10pt;
+      font-weight: 600;
+      color: #1a1a2e;
+      margin-bottom: 5pt;
+    }
+    .card-text {
+      font-size: 9pt;
+      color: #555;
+      line-height: 1.5;
+    }
+    /* Pipeline */
+    .pipeline {
+      display: flex;
+      gap: 8pt;
+      margin: 15pt 0;
+      padding: 12pt;
+      background: #f8f9fa;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+    }
+    .pipeline-step {
+      flex: 1;
+      text-align: center;
+      position: relative;
+    }
+    .pipeline-step:not(:last-child)::after {
+      content: '->';
+      position: absolute;
+      right: -10pt;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #6366f1;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10pt;
+    }
+    .pipeline-num {
+      width: 24pt;
+      height: 24pt;
+      background: linear-gradient(135deg, #6366f1, #06b6d4);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 9pt;
+      font-weight: 700;
+      color: white;
+      margin: 0 auto 5pt;
+    }
+    .pipeline-label {
+      font-size: 8pt;
+      font-weight: 600;
+      color: #1a1a2e;
+    }
+    .pipeline-desc {
+      font-size: 7pt;
+      color: #64748b;
+    }
+    /* Comparison */
+    .comparison-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12pt;
+      margin: 15pt 0;
+    }
+    .comparison-box {
+      background: #f8f9fa;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      padding: 12pt;
+      page-break-inside: avoid;
+    }
+    .comparison-box h4 {
+      font-size: 10pt;
+      font-weight: 600;
+      color: #1a1a2e;
+      margin-bottom: 8pt;
+      padding-bottom: 5pt;
+      border-bottom: 1px solid #e2e8f0;
+    }
+    .comparison-box ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .comparison-box li {
+      padding: 3pt 0;
+      font-size: 9pt;
+      color: #444;
+    }
+    .comparison-box li::before {
+      content: '>';
+      color: #6366f1;
+      margin-right: 6pt;
+      font-family: 'JetBrains Mono', monospace;
+    }
+    /* Metric cards */
+    .metric-row {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12pt;
+      margin: 15pt 0;
+    }
+    .metric-card {
+      background: #f8f9fa;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      padding: 12pt;
+      text-align: center;
+      page-break-inside: avoid;
+    }
+    .metric-name {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 7pt;
+      color: #64748b;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 5pt;
+    }
+    .metric-formula {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 9pt;
+      color: #6366f1;
+      font-weight: 600;
+      margin-bottom: 3pt;
+    }
+    .metric-desc {
+      font-size: 7pt;
+      color: #64748b;
+    }
+    /* Table */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 15pt 0;
+      font-size: 9pt;
+      page-break-inside: avoid;
+    }
+    thead {
+      display: table-header-group;
+    }
+    th {
+      background: #f1f5f9;
+      color: #475569;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 8pt;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      padding: 8pt 10pt;
+      text-align: left;
+      border-top: 2px solid #333;
+      border-bottom: 1px solid #333;
+    }
+    td {
+      padding: 8pt 10pt;
+      border-bottom: 1px solid #e2e8f0;
+      color: #333;
+    }
+    tbody tr:last-child td {
+      border-bottom: 2px solid #333;
+    }
+    /* Page break utilities */
+    .page-break {
+      page-break-after: always;
+    }
+    /* Prevent overflow */
+    pre, table, figure, img, svg, blockquote {
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+    a { word-break: break-all; }
+    /* Author footer on each page */
+    .author-footer {
+      margin-top: 30pt;
+      padding-top: 15pt;
+      border-top: 1px solid #e2e8f0;
+      text-align: center;
+    }
+    .author-name {
+      font-size: 10pt;
+      font-weight: 600;
+      color: #6366f1;
+    }
+    .author-contact {
+      font-size: 8pt;
+      color: #64748b;
+      margin-top: 3pt;
+    }
+  </style>
+</head>
+<body>
+  <!-- Cover Page -->
+  <div class="cover">
+    <div class="cover-decoration">
+      <div class="cover-circle cover-circle-1"></div>
+      <div class="cover-circle cover-circle-2"></div>
+      <div class="cover-circle cover-circle-3"></div>
+    </div>
+    <div class="cover-content">
+      <div class="cover-badge">Formation 2025/2026</div>
+      <h1 class="cover-title">Cours de<br>Machine Learning</h1>
+      <p class="cover-subtitle">De la theorie a la pratique — Algorithmes fondamentaux et techniques avancees</p>
+      <p class="cover-author">Formateur : Imad Maalouf</p>
+      <p class="cover-info">ML Academy — GE-MCI 4A</p>
+    </div>
+  </div>
+  <!-- Content -->
+  <div class="content">
+    <h1>1. Introduction au Machine Learning</h1>
+    <p>
+      Le <strong>Machine Learning (ML)</strong> est une branche de l'intelligence artificielle
+      qui permet aux machines d'apprendre a partir de donnees <em>sans etre explicitement programmees</em>
+      pour chaque tache. Au lieu de coder des regles a la main, on montre des exemples au modele
+      et il decouvre lui-meme les patterns.
+    </p>
+    <div class="info-box">
+      <div class="info-box-title">Idee fondamentale</div>
+      <p>
+        On cherche a approximer une fonction inconnue $f$ telle que $\hat{y} = f(x_1, x_2, \ldots, x_n)$.
+        Le modele ML apprend cette fonction a partir d'exemples $(x, y)$ connus.
+      </p>
+    </div>
+    <h2>1.1 Types d'apprentissage</h2>
+    <div class="cards-grid">
+      <div class="card">
+        <div class="card-icon">S</div>
+        <div class="card-title">Supervise</div>
+        <div class="card-text">Donnees labellisees $(x, y)$ : regression et classification.</div>
+      </div>
+      <div class="card">
+        <div class="card-icon">N</div>
+        <div class="card-title">Non supervise</div>
+        <div class="card-text">Pas de labels : clustering, reduction de dimension.</div>
+      </div>
+      <div class="card">
+        <div class="card-icon">R</div>
+        <div class="card-title">Par renforcement</div>
+        <div class="card-text">Agent apprend via actions-recompenses.</div>
+      </div>
+    </div>
+    <h2>1.2 Pipeline ML typique</h2>
+    <div class="pipeline">
+      <div class="pipeline-step">
+        <div class="pipeline-num">1</div>
+        <div class="pipeline-label">Donnees</div>
+        <div class="pipeline-desc">Collecte & nettoyage</div>
+      </div>
+      <div class="pipeline-step">
+        <div class="pipeline-num">2</div>
+        <div class="pipeline-label">Features</div>
+        <div class="pipeline-desc">Engineering</div>
+      </div>
+      <div class="pipeline-step">
+        <div class="pipeline-num">3</div>
+        <div class="pipeline-label">Split</div>
+        <div class="pipeline-desc">Train / Test</div>
+      </div>
+      <div class="pipeline-step">
+        <div class="pipeline-num">4</div>
+        <div class="pipeline-label">Modele</div>
+        <div class="pipeline-desc">Entrainement</div>
+      </div>
+      <div class="pipeline-step">
+        <div class="pipeline-num">5</div>
+        <div class="pipeline-label">Evaluation</div>
+        <div class="pipeline-desc">Metriques</div>
+      </div>
+      <div class="pipeline-step">
+        <div class="pipeline-num">6</div>
+        <div class="pipeline-label">Production</div>
+        <div class="pipeline-desc">Deploiement</div>
+      </div>
+    </div>
+    <div class="page-break"></div>
+    <h1>2. Regression Lineaire</h1>
+    <p>
+      La <strong>regression lineaire</strong> modelise la relation entre les features et la cible
+      par une fonction affine. C'est l'algorithme le plus simple mais souvent tres efficace
+      comme baseline.
+    </p>
+    <div class="equation-block">
+      $$\hat{y} = w_0 + w_1 x_1 + w_2 x_2 + \cdots + w_n x_n = \mathbf{w}^T \mathbf{x}$$
+      <span class="equation-label">Modele lineaire avec coefficients $\mathbf{w}$</span>
+    </div>
+    <p>
+      L'objectif est de minimiser l'erreur quadratique moyenne (MSE) :
+    </p>
+    <div class="equation-block">
+      $$\text{MSE} = \frac{1}{m} \sum_{i=1}^{m} (y_i - \hat{y}_i)^2$$
+      <span class="equation-label">Fonction de cout : moyenne des erreurs quadratiques</span>
+    </div>
+    <div class="info-box">
+      <div class="info-box-title">Solution analytique</div>
+      <p>
+        La regression lineaire admet une solution fermee :
+        $\mathbf{w}^* = (X^T X)^{-1} X^T Y$. Pas besoin d'iterations !
+      </p>
+    </div>
+    <h2>2.1 Avantages et limitations</h2>
+    <div class="comparison-grid">
+      <div class="comparison-box">
+        <h4>[+] Avantages</h4>
+        <ul>
+          <li>Tres rapide a entrainer</li>
+          <li>Interpretable (coefficients)</li>
+          <li>Pas d'hyperparametres</li>
+          <li>Excellent baseline</li>
+        </ul>
+      </div>
+      <div class="comparison-box">
+        <h4>[-] Limitations</h4>
+        <ul>
+          <li>Relation lineaire uniquement</li>
+          <li>Sensible aux outliers</li>
+          <li>Performance decroit en haute dimension</li>
+        </ul>
+      </div>
+    </div>
+    <div class="page-break"></div>
+    <h1>3. Regression Logistique</h1>
+    <p>
+      Malgre son nom, la <strong>regression logistique</strong> est un algorithme de <em>classification</em>.
+      Elle predit la probabilite d'appartenance a une classe en utilisant la fonction sigmoide.
+    </p>
+    <div class="equation-block">
+      $$P(y=1|\mathbf{x}) = \sigma(\mathbf{w}^T \mathbf{x}) = \frac{1}{1 + e^{-\mathbf{w}^T \mathbf{x}}}$$
+      <span class="equation-label">Fonction sigmoide pour la classification binaire</span>
+    </div>
+    <div class="info-box">
+      <div class="info-box-title">Cas d'usage : Dataset Titanic</div>
+      <p>
+        Predire la survie des passagers du Titanic a partir de leur age, sexe,
+        classe de billet, etc. Un classique du ML pour debuter !
+      </p>
+    </div>
+    <div class="page-break"></div>
+    <h1>4. Random Forest</h1>
+    <p>
+      <strong>Random Forest</strong> est un ensemble d'arbres de decision qui votent pour predire.
+      C'est l'un des algorithmes les plus populaires en ML applique : performant, robuste,
+      peu sensible au tuning.
+    </p>
+    <h2>4.1 Algorithme : Bagging + Random Splits</h2>
+    <div class="pipeline">
+      <div class="pipeline-step">
+        <div class="pipeline-num">1</div>
+        <div class="pipeline-label">Bootstrap</div>
+        <div class="pipeline-desc">Echantillons aleatoires</div>
+      </div>
+      <div class="pipeline-step">
+        <div class="pipeline-num">2</div>
+        <div class="pipeline-label">Splits</div>
+        <div class="pipeline-desc">Features aleatoires</div>
+      </div>
+      <div class="pipeline-step">
+        <div class="pipeline-num">3</div>
+        <div class="pipeline-label">Arbres</div>
+        <div class="pipeline-desc">N arbres independants</div>
+      </div>
+      <div class="pipeline-step">
+        <div class="pipeline-num">4</div>
+        <div class="pipeline-label">Vote</div>
+        <div class="pipeline-desc">Moyenne ou mode</div>
+      </div>
+    </div>
+    <h2>4.2 Hyperparametres cles</h2>
+    <div class="metric-row">
+      <div class="metric-card">
+        <div class="metric-name">n_estimators</div>
+        <div class="metric-formula">100 - 500</div>
+        <div class="metric-desc">Nombre d'arbres</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-name">max_depth</div>
+        <div class="metric-formula">10 - 30</div>
+        <div class="metric-desc">Profondeur max</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-name">min_samples_split</div>
+        <div class="metric-formula">2 - 10</div>
+        <div class="metric-desc">Min pour splitter</div>
+      </div>
+    </div>
+    <div class="info-box">
+      <div class="info-box-title">Feature Importance</div>
+      <p>
+        Random Forest fournit automatiquement l'importance de chaque feature,
+        ce qui aide a comprendre quelles variables influencent le plus les predictions.
+      </p>
+    </div>
+    <div class="page-break"></div>
+    <h1>5. Reseaux de Neurones</h1>
+    <p>
+      Les <strong>reseaux de neurones</strong> sont inspires du cerveau humain : des couches de neurones
+      interconnectes executent des transformations non-lineaires. Ils excellent pour les patterns complexes.
+    </p>
+    <h2>5.1 Fonctionnement : Forward + Backprop</h2>
+    <div class="cards-grid">
+      <div class="card">
+        <div class="card-icon">F</div>
+        <div class="card-title">Forward Pass</div>
+        <div class="card-text">Donnees traversent les couches : $\mathbf{h}_1 = \sigma(W_1 \mathbf{x} + b_1)$</div>
+      </div>
+      <div class="card">
+        <div class="card-icon">L</div>
+        <div class="card-title">Loss Computation</div>
+        <div class="card-text">Compare prediction vs realite : $L = \frac{1}{m} \sum (y - \hat{y})^2$</div>
+      </div>
+      <div class="card">
+        <div class="card-icon">B</div>
+        <div class="card-title">Backpropagation</div>
+        <div class="card-text">Calcule les gradients via la chaine de derivation</div>
+      </div>
+    </div>
+    <h2>5.2 Fonctions d'activation</h2>
+    <div class="metric-row">
+      <div class="metric-card">
+        <div class="metric-name">ReLU</div>
+        <div class="metric-formula">$f(x) = \max(0, x)$</div>
+        <div class="metric-desc">Couches cachees</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-name">Sigmoid</div>
+        <div class="metric-formula">$f(x) = \frac{1}{1 + e^{-x}}$</div>
+        <div class="metric-desc">Classification binaire</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-name">Softmax</div>
+        <div class="metric-formula">$f(x_i) = \frac{e^{x_i}}{\sum_j e^{x_j}}$</div>
+        <div class="metric-desc">Classification multi-classe</div>
+      </div>
+    </div>
+    <div class="page-break"></div>
+    <h1>6. LSTM et Series Temporelles</h1>
+    <p>
+      <strong>LSTM (Long Short-Term Memory)</strong> est un type de reseau neuronal pour series temporelles.
+      Il peut "retenir" l'information sur de longues periodes — crucial pour les predictions temporelles.
+    </p>
+    <div class="info-box">
+      <div class="info-box-title">Probleme des RNN vanilla</div>
+      <p>
+        Les gradients disparaissent (vanishing) ou explosent (exploding) sur de longues sequences.
+        Le LSTM resout ce probleme avec son <strong>cell state</strong>.
+      </p>
+    </div>
+    <h2>6.1 Les trois portes du LSTM</h2>
+    <div class="metric-row">
+      <div class="metric-card">
+        <div class="metric-name">Forget Gate</div>
+        <div class="metric-formula">$f_t = \sigma(W_f [h_{t-1}, x_t] + b_f)$</div>
+        <div class="metric-desc">Quoi oublier ?</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-name">Input Gate</div>
+        <div class="metric-formula">$i_t = \sigma(W_i [h_{t-1}, x_t] + b_i)$</div>
+        <div class="metric-desc">Quoi ajouter ?</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-name">Output Gate</div>
+        <div class="metric-formula">$o_t = \sigma(W_o [h_{t-1}, x_t] + b_o)$</div>
+        <div class="metric-desc">Quoi exposer ?</div>
+      </div>
+    </div>
+    <div class="info-box">
+      <div class="info-box-title">Cas d'usage</div>
+      <p>
+        Prediction de prix boursiers, meteo, consommation energetique,
+        traitement du langage naturel (NLP)...
+      </p>
+    </div>
+    <div class="page-break"></div>
+    <h1>7. Metriques de Performance</h1>
+    <p>
+      Evaluer correctement un modele est crucial. Les bonnes metriques dependent du type de probleme
+      (regression vs classification) et des objectifs metier.
+    </p>
+    <h2>7.1 Regression</h2>
+    <div class="metric-row">
+      <div class="metric-card">
+        <div class="metric-name">MAE</div>
+        <div class="metric-formula">$\frac{1}{n}\sum|y_i - \hat{y}_i|$</div>
+        <div class="metric-desc">Robuste aux outliers</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-name">RMSE</div>
+        <div class="metric-formula">$\sqrt{\frac{1}{n}\sum(y_i - \hat{y}_i)^2}$</div>
+        <div class="metric-desc">Penalise les grandes erreurs</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-name">R2</div>
+        <div class="metric-formula">$1 - \frac{SS_{res}}{SS_{tot}}$</div>
+        <div class="metric-desc">% variance expliquee</div>
+      </div>
+    </div>
+    <h2>7.2 Classification</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Metrique</th>
+          <th>Formule</th>
+          <th>Usage</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><strong>Accuracy</strong></td>
+          <td>$(TP + TN) / Total$</td>
+          <td>Classes equilibrees</td>
+        </tr>
+        <tr>
+          <td><strong>Precision</strong></td>
+          <td>$TP / (TP + FP)$</td>
+          <td>Minimiser faux positifs</td>
+        </tr>
+        <tr>
+          <td><strong>Recall</strong></td>
+          <td>$TP / (TP + FN)$</td>
+          <td>Minimiser faux negatifs</td>
+        </tr>
+        <tr>
+          <td><strong>F1-Score</strong></td>
+          <td>$2 \cdot \frac{P \cdot R}{P + R}$</td>
+          <td>Classes desequilibrees</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="page-break"></div>
+    <h1>8. Optimisation et Regularisation</h1>
+    <p>
+      Pour eviter le <strong>surapprentissage (overfitting)</strong> et ameliorer la generalisation,
+      plusieurs techniques existent.
+    </p>
+    <div class="cards-grid">
+      <div class="card">
+        <div class="card-icon">D</div>
+        <div class="card-title">Dropout</div>
+        <div class="card-text">Desactive aleatoirement des neurones pendant l'entrainement.</div>
+      </div>
+      <div class="card">
+        <div class="card-icon">E</div>
+        <div class="card-title">Early Stopping</div>
+        <div class="card-text">Arrete l'entrainement quand la validation stagne.</div>
+      </div>
+      <div class="card">
+        <div class="card-icon">L</div>
+        <div class="card-title">L2 Regularization</div>
+        <div class="card-text">Penalise les grands poids : $L_{total} = L_{data} + \lambda \sum w^2$</div>
+      </div>
+    </div>
+    <div class="info-box">
+      <div class="info-box-title">Regle d'or</div>
+      <p>
+        Toujours comparer les metriques sur <strong>train</strong> ET <strong>test</strong>.
+        Un grand ecart = overfitting. Objectif : R2 train ≈ R2 test.
+      </p>
+    </div>
+    <div class="author-footer">
+      <div class="author-name">Imad Maalouf</div>
+      <div class="author-contact">
+        imadmaalouf02@gmail.com | github.com/imadmaalouf02 | huggingface.co/spaces/MAALOOUF/ML_Training
+      </div>
+    </div>
+  </div>
+</body>
+</html>

cours.html ADDED Viewed

	@@ -0,0 +1,1421 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cours — ML Academy</title>
+  <link rel="stylesheet" href="css/shared.css">
+  <script>
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']]
+      },
+      options: { skipHtmlTags: ['script','noscript','style','textarea','pre'] }
+    };
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <style>
+    /* LAYOUT WITH SIDEBAR */
+    .course-layout {
+      display: flex;
+      min-height: calc(100vh - var(--navbar-height));
+    }
+    /* SIDEBAR */
+    .sidebar {
+      width: var(--sidebar-width);
+      background: var(--bg-secondary);
+      border-right: 1px solid var(--border-color);
+      position: fixed;
+      top: var(--navbar-height);
+      left: 0;
+      bottom: 0;
+      overflow-y: auto;
+      z-index: 100;
+      animation: fadeInLeft 0.5s ease;
+    }
+    .sidebar-header {
+      padding: var(--space-xl);
+      border-bottom: 1px solid var(--border-color);
+    }
+    .sidebar-badge {
+      display: inline-block;
+      padding: var(--space-xs) var(--space-sm);
+      background: rgba(99, 102, 241, 0.1);
+      border: 1px solid rgba(99, 102, 241, 0.3);
+      border-radius: var(--radius-sm);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.65rem;
+      color: var(--primary-light);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: var(--space-sm);
+    }
+    .sidebar-title {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-xs);
+    }
+    .sidebar-subtitle {
+      font-size: 0.8rem;
+      color: var(--text-muted);
+    }
+    .sidebar-nav {
+      padding: var(--space-md) 0;
+    }
+    .nav-section {
+      margin-bottom: var(--space-md);
+    }
+    .nav-section-title {
+      padding: var(--space-sm) var(--space-xl);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.65rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    .nav-item {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-sm) var(--space-xl);
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: all var(--transition-base);
+      border-left: 3px solid transparent;
+    }
+    .nav-item:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+      border-left-color: var(--primary);
+    }
+    .nav-item.active {
+      background: rgba(99, 102, 241, 0.1);
+      color: var(--primary-light);
+      border-left-color: var(--primary);
+    }
+    .nav-icon {
+      font-size: 1rem;
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text-muted);
+    }
+    .sidebar-footer {
+      padding: var(--space-lg) var(--space-xl);
+      border-top: 1px solid var(--border-color);
+      margin-top: auto;
+    }
+    .progress-label {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      margin-bottom: var(--space-sm);
+      display: flex;
+      justify-content: space-between;
+    }
+    .progress-bar {
+      height: 6px;
+      background: var(--bg-tertiary);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--primary), var(--secondary));
+      border-radius: 3px;
+      transition: width 0.5s ease;
+      animation: progress 1s ease;
+    }
+    /* PDF DOWNLOAD BUTTON */
+    .pdf-download {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-sm) var(--space-md);
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+      border-radius: var(--radius-md);
+      color: #ef4444;
+      font-size: 0.8rem;
+      font-weight: 600;
+      text-decoration: none;
+      margin-top: var(--space-md);
+      transition: all var(--transition-base);
+    }
+    .pdf-download:hover {
+      background: rgba(239, 68, 68, 0.2);
+      transform: translateY(-2px);
+    }
+    /* MAIN CONTENT */
+    .main-content {
+      flex: 1;
+      margin-left: var(--sidebar-width);
+      padding: var(--space-2xl);
+      max-width: 900px;
+    }
+    /* COURSE HERO */
+    .course-hero {
+      text-align: center;
+      padding: var(--space-2xl) 0;
+      margin-bottom: var(--space-2xl);
+      border-bottom: 1px solid var(--border-color);
+    }
+    .course-hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-xs) var(--space-md);
+      background: rgba(16, 185, 129, 0.1);
+      border: 1px solid rgba(16, 185, 129, 0.3);
+      border-radius: 20px;
+      font-size: 0.75rem;
+      color: var(--success);
+      margin-bottom: var(--space-lg);
+    }
+    .course-hero-badge .dot {
+      width: 6px;
+      height: 6px;
+      background: var(--success);
+      border-radius: 50%;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    .course-hero-title {
+      font-size: clamp(1.75rem, 4vw, 2.5rem);
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+    }
+    .course-hero-subtitle {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-xl);
+    }
+    .course-hero-stats {
+      display: flex;
+      justify-content: center;
+      gap: var(--space-2xl);
+      flex-wrap: wrap;
+    }
+    .course-hero-stat {
+      text-align: center;
+    }
+    .course-hero-stat-value {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+    .course-hero-stat-label {
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-top: var(--space-xs);
+    }
+    /* SECTIONS */
+    .section {
+      margin-bottom: var(--space-3xl);
+      scroll-margin-top: calc(var(--navbar-height) + var(--space-lg));
+    }
+    .section-header {
+      margin-bottom: var(--space-xl);
+      padding-bottom: var(--space-md);
+      border-bottom: 1px solid var(--border-color);
+    }
+    .section-badge {
+      display: inline-block;
+      padding: var(--space-xs) var(--space-sm);
+      background: rgba(99, 102, 241, 0.1);
+      border-radius: var(--radius-sm);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.65rem;
+      color: var(--primary-light);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: var(--space-sm);
+    }
+    .section-title {
+      font-size: clamp(1.5rem, 3vw, 2rem);
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+    }
+    .section-title small {
+      display: block;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      font-weight: 500;
+      margin-bottom: var(--space-xs);
+    }
+    .section-content p {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      line-height: 1.8;
+      margin-bottom: var(--space-md);
+    }
+    .section-content strong {
+      color: var(--text-primary);
+      font-weight: 600;
+    }
+    /* CARDS GRID */
+    .cards-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: var(--space-md);
+      margin: var(--space-lg) 0;
+    }
+    .info-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      padding: var(--space-lg);
+      transition: all var(--transition-base);
+    }
+    .info-card:hover {
+      border-color: var(--primary);
+      transform: translateY(-3px);
+    }
+    .info-card-icon {
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      font-weight: 700;
+      color: white;
+      margin-bottom: var(--space-sm);
+    }
+    .info-card-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-xs);
+    }
+    .info-card-text {
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+    }
+    .info-card-tag {
+      display: inline-block;
+      margin-top: var(--space-sm);
+      padding: var(--space-xs) var(--space-sm);
+      background: var(--bg-tertiary);
+      border-radius: var(--radius-sm);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.65rem;
+      color: var(--text-muted);
+    }
+    /* PIPELINE */
+    .pipeline {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-md);
+      margin: var(--space-xl) 0;
+      padding: var(--space-lg);
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-lg);
+    }
+    .pipeline-step {
+      flex: 1;
+      min-width: 120px;
+      text-align: center;
+      padding: var(--space-md);
+      position: relative;
+    }
+    .pipeline-step:not(:last-child)::after {
+      content: '->';
+      position: absolute;
+      right: -15px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--primary);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 1rem;
+    }
+    .pipeline-num {
+      width: 36px;
+      height: 36px;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.9rem;
+      font-weight: 700;
+      color: white;
+      margin: 0 auto var(--space-sm);
+    }
+    .pipeline-label {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-xs);
+    }
+    .pipeline-desc {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+    }
+    /* CHECKLIST */
+    .checklist {
+      list-style: none;
+      padding: 0;
+      margin: var(--space-lg) 0;
+    }
+    .checklist li {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-sm);
+      padding: var(--space-sm) 0;
+      font-size: 0.95rem;
+      color: var(--text-secondary);
+    }
+    .checklist li::before {
+      content: '[v]';
+      color: var(--success);
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+    /* EQUATIONS */
+    .equation-block {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-left: 3px solid var(--primary);
+      border-radius: var(--radius-md);
+      padding: var(--space-lg);
+      margin: var(--space-lg) 0;
+      text-align: center;
+      overflow-x: auto;
+    }
+    .equation-label {
+      display: block;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      text-align: right;
+      margin-top: var(--space-sm);
+    }
+    /* COMPARISON GRID */
+    .comparison-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--space-md);
+      margin: var(--space-lg) 0;
+    }
+    .comparison-box {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      padding: var(--space-lg);
+    }
+    .comparison-box h4 {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+      padding-bottom: var(--space-sm);
+      border-bottom: 1px solid var(--border-color);
+    }
+    .comparison-box ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .comparison-box li {
+      padding: var(--space-xs) 0;
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+    }
+    .comparison-box li::before {
+      content: '>';
+      color: var(--primary);
+      margin-right: var(--space-sm);
+      font-family: 'JetBrains Mono', monospace;
+    }
+    /* METRIC CARDS */
+    .metric-row {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: var(--space-md);
+      margin: var(--space-lg) 0;
+    }
+    .metric-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      padding: var(--space-lg);
+      text-align: center;
+      transition: all var(--transition-base);
+    }
+    .metric-card:hover {
+      border-color: var(--primary);
+      transform: translateY(-3px);
+    }
+    .metric-name {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: var(--space-sm);
+    }
+    .metric-formula {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 1rem;
+      color: var(--primary-light);
+      font-weight: 600;
+      margin-bottom: var(--space-xs);
+    }
+    .metric-desc {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+    }
+    /* RESPONSIVE */
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+        transition: transform var(--transition-base);
+      }
+      .sidebar.open {
+        transform: translateX(0);
+      }
+      .main-content {
+        margin-left: 0;
+        padding: var(--space-lg);
+      }
+      .comparison-grid {
+        grid-template-columns: 1fr;
+      }
+      .pipeline-step:not(:last-child)::after {
+        display: none;
+      }
+    }
+    /* BACK TO TOP */
+    .back-to-top {
+      position: fixed;
+      bottom: var(--space-xl);
+      right: var(--space-xl);
+      width: 44px;
+      height: 44px;
+      background: var(--primary);
+      border: none;
+      border-radius: 50%;
+      color: white;
+      font-size: 1.2rem;
+      cursor: pointer;
+      opacity: 0;
+      visibility: hidden;
+      transition: all var(--transition-base);
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .back-to-top.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+    .back-to-top:hover {
+      background: var(--primary-light);
+      transform: translateY(-3px);
+    }
+    /* AUTHOR FOOTER */
+    .author-footer {
+      background: var(--bg-secondary);
+      border-top: 1px solid var(--border-color);
+      padding: var(--space-xl);
+      text-align: center;
+    }
+    .author-info {
+      display: flex;
+      justify-content: center;
+      gap: var(--space-xl);
+      flex-wrap: wrap;
+      margin-bottom: var(--space-md);
+    }
+    .author-link {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: color var(--transition-base);
+    }
+    .author-link:hover {
+      color: var(--primary-light);
+    }
+    .author-link svg {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+  </style>
+</head>
+<body>
+  <!-- Particles Background -->
+  <div class="particles-container">
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+  </div>
+  <!-- Navigation -->
+  <nav class="navbar">
+    <a href="index.html" class="navbar-brand">
+      <div class="brand-logo">ML</div>
+      <span>ML Academy</span>
+    </a>
+    <div class="navbar-nav">
+      <a href="index.html" class="nav-link">
+        <span class="nav-icon">[H]</span>
+        <span>Accueil</span>
+      </a>
+      <a href="cours.html" class="nav-link active">
+        <span class="nav-icon">[C]</span>
+        <span>Cours</span>
+      </a>
+      <a href="tp.html" class="nav-link">
+        <span class="nav-icon">[T]</span>
+        <span>TPs</span>
+      </a>
+      <a href="feedback.html" class="nav-link">
+        <span class="nav-icon">[F]</span>
+        <span>Contact</span>
+      </a>
+    </div>
+    <div class="nav-badge">
+      <div class="dot"></div>
+      <span>Google Colab Ready</span>
+    </div>
+  </nav>
+  <!-- Course Layout -->
+  <div class="course-layout">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <div class="sidebar-badge">Formation 2025/2026</div>
+        <h1 class="sidebar-title">Machine Learning</h1>
+        <p class="sidebar-subtitle">Cours theoriques complets</p>
+        <a href="cours.pdf" class="pdf-download" download>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+          </svg>
+          Telecharger le PDF
+        </a>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="nav-section">
+          <div class="nav-section-title">Introduction</div>
+          <a href="#intro" class="nav-item active">
+            <span class="nav-icon">[1]</span>
+            <span>Qu'est-ce que le ML ?</span>
+          </a>
+        </div>
+        <div class="nav-section">
+          <div class="nav-section-title">Algorithmes Supervises</div>
+          <a href="#regression" class="nav-item">
+            <span class="nav-icon">[2]</span>
+            <span>Regression Lineaire</span>
+          </a>
+          <a href="#logistic" class="nav-item">
+            <span class="nav-icon">[3]</span>
+            <span>Regression Logistique</span>
+          </a>
+          <a href="#randomforest" class="nav-item">
+            <span class="nav-icon">[4]</span>
+            <span>Random Forest</span>
+          </a>
+        </div>
+        <div class="nav-section">
+          <div class="nav-section-title">Deep Learning</div>
+          <a href="#neuralnets" class="nav-item">
+            <span class="nav-icon">[5]</span>
+            <span>Reseaux de Neurones</span>
+          </a>
+          <a href="#lstm" class="nav-item">
+            <span class="nav-icon">[6]</span>
+            <span>LSTM & Series Temp.</span>
+          </a>
+        </div>
+        <div class="nav-section">
+          <div class="nav-section-title">Evaluation</div>
+          <a href="#metrics" class="nav-item">
+            <span class="nav-icon">[7]</span>
+            <span>Metriques</span>
+          </a>
+          <a href="#optimization" class="nav-item">
+            <span class="nav-icon">[8]</span>
+            <span>Optimisation</span>
+          </a>
+        </div>
+        <div class="nav-section">
+          <div class="nav-section-title">Navigation</div>
+          <a href="index.html" class="nav-item">
+            <span class="nav-icon">[H]</span>
+            <span>Accueil</span>
+          </a>
+          <a href="tp.html" class="nav-item">
+            <span class="nav-icon">[T]</span>
+            <span>Travaux Pratiques</span>
+          </a>
+          <a href="feedback.html" class="nav-item">
+            <span class="nav-icon">[F]</span>
+            <span>Questions</span>
+          </a>
+        </div>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="progress-label">
+          <span>Progression</span>
+          <span id="progress-text">0%</span>
+        </div>
+        <div class="progress-bar">
+          <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
+        </div>
+      </div>
+    </aside>
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Course Hero -->
+      <div class="course-hero scroll-animate">
+        <div class="course-hero-badge">
+          <div class="dot"></div>
+          <span>Pret a executer sur Google Colab</span>
+        </div>
+        <h1 class="course-hero-title">
+          Cours de <span class="gradient-text">Machine Learning</span>
+        </h1>
+        <p class="course-hero-subtitle">
+          Formation complete couvrant les algorithmes fondamentaux jusqu'aux techniques avancees.
+        </p>
+        <div class="course-hero-stats">
+          <div class="course-hero-stat">
+            <div class="course-hero-stat-value">8</div>
+            <div class="course-hero-stat-label">Chapitres</div>
+          </div>
+          <div class="course-hero-stat">
+            <div class="course-hero-stat-value">25+</div>
+            <div class="course-hero-stat-label">Equations</div>
+          </div>
+          <div class="course-hero-stat">
+            <div class="course-hero-stat-value">50+</div>
+            <div class="course-hero-stat-label">Exemples de code</div>
+          </div>
+        </div>
+      </div>
+      <!-- Section 1: Introduction -->
+      <section class="section" id="intro">
+        <div class="section-header scroll-animate">
+          <div class="section-badge">Partie 1 · 20 min</div>
+          <h2 class="section-title">
+            <small>Fondamentaux</small>
+            Qu'est-ce que le Machine Learning ?
+          </h2>
+        </div>
+        <div class="section-content scroll-animate">
+          <p>
+            Le <strong>Machine Learning (ML)</strong> est une branche de l'intelligence artificielle
+            qui permet aux machines d'apprendre a partir de donnees <em>sans etre explicitement programmees</em>
+            pour chaque tache. Au lieu de coder des regles a la main, on montre des exemples au modele
+            et il decouvre lui-meme les patterns.
+          </p>
+          <div class="callout callout-info scroll-animate">
+            <div class="callout-icon">[i]</div>
+            <div class="callout-content">
+              <div class="callout-title">Idee fondamentale</div>
+              <div class="callout-text">
+                On cherche a approximer une fonction inconnue $f$ telle que $\hat{y} = f(x_1, x_2, \ldots, x_n)$.
+                Le modele ML apprend cette fonction a partir d'exemples $(x, y)$ connus.
+              </div>
+            </div>
+          </div>
+          <h3 style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md);">
+            Types d'apprentissage
+          </h3>
+          <div class="cards-grid scroll-animate">
+            <div class="info-card">
+              <div class="info-card-icon">S</div>
+              <h4 class="info-card-title">Supervise</h4>
+              <p class="info-card-text">Donnees labellisees $(x, y)$ : regression et classification.</p>
+              <span class="info-card-tag">Predictions</span>
+            </div>
+            <div class="info-card">
+              <div class="info-card-icon">N</div>
+              <h4 class="info-card-title">Non supervise</h4>
+              <p class="info-card-text">Pas de labels : clustering, reduction de dimension.</p>
+              <span class="info-card-tag">Patterns</span>
+            </div>
+            <div class="info-card">
+              <div class="info-card-icon">R</div>
+              <h4 class="info-card-title">Par renforcement</h4>
+              <p class="info-card-text">Agent apprend via actions-recompenses.</p>
+              <span class="info-card-tag">Strategies</span>
+            </div>
+          </div>
+          <h3 style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md);">
+            Pipeline ML typique
+          </h3>
+          <div class="pipeline scroll-animate">
+            <div class="pipeline-step">
+              <div class="pipeline-num">1</div>
+              <div class="pipeline-label">Donnees</div>
+              <div class="pipeline-desc">Collecte & nettoyage</div>
+            </div>
+            <div class="pipeline-step">
+              <div class="pipeline-num">2</div>
+              <div class="pipeline-label">Features</div>
+              <div class="pipeline-desc">Engineering</div>
+            </div>
+            <div class="pipeline-step">
+              <div class="pipeline-num">3</div>
+              <div class="pipeline-label">Split</div>
+              <div class="pipeline-desc">Train / Test</div>
+            </div>
+            <div class="pipeline-step">
+              <div class="pipeline-num">4</div>
+              <div class="pipeline-label">Modele</div>
+              <div class="pipeline-desc">Entrainement</div>
+            </div>
+            <div class="pipeline-step">
+              <div class="pipeline-num">5</div>
+              <div class="pipeline-label">Evaluation</div>
+              <div class="pipeline-desc">Metriques</div>
+            </div>
+            <div class="pipeline-step">
+              <div class="pipeline-num">6</div>
+              <div class="pipeline-label">Production</div>
+              <div class="pipeline-desc">Deploiement</div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 2: Regression Lineaire -->
+      <section class="section" id="regression">
+        <div class="section-header scroll-animate">
+          <div class="section-badge">Partie 2 · 25 min</div>
+          <h2 class="section-title">
+            <small>Algorithmes de base</small>
+            Regression Lineaire
+          </h2>
+        </div>
+        <div class="section-content scroll-animate">
+          <p>
+            La <strong>regression lineaire</strong> modelise la relation entre les features et la cible
+            par une fonction affine. C'est l'algorithme le plus simple mais souvent tres efficace
+            comme baseline.
+          </p>
+          <div class="equation-block">
+            $$\hat{y} = w_0 + w_1 x_1 + w_2 x_2 + \cdots + w_n x_n = \mathbf{w}^T \mathbf{x}$$
+            <span class="equation-label">Modele lineaire avec coefficients $\mathbf{w}$</span>
+          </div>
+          <p>
+            L'objectif est de minimiser l'erreur quadratique moyenne (MSE) :
+          </p>
+          <div class="equation-block">
+            $$\text{MSE} = \frac{1}{m} \sum_{i=1}^{m} (y_i - \hat{y}_i)^2$$
+            <span class="equation-label">Fonction de cout : moyenne des erreurs quadratiques</span>
+          </div>
+          <div class="callout callout-info scroll-animate">
+            <div class="callout-icon">[i]</div>
+            <div class="callout-content">
+              <div class="callout-title">Solution analytique</div>
+              <div class="callout-text">
+                La regression lineaire admet une solution fermee :
+                $\mathbf{w}^* = (X^T X)^{-1} X^T Y$. Pas besoin d'iterations !
+              </div>
+            </div>
+          </div>
+          <div class="comparison-grid scroll-animate">
+            <div class="comparison-box">
+              <h4>[+] Avantages</h4>
+              <ul>
+                <li>Tres rapide a entrainer</li>
+                <li>Interpretable (coefficients)</li>
+                <li>Pas d'hyperparametres</li>
+                <li>Excellent baseline</li>
+              </ul>
+            </div>
+            <div class="comparison-box">
+              <h4>[-] Limitations</h4>
+              <ul>
+                <li>Relation lineaire uniquement</li>
+                <li>Sensible aux outliers</li>
+                <li>Performance decroit en haute dimension</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 3: Regression Logistique -->
+      <section class="section" id="logistic">
+        <div class="section-header scroll-animate">
+          <div class="section-badge">Partie 3 · 20 min</div>
+          <h2 class="section-title">
+            <small>Classification</small>
+            Regression Logistique
+          </h2>
+        </div>
+        <div class="section-content scroll-animate">
+          <p>
+            Malgre son nom, la <strong>regression logistique</strong> est un algorithme de <em>classification</em>.
+            Elle predit la probabilite d'appartenance a une classe en utilisant la fonction sigmoide.
+          </p>
+          <div class="equation-block">
+            $$P(y=1|\mathbf{x}) = \sigma(\mathbf{w}^T \mathbf{x}) = \frac{1}{1 + e^{-\mathbf{w}^T \mathbf{x}}}$$
+            <span class="equation-label">Fonction sigmoide pour la classification binaire</span>
+          </div>
+          <div class="callout callout-success scroll-animate">
+            <div class="callout-icon">[v]</div>
+            <div class="callout-content">
+              <div class="callout-title">Cas d'usage : Dataset Titanic</div>
+              <div class="callout-text">
+                Predire la survie des passagers du Titanic a partir de leur age, sexe,
+                classe de billet, etc. Un classique du ML pour debuter !
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 4: Random Forest -->
+      <section class="section" id="randomforest">
+        <div class="section-header scroll-animate">
+          <div class="section-badge">Partie 4 · 30 min</div>
+          <h2 class="section-title">
+            <small>Ensemble Learning</small>
+            Random Forest
+          </h2>
+        </div>
+        <div class="section-content scroll-animate">
+          <p>
+            <strong>Random Forest</strong> est un ensemble d'arbres de decision qui votent pour predire.
+            C'est l'un des algorithmes les plus populaires en ML applique : performant, robuste,
+            peu sensible au tuning.
+          </p>
+          <h3 style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md);">
+            Algorithm : Bagging + Random Splits
+          </h3>
+          <div class="pipeline scroll-animate">
+            <div class="pipeline-step">
+              <div class="pipeline-num">1</div>
+              <div class="pipeline-label">Bootstrap</div>
+              <div class="pipeline-desc">Echantillons aleatoires</div>
+            </div>
+            <div class="pipeline-step">
+              <div class="pipeline-num">2</div>
+              <div class="pipeline-label">Splits</div>
+              <div class="pipeline-desc">Features aleatoires</div>
+            </div>
+            <div class="pipeline-step">
+              <div class="pipeline-num">3</div>
+              <div class="pipeline-label">Arbres</div>
+              <div class="pipeline-desc">N arbres independants</div>
+            </div>
+            <div class="pipeline-step">
+              <div class="pipeline-num">4</div>
+              <div class="pipeline-label">Vote</div>
+              <div class="pipeline-desc">Moyenne ou mode</div>
+            </div>
+          </div>
+          <div class="metric-row scroll-animate">
+            <div class="metric-card">
+              <div class="metric-name">n_estimators</div>
+              <div class="metric-formula">100 - 500</div>
+              <div class="metric-desc">Nombre d'arbres</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-name">max_depth</div>
+              <div class="metric-formula">10 - 30</div>
+              <div class="metric-desc">Profondeur max</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-name">min_samples_split</div>
+              <div class="metric-formula">2 - 10</div>
+              <div class="metric-desc">Min pour splitter</div>
+            </div>
+          </div>
+          <div class="callout callout-success scroll-animate">
+            <div class="callout-icon">[*]</div>
+            <div class="callout-content">
+              <div class="callout-title">Feature Importance</div>
+              <div class="callout-text">
+                Random Forest fournit automatiquement l'importance de chaque feature,
+                ce qui aide a comprendre quelles variables influencent le plus les predictions.
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 5: Neural Networks -->
+      <section class="section" id="neuralnets">
+        <div class="section-header scroll-animate">
+          <div class="section-badge">Partie 5 · 35 min</div>
+          <h2 class="section-title">
+            <small>Deep Learning</small>
+            Reseaux de Neurones
+          </h2>
+        </div>
+        <div class="section-content scroll-animate">
+          <p>
+            Les <strong>reseaux de neurones</strong> sont inspires du cerveau humain : des couches de neurones
+            interconnectes executent des transformations non-lineaires. Ils excellent pour les patterns complexes.
+          </p>
+          <h3 style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md);">
+            Fonctionnement : Forward + Backprop
+          </h3>
+          <div class="cards-grid scroll-animate">
+            <div class="info-card">
+              <div class="info-card-icon">F</div>
+              <h4 class="info-card-title">Forward Pass</h4>
+              <p class="info-card-text">Donnees traversent les couches : $\mathbf{h}_1 = \sigma(W_1 \mathbf{x} + b_1)$</p>
+            </div>
+            <div class="info-card">
+              <div class="info-card-icon">L</div>
+              <h4 class="info-card-title">Loss Computation</h4>
+              <p class="info-card-text">Compare prediction vs realite : $L = \frac{1}{m} \sum (y - \hat{y})^2$</p>
+            </div>
+            <div class="info-card">
+              <div class="info-card-icon">B</div>
+              <h4 class="info-card-title">Backpropagation</h4>
+              <p class="info-card-text">Calcule les gradients via la chaine de derivation</p>
+            </div>
+            <div class="info-card">
+              <div class="info-card-icon">G</div>
+              <h4 class="info-card-title">Gradient Descent</h4>
+              <p class="info-card-text">Met a jour les poids : $W \leftarrow W - \alpha \nabla_W L$</p>
+            </div>
+          </div>
+          <h3 style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md);">
+            Fonctions d'activation
+          </h3>
+          <div class="metric-row scroll-animate">
+            <div class="metric-card">
+              <div class="metric-name">ReLU</div>
+              <div class="metric-formula">$f(x) = \max(0, x)$</div>
+              <div class="metric-desc">Couches cachees</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-name">Sigmoid</div>
+              <div class="metric-formula">$f(x) = \frac{1}{1 + e^{-x}}$</div>
+              <div class="metric-desc">Classification binaire</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-name">Softmax</div>
+              <div class="metric-formula">$f(x_i) = \frac{e^{x_i}}{\sum_j e^{x_j}}$</div>
+              <div class="metric-desc">Classification multi-classe</div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 6: LSTM -->
+      <section class="section" id="lstm">
+        <div class="section-header scroll-animate">
+          <div class="section-badge">Partie 6 · 30 min</div>
+          <h2 class="section-title">
+            <small>Series Temporelles</small>
+            LSTM & Reseaux Recurrents
+          </h2>
+        </div>
+        <div class="section-content scroll-animate">
+          <p>
+            <strong>LSTM (Long Short-Term Memory)</strong> est un type de reseau neuronal pour series temporelles.
+            Il peut "retenir" l'information sur de longues periodes — crucial pour les predictions temporelles.
+          </p>
+          <div class="callout callout-warning scroll-animate">
+            <div class="callout-icon">[!]</div>
+            <div class="callout-content">
+              <div class="callout-title">Probleme des RNN vanilla</div>
+              <div class="callout-text">
+                Les gradients disparaissent (vanishing) ou explosent (exploding) sur de longues sequences.
+                Le LSTM resout ce probleme avec son <strong>cell state</strong>.
+              </div>
+            </div>
+          </div>
+          <h3 style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md);">
+            Les trois portes du LSTM
+          </h3>
+          <div class="metric-row scroll-animate">
+            <div class="metric-card">
+              <div class="metric-name">Forget Gate</div>
+              <div class="metric-formula">$f_t = \sigma(W_f [h_{t-1}, x_t] + b_f)$</div>
+              <div class="metric-desc">Quoi oublier ?</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-name">Input Gate</div>
+              <div class="metric-formula">$i_t = \sigma(W_i [h_{t-1}, x_t] + b_i)$</div>
+              <div class="metric-desc">Quoi ajouter ?</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-name">Output Gate</div>
+              <div class="metric-formula">$o_t = \sigma(W_o [h_{t-1}, x_t] + b_o)$</div>
+              <div class="metric-desc">Quoi exposer ?</div>
+            </div>
+          </div>
+          <div class="callout callout-info scroll-animate">
+            <div class="callout-icon">[i]</div>
+            <div class="callout-content">
+              <div class="callout-title">Cas d'usage</div>
+              <div class="callout-text">
+                Prediction de prix boursiers, meteo, consommation energetique,
+                traitement du langage naturel (NLP)...
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 7: Metriques -->
+      <section class="section" id="metrics">
+        <div class="section-header scroll-animate">
+          <div class="section-badge">Partie 7 · 25 min</div>
+          <h2 class="section-title">
+            <small>Evaluation</small>
+            Metriques de Performance
+          </h2>
+        </div>
+        <div class="section-content scroll-animate">
+          <p>
+            Evaluer correctement un modele est crucial. Les bonnes metriques dependent du type de probleme
+            (regression vs classification) et des objectifs metier.
+          </p>
+          <h3 style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md);">
+            Regression
+          </h3>
+          <div class="metric-row scroll-animate">
+            <div class="metric-card">
+              <div class="metric-name">MAE</div>
+              <div class="metric-formula">$\frac{1}{n}\sum|y_i - \hat{y}_i|$</div>
+              <div class="metric-desc">Robuste aux outliers</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-name">RMSE</div>
+              <div class="metric-formula">$\sqrt{\frac{1}{n}\sum(y_i - \hat{y}_i)^2}$</div>
+              <div class="metric-desc">Penalise les grandes erreurs</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-name">R2</div>
+              <div class="metric-formula">$1 - \frac{SS_{res}}{SS_{tot}}$</div>
+              <div class="metric-desc">% variance expliquee</div>
+            </div>
+          </div>
+          <h3 style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md);">
+            Classification
+          </h3>
+          <div class="table-container scroll-animate">
+            <table>
+              <thead>
+                <tr>
+                  <th>Metrique</th>
+                  <th>Formule</th>
+                  <th>Usage</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><strong>Accuracy</strong></td>
+                  <td>$(TP + TN) / Total$</td>
+                  <td>Classes equilibrees</td>
+                </tr>
+                <tr>
+                  <td><strong>Precision</strong></td>
+                  <td>$TP / (TP + FP)$</td>
+                  <td>Minimiser faux positifs</td>
+                </tr>
+                <tr>
+                  <td><strong>Recall</strong></td>
+                  <td>$TP / (TP + FN)$</td>
+                  <td>Minimiser faux negatifs</td>
+                </tr>
+                <tr>
+                  <td><strong>F1-Score</strong></td>
+                  <td>$2 \cdot \frac{P \cdot R}{P + R}$</td>
+                  <td>Classes desequilibrees</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+      <!-- Section 8: Optimisation -->
+      <section class="section" id="optimization">
+        <div class="section-header scroll-animate">
+          <div class="section-badge">Partie 8 · 20 min</div>
+          <h2 class="section-title">
+            <small>Amelioration</small>
+            Optimisation & Regularisation
+          </h2>
+        </div>
+        <div class="section-content scroll-animate">
+          <p>
+            Pour eviter le <strong>surapprentissage (overfitting)</strong> et ameliorer la generalisation,
+            plusieurs techniques existent.
+          </p>
+          <div class="cards-grid scroll-animate">
+            <div class="info-card">
+              <div class="info-card-icon">D</div>
+              <h4 class="info-card-title">Dropout</h4>
+              <p class="info-card-text">Desactive aleatoirement des neurones pendant l'entrainement.</p>
+            </div>
+            <div class="info-card">
+              <div class="info-card-icon">E</div>
+              <h4 class="info-card-title">Early Stopping</h4>
+              <p class="info-card-text">Arrete l'entrainement quand la validation stagne.</p>
+            </div>
+            <div class="info-card">
+              <div class="info-card-icon">L</div>
+              <h4 class="info-card-title">L2 Regularization</h4>
+              <p class="info-card-text">Penalise les grands poids : $L_{total} = L_{data} + \lambda \sum w^2$</p>
+            </div>
+            <div class="info-card">
+              <div class="info-card-icon">C</div>
+              <h4 class="info-card-title">Cross-Validation</h4>
+              <p class="info-card-text">K-fold pour une evaluation plus robuste.</p>
+            </div>
+          </div>
+          <div class="callout callout-tip scroll-animate">
+            <div class="callout-icon">[*]</div>
+            <div class="callout-content">
+              <div class="callout-title">Regle d'or</div>
+              <div class="callout-text">
+                Toujours comparer les metriques sur <strong>train</strong> ET <strong>test</strong>.
+                Un grand ecart = overfitting. Objectif : R2 train ≈ R2 test.
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Author Footer -->
+      <footer class="author-footer" style="margin-top: var(--space-3xl);">
+        <div class="author-info">
+          <a href="mailto:imadmaalouf02@gmail.com" class="author-link">
+            <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
+            imadmaalouf02@gmail.com
+          </a>
+          <a href="https://github.com/imadmaalouf02" target="_blank" class="author-link">
+            <svg viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            GitHub
+          </a>
+          <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" class="author-link">
+            <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+            Hugging Face Space
+          </a>
+        </div>
+      </footer>
+      <!-- Footer -->
+      <footer class="footer" style="margin-top: 0;">
+        <p class="footer-text">
+          ML Academy — Cours de Machine Learning —
+          <span class="footer-brand">GE-MCI 4A</span> — 2025/2026
+        </p>
+        <p class="footer-text" style="margin-top: var(--space-sm); font-size: 0.75rem; color: var(--text-muted);">
+          Formateur : Imad Maalouf
+        </p>
+      </footer>
+    </main>
+  </div>
+  <!-- Back to Top -->
+  <button class="back-to-top" id="backToTop" onclick="scrollToTop()">^</button>
+  <!-- Scripts -->
+  <script src="js/shared.js"></script>
+  <script>
+    // Scroll animations
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, observerOptions);
+    document.querySelectorAll('.scroll-animate').forEach(el => {
+      observer.observe(el);
+    });
+    // Active nav item on scroll
+    const sections = document.querySelectorAll('.section');
+    const navItems = document.querySelectorAll('.nav-item');
+    window.addEventListener('scroll', () => {
+      let current = '';
+      sections.forEach(section => {
+        const sectionTop = section.offsetTop;
+        const sectionHeight = section.clientHeight;
+        if (scrollY >= sectionTop - 200) {
+          current = section.getAttribute('id');
+        }
+      });
+      navItems.forEach(item => {
+        item.classList.remove('active');
+        if (item.getAttribute('href') === `#${current}`) {
+          item.classList.add('active');
+        }
+      });
+      // Update progress
+      const progress = Math.min(100, Math.round((scrollY / (document.body.scrollHeight - window.innerHeight)) * 100));
+      document.getElementById('progress-fill').style.width = `${progress}%`;
+      document.getElementById('progress-text').textContent = `${progress}%`;
+      // Back to top button
+      const backToTop = document.getElementById('backToTop');
+      if (scrollY > 500) {
+        backToTop.classList.add('visible');
+      } else {
+        backToTop.classList.remove('visible');
+      }
+    });
+    function scrollToTop() {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  </script>
+</body>
+</html>

cours.pdf ADDED Viewed

Binary file (14.2 kB). View file

css/shared.css ADDED Viewed

	@@ -0,0 +1,944 @@

+/* ═══════════════════════════════════════════════════════════════════════════
+   ML PLATFORM — SHARED STYLES
+   Formation Machine Learning Professionnelle
+   Design: Dark Modern avec animations CSS
+   ═══════════════════════════════════════════════════════════════════════════ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+/* ═══════════════════════════════════════════════════════════════════════════
+   VARIABLES CSS
+   ═══════════════════════════════════════════════════════════════════════════ */
+:root {
+  /* Couleurs principales */
+  --primary: #6366f1;
+  --primary-light: #818cf8;
+  --primary-dark: #4f46e5;
+  --secondary: #06b6d4;
+  --accent: #f59e0b;
+  --success: #10b981;
+  --warning: #f97316;
+  --danger: #ef4444;
+  /* Couleurs de fond */
+  --bg-primary: #0f0f1a;
+  --bg-secondary: #1a1a2e;
+  --bg-tertiary: #252542;
+  --bg-card: #16162a;
+  --bg-hover: #1e1e3a;
+  /* Couleurs de texte */
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --text-accent: #818cf8;
+  /* Bordures */
+  --border-color: #2d2d4a;
+  --border-light: #3d3d5c;
+  /* Ombres */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
+  --shadow-glow-strong: 0 0 40px rgba(99, 102, 241, 0.5);
+  /* Rayons */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-base: 0.25s ease;
+  --transition-slow: 0.4s ease;
+  /* Espacements */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+  /* Sidebar */
+  --sidebar-width: 280px;
+  --navbar-height: 64px;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   RESET & BASE
+   ═══════════════════════════════════════════════════════════════════════════ */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   ANIMATIONS KEYFRAMES
+   ═══════════════════════════════════════════════════════════════════════════ */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 15px var(--primary);
+  }
+  50% {
+    box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary);
+  }
+}
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes particle {
+  0% {
+    transform: translateY(100vh) rotate(0deg);
+    opacity: 0;
+  }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% {
+    transform: translateY(-100vh) rotate(720deg);
+    opacity: 0;
+  }
+}
+@keyframes wave {
+  0%, 100% { transform: translateY(0); }
+  25% { transform: translateY(-5px); }
+  75% { transform: translateY(5px); }
+}
+@keyframes progress {
+  from { width: 0; }
+  to { width: var(--progress, 100%); }
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   UTILITAIRES D'ANIMATION
+   ═══════════════════════════════════════════════════════════════════════════ */
+.animate-fade-in { animation: fadeIn 0.6s ease forwards; }
+.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }
+.animate-fade-in-down { animation: fadeInDown 0.5s ease forwards; }
+.animate-fade-in-left { animation: fadeInLeft 0.5s ease forwards; }
+.animate-fade-in-right { animation: fadeInRight 0.5s ease forwards; }
+.animate-scale-in { animation: scaleIn 0.5s ease forwards; }
+.animate-float { animation: float 3s ease-in-out infinite; }
+.animate-pulse { animation: pulse 2s ease-in-out infinite; }
+.animate-glow { animation: glow 2s ease-in-out infinite; }
+.animate-bounce { animation: bounce 1s ease-in-out infinite; }
+.animate-rotate { animation: rotate 2s linear infinite; }
+/* Delays */
+.delay-100 { animation-delay: 0.1s; }
+.delay-200 { animation-delay: 0.2s; }
+.delay-300 { animation-delay: 0.3s; }
+.delay-400 { animation-delay: 0.4s; }
+.delay-500 { animation-delay: 0.5s; }
+.delay-600 { animation-delay: 0.6s; }
+.delay-700 { animation-delay: 0.7s; }
+.delay-800 { animation-delay: 0.8s; }
+/* Initial states for scroll animations */
+.scroll-animate {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.scroll-animate.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   NAVIGATION
+   ═══════════════════════════════════════════════════════════════════════════ */
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--navbar-height);
+  background: rgba(15, 15, 26, 0.85);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border-color);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-xl);
+  animation: fadeInDown 0.5s ease;
+}
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  text-decoration: none;
+  color: var(--text-primary);
+  font-weight: 700;
+  font-size: 1.1rem;
+  transition: var(--transition-base);
+}
+.navbar-brand:hover {
+  color: var(--primary-light);
+}
+.brand-logo {
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  animation: float 3s ease-in-out infinite;
+}
+.navbar-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-base);
+  position: relative;
+  overflow: hidden;
+}
+.nav-link::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--primary), var(--secondary));
+  transition: all var(--transition-base);
+  transform: translateX(-50%);
+}
+.nav-link:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+.nav-link:hover::before {
+  width: 60%;
+}
+.nav-link.active {
+  color: var(--primary-light);
+  background: rgba(99, 102, 241, 0.1);
+}
+.nav-link.active::before {
+  width: 60%;
+}
+.nav-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-xs) var(--space-md);
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--success);
+  font-family: 'JetBrains Mono', monospace;
+}
+.nav-badge .dot {
+  width: 6px;
+  height: 6px;
+  background: var(--success);
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   BOUTONS
+   ═══════════════════════════════════════════════════════════════════════════ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-lg);
+  font-family: 'Inter', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  position: relative;
+  overflow: hidden;
+}
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.4s ease, height 0.4s ease;
+}
+.btn:hover::before {
+  width: 200%;
+  height: 200%;
+}
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: white;
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+}
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
+}
+.btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+.btn-secondary:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-light);
+  transform: translateY(-2px);
+}
+.btn-outline {
+  background: transparent;
+  color: var(--primary-light);
+  border: 1px solid var(--primary);
+}
+.btn-outline:hover {
+  background: rgba(99, 102, 241, 0.1);
+  transform: translateY(-2px);
+}
+.btn-success {
+  background: linear-gradient(135deg, var(--success), #059669);
+  color: white;
+  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
+}
+.btn-success:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);
+}
+.btn-lg {
+  padding: var(--space-md) var(--space-xl);
+  font-size: 1rem;
+}
+.btn-sm {
+  padding: var(--space-xs) var(--space-md);
+  font-size: 0.8rem;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   BADGES
+   ═══════════════════════════════════════════════════════════════════════════ */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-sm);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-radius: var(--radius-sm);
+  font-family: 'JetBrains Mono', monospace;
+}
+.badge-primary {
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--primary-light);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+.badge-secondary {
+  background: rgba(6, 182, 212, 0.15);
+  color: var(--secondary);
+  border: 1px solid rgba(6, 182, 212, 0.3);
+}
+.badge-success {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--success);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+.badge-warning {
+  background: rgba(249, 115, 22, 0.15);
+  color: var(--warning);
+  border: 1px solid rgba(249, 115, 22, 0.3);
+}
+.badge-accent {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--accent);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+/* ════════════════════════════════════════════��══════════════════════════════
+   CARDS
+   ═══════════════════════════════════════════════════════════════════════════ */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  transition: all var(--transition-base);
+  position: relative;
+  overflow: hidden;
+}
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--primary), var(--secondary));
+  transform: scaleX(0);
+  transition: transform var(--transition-base);
+}
+.card:hover {
+  transform: translateY(-5px);
+  border-color: var(--border-light);
+  box-shadow: var(--shadow-lg), var(--shadow-glow);
+}
+.card:hover::before {
+  transform: scaleX(1);
+}
+.card-icon {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  margin-bottom: var(--space-md);
+  animation: float 3s ease-in-out infinite;
+}
+.card-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: var(--space-sm);
+}
+.card-text {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   CALLOUTS / ALERTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+.callout {
+  display: flex;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  border-radius: var(--radius-md);
+  margin: var(--space-lg) 0;
+  animation: fadeInUp 0.5s ease;
+}
+.callout-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+.callout-content {
+  flex: 1;
+}
+.callout-title {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: var(--space-xs);
+}
+.callout-text {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+.callout-info {
+  background: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+.callout-success {
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+.callout-warning {
+  background: rgba(249, 115, 22, 0.1);
+  border: 1px solid rgba(249, 115, 22, 0.3);
+}
+.callout-tip {
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   CODE BLOCKS
+   ═══════════════════════════════════════════════════════════════════════════ */
+.code-block {
+  background: #0d0d15;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  margin: var(--space-md) 0;
+  animation: fadeInUp 0.5s ease;
+}
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-sm) var(--space-md);
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+.code-dots {
+  display: flex;
+  gap: 6px;
+}
+.code-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.code-dot.red { background: #ff5f56; }
+.code-dot.yellow { background: #ffbd2e; }
+.code-dot.green { background: #27c93f; }
+.code-lang {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.code-block pre {
+  padding: var(--space-md);
+  overflow-x: auto;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.85rem;
+  line-height: 1.7;
+  color: #cdd6f4;
+  margin: 0;
+}
+/* Syntax highlighting colors */
+.code-keyword { color: #cba6f7; }
+.code-function { color: #89b4fa; }
+.code-string { color: #a6e3a1; }
+.code-comment { color: #6c7086; font-style: italic; }
+.code-number { color: #fab387; }
+.code-class { color: #f38ba8; }
+/* ═══════════════════════════════════════════════════════════════════════════
+   TABLES
+   ════════════════════════════════���══════════════════════════════════════════ */
+.table-container {
+  overflow-x: auto;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  margin: var(--space-lg) 0;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+th {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: var(--space-md);
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+td {
+  padding: var(--space-md);
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+tr:hover td {
+  background: var(--bg-hover);
+}
+tr:last-child td {
+  border-bottom: none;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   FORMS
+   ═══════════════════════════════════════════════════════════════════════════ */
+.form-group {
+  margin-bottom: var(--space-lg);
+}
+.form-label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: var(--space-sm);
+  font-family: 'JetBrains Mono', monospace;
+}
+.form-input,
+.form-select,
+.form-textarea {
+  width: 100%;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: 'Inter', sans-serif;
+  font-size: 0.95rem;
+  padding: var(--space-sm) var(--space-md);
+  transition: all var(--transition-base);
+}
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--text-muted);
+}
+.form-textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   FOOTER
+   ═══════════════════════════════════════════════════════════════════════════ */
+.footer {
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  padding: var(--space-2xl) var(--space-xl);
+  text-align: center;
+  margin-top: auto;
+}
+.footer-text {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-family: 'JetBrains Mono', monospace;
+}
+.footer-brand {
+  color: var(--primary-light);
+  font-weight: 600;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   PARTICLES BACKGROUND (CSS only)
+   ═══════════════════════════════════════════════════════════════════════════ */
+.particles-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 0;
+}
+.particle {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: var(--primary);
+  border-radius: 50%;
+  opacity: 0.3;
+  animation: particle 15s linear infinite;
+}
+.particle:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; }
+.particle:nth-child(2) { left: 20%; animation-duration: 18s; animation-delay: 2s; background: var(--secondary); }
+.particle:nth-child(3) { left: 30%; animation-duration: 14s; animation-delay: 4s; }
+.particle:nth-child(4) { left: 40%; animation-duration: 20s; animation-delay: 1s; background: var(--accent); }
+.particle:nth-child(5) { left: 50%; animation-duration: 16s; animation-delay: 3s; }
+.particle:nth-child(6) { left: 60%; animation-duration: 13s; animation-delay: 5s; background: var(--success); }
+.particle:nth-child(7) { left: 70%; animation-duration: 19s; animation-delay: 2s; }
+.particle:nth-child(8) { left: 80%; animation-duration: 15s; animation-delay: 4s; background: var(--secondary); }
+.particle:nth-child(9) { left: 90%; animation-duration: 17s; animation-delay: 1s; }
+/* ═══════════════════════════════════════════════════════════════════════════
+   GRADIENT TEXT
+   ═══════════════════════════════════════════════════════════════════════════ */
+.gradient-text {
+  background: linear-gradient(135deg, var(--primary-light), var(--secondary), var(--accent));
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradientShift 4s ease infinite;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   PAGE WRAPPER
+   ═══════════════════════════════════════════════════════════════════════════ */
+.page-wrapper {
+  padding-top: var(--navbar-height);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   RESPONSIVE
+   ═══════════════════════════════════════════════════════════════════════════ */
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0 var(--space-md);
+  }
+  .nav-link span:not(.nav-icon) {
+    display: none;
+  }
+  .navbar-brand span {
+    display: none;
+  }
+  .nav-badge {
+    display: none;
+  }
+  :root {
+    --sidebar-width: 0;
+  }
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   SCROLLBAR STYLING
+   ═══════════════════════════════════════════════════════════════════════════ */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-light);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   SELECTION
+   ═══════════════════════════════════════════════════════════════════════════ */
+::selection {
+  background: rgba(99, 102, 241, 0.3);
+  color: var(--text-primary);
+}

feedback.html ADDED Viewed

	@@ -0,0 +1,1149 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Questions & Feedback — ML Academy</title>
+  <link rel="stylesheet" href="css/shared.css">
+  <style>
+    /* PAGE HERO */
+    .feedback-hero {
+      background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
+      border-bottom: 1px solid var(--border-color);
+      padding: var(--space-3xl) var(--space-xl);
+      text-align: center;
+    }
+    .feedback-hero-label {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--secondary);
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      margin-bottom: var(--space-md);
+    }
+    .feedback-hero-title {
+      font-size: clamp(2rem, 5vw, 3rem);
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+    }
+    .feedback-hero-subtitle {
+      font-size: 1.1rem;
+      color: var(--text-secondary);
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    /* FEEDBACK CONTAINER */
+    .feedback-container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: var(--space-2xl) var(--space-xl);
+    }
+    /* FORM PROGRESS */
+    .form-progress {
+      display: flex;
+      gap: var(--space-sm);
+      margin-bottom: var(--space-xl);
+    }
+    .progress-step {
+      flex: 1;
+      height: 4px;
+      background: var(--bg-tertiary);
+      border-radius: 2px;
+      transition: background var(--transition-base);
+    }
+    .progress-step.active {
+      background: linear-gradient(90deg, var(--primary), var(--secondary));
+    }
+    /* FORM CARDS */
+    .form-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      margin-bottom: var(--space-lg);
+      transition: all var(--transition-base);
+    }
+    .form-card:hover {
+      border-color: var(--border-light);
+    }
+    .form-card-header {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      padding: var(--space-lg) var(--space-xl);
+      background: var(--bg-tertiary);
+      border-bottom: 1px solid var(--border-color);
+    }
+    .form-card-icon {
+      width: 36px;
+      height: 36px;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      font-weight: 700;
+      color: white;
+    }
+    .form-card-title {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .form-card-body {
+      padding: var(--space-xl);
+    }
+    /* FORM ELEMENTS */
+    .form-row {
+      margin-bottom: var(--space-lg);
+    }
+    .form-row:last-child {
+      margin-bottom: 0;
+    }
+    .form-label {
+      display: block;
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+    }
+    .form-label .required {
+      color: var(--danger);
+      margin-left: var(--space-xs);
+    }
+    .form-label .hint {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      font-weight: 400;
+      margin-left: var(--space-sm);
+    }
+    /* STAR RATING */
+    .star-rating {
+      display: flex;
+      gap: var(--space-sm);
+    }
+    .star {
+      font-size: 2rem;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      filter: grayscale(1);
+      opacity: 0.4;
+    }
+    .star:hover,
+    .star.active {
+      filter: grayscale(0);
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    .star-rating-text {
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      margin-left: var(--space-md);
+      align-self: center;
+    }
+    /* DIFFICULTY BUTTONS */
+    .difficulty-buttons {
+      display: flex;
+      gap: var(--space-sm);
+      flex-wrap: wrap;
+    }
+    .difficulty-btn {
+      padding: var(--space-sm) var(--space-md);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+      cursor: pointer;
+      transition: all var(--transition-base);
+    }
+    .difficulty-btn:hover {
+      border-color: var(--primary);
+      color: var(--text-primary);
+    }
+    .difficulty-btn.selected {
+      background: rgba(99, 102, 241, 0.2);
+      border-color: var(--primary);
+      color: var(--primary-light);
+    }
+    /* RADIO & CHECKBOX GROUPS */
+    .radio-group,
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-sm);
+    }
+    .radio-option,
+    .checkbox-option {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-md);
+      padding: var(--space-md);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: all var(--transition-base);
+    }
+    .radio-option:hover,
+    .checkbox-option:hover {
+      border-color: var(--primary);
+      background: var(--bg-hover);
+    }
+    .radio-option input,
+    .checkbox-option input {
+      margin-top: 2px;
+      accent-color: var(--primary);
+      width: 18px;
+    }
+    .radio-label,
+    .checkbox-label {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+    }
+    /* SUBMIT BUTTON */
+    .submit-btn {
+      width: 100%;
+      padding: var(--space-md);
+      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+      color: white;
+      border: none;
+      border-radius: var(--radius-md);
+      font-family: 'Inter', sans-serif;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all var(--transition-base);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-sm);
+    }
+    .submit-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-glow);
+    }
+    .submit-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none;
+    }
+    /* SUCCESS MESSAGE */
+    .success-message {
+      display: none;
+      background: rgba(16, 185, 129, 0.1);
+      border: 1px solid rgba(16, 185, 129, 0.3);
+      border-radius: var(--radius-lg);
+      padding: var(--space-3xl);
+      text-align: center;
+      animation: scaleIn 0.5s ease;
+    }
+    .success-message.show {
+      display: block;
+    }
+    .success-icon {
+      width: 60px;
+      height: 60px;
+      background: linear-gradient(135deg, var(--success), #059669);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: white;
+      margin: 0 auto var(--space-md);
+      animation: bounce 1s ease infinite;
+    }
+    .success-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--success);
+      margin-bottom: var(--space-sm);
+    }
+    .success-text {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-xl);
+    }
+    /* DATA EXPORT SECTION */
+    .export-section {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-lg);
+      padding: var(--space-xl);
+      margin-top: var(--space-xl);
+    }
+    .export-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+    }
+    .export-buttons {
+      display: flex;
+      gap: var(--space-md);
+      flex-wrap: wrap;
+    }
+    .export-btn {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-sm) var(--space-md);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      color: var(--text-secondary);
+      font-size: 0.85rem;
+      cursor: pointer;
+      transition: all var(--transition-base);
+      text-decoration: none;
+    }
+    .export-btn:hover {
+      border-color: var(--primary);
+      color: var(--text-primary);
+    }
+    /* FAQ SECTION */
+    .faq-section {
+      margin-top: var(--space-3xl);
+    }
+    .faq-header {
+      text-align: center;
+      margin-bottom: var(--space-xl);
+    }
+    .faq-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+    }
+    .faq-subtitle {
+      font-size: 0.95rem;
+      color: var(--text-secondary);
+    }
+    .faq-item {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      margin-bottom: var(--space-md);
+      overflow: hidden;
+      transition: all var(--transition-base);
+    }
+    .faq-item:hover {
+      border-color: var(--border-light);
+    }
+    .faq-question {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--space-lg) var(--space-xl);
+      cursor: pointer;
+      background: var(--bg-tertiary);
+      transition: background var(--transition-base);
+    }
+    .faq-question:hover {
+      background: var(--bg-hover);
+    }
+    .faq-question-text {
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: var(--text-primary);
+    }
+    .faq-arrow {
+      color: var(--primary);
+      transition: transform var(--transition-base);
+    }
+    .faq-item.open .faq-arrow {
+      transform: rotate(180deg);
+    }
+    .faq-answer {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height var(--transition-slow);
+    }
+    .faq-item.open .faq-answer {
+      max-height: 500px;
+    }
+    .faq-answer-content {
+      padding: var(--space-lg) var(--space-xl);
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      line-height: 1.7;
+      border-top: 1px solid var(--border-color);
+    }
+    .faq-answer-content code {
+      background: rgba(99, 102, 241, 0.1);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.8rem;
+      color: var(--primary-light);
+    }
+    /* CONTACT INFO */
+    .contact-info {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: var(--space-lg);
+      margin-top: var(--space-2xl);
+      padding-top: var(--space-2xl);
+      border-top: 1px solid var(--border-color);
+    }
+    .contact-item {
+      text-align: center;
+      padding: var(--space-lg);
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      transition: all var(--transition-base);
+    }
+    .contact-item:hover {
+      border-color: var(--primary);
+      transform: translateY(-3px);
+    }
+    .contact-icon {
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      font-weight: 700;
+      color: white;
+      margin: 0 auto var(--space-sm);
+    }
+    .contact-label {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-xs);
+    }
+    .contact-value {
+      font-size: 0.8rem;
+      color: var(--text-muted);
+    }
+    .contact-link {
+      color: var(--primary-light);
+      text-decoration: none;
+    }
+    .contact-link:hover {
+      text-decoration: underline;
+    }
+    /* AUTHOR FOOTER */
+    .author-footer {
+      background: var(--bg-secondary);
+      border-top: 1px solid var(--border-color);
+      padding: var(--space-xl);
+      text-align: center;
+    }
+    .author-info {
+      display: flex;
+      justify-content: center;
+      gap: var(--space-xl);
+      flex-wrap: wrap;
+      margin-bottom: var(--space-md);
+    }
+    .author-link {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: color var(--transition-base);
+    }
+    .author-link:hover {
+      color: var(--primary-light);
+    }
+    .author-link svg {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+  </style>
+</head>
+<body>
+  <!-- Particles Background -->
+  <div class="particles-container">
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+  </div>
+  <!-- Navigation -->
+  <nav class="navbar">
+    <a href="index.html" class="navbar-brand">
+      <div class="brand-logo">ML</div>
+      <span>ML Academy</span>
+    </a>
+    <div class="navbar-nav">
+      <a href="index.html" class="nav-link">
+        <span class="nav-icon">[H]</span>
+        <span>Accueil</span>
+      </a>
+      <a href="cours.html" class="nav-link">
+        <span class="nav-icon">[C]</span>
+        <span>Cours</span>
+      </a>
+      <a href="tp.html" class="nav-link">
+        <span class="nav-icon">[T]</span>
+        <span>TPs</span>
+      </a>
+      <a href="feedback.html" class="nav-link active">
+        <span class="nav-icon">[F]</span>
+        <span>Contact</span>
+      </a>
+    </div>
+    <div class="nav-badge">
+      <div class="dot"></div>
+      <span>Google Colab Ready</span>
+    </div>
+  </nav>
+  <!-- Page Wrapper -->
+  <div class="page-wrapper">
+    <!-- Hero -->
+    <section class="feedback-hero">
+      <div class="feedback-hero-label">Retours & Questions</div>
+      <h1 class="feedback-hero-title">Questions & Feedback</h1>
+      <p class="feedback-hero-subtitle">
+        Un point pas clair ? Une suggestion d'amelioration ?
+        Nous sommes la pour vous aider et ameliorer la formation.
+      </p>
+    </section>
+    <!-- Feedback Container -->
+    <div class="feedback-container">
+      <!-- Success Message -->
+      <div class="success-message" id="successMessage">
+        <div class="success-icon">OK</div>
+        <h2 class="success-title">Merci pour votre retour !</h2>
+        <p class="success-text">
+          Vos reponses ont ete enregistrees. Nous les analyserons et vous repondrons
+          dans les plus brefs delais.
+        </p>
+        <a href="index.html" class="btn btn-outline">Retour a l'accueil</a>
+      </div>
+      <!-- Form -->
+      <form id="feedbackForm">
+        <!-- Progress -->
+        <div class="form-progress">
+          <div class="progress-step active"></div>
+          <div class="progress-step"></div>
+          <div class="progress-step"></div>
+        </div>
+        <!-- Card 1: Identification -->
+        <div class="form-card scroll-animate">
+          <div class="form-card-header">
+            <div class="form-card-icon">I</div>
+            <h2 class="form-card-title">Identification <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 400;">(optionnel)</span></h2>
+          </div>
+          <div class="form-card-body">
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);">
+              <div class="form-row">
+                <label class="form-label">Prenom / Nom</label>
+                <input type="text" class="form-input" placeholder="Ex: Jean Dupont" id="name">
+              </div>
+              <div class="form-row">
+                <label class="form-label">Email</label>
+                <input type="email" class="form-input" placeholder="jean@example.com" id="email">
+              </div>
+            </div>
+            <div class="form-row" style="margin-bottom: 0;">
+              <label class="form-label">Sujet de projet</label>
+              <select class="form-select" id="project">
+                <option value="">— Selectionner —</option>
+                <option value="classification">Classification</option>
+                <option value="regression">Regression</option>
+                <option value="nlp">NLP / Texte</option>
+                <option value="computer-vision">Computer Vision</option>
+                <option value="time-series">Series Temporelles</option>
+                <option value="other">Autre</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <!-- Card 2: Evaluation -->
+        <div class="form-card scroll-animate">
+          <div class="form-card-header">
+            <div class="form-card-icon">E</div>
+            <h2 class="form-card-title">Evaluation de la formation</h2>
+          </div>
+          <div class="form-card-body">
+            <div class="form-row">
+              <label class="form-label">Note globale <span class="required">*</span></label>
+              <div style="display: flex; align-items: center;">
+                <div class="star-rating" id="starRating">
+                  <span class="star" data-value="1">*</span>
+                  <span class="star" data-value="2">*</span>
+                  <span class="star" data-value="3">*</span>
+                  <span class="star" data-value="4">*</span>
+                  <span class="star" data-value="5">*</span>
+                </div>
+                <span class="star-rating-text" id="ratingText">Cliquez pour noter</span>
+              </div>
+              <input type="hidden" id="ratingValue" value="0">
+            </div>
+            <div class="form-row">
+              <label class="form-label">Niveau de difficulte <span class="required">*</span></label>
+              <div class="difficulty-buttons" id="difficultyButtons">
+                <button type="button" class="difficulty-btn" data-value="tres-facile">Tres facile</button>
+                <button type="button" class="difficulty-btn" data-value="facile">Facile</button>
+                <button type="button" class="difficulty-btn" data-value="adapte">Adapte</button>
+                <button type="button" class="difficulty-btn" data-value="difficile">Difficile</button>
+                <button type="button" class="difficulty-btn" data-value="tres-difficile">Trop difficile</button>
+              </div>
+              <input type="hidden" id="difficultyValue" value="">
+            </div>
+            <div class="form-row" style="margin-bottom: 0;">
+              <label class="form-label">Rythme de la formation</label>
+              <div class="radio-group">
+                <label class="radio-option">
+                  <input type="radio" name="rythme" value="trop-lent">
+                  <span class="radio-label">Trop lent — on aurait pu aller plus vite</span>
+                </label>
+                <label class="radio-option">
+                  <input type="radio" name="rythme" value="bien" checked>
+                  <span class="radio-label">Bien rythme — equilibre parfait</span>
+                </label>
+                <label class="radio-option">
+                  <input type="radio" name="rythme" value="trop-rapide">
+                  <span class="radio-label">Trop rapide — difficile a suivre</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Card 3: Content -->
+        <div class="form-card scroll-animate">
+          <div class="form-card-header">
+            <div class="form-card-icon">C</div>
+            <h2 class="form-card-title">Contenu de la formation</h2>
+          </div>
+          <div class="form-card-body">
+            <div class="form-row">
+              <label class="form-label">Parties les plus utiles <span class="hint">(plusieurs choix possibles)</span></label>
+              <div class="checkbox-group">
+                <label class="checkbox-option">
+                  <input type="checkbox" name="utile" value="preprocessing">
+                  <span class="checkbox-label">Pretraitement des donnees</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="utile" value="regression">
+                  <span class="checkbox-label">Regression Lineaire & Logistique</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="utile" value="randomforest">
+                  <span class="checkbox-label">Random Forest & XGBoost</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="utile" value="neuralnets">
+                  <span class="checkbox-label">Reseaux de Neurones (Keras)</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="utile" value="lstm">
+                  <span class="checkbox-label">LSTM & Series Temporelles</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="utile" value="cnn">
+                  <span class="checkbox-label">CNN & Computer Vision</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="utile" value="nlp">
+                  <span class="checkbox-label">NLP & Transformers</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="utile" value="tps">
+                  <span class="checkbox-label">Travaux Pratiques (TPs)</span>
+                </label>
+              </div>
+            </div>
+            <div class="form-row" style="margin-bottom: 0;">
+              <label class="form-label">Points difficiles a comprendre</label>
+              <div class="checkbox-group">
+                <label class="checkbox-option">
+                  <input type="checkbox" name="difficile" value="overfitting">
+                  <span class="checkbox-label">Overfitting / Underfitting</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="difficile" value="normalisation">
+                  <span class="checkbox-label">Normalisation et Data Leakage</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="difficile" value="hyperparameters">
+                  <span class="checkbox-label">Choix des hyperparametres</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="difficile" value="lstm-gates">
+                  <span class="checkbox-label">Les portes du LSTM</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="difficile" value="backprop">
+                  <span class="checkbox-label">Backpropagation</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="difficile" value="metrics">
+                  <span class="checkbox-label">Choix des metriques d'evaluation</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Card 4: Questions -->
+        <div class="form-card scroll-animate">
+          <div class="form-card-header">
+            <div class="form-card-icon">Q</div>
+            <h2 class="form-card-title">Vos questions</h2>
+          </div>
+          <div class="form-card-body">
+            <div class="form-row">
+              <label class="form-label">Question principale <span class="required">*</span></label>
+              <textarea class="form-textarea" placeholder="Decrivez votre question ou le point qui n'est pas clair..." id="mainQuestion" required></textarea>
+            </div>
+            <div class="form-row">
+              <label class="form-label">Question sur le code / les TPs <span class="hint">(optionnel)</span></label>
+              <textarea class="form-textarea" placeholder="Si vous avez une question specifique sur un notebook ou du code..." id="codeQuestion"></textarea>
+            </div>
+            <div class="form-row" style="margin-bottom: 0;">
+              <label class="form-label">Lien avec votre projet <span class="hint">(optionnel)</span></label>
+              <textarea class="form-textarea" placeholder="Comment cette formation peut-elle vous aider dans votre projet personnel ?" id="projectLink"></textarea>
+            </div>
+          </div>
+        </div>
+        <!-- Card 5: Suggestions -->
+        <div class="form-card scroll-animate">
+          <div class="form-card-header">
+            <div class="form-card-icon">S</div>
+            <h2 class="form-card-title">Suggestions d'amelioration</h2>
+          </div>
+          <div class="form-card-body">
+            <div class="form-row">
+              <label class="form-label">Ce que vous auriez aime voir de plus</label>
+              <div class="checkbox-group">
+                <label class="checkbox-option">
+                  <input type="checkbox" name="suggestion" value="plus-tp">
+                  <span class="checkbox-label">Plus de temps sur les TPs</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="suggestion" value="plus-theorie">
+                  <span class="checkbox-label">Plus de theorie et d'equations</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="suggestion" value="plus-datasets">
+                  <span class="checkbox-label">Plus de datasets differents</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="suggestion" value="deployment">
+                  <span class="checkbox-label">Deploiement de modeles (API, Streamlit)</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="suggestion" value="mLOps">
+                  <span class="checkbox-label">MLOps et gestion de modeles</span>
+                </label>
+                <label class="checkbox-option">
+                  <input type="checkbox" name="suggestion" value="viz">
+                  <span class="checkbox-label">Plus de visualisations interactives</span>
+                </label>
+              </div>
+            </div>
+            <div class="form-row" style="margin-bottom: 0;">
+              <label class="form-label">Commentaire libre</label>
+              <textarea class="form-textarea" placeholder="Toute suggestion ou remarque est la bienvenue..." id="freeComment"></textarea>
+            </div>
+          </div>
+        </div>
+        <!-- Submit -->
+        <button type="submit" class="submit-btn" id="submitBtn">
+          Envoyer mon feedback
+        </button>
+        <p style="text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-md);">
+          Vos reponses nous aident a ameliorer la formation pour les promotions futures.
+        </p>
+      </form>
+      <!-- Data Export Section -->
+      <div class="export-section scroll-animate" id="exportSection" style="display: none;">
+        <h3 class="export-title">Exporter les donnees</h3>
+        <p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--space-md);">
+          Telechargez les feedbacks collectes pour analyse.
+        </p>
+        <div class="export-buttons">
+          <button class="export-btn" onclick="feedbackStorage.downloadFeedbacks()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+            </svg>
+            JSON
+          </button>
+          <button class="export-btn" onclick="feedbackStorage.exportToCSV()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+            </svg>
+            CSV (Excel)
+          </button>
+          <button class="export-btn" onclick="showFeedbackStats()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
+            </svg>
+            Statistiques
+          </button>
+        </div>
+      </div>
+      <!-- FAQ Section -->
+      <section class="faq-section">
+        <div class="faq-header scroll-animate">
+          <h2 class="faq-title">Questions frequentes</h2>
+          <p class="faq-subtitle">Consultez d'abord ces reponses avant de soumettre votre question.</p>
+        </div>
+        <div class="faq-item scroll-animate">
+          <div class="faq-question" onclick="toggleFaq(this)">
+            <span class="faq-question-text">Pourquoi normaliser APRES le split et pas avant ?</span>
+            <span class="faq-arrow">v</span>
+          </div>
+          <div class="faq-answer">
+            <div class="faq-answer-content">
+              Si vous normalisez avant le split, vous calculez le min/max sur l'ensemble des donnees (train + test).
+              Votre modele "voit" donc indirectement les donnees de test pendant l'entrainement — c'est le
+              <strong>data leakage</strong>. La regle : <strong>fit sur train seulement, transform sur train ET test</strong>.
+            </div>
+          </div>
+        </div>
+        <div class="faq-item scroll-animate">
+          <div class="faq-question" onclick="toggleFaq(this)">
+            <span class="faq-question-text">Quelle est la difference entre MAE et RMSE ?</span>
+            <span class="faq-arrow">v</span>
+          </div>
+          <div class="faq-answer">
+            <div class="faq-answer-content">
+              <strong>MAE</strong> (Mean Absolute Error) = moyenne des erreurs absolues.
+              <strong>RMSE</strong> (Root Mean Squared Error) = racine de la moyenne des erreurs au carre.
+              La difference cle : RMSE <strong>penalise davantage les grandes erreurs</strong> car on eleve au carre.
+              En ingenierie, RMSE >= MAE toujours.
+            </div>
+          </div>
+        </div>
+        <div class="faq-item scroll-animate">
+          <div class="faq-question" onclick="toggleFaq(this)">
+            <span class="faq-question-text">Comment savoir si mon modele fait de l'overfitting ?</span>
+            <span class="faq-arrow">v</span>
+          </div>
+          <div class="faq-answer">
+            <div class="faq-answer-content">
+              Comparez les metriques sur <strong>train</strong> ET <strong>test</strong>.
+              <strong>Overfitting</strong> = R2 train tres eleve (0.99) mais R2 test beaucoup plus bas (0.65).
+              <strong>Bonne generalisation</strong> = R2 train ≈ R2 test (ex: 0.96 vs 0.94).
+              Solution : Dropout, Early Stopping, regularisation L2.
+            </div>
+          </div>
+        </div>
+        <div class="faq-item scroll-animate">
+          <div class="faq-question" onclick="toggleFaq(this)">
+            <span class="faq-question-text">Quand utiliser Random Forest vs Neural Networks ?</span>
+            <span class="faq-arrow">v</span>
+          </div>
+          <div class="faq-answer">
+            <div class="faq-answer-content">
+              <strong>Random Forest</strong> : donnees tabulaires, besoin d'interpretabilite,
+              peu de temps de tuning. <strong>Neural Networks</strong> : donnees complexes (images, texte),
+              beaucoup de donnees disponibles, ressources computationnelles importantes.
+            </div>
+          </div>
+        </div>
+        <div class="faq-item scroll-animate">
+          <div class="faq-question" onclick="toggleFaq(this)">
+            <span class="faq-question-text">Comment adapter le code a mes propres donnees ?</span>
+            <span class="faq-arrow">v</span>
+          </div>
+          <div class="faq-answer">
+            <div class="faq-answer-content">
+              Remplacez <code>df = pd.read_csv("vos_donnees.csv")</code>. Verifiez avec
+              <code>df.head()</code> et <code>df.describe()</code>. Adaptez la liste des features
+              et la variable cible. Ajoutez <code>df.dropna()</code> pour supprimer les NaN.
+              Le reste du pipeline reste identique !
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Contact Info -->
+      <div class="contact-info">
+        <div class="contact-item scroll-animate">
+          <div class="contact-icon">@</div>
+          <div class="contact-label">Email</div>
+          <div class="contact-value">
+            <a href="mailto:imadmaalouf02@gmail.com" class="contact-link">imadmaalouf02@gmail.com</a>
+          </div>
+        </div>
+        <div class="contact-item scroll-animate">
+          <div class="contact-icon">GH</div>
+          <div class="contact-label">GitHub</div>
+          <div class="contact-value">
+            <a href="https://github.com/imadmaalouf02" target="_blank" class="contact-link">github.com/imadmaalouf02</a>
+          </div>
+        </div>
+        <div class="contact-item scroll-animate">
+          <div class="contact-icon">HF</div>
+          <div class="contact-label">Hugging Face</div>
+          <div class="contact-value">
+            <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" class="contact-link">ML Training Space</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Author Footer -->
+    <footer class="author-footer">
+      <div class="author-info">
+        <a href="mailto:imadmaalouf02@gmail.com" class="author-link">
+          <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
+          imadmaalouf02@gmail.com
+        </a>
+        <a href="https://github.com/imadmaalouf02" target="_blank" class="author-link">
+          <svg viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+          GitHub
+        </a>
+        <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" class="author-link">
+          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+          Hugging Face Space
+        </a>
+      </div>
+    </footer>
+    <!-- Footer -->
+    <footer class="footer">
+      <p class="footer-text">
+        ML Academy — Questions & Feedback —
+        <span class="footer-brand">GE-MCI 4A</span> — 2025/2026
+      </p>
+      <p class="footer-text" style="margin-top: var(--space-sm); font-size: 0.75rem; color: var(--text-muted);">
+        Formateur : Imad Maalouf
+      </p>
+    </footer>
+  </div>
+  <!-- Scripts -->
+  <script src="js/shared.js"></script>
+  <script src="js/feedback-storage.js"></script>
+  <script>
+    // Scroll animations
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, observerOptions);
+    document.querySelectorAll('.scroll-animate').forEach(el => {
+      observer.observe(el);
+    });
+    // Star rating
+    const stars = document.querySelectorAll('.star');
+    const ratingValue = document.getElementById('ratingValue');
+    const ratingText = document.getElementById('ratingText');
+    const ratingLabels = ['', 'Insuffisant', 'Passable', 'Bien', 'Tres bien', 'Excellent !'];
+    stars.forEach(star => {
+      star.addEventListener('click', () => {
+        const value = parseInt(star.dataset.value);
+        ratingValue.value = value;
+        ratingText.textContent = ratingLabels[value];
+        stars.forEach((s, i) => {
+          s.classList.toggle('active', i < value);
+        });
+        // Update progress
+        document.querySelectorAll('.progress-step')[1].classList.add('active');
+      });
+    });
+    // Difficulty buttons
+    const diffButtons = document.querySelectorAll('.difficulty-btn');
+    const difficultyValue = document.getElementById('difficultyValue');
+    diffButtons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        diffButtons.forEach(b => b.classList.remove('selected'));
+        btn.classList.add('selected');
+        difficultyValue.value = btn.dataset.value;
+      });
+    });
+    // FAQ toggle
+    function toggleFaq(element) {
+      const faqItem = element.parentElement;
+      faqItem.classList.toggle('open');
+    }
+    // Form submission
+    const form = document.getElementById('feedbackForm');
+    const successMessage = document.getElementById('successMessage');
+    const submitBtn = document.getElementById('submitBtn');
+    const exportSection = document.getElementById('exportSection');
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      // Validation
+      const rating = ratingValue.value;
+      const difficulty = difficultyValue.value;
+      const mainQuestion = document.getElementById('mainQuestion').value.trim();
+      if (rating === '0') {
+        alert('Veuillez donner une note a la formation.');
+        return;
+      }
+      if (!difficulty) {
+        alert('Veuillez indiquer le niveau de difficulte percu.');
+        return;
+      }
+      if (!mainQuestion) {
+        alert('Veuillez poser au moins une question principale.');
+        return;
+      }
+      // Collect data
+      const formData = {
+        name: document.getElementById('name').value,
+        email: document.getElementById('email').value,
+        project: document.getElementById('project').value,
+        rating: rating,
+        difficulty: difficulty,
+        rythme: document.querySelector('input[name="rythme"]:checked')?.value,
+        utiles: [...document.querySelectorAll('input[name="utile"]:checked')].map(cb => cb.value),
+        difficiles: [...document.querySelectorAll('input[name="difficile"]:checked')].map(cb => cb.value),
+        mainQuestion: mainQuestion,
+        codeQuestion: document.getElementById('codeQuestion').value,
+        projectLink: document.getElementById('projectLink').value,
+        suggestions: [...document.querySelectorAll('input[name="suggestion"]:checked')].map(cb => cb.value),
+        freeComment: document.getElementById('freeComment').value,
+        timestamp: new Date().toISOString()
+      };
+      // Submit to storage
+      submitFeedback(formData);
+      // Show success
+      form.style.display = 'none';
+      successMessage.classList.add('show');
+      exportSection.style.display = 'block';
+      document.querySelectorAll('.progress-step')[2].classList.add('active');
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    // Update progress on scroll
+    window.addEventListener('scroll', () => {
+      const mainQuestion = document.getElementById('mainQuestion')?.value.trim();
+      if (mainQuestion) {
+        document.querySelectorAll('.progress-step')[2].classList.add('active');
+      }
+    });
+  </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,1010 @@
-<!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">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ML Academy — Plateforme de Formation Machine Learning</title>
+  <link rel="stylesheet" href="css/shared.css">
+  <style>
+    /* HERO SECTION */
+    .hero {
+      min-height: calc(100vh - var(--navbar-height));
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      padding: var(--space-3xl) var(--space-xl);
+      position: relative;
+      overflow: hidden;
+    }
+    .hero-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background:
+        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
+        radial-gradient(ellipse at 50% 50%, rgba(245, 158, 11, 0.05) 0%, transparent 70%);
+      animation: pulse 8s ease-in-out infinite;
+    }
+    .hero-eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-xs) var(--space-md);
+      background: rgba(99, 102, 241, 0.1);
+      border: 1px solid rgba(99, 102, 241, 0.3);
+      border-radius: 20px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--primary-light);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: var(--space-lg);
+      animation: fadeInDown 0.6s ease 0.2s both;
+    }
+    .hero-eyebrow .pulse {
+      width: 6px;
+      height: 6px;
+      background: var(--success);
+      border-radius: 50%;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    .hero-title {
+      font-size: clamp(2.5rem, 6vw, 4.5rem);
+      font-weight: 800;
+      line-height: 1.1;
+      margin-bottom: var(--space-md);
+      animation: fadeInUp 0.6s ease 0.3s both;
+    }
+    .hero-subtitle {
+      font-size: clamp(1rem, 2vw, 1.25rem);
+      color: var(--text-secondary);
+      max-width: 600px;
+      margin-bottom: var(--space-xl);
+      line-height: 1.7;
+      animation: fadeInUp 0.6s ease 0.4s both;
+    }
+    .hero-cta {
+      display: flex;
+      gap: var(--space-md);
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-bottom: var(--space-2xl);
+      animation: fadeInUp 0.6s ease 0.5s both;
+    }
+    .hero-stats {
+      display: flex;
+      gap: var(--space-2xl);
+      flex-wrap: wrap;
+      justify-content: center;
+      padding-top: var(--space-xl);
+      border-top: 1px solid var(--border-color);
+      animation: fadeInUp 0.6s ease 0.6s both;
+    }
+    .hero-stat {
+      text-align: center;
+    }
+    .hero-stat-value {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 2.5rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      line-height: 1;
+    }
+    .hero-stat-value span {
+      font-size: 1rem;
+      color: var(--primary-light);
+    }
+    .hero-stat-label {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-top: var(--space-xs);
+    }
+    /* FEATURES SECTION */
+    .features {
+      padding: var(--space-3xl) var(--space-xl);
+      background: var(--bg-secondary);
+      border-top: 1px solid var(--border-color);
+    }
+    .section-header {
+      text-align: center;
+      margin-bottom: var(--space-2xl);
+    }
+    .section-eyebrow {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--primary-light);
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      margin-bottom: var(--space-sm);
+    }
+    .section-title {
+      font-size: clamp(1.75rem, 4vw, 2.5rem);
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+    }
+    .section-subtitle {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: var(--space-lg);
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    .feature-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-lg);
+      padding: var(--space-xl);
+      transition: all var(--transition-base);
+      position: relative;
+      overflow: hidden;
+    }
+    .feature-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--primary), var(--secondary));
+      transform: scaleX(0);
+      transition: transform var(--transition-base);
+    }
+    .feature-card:hover {
+      transform: translateY(-8px);
+      border-color: var(--border-light);
+      box-shadow: var(--shadow-lg), var(--shadow-glow);
+    }
+    .feature-card:hover::before {
+      transform: scaleX(1);
+    }
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: white;
+      margin-bottom: var(--space-md);
+      animation: float 3s ease-in-out infinite;
+    }
+    .feature-title {
+      font-size: 1.2rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+    }
+    .feature-text {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      line-height: 1.6;
+      margin-bottom: var(--space-md);
+    }
+    .feature-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-xs);
+    }
+    /* MODULES SECTION */
+    .modules {
+      padding: var(--space-3xl) var(--space-xl);
+    }
+    .modules-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      gap: var(--space-lg);
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    .module-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      transition: all var(--transition-base);
+      text-decoration: none;
+      color: inherit;
+      display: flex;
+      flex-direction: column;
+    }
+    .module-card:hover {
+      transform: translateY(-5px);
+      border-color: var(--primary);
+      box-shadow: var(--shadow-lg), var(--shadow-glow);
+    }
+    .module-header {
+      padding: var(--space-lg);
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-md);
+      border-bottom: 1px solid var(--border-color);
+    }
+    .module-icon {
+      width: 50px;
+      height: 50px;
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.25rem;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+    .module-icon.blue { background: rgba(99, 102, 241, 0.2); color: var(--primary-light); }
+    .module-icon.green { background: rgba(16, 185, 129, 0.2); color: var(--success); }
+    .module-icon.orange { background: rgba(249, 115, 22, 0.2); color: var(--warning); }
+    .module-info {
+      flex: 1;
+    }
+    .module-label {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.65rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: var(--space-xs);
+    }
+    .module-title {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+    .module-body {
+      padding: var(--space-lg);
+      flex: 1;
+    }
+    .module-desc {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      line-height: 1.6;
+      margin-bottom: var(--space-md);
+    }
+    .module-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-xs);
+    }
+    .module-footer {
+      padding: var(--space-md) var(--space-lg);
+      background: var(--bg-tertiary);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .module-arrow {
+      color: var(--primary-light);
+      transition: transform var(--transition-base);
+    }
+    .module-card:hover .module-arrow {
+      transform: translateX(5px);
+    }
+    /* TIMELINE SECTION */
+    .timeline {
+      padding: var(--space-3xl) var(--space-xl);
+      background: var(--bg-secondary);
+      border-top: 1px solid var(--border-color);
+    }
+    .timeline-container {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .timeline-item {
+      display: flex;
+      gap: var(--space-lg);
+      padding: var(--space-md) 0;
+      position: relative;
+    }
+    .timeline-item:not(:last-child)::before {
+      content: '';
+      position: absolute;
+      left: 15px;
+      top: 45px;
+      bottom: 0;
+      width: 2px;
+      background: linear-gradient(180deg, var(--primary), var(--secondary));
+    }
+    .timeline-dot {
+      width: 32px;
+      height: 32px;
+      background: var(--bg-card);
+      border: 2px solid var(--primary);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 700;
+      color: var(--primary-light);
+      flex-shrink: 0;
+      z-index: 1;
+    }
+    .timeline-content {
+      flex: 1;
+      padding-bottom: var(--space-lg);
+    }
+    .timeline-time {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--primary-light);
+      margin-bottom: var(--space-xs);
+    }
+    .timeline-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-xs);
+    }
+    .timeline-text {
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+    }
+    /* CTA SECTION */
+    .cta {
+      padding: var(--space-3xl) var(--space-xl);
+      text-align: center;
+    }
+    .cta-box {
+      max-width: 700px;
+      margin: 0 auto;
+      padding: var(--space-3xl);
+      background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary));
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-xl);
+      position: relative;
+      overflow: hidden;
+    }
+    .cta-box::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
+      animation: rotate 20s linear infinite;
+    }
+    .cta-content {
+      position: relative;
+      z-index: 1;
+    }
+    .cta-title {
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+    }
+    .cta-text {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-xl);
+    }
+    .cta-buttons {
+      display: flex;
+      gap: var(--space-md);
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    /* FLOATING SHAPES */
+    .floating-shape {
+      position: absolute;
+      border-radius: 50%;
+      opacity: 0.1;
+      animation: float 6s ease-in-out infinite;
+    }
+    .shape-1 {
+      width: 300px;
+      height: 300px;
+      background: var(--primary);
+      top: 10%;
+      right: -100px;
+      animation-delay: 0s;
+    }
+    .shape-2 {
+      width: 200px;
+      height: 200px;
+      background: var(--secondary);
+      bottom: 20%;
+      left: -50px;
+      animation-delay: 2s;
+    }
+    .shape-3 {
+      width: 150px;
+      height: 150px;
+      background: var(--accent);
+      top: 50%;
+      right: 10%;
+      animation-delay: 4s;
+    }
+    /* AUTHOR FOOTER */
+    .author-footer {
+      background: var(--bg-secondary);
+      border-top: 1px solid var(--border-color);
+      padding: var(--space-xl);
+      text-align: center;
+    }
+    .author-info {
+      display: flex;
+      justify-content: center;
+      gap: var(--space-xl);
+      flex-wrap: wrap;
+      margin-bottom: var(--space-md);
+    }
+    .author-link {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: color var(--transition-base);
+    }
+    .author-link:hover {
+      color: var(--primary-light);
+    }
+    .author-link svg {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+  </style>
+</head>
+<body>
+  <!-- Particles Background -->
+  <div class="particles-container">
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+  </div>
+  <!-- Navigation -->
+  <nav class="navbar">
+    <a href="index.html" class="navbar-brand">
+      <div class="brand-logo">ML</div>
+      <span>ML Academy</span>
+    </a>
+    <div class="navbar-nav">
+      <a href="index.html" class="nav-link active">
+        <span class="nav-icon">[H]</span>
+        <span>Accueil</span>
+      </a>
+      <a href="cours.html" class="nav-link">
+        <span class="nav-icon">[C]</span>
+        <span>Cours</span>
+      </a>
+      <a href="tp.html" class="nav-link">
+        <span class="nav-icon">[T]</span>
+        <span>TPs</span>
+      </a>
+      <a href="feedback.html" class="nav-link">
+        <span class="nav-icon">[F]</span>
+        <span>Contact</span>
+      </a>
+    </div>
+    <div class="nav-badge">
+      <div class="dot"></div>
+      <span>Google Colab Ready</span>
+    </div>
+  </nav>
+  <!-- Page Wrapper -->
+  <div class="page-wrapper">
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="hero-bg"></div>
+      <div class="floating-shape shape-1"></div>
+      <div class="floating-shape shape-2"></div>
+      <div class="floating-shape shape-3"></div>
+      <div class="hero-eyebrow">
+        <div class="pulse"></div>
+        <span>Formation 2025/2026 — 100% Pratique</span>
+      </div>
+      <h1 class="hero-title">
+        Maitrisez le <span class="gradient-text">Machine Learning</span><br>
+        par la pratique
+      </h1>
+      <p class="hero-subtitle">
+        Apprenez les algorithmes ML essentiels a travers des projets concrets
+        avec des datasets reels de Kaggle. De zero a heros en quelques seances.
+      </p>
+      <div class="hero-cta">
+        <a href="cours.html" class="btn btn-primary btn-lg">
+          Commencer les cours
+        </a>
+        <a href="tp.html" class="btn btn-secondary btn-lg">
+          Voir les TPs
+        </a>
+      </div>
+      <div class="hero-stats">
+        <div class="hero-stat">
+          <div class="hero-stat-value">8<span>+</span></div>
+          <div class="hero-stat-label">Algorithmes</div>
+        </div>
+        <div class="hero-stat">
+          <div class="hero-stat-value">6<span></span></div>
+          <div class="hero-stat-label">TPs Complets</div>
+        </div>
+        <div class="hero-stat">
+          <div class="hero-stat-value">4<span></span></div>
+          <div class="hero-stat-label">Datasets Reels</div>
+        </div>
+        <div class="hero-stat">
+          <div class="hero-stat-value">0<span></span></div>
+          <div class="hero-stat-label">Installation</div>
+        </div>
+      </div>
+    </section>
+    <!-- Features Section -->
+    <section class="features">
+      <div class="section-header scroll-animate">
+        <div class="section-eyebrow">Pourquoi cette formation</div>
+        <h2 class="section-title">Ce que vous allez apprendre</h2>
+        <p class="section-subtitle">
+          Une approche progressive alliant theorie solide et pratique intensive
+          sur des problemes reels du monde de la data science.
+        </p>
+      </div>
+      <div class="features-grid">
+        <div class="feature-card scroll-animate">
+          <div class="feature-icon">D</div>
+          <h3 class="feature-title">Pretraitement des Donnees</h3>
+          <p class="feature-text">
+            Maitrisez le nettoyage, la normalisation et l'ingenierie des features
+            pour preparer vos donnees a l'entrainement.
+          </p>
+          <div class="feature-tags">
+            <span class="badge badge-primary">Pandas</span>
+            <span class="badge badge-secondary">NumPy</span>
+            <span class="badge badge-success">Scikit-learn</span>
+          </div>
+        </div>
+        <div class="feature-card scroll-animate">
+          <div class="feature-icon">A</div>
+          <h3 class="feature-title">Algorithmes de ML</h3>
+          <p class="feature-text">
+            Comprendre et implementer les algorithmes fondamentaux :
+            Regression, Classification, Clustering et Deep Learning.
+          </p>
+          <div class="feature-tags">
+            <span class="badge badge-primary">Regression</span>
+            <span class="badge badge-secondary">Random Forest</span>
+            <span class="badge badge-accent">Neural Networks</span>
+          </div>
+        </div>
+        <div class="feature-card scroll-animate">
+          <div class="feature-icon">E</div>
+          <h3 class="feature-title">Evaluation & Optimisation</h3>
+          <p class="feature-text">
+            Apprenez a mesurer la performance de vos modeles et a les optimiser
+            avec les bonnes metriques et techniques.
+          </p>
+          <div class="feature-tags">
+            <span class="badge badge-success">Cross-validation</span>
+            <span class="badge badge-warning">Grid Search</span>
+            <span class="badge badge-primary">Metriques</span>
+          </div>
+        </div>
+        <div class="feature-card scroll-animate">
+          <div class="feature-icon">P</div>
+          <h3 class="feature-title">Projets Concrets</h3>
+          <p class="feature-text">
+            Travaillez sur des datasets reels de Kaggle : Titanic, Housing,
+            Iris et bien d'autres pour construire votre portfolio.
+          </p>
+          <div class="feature-tags">
+            <span class="badge badge-success">Kaggle</span>
+            <span class="badge badge-accent">Portfolio</span>
+            <span class="badge badge-secondary">GitHub</span>
+          </div>
+        </div>
+        <div class="feature-card scroll-animate">
+          <div class="feature-icon">T</div>
+          <h3 class="feature-title">Series Temporelles</h3>
+          <p class="feature-text">
+            Decouvrez les techniques specifiques pour predire des donnees
+            temporelles avec LSTM et les modeles ARIMA.
+          </p>
+          <div class="feature-tags">
+            <span class="badge badge-primary">LSTM</span>
+            <span class="badge badge-secondary">TensorFlow</span>
+            <span class="badge badge-warning">Time Series</span>
+          </div>
+        </div>
+        <div class="feature-card scroll-animate">
+          <div class="feature-icon">X</div>
+          <h3 class="feature-title">Deploiement</h3>
+          <p class="feature-text">
+            Apprenez a mettre vos modeles en production avec des API
+            et des interfaces web interactives.
+          </p>
+          <div class="feature-tags">
+            <span class="badge badge-success">FastAPI</span>
+            <span class="badge badge-primary">Streamlit</span>
+            <span class="badge badge-secondary">Docker</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Modules Section -->
+    <section class="modules">
+      <div class="section-header scroll-animate">
+        <div class="section-eyebrow">Parcours de formation</div>
+        <h2 class="section-title">Accedez aux modules</h2>
+        <p class="section-subtitle">
+          Trois espaces dedies pour une progression optimale dans votre apprentissage.
+        </p>
+      </div>
+      <div class="modules-grid">
+        <a href="cours.html" class="module-card scroll-animate">
+          <div class="module-header">
+            <div class="module-icon blue">C</div>
+            <div class="module-info">
+              <div class="module-label">Module 1</div>
+              <h3 class="module-title">Cours Theoriques</h3>
+            </div>
+          </div>
+          <div class="module-body">
+            <p class="module-desc">
+              Contenu theorique complet avec equations mathematiques,
+              explications detaillees et exemples de code Python annote.
+            </p>
+            <div class="module-meta">
+              <span class="badge badge-primary">Theorie</span>
+              <span class="badge badge-secondary">Mathematiques</span>
+              <span class="badge badge-success">Python</span>
+            </div>
+          </div>
+          <div class="module-footer">
+            <span style="font-size: 0.8rem; color: var(--text-muted);">8 chapitres</span>
+            <span class="module-arrow">→</span>
+          </div>
+        </a>
+        <a href="tp.html" class="module-card scroll-animate">
+          <div class="module-header">
+            <div class="module-icon green">T</div>
+            <div class="module-info">
+              <div class="module-label">Module 2</div>
+              <h3 class="module-title">Travaux Pratiques</h3>
+            </div>
+          </div>
+          <div class="module-body">
+            <p class="module-desc">
+              6 notebooks Google Colab guides etape par etape sur des datasets
+              reels de Kaggle. Pret a executer sans installation.
+            </p>
+            <div class="module-meta">
+              <span class="badge badge-success">Google Colab</span>
+              <span class="badge badge-accent">Guide</span>
+              <span class="badge badge-warning">Kaggle</span>
+            </div>
+          </div>
+          <div class="module-footer">
+            <span style="font-size: 0.8rem; color: var(--text-muted);">6 notebooks</span>
+            <span class="module-arrow">→</span>
+          </div>
+        </a>
+        <a href="feedback.html" class="module-card scroll-animate">
+          <div class="module-header">
+            <div class="module-icon orange">F</div>
+            <div class="module-info">
+              <div class="module-label">Module 3</div>
+              <h3 class="module-title">Questions & Feedback</h3>
+            </div>
+          </div>
+          <div class="module-body">
+            <p class="module-desc">
+              Posez vos questions, evaluez la formation et accedez a la FAQ
+              pour resoudre vos doutes rapidement.
+            </p>
+            <div class="module-meta">
+              <span class="badge badge-primary">FAQ</span>
+              <span class="badge badge-secondary">Support</span>
+              <span class="badge badge-success">Feedback</span>
+            </div>
+          </div>
+          <div class="module-footer">
+            <span style="font-size: 0.8rem; color: var(--text-muted);">Reponses 24h</span>
+            <span class="module-arrow">→</span>
+          </div>
+        </a>
+      </div>
+    </section>
+    <!-- Timeline Section -->
+    <section class="timeline">
+      <div class="section-header scroll-animate">
+        <div class="section-eyebrow">Organisation</div>
+        <h2 class="section-title">Plan de la formation</h2>
+        <p class="section-subtitle">
+          Un parcours progressif de 8 seances pour maitriser le Machine Learning.
+        </p>
+      </div>
+      <div class="timeline-container">
+        <div class="timeline-item scroll-animate">
+          <div class="timeline-dot">1</div>
+          <div class="timeline-content">
+            <div class="timeline-time">Seance 1 — 2h</div>
+            <h3 class="timeline-title">Introduction au ML & Python</h3>
+            <p class="timeline-text">
+              Fondamentaux du Machine Learning, environnement Python,
+              NumPy et Pandas pour la manipulation de donnees.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item scroll-animate">
+          <div class="timeline-dot">2</div>
+          <div class="timeline-content">
+            <div class="timeline-time">Seance 2 — 2h</div>
+            <h3 class="timeline-title">Pretraitement des Donnees</h3>
+            <p class="timeline-text">
+              Nettoyage, normalisation, encodage des variables categorielles
+              et feature engineering.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item scroll-animate">
+          <div class="timeline-dot">3</div>
+          <div class="timeline-content">
+            <div class="timeline-time">Seance 3 — 2h</div>
+            <h3 class="timeline-title">Regression Lineaire & Logistique</h3>
+            <p class="timeline-text">
+              Algorithmes de base, equations mathematiques,
+              implementation avec scikit-learn.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item scroll-animate">
+          <div class="timeline-dot">4</div>
+          <div class="timeline-content">
+            <div class="timeline-time">Seance 4 — 2h</div>
+            <h3 class="timeline-title">Arbres de Decision & Random Forest</h3>
+            <p class="timeline-text">
+              Classification avec arbres, bagging, boosting et
+              importance des features.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item scroll-animate">
+          <div class="timeline-dot">5</div>
+          <div class="timeline-content">
+            <div class="timeline-time">Seance 5 — 2h</div>
+            <h3 class="timeline-title">Reseaux de Neurones avec Keras</h3>
+            <p class="timeline-text">
+              Introduction au Deep Learning, perceptron multicouche,
+              activation et backpropagation.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item scroll-animate">
+          <div class="timeline-dot">6</div>
+          <div class="timeline-content">
+            <div class="timeline-time">Seance 6 — 2h</div>
+            <h3 class="timeline-title">Series Temporelles & LSTM</h3>
+            <p class="timeline-text">
+              Prediction de donnees temporelles, reseaux recurrents
+              et modeles LSTM avec TensorFlow.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item scroll-animate">
+          <div class="timeline-dot">7</div>
+          <div class="timeline-content">
+            <div class="timeline-time">Seance 7 — 2h</div>
+            <h3 class="timeline-title">Evaluation & Optimisation</h3>
+            <p class="timeline-text">
+              Metriques de performance, cross-validation,
+              grid search et eviter l'overfitting.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item scroll-animate">
+          <div class="timeline-dot">8</div>
+          <div class="timeline-content">
+            <div class="timeline-time">Seance 8 — 2h</div>
+            <h3 class="timeline-title">Projet Final & Deploiement</h3>
+            <p class="timeline-text">
+              Realisation d'un projet complet et mise en production
+              avec une API simple.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="cta">
+      <div class="cta-box scroll-animate">
+        <div class="cta-content">
+          <h2 class="cta-title">Pret a commencer ?</h2>
+          <p class="cta-text">
+            Rejoignez des centaines d'etudiants qui ont deja maitrise
+            le Machine Learning avec notre formation.
+          </p>
+          <div class="cta-buttons">
+            <a href="cours.html" class="btn btn-primary btn-lg">
+              Commencer maintenant
+            </a>
+            <a href="tp.html" class="btn btn-outline btn-lg">
+              Voir les notebooks
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Author Footer -->
+    <footer class="author-footer">
+      <div class="author-info">
+        <a href="mailto:imadmaalouf02@gmail.com" class="author-link">
+          <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
+          imadmaalouf02@gmail.com
+        </a>
+        <a href="https://github.com/imadmaalouf02" target="_blank" class="author-link">
+          <svg viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+          GitHub
+        </a>
+        <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" class="author-link">
+          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+          Hugging Face Space
+        </a>
+      </div>
+    </footer>
+    <!-- Footer -->
+    <footer class="footer">
+      <p class="footer-text">
+        ML Academy — Formation Machine Learning —
+        <span class="footer-brand">GE-MCI 4A</span> — Promotion 2025/2026
+      </p>
+      <p class="footer-text" style="margin-top: var(--space-sm);">
+        Google Colab · Python · Scikit-learn · TensorFlow · Kaggle
+      </p>
+      <p class="footer-text" style="margin-top: var(--space-sm); font-size: 0.75rem; color: var(--text-muted);">
+        Formateur : Imad Maalouf
+      </p>
+    </footer>
+  </div>
+  <!-- Scripts -->
+  <script src="js/shared.js"></script>
+  <script>
+    // Scroll animations
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, observerOptions);
+    document.querySelectorAll('.scroll-animate').forEach(el => {
+      observer.observe(el);
+    });
+    // Stagger animation for cards
+    document.querySelectorAll('.features-grid, .modules-grid').forEach(grid => {
+      const cards = grid.querySelectorAll('.feature-card, .module-card');
+      cards.forEach((card, index) => {
+        card.style.animationDelay = `${index * 0.1}s`;
+      });
+    });
+  </script>
+</body>
 </html>

js/feedback-storage.js ADDED Viewed

	@@ -0,0 +1,236 @@

+/* ═══════════════════════════════════════════════════════════════════════════
+   ML ACADEMY — FEEDBACK STORAGE SYSTEM
+   Stocke les feedbacks au format JSON pour traitement ulterieur
+   ═══════════════════════════════════════════════════════════════════════════ */
+class FeedbackStorage {
+  constructor() {
+    this.storageKey = 'ml_academy_feedbacks';
+    this.feedbacks = this.loadFeedbacks();
+  }
+  // Charge tous les feedbacks depuis le stockage
+  loadFeedbacks() {
+    try {
+      const stored = localStorage.getItem(this.storageKey);
+      return stored ? JSON.parse(stored) : [];
+    } catch (e) {
+      console.error('Erreur lors du chargement des feedbacks:', e);
+      return [];
+    }
+  }
+  // Sauvegarde tous les feedbacks
+  saveFeedbacks() {
+    try {
+      localStorage.setItem(this.storageKey, JSON.stringify(this.feedbacks));
+      return true;
+    } catch (e) {
+      console.error('Erreur lors de la sauvegarde des feedbacks:', e);
+      return false;
+    }
+  }
+  // Ajoute un nouveau feedback
+  addFeedback(feedbackData) {
+    const feedback = {
+      id: this.generateId(),
+      timestamp: new Date().toISOString(),
+      ...feedbackData
+    };
+    this.feedbacks.push(feedback);
+    this.saveFeedbacks();
+    // Exporte automatiquement vers un fichier JSON telechargeable
+    this.exportToFile();
+    return feedback;
+  }
+  // Genere un ID unique
+  generateId() {
+    return 'fb_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+  }
+  // Recupere tous les feedbacks
+  getAllFeedbacks() {
+    return this.feedbacks;
+  }
+  // Recupere les feedbacks par date
+  getFeedbacksByDateRange(startDate, endDate) {
+    return this.feedbacks.filter(fb => {
+      const fbDate = new Date(fb.timestamp);
+      return fbDate >= startDate && fbDate <= endDate;
+    });
+  }
+  // Recupere les statistiques
+  getStatistics() {
+    if (this.feedbacks.length === 0) {
+      return {
+        total: 0,
+        averageRating: 0,
+        difficultyDistribution: {},
+        commonDifficulties: [],
+        commonSuggestions: []
+      };
+    }
+    const ratings = this.feedbacks.map(fb => parseInt(fb.rating) || 0);
+    const averageRating = ratings.reduce((a, b) => a + b, 0) / ratings.length;
+    // Distribution des difficultes
+    const difficultyDistribution = {};
+    this.feedbacks.forEach(fb => {
+      const diff = fb.difficulty || 'non-specifie';
+      difficultyDistribution[diff] = (difficultyDistribution[diff] || 0) + 1;
+    });
+    // Points difficiles communs
+    const difficultyCount = {};
+    this.feedbacks.forEach(fb => {
+      if (fb.difficiles && Array.isArray(fb.difficiles)) {
+        fb.difficiles.forEach(d => {
+          difficultyCount[d] = (difficultyCount[d] || 0) + 1;
+        });
+      }
+    });
+    const commonDifficulties = Object.entries(difficultyCount)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5);
+    // Suggestions communes
+    const suggestionCount = {};
+    this.feedbacks.forEach(fb => {
+      if (fb.suggestions && Array.isArray(fb.suggestions)) {
+        fb.suggestions.forEach(s => {
+          suggestionCount[s] = (suggestionCount[s] || 0) + 1;
+        });
+      }
+    });
+    const commonSuggestions = Object.entries(suggestionCount)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5);
+    return {
+      total: this.feedbacks.length,
+      averageRating: averageRating.toFixed(2),
+      difficultyDistribution,
+      commonDifficulties,
+      commonSuggestions
+    };
+  }
+  // Exporte les feedbacks vers un fichier JSON
+  exportToFile() {
+    const data = {
+      exportDate: new Date().toISOString(),
+      totalFeedbacks: this.feedbacks.length,
+      feedbacks: this.feedbacks,
+      statistics: this.getStatistics()
+    };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    // Stocke l'URL pour telechargement ulterieur
+    this.lastExportUrl = url;
+    return url;
+  }
+  // Telecharge le fichier JSON
+  downloadFeedbacks() {
+    const url = this.exportToFile();
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `ml_academy_feedbacks_${new Date().toISOString().split('T')[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+  // Exporte vers CSV pour Excel
+  exportToCSV() {
+    if (this.feedbacks.length === 0) return null;
+    const headers = [
+      'ID', 'Date', 'Nom', 'Email', 'Projet',
+      'Note', 'Difficulte', 'Rythme',
+      'Parties Utiles', 'Points Difficiles',
+      'Question Principale', 'Commentaire'
+    ];
+    const rows = this.feedbacks.map(fb => [
+      fb.id,
+      fb.timestamp,
+      fb.name || '',
+      fb.email || '',
+      fb.project || '',
+      fb.rating || '',
+      fb.difficulty || '',
+      fb.rythme || '',
+      (fb.utiles || []).join(';'),
+      (fb.difficiles || []).join(';'),
+      (fb.mainQuestion || '').replace(/"/g, '""'),
+      (fb.freeComment || '').replace(/"/g, '""')
+    ]);
+    const csv = [
+      headers.join(','),
+      ...rows.map(row => row.map(cell => `"${cell}"`).join(','))
+    ].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `ml_academy_feedbacks_${new Date().toISOString().split('T')[0]}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+  // Efface tous les feedbacks (avec confirmation)
+  clearAll() {
+    if (confirm('Attention : Cette action supprimera tous les feedbacks. Continuer ?')) {
+      this.feedbacks = [];
+      this.saveFeedbacks();
+      return true;
+    }
+    return false;
+  }
+}
+// Instance globale
+const feedbackStorage = new FeedbackStorage();
+// Fonction pour soumettre un feedback depuis le formulaire
+function submitFeedback(formData) {
+  const feedback = feedbackStorage.addFeedback(formData);
+  console.log('Feedback enregistre:', feedback);
+  return feedback;
+}
+// Fonction pour afficher les statistiques dans la console
+function showFeedbackStats() {
+  const stats = feedbackStorage.getStatistics();
+  console.log('=== Statistiques des Feedbacks ===');
+  console.log(`Total: ${stats.total}`);
+  console.log(`Note moyenne: ${stats.averageRating}/5`);
+  console.log('Distribution des difficultes:', stats.difficultyDistribution);
+  console.log('Points difficiles communs:', stats.commonDifficulties);
+  console.log('Suggestions communes:', stats.commonSuggestions);
+  return stats;
+}
+// Exporte pour utilisation externe
+window.FeedbackStorage = FeedbackStorage;
+window.feedbackStorage = feedbackStorage;
+window.submitFeedback = submitFeedback;
+window.showFeedbackStats = showFeedbackStats;

js/shared.js ADDED Viewed

	@@ -0,0 +1,394 @@

+/* ═══════════════════════════════════════════════════════════════════════════
+   ML ACADEMY — SHARED JAVASCRIPT
+   Animations et interactions communes à toutes les pages
+   ═══════════════════════════════════════════════════════════════════════════ */
+// ═══════════════════════════════════════════════════════════════════════════
+// NAVIGATION ACTIVE STATE
+// ═══════════════════════════════════════════════════════════════════════════
+document.addEventListener('DOMContentLoaded', () => {
+  // Mark active nav link based on current page
+  const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+  document.querySelectorAll('.nav-link').forEach(link => {
+    const href = link.getAttribute('href');
+    if (href === currentPage || (currentPage === '' && href === 'index.html')) {
+      link.classList.add('active');
+    } else {
+      link.classList.remove('active');
+    }
+  });
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// SMOOTH SCROLL FOR ANCHOR LINKS
+// ═══════════════════════════════════════════════════════════════════════════
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function(e) {
+    e.preventDefault();
+    const target = document.querySelector(this.getAttribute('href'));
+    if (target) {
+      const offsetTop = target.offsetTop - 100; // Account for fixed navbar
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      });
+    }
+  });
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// SCROLL ANIMATIONS OBSERVER
+// ═══════════════════════════════════════════════════════════════════════════
+const scrollObserverOptions = {
+  root: null,
+  rootMargin: '0px 0px -100px 0px',
+  threshold: 0.1
+};
+const scrollObserver = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('visible');
+      // Add stagger delay for child elements if needed
+      const staggerChildren = entry.target.querySelectorAll('.stagger-child');
+      staggerChildren.forEach((child, index) => {
+        child.style.animationDelay = `${index * 0.1}s`;
+        child.classList.add('animate-in');
+      });
+    }
+  });
+}, scrollObserverOptions);
+// Observe all elements with scroll-animate class
+document.querySelectorAll('.scroll-animate').forEach(el => {
+  scrollObserver.observe(el);
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// NAVBAR SCROLL EFFECT
+// ═══════════════════════════════════════════════════════════════════════════
+let lastScrollY = window.scrollY;
+let ticking = false;
+function updateNavbar() {
+  const navbar = document.querySelector('.navbar');
+  if (window.scrollY > 50) {
+    navbar.style.background = 'rgba(15, 15, 26, 0.95)';
+    navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+  } else {
+    navbar.style.background = 'rgba(15, 15, 26, 0.85)';
+    navbar.style.boxShadow = 'none';
+  }
+  ticking = false;
+}
+window.addEventListener('scroll', () => {
+  lastScrollY = window.scrollY;
+  if (!ticking) {
+    window.requestAnimationFrame(updateNavbar);
+    ticking = true;
+  }
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// PARALLAX EFFECT FOR HERO BACKGROUND
+// ═══════════════════════════════════════════════════════════════════════════
+const heroBg = document.querySelector('.hero-bg');
+if (heroBg) {
+  window.addEventListener('scroll', () => {
+    const scrolled = window.scrollY;
+    heroBg.style.transform = `translateY(${scrolled * 0.3}px)`;
+  });
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// TYPING EFFECT FOR HERO TEXT (optional)
+// ═══════════════════════════════════════════════════════════════════════════
+function typeWriter(element, text, speed = 50) {
+  let i = 0;
+  element.textContent = '';
+  function type() {
+    if (i < text.length) {
+      element.textContent += text.charAt(i);
+      i++;
+      setTimeout(type, speed);
+    }
+  }
+  type();
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// COUNTER ANIMATION FOR STATS
+// ═══════════════════════════════════════════════════════════════════════════
+function animateCounter(element, target, duration = 2000) {
+  let start = 0;
+  const increment = target / (duration / 16);
+  function updateCounter() {
+    start += increment;
+    if (start < target) {
+      element.textContent = Math.floor(start);
+      requestAnimationFrame(updateCounter);
+    } else {
+      element.textContent = target;
+    }
+  }
+  updateCounter();
+}
+// Observe stat elements and animate when visible
+const statObserver = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting && !entry.target.classList.contains('counted')) {
+      entry.target.classList.add('counted');
+      const target = parseInt(entry.target.dataset.target);
+      if (!isNaN(target)) {
+        animateCounter(entry.target, target);
+      }
+    }
+  });
+}, { threshold: 0.5 });
+document.querySelectorAll('[data-target]').forEach(el => {
+  statObserver.observe(el);
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// MAGNETIC BUTTON EFFECT
+// ═══════════════════════════════════════════════════════════════════════════
+document.querySelectorAll('.btn').forEach(button => {
+  button.addEventListener('mousemove', (e) => {
+    const rect = button.getBoundingClientRect();
+    const x = e.clientX - rect.left - rect.width / 2;
+    const y = e.clientY - rect.top - rect.height / 2;
+    button.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
+  });
+  button.addEventListener('mouseleave', () => {
+    button.style.transform = '';
+  });
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// CARD HOVER 3D EFFECT
+// ═══════════════════════════════════════════════════════════════════════════
+document.querySelectorAll('.card, .feature-card, .module-card').forEach(card => {
+  card.addEventListener('mousemove', (e) => {
+    const rect = card.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    const rotateX = (y - centerY) / 20;
+    const rotateY = (centerX - x) / 20;
+    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`;
+  });
+  card.addEventListener('mouseleave', () => {
+    card.style.transform = '';
+  });
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// GLITCH EFFECT FOR TEXT (optional)
+// ═══════════════════════════════════════��═══════════════════════════════════
+function glitchText(element, originalText) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let iterations = 0;
+  const interval = setInterval(() => {
+    element.textContent = originalText
+      .split('')
+      .map((char, index) => {
+        if (index < iterations) {
+          return originalText[index];
+        }
+        return chars[Math.floor(Math.random() * chars.length)];
+      })
+      .join('');
+    if (iterations >= originalText.length) {
+      clearInterval(interval);
+    }
+    iterations += 1 / 3;
+  }, 30);
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// PARTICLE MOUSE INTERACTION
+// ═══════════════════════════════════════════════════════════════════════════
+const particlesContainer = document.querySelector('.particles-container');
+if (particlesContainer) {
+  document.addEventListener('mousemove', (e) => {
+    const particles = particlesContainer.querySelectorAll('.particle');
+    const mouseX = e.clientX / window.innerWidth;
+    const mouseY = e.clientY / window.innerHeight;
+    particles.forEach((particle, index) => {
+      const speed = (index + 1) * 0.5;
+      const x = (mouseX - 0.5) * speed * 20;
+      const y = (mouseY - 0.5) * speed * 20;
+      particle.style.transform = `translate(${x}px, ${y}px)`;
+    });
+  });
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// LOADING ANIMATION
+// ═══════════════════════════════════════════════════════════════════════════
+window.addEventListener('load', () => {
+  document.body.classList.add('loaded');
+  // Animate elements with delay
+  document.querySelectorAll('[data-delay]').forEach(el => {
+    const delay = parseInt(el.dataset.delay);
+    setTimeout(() => {
+      el.classList.add('animate-in');
+    }, delay);
+  });
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// FORM VALIDATION HELPERS
+// ═══════════════════════════════════════════════════════════════════════════
+function validateEmail(email) {
+  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return re.test(email);
+}
+function validateRequired(value) {
+  return value.trim().length > 0;
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// TOOLTIP SYSTEM
+// ═══════════════════════════════════════════════════════════════════════════
+function createTooltip(element, text) {
+  const tooltip = document.createElement('div');
+  tooltip.className = 'tooltip';
+  tooltip.textContent = text;
+  tooltip.style.cssText = `
+    position: absolute;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    white-space: nowrap;
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+  `;
+  document.body.appendChild(tooltip);
+  element.addEventListener('mouseenter', () => {
+    const rect = element.getBoundingClientRect();
+    tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
+    tooltip.style.top = `${rect.top - tooltip.offsetHeight - 8}px`;
+    tooltip.style.opacity = '1';
+  });
+  element.addEventListener('mouseleave', () => {
+    tooltip.style.opacity = '0';
+  });
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// COPY TO CLIPBOARD
+// ═════════════════════════════════════════════════════════��═════════════════
+async function copyToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    showNotification('Copié dans le presse-papier !', 'success');
+  } catch (err) {
+    showNotification('Erreur lors de la copie', 'error');
+  }
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// NOTIFICATION SYSTEM
+// ═══════════════════════════════════════════════════════════════════════════
+function showNotification(message, type = 'info') {
+  const notification = document.createElement('div');
+  notification.className = `notification notification-${type}`;
+  notification.textContent = message;
+  notification.style.cssText = `
+    position: fixed;
+    top: 80px;
+    right: 20px;
+    padding: 12px 24px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 0.9rem;
+    z-index: 10000;
+    animation: slideInRight 0.3s ease;
+  `;
+  if (type === 'success') {
+    notification.style.borderColor = 'var(--success)';
+    notification.style.color = 'var(--success)';
+  } else if (type === 'error') {
+    notification.style.borderColor = 'var(--danger)';
+    notification.style.color = 'var(--danger)';
+  }
+  document.body.appendChild(notification);
+  setTimeout(() => {
+    notification.style.animation = 'slideOutRight 0.3s ease';
+    setTimeout(() => notification.remove(), 300);
+  }, 3000);
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// KEYBOARD SHORTCUTS
+// ═══════════════════════════════════════════════════════════════════════════
+document.addEventListener('keydown', (e) => {
+  // Ctrl/Cmd + K for search (if implemented)
+  if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+    e.preventDefault();
+    // Open search modal
+  }
+  // Escape to close modals
+  if (e.key === 'Escape') {
+    document.querySelectorAll('.modal.open').forEach(modal => {
+      modal.classList.remove('open');
+    });
+  }
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// PREFERS REDUCED MOTION
+// ═══════════════════════════════════════════════════════════════════════════
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+if (prefersReducedMotion.matches) {
+  document.documentElement.style.setProperty('--transition-fast', '0s');
+  document.documentElement.style.setProperty('--transition-base', '0s');
+  document.documentElement.style.setProperty('--transition-slow', '0s');
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// CONSOLE EASTER EGG
+// ═══════════════════════════════════════════════════════════════════════════
+console.log('%c🧠 ML Academy', 'font-size: 24px; font-weight: bold; color: #6366f1;');
+console.log('%cFormation Machine Learning — GE-MCI 4A', 'font-size: 14px; color: #94a3b8;');
+console.log('%cBienvenue dans la console ! Curieux de voir comment ça marche ?', 'font-size: 12px; color: #64748b;');

notebooks/TP1_Titanic_Survival.ipynb ADDED Viewed

	@@ -0,0 +1,508 @@

+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# 🚢 TP-1 : Survie sur le Titanic — Classification\n",
+    "\n",
+    "**Objectif** : Prédire la survie des passagers du Titanic à partir de leurs caractéristiques.\n",
+    "\n",
+    "**Dataset** : [Titanic - Machine Learning from Disaster](https://www.kaggle.com/competitions/titanic)\n",
+    "\n",
+    "**Compétences** :\n",
+    "- Prétraitement des données (valeurs manquantes, encodage)\n",
+    "- Feature Engineering\n",
+    "- Classification avec Random Forest\n",
+    "- Évaluation des modèles"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## 📋 Table des matières\n",
+    "\n",
+    "1. [Import des bibliothèques](#section-1)\n",
+    "2. [Chargement et exploration des données](#section-2)\n",
+    "3. [Prétraitement des données](#section-3)\n",
+    "4. [Feature Engineering](#section-4)\n",
+    "5. [Modélisation](#section-5)\n",
+    "6. [Évaluation et interprétation](#section-6)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-1'></a>\n",
+    "## 1️⃣ Import des bibliothèques"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Manipulation de données\n",
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "\n",
+    "# Visualisation\n",
+    "import matplotlib.pyplot as plt\n",
+    "import seaborn as sns\n",
+    "\n",
+    "# Machine Learning\n",
+    "from sklearn.model_selection import train_test_split, cross_val_score, GridSearchCV\n",
+    "from sklearn.preprocessing import LabelEncoder, StandardScaler\n",
+    "from sklearn.ensemble import RandomForestClassifier\n",
+    "from sklearn.linear_model import LogisticRegression\n",
+    "from sklearn.metrics import accuracy_score, classification_report, confusion_matrix\n",
+    "\n",
+    "# Configuration\n",
+    "sns.set_style('whitegrid')\n",
+    "plt.rcParams['figure.figsize'] = (10, 6)\n",
+    "\n",
+    "print(\"✅ Bibliothèques importées avec succès !\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-2'></a>\n",
+    "## 2️⃣ Chargement et exploration des données"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Chargement des données\n",
+    "# Note: Sur Kaggle, utilisez directement le chemin /kaggle/input/\n",
+    "train_df = pd.read_csv('https://raw.githubusercontent.com/datasciencedojo/datasets/master/titanic.csv')\n",
+    "\n",
+    "print(f\"📊 Dimensions du dataset : {train_df.shape}\")\n",
+    "print(f\"\\n📋 Colonnes : {list(train_df.columns)}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Aperçu des données\n",
+    "train_df.head(10)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Informations sur les données\n",
+    "train_df.info()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Statistiques descriptives\n",
+    "train_df.describe()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Valeurs manquantes\n",
+    "missing_values = train_df.isnull().sum()\n",
+    "missing_percent = (missing_values / len(train_df)) * 100\n",
+    "\n",
+    "missing_df = pd.DataFrame({\n",
+    "    'Valeurs manquantes': missing_values,\n",
+    "    'Pourcentage': missing_percent\n",
+    "}).sort_values('Pourcentage', ascending=False)\n",
+    "\n",
+    "print(\"🔍 Valeurs manquantes :\")\n",
+    "print(missing_df[missing_df['Valeurs manquantes'] > 0])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### 📊 Visualisation de la distribution"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fig, axes = plt.subplots(2, 3, figsize=(15, 10))\n",
+    "\n",
+    "# Distribution de la survie\n",
+    "sns.countplot(data=train_df, x='Survived', ax=axes[0, 0])\n",
+    "axes[0, 0].set_title('Distribution de la survie')\n",
+    "axes[0, 0].set_xticklabels(['Non survécu', 'Survécu'])\n",
+    "\n",
+    "# Survie par sexe\n",
+    "sns.countplot(data=train_df, x='Sex', hue='Survived', ax=axes[0, 1])\n",
+    "axes[0, 1].set_title('Survie par sexe')\n",
+    "\n",
+    "# Survie par classe\n",
+    "sns.countplot(data=train_df, x='Pclass', hue='Survived', ax=axes[0, 2])\n",
+    "axes[0, 2].set_title('Survie par classe')\n",
+    "\n",
+    "# Distribution de l'âge\n",
+    "sns.histplot(data=train_df, x='Age', hue='Survived', bins=30, kde=True, ax=axes[1, 0])\n",
+    "axes[1, 0].set_title('Distribution de l\\'âge par survie')\n",
+    "\n",
+    "# Distribution du prix du billet\n",
+    "sns.histplot(data=train_df, x='Fare', hue='Survived', bins=30, kde=True, ax=axes[1, 1])\n",
+    "axes[1, 1].set_title('Distribution du prix par survie')\n",
+    "\n",
+    "# Survie par port d'embarquement\n",
+    "sns.countplot(data=train_df, x='Embarked', hue='Survived', ax=axes[1, 2])\n",
+    "axes[1, 2].set_title('Survie par port d\\'embarquement')\n",
+    "\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-3'></a>\n",
+    "## 3️⃣ Prétraitement des données"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Création d'une copie pour le prétraitement\n",
+    "df = train_df.copy()\n",
+    "\n",
+    "# Suppression des colonnes inutiles\n",
+    "df = df.drop(['PassengerId', 'Name', 'Ticket', 'Cabin'], axis=1)\n",
+    "\n",
+    "print(\"🗑️ Colonnes supprimées : PassengerId, Name, Ticket, Cabin\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Gestion des valeurs manquantes\n",
+    "\n",
+    "# Age : remplissage par la médiane\n",
+    "df['Age'].fillna(df['Age'].median(), inplace=True)\n",
+    "\n",
+    "# Embarked : remplissage par le mode (valeur la plus fréquente)\n",
+    "df['Embarked'].fillna(df['Embarked'].mode()[0], inplace=True)\n",
+    "\n",
+    "# Fare : remplissage par la médiane\n",
+    "df['Fare'].fillna(df['Fare'].median(), inplace=True)\n",
+    "\n",
+    "print(\"✅ Valeurs manquantes traitées\")\n",
+    "print(f\"Valeurs manquantes restantes : {df.isnull().sum().sum()}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Encodage des variables catégorielles\n",
+    "\n",
+    "# Sex : Male=0, Female=1\n",
+    "df['Sex'] = df['Sex'].map({'male': 0, 'female': 1})\n",
+    "\n",
+    "# Embarked : One-hot encoding\n",
+    "df = pd.get_dummies(df, columns=['Embarked'], prefix='Embarked')\n",
+    "\n",
+    "print(\"✅ Variables catégorielles encodées\")\n",
+    "df.head()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-4'></a>\n",
+    "## 4️⃣ Feature Engineering"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Création de nouvelles features\n",
+    "\n",
+    "# FamilySize : taille de la famille\n",
+    "df['FamilySize'] = df['SibSp'] + df['Parch'] + 1\n",
+    "\n",
+    "# IsAlone : voyage seul ou non\n",
+    "df['IsAlone'] = (df['FamilySize'] == 1).astype(int)\n",
+    "\n",
+    "# AgeGroup : groupes d'âge\n",
+    "df['AgeGroup'] = pd.cut(df['Age'], bins=[0, 12, 18, 35, 60, 100], \n",
+    "                        labels=['Enfant', 'Adolescent', 'Adulte', 'Mature', 'Senior'])\n",
+    "\n",
+    "# FarePerPerson : prix par personne\n",
+    "df['FarePerPerson'] = df['Fare'] / df['FamilySize']\n",
+    "\n",
+    "print(\"✅ Nouvelles features créées :\")\n",
+    "print(\"  - FamilySize : taille de la famille\")\n",
+    "print(\"  - IsAlone : voyage seul\")\n",
+    "print(\"  - AgeGroup : groupe d'âge\")\n",
+    "print(\"  - FarePerPerson : prix par personne\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Encodage de AgeGroup\n",
+    "df = pd.get_dummies(df, columns=['AgeGroup'], prefix='Age')\n",
+    "\n",
+    "df.head()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-5'></a>\n",
+    "## 5️⃣ Modélisation"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Séparation des features et de la cible\n",
+    "X = df.drop('Survived', axis=1)\n",
+    "y = df['Survived']\n",
+    "\n",
+    "# Split train/test\n",
+    "X_train, X_test, y_train, y_test = train_test_split(\n",
+    "    X, y, test_size=0.2, random_state=42, stratify=y\n",
+    ")\n",
+    "\n",
+    "print(f\"📊 Train set : {X_train.shape[0]} échantillons\")\n",
+    "print(f\"📊 Test set : {X_test.shape[0]} échantillons\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Modèle 1 : Régression Logistique\n",
+    "lr_model = LogisticRegression(max_iter=1000, random_state=42)\n",
+    "lr_model.fit(X_train, y_train)\n",
+    "\n",
+    "lr_pred = lr_model.predict(X_test)\n",
+    "lr_accuracy = accuracy_score(y_test, lr_pred)\n",
+    "\n",
+    "print(f\"🎯 Régression Logistique - Accuracy : {lr_accuracy:.4f}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Modèle 2 : Random Forest\n",
+    "rf_model = RandomForestClassifier(\n",
+    "    n_estimators=100,\n",
+    "    max_depth=10,\n",
+    "    min_samples_split=5,\n",
+    "    random_state=42\n",
+    ")\n",
+    "rf_model.fit(X_train, y_train)\n",
+    "\n",
+    "rf_pred = rf_model.predict(X_test)\n",
+    "rf_accuracy = accuracy_score(y_test, rf_pred)\n",
+    "\n",
+    "print(f\"🌲 Random Forest - Accuracy : {rf_accuracy:.4f}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Optimisation des hyperparamètres avec GridSearch\n",
+    "param_grid = {\n",
+    "    'n_estimators': [50, 100, 200],\n",
+    "    'max_depth': [5, 10, 15, None],\n",
+    "    'min_samples_split': [2, 5, 10]\n",
+    "}\n",
+    "\n",
+    "grid_search = GridSearchCV(\n",
+    "    RandomForestClassifier(random_state=42),\n",
+    "    param_grid,\n",
+    "    cv=5,\n",
+    "    scoring='accuracy',\n",
+    "    n_jobs=-1\n",
+    ")\n",
+    "\n",
+    "print(\"⏳ Optimisation en cours...\")\n",
+    "grid_search.fit(X_train, y_train)\n",
+    "\n",
+    "print(f\"\\n✅ Meilleurs paramètres : {grid_search.best_params_}\")\n",
+    "print(f\"✅ Meilleure accuracy CV : {grid_search.best_score_:.4f}\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-6'></a>\n",
+    "## 6️⃣ Évaluation et interprétation"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Meilleur modèle\n",
+    "best_model = grid_search.best_estimator_\n",
+    "best_pred = best_model.predict(X_test)\n",
+    "\n",
+    "print(\"📊 Rapport de classification :\")\n",
+    "print(classification_report(y_test, best_pred, target_names=['Non survécu', 'Survécu']))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Matrice de confusion\n",
+    "cm = confusion_matrix(y_test, best_pred)\n",
+    "\n",
+    "plt.figure(figsize=(8, 6))\n",
+    "sns.heatmap(cm, annot=True, fmt='d', cmap='Blues', \n",
+    "            xticklabels=['Non survécu', 'Survécu'],\n",
+    "            yticklabels=['Non survécu', 'Survécu'])\n",
+    "plt.title('Matrice de confusion')\n",
+    "plt.ylabel('Vrai label')\n",
+    "plt.xlabel('Prédiction')\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Importance des features\n",
+    "feature_importance = pd.DataFrame({\n",
+    "    'feature': X.columns,\n",
+    "    'importance': best_model.feature_importances_\n",
+    "}).sort_values('importance', ascending=False)\n",
+    "\n",
+    "plt.figure(figsize=(10, 6))\n",
+    "sns.barplot(data=feature_importance.head(10), x='importance', y='feature', palette='viridis')\n",
+    "plt.title('Top 10 - Importance des features')\n",
+    "plt.xlabel('Importance')\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Cross-validation finale\n",
+    "cv_scores = cross_val_score(best_model, X, y, cv=5, scoring='accuracy')\n",
+    "\n",
+    "print(f\"📊 Cross-validation (5-fold) :\")\n",
+    "print(f\"  Mean accuracy : {cv_scores.mean():.4f}\")\n",
+    "print(f\"  Std accuracy : {cv_scores.std():.4f}\")\n",
+    "print(f\"  Scores : {cv_scores}\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## 🎓 Conclusion\n",
+    "\n",
+    "Dans ce TP, nous avons :\n",
+    "\n",
+    "1. ✅ **Exploré** le dataset Titanic et identifié les patterns clés\n",
+    "2. ✅ **Prétraité** les données (valeurs manquantes, encodage)\n",
+    "3. ✅ **Créé** de nouvelles features pertinentes\n",
+    "4. ✅ **Entraîné** plusieurs modèles de classification\n",
+    "5. ✅ **Optimisé** les hyperparamètres avec GridSearch\n",
+    "6. ✅ **Évalué** le modèle et analysé l'importance des features\n",
+    "\n",
+    "**Résultat** : Accuracy de ~82% avec Random Forest optimisé.\n",
+    "\n",
+    "**Prochaines étapes** :\n",
+    "- Tester d'autres algorithmes (XGBoost, SVM)\n",
+    "- Explorer plus de features (extraction du titre du nom)\n",
+    "- Soumettre sur Kaggle pour voir le score public"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

notebooks/TP2_House_Prices.ipynb ADDED Viewed

	@@ -0,0 +1,436 @@

+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# 🏠 TP-2 : Prédiction des Prix Immobiliers — Régression Avancée\n",
+    "\n",
+    "**Objectif** : Prédire le prix de vente des maisons à Ames, Iowa.\n",
+    "\n",
+    "**Dataset** : [House Prices - Advanced Regression Techniques](https://www.kaggle.com/competitions/house-prices-advanced-regression-techniques)\n",
+    "\n",
+    "**Compétences** :\n",
+    "- Feature Engineering avancé\n",
+    "- Gestion des outliers\n",
+    "- Modèles de boosting (XGBoost, LightGBM)\n",
+    "- Stacking d'algorithmes"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## 📋 Table des matières\n",
+    "\n",
+    "1. [Import et chargement](#section-1)\n",
+    "2. [Analyse exploratoire avancée](#section-2)\n",
+    "3. [Prétraitement](#section-3)\n",
+    "4. [Feature Engineering](#section-4)\n",
+    "5. [Modélisation avec XGBoost](#section-5)\n",
+    "6. [Stacking et soumission](#section-6)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-1'></a>\n",
+    "## 1️⃣ Import et chargement"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "import matplotlib.pyplot as plt\n",
+    "import seaborn as sns\n",
+    "from scipy import stats\n",
+    "from scipy.special import boxcox1p\n",
+    "\n",
+    "from sklearn.model_selection import KFold, cross_val_score\n",
+    "from sklearn.preprocessing import LabelEncoder, RobustScaler\n",
+    "from sklearn.impute import SimpleImputer\n",
+    "from sklearn.linear_model import Lasso, Ridge, ElasticNet\n",
+    "from sklearn.ensemble import GradientBoostingRegressor, RandomForestRegressor, StackingRegressor\n",
+    "from sklearn.metrics import mean_squared_error\n",
+    "\n",
+    "import xgboost as xgb\n",
+    "import lightgbm as lgb\n",
+    "\n",
+    "import warnings\n",
+    "warnings.filterwarnings('ignore')\n",
+    "\n",
+    "sns.set_style('whitegrid')\n",
+    "plt.rcParams['figure.figsize'] = (12, 8)\n",
+    "\n",
+    "print(\"✅ Bibliothèques importées !\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Chargement des données\n",
+    "train = pd.read_csv('https://raw.githubusercontent.com/ageron/handson-ml2/master/datasets/housing/housing.csv')\n",
+    "\n",
+    "# Pour ce TP, nous utilisons le California Housing Dataset comme alternative\n",
+    "# Sur Kaggle, utilisez : train = pd.read_csv('../input/house-prices/train.csv')\n",
+    "\n",
+    "print(f\"📊 Dimensions : {train.shape}\")\n",
+    "train.head()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-2'></a>\n",
+    "## 2️⃣ Analyse exploratoire avancée"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Distribution de la cible\n",
+    "fig, axes = plt.subplots(1, 2, figsize=(14, 5))\n",
+    "\n",
+    "# Avant transformation\n",
+    "sns.histplot(train['median_house_value'], kde=True, ax=axes[0])\n",
+    "axes[0].set_title('Distribution des prix (original)')\n",
+    "\n",
+    "# Après log transformation\n",
+    "sns.histplot(np.log1p(train['median_house_value']), kde=True, ax=axes[1])\n",
+    "axes[1].set_title('Distribution des prix (log)')\n",
+    "\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Corrélation avec la cible\n",
+    "correlations = train.corr()['median_house_value'].sort_values(ascending=False)\n",
+    "\n",
+    "plt.figure(figsize=(10, 6))\n",
+    "correlations.drop('median_house_value').plot(kind='barh')\n",
+    "plt.title('Corrélation avec le prix des maisons')\n",
+    "plt.xlabel('Corrélation')\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Scatter plots des features les plus corrélées\n",
+    "fig, axes = plt.subplots(2, 2, figsize=(14, 10))\n",
+    "\n",
+    "features = ['median_income', 'total_rooms', 'housing_median_age', 'latitude']\n",
+    "\n",
+    "for idx, feature in enumerate(features):\n",
+    "    row, col = idx // 2, idx % 2\n",
+    "    axes[row, col].scatter(train[feature], train['median_house_value'], alpha=0.3)\n",
+    "    axes[row, col].set_xlabel(feature)\n",
+    "    axes[row, col].set_ylabel('Prix')\n",
+    "    axes[row, col].set_title(f'{feature} vs Prix')\n",
+    "\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-3'></a>\n",
+    "## 3️⃣ Prétraitement"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Gestion des valeurs manquantes\n",
+    "print(\"Valeurs manquantes :\")\n",
+    "print(train.isnull().sum()[train.isnull().sum() > 0])\n",
+    "\n",
+    "# Remplissage des valeurs manquantes\n",
+    "train['total_bedrooms'].fillna(train['total_bedrooms'].median(), inplace=True)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Encodage des variables catégorielles\n",
+    "le = LabelEncoder()\n",
+    "train['ocean_proximity_encoded'] = le.fit_transform(train['ocean_proximity'])\n",
+    "\n",
+    "print(\"✅ Variables catégorielles encodées\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-4'></a>\n",
+    "## 4️⃣ Feature Engineering"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Création de nouvelles features\n",
+    "\n",
+    "# Chambres par personne\n",
+    "train['bedrooms_per_person'] = train['total_bedrooms'] / train['population']\n",
+    "\n",
+    "# Pièces par ménage\n",
+    "train['rooms_per_household'] = train['total_rooms'] / train['households']\n",
+    "\n",
+    "# Densité de population\n",
+    "train['population_per_household'] = train['population'] / train['households']\n",
+    "\n",
+    "# Catégorisation du revenu\n",
+    "train['income_category'] = pd.cut(train['median_income'],\n",
+    "                                   bins=[0, 1.5, 3, 4.5, 6, np.inf],\n",
+    "                                   labels=[1, 2, 3, 4, 5])\n",
+    "\n",
+    "print(\"✅ Nouvelles features créées\")\n",
+    "print(train[['bedrooms_per_person', 'rooms_per_household', 'population_per_household', 'income_category']].head())"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Préparation des données pour la modélisation\n",
+    "features = ['longitude', 'latitude', 'housing_median_age', 'total_rooms',\n",
+    "            'total_bedrooms', 'population', 'households', 'median_income',\n",
+    "            'ocean_proximity_encoded', 'bedrooms_per_person',\n",
+    "            'rooms_per_household', 'population_per_household']\n",
+    "\n",
+    "X = train[features]\n",
+    "y = np.log1p(train['median_house_value'])  # Log transformation de la cible\n",
+    "\n",
+    "print(f\"Features utilisées : {len(features)}\")\n",
+    "print(f\"X shape : {X.shape}\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-5'></a>\n",
+    "## 5️⃣ Modélisation avec XGBoost"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Fonction d'évaluation\n",
+    "def rmse_cv(model, X, y, cv=5):\n",
+    "    kf = KFold(cv, shuffle=True, random_state=42)\n",
+    "    rmse = np.sqrt(-cross_val_score(model, X, y, scoring='neg_mean_squared_error', cv=kf))\n",
+    "    return rmse\n",
+    "\n",
+    "# Modèle XGBoost\n",
+    "xgb_model = xgb.XGBRegressor(\n",
+    "    n_estimators=1000,\n",
+    "    learning_rate=0.05,\n",
+    "    max_depth=6,\n",
+    "    subsample=0.8,\n",
+    "    colsample_bytree=0.8,\n",
+    "    random_state=42,\n",
+    "    n_jobs=-1\n",
+    ")\n",
+    "\n",
+    "print(\"⏳ Évaluation XGBoost...\")\n",
+    "xgb_scores = rmse_cv(xgb_model, X, y)\n",
+    "print(f\"XGBoost RMSE : {xgb_scores.mean():.4f} (+/- {xgb_scores.std():.4f})\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Modèle LightGBM\n",
+    "lgb_model = lgb.LGBMRegressor(\n",
+    "    n_estimators=1000,\n",
+    "    learning_rate=0.05,\n",
+    "    max_depth=6,\n",
+    "    subsample=0.8,\n",
+    "    colsample_bytree=0.8,\n",
+    "    random_state=42\n",
+    ")\n",
+    "\n",
+    "print(\"⏳ Évaluation LightGBM...\")\n",
+    "lgb_scores = rmse_cv(lgb_model, X, y)\n",
+    "print(f\"LightGBM RMSE : {lgb_scores.mean():.4f} (+/- {lgb_scores.std():.4f})\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Modèles linéaires régularisés\n",
+    "lasso = Lasso(alpha=0.0005, random_state=42, max_iter=10000)\n",
+    "ridge = Ridge(alpha=0.5, random_state=42)\n",
+    "\n",
+    "print(\"⏳ Évaluation Lasso...\")\n",
+    "lasso_scores = rmse_cv(lasso, X, y)\n",
+    "print(f\"Lasso RMSE : {lasso_scores.mean():.4f} (+/- {lasso_scores.std():.4f})\")\n",
+    "\n",
+    "print(\"\\n⏳ Évaluation Ridge...\")\n",
+    "ridge_scores = rmse_cv(ridge, X, y)\n",
+    "print(f\"Ridge RMSE : {ridge_scores.mean():.4f} (+/- {ridge_scores.std():.4f})\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a id='section-6'></a>\n",
+    "## 6��⃣ Stacking et soumission"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Stacking de modèles\n",
+    "estimators = [\n",
+    "    ('xgb', xgb_model),\n",
+    "    ('lgb', lgb_model),\n",
+    "    ('ridge', ridge)\n",
+    "]\n",
+    "\n",
+    "stacking_model = StackingRegressor(\n",
+    "    estimators=estimators,\n",
+    "    final_estimator=Ridge(alpha=0.1),\n",
+    "    cv=5,\n",
+    "    n_jobs=-1\n",
+    ")\n",
+    "\n",
+    "print(\"⏳ Évaluation Stacking...\")\n",
+    "stacking_scores = rmse_cv(stacking_model, X, y)\n",
+    "print(f\"Stacking RMSE : {stacking_scores.mean():.4f} (+/- {stacking_scores.std():.4f})\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Entraînement final et importance des features\n",
+    "xgb_model.fit(X, y)\n",
+    "\n",
+    "feature_importance = pd.DataFrame({\n",
+    "    'feature': features,\n",
+    "    'importance': xgb_model.feature_importances_\n",
+    "}).sort_values('importance', ascending=False)\n",
+    "\n",
+    "plt.figure(figsize=(10, 6))\n",
+    "sns.barplot(data=feature_importance, x='importance', y='feature', palette='viridis')\n",
+    "plt.title('Importance des features (XGBoost)')\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Résumé des performances\n",
+    "print(\"📊 Résumé des performances (RMSE) :\")\n",
+    "print(\"=\" * 40)\n",
+    "print(f\"Lasso      : {lasso_scores.mean():.4f}\")\n",
+    "print(f\"Ridge      : {ridge_scores.mean():.4f}\")\n",
+    "print(f\"XGBoost    : {xgb_scores.mean():.4f}\")\n",
+    "print(f\"LightGBM   : {lgb_scores.mean():.4f}\")\n",
+    "print(f\"Stacking   : {stacking_scores.mean():.4f} ⭐\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## 🎓 Conclusion\n",
+    "\n",
+    "Dans ce TP avancé, nous avons :\n",
+    "\n",
+    "1. ✅ **Analysé** la distribution des prix et identifié les transformations nécessaires\n",
+    "2. ✅ **Créé** des features pertinentes (ratios, catégorisations)\n",
+    "3. ✅ **Comparé** plusieurs algorithmes de régression\n",
+    "4. ✅ **Utilisé** XGBoost et LightGBM pour de meilleures performances\n",
+    "5. ✅ **Combiné** les modèles avec le stacking\n",
+    "\n",
+    "**Résultat** : RMSE de ~0.45 avec le stacking (sur échelle log).\n",
+    "\n",
+    "**Améliorations possibles** :\n",
+    "- Feature engineering plus poussé (interactions, polynomial features)\n",
+    "- Optimisation des hyperparamètres avec Optuna\n",
+    "- Utilisation de réseaux de neurones pour la couche finale"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

notebooks/TP3_Iris_Classification.ipynb ADDED Viewed

	@@ -0,0 +1,182 @@

+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# 🌸 TP-3 : Classification Iris — Introduction au ML\n",
+    "\n",
+    "**Objectif** : Classifier les iris en 3 espèces à partir de 4 features.\n",
+    "\n",
+    "**Dataset** : [Iris Flower Dataset](https://www.kaggle.com/datasets/uciml/iris)\n",
+    "\n",
+    "**Compétences** :\n",
+    "- Classification multi-classe\n",
+    "- Visualisation avec PCA\n",
+    "- Frontières de décision\n",
+    "- Comparaison d'algorithmes"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "import matplotlib.pyplot as plt\n",
+    "import seaborn as sns\n",
+    "from sklearn.datasets import load_iris\n",
+    "from sklearn.model_selection import train_test_split, cross_val_score\n",
+    "from sklearn.preprocessing import StandardScaler\n",
+    "from sklearn.decomposition import PCA\n",
+    "from sklearn.neighbors import KNeighborsClassifier\n",
+    "from sklearn.svm import SVC\n",
+    "from sklearn.tree import DecisionTreeClassifier\n",
+    "from sklearn.ensemble import RandomForestClassifier\n",
+    "from sklearn.metrics import accuracy_score, classification_report, confusion_matrix\n",
+    "\n",
+    "sns.set_style('whitegrid')\n",
+    "print(\"✅ Bibliothèques importées !\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Chargement des données\n",
+    "iris = load_iris()\n",
+    "X = iris.data\n",
+    "y = iris.target\n",
+    "feature_names = iris.feature_names\n",
+    "target_names = iris.target_names\n",
+    "\n",
+    "# Création d'un DataFrame\n",
+    "df = pd.DataFrame(X, columns=feature_names)\n",
+    "df['species'] = [target_names[i] for i in y]\n",
+    "\n",
+    "print(f\"📊 Dimensions : {df.shape}\")\n",
+    "print(f\"\\n🌸 Espèces : {target_names}\")\n",
+    "df.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Pairplot pour visualiser les relations\n",
+    "sns.pairplot(df, hue='species', palette='viridis', height=2.5)\n",
+    "plt.suptitle('Pairplot du dataset Iris', y=1.02, fontsize=14)\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Split et normalisation\n",
+    "X_train, X_test, y_train, y_test = train_test_split(\n",
+    "    X, y, test_size=0.2, random_state=42, stratify=y\n",
+    ")\n",
+    "\n",
+    "scaler = StandardScaler()\n",
+    "X_train_scaled = scaler.fit_transform(X_train)\n",
+    "X_test_scaled = scaler.transform(X_test)\n",
+    "\n",
+    "print(f\"Train : {X_train.shape[0]} échantillons\")\n",
+    "print(f\"Test : {X_test.shape[0]} échantillons\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Comparaison des modèles\n",
+    "models = {\n",
+    "    'KNN': KNeighborsClassifier(n_neighbors=5),\n",
+    "    'SVM': SVC(kernel='rbf', random_state=42),\n",
+    "    'Decision Tree': DecisionTreeClassifier(random_state=42),\n",
+    "    'Random Forest': RandomForestClassifier(n_estimators=100, random_state=42)\n",
+    "}\n",
+    "\n",
+    "results = {}\n",
+    "for name, model in models.items():\n",
+    "    model.fit(X_train_scaled, y_train)\n",
+    "    y_pred = model.predict(X_test_scaled)\n",
+    "    accuracy = accuracy_score(y_test, y_pred)\n",
+    "    results[name] = accuracy\n",
+    "    print(f\"{name:15} : {accuracy:.4f}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Visualisation avec PCA (2D)\n",
+    "pca = PCA(n_components=2)\n",
+    "X_pca = pca.fit_transform(X_scaled := StandardScaler().fit_transform(X))\n",
+    "\n",
+    "plt.figure(figsize=(10, 6))\n",
+    "colors = ['red', 'green', 'blue']\n",
+    "for i, target_name in enumerate(target_names):\n",
+    "    plt.scatter(X_pca[y == i, 0], X_pca[y == i, 1], \n",
+    "               c=colors[i], label=target_name, alpha=0.7, s=50)\n",
+    "plt.xlabel(f'PC1 ({pca.explained_variance_ratio_[0]:.2%})')\n",
+    "plt.ylabel(f'PC2 ({pca.explained_variance_ratio_[1]:.2%})')\n",
+    "plt.title('Dataset Iris - Projection PCA')\n",
+    "plt.legend()\n",
+    "plt.show()\n",
+    "\n",
+    "print(f\"Variance expliquée : {pca.explained_variance_ratio_.sum():.2%}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Matrice de confusion pour le meilleur modèle\n",
+    "best_model = SVC(kernel='rbf', random_state=42)\n",
+    "best_model.fit(X_train_scaled, y_train)\n",
+    "y_pred = best_model.predict(X_test_scaled)\n",
+    "\n",
+    "cm = confusion_matrix(y_test, y_pred)\n",
+    "\n",
+    "plt.figure(figsize=(8, 6))\n",
+    "sns.heatmap(cm, annot=True, fmt='d', cmap='Blues',\n",
+    "            xticklabels=target_names, yticklabels=target_names)\n",
+    "plt.title('Matrice de confusion - SVM')\n",
+    "plt.ylabel('Vrai label')\n",
+    "plt.xlabel('Prédiction')\n",
+    "plt.show()\n",
+    "\n",
+    "print(classification_report(y_test, y_pred, target_names=target_names))"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "name": "python",
+   "version": "3.8.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

notebooks/TP4_LSTM_TimeSeries.ipynb ADDED Viewed

	@@ -0,0 +1,371 @@

+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# ⏱️ TP-4 : Prédiction de Séries Temporelles avec LSTM\n",
+    "\n",
+    "**Objectif** : Prédire la consommation électrique avec des réseaux LSTM.\n",
+    "\n",
+    "**Compétences** :\n",
+    "- Préparation de données temporelles\n",
+    "- Fenêtres glissantes (windowing)\n",
+    "- Architecture LSTM avec Keras\n",
+    "- Early stopping et régularisation"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "import matplotlib.pyplot as plt\n",
+    "from sklearn.preprocessing import MinMaxScaler\n",
+    "from sklearn.metrics import mean_squared_error, mean_absolute_error\n",
+    "\n",
+    "import tensorflow as tf\n",
+    "from tensorflow.keras.models import Sequential\n",
+    "from tensorflow.keras.layers import LSTM, Dense, Dropout\n",
+    "from tensorflow.keras.callbacks import EarlyStopping, ReduceLROnPlateau\n",
+    "\n",
+    "# Reproductibilité\n",
+    "np.random.seed(42)\n",
+    "tf.random.set_seed(42)\n",
+    "\n",
+    "print(f\"✅ TensorFlow version : {tf.__version__}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Génération de données synthétiques (consommation électrique)\n",
+    "# En pratique, remplacez par vos données réelles\n",
+    "\n",
+    "def generate_energy_data(n_days=365*2):\n",
+    "    \"\"\"Génère des données de consommation électrique simulées\"\"\"\n",
+    "    hours = np.arange(n_days * 24)\n",
+    "    \n",
+    "    # Tendance\n",
+    "    trend = 0.001 * hours\n",
+    "    \n",
+    "    # Saisonnalité journalière\n",
+    "    daily = 10 * np.sin(2 * np.pi * hours / 24)\n",
+    "    \n",
+    "    # Saisonnalité hebdomadaire\n",
+    "    weekly = 5 * np.sin(2 * np.pi * hours / (24 * 7))\n",
+    "    \n",
+    "    # Saisonnalité annuelle\n",
+    "    yearly = 15 * np.sin(2 * np.pi * hours / (24 * 365))\n",
+    "    \n",
+    "    # Bruit\n",
+    "    noise = np.random.normal(0, 3, len(hours))\n",
+    "    \n",
+    "    # Consommation totale\n",
+    "    consumption = 50 + trend + daily + weekly + yearly + noise\n",
+    "    consumption = np.maximum(consumption, 0)  # Pas de valeurs négatives\n",
+    "    \n",
+    "    return consumption\n",
+    "\n",
+    "# Génération des données\n",
+    "data = generate_energy_data(n_days=730)  # 2 ans de données\n",
+    "\n",
+    "# Création du DataFrame\n",
+    "dates = pd.date_range(start='2022-01-01', periods=len(data), freq='H')\n",
+    "df = pd.DataFrame({'consumption': data}, index=dates)\n",
+    "\n",
+    "print(f\"📊 Période : {df.index[0]} à {df.index[-1]}\")\n",
+    "print(f\"📊 Total : {len(df)} heures de données\")\n",
+    "df.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Visualisation des données\n",
+    "fig, axes = plt.subplots(3, 1, figsize=(15, 10))\n",
+    "\n",
+    "# Vue complète\n",
+    "axes[0].plot(df.index, df['consumption'], alpha=0.7)\n",
+    "axes[0].set_title('Consommation électrique - Vue complète (2 ans)')\n",
+    "axes[0].set_ylabel('kWh')\n",
+    "\n",
+    "# Vue d'une semaine\n",
+    "one_week = df.iloc[:24*7]\n",
+    "axes[1].plot(one_week.index, one_week['consumption'], marker='o')\n",
+    "axes[1].set_title('Consommation - Vue hebdomadaire')\n",
+    "axes[1].set_ylabel('kWh')\n",
+    "\n",
+    "# Vue d'une journée\n",
+    "one_day = df.iloc[:24]\n",
+    "axes[2].plot(one_day.index.hour, one_day['consumption'], marker='o')\n",
+    "axes[2].set_title('Consommation - Vue journalière')\n",
+    "axes[2].set_xlabel('Heure')\n",
+    "axes[2].set_ylabel('kWh')\n",
+    "\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Feature Engineering temporel\n",
+    "df['hour'] = df.index.hour\n",
+    "df['day_of_week'] = df.index.dayofweek\n",
+    "df['month'] = df.index.month\n",
+    "df['is_weekend'] = (df['day_of_week'] >= 5).astype(int)\n",
+    "\n",
+    "# Lags (valeurs précédentes)\n",
+    "for lag in [1, 2, 3, 24, 48]:\n",
+    "    df[f'lag_{lag}'] = df['consumption'].shift(lag)\n",
+    "\n",
+    "# Rolling statistics\n",
+    "df['rolling_mean_24'] = df['consumption'].rolling(window=24).mean()\n",
+    "df['rolling_std_24'] = df['consumption'].rolling(window=24).std()\n",
+    "\n",
+    "# Suppression des NaN\n",
+    "df = df.dropna()\n",
+    "\n",
+    "print(f\"✅ Features créées : {df.shape[1]} colonnes\")\n",
+    "df.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Préparation des séquences pour LSTM\n",
+    "def create_sequences(data, target_col, sequence_length=24):\n",
+    "    \"\"\"\n",
+    "    Crée des séquences pour LSTM\n",
+    "    data : DataFrame avec features\n",
+    "    target_col : nom de la colonne cible\n",
+    "    sequence_length : longueur de la séquence (ex: 24 heures)\n",
+    "    \"\"\"\n",
+    "    X, y = [], []\n",
+    "    values = data.values\n",
+    "    target_idx = data.columns.get_loc(target_col)\n",
+    "    \n",
+    "    for i in range(sequence_length, len(values)):\n",
+    "        X.append(values[i-sequence_length:i])\n",
+    "        y.append(values[i, target_idx])\n",
+    "    \n",
+    "    return np.array(X), np.array(y)\n",
+    "\n",
+    "# Séparation train/test\n",
+    "train_size = int(len(df) * 0.8)\n",
+    "train_df = df.iloc[:train_size]\n",
+    "test_df = df.iloc[train_size:]\n",
+    "\n",
+    "# Normalisation\n",
+    "scaler = MinMaxScaler()\n",
+    "train_scaled = scaler.fit_transform(train_df)\n",
+    "test_scaled = scaler.transform(test_df)\n",
+    "\n",
+    "# Conversion en DataFrame pour garder les noms de colonnes\n",
+    "train_scaled = pd.DataFrame(train_scaled, columns=df.columns, index=train_df.index)\n",
+    "test_scaled = pd.DataFrame(test_scaled, columns=df.columns, index=test_df.index)\n",
+    "\n",
+    "# Création des séquences\n",
+    "SEQUENCE_LENGTH = 24  # 24 heures d'historique\n",
+    "\n",
+    "X_train, y_train = create_sequences(train_scaled, 'consumption', SEQUENCE_LENGTH)\n",
+    "X_test, y_test = create_sequences(test_scaled, 'consumption', SEQUENCE_LENGTH)\n",
+    "\n",
+    "print(f\"📊 X_train shape : {X_train.shape}\")\n",
+    "print(f\"📊 y_train shape : {y_train.shape}\")\n",
+    "print(f\"📊 X_test shape : {X_test.shape}\")\n",
+    "print(f\"📊 y_test shape : {y_test.shape}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Construction du modèle LSTM\n",
+    "model = Sequential([\n",
+    "    LSTM(64, return_sequences=True, input_shape=(SEQUENCE_LENGTH, X_train.shape[2])),\n",
+    "    Dropout(0.2),\n",
+    "    LSTM(32, return_sequences=False),\n",
+    "    Dropout(0.2),\n",
+    "    Dense(16, activation='relu'),\n",
+    "    Dense(1)\n",
+    "])\n",
+    "\n",
+    "model.compile(\n",
+    "    optimizer=tf.keras.optimizers.Adam(learning_rate=0.001),\n",
+    "    loss='mse',\n",
+    "    metrics=['mae']\n",
+    ")\n",
+    "\n",
+    "model.summary()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Callbacks\n",
+    "callbacks = [\n",
+    "    EarlyStopping(\n",
+    "        monitor='val_loss',\n",
+    "        patience=10,\n",
+    "        restore_best_weights=True\n",
+    "    ),\n",
+    "    ReduceLROnPlateau(\n",
+    "        monitor='val_loss',\n",
+    "        factor=0.5,\n",
+    "        patience=5,\n",
+    "        min_lr=1e-6\n",
+    "    )\n",
+    "]\n",
+    "\n",
+    "# Entraînement\n",
+    "history = model.fit(\n",
+    "    X_train, y_train,\n",
+    "    epochs=100,\n",
+    "    batch_size=32,\n",
+    "    validation_split=0.2,\n",
+    "    callbacks=callbacks,\n",
+    "    verbose=1\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Visualisation de l'entraînement\n",
+    "fig, axes = plt.subplots(1, 2, figsize=(14, 5))\n",
+    "\n",
+    "# Loss\n",
+    "axes[0].plot(history.history['loss'], label='Train')\n",
+    "axes[0].plot(history.history['val_loss'], label='Validation')\n",
+    "axes[0].set_title('Loss (MSE)')\n",
+    "axes[0].set_xlabel('Epoch')\n",
+    "axes[0].set_ylabel('Loss')\n",
+    "axes[0].legend()\n",
+    "\n",
+    "# MAE\n",
+    "axes[1].plot(history.history['mae'], label='Train')\n",
+    "axes[1].plot(history.history['val_mae'], label='Validation')\n",
+    "axes[1].set_title('MAE')\n",
+    "axes[1].set_xlabel('Epoch')\n",
+    "axes[1].set_ylabel('MAE')\n",
+    "axes[1].legend()\n",
+    "\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Prédictions\n",
+    "y_pred = model.predict(X_test)\n",
+    "\n",
+    "# Métriques (sur données normalisées)\n",
+    "mse = mean_squared_error(y_test, y_pred)\n",
+    "mae = mean_absolute_error(y_test, y_pred)\n",
+    "rmse = np.sqrt(mse)\n",
+    "\n",
+    "print(f\"📊 MSE  : {mse:.6f}\")\n",
+    "print(f\"📊 MAE  : {mae:.6f}\")\n",
+    "print(f\"📊 RMSE : {rmse:.6f}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Visualisation des prédictions\n",
+    "plt.figure(figsize=(15, 6))\n",
+    "\n",
+    "# Plot des 500 premières prédictions\n",
+    "n_plot = 500\n",
+    "plt.plot(y_test[:n_plot], label='Réel', alpha=0.8)\n",
+    "plt.plot(y_pred[:n_plot], label='Prédit', alpha=0.8)\n",
+    "plt.title(f'Prédictions LSTM - {n_plot} premiers points de test')\n",
+    "plt.xlabel('Temps')\n",
+    "plt.ylabel('Consommation (normalisée)')\n",
+    "plt.legend()\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Scatter plot : Réel vs Prédit\n",
+    "plt.figure(figsize=(8, 8))\n",
+    "plt.scatter(y_test, y_pred, alpha=0.5)\n",
+    "plt.plot([y_test.min(), y_test.max()], [y_test.min(), y_test.max()], 'r--', lw=2)\n",
+    "plt.xlabel('Valeurs réelles')\n",
+    "plt.ylabel('Valeurs prédites')\n",
+    "plt.title('Réel vs Prédit')\n",
+    "plt.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## 🎓 Conclusion\n",
+    "\n",
+    "Dans ce TP, nous avons :\n",
+    "\n",
+    "1. ✅ **Généré** des données de consommation électrique avec patterns temporels\n",
+    "2. ✅ **Créé** des features temporelles (heure, jour, mois, lags, rolling stats)\n",
+    "3. ✅ **Préparé** les séquences pour LSTM avec windowing\n",
+    "4. ✅ **Construit** un modèle LSTM avec Dropout et Early Stopping\n",
+    "5. ✅ **Évalué** les performances sur l'ensemble de test\n",
+    "\n",
+    "**Améliorations possibles** :\n",
+    "- Utiliser des données météo comme features externes\n",
+    "- Tester des architectures plus complexes (Bidirectional LSTM, GRU)\n",
+    "- Faire du multi-step forecasting (prédire plusieurs heures en avance)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "name": "python",
+   "version": "3.8.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

tp.html ADDED Viewed

	@@ -0,0 +1,1389 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Travaux Pratiques — ML Academy</title>
+  <link rel="stylesheet" href="css/shared.css">
+  <style>
+    /* ═══════════════════════════════════════════════════════════════════════════
+       PAGE HERO
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .tp-hero {
+      background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
+      border-bottom: 1px solid var(--border-color);
+      padding: var(--space-3xl) var(--space-xl);
+      text-align: center;
+    }
+    .tp-hero-label {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--primary-light);
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      margin-bottom: var(--space-md);
+    }
+    .tp-hero-title {
+      font-size: clamp(2rem, 5vw, 3rem);
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+    }
+    .tp-hero-subtitle {
+      font-size: 1.1rem;
+      color: var(--text-secondary);
+      max-width: 600px;
+      margin: 0 auto var(--space-xl);
+    }
+    .tp-hero-badges {
+      display: flex;
+      justify-content: center;
+      gap: var(--space-md);
+      flex-wrap: wrap;
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       TP CONTAINER
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .tp-container {
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: var(--space-2xl) var(--space-xl);
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       TP CARD
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .tp-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      margin-bottom: var(--space-2xl);
+      transition: all var(--transition-base);
+    }
+    .tp-card:hover {
+      border-color: var(--primary);
+      box-shadow: var(--shadow-lg), var(--shadow-glow);
+    }
+    .tp-header {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-lg);
+      padding: var(--space-xl);
+      background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary));
+      border-bottom: 1px solid var(--border-color);
+    }
+    .tp-badge {
+      padding: var(--space-sm) var(--space-md);
+      border-radius: var(--radius-md);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.7rem;
+      font-weight: 600;
+      color: white;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      flex-shrink: 0;
+    }
+    .tp-badge.titanic { background: linear-gradient(135deg, #1e40af, #3b82f6); }
+    .tp-badge.housing { background: linear-gradient(135deg, #047857, #10b981); }
+    .tp-badge.iris { background: linear-gradient(135deg, #b45309, #f59e0b); }
+    .tp-badge.energy { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
+    .tp-badge.mnist { background: linear-gradient(135deg, #be123c, #f43f5e); }
+    .tp-badge.sentiment { background: linear-gradient(135deg, #0e7490, #06b6d4); }
+    .tp-header-content {
+      flex: 1;
+    }
+    .tp-title {
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+    }
+    .tp-meta {
+      display: flex;
+      gap: var(--space-sm);
+      flex-wrap: wrap;
+      margin-bottom: var(--space-sm);
+    }
+    .tp-description {
+      font-size: 0.95rem;
+      color: var(--text-secondary);
+      line-height: 1.6;
+    }
+    .tp-colab-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-sm) var(--space-md);
+      background: #f9ab00;
+      color: #000;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.8rem;
+      font-weight: 600;
+      text-decoration: none;
+      border-radius: var(--radius-md);
+      transition: all var(--transition-base);
+      flex-shrink: 0;
+    }
+    .tp-colab-btn:hover {
+      background: #fbbf24;
+      transform: translateY(-2px);
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       TP BODY
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .tp-body {
+      padding: var(--space-xl);
+    }
+    .tp-goals {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 0;
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+      margin-bottom: var(--space-xl);
+    }
+    .tp-goal-box {
+      padding: var(--space-lg);
+      background: var(--bg-tertiary);
+    }
+    .tp-goal-box:first-child {
+      border-right: 1px solid var(--border-color);
+    }
+    .tp-goal-label {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.65rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: var(--space-sm);
+    }
+    .tp-goal-text {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      line-height: 1.6;
+    }
+    .tp-goal-text strong {
+      color: var(--success);
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       CONCEPTS GRID
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .concepts-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+    }
+    .concepts-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: var(--space-sm);
+      margin-bottom: var(--space-xl);
+    }
+    .concept-item {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      padding: var(--space-md);
+      transition: all var(--transition-base);
+    }
+    .concept-item:hover {
+      border-color: var(--primary);
+      transform: translateY(-2px);
+    }
+    .concept-name {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-xs);
+    }
+    .concept-desc {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       STEPS
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .steps-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+    }
+    .steps-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+    .step-item {
+      display: flex;
+      gap: 0;
+      position: relative;
+    }
+    .step-item:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      left: 20px;
+      top: 45px;
+      bottom: 0;
+      width: 2px;
+      background: linear-gradient(180deg, var(--primary), var(--secondary));
+    }
+    .step-dot {
+      width: 42px;
+      height: 42px;
+      background: rgba(99, 102, 241, 0.15);
+      border: 2px solid var(--primary);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--primary-light);
+      flex-shrink: 0;
+      margin-top: 2px;
+      z-index: 1;
+    }
+    .step-content {
+      flex: 1;
+      padding: 0 0 var(--space-xl) var(--space-lg);
+    }
+    .step-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: var(--space-xs);
+    }
+    .step-desc {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-md);
+      line-height: 1.6;
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       DATASET INFO
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .dataset-info {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      padding: var(--space-md) var(--space-lg);
+      background: rgba(99, 102, 241, 0.05);
+      border: 1px solid rgba(99, 102, 241, 0.2);
+      border-radius: var(--radius-md);
+      margin-bottom: var(--space-lg);
+    }
+    .dataset-icon {
+      font-size: 1.5rem;
+    }
+    .dataset-content {
+      flex: 1;
+    }
+    .dataset-name {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .dataset-link {
+      font-size: 0.75rem;
+      color: var(--primary-light);
+      text-decoration: none;
+    }
+    .dataset-link:hover {
+      text-decoration: underline;
+    }
+    .dataset-stats {
+      display: flex;
+      gap: var(--space-md);
+    }
+    .dataset-stat {
+      text-align: center;
+    }
+    .dataset-stat-value {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 1rem;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+    .dataset-stat-label {
+      font-size: 0.65rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       EXPECTED OUTPUT
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .expected-output {
+      background: rgba(16, 185, 129, 0.08);
+      border: 1px solid rgba(16, 185, 129, 0.25);
+      border-radius: var(--radius-md);
+      padding: var(--space-md) var(--space-lg);
+      margin-top: var(--space-md);
+    }
+    .expected-label {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.65rem;
+      color: var(--success);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: var(--space-xs);
+    }
+    .expected-text {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.8rem;
+      color: var(--text-secondary);
+      line-height: 1.6;
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       CTA SECTION
+       ═══════════════════════════════════════════════════════════════════════════ */
+    .tp-cta {
+      text-align: center;
+      padding: var(--space-3xl);
+      background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary));
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-lg);
+      margin-top: var(--space-2xl);
+    }
+    .tp-cta-icon {
+      font-size: 3rem;
+      margin-bottom: var(--space-md);
+    }
+    .tp-cta-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+    }
+    .tp-cta-text {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-xl);
+    }
+    /* ═══════════════════════════════════════════════════════════════════════════
+       RESPONSIVE
+       ═══════════════════════════════════════════════════════════════════════════ */
+    @media (max-width: 768px) {
+      .tp-goals {
+        grid-template-columns: 1fr;
+      }
+      .tp-goal-box:first-child {
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+      }
+      .tp-header {
+        flex-direction: column;
+      }
+      .dataset-info {
+        flex-direction: column;
+        text-align: center;
+      }
+      .dataset-stats {
+        justify-content: center;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Particles Background -->
+  <div class="particles-container">
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+    <div class="particle"></div>
+  </div>
+  <!-- Navigation -->
+  <nav class="navbar">
+    <a href="index.html" class="navbar-brand">
+      <div class="brand-logo">🧠</div>
+      <span>ML Academy</span>
+    </a>
+    <div class="navbar-nav">
+      <a href="index.html" class="nav-link">
+        <span class="nav-icon">🏠</span>
+        <span>Accueil</span>
+      </a>
+      <a href="cours.html" class="nav-link">
+        <span class="nav-icon">📚</span>
+        <span>Cours</span>
+      </a>
+      <a href="tp.html" class="nav-link active">
+        <span class="nav-icon">💻</span>
+        <span>TPs</span>
+      </a>
+      <a href="feedback.html" class="nav-link">
+        <span class="nav-icon">💬</span>
+        <span>Contact</span>
+      </a>
+    </div>
+    <div class="nav-badge">
+      <div class="dot"></div>
+      <span>Google Colab Ready</span>
+    </div>
+  </nav>
+  <!-- Page Wrapper -->
+  <div class="page-wrapper">
+    <!-- Hero -->
+    <section class="tp-hero">
+      <div class="tp-hero-label">Travaux Pratiques</div>
+      <h1 class="tp-hero-title">💻 Notebooks Guidés</h1>
+      <p class="tp-hero-subtitle">
+        6 TPs complets sur des datasets réels de Kaggle. Exécutez directement sur Google Colab,
+        aucune installation requise.
+      </p>
+      <div class="tp-hero-badges">
+        <span class="badge badge-primary">📊 6 Notebooks</span>
+        <span class="badge badge-success">☁️ Google Colab</span>
+        <span class="badge badge-secondary">📈 Datasets Kaggle</span>
+        <span class="badge badge-accent">0 Installation</span>
+      </div>
+    </section>
+    <!-- TP Container -->
+    <div class="tp-container">
+      <!-- TP 1: Titanic -->
+      <div class="tp-card scroll-animate">
+        <div class="tp-header">
+          <div class="tp-badge titanic">TP-1</div>
+          <div class="tp-header-content">
+            <h2 class="tp-title">Survie sur le Titanic — Classification</h2>
+            <div class="tp-meta">
+              <span class="badge badge-primary">⏱️ 30 min</span>
+              <span class="badge badge-secondary">Classification</span>
+              <span class="badge badge-success">Scikit-learn</span>
+              <span class="badge badge-accent">Pandas</span>
+            </div>
+            <p class="tp-description">
+              Prédire la survie des passagers du Titanic à partir de leurs caractéristiques
+              (âge, sexe, classe, etc.). Le dataset classique pour débuter en ML.
+            </p>
+          </div>
+          <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>
+            </svg>
+            Ouvrir dans Colab
+          </a>
+        </div>
+        <div class="tp-body">
+          <div class="dataset-info">
+            <div class="dataset-icon">🚢</div>
+            <div class="dataset-content">
+              <div class="dataset-name">Dataset : Titanic - Machine Learning from Disaster</div>
+              <a href="https://www.kaggle.com/competitions/titanic" target="_blank" class="dataset-link">
+                🔗 kaggle.com/competitions/titanic
+              </a>
+            </div>
+            <div class="dataset-stats">
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">891</div>
+                <div class="dataset-stat-label">Lignes</div>
+              </div>
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">12</div>
+                <div class="dataset-stat-label">Colonnes</div>
+              </div>
+            </div>
+          </div>
+          <div class="tp-goals">
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">🎯 Objectif</div>
+              <p class="tp-goal-text">
+                Construire un modèle de classification binaire pour prédire si un passager
+                a survécu ou non au naufrage du Titanic.
+              </p>
+            </div>
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">✅ Résultat attendu</div>
+              <p class="tp-goal-text">
+                Accuracy > <strong>80%</strong> sur l'ensemble de test.
+                Analyse de l'importance des features.
+              </p>
+            </div>
+          </div>
+          <h3 class="concepts-title">🧠 Concepts utilisés</h3>
+          <div class="concepts-grid">
+            <div class="concept-item">
+              <div class="concept-name">Prétraitement</div>
+              <div class="concept-desc">Gestion des valeurs manquantes</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Encodage</div>
+              <div class="concept-desc">Variables catégorielles</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Feature Engineering</div>
+              <div class="concept-desc">Création de nouvelles features</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Random Forest</div>
+              <div class="concept-desc">Classification</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Cross-Validation</div>
+              <div class="concept-desc">Évaluation robuste</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Grid Search</div>
+              <div class="concept-desc">Optimisation hyperparamètres</div>
+            </div>
+          </div>
+          <h3 class="steps-title">📋 Étapes du TP</h3>
+          <div class="steps-list">
+            <div class="step-item">
+              <div class="step-dot">1</div>
+              <div class="step-content">
+                <div class="step-title">Exploration des données</div>
+                <div class="step-desc">
+                  Charger le dataset, analyser la distribution des variables,
+                  identifier les valeurs manquantes et les outliers.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">2</div>
+              <div class="step-content">
+                <div class="step-title">Prétraitement</div>
+                <div class="step-desc">
+                  Remplir les valeurs manquantes, encoder les variables catégorielles
+                  (Sex, Embarked), créer des features (FamilySize, IsAlone).
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">3</div>
+              <div class="step-content">
+                <div class="step-title">Modélisation</div>
+                <div class="step-desc">
+                  Entraîner plusieurs modèles : Logistic Regression, Random Forest,
+                  Gradient Boosting. Comparer leurs performances.
+                </div>
+                <div class="expected-output">
+                  <div class="expected-label">Résultats attendus</div>
+                  <div class="expected-text">
+                    Random Forest: 82% accuracy<br>
+                    Feature importance: Sex > Pclass > Age > Fare
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- TP 2: House Prices -->
+      <div class="tp-card scroll-animate">
+        <div class="tp-header">
+          <div class="tp-badge housing">TP-2</div>
+          <div class="tp-header-content">
+            <h2 class="tp-title">Prix des Maisons — Régression Avancée</h2>
+            <div class="tp-meta">
+              <span class="badge badge-primary">⏱️ 45 min</span>
+              <span class="badge badge-secondary">Régression</span>
+              <span class="badge badge-success">XGBoost</span>
+              <span class="badge badge-accent">Feature Engineering</span>
+            </div>
+            <p class="tp-description">
+              Prédire le prix de vente des maisons à Ames, Iowa. Un problème de régression
+              riche en features avec beaucoup de prétraitement nécessaire.
+            </p>
+          </div>
+          <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>
+            </svg>
+            Ouvrir dans Colab
+          </a>
+        </div>
+        <div class="tp-body">
+          <div class="dataset-info">
+            <div class="dataset-icon">🏠</div>
+            <div class="dataset-content">
+              <div class="dataset-name">Dataset : House Prices - Advanced Regression Techniques</div>
+              <a href="https://www.kaggle.com/competitions/house-prices-advanced-regression-techniques" target="_blank" class="dataset-link">
+                🔗 kaggle.com/competitions/house-prices
+              </a>
+            </div>
+            <div class="dataset-stats">
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">1460</div>
+                <div class="dataset-stat-label">Lignes</div>
+              </div>
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">81</div>
+                <div class="dataset-stat-label">Colonnes</div>
+              </div>
+            </div>
+          </div>
+          <div class="tp-goals">
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">🎯 Objectif</div>
+              <p class="tp-goal-text">
+                Prédire le prix de vente des maisons avec le plus faible RMSE possible
+                en utilisant 79 features explicatives.
+              </p>
+            </div>
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">✅ Résultat attendu</div>
+              <p class="tp-goal-text">
+                RMSE <strong>&lt; 30,000$</strong> sur log-transformed prices.
+                Top 20% du leaderboard Kaggle.
+              </p>
+            </div>
+          </div>
+          <h3 class="concepts-title">🧠 Concepts utilisés</h3>
+          <div class="concepts-grid">
+            <div class="concept-item">
+              <div class="concept-name">Outlier Detection</div>
+              <div class="concept-desc">Détection et traitement</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Skewness</div>
+              <div class="concept-desc">Transformation log</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Correlation Analysis</div>
+              <div class="concept-desc">Matrice de corrélation</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">XGBoost</div>
+              <div class="concept-desc">Gradient boosting</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Stacking</div>
+              <div class="concept-desc">Ensemble de modèles</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">K-Fold CV</div>
+              <div class="concept-desc">Validation croisée</div>
+            </div>
+          </div>
+          <h3 class="steps-title">📋 Étapes du TP</h3>
+          <div class="steps-list">
+            <div class="step-item">
+              <div class="step-dot">1</div>
+              <div class="step-content">
+                <div class="step-title">Analyse exploratoire avancée</div>
+                <div class="step-desc">
+                  Visualiser la distribution des prix, identifier les outliers,
+                  analyser les corrélations entre features et prix.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">2</div>
+              <div class="step-content">
+                <div class="step-title">Feature Engineering intensif</div>
+                <div class="step-desc">
+                  Créer des features composites (TotalSF, HouseAge),
+                  regrouper les catégories rares, transformer les variables skewed.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">3</div>
+              <div class="step-content">
+                <div class="step-title">Modélisation avancée</div>
+                <div class="step-desc">
+                  XGBoost, LightGBM, Random Forest en stacking.
+                  Optimisation des hyperparamètres avec Optuna.
+                </div>
+                <div class="expected-output">
+                  <div class="expected-label">Résultats attendus</div>
+                  <div class="expected-text">
+                    XGBoost: RMSE = 0.12 (log scale)<br>
+                    Feature importance: OverallQual > GrLivArea > GarageCars
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- TP 3: Iris -->
+      <div class="tp-card scroll-animate">
+        <div class="tp-header">
+          <div class="tp-badge iris">TP-3</div>
+          <div class="tp-header-content">
+            <h2 class="tp-title">Classification Iris — Introduction au ML</h2>
+            <div class="tp-meta">
+              <span class="badge badge-primary">⏱️ 20 min</span>
+              <span class="badge badge-secondary">Classification</span>
+              <span class="badge badge-success">Débutant</span>
+              <span class="badge badge-accent">Visualisation</span>
+            </div>
+            <p class="tp-description">
+              Le dataset classique pour la classification multi-classe.
+              Identifier l'espèce d'iris à partir des mesures des pétales et sépales.
+            </p>
+          </div>
+          <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>
+            </svg>
+            Ouvrir dans Colab
+          </a>
+        </div>
+        <div class="tp-body">
+          <div class="dataset-info">
+            <div class="dataset-icon">🌸</div>
+            <div class="dataset-content">
+              <div class="dataset-name">Dataset : Iris Flower Classification</div>
+              <a href="https://www.kaggle.com/datasets/uciml/iris" target="_blank" class="dataset-link">
+                🔗 kaggle.com/datasets/uciml/iris
+              </a>
+            </div>
+            <div class="dataset-stats">
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">150</div>
+                <div class="dataset-stat-label">Lignes</div>
+              </div>
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">5</div>
+                <div class="dataset-stat-label">Colonnes</div>
+              </div>
+            </div>
+          </div>
+          <div class="tp-goals">
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">🎯 Objectif</div>
+              <p class="tp-goal-text">
+                Classifier les iris en 3 espèces (Setosa, Versicolor, Virginica)
+                à partir de 4 features numériques.
+              </p>
+            </div>
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">✅ Résultat attendu</div>
+              <p class="tp-goal-text">
+                Accuracy de <strong>95%+</strong>. Visualisation des frontières de décision.
+              </p>
+            </div>
+          </div>
+          <h3 class="concepts-title">🧠 Concepts utilisés</h3>
+          <div class="concepts-grid">
+            <div class="concept-item">
+              <div class="concept-name">KNN</div>
+              <div class="concept-desc">K-Nearest Neighbors</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">SVM</div>
+              <div class="concept-desc">Support Vector Machine</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Decision Boundary</div>
+              <div class="concept-desc">Visualisation</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">PCA</div>
+              <div class="concept-desc">Réduction de dimension</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Pairplot</div>
+              <div class="concept-desc">Visualisation multi-variables</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Confusion Matrix</div>
+              <div class="concept-desc">Évaluation détaillée</div>
+            </div>
+          </div>
+          <h3 class="steps-title">📋 Étapes du TP</h3>
+          <div class="steps-list">
+            <div class="step-item">
+              <div class="step-dot">1</div>
+              <div class="step-content">
+                <div class="step-title">Visualisation exploratoire</div>
+                <div class="step-desc">
+                  Pairplot pour voir les relations entre features,
+                  boxplots par espèce pour identifier les patterns.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">2</div>
+              <div class="step-content">
+                <div class="step-title">Comparaison des algorithmes</div>
+                <div class="step-desc">
+                  KNN, SVM, Decision Tree, Random Forest.
+                  Comparer accuracy et temps d'entraînement.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">3</div>
+              <div class="step-content">
+                <div class="step-title">Visualisation des frontières</div>
+                <div class="step-desc">
+                  Tracer les frontières de décision en 2D après PCA.
+                  Comprendre comment chaque algorithme sépare les classes.
+                </div>
+                <div class="expected-output">
+                  <div class="expected-label">Résultats attendus</div>
+                  <div class="expected-text">
+                    SVM: 98% accuracy<br>
+                    Setosa parfaitement séparable, Virginica/Versicolor plus proches
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- TP 4: Energy Consumption -->
+      <div class="tp-card scroll-animate">
+        <div class="tp-header">
+          <div class="tp-badge energy">TP-4</div>
+          <div class="tp-header-content">
+            <h2 class="tp-title">Consommation Énergétique — Séries Temporelles</h2>
+            <div class="tp-meta">
+              <span class="badge badge-primary">⏱️ 40 min</span>
+              <span class="badge badge-secondary">Time Series</span>
+              <span class="badge badge-success">LSTM</span>
+              <span class="badge badge-accent">TensorFlow</span>
+            </div>
+            <p class="tp-description">
+              Prédire la consommation électrique d'un bâtiment à partir de données
+              temporelles. Introduction aux LSTM et aux prédictions séquentielles.
+            </p>
+          </div>
+          <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>
+            </svg>
+            Ouvrir dans Colab
+          </a>
+        </div>
+        <div class="tp-body">
+          <div class="dataset-info">
+            <div class="dataset-icon">⚡</div>
+            <div class="dataset-content">
+              <div class="dataset-name">Dataset : ASHRAE - Great Energy Predictor III</div>
+              <a href="https://www.kaggle.com/c/ashrae-energy-prediction" target="_blank" class="dataset-link">
+                🔗 kaggle.com/c/ashrae-energy-prediction
+              </a>
+            </div>
+            <div class="dataset-stats">
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">20M+</div>
+                <div class="dataset-stat-label">Lignes</div>
+              </div>
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">1449</div>
+                <div class="dataset-stat-label">Bâtiments</div>
+              </div>
+            </div>
+          </div>
+          <div class="tp-goals">
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">🎯 Objectif</div>
+              <p class="tp-goal-text">
+                Prédire la consommation énergétique horaire de bâtiments
+                à partir de données météo et historiques.
+              </p>
+            </div>
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">✅ Résultat attendu</div>
+              <p class="tp-goal-text">
+                RMSE <strong>&lt; 100</strong> sur la consommation normalisée.
+                Capture des patterns journaliers et saisonniers.
+              </p>
+            </div>
+          </div>
+          <h3 class="concepts-title">🧠 Concepts utilisés</h3>
+          <div class="concepts-grid">
+            <div class="concept-item">
+              <div class="concept-name">Time Series</div>
+              <div class="concept-desc">Traitement séquentiel</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">LSTM</div>
+              <div class="concept-desc">Réseaux récurrents</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Seasonality</div>
+              <div class="concept-desc">Patterns saisonniers</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Windowing</div>
+              <div class="concept-desc">Fenêtres glissantes</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Early Stopping</div>
+              <div class="concept-desc">Arrêt automatique</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">TensorBoard</div>
+              <div class="concept-desc">Visualisation training</div>
+            </div>
+          </div>
+          <h3 class="steps-title">📋 Étapes du TP</h3>
+          <div class="steps-list">
+            <div class="step-item">
+              <div class="step-dot">1</div>
+              <div class="step-content">
+                <div class="step-title">Analyse temporelle</div>
+                <div class="step-desc">
+                  Visualiser les patterns horaires, journaliers, hebdomadaires.
+                  Identifier la saisonnalité et les tendances.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">2</div>
+              <div class="step-content">
+                <div class="step-title">Feature Engineering temporel</div>
+                <div class="step-desc">
+                  Créer des features temporelles (hour, day_of_week, month),
+                  lags (valeurs précédentes), rolling statistics.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">3</div>
+              <div class="step-content">
+                <div class="step-title">Modélisation LSTM</div>
+                <div class="step-desc">
+                  Construire un modèle LSTM avec Keras.
+                  Entraînement avec early stopping et learning rate scheduling.
+                </div>
+                <div class="expected-output">
+                  <div class="expected-label">Résultats attendus</div>
+                  <div class="expected-text">
+                    LSTM: RMSE = 85 sur test set<br>
+                    Capture des pics de consommation matin/soir
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- TP 5: MNIST -->
+      <div class="tp-card scroll-animate">
+        <div class="tp-header">
+          <div class="tp-badge mnist">TP-5</div>
+          <div class="tp-header-content">
+            <h2 class="tp-title">Reconnaissance de Chiffres — Deep Learning</h2>
+            <div class="tp-meta">
+              <span class="badge badge-primary">⏱️ 35 min</span>
+              <span class="badge badge-secondary">CNN</span>
+              <span class="badge badge-success">Computer Vision</span>
+              <span class="badge badge-accent">Keras</span>
+            </div>
+            <p class="tp-description">
+              Classification d'images de chiffres manuscrits (0-9) avec des réseaux de neurones convolutifs (CNN).
+              Introduction au Computer Vision.
+            </p>
+          </div>
+          <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>
+            </svg>
+            Ouvrir dans Colab
+          </a>
+        </div>
+        <div class="tp-body">
+          <div class="dataset-info">
+            <div class="dataset-icon">🔢</div>
+            <div class="dataset-content">
+              <div class="dataset-name">Dataset : MNIST Handwritten Digits</div>
+              <a href="https://www.kaggle.com/datasets/hojjatk/mnist-dataset" target="_blank" class="dataset-link">
+                🔗 kaggle.com/datasets/hojjatk/mnist-dataset
+              </a>
+            </div>
+            <div class="dataset-stats">
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">70K</div>
+                <div class="dataset-stat-label">Images</div>
+              </div>
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">28×28</div>
+                <div class="dataset-stat-label">Pixels</div>
+              </div>
+            </div>
+          </div>
+          <div class="tp-goals">
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">🎯 Objectif</div>
+              <p class="tp-goal-text">
+                Classifier les images de chiffres manuscrits (0-9)
+                avec un CNN et atteindre >99% d'accuracy.
+              </p>
+            </div>
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">✅ Résultat attendu</div>
+              <p class="tp-goal-text">
+                Accuracy de <strong>99%+</strong> sur le test set.
+                Visualisation des filtres appris par le CNN.
+              </p>
+            </div>
+          </div>
+          <h3 class="concepts-title">🧠 Concepts utilisés</h3>
+          <div class="concepts-grid">
+            <div class="concept-item">
+              <div class="concept-name">CNN</div>
+              <div class="concept-desc">Convolutional Neural Network</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Conv2D</div>
+              <div class="concept-desc">Couches de convolution</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">MaxPooling</div>
+              <div class="concept-desc">Réduction spatiale</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Dropout</div>
+              <div class="concept-desc">Régularisation</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">BatchNorm</div>
+              <div class="concept-desc">Normalisation</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Data Augmentation</div>
+              <div class="concept-desc">Augmentation données</div>
+            </div>
+          </div>
+          <h3 class="steps-title">📋 Étapes du TP</h3>
+          <div class="steps-list">
+            <div class="step-item">
+              <div class="step-dot">1</div>
+              <div class="step-content">
+                <div class="step-title">Exploration des images</div>
+                <div class="step-desc">
+                  Visualiser des exemples de chaque chiffre,
+                  analyser la distribution des classes.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">2</div>
+              <div class="step-content">
+                <div class="step-title">Construction du CNN</div>
+                <div class="step-desc">
+                  Architecture: Conv2D → MaxPool → Conv2D → MaxPool →
+                  Flatten → Dense → Dropout → Output (10 classes).
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">3</div>
+              <div class="step-content">
+                <div class="step-title">Entraînement et évaluation</div>
+                <div class="step-desc">
+                  Entraînement avec data augmentation,
+                  visualisation des prédictions erronées.
+                </div>
+                <div class="expected-output">
+                  <div class="expected-label">Résultats attendus</div>
+                  <div class="expected-text">
+                    CNN: 99.2% accuracy<br>
+                    Erreurs principalement sur 4/9 et 3/8 similaires
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- TP 6: Sentiment Analysis -->
+      <div class="tp-card scroll-animate">
+        <div class="tp-header">
+          <div class="tp-badge sentiment">TP-6</div>
+          <div class="tp-header-content">
+            <h2 class="tp-title">Analyse de Sentiment — NLP</h2>
+            <div class="tp-meta">
+              <span class="badge badge-primary">⏱️ 40 min</span>
+              <span class="badge badge-secondary">NLP</span>
+              <span class="badge badge-success">Embeddings</span>
+              <span class="badge badge-accent">Transformers</span>
+            </div>
+            <p class="tp-description">
+              Classifier les avis IMDB comme positifs ou négatifs.
+              Introduction au NLP et aux word embeddings avec les Transformers.
+            </p>
+          </div>
+          <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>
+            </svg>
+            Ouvrir dans Colab
+          </a>
+        </div>
+        <div class="tp-body">
+          <div class="dataset-info">
+            <div class="dataset-icon">🎬</div>
+            <div class="dataset-content">
+              <div class="dataset-name">Dataset : IMDB Movie Reviews</div>
+              <a href="https://www.kaggle.com/datasets/lakshmi25npathi/imdb-dataset-of-50k-movie-reviews" target="_blank" class="dataset-link">
+                🔗 kaggle.com/datasets/lakshmi25npathi/imdb-dataset
+              </a>
+            </div>
+            <div class="dataset-stats">
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">50K</div>
+                <div class="dataset-stat-label">Avis</div>
+              </div>
+              <div class="dataset-stat">
+                <div class="dataset-stat-value">2</div>
+                <div class="dataset-stat-label">Classes</div>
+              </div>
+            </div>
+          </div>
+          <div class="tp-goals">
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">🎯 Objectif</div>
+              <p class="tp-goal-text">
+                Classifier les avis de films comme positifs ou négatifs
+                en utilisant des embeddings et un LSTM ou BERT.
+              </p>
+            </div>
+            <div class="tp-goal-box">
+              <div class="tp-goal-label">✅ Résultat attendu</div>
+              <p class="tp-goal-text">
+                Accuracy de <strong>90%+</strong> avec LSTM,
+                <strong>95%+</strong> avec BERT fine-tuning.
+              </p>
+            </div>
+          </div>
+          <h3 class="concepts-title">🧠 Concepts utilisés</h3>
+          <div class="concepts-grid">
+            <div class="concept-item">
+              <div class="concept-name">Tokenization</div>
+              <div class="concept-desc">Découpage en tokens</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Word Embeddings</div>
+              <div class="concept-desc">Word2Vec, GloVe</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">LSTM pour NLP</div>
+              <div class="concept-desc">Séquences de texte</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Attention</div>
+              <div class="concept-desc">Mécanisme d'attention</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">BERT</div>
+              <div class="concept-desc">Transformers pré-entraînés</div>
+            </div>
+            <div class="concept-item">
+              <div class="concept-name">Hugging Face</div>
+              <div class="concept-desc">Bibliothèque transformers</div>
+            </div>
+          </div>
+          <h3 class="steps-title">📋 Étapes du TP</h3>
+          <div class="steps-list">
+            <div class="step-item">
+              <div class="step-dot">1</div>
+              <div class="step-content">
+                <div class="step-title">Prétraitement du texte</div>
+                <div class="step-desc">
+                  Nettoyage (HTML, ponctuation), tokenization,
+                  padding/truncation pour avoir des séquences de même longueur.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">2</div>
+              <div class="step-content">
+                <div class="step-title">Embeddings et LSTM</div>
+                <div class="step-desc">
+                  Couche d'embedding apprenable + LSTM bidirectionnel
+                  + couche dense de sortie.
+                </div>
+              </div>
+            </div>
+            <div class="step-item">
+              <div class="step-dot">3</div>
+              <div class="step-content">
+                <div class="step-title">Fine-tuning BERT (bonus)</div>
+                <div class="step-desc">
+                  Utiliser un modèle BERT pré-entraîné via Hugging Face,
+                  fine-tuner sur les avis IMDB.
+                </div>
+                <div class="expected-output">
+                  <div class="expected-label">Résultats attendus</div>
+                  <div class="expected-text">
+                    LSTM: 88% accuracy<br>
+                    BERT fine-tuned: 94% accuracy
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- CTA -->
+      <div class="tp-cta scroll-animate">
+        <div class="tp-cta-icon" style="width: 60px; height: 60px; background: linear-gradient(135deg, var(--success), #059669); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: white; margin: 0 auto var(--space-md);">OK</div>
+        <h2 class="tp-cta-title">TPs termines ?</h2>
+        <p class="tp-cta-text">
+          Felicitations ! Vous avez maintenant une solide experience pratique
+          en Machine Learning. Continuez avec le cours theorique ou posez vos questions.
+        </p>
+        <div class="cta-buttons" style="display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap;">
+          <a href="cours.html" class="btn btn-primary btn-lg">Retour aux cours</a>
+          <a href="feedback.html" class="btn btn-outline btn-lg">Poser une question</a>
+        </div>
+      </div>
+    </div>
+    <!-- Author Footer -->
+    <footer class="footer" style="background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: var(--space-xl); text-align: center;">
+      <div style="display: flex; justify-content: center; gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-md);">
+        <a href="mailto:imadmaalouf02@gmail.com" style="display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
+          imadmaalouf02@gmail.com
+        </a>
+        <a href="https://github.com/imadmaalouf02" target="_blank" style="display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+          GitHub
+        </a>
+        <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" style="display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+          Hugging Face Space
+        </a>
+      </div>
+    </footer>
+    <!-- Footer -->
+    <footer class="footer">
+      <p class="footer-text">
+        ML Academy — Travaux Pratiques —
+        <span class="footer-brand">GE-MCI 4A</span> — 2025/2026
+      </p>
+      <p class="footer-text" style="margin-top: var(--space-sm);">
+        Datasets : Kaggle · Execution : Google Colab · Notebooks : Python
+      </p>
+      <p class="footer-text" style="margin-top: var(--space-sm); font-size: 0.75rem; color: var(--text-muted);">
+        Formateur : Imad Maalouf
+      </p>
+    </footer>
+  </div>
+  <!-- Scripts -->
+  <script src="js/shared.js"></script>
+  <script>
+    // Scroll animations
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, observerOptions);
+    document.querySelectorAll('.scroll-animate').forEach(el => {
+      observer.observe(el);
+    });
+    // Stagger animation for cards
+    document.querySelectorAll('.tp-card').forEach((card, index) => {
+      card.style.animationDelay = `${index * 0.15}s`;
+    });
+  </script>
+</body>
+</html>