diff --git a/parcoursup-app/src/components/comparateur.riot b/parcoursup-app/src/components/comparateur.riot
new file mode 100644
index 0000000..569dc27
--- /dev/null
+++ b/parcoursup-app/src/components/comparateur.riot
@@ -0,0 +1,106 @@
+<comparateur>
+
+  <h2>Comparateur de formations</h2>
+
+  <a href="#">← Retour à la recherche</a>
+  <a href="#/estimation">🎯 Estimer mes chances</a>
+
+
+  <div if={ state.formations.length === 0 }>
+    Aucune formation sélectionnée.
+  </div>
+
+
+
+
+  <div class="comparateur-grille">
+
+    <div each={ formation in state.formations } class="comparateur-colonne">
+
+      <h3>{ formation.fil_lib_voe_acc }</h3>
+      <h4>{ formation.g_ea_lib_vx }</h4>
+      <p>{ formation.ville_etab } ({ formation.dep_lib })</p>
+      <p>Taux d'accès : { formation.taux_acces_ens }%</p>
+      <p>Places : { formation.capa_fin }</p>
+      <p>Candidatures : { formation.voe_tot }</p>
+      <p>Admis : { formation.acc_tot }</p>
+      <p>Bac Général : { formation.pct_bg }%</p>
+      <p>Bac Techno : { formation.pct_bt }%</p>
+      <p>Bac Pro : { formation.pct_bp }%</p>
+      <p>Mention AB : { formation.pct_ab }%</p>
+      <p>Mention B : { formation.pct_b }%</p>
+      <p>Mention TB : { formation.pct_tb }%</p>
+      <button onclick={ () => retirerFormation(formation) }>
+        Retirer
+      </button>
+
+    </div>
+
+  </div>
+
+
+
+
+
+
+
+
+
+  <style>
+
+    .comparateur-grille
+    {
+      display: flex;
+      flex-direction: row;
+      gap: 20px;
+    }
+
+    .comparateur-colonne
+    {
+      border: 1px solid #ccc;
+      padding: 15px;
+      min-width: 200px;
+    }
+
+  </style>
+
+
+
+
+
+
+
+
+
+
+  <script>
+
+    export default
+    {
+      state:
+      {
+        formations: []
+      },
+
+      onMounted()
+      {
+        const saved = localStorage.getItem('comparateur')
+        if (saved)
+        {
+          this.update({ formations: JSON.parse(saved) })
+        }
+      },
+
+      retirerFormation(formation)
+      {
+        const formations = this.state.formations.filter(f => f.cod_aff_form !== formation.cod_aff_form)
+        localStorage.setItem('comparateur', JSON.stringify(formations))
+        this.update({ formations })
+      }
+    }
+
+  </script>
+
+
+
+</comparateur>
\ No newline at end of file
diff --git a/parcoursup-app/src/components/estimation-chances.riot b/parcoursup-app/src/components/estimation-chances.riot
new file mode 100644
index 0000000..9095ef7
--- /dev/null
+++ b/parcoursup-app/src/components/estimation-chances.riot
@@ -0,0 +1,132 @@
+<estimation-chances>
+
+  <h2>Estimer mes chances</h2>
+
+  <div class="formulaire">
+
+    <label>Série de bac :</label>
+    <select onchange={ changerSerie }>
+      <option value="bg">Bac Général</option>
+      <option value="bt">Bac Technologique</option>
+      <option value="bp">Bac Professionnel</option>
+    </select>
+
+    <label>Moyenne en terminale :</label>
+    <input 
+      type="number" 
+      min="0" 
+      max="20" 
+      step="0.1"
+      placeholder="Ex: 13.5"
+      onchange={ changerMoyenne }>
+
+  </div>
+
+  <div if={ state.formations.length === 0 }>
+    Aucune formation dans le comparateur.
+  </div>
+
+  <div each={ f in state.formations } class="estimation-ligne">
+
+    <h3>{ f.fil_lib_voe_acc } — { f.g_ea_lib_vx }</h3>
+
+    <div if={ state.serie && state.moyenne }>
+      <p>Taux d'accès global : <b>{ f.taux_acces_ens }%</b></p>
+      <p>% admis de ta série : <b>{ getPctSerie(f) }%</b></p>
+      <p>Estimation : <b>{ getEstimation(f) }</b></p>
+    </div>
+
+    <div if={ !state.serie || !state.moyenne }>
+      Remplis le formulaire ci-dessus pour voir ton estimation.
+    </div>
+
+  </div>
+
+  <a href="#/comparateur">← Retour au comparateur</a>
+
+  <style>
+
+    .formulaire
+    {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      max-width: 300px;
+      margin: 20px 0;
+    }
+
+    .estimation-ligne
+    {
+      border: 1px solid #ccc;
+      padding: 15px;
+      margin: 10px 0;
+    }
+
+  </style>
+
+  <script>
+
+    export default
+    {
+      state:
+      {
+        formations: [],
+        serie: 'bg',
+        moyenne: null
+      },
+
+      onMounted()
+      {
+        const saved = localStorage.getItem('comparateur')
+        if (saved)
+        {
+          this.update({ formations: JSON.parse(saved) })
+        }
+      },
+
+      changerSerie(e)
+      {
+        this.update({ serie: e.target.value })
+      },
+
+      changerMoyenne(e)
+      {
+        this.update({ moyenne: parseFloat(e.target.value) })
+      },
+
+      getPctSerie(formation)
+      {
+        const serie = this.state.serie
+        if (serie === 'bg') return formation.pct_bg
+        if (serie === 'bt') return formation.pct_bt
+        if (serie === 'bp') return formation.pct_bp
+        return 0
+      },
+
+      getEstimation(formation)
+      {
+        const taux = formation.taux_acces_ens
+        const moyenne = this.state.moyenne
+        const pctSerie = this.getPctSerie(formation)
+
+        if (pctSerie === 0) return "Très faible — ta série est rarement admise"
+
+        let score = taux
+
+        if (moyenne >= 16) score += 20
+        else if (moyenne >= 14) score += 10
+        else if (moyenne >= 12) score += 0
+        else if (moyenne >= 10) score -= 10
+        else score -= 20
+
+        if (score >= 70) return "Good ;D"
+        if (score >= 40) return "Okay :)"
+        if (score >= 20) return "Mehh :/"
+        if (score >= 2)  return "Nope :("
+        return "Your chances are so low i had to learn how to put an emoji to tell you how dead they were: 💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀 (i hope that many emoji wont break my page...)"
+      }
+    }
+
+  </script>
+
+</estimation-chances>
\ No newline at end of file
diff --git a/parcoursup-app/src/components/ligne-resultat.riot b/parcoursup-app/src/components/ligne-resultat.riot
index ad688fb..189efbd 100644
--- a/parcoursup-app/src/components/ligne-resultat.riot
+++ b/parcoursup-app/src/components/ligne-resultat.riot
@@ -1,20 +1,16 @@
 <ligne-resultat>
 
