diff --git a/parcoursup/api.js b/parcoursup/api.js
index 789a836..72f1e5c 100644
--- a/parcoursup/api.js
+++ b/parcoursup/api.js
@@ -1,21 +1,131 @@
-export function buildURL(query) {
-  let url =
-    "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records?limit=10"
-
-  if (query && query.trim() !== "") {
-    url += "&where=search(lib_for_voe_ins, '" + query + "')"
-  }
-
-  return url
+// Échapper les apostrophes dans les valeurs injectées dans la clause where
+function echapperValeur(valeur) {
+  return String(valeur).replace(/'/g, "\\'");
 }
 
-export async function fetchFormations(query) {
-  const url = buildURL(query)
-  const response = await fetch(url)
+// Construire l'URL de requête vers l'API Parcoursup
+export function construireURL(requete, limite = 20, decalage = 0, filtres = {}) {
 
-  if (!response.ok) {
-    throw new Error("Erreur HTTP")
+  var url = "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records?";
+
+  url += "limit=" + limite;
+  url += "&offset=" + decalage;
+
+  var conditions = [];
+
+  if (requete && requete.trim() !== "") {
+    conditions.push("search(lib_for_voe_ins, '" + echapperValeur(requete.trim()) + "')");
   }
 
-  return await response.json()
+  if (filtres.filiere && filtres.filiere !== "") {
+    conditions.push("fili='" + echapperValeur(filtres.filiere) + "'");
+  }
+
+  if (filtres.selectivite && filtres.selectivite !== "") {
+    conditions.push("select_form='" + echapperValeur(filtres.selectivite) + "'");
+  }
+
+  if (filtres.region && filtres.region !== "") {
+    conditions.push("region_etab_aff='" + echapperValeur(filtres.region) + "'");
+  }
+
+  if (filtres.tauxMin && filtres.tauxMin > 0) {
+    conditions.push("taux_acces_ens>=" + filtres.tauxMin);
+  }
+
+  if (filtres.tauxMax && filtres.tauxMax < 100) {
+    conditions.push("taux_acces_ens<=" + filtres.tauxMax);
+  }
+
+  if (conditions.length > 0) {
+    url += "&where=" + encodeURIComponent(conditions.join(" AND "));
+  }
+
+  return url;
+}
+
+// Charger les formations depuis l'API Parcoursup
+export async function chargerFormations(requete, limite = 20, decalage = 0, filtres = {}) {
+
+  var url     = construireURL(requete, limite, decalage, filtres);
+  var reponse = await fetch(url);
+
+  if (!reponse.ok) {
+    throw new Error("Erreur HTTP " + reponse.status);
+  }
+
+  return await reponse.json();
+}
+
+// Charger l'historique d'une formation sur plusieurs années
+export async function chargerHistoriqueFormation(codUai, nomFormation) {
+
+  var jeuDeDonnees = {
+    2020: "fr-esr-parcoursup_2020",
+    2021: "fr-esr-parcoursup_2021",
+    2022: "fr-esr-parcoursup_2022",
+    2023: "fr-esr-parcoursup_2023",
+    2024: "fr-esr-parcoursup_2024",
+    2025: "fr-esr-parcoursup"
+  };
+
+  var historique = [];
+  var nomCourt   = echapperValeur((nomFormation || "").substring(0, 40));
+  var codeUai    = echapperValeur(codUai);
+  var annees     = [2020, 2021, 2022, 2023, 2024, 2025];
+
+  for (var i = 0; i < annees.length; i++) {
+
+    var annee   = annees[i];
+    var dataset = jeuDeDonnees[annee];
+
+    try {
+
+      var where =
+        "cod_uai='" + codeUai + "' AND search(lib_for_voe_ins, '" + nomCourt + "')";
+
+      var url = "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/"
+        + dataset + "/records?"
+        + "limit=5"
+        + "&where=" + encodeURIComponent(where)
+        + "&select=" + encodeURIComponent("cod_uai,lib_for_voe_ins,voe_tot,acc_tot,pct_sansmention,pct_ab,pct_b,pct_tb,pct_tbf,pct_bg,pct_bt,pct_bp");
+
+      var reponse = await fetch(url);
+
+      if (reponse.ok) {
+
+        var donnees = await reponse.json();
+
+        if (donnees.results && donnees.results.length > 0) {
+
+          var ligne = donnees.results[0];
+          var taux  = 0;
+
+          if (ligne.voe_tot && ligne.voe_tot > 0) {
+            taux = Math.round((ligne.acc_tot / ligne.voe_tot) * 100);
+          }
+
+          historique.push({
+            annee:          annee,
+            tauxAcces:      taux,
+            candidats:      ligne.voe_tot || 0,
+            admis:          ligne.acc_tot || 0,
+            pctSansMention: ligne.pct_sansmention || 0,
+            pctAB:          ligne.pct_ab || 0,
+            pctB:           ligne.pct_b || 0,
+            pctTB:          ligne.pct_tb || 0,
+            pctTBF:         ligne.pct_tbf || 0,
+            pctGeneral:     ligne.pct_bg || 0,
+            pctTechno:      ligne.pct_bt || 0,
+            pctPro:         ligne.pct_bp || 0
+          });
+        }
+      }
+
+    } catch (e) {
+      console.warn("Erreur pour l'année " + annee + " :", e);
+    }
+  }
+
+  return historique;
 }
\ No newline at end of file
diff --git a/parcoursup/app.riot b/parcoursup/app.riot
index 26c4cbb..28382a3 100644
--- a/parcoursup/app.riot
+++ b/parcoursup/app.riot
@@ -1,83 +1,574 @@
 <app>
-  <div class="page">
-    <h1>Mini projet Parcoursup</h1>
-    <p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
+  <header class="site-header">
+    <div class="header-inner">
+      <a class="logo" href="#/">
+        <span class="logo-icon"></span>
+        <span class="logo-text">Parcoursup <span class="logo-light">Explorer</span></span>
+      </a>
+      <div class="header-right">
+        <a href="#/comparateur" class="header-badge badge-clickable" if={ state.selectedFormations.length > 0 }>
+          { state.selectedFormations.length } sélection(s)
+        </a>
+        <auth-panel user={ state.user } onauth={ surConnexion } onlogout={ surDeconnexion }></auth-panel>
+      </div>
+    </div>
+  </header>
 
-    <div if={ !state.selected }>
-      <search-bar onsearch={ launchSearch }></search-bar>
+  <div class="page">
+
+    <!-- ============== VUE RECHERCHE ============== -->
+    <div if={ state.view === 'search' }>
+      <search-bar onsearch={ lancerRecherche }></search-bar>
+
+      <p class="result-count" if={ state.hasSearched && !state.loading }>
+        <b>{ state.query }</b> — { state.total } résultat(s)
+      </p>
+
+      <map-view results={ state.results }></map-view>
 
       <div class="layout">
-        <result-list
-          results={ state.results }
-          hasSearched={ state.hasSearched }
-          loading={ state.loading }
-          ondetail={ showDetail }>
-        </result-list>
+        <div>
+          <result-list
+            results={ state.results }
+            hasSearched={ state.hasSearched }
+            loading={ state.loading }
+            ondetail={ afficherDetail }
+            onselect={ ajouterSelection }>
+          </result-list>
 
-        <map-view results={ state.results }></map-view>
+          <div class="pagination" if={ state.total > state.limit }>
+            <button class="btn btn-outline" onclick={ pagePrecedente } disabled={ state.page === 1 }>
+              ← Précédent
+            </button>
+            <span class="page-info">Page { state.page } / { nombreTotalPages() }</span>
+            <button class="btn btn-outline" onclick={ pageSuivante } disabled={ state.page === nombreTotalPages() }>
+              Suivant →
+            </button>
+          </div>
+        </div>
       </div>
     </div>
 
-    <div if={ state.selected }>
+    <!-- ============== VUE DÉTAIL ============== -->
+    <div if={ state.view === 'detail' && state.selected }>
       <detail-view
         formation={ state.selected }
-        onback={ backToList }>
+        onback={ retourRecherche }>
       </detail-view>
     </div>
+
+    <div if={ state.view === 'detail' && !state.selected } class="message">
+      Chargement de la formation...
+    </div>
+
+    <!-- ============== VUE COMPARATEUR ============== -->
+    <div if={ state.view === 'comparateur' }>
+
+      <button class="btn btn-outline" onclick={ retourRecherche } style="margin-bottom: 16px;">← Retour à la recherche</button>
+
+      <div class="detail-card comparateur-card" if={ state.selectedFormations.length > 0 }>
+        <h2>Comparateur de formations</h2>
+
+        <p>Choisis ton profil pour estimer tes chances d'intégration.</p>
+
+        <div class="compare-controls">
+          <div>
+            <label><b>Note moyenne :</b></label><br />
+            <input
+              type="number"
+              min="0"
+              max="20"
+              step="0.1"
+              value={ state.note }
+              oninput={ mettreAJourNote }
+            />
+          </div>
+
+          <div>
+            <label><b>Série :</b></label><br />
+            <select onchange={ mettreAJourSerie }>
+              <option value="general" selected={ state.serie === 'general' }>Général</option>
+              <option value="techno" selected={ state.serie === 'techno' }>Technologique</option>
+              <option value="pro" selected={ state.serie === 'pro' }>Professionnel</option>
+            </select>
+          </div>
+
+          <div>
+            <label><b>Trier par :</b></label><br />
+            <select onchange={ mettreAJourTri }>
+              <option value="nom" selected={ state.sortBy === 'nom' }>Nom</option>
+              <option value="ville" selected={ state.sortBy === 'ville' }>Ville</option>
+              <option value="taux" selected={ state.sortBy === 'taux' }>Taux d'accès</option>
+              <option value="estimation" selected={ state.sortBy === 'estimation' }>Estimation</option>
+            </select>
+          </div>
+        </div>
+
+        <button class="btn btn-danger" onclick={ viderSelection }>Vider la sélection</button>
+
+        <hr />
+
+        <div each={ f in obtenirSelectionTriee() } key={ f.id } class={ classeCarte(f) }>
+          <h4>{ f.nom }</h4>
+
+          <p><b>Établissement :</b> { f.etablissement }</p>
+          <p><b>Ville :</b> { f.ville }</p>
+          <p><b>Filière :</b> { f.filiere }</p>
+          <p><b>Capacité :</b> { f.capacite }</p>
+          <p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
+
+          <p>
+            <b>Intégrés :</b>
+            Général { f.pctGeneral }% /
+            Techno { f.pctTechno }% /
+            Pro { f.pctPro }%
+          </p>
+
+          <p class="estimation-result">
+            <span class={ classeEstimation(f) }>
+              { estimerFormation(f) }
+            </span>
+            <span class="estimation-detail">{ detailEstimation(f) }</span>
+          </p>
+
+          <button class="btn btn-small btn-outline" onclick={ retirerSelection.bind(this, f.id) }>
+            Retirer
+          </button>
+        </div>
+      </div>
+
+      <div class="message" if={ state.selectedFormations.length === 0 }>
+        <h3>Aucune formation sélectionnée</h3>
+        <p>Retourne à la <a href="#/">recherche</a> et clique sur "Ajouter à la sélection" pour comparer des formations.</p>
+      </div>
+    </div>
+
   </div>
 
   <script>
     export default {
       state: {
+        view: 'search',
         loading: false,
         hasSearched: false,
         results: [],
-        selected: null
+        selected: null,
+        selectedFormations: [],
+        note: 12,
+        serie: 'general',
+        sortBy: 'nom',
+        query: '',
+        filters: {},
+        page: 1,
+        limit: 20,
+        total: 0,
+        user: null
       },
 
-      async launchSearch(query) {
+      onMounted() {
+        var saved = localStorage.getItem('selectionFormations');
+        var soi = this;
+
+        // Charger la sélection locale si elle existe
+        if (saved) {
+          try {
+            this.state.selectedFormations = JSON.parse(saved);
+          } catch (e) {
+            console.error('Erreur lecture localStorage :', e);
+          }
+        }
+
+        // Écouter les changements de connexion Firebase
+        window.firebaseServices.onUserChanged(function(user) {
+
+          soi.update({ user: user });
+
+          // Si un utilisateur vient de se connecter, charger sa sélection depuis Firestore
+          if (user) {
+            window.firebaseServices.loadUserData(user.uid)
+              .then(function(donnees) {
+                if (donnees && donnees.selection) {
+                  soi.update({ selectedFormations: donnees.selection });
+                  localStorage.setItem('selectionFormations', JSON.stringify(donnees.selection));
+                }
+              })
+              .catch(function(err) {
+                console.error('Erreur chargement Firestore :', err);
+              });
+          }
+
+        });
+
+        window.addEventListener('hashchange', function() {
+          soi.gererRoute();
+        });
+
+        this.gererRoute();
+      },
+
+      // Appelée après une connexion ou inscription réussie
+      surConnexion() {
+        // L'écouteur onUserChanged dans onMounted gère automatiquement le reste
+      },
+
+      // Appelée après une déconnexion
+      surDeconnexion() {
+        // On vide la sélection : l'utilisateur doit se reconnecter pour retrouver ses formations
+        this.update({ selectedFormations: [] });
+        localStorage.removeItem('selectionFormations');
+      },
+
+      // Sauvegarder la sélection en local ET dans Firestore si connecté
+      async sauvegarderSelection(selection) {
+
+        localStorage.setItem('selectionFormations', JSON.stringify(selection));
+
+        if (this.state.user) {
+          try {
+            await window.firebaseServices.saveUserData(this.state.user.uid, { selection: selection });
+          } catch (err) {
+            console.error('Erreur sauvegarde Firestore :', err);
+          }
+        }
+
+      },
+
+      gererRoute() {
+        var ancre = window.location.hash || '#/';
+        var chemin = ancre.slice(1) || '/';
+
+        if (chemin.startsWith('/formation/')) {
+          var id = decodeURIComponent(chemin.replace('/formation/', ''));
+          this.update({ view: 'detail' });
+          this.chargerFormationParId(id);
+        } else if (chemin === '/comparateur') {
+          this.update({ view: 'comparateur', selected: null });
+        } else {
+          this.update({ view: 'search', selected: null });
+        }
+      },
+
+      async chargerFormationParId(id) {
+        var i;
+
+        for (i = 0; i < this.state.results.length; i++) {
+          if (this.state.results[i].id === id) {
+            this.update({ selected: this.state.results[i] });
+            return;
+          }
+        }
+
+        for (i = 0; i < this.state.selectedFormations.length; i++) {
+          if (this.state.selectedFormations[i].id === id) {
+            this.update({ selected: this.state.selectedFormations[i] });
+            return;
+          }
+        }
+
+        try {
+          var parties = id.split('-');
+          var motCle  = parties.slice(1).join(' ').substring(0, 30);
+
+          if (motCle) {
+            var donnees = await window.chargerFormations(motCle, 10, 0);
+
+            if (donnees.results && donnees.results.length > 0) {
+              for (i = 0; i < donnees.results.length; i++) {
+                var formation = window.creerFormation(donnees.results[i]);
+                if (formation.id === id) {
+                  this.update({ selected: formation });
+                  return;
+                }
+              }
+              this.update({ selected: window.creerFormation(donnees.results[0]) });
+            }
+          }
+        } catch (erreur) {
+          console.error('Erreur chargement formation :', erreur);
+        }
+      },
+
+      afficherDetail(index) {
+        var formation = this.state.results[index];
+        this.update({ selected: formation, view: 'detail' });
+        window.location.hash = '#/formation/' + encodeURIComponent(formation.id);
+      },
+
+      retourRecherche() {
+        window.location.hash = '#/';
+      },
+
+      async lancerRecherche(requete, filtres) {
         this.update({
           loading: true,
           hasSearched: true,
-          selected: null
-        })
+          selected: null,
+          view: 'search',
+          query: requete,
+          filters: filtres || {},
+          page: 1
+        });
+
+        window.location.hash = '#/';
+        await this.chargerPage(1);
+      },
+
+      async chargerPage(page) {
+        this.update({ loading: true });
 
         try {
-          const data = await window.fetchFormations(query)
-          const formations = []
+          var decalage = (page - 1) * this.state.limit;
 
-          if (data.results) {
-            for (let i = 0; i < data.results.length; i++) {
-              const raw = data.results[i]
-              const formation = window.createFormation(raw)
-              formations.push(formation)
+          var donnees = await window.chargerFormations(
+            this.state.query,
+            this.state.limit,
+            decalage,
+            this.state.filters
+          );
+
+          var formations = [];
+
+          if (donnees.results) {
+            for (var i = 0; i < donnees.results.length; i++) {
+              var brut = donnees.results[i];
+              formations.push(window.creerFormation(brut));
             }
           }
 
+          var total = 0;
+
+          if (donnees.total_count) {
+            total = donnees.total_count;
+          }
+
           this.update({
             results: formations,
+            total:   total,
+            page:    page,
             loading: false
-          })
-        } catch (error) {
-          console.error(error)
+          });
+        } catch (erreur) {
+          console.error(erreur);
           this.update({
             results: [],
+            total:   0,
             loading: false
-          })
+          });
         }
       },
 
-      showDetail(index) {
-        this.update({
-          selected: this.state.results[index]
-        })
+      nombreTotalPages() {
+        return Math.ceil(this.state.total / this.state.limit);
       },
 
-      backToList() {
-        this.update({
-          selected: null
-        })
+      async pageSuivante() {
+        if (this.state.page < this.nombreTotalPages()) {
+          await this.chargerPage(this.state.page + 1);
+        }
+      },
+
+      async pagePrecedente() {
+        if (this.state.page > 1) {
+          await this.chargerPage(this.state.page - 1);
+        }
+      },
+
+      ajouterSelection(index) {
+        var formation  = this.state.results[index];
+        var selection  = this.state.selectedFormations.slice();
+        var dejaAjout  = false;
+
+        for (var i = 0; i < selection.length; i++) {
+          if (selection[i].id === formation.id) {
+            dejaAjout = true;
+          }
+        }
+
+        if (!dejaAjout) {
+          selection.push(formation);
+          this.update({ selectedFormations: selection });
+          this.sauvegarderSelection(selection);
+        }
+      },
+
+      retirerSelection(id) {
+        var nouvelleSelection = [];
+
+        for (var i = 0; i < this.state.selectedFormations.length; i++) {
+          var f = this.state.selectedFormations[i];
+
+          if (f.id !== id) {
+            nouvelleSelection.push(f);
+          }
+        }
+
+        this.update({ selectedFormations: nouvelleSelection });
+        this.sauvegarderSelection(nouvelleSelection);
+      },
+
+      viderSelection() {
+        this.update({ selectedFormations: [] });
+        this.sauvegarderSelection([]);
+      },
+
+      mettreAJourNote(e) {
+        this.update({ note: Number(e.target.value) });
+      },
+
+      mettreAJourSerie(e) {
+        this.update({ serie: e.target.value });
+      },
+
+      mettreAJourTri(e) {
+        this.update({ sortBy: e.target.value });
+      },
+
+      obtenirSelectionTriee() {
+        var selection = this.state.selectedFormations.slice();
+        var soi       = this;
+
+        if (this.state.sortBy === 'taux') {
+          selection.sort(function(a, b) { return b.tauxAcces - a.tauxAcces; });
+        } else if (this.state.sortBy === 'ville') {
+          selection.sort(function(a, b) { return a.ville.localeCompare(b.ville); });
+        } else if (this.state.sortBy === 'estimation') {
+          selection.sort(function(a, b) { return soi.calculerScore(b) - soi.calculerScore(a); });
+        } else {
+          selection.sort(function(a, b) { return a.nom.localeCompare(b.nom); });
+        }
+
+        return selection;
+      },
+
+      pourcentageSerie(f) {
+        if (this.state.serie === 'general') {
+          return f.pctGeneral || 0;
+        }
+        if (this.state.serie === 'techno') {
+          return f.pctTechno  || 0;
+        }
+        if (this.state.serie === 'pro') {
+          return f.pctPro     || 0;
+        }
+        return 0;
+      },
+
+      calculerScore(f) {
+        var score     = 0;
+        var note      = this.state.note;
+        var tauxAcces = f.tauxAcces || 0;
+        var pctSerie  = this.pourcentageSerie(f);
+
+        if (tauxAcces >= 80) {
+          score += 30;
+        } else if (tauxAcces >= 50) {
+          score += 24;
+        } else if (tauxAcces >= 30) {
+          score += 16;
+        } else if (tauxAcces >= 15) {
+          score += 8;
+        } else {
+          score += 2;
+        }
+
+        if (note >= 17) {
+          score += 40;
+        } else if (note >= 15) {
+          score += 32;
+        } else if (note >= 13) {
+          score += 22;
+        } else if (note >= 11) {
+          score += 14;
+        } else if (note >= 9) {
+          score += 6;
+        } else {
+          score += 0;
+        }
+
+        if (pctSerie >= 60) {
+          score += 30;
+        } else if (pctSerie >= 40) {
+          score += 24;
+        } else if (pctSerie >= 20) {
+          score += 16;
+        } else if (pctSerie >= 5) {
+          score += 8;
+        } else {
+          score += 0;
+        }
+
+        return score;
+      },
+
+      estimerFormation(f) {
+        var score = this.calculerScore(f);
+
+        if (score >= 85) {
+          return 'Très favorable';
+        }
+        if (score >= 65) {
+          return 'Favorable';
+        }
+        if (score >= 45) {
+          return 'Possible';
+        }
+        if (score >= 25) {
+          return 'Difficile';
+        }
+        return 'Très difficile';
+      },
+
+      classeEstimation(f) {
+        var resultat = this.estimerFormation(f);
+
+        if (resultat === 'Très favorable') {
+          return 'estimate tres-favorable';
+        }
+        if (resultat === 'Favorable') {
+          return 'estimate favorable';
+        }
+        if (resultat === 'Possible') {
+          return 'estimate possible';
+        }
+        if (resultat === 'Difficile') {
+          return 'estimate difficile';
+        }
+        return 'estimate tres-difficile';
+      },
+
+      classeCarte(f) {
+        var resultat = this.estimerFormation(f);
+
+        if (resultat === 'Très favorable') {
+          return 'card card-tres-favorable';
+        }
+        if (resultat === 'Favorable') {
+          return 'card card-favorable';
+        }
+        if (resultat === 'Possible') {
+          return 'card card-possible';
+        }
+        if (resultat === 'Difficile') {
+          return 'card card-difficile';
+        }
+        return 'card card-tres-difficile';
+      },
+
+      detailEstimation(f) {
+        var tauxAcces  = f.tauxAcces || 0;
+        var pctSerie   = this.pourcentageSerie(f);
+        var nomSerie   = '';
+
+        if (this.state.serie === 'general') {
+          nomSerie = 'Gén';
+        } else if (this.state.serie === 'techno') {
+          nomSerie = 'Techno';
+        } else {
+          nomSerie = 'Pro';
+        }
+
+        return 'Taux ' + tauxAcces + '% · ' + nomSerie + ' ' + pctSerie + '% · Note ' + this.state.note + '/20';
       }
-    }
+    };
   </script>
-</app>
\ No newline at end of file
+</app>
diff --git a/parcoursup/components/detail-view.riot b/parcoursup/components/detail-view.riot
index 47ae643..fa62d88 100644
--- a/parcoursup/components/detail-view.riot
+++ b/parcoursup/components/detail-view.riot
@@ -1,15 +1,428 @@
 <detail-view>
-  <div if={ props.formation } class="detail-card">
-    <h2>{ props.formation.nom }</h2>
-    <p><b>Établissement :</b> { props.formation.etablissement }</p>
-    <p><b>Ville :</b> { props.formation.ville }</p>
-    <p><b>Département :</b> { props.formation.departement }</p>
-    <p><b>Filière :</b> { props.formation.filiere }</p>
-    <p><b>Sélectivité :</b> { props.formation.selectivite }</p>
-    <p><b>Capacité :</b> { props.formation.capacite }</p>
-    <p><b>Candidats :</b> { props.formation.candidats }</p>
-    <p><b>Admis :</b> { props.formation.admis }</p>
-    <p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>
-    <button onclick={ () => props.onback() }>Retour</button>
+  <div if={ props.formation } class="detail-page">
+    <h2>Formation</h2>
+    <h1 class="formation-title">{ props.formation.etablissement } - { props.formation.nom }</h1>
+    <div class="formation-meta">
+      <p><b>Ville :</b> { props.formation.ville }</p>
+      <p><b>Département :</b> { props.formation.departement } { props.formation.departementLib }</p>
+      <p><b>Académie :</b> { props.formation.academie }</p>
+      <p>{ props.formation.contrat }</p>
+      <p><b>Capacité :</b> { props.formation.capacite }</p>
+    </div>
+
+    <div class="detail-grid">
+      <div>
+        <h2>Phase principale d'admission</h2>
+        <table class="detail-table">
+          <thead>
+            <tr>
+              <th>Bac</th>
+              <th>Voeux</th>
+              <th>Classés</th>
+              <th>Propositions</th>
+              <th>Acceptés</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Gén</td>
+              <td>{ props.formation.voePPGeneral }</td>
+              <td>{ props.formation.classesPPGeneral }</td>
+              <td>{ props.formation.propositionsPPGeneral }</td>
+              <td>{ props.formation.acceptesPPGeneral }</td>
+            </tr>
+            <tr>
+              <td>Techno</td>
+              <td>{ props.formation.voePPTechno }</td>
+              <td>{ props.formation.classesPPTechno }</td>
+              <td>{ props.formation.propositionsPPTechno }</td>
+              <td>{ props.formation.acceptesPPTechno }</td>
+            </tr>
+            <tr>
+              <td>Pro</td>
+              <td>{ props.formation.voePPPro }</td>
+              <td>{ props.formation.classesPPPro }</td>
+              <td>{ props.formation.propositionsPPPro }</td>
+              <td>{ props.formation.acceptesPPPro }</td>
+            </tr>
+            <tr>
+              <td>Autres</td>
+              <td>{ props.formation.voePPAutres }</td>
+              <td>{ props.formation.classesPPAutres }</td>
+              <td>{ props.formation.propositionsPPAutres }</td>
+              <td>{ props.formation.acceptesPPAutres }</td>
+            </tr>
+            <tr class="total-row">
+              <td>Total</td>
+              <td>{ props.formation.voePPTotal }</td>
+              <td>{ props.formation.classesPPTotal }</td>
+              <td>{ props.formation.propositionsPPTotal }</td>
+              <td>{ props.formation.acceptesPPTotal }</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="timeline-box">
+        <h3>Vitesse de remplissage</h3>
+        <div class="timeline">
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div>
+              <b>Ouverture 30 mai</b><br />
+              { props.formation.pctDebutPhase }%
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div>
+              <b>16 juin</b><br />
+              { props.formation.pctDateBac }%
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div>
+              <b>11 juillet</b><br />
+              { props.formation.pctFinPhase }%
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h2>Phase complémentaire d'admission</h2>
+    <table class="detail-table">
+      <thead>
+        <tr>
+          <th>Bac</th>
+          <th>Voeux</th>
+          <th>Classés</th>
+          <th>Propositions</th>
+          <th>Acceptés</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Gén</td>
+          <td>{ props.formation.voePCGeneral }</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>Techno</td>
+          <td>{ props.formation.voePCTechno }</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>Pro</td>
+          <td>{ props.formation.voePCPro }</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>Autres</td>
+          <td>{ props.formation.voePCAutres }</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr class="total-row">
+          <td>Total</td>
+          <td>{ props.formation.voePCTotal }</td>
+          <td>{ props.formation.classesPCTotal }</td>
+          <td>{ props.formation.acceptesPCTotal }</td>
+          <td>{ props.formation.acceptesPCTotal }</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- ==================== GRAPHIQUES CHARTS.CSS ==================== -->
+
+    <h2 class="charts-heading">Profil des admis</h2>
+
+    <div class="charts-section">
+      <div class="chart-wrapper">
+        <h3>Répartition par type de bac</h3>
+        <div id="chart-bac" ref="graphBac"></div>
+      </div>
+
+      <div class="chart-wrapper">
+        <h3>Mentions au bac des admis</h3>
+        <div id="chart-mentions" ref="graphMentions"></div>
+      </div>
+
+      <div class="chart-wrapper chart-full">
+        <h3>Profil sociologique</h3>
+        <div id="chart-profil" ref="graphProfil"></div>
+      </div>
+    </div>
+
+    <!-- ==================== ÉVOLUTION HISTORIQUE ==================== -->
+
+    <h2 class="charts-heading">Évolution depuis 2020</h2>
+
+    <div if={ state.chargementHistorique } class="message">
+      Chargement de l'historique...
+    </div>
+
+    <div if={ !state.chargementHistorique && state.historique.length === 0 } class="message">
+      Aucune donnée historique disponible pour cette formation.
+    </div>
+
+    <div class="charts-section" if={ state.historique.length > 0 }>
+      <div class="chart-wrapper">
+        <h3>Taux d'accès par année</h3>
+        <div id="chart-evolution-taux" ref="graphTaux"></div>
+      </div>
+
+      <div class="chart-wrapper">
+        <h3>Nombre de candidats et admis</h3>
+        <div id="chart-evolution-candidats" ref="graphCandidats"></div>
+      </div>
+
+      <div class="chart-wrapper chart-full">
+        <h3>Évolution des mentions au bac</h3>
+        <div ref="graphMentionsHist"></div>
+      </div>
+    </div>
+
+    <button onclick={ retourListe } class="btn-retour">Retour à la liste</button>
   </div>
-</detail-view>
\ No newline at end of file
+
+  <script>
+    export default {
+
+      state: {
+        historique:          [],
+        chargementHistorique: false
+      },
+
+      onMounted() {
+        this.afficherGraphiques();
+        this.chargerHistorique();
+      },
+
+      onUpdated() {
+        this.afficherGraphiques();
+
+        if (this.state.historique.length > 0) {
+          this.afficherGraphiquesHistoriques();
+        }
+      },
+
+      // Retour à la liste des résultats
+      retourListe() {
+        this.props.onback();
+      },
+
+      // Limiter une valeur entre 0 et 1 pour Charts.css
+      limiterValeur(val) {
+        if (val === null || val === undefined || isNaN(val)) {
+          return 0;
+        }
+
+        var v = val / 100;
+
+        if (v > 1) {
+          return 1;
+        }
+        if (v < 0) {
+          return 0;
+        }
+
+        return Math.round(v * 100) / 100;
+      },
+
+      afficherGraphiques() {
+        var f = this.props.formation;
+        if (!f) {
+          return;
+        }
+
+        var graphBac      = this.$('[ref="graphBac"]');
+        var graphMentions = this.$('[ref="graphMentions"]');
+        var graphProfil   = this.$('[ref="graphProfil"]');
+
+        if (graphBac) {
+          graphBac.innerHTML = this.construireGraphiqueColonnes([
+            { label: 'Général', valeur: f.pctGeneral, couleur: '#3d7fff' },
+            { label: 'Techno',  valeur: f.pctTechno,  couleur: '#f59e0b' },
+            { label: 'Pro',     valeur: f.pctPro,     couleur: '#10b981' }
+          ]);
+        }
+
+        if (graphMentions) {
+          graphMentions.innerHTML = this.construireGraphiqueColonnes([
+            { label: 'Sans',     valeur: f.pctSansMention, couleur: '#94a3b8' },
+            { label: 'AB',       valeur: f.pctAB,          couleur: '#60a5fa' },
+            { label: 'Bien',     valeur: f.pctB,           couleur: '#34d399' },
+            { label: 'TB',       valeur: f.pctTB,          couleur: '#fbbf24' },
+            { label: 'TB Féli.', valeur: f.pctTBF,         couleur: '#f472b6' }
+          ]);
+        }
+
+        if (graphProfil) {
+          graphProfil.innerHTML = this.construireGraphiqueBarres([
+            { label: 'Femmes',    valeur: f.pctFemmes,    couleur: '#a78bfa' },
+            { label: 'Boursiers', valeur: f.pctBoursiers, couleur: '#fb923c' },
+            { label: 'Néo-bac',  valeur: f.pctNeoBac,    couleur: '#2dd4bf' }
+          ]);
+        }
+      },
+
+      async chargerHistorique() {
+        var f = this.props.formation;
+        if (!f) {
+          return;
+        }
+
+        var codUai = f.id.split('-')[0];
+
+        if (!codUai || !window.chargerHistoriqueFormation) {
+          return;
+        }
+
+        this.update({ chargementHistorique: true });
+
+        try {
+          var historique = await window.chargerHistoriqueFormation(codUai, f.nom);
+          this.update({ historique: historique, chargementHistorique: false });
+        } catch (e) {
+          console.error('Erreur chargement historique :', e);
+          this.update({ historique: [], chargementHistorique: false });
+        }
+      },
+
+      afficherGraphiquesHistoriques() {
+        var historique = this.state.historique;
+        if (!historique || historique.length === 0) {
+          return;
+        }
+
+        var graphTaux         = this.$('[ref="graphTaux"]');
+        var graphCandidats    = this.$('[ref="graphCandidats"]');
+        var graphMentionsHist = this.$('[ref="graphMentionsHist"]');
+
+        // Graphique : taux d'accès par année
+        if (graphTaux) {
+          var elementsAnnee = [];
+
+          for (var i = 0; i < historique.length; i++) {
+            elementsAnnee.push({
+              label:   '' + historique[i].annee,
+              valeur:  historique[i].tauxAcces,
+              couleur: '#1a936f'
+            });
+          }
+
+          graphTaux.innerHTML = this.construireGraphiqueColonnes(elementsAnnee);
+        }
+
+        // Graphique : candidats vs admis
+        if (graphCandidats) {
+          var maxCandidats = 0;
+
+          for (var i = 0; i < historique.length; i++) {
+            if (historique[i].candidats > maxCandidats) {
+              maxCandidats = historique[i].candidats;
+            }
+          }
+
+          var lignes = '';
+
+          for (var i = 0; i < historique.length; i++) {
+            var h           = historique[i];
+            var tailleCand  = 0;
+            var tailleAdmis = 0;
+
+            if (maxCandidats > 0) {
+              tailleCand  = Math.round((h.candidats / maxCandidats) * 100) / 100;
+              tailleAdmis = Math.round((h.admis / maxCandidats) * 100) / 100;
+            }
+
+            lignes += '<tr>';
+            lignes += '<th scope="row">' + h.annee + '</th>';
+            lignes += '<td style="--size: ' + tailleCand + '; --color: #2a5298;">';
+            lignes += '<span class="data">' + h.candidats + '</span></td>';
+            lignes += '<td style="--size: ' + tailleAdmis + '; --color: #1a936f;">';
+            lignes += '<span class="data">' + h.admis + '</span></td>';
+            lignes += '</tr>';
+          }
+
+          graphCandidats.innerHTML = '<table class="charts-css column multiple show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
+            + '<thead><tr><th scope="col">Année</th><th scope="col">Candidats</th><th scope="col">Admis</th></tr></thead>'
+            + '<tbody>' + lignes + '</tbody></table>';
+        }
+
+        // Tableau : évolution des mentions
+        if (graphMentionsHist) {
+          var tableau = '<table class="detail-table">';
+          tableau += '<thead><tr><th>Année</th><th>Sans mention</th><th>AB</th><th>Bien</th><th>TB</th><th>TB Féli.</th></tr></thead>';
+          tableau += '<tbody>';
+
+          for (var i = 0; i < historique.length; i++) {
+            var h = historique[i];
+            tableau += '<tr>';
+            tableau += '<td><b>' + h.annee + '</b></td>';
+            tableau += '<td>' + h.pctSansMention + '%</td>';
+            tableau += '<td>' + h.pctAB + '%</td>';
+            tableau += '<td>' + h.pctB + '%</td>';
+            tableau += '<td>' + h.pctTB + '%</td>';
+            tableau += '<td>' + h.pctTBF + '%</td>';
+            tableau += '</tr>';
+          }
+
+          tableau += '</tbody></table>';
+          graphMentionsHist.innerHTML = tableau;
+        }
+      },
+
+      construireGraphiqueColonnes(elements) {
+        var lignes = '';
+
+        for (var i = 0; i < elements.length; i++) {
+          var el      = elements[i];
+          var taille  = this.limiterValeur(el.valeur);
+          var affiche = el.valeur || 0;
+
+          lignes += '<tr>';
+          lignes += '<th scope="row">' + el.label + '</th>';
+          lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">';
+          lignes += '<span class="data">' + affiche + '%</span>';
+          lignes += '</td></tr>';
+        }
+
+        return '<table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
+          + '<thead><tr><th scope="col">Type</th><th scope="col">%</th></tr></thead>'
+          + '<tbody>' + lignes + '</tbody></table>';
+      },
+
+      construireGraphiqueBarres(elements) {
+        var lignes = '';
+
+        for (var i = 0; i < elements.length; i++) {
+          var el      = elements[i];
+          var taille  = this.limiterValeur(el.valeur);
+          var affiche = el.valeur || 0;
+
+          lignes += '<tr>';
+          lignes += '<th scope="row">' + el.label + '</th>';
+          lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">';
+          lignes += '<span class="data">' + affiche + '%</span>';
+          lignes += '</td></tr>';
+        }
+
+        return '<table class="charts-css bar show-labels show-primary-axis show-4-secondary-axes data-spacing-14">'
+          + '<thead><tr><th scope="col">Catégorie</th><th scope="col">%</th></tr></thead>'
+          + '<tbody>' + lignes + '</tbody></table>';
+      }
+
+    };
+  </script>
+
+</detail-view>
diff --git a/parcoursup/components/map-view.riot b/parcoursup/components/map-view.riot
index 3bfd26d..d719bba 100644
--- a/parcoursup/components/map-view.riot
+++ b/parcoursup/components/map-view.riot
@@ -1,53 +1,120 @@
 <map-view>
   <div class="map-box">
     <h3>Carte des formations</h3>
-    <div id="map"></div>
+    <div class="map" ref="carte"></div>
   </div>
 
   <script>
     export default {
+
       onMounted() {
-        this.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
+        var divCarte = this.$('div[ref="carte"]');
+
+        this.carte           = L.map(divCarte).setView([46.8, 2.5], 6);
+        this.groupeMarqueurs = L.layerGroup().addTo(this.carte);
+        this.marqueursIndex  = {};
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           attribution: '&copy; OpenStreetMap contributors'
-        }).addTo(this.map)
+        }).addTo(this.carte);
 