-
   <div class="ligne-resultat">
-
     <h3>{ props.formation.fil_lib_voe_acc } — { props.formation.g_ea_lib_vx }</h3>
     <p>{ props.formation.ville_etab } ({ props.formation.dep_lib })</p>
     <p>Taux d'accès : { props.formation.taux_acces_ens }%</p>
     <a href={ '#/formation/' + props.formation.cod_aff_form }>Voir le détail</a>
-
+    <button onclick={ ajouterComparateur }>+ Comparer</button>
   </div>
 
-
-
   <style>
 
-    .ligne-resultat 
+    .ligne-resultat
     {
       border: 1px solid #ccc;
       padding: 10px;
@@ -22,5 +18,28 @@
     }
 
   </style>
-  
+
+  <script>
+
+    export default
+    {
+      ajouterComparateur()
+      {
+        const saved = localStorage.getItem('comparateur')
+        const formations = saved ? JSON.parse(saved) : []
+
+        const dejaDedans = formations.some(f => f.cod_aff_form === this.props.formation.cod_aff_form)
+
+        if (!dejaDedans)
+        {
+          formations.push(this.props.formation)
+          localStorage.setItem('comparateur', JSON.stringify(formations))
+        }
+
+        window.location.hash = '#/comparateur'
+      }
+    }
+
+  </script>
+
 </ligne-resultat>
\ No newline at end of file
diff --git a/parcoursup-app/src/components/page-detail.riot b/parcoursup-app/src/components/page-detail.riot
index 2bab7e9..fa72c69 100644
--- a/parcoursup-app/src/components/page-detail.riot
+++ b/parcoursup-app/src/components/page-detail.riot
@@ -4,12 +4,34 @@
     Chargement...
   </div>
 
+
+
+
+
+
+
+
+
+
   <div if={ state.formation }>
 
     <h2>{ state.formation.fil_lib_voe_acc }</h2>
     <h3>{ state.formation.g_ea_lib_vx }</h3>
     <p>{ state.formation.ville_etab } ({ state.formation.dep_lib })</p>
     <a href="#">← Retour à la recherche</a>
+    <button onclick={ ajouterComparateur }>+ Ajouter au comparateur</button>
+    <a href="#/comparateur">Voir le comparateur</a> 
+
+
+
+
+
+
+
+
+
+
+
 
 
     <h4>Phase d'admission</h4>
@@ -42,6 +64,15 @@
     </table>
 
 
+
+
+
+
+
+
+
+
+
     <h4>Profil des admis — Type de bac</h4>
 
     <table class="charts-css bar show-labels" style="height: 150px; width: 600px;">
@@ -72,8 +103,20 @@
     </table>
 
 
+
+
+
+
+
+
+
+
+
     <h4>Profil des admis — Mentions</h4>
 
+
+
+
     <table class="charts-css bar show-labels" style="height: 200px; width: 600px;">
       <tbody>
 
@@ -116,6 +159,12 @@
     </table>
 
 
+
+
+
+
+
+
     <h4>Évolution du taux d'accès depuis 2020</h4>
 
     <div if={ !state.evolution }>
@@ -135,10 +184,41 @@
       </tbody>
     </table>
 
+
+
+
+
+    <h4>Phase complémentaire</h4>
+
+    <div if={ state.formation.nb_voe_pc }>
+      <p>Candidatures en phase complémentaire : <b>{ state.formation.nb_voe_pc }</b></p>
+      <p>Admis en phase complémentaire : <b>{ state.formation.acc_pc }</b></p>
+      <p>Dont bac général : <b>{ state.formation.nb_voe_pc_bg }</b></p>
+      <p>Dont bac techno : <b>{ state.formation.nb_voe_pc_bt }</b></p>
+      <p>Dont bac pro : <b>{ state.formation.nb_voe_pc_bp }</b></p>
+    </div>
+
+    <div if={ !state.formation.nb_voe_pc }>
+      Pas de phase complémentaire pour cette formation.
+    </div>
+
+
+
+
   </div>
 
 
-  
+
+
+
+
+
+
+
+
+
+
+
 
 
   <style>
@@ -185,12 +265,14 @@
 
     export default 
     {
+
       state: 
       {
         formation: null,
         evolution: null
       },
 
+
       async onMounted() 
       {
         const id = this.props.id
@@ -199,9 +281,30 @@
 
         const evolution = await recupereEvolutionFormation(id)
         this.update({ evolution })
+      },
+
+      ajouterComparateur()
+      {
+        const saved = localStorage.getItem('comparateur')
+        const formations = saved ? JSON.parse(saved) : []
+
+        const dejaDedans = formations.some(f => f.cod_aff_form === this.state.formation.cod_aff_form)
+
+        if (!dejaDedans)
+        {
+          formations.push(this.state.formation)
+          localStorage.setItem('comparateur', JSON.stringify(formations))
+        }
+
+        window.location.hash = '#/comparateur'
       }
+
+
     }
 