-        this.markersLayer = L.layerGroup().addTo(this.map)
-        this.refreshMarkers()
+        this.afficherMarqueurs();
+
+        var composant = this;
+
+        setTimeout(function() {
+          if (composant.carte) {
+            composant.carte.invalidateSize();
+          }
+        }, 200);
+
+        setTimeout(function() {
+          if (composant.carte) {
+            composant.carte.invalidateSize();
+          }
+        }, 500);
+
+        window.mapFocus = function(id) {
+          composant.centrerSurFormation(id);
+        };
       },
 
       onUpdated() {
-        this.refreshMarkers()
+        this.afficherMarqueurs();
+
+        var composant = this;
+
+        if (this.carte) {
+          setTimeout(function() {
+            composant.carte.invalidateSize();
+          }, 100);
+
+          setTimeout(function() {
+            composant.carte.invalidateSize();
+          }, 300);
+        }
       },
 
-      refreshMarkers() {
-        if (!this.map || !this.markersLayer) {
-          return
+      onBeforeUnmount() {
+        if (this.carte) {
+          this.carte.remove();
+          this.carte = null;
+        }
+        window.mapFocus = null;
+      },
+
+      afficherMarqueurs() {
+        if (!this.carte || !this.groupeMarqueurs) {
+          return;
         }
 
-        this.markersLayer.clearLayers()
+        this.groupeMarqueurs.clearLayers();
+        this.marqueursIndex = {};
 
-        const points = []
+        var coordonnees = [];
+        var formations  = this.props.results || [];
 
-        for (let i = 0; i < this.props.results.length; i++) {
-          const f = this.props.results[i]
+        for (var i = 0; i < formations.length; i++) {
+          var f = formations[i];
 
-          if (f.latitude && f.longitude) {
-            const marker = L.marker([f.latitude, f.longitude])
-            marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
-            marker.addTo(this.markersLayer)
+          if (f.latitude != null && f.longitude != null) {
+            var marqueur = L.marker([f.latitude, f.longitude]);
+            marqueur.bindPopup('<b>' + f.nom + '</b><br>' + f.ville);
+            marqueur.addTo(this.groupeMarqueurs);
 
-            points.push([f.latitude, f.longitude])
+            this.marqueursIndex[f.id] = marqueur;
+            coordonnees.push([f.latitude, f.longitude]);
           }
         }
 
-        if (points.length > 0) {
-          this.map.fitBounds(points, { padding: [20, 20] })
+        if (coordonnees.length > 0) {
+          this.carte.fitBounds(coordonnees, { padding: [20, 20] });
         } else {
-          this.map.setView([46.8, 2.5], 6)
+          this.carte.setView([46.8, 2.5], 6);
+        }
+      },
+
+      centrerSurFormation(id) {
+        var marqueur = this.marqueursIndex[id];
+
+        if (marqueur && this.carte) {
+          var divCarte = this.$('div[ref="carte"]');
+
+          if (divCarte) {
+            divCarte.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+
+          var composant = this;
+
+          setTimeout(function() {
+            composant.carte.invalidateSize();
+            composant.carte.setView(marqueur.getLatLng(), 13, { animate: true });
+            marqueur.openPopup();
+          }, 400);
         }
       }
-    }
+
+    };
   </script>
-</map-view>
\ No newline at end of file
+
+</map-view>
diff --git a/parcoursup/components/result-list.riot b/parcoursup/components/result-list.riot
index 9d12a38..28d25cb 100644
--- a/parcoursup/components/result-list.riot
+++ b/parcoursup/components/result-list.riot
@@ -1,5 +1,6 @@
 <result-list>
   <div class="results">
+
     <div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
       Aucun résultat trouvé
     </div>
@@ -8,13 +9,41 @@
       Chargement...
     </div>
 
-    <div each={ (f, i) in props.results } key={ f.id } class="card">
-      <h3>{ f.nom }</h3>
-      <p><b>Établissement :</b> { f.etablissement }</p>
-      <p><b>Ville :</b> { f.ville } ({ f.departement })</p>
-      <p><b>Filière :</b> { f.filiere }</p>
-      <p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
-      <button onclick={ () => props.ondetail(i) }>Voir détail</button>
+    <div each={ (formation, index) in props.results } key={ formation.id } class="card">
+      <h3>{ formation.nom }</h3>
+      <p><b>Établissement :</b> { formation.etablissement }</p>
+      <p><b>Ville :</b> { formation.ville } ({ formation.departement })</p>
+      <p><b>Filière :</b> { formation.filiere }</p>
+      <p><b>Taux d'accès :</b> { formation.tauxAcces }%</p>
+
+      <button onclick={ afficherDetail.bind(this, index) }>Voir détail</button>
+      <button onclick={ ajouterALaSelection.bind(this, index) }>Ajouter à la sélection</button>
+      <button onclick={ localiserSurCarte.bind(this, formation) } if={ formation.latitude != null }>Localiser</button>
     </div>
+
   </div>
-</result-list>
\ No newline at end of file
+
+  <script>
+    export default {
+
+      // Déclencher l'affichage du détail d'une formation
+      afficherDetail(index) {
+        this.props.ondetail(index);
+      },
+
+      // Ajouter une formation à la sélection
+      ajouterALaSelection(index) {
+        this.props.onselect(index);
+      },
+
+      // Centrer la carte sur la formation
+      localiserSurCarte(formation) {
+        if (window.mapFocus) {
+          window.mapFocus(formation.id);
+        }
+      }
+
+    };
+  </script>
+
+</result-list>
diff --git a/parcoursup/components/search-bar.riot b/parcoursup/components/search-bar.riot
index 01861a4..ebc5337 100644
--- a/parcoursup/components/search-bar.riot
+++ b/parcoursup/components/search-bar.riot
@@ -2,26 +2,146 @@
   <div class="search-bar">
     <input
       type="text"
-      placeholder="Ex : BUT informatique"
+      placeholder="Ex : BUT informatique, Licence droit..."
       oninput={ updateQuery }
       value={ state.query }
+      onkeydown={ handleKey }
     />
     <button onclick={ submitSearch }>Rechercher</button>
   </div>
 
+  <div class="filters-toggle">
+    <button class="btn btn-small btn-outline" onclick={ toggleFilters }>
+      { state.labelFiltres }
+    </button>
+  </div>
+
+  <div class="filters-panel" if={ state.showFilters }>
+    <div class="filter-row">
+      <div class="filter-item">
+        <label>Type de formation</label>
+        <select onchange={ updateFiliere }>
+          <option value="">Tous</option>
+          <option value="BTS">BTS</option>
+          <option value="BUT">BUT</option>
+          <option value="Licence">Licence</option>
+          <option value="Licence_Las">Licence - L.AS</option>
+          <option value="CPGE">CPGE</option>
+          <option value="Ecole de Commerce">École de Commerce</option>
+          <option value="IFSI">IFSI</option>
+          <option value="PASS">PASS</option>
+          <option value="EFTS">EFTS</option>
+        </select>
+      </div>
+
+      <div class="filter-item">
+        <label>Sélectivité</label>
+        <select onchange={ updateSelectivite }>
+          <option value="">Toutes</option>
+          <option value="formation sélective">Sélective</option>
+          <option value="formation non sélective">Non sélective</option>
+        </select>
+      </div>
+
+      <div class="filter-item">
+        <label>Région</label>
+        <select onchange={ updateRegion }>
+          <option value="">Toutes</option>
+          <option value="Auvergne-Rhône-Alpes">Auvergne-Rhône-Alpes</option>
+          <option value="Bourgogne-Franche-Comté">Bourgogne-Franche-Comté</option>
+          <option value="Bretagne">Bretagne</option>
+          <option value="Centre-Val de Loire">Centre-Val de Loire</option>
+          <option value="Corse">Corse</option>
+          <option value="Grand Est">Grand Est</option>
+          <option value="Guadeloupe">Guadeloupe</option>
+          <option value="Guyane">Guyane</option>
+          <option value="Hauts-de-France">Hauts-de-France</option>
+          <option value="Ile-de-France">Île-de-France</option>
+          <option value="La Réunion">La Réunion</option>
+          <option value="Martinique">Martinique</option>
+          <option value="Mayotte">Mayotte</option>
+          <option value="Normandie">Normandie</option>
+          <option value="Nouvelle-Aquitaine">Nouvelle-Aquitaine</option>
+          <option value="Occitanie">Occitanie</option>
+          <option value="Pays de la Loire">Pays de la Loire</option>
+          <option value="Provence-Alpes-Côte d'Azur">PACA</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="filter-row">
+      <div class="filter-item">
+        <label>Taux d'accès min (%)</label>
+        <input type="number" min="0" max="100" value={ state.tauxMin } oninput={ updateTauxMin } placeholder="0" />
+      </div>
+
+      <div class="filter-item">
+        <label>Taux d'accès max (%)</label>
+        <input type="number" min="0" max="100" value={ state.tauxMax } oninput={ updateTauxMax } placeholder="100" />
+      </div>
+    </div>
+  </div>
+
   <script>
     export default {
       state: {
-        query: ''
+        query: '',
+        showFilters: false,
+        labelFiltres: 'Filtres avancés',
+        filiere: '',
+        selectivite: '',
+        region: '',
+        tauxMin: 0,
+        tauxMax: 100
       },
 
       updateQuery(e) {
-        this.update({ query: e.target.value })
+        this.update({ query: e.target.value });
+      },
+
+      handleKey(e) {
+        if (e.key === 'Enter') {
+          this.submitSearch();
+        }
+      },
+
+      toggleFilters() {
+        var visible = !this.state.showFilters;
+        var label   = visible ? 'Masquer les filtres' : 'Filtres avancés';
+        this.update({ showFilters: visible, labelFiltres: label });
+      },
+
+      updateFiliere(e) {
+        this.update({ filiere: e.target.value });
+      },
+
+      updateSelectivite(e) {
+        this.update({ selectivite: e.target.value });
+      },
+
+      updateRegion(e) {
+        this.update({ region: e.target.value });
+      },
+
+      updateTauxMin(e) {
+        this.update({ tauxMin: Number(e.target.value) });
+      },
+
+      updateTauxMax(e) {
+        this.update({ tauxMax: Number(e.target.value) });
       },
 
       submitSearch() {
-        this.props.onsearch(this.state.query)
+        var filters = {
+          filiere: this.state.filiere,
+          selectivite: this.state.selectivite,
+          region: this.state.region,
+          tauxMin: this.state.tauxMin,
+          tauxMax: this.state.tauxMax
+        };
+
+        this.props.onsearch(this.state.query, filters);
       }
-    }
+    };
   </script>
-</search-bar>
\ No newline at end of file
+</search-bar>
diff --git a/parcoursup/formation.js b/parcoursup/formation.js
index b03f51f..fbe770e 100644
--- a/parcoursup/formation.js
+++ b/parcoursup/formation.js
@@ -1,23 +1,97 @@
-export function createFormation(raw) {
-  let taux = 0
+// Créer un objet formation à partir des données brutes de l'API
+export function creerFormation(brut) {
 
-  if (raw.voe_tot && raw.voe_tot > 0) {
-    taux = Math.round((raw.acc_tot / raw.voe_tot) * 100)
+  var taux      = 0;
+  var latitude  = null;
+  var longitude = null;
+
+  if (brut.voe_tot && brut.voe_tot > 0) {
+    taux = Math.round((brut.acc_tot / brut.voe_tot) * 100);
+  }
+
+  if (brut.g_olocalisation_des_formations) {
+    latitude  = brut.g_olocalisation_des_formations.lat;
+    longitude = brut.g_olocalisation_des_formations.lon;
   }
 
   return {
-    id: raw.cod_uai + "-" + raw.lib_for_voe_ins,
-    nom: raw.lib_for_voe_ins,
-    etablissement: raw.g_ea_lib_vx,
-    ville: raw.ville_etab,
-    departement: raw.dep,
-    filiere: raw.fili,
-    selectivite: raw.select_form,
-    capacite: raw.capa_fin,
-    candidats: raw.voe_tot,
-    admis: raw.acc_tot,
-    tauxAcces: taux,
-    latitude: raw.g_olocalisation_des_formations ? raw.g_olocalisation_des_formations.lat : null,
-    longitude: raw.g_olocalisation_des_formations ? raw.g_olocalisation_des_formations.lon : null
-  }
+    id:            brut.cod_uai + "-" + brut.lib_for_voe_ins,
+
+    nom:           brut.lib_for_voe_ins,
+    etablissement: brut.g_ea_lib_vx,
+    ville:         brut.ville_etab,
+    departement:   brut.dep,
+    departementLib: brut.dep_lib,
+    region:        brut.region_etab_aff,
+    academie:      brut.acad_mies,
+    contrat:       brut.contrat_etab,
+
+    filiere:       brut.fili,
+    selectivite:   brut.select_form,
+
+    capacite:      brut.capa_fin,
+    candidats:     brut.voe_tot,
+    admis:         brut.acc_tot,
+    tauxAcces:     taux,
+
+    latitude:      latitude,
+    longitude:     longitude,
+
+    pctFemmes:     brut.pct_f,
+    pctBoursiers:  brut.pct_bours,
+    pctNeoBac:     brut.pct_neobac,
+
+    pctGeneral:    brut.pct_bg,
+    pctTechno:     brut.pct_bt,
+    pctPro:        brut.pct_bp,
+
+    pctSansMention: brut.pct_sansmention,
+    pctAB:          brut.pct_ab,
+    pctB:           brut.pct_b,
+    pctTB:          brut.pct_tb,
+    pctTBF:         brut.pct_tbf,
+
+    pctDebutPhase:  brut.pct_acc_debutpp,
+    pctDateBac:     brut.pct_acc_datebac,
+    pctFinPhase:    brut.pct_acc_finpp,
+
+    admisDebutPhase: brut.acc_debutpp,
+    admisDateBac:    brut.acc_datebac,
+    admisFinPhase:   brut.acc_finpp,
+
+    // Phase principale
+    voePPGeneral:      brut.nb_voe_pp_bg,
+    voePPTechno:       brut.nb_voe_pp_bt,
+    voePPPro:          brut.nb_voe_pp_bp,
+    voePPAutres:       brut.nb_voe_pp_at,
+    voePPTotal:        brut.nb_voe_pp,
+
+    classesPPGeneral:  brut.nb_cla_pp_bg,
+    classesPPTechno:   brut.nb_cla_pp_bt,
+    classesPPPro:      brut.nb_cla_pp_bp,
+    classesPPAutres:   brut.nb_cla_pp_at,
+    classesPPTotal:    brut.nb_cla_pp,
+
+    propositionsPPGeneral: brut.prop_tot_bg,
+    propositionsPPTechno:  brut.prop_tot_bt,
+    propositionsPPPro:     brut.prop_tot_bp,
+    propositionsPPAutres:  brut.prop_tot_at,
+    propositionsPPTotal:   brut.prop_tot,
+
+    acceptesPPGeneral: brut.acc_bg,
+    acceptesPPTechno:  brut.acc_bt,
+    acceptesPPPro:     brut.acc_bp,
+    acceptesPPAutres:  brut.acc_at,
+    acceptesPPTotal:   brut.acc_pp,
+
+    // Phase complémentaire
+    voePCGeneral:  brut.nb_voe_pc_bg,
+    voePCTechno:   brut.nb_voe_pc_bt,
+    voePCPro:      brut.nb_voe_pc_bp,
+    voePCAutres:   brut.nb_voe_pc_at,
+    voePCTotal:    brut.nb_voe_pc,
+
+    classesPCTotal:  brut.nb_cla_pc,
+    acceptesPCTotal: brut.acc_pc
+  };
 }
\ No newline at end of file
diff --git a/parcoursup/index.html b/parcoursup/index.html
index 349c182..da008b8 100644
--- a/parcoursup/index.html
+++ b/parcoursup/index.html
@@ -3,38 +3,56 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Parcoursup Riot</title>
-  
+    <title>Parcoursup Explorer</title>
+
     <link rel="stylesheet" href="./style.css" />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-    />
-  
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css" />
+
     <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
   </head>
-<body>
-  <app></app>
+  <body>
+    <app></app>
 
-  <script src="./components/search-bar.riot" type="riot"></script>
-<script src="./components/result-list.riot" type="riot"></script>
-<script src="./components/detail-view.riot" type="riot"></script>
-<script src="./components/map-view.riot" type="riot"></script>
-<script src="./app.riot" type="riot"></script>
+    <script src="./components/search-bar.riot" type="riot"></script>
+    <script src="./components/result-list.riot" type="riot"></script>
+    <script src="./components/detail-view.riot" type="riot"></script>
+    <script src="./components/map-view.riot" type="riot"></script>
+    <script src="./components/auth-panel.riot" type="riot"></script>
+    <script src="./app.riot" type="riot"></script>
 
-  <script type="module">
-    import { fetchFormations } from './api.js'
-    import { createFormation } from './formation.js'
+    <script type="module">
+      import { chargerFormations, chargerHistoriqueFormation } from './api.js'
+      import { creerFormation } from './formation.js'
+      import {
+        auth,
+        db,
+        createAccount,
+        login,
+        logout,
+        onUserChanged,
+        saveUserData,
+        loadUserData
+      } from './firebase.js'
 
-    window.fetchFormations = fetchFormations
-    window.createFormation = createFormation
-  </script>
+      window.chargerFormations           = chargerFormations
+      window.creerFormation              = creerFormation
+      window.chargerHistoriqueFormation  = chargerHistoriqueFormation
 
-  <script>
-    riot.compile().then(() => {
+      window.firebaseServices = {
+        auth,
+        db,
+        createAccount,
+        login,
+        logout,
+        onUserChanged,
+        saveUserData,
+        loadUserData
+      }
+
+      await riot.compile()
       riot.mount('app')
-    })
-  </script>
-</body>
+    </script>
+  </body>
 </html>
\ No newline at end of file
diff --git a/parcoursup/style.css b/parcoursup/style.css
index da935e5..9f4e3b6 100644
--- a/parcoursup/style.css
+++ b/parcoursup/style.css
@@ -1,97 +1,901 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    background: #f5f5f5;
-    color: #222;
-  }
-  
-  .page {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  
-  h1 {
-    margin-bottom: 8px;
-  }
-  
-  .subtitle {
-    margin-top: 0;
-    color: #555;
-  }
-  
-  .search-bar {
-    display: flex;
-    gap: 10px;
-    margin: 20px 0;
-  }
-  
-  .search-bar input {
-    flex: 1;
-    padding: 10px;
-    font-size: 16px;
-  }
-  
-  .search-bar button,
-  .card button,
-  .detail-card button {
-    padding: 10px 14px;
-    font-size: 14px;
-    cursor: pointer;
-  }
-  
-  .layout {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-  
-  .results {
-    display: grid;
-    gap: 16px;
-  }
-  
-  .card {
-    border: 1px solid #d8d8d8;
-    background: white;
-    padding: 16px;
-    border-radius: 8px;
-  }
-  
-  .card h3 {
-    margin-top: 0;
-  }
-  
-  .detail-card {
-    border: 1px solid #d8d8d8;
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-  }
-  
-  .map-box {
-    border: 1px solid #d8d8d8;
-    background: white;
-    border-radius: 8px;
-    padding: 12px;
-  }
-  
-  #map {
-    height: 420px;
-    width: 100%;
-    border-radius: 6px;
-  }
-  
-  .message {
-    padding: 12px;
-    background: white;
-    border: 1px solid #d8d8d8;
-    border-radius: 8px;
-  }
-  
-  @media (min-width: 900px) {
-    .layout {
-      grid-template-columns: 1.2fr 1fr;
-      align-items: start;
-    }
-  }
\ No newline at end of file
+/* ============================================================
+   PARCOURSUP EXPLORER — Charte Parcoursup officielle
+   ============================================================ */
+
+   :root {
+    --vert: #1a936f;
+    --vert-fonce: #147a5c;
+    --vert-clair: #e8f5ef;
+    --bleu: #2a5298;
+    --bleu-clair: #eaf0fa;
+    --orange: #e67e22;
+    --rouge: #c0392b;
+    --gris-50: #f9fafb;
+    --gris-100: #f3f4f6;
+    --gris-200: #e5e7eb;
+    --gris-300: #d1d5db;
+    --gris-500: #6b7280;
+    --gris-700: #374151;
+    --gris-900: #111827;
+    --rayon: 6px;
+  }
+  
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: 'Marianne', 'Segoe UI', system-ui, -apple-system, sans-serif;
+    margin: 0;
+    background: var(--gris-50);
+    color: var(--gris-900);
+    line-height: 1.6;
+    font-size: 15px;
+  }
+  
+  /* ===========================================================
+     HEADER
+     =========================================================== */
+  
+  .site-header {
+    background: white;
+    border-bottom: 3px solid var(--vert);
+    padding: 0 24px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  }
+  
+  .header-inner {
+    max-width: 1100px;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  .logo-icon { font-size: 22px; }
+  
+  .logo-text {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--vert);
+    letter-spacing: -0.3px;
+  }
+  
+  .logo-light {
+    font-weight: 400;
+    color: var(--gris-700);
+  }
+  
+  .header-badge {
+    background: var(--vert-clair);
+    color: var(--vert-fonce);
+    padding: 4px 14px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 600;
+    border: 1px solid #b8e0cd;
+    text-decoration: none;
+  }
+  
+  /* ===========================================================
+     PAGE
+     =========================================================== */
+  
+  .page {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 24px 20px 40px;
+  }
+  
+  /* ===========================================================
+     BOUTONS
+     =========================================================== */
+  
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 600;
+    border: none;
+    border-radius: var(--rayon);
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  
+  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+  
+  .btn-primary { background: var(--vert); color: white; }
+  .btn-primary:hover:not(:disabled) { background: var(--vert-fonce); }
+  
+  .btn-outline { background: white; color: var(--vert); border: 1.5px solid var(--vert); }
+  .btn-outline:hover:not(:disabled) { background: var(--vert-clair); }
+  
+  .btn-danger { background: #fef2f2; color: var(--rouge); border: 1px solid #f5c6cb; }
+  .btn-danger:hover { background: #fde8e8; }
+  
+  .btn-small { padding: 5px 12px; font-size: 13px; }
+  
+  /* ===========================================================
+     SEARCH BAR
+     =========================================================== */
+  
+  .search-bar {
+    display: flex;
+    gap: 10px;
+    margin: 0 0 20px;
+  }
+  
+  .search-bar input {
+    flex: 1;
+    padding: 10px 14px;
+    font-size: 15px;
+    border: 1.5px solid var(--gris-300);
+    border-radius: var(--rayon);
+    background: white;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+  
+  .search-bar input:focus {
+    border-color: var(--vert);
+    box-shadow: 0 0 0 2px rgba(26, 147, 111, 0.12);
+  }
+  
+  .search-bar button {
+    padding: 10px 22px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    background: var(--vert);
+    color: white;
+    border: none;
+    border-radius: var(--rayon);
+    transition: background 0.15s;
+  }
+  
+  .search-bar button:hover { background: var(--vert-fonce); }
+  
+  .result-count {
+    font-size: 14px;
+    color: var(--gris-500);
+    margin: 0 0 14px;
+  }
+  
+  /* ===========================================================
+     CARDS
+     =========================================================== */
+  
+  .card {
+    background: white;
+    padding: 18px 20px;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+    transition: border-color 0.15s;
+  }
+  
+  .card:hover { border-color: var(--vert); }
+  
+  .card h3, .card h4 {
+    margin-top: 0;
+    margin-bottom: 6px;
+    color: var(--bleu);
+    font-size: 1rem;
+  }
+  
+  .card p {
+    margin: 4px 0;
+    font-size: 14px;
+    color: var(--gris-700);
+  }
+  
+  .card button {
+    margin-top: 10px;
+    padding: 6px 14px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: var(--rayon);
+    border: 1.5px solid var(--vert);
+    background: white;
+    color: var(--vert);
+    transition: all 0.15s;
+  }
+  
+  .card button:hover { background: var(--vert-clair); }
+  .card button + button { margin-left: 8px; }
+  
+  /* --- Cards colorées du comparateur --- */
+  .card-tres-favorable {
+    background: #e8f5ef;
+    border-color: #6ec89b;
+    border-left: 4px solid #147a5c;
+  }
+  
+  .card-favorable {
+    background: #eaf7ed;
+    border-color: #a3d9b8;
+    border-left: 4px solid #1a936f;
+  }
+  
+  .card-possible {
+    background: #fef9e7;
+    border-color: #f6e05e;
+    border-left: 4px solid #d69e2e;
+  }
+  
+  .card-difficile {
+    background: #fef2f2;
+    border-color: #f5c6cb;
+    border-left: 4px solid #e67e22;
+  }
+  
+  .card-tres-difficile {
+    background: #fde8e8;
+    border-color: #f5a3a3;
+    border-left: 4px solid #c0392b;
+  }
+  
+  /* ===========================================================
+     BADGES ESTIMATION — 5 niveaux
+     =========================================================== */
+  
+  .estimate {
+    display: inline-block;
+    padding: 4px 14px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 700;
+  }
+  
+  .tres-favorable {
+    background: #147a5c;
+    color: white;
+  }
+  
+  .favorable {
+    background: var(--vert-clair);
+    color: var(--vert-fonce);
+    border: 1px solid #a3d9c0;
+  }
+  
+  .possible {
+    background: #fef9e7;
+    color: #b7791f;
+    border: 1px solid #f6e05e;
+  }
+  
+  .difficile {
+    background: #fef2f2;
+    color: #c05621;
+    border: 1px solid #f5c6cb;
+  }
+  
+  .tres-difficile {
+    background: var(--rouge);
+    color: white;
+  }
+  
+  .estimation-result {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+  
+  .estimation-detail {
+    font-size: 12px;
+    color: var(--gris-500);
+  }
+  
+  /* ===========================================================
+     DETAIL CARD — Comparateur
+     =========================================================== */
+  
+  .detail-card {
+    background: white;
+    padding: 22px 24px;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+    margin-bottom: 20px;
+  }
+  
+  .detail-card hr {
+    margin: 18px 0;
+    border: none;
+    border-top: 1px solid var(--gris-200);
+  }
+  
+  .detail-card h2, .detail-card h3 {
+    margin-top: 0;
+    color: var(--gris-900);
+  }
+  
+  .detail-card p {
+    margin: 6px 0;
+    color: var(--gris-700);
+  }
+  
+  .comparateur-card {
+    border-left: 4px solid var(--vert);
+  }
+  
+  /* ===========================================================
+     COMPARE CONTROLS
+     =========================================================== */
+  
+  .compare-controls {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 14px;
+    align-items: flex-end;
+  }
+  
+  .compare-controls label {
+    font-size: 13px;
+    color: var(--gris-500);
+    font-weight: 600;
+  }
+  
+  .compare-controls input,
+  .compare-controls select {
+    padding: 8px 12px;
+    font-size: 14px;
+    min-width: 130px;
+    border: 1.5px solid var(--gris-300);
+    border-radius: var(--rayon);
+    background: white;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+  
+  .compare-controls input:focus,
+  .compare-controls select:focus {
+    border-color: var(--vert);
+  }
+  
+  /* ===========================================================
+     PAGINATION
+     =========================================================== */
+  
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    margin: 20px 0;
+  }
+  
+  .page-info {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--gris-500);
+  }
+  
+  /* ===========================================================
+     LAYOUT
+     =========================================================== */
+  
+  .layout {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .results {
+    display: grid;
+    gap: 12px;
+  }
+  
+  .message {
+    padding: 16px;
+    background: white;
+    border: 1px solid var(--gris-200);
+    border-radius: var(--rayon);
+    text-align: center;
+    color: var(--gris-500);
+  }
+  
+  /* ===========================================================
+     MAP
+     =========================================================== */
+  
+  .map-box {
+    overflow: hidden;
+    margin-bottom: 20px;
+  }
+  
+  .map-box h3 {
+    margin: 0 0 8px;
+    font-size: 0.95rem;
+    color: var(--gris-700);
+  }
+  
+  .map {
+    height: 400px;
+    width: 100%;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+  }
+  
+  /* ===========================================================
+     DETAIL VIEW
+     =========================================================== */
+  
+  .detail-page { background: transparent; }
+  
+  .formation-title {
+    color: var(--bleu);
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 1.25;
+    margin-bottom: 16px;
+  }
+  
+  .formation-meta {
+    background: white;
+    padding: 18px 22px;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+    margin-bottom: 24px;
+  }
+  
+  .formation-meta p {
+    margin: 5px 0;
+    font-size: 14px;
+    color: var(--gris-700);
+  }
+  
+  .detail-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 24px;
+    align-items: start;
+    margin-top: 8px;
+    margin-bottom: 28px;
+  }
+  
+  .detail-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: white;
+    border-radius: var(--rayon);
+    overflow: hidden;
+  }
+  
+  .detail-table th,
+  .detail-table td {
+    border: 1px solid var(--gris-200);
+    padding: 10px 12px;
+    text-align: left;
+    font-size: 14px;
+  }
+  
+  .detail-table thead th {
+    background: var(--gris-100);
+    font-weight: 700;
+    color: var(--gris-700);
+    font-size: 13px;
+  }
+  
+  .total-row td {
+    font-weight: 700;
+    background: var(--gris-100);
+  }
+  
+  .timeline-box {
+    background: white;
+    padding: 18px 22px;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+  }
+  
+  .timeline-box h3 { margin-top: 0; color: var(--gris-900); }
+  
+  .timeline {
+    position: relative;
+    margin-top: 20px;
+    padding-left: 26px;
+    border-left: 3px solid #b8e0cd;
+  }
+  
+  .timeline-item { position: relative; margin-bottom: 32px; }
+  
+  .timeline-dot {
+    position: absolute;
+    left: -35px;
+    top: 5px;
+    width: 12px;
+    height: 12px;
+    background: var(--vert);
+    border-radius: 50%;
+    border: 3px solid var(--vert-clair);
+  }
+  
+  /* ===========================================================
+     CHARTS CSS
+     =========================================================== */
+  
+  .charts-heading {
+    margin-top: 32px;
+    margin-bottom: 4px;
+    color: var(--gris-900);
+  }
+  
+  .charts-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin: 16px 0 28px;
+  }
+  
+  .chart-wrapper {
+    background: white;
+    border: 1px solid var(--gris-200);
+    border-radius: var(--rayon);
+    padding: 18px 20px 14px;
+  }
+  
+  .chart-wrapper h3 {
+    margin: 0 0 14px;
+    font-size: 0.9rem;
+    color: var(--gris-700);
+    font-weight: 600;
+  }
+  
+  .chart-full { grid-column: 1 / -1; }
+  
+  #chart-bac .column,
+  #chart-mentions .column {
+    height: 240px;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+  
+  #chart-profil .bar {
+    height: 170px;
+    max-width: 560px;
+    margin: 0;
+  }
+  
+  #chart-profil .bar th {
+    width: 85px;
+    font-size: 13px;
+  }
+  
+  #chart-evolution-taux .column {
+    height: 220px;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+  
+  #chart-evolution-candidats .column {
+    height: 220px;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+  
+  .chart-wrapper .data {
+    font-size: 11px;
+    font-weight: 700;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
+  }
+  
+  .btn-retour {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin: 12px 0 28px;
+    padding: 9px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    background: var(--vert);
+    color: white;
+    border: none;
+    border-radius: var(--rayon);
+    transition: background 0.15s;
+  }
+  
+  .btn-retour:hover { background: var(--vert-fonce); }
+  
+  /* ===========================================================
+     RESPONSIVE
+     =========================================================== */
+  
+  /* --- Badge cliquable --- */
+  .badge-clickable {
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  
+  .badge-clickable:hover {
+    background: #c6f0dc;
+    border-color: #6ec89b;
+  }
+  
+  /* --- Filtres avancés --- */
+  .filters-toggle {
+    margin: -10px 0 16px;
+  }
+  
+  .filters-panel {
+    background: white;
+    border: 1px solid var(--gris-200);
+    border-radius: var(--rayon);
+    padding: 16px 20px;
+    margin-bottom: 20px;
+  }
+  
+  .filter-row {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 12px;
+  }
+  
+  .filter-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .filter-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 160px;
+    flex: 1;
+  }
+  
+  .filter-item label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--gris-500);
+  }
+  
+  .filter-item select,
+  .filter-item input {
+    padding: 8px 10px;
+    font-size: 14px;
+    border: 1.5px solid var(--gris-300);
+    border-radius: var(--rayon);
+    background: white;
+    outline: none;
+  }
+  
+  .filter-item select:focus,
+  .filter-item input:focus {
+    border-color: var(--vert);
+  }
+  
+  @media (max-width: 900px) {
+    .detail-grid { grid-template-columns: 1fr; }
+  }
+  
+  @media (max-width: 700px) {
+    .charts-section { grid-template-columns: 1fr; }
+    .site-header { padding: 0 14px; }
+    .logo-text { font-size: 16px; }
+    .page { padding: 16px 12px 30px; }
+    .search-bar { flex-direction: column; }
+    .search-bar button { width: 100%; }
+  }
+
+  /* ===========================================================
+     HEADER RIGHT (badge + auth)
+     =========================================================== */
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  /* ===========================================================
+     AUTH PANEL
+     =========================================================== */
+
+  .btn-auth {
+    background: var(--vert);
+    color: white;
+    padding: 6px 14px;
+    font-size: 13px;
+    font-weight: 600;
+    border: none;
+    border-radius: var(--rayon);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: background 0.15s;
+  }
+
+  .btn-auth:hover { background: var(--vert-fonce); }
+
+  .auth-icon { font-size: 15px; }
+
+  .auth-user-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .auth-email {
+    font-size: 13px;
+    color: var(--gris-700);
+    font-weight: 500;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .btn-auth-logout {
+    background: white;
+    color: var(--rouge);
+    border: 1.5px solid #f5c6cb;
+    padding: 5px 12px;
+    font-size: 13px;
+    font-weight: 600;
+    border-radius: var(--rayon);
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .btn-auth-logout:hover {
+    background: #fef2f2;
+  }
+
+  /* --- Modale --- */
+  .auth-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(17, 24, 39, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    backdrop-filter: blur(2px);
+    animation: fadeIn 0.15s ease;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  .auth-modal {
+    background: white;
+    border-radius: 10px;
+    padding: 32px 36px;
+    width: 100%;
+    max-width: 400px;
+    position: relative;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
+    animation: slideUp 0.2s ease;
+  }
+
+  @keyframes slideUp {
+    from { transform: translateY(16px); opacity: 0; }
+    to   { transform: translateY(0);    opacity: 1; }
+  }
+
+  .auth-modal-close {
+    position: absolute;
+    top: 14px;
+    right: 16px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: var(--gris-500);
+    line-height: 1;
+    padding: 4px 6px;
+    border-radius: 4px;
+    transition: background 0.15s;
+  }
+
+  .auth-modal-close:hover { background: var(--gris-100); }
+
+  .auth-modal-title {
+    margin: 0 0 20px;
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: var(--gris-900);
+  }
+
+  /* --- Onglets --- */
+  .auth-tabs {
+    display: flex;
+    margin-bottom: 24px;
+    border-bottom: 2px solid var(--gris-200);
+  }
+
+  .auth-tab {
+    flex: 1;
+    background: none;
+    border: none;
+    padding: 8px 0;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    color: var(--gris-500);
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: all 0.15s;
+  }
+
+  .auth-tab.active {
+    color: var(--vert);
+    border-bottom-color: var(--vert);
+  }
+
+  .auth-tab:hover:not(.active) { color: var(--gris-700); }
+
+  /* --- Formulaire --- */
+  .auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .auth-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .auth-field label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--gris-700);
+  }
+
+  .auth-field input {
+    padding: 10px 12px;
+    font-size: 14px;
+    border: 1.5px solid var(--gris-300);
+    border-radius: var(--rayon);
+    outline: none;
+    transition: border-color 0.2s;
+    background: white;
+  }
+
+  .auth-field input:focus {
+    border-color: var(--vert);
+    box-shadow: 0 0 0 3px rgba(26, 147, 111, 0.12);
+  }
+
+  .auth-error {
+    background: #fef2f2;
+    border: 1px solid #f5c6cb;
+    color: var(--rouge);
+    padding: 10px 14px;
+    border-radius: var(--rayon);
+    font-size: 13px;
+  }
+
+  .auth-submit {
+    width: 100%;
+    justify-content: center;
+    padding: 11px;
+    font-size: 15px;
+  }
\ No newline at end of file