+
+    
+
   </script>
 
 </page-detail>
\ No newline at end of file
diff --git a/parcoursup-app/src/main.js b/parcoursup-app/src/main.js
index a456329..686af35 100644
--- a/parcoursup-app/src/main.js
+++ b/parcoursup-app/src/main.js
@@ -1,29 +1,44 @@
 import { component, unmount } from 'riot'
 import App from './components/app.riot'
 import PageDetail from './components/page-detail.riot'
+import Comparateur from './components/comparateur.riot'
 import 'chart.css'
+import './style.css'
+import EstimationChances from './components/estimation-chances.riot'
 
 const app = document.getElementById('app')
 let currentComponent = null
 
-function navigate() 
+function navigate()
 {
   const hash = window.location.hash
 
-  if (currentComponent) 
+  if (currentComponent)
   {
     unmount(app, true)
   }
 
-  if (hash.startsWith('#/formation/')) 
+  if (hash.startsWith('#/formation/'))
   {
     const id = hash.replace('#/formation/', '')
     currentComponent = component(PageDetail)(app, { id })
-  } 
-  else 
+  }
+
+  else if (hash === '#/comparateur')
+  {
+    currentComponent = component(Comparateur)(app)
+  }
+
+  else if (hash === '#/estimation')
+  {
+    currentComponent = component(EstimationChances)(app)
+  }
+
+  else
   {
     currentComponent = component(App)(app)
   }
+  
 }
 
 window.addEventListener('hashchange', navigate)
diff --git a/parcoursup-app/src/style.css b/parcoursup-app/src/style.css
new file mode 100644
index 0000000..23990d9
--- /dev/null
+++ b/parcoursup-app/src/style.css
@@ -0,0 +1,128 @@
+* 
+{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body 
+{
+  background-color: #1a1a2e;
+  color: #e0e0e0;
+  font-family: 'Segoe UI', sans-serif;
+  padding: 20px;
+}
+
+h1, h2, h3, h4 
+{
+  color: #e94560;
+  margin-bottom: 10px;
+}
+
+a 
+{
+  color: #0f3460;
+  background-color: #e94560;
+  padding: 5px 10px;
+  border-radius: 5px;
+  text-decoration: none;
+  display: inline-block;
+  margin: 5px 0;
+}
+
+a:hover 
+{
+  background-color: #c73652;
+}
+
+button 
+{
+  background-color: #0f3460;
+  color: #e0e0e0;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 5px 0;
+}
+
+button:hover 
+{
+  background-color: #16213e;
+}
+
+input, select 
+{
+  background-color: #16213e;
+  color: #e0e0e0;
+  border: 1px solid #e94560;
+  padding: 8px;
+  border-radius: 5px;
+  width: 100%;
+}
+
+.ligne-resultat 
+{
+  background-color: #16213e;
+  border: 1px solid #0f3460;
+  padding: 15px;
+  margin: 8px 0;
+  border-radius: 8px;
+}
+
+.ligne-resultat:hover 
+{
+  border-color: #e94560;
+}
+
+.comparateur-grille 
+{
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  overflow-x: auto;
+}
+
+.comparateur-colonne 
+{
+  background-color: #16213e;
+  border: 1px solid #0f3460;
+  padding: 15px;
+  min-width: 250px;
+  border-radius: 8px;
+}
+
+.formulaire 
+{
+  background-color: #16213e;
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 400px;
+  margin: 20px 0;
+}
+
+.estimation-ligne 
+{
+  background-color: #16213e;
+  border: 1px solid #0f3460;
+  padding: 15px;
+  margin: 10px 0;
+  border-radius: 8px;
+}
+
+table 
+{
+  margin: 15px 0;
+}
+
+#carte 
+{
+  border-radius: 8px;
+  border: 2px solid #e94560;
+}
+
+p 
+{
+  margin: 5px 0;
+  line-height: 1.5;
+}
\ No newline at end of file