diff --git a/parcoursup/api.js b/parcoursup/api.js
index a263180..20b2c65 100644
--- a/parcoursup/api.js
+++ b/parcoursup/api.js
@@ -1,19 +1,45 @@
-export function buildURL(query, limit = 20, offset = 0) {
+export function buildURL(query, limit = 20, offset = 0, filters = {}) {
   let url =
     "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records?"
 
   url += "limit=" + limit
   url += "&offset=" + offset
 
+  var conditions = []
+
   if (query && query.trim() !== "") {
-    url += "&where=search(lib_for_voe_ins, '" + query + "')"
+    conditions.push("search(lib_for_voe_ins, '" + query + "')")
+  }
+
+  if (filters.filiere && filters.filiere !== "") {
+    conditions.push("fili='" + filters.filiere + "'")
+  }
+
+  if (filters.selectivite && filters.selectivite !== "") {
+    conditions.push("select_form='" + filters.selectivite + "'")
+  }
+
+  if (filters.region && filters.region !== "") {
+    conditions.push("region_etab_aff='" + filters.region + "'")
+  }
+
+  if (filters.tauxMin && filters.tauxMin > 0) {
+    conditions.push("taux_acces_ens>=" + filters.tauxMin)
+  }
+
+  if (filters.tauxMax && filters.tauxMax < 100) {
+    conditions.push("taux_acces_ens<=" + filters.tauxMax)
+  }
+
+  if (conditions.length > 0) {
+    url += "&where=" + conditions.join(" AND ")
   }
 
   return url
 }
 
-export async function fetchFormations(query, limit = 20, offset = 0) {
-  const url = buildURL(query, limit, offset)
+export async function fetchFormations(query, limit = 20, offset = 0, filters = {}) {
+  const url = buildURL(query, limit, offset, filters)
   const response = await fetch(url)
 
   if (!response.ok) {
@@ -21,4 +47,66 @@ export async function fetchFormations(query, limit = 20, offset = 0) {
   }
 
   return await response.json()
-}
\ No newline at end of file
+}
+
+export async function fetchFormationHistory(codUai, nomFormation) {
+  var datasets = {
+    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 history = []
+  var searchName = nomFormation.substring(0, 40).replace(/'/g, "\\'")
+  var years = [2020, 2021, 2022, 2023, 2024, 2025]
+
+  for (var i = 0; i < years.length; i++) {
+    var year = years[i]
+    var dataset = datasets[year]
+
+    try {
+      var url = "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/"
+        + dataset + "/records?"
+        + "limit=5"
+        + "&where=cod_uai%3D'" + codUai + "' AND search(lib_for_voe_ins, '" + searchName + "')"
+        + "&select=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 response = await fetch(url)
+
+      if (response.ok) {
+        var data = await response.json()
+
+        if (data.results && data.results.length > 0) {
+          var r = data.results[0]
+          var taux = 0
+
+          if (r.voe_tot && r.voe_tot > 0) {
+            taux = Math.round((r.acc_tot / r.voe_tot) * 100)
+          }
+
+          history.push({
+            annee: year,
+            tauxAcces: taux,
+            candidats: r.voe_tot || 0,
+            admis: r.acc_tot || 0,
+            pctSansMention: r.pct_sansmention || 0,
+            pctAB: r.pct_ab || 0,
+            pctB: r.pct_b || 0,
+            pctTB: r.pct_tb || 0,
+            pctTBF: r.pct_tbf || 0,
+            pctGeneral: r.pct_bg || 0,
+            pctTechno: r.pct_bt || 0,
+            pctPro: r.pct_bp || 0
+          })
+        }
+      }
+    } catch (e) {
+      console.warn("Erreur pour " + year + ":", e)
+    }
+  }
+
+  return history
+}
diff --git a/parcoursup/app.riot b/parcoursup/app.riot
index 3ba175f..e597f1b 100644
--- a/parcoursup/app.riot
+++ b/parcoursup/app.riot
@@ -2,10 +2,10 @@
   <header class="site-header">
     <div class="header-inner">
       <div class="logo">
-        <span class="logo-icon"></span>
+        <span class="logo-icon">🎓</span>
         <span class="logo-text">Parcoursup <span class="logo-light">Explorer</span></span>
       </div>
-      <div class="header-badge" if={ state.selectedFormations.length > 0 }>
+      <div class="header-badge badge-clickable" if={ state.selectedFormations.length > 0 } onclick={ scrollToComparateur }>
         { state.selectedFormations.length } sélection(s)
       </div>
     </div>
@@ -16,10 +16,10 @@
     <div if={ !state.selected }>
       <search-bar onsearch={ launchSearch }></search-bar>
 
-      <div class="detail-card comparateur-card" if={ state.selectedFormations.length > 0 }>
+      <div class="detail-card comparateur-card" ref="comparateur" if={ state.selectedFormations.length > 0 }>
         <h3>Comparateur</h3>
 
-        <p>Choisis ton profil pour comparer les formations sélectionnées.</p>
+        <p>Choisis ton profil pour estimer tes chances d'intégration.</p>
 
         <div class="compare-controls">
           <div>
@@ -49,6 +49,7 @@
               <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>
@@ -59,25 +60,27 @@
 
         <h3>Formations sélectionnées</h3>
 
-        <div each={ f in getSortedSelection() } key={ f.id } class="card">
+        <div each={ f in getSortedSelection() } key={ f.id } class={ getCardClass(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>Profil admis :</b>
+            <b>Intégrés :</b>
             Général { f.pctGeneral }% /
             Techno { f.pctTechno }% /
             Pro { f.pctPro }%
           </p>
 
-          <p>
-            <b>Estimation :</b>
+          <p class="estimation-result">
             <span class={ getEstimateClass(f) }>
               { estimateFormation(f) }
             </span>
+            <span class="estimation-detail">{ getEstimateDetail(f) }</span>
           </p>
 
           <button class="btn btn-small btn-outline" onclick={ () => removeFromSelection(f.id) }>
@@ -137,6 +140,7 @@
         serie: 'general',
         sortBy: 'nom',
         query: '',
+        filters: {},
         page: 1,
         limit: 20,
         total: 0
@@ -154,24 +158,103 @@
             console.error(e)
           }
         }
+
+        window.addEventListener('hashchange', () => {
+          this.handleRoute()
+        })
+
+        this.handleRoute()
       },
 
-      async launchSearch(query) {
+      // ===== ROUTER =====
+      handleRoute() {
+        const hash = window.location.hash || '#/'
+        const path = hash.slice(1) || '/'
+
+        if (path.startsWith('/formation/')) {
+          const id = decodeURIComponent(path.replace('/formation/', ''))
+          this.loadFormationById(id)
+        } else {
+          if (this.state.selected) {
+            this.update({ selected: null })
+          }
+        }
+      },
+
+      async loadFormationById(id) {
+        for (let i = 0; i < this.state.results.length; i++) {
+          if (this.state.results[i].id === id) {
+            this.update({ selected: this.state.results[i] })
+            return
+          }
+        }
+
+        for (let i = 0; i < this.state.selectedFormations.length; i++) {
+          if (this.state.selectedFormations[i].id === id) {
+            this.update({ selected: this.state.selectedFormations[i] })
+            return
+          }
+        }
+
+        try {
+          const parts = id.split('-')
+          const searchTerm = parts.slice(1).join(' ').substring(0, 30)
+
+          if (searchTerm) {
+            const data = await window.fetchFormations(searchTerm, 10, 0)
+
+            if (data.results && data.results.length > 0) {
+              for (let i = 0; i < data.results.length; i++) {
+                const f = window.createFormation(data.results[i])
+                if (f.id === id) {
+                  this.update({ selected: f })
+                  return
+                }
+              }
+              this.update({ selected: window.createFormation(data.results[0]) })
+            }
+          }
+        } catch (error) {
+          console.error('Erreur chargement formation:', error)
+        }
+      },
+
+      // ===== NAVIGATION =====
+      showDetail(index) {
+        const formation = this.state.results[index]
+        this.update({ selected: formation })
+        window.location.hash = '#/formation/' + encodeURIComponent(formation.id)
+      },
+
+      backToList() {
+        this.update({ selected: null })
+        window.location.hash = '#/'
+      },
+
+      scrollToComparateur() {
+        var el = this.$('[ref="comparateur"]')
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        }
+      },
+
+      // ===== RECHERCHE AVEC FILTRES =====
+      async launchSearch(query, filters) {
         this.update({
           loading: true,
           hasSearched: true,
           selected: null,
           query: query,
+          filters: filters || {},
           page: 1
         })
 
+        window.location.hash = '#/'
         await this.loadPage(1)
       },
 
       async loadPage(page) {
-        this.update({
-          loading: true
-        })
+        this.update({ loading: true })
 
         try {
           const offset = (page - 1) * this.state.limit
@@ -179,7 +262,8 @@
           const data = await window.fetchFormations(
             this.state.query,
             this.state.limit,
-            offset
+            offset,
+            this.state.filters
           )
 
           const formations = []
@@ -223,18 +307,7 @@
         }
       },
 
-      showDetail(index) {
-        this.update({
-          selected: this.state.results[index]
-        })
-      },
-
-      backToList() {
-        this.update({
-          selected: null
-        })
-      },
-
+      // ===== SÉLECTION =====
       addToSelection(index) {
         const formation = this.state.results[index]
         const selection = [...this.state.selectedFormations]
@@ -265,32 +338,19 @@
           }
         }
 
-        this.update({
-          selectedFormations: newSelection
-        })
-
+        this.update({ selectedFormations: newSelection })
         localStorage.setItem('selectionFormations', JSON.stringify(newSelection))
       },
 
       clearSelection() {
-        this.update({
-          selectedFormations: []
-        })
-
+        this.update({ selectedFormations: [] })
         localStorage.setItem('selectionFormations', JSON.stringify([]))
       },
 
-      updateNote(e) {
-        this.update({ note: Number(e.target.value) })
-      },
-
-      updateSerie(e) {
-        this.update({ serie: e.target.value })
-      },
-
-      updateSort(e) {
-        this.update({ sortBy: e.target.value })
-      },
+      // ===== COMPARATEUR =====
+      updateNote(e) { this.update({ note: Number(e.target.value) }) },
+      updateSerie(e) { this.update({ serie: e.target.value }) },
+      updateSort(e) { this.update({ sortBy: e.target.value }) },
 
       getSortedSelection() {
         const selection = [...this.state.selectedFormations]
@@ -299,6 +359,8 @@
           selection.sort((a, b) => b.tauxAcces - a.tauxAcces)
         } else if (this.state.sortBy === 'ville') {
           selection.sort((a, b) => a.ville.localeCompare(b.ville))
+        } else if (this.state.sortBy === 'estimation') {
+          selection.sort((a, b) => this.getScore(b) - this.getScore(a))
         } else {
           selection.sort((a, b) => a.nom.localeCompare(b.nom))
         }
@@ -306,30 +368,78 @@
         return selection
       },
 
-      estimateFormation(f) {
+      // ===== ESTIMATION =====
+      getSeriePercent(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
+      },
+
+      getScore(f) {
         let score = 0
+        const note = this.state.note
+        const tauxAcces = f.tauxAcces || 0
+        const seriePct = this.getSeriePercent(f)
 
-        if (f.tauxAcces >= 50) score += 2
-        else if (f.tauxAcces >= 20) score += 1
+        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 (this.state.note >= 15) score += 2
-        else if (this.state.note >= 12) score += 1
+        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 (this.state.serie === 'general' && f.pctGeneral >= 50) score += 2
-        if (this.state.serie === 'techno' && f.pctTechno >= 20) score += 2
-        if (this.state.serie === 'pro' && f.pctPro >= 15) score += 2
+        if (seriePct >= 60) score += 30
+        else if (seriePct >= 40) score += 24
+        else if (seriePct >= 20) score += 16
+        else if (seriePct >= 5) score += 8
+        else score += 0
 
-        if (score >= 5) return 'Favorable'
-        if (score >= 3) return 'Possible'
-        return 'Difficile'
+        return score
+      },
+
+      estimateFormation(f) {
+        const score = this.getScore(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'
       },
 
       getEstimateClass(f) {
         const result = this.estimateFormation(f)
 
+        if (result === 'Très favorable') return 'estimate tres-favorable'
         if (result === 'Favorable') return 'estimate favorable'
         if (result === 'Possible') return 'estimate possible'
-        return 'estimate difficile'
+        if (result === 'Difficile') return 'estimate difficile'
+        return 'estimate tres-difficile'
+      },
+
+      getCardClass(f) {
+        const result = this.estimateFormation(f)
+
+        if (result === 'Très favorable') return 'card card-tres-favorable'
+        if (result === 'Favorable') return 'card card-favorable'
+        if (result === 'Possible') return 'card card-possible'
+        if (result === 'Difficile') return 'card card-difficile'
+        return 'card card-tres-difficile'
+      },
+
+      getEstimateDetail(f) {
+        const tauxAcces = f.tauxAcces || 0
+        const seriePct = this.getSeriePercent(f)
+        const serieName = this.state.serie === 'general' ? 'Gén' : (this.state.serie === 'techno' ? 'Techno' : 'Pro')
+
+        return 'Taux ' + tauxAcces + '% · ' + serieName + ' ' + seriePct + '% · Note ' + this.state.note + '/20'
       }
     }
   </script>
diff --git a/parcoursup/components/map-view.riot b/parcoursup/components/map-view.riot
index 067b92f..f8aea27 100644
--- a/parcoursup/components/map-view.riot
+++ b/parcoursup/components/map-view.riot
@@ -16,12 +16,17 @@
         }).addTo(this.map)
 
         this.markersLayer = L.layerGroup().addTo(this.map)
+        this.markersById = {}
         this.refreshMarkers()
 
-        // important : Leaflet calcule parfois mal la taille au montage
         setTimeout(() => {
           this.map.invalidateSize()
         }, 100)
+
+        // Exposer globalement pour que result-list puisse appeler
+        window.mapFocus = (id) => {
+          this.focusFormation(id)
+        }
       },
 
       onUpdated() {
@@ -39,6 +44,7 @@
           this.map.remove()
           this.map = null
         }
+        window.mapFocus = null
       },
 
       refreshMarkers() {
@@ -47,6 +53,7 @@
         }
 
         this.markersLayer.clearLayers()
+        this.markersById = {}
 
         const points = []
         const results = this.props.results || []
@@ -56,9 +63,10 @@
 
           if (f.latitude != null && f.longitude != null) {
             const marker = L.marker([f.latitude, f.longitude])
-            marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
+            marker.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
             marker.addTo(this.markersLayer)
 
+            this.markersById[f.id] = marker
             points.push([f.latitude, f.longitude])
           }
         }
@@ -68,7 +76,25 @@
         } else {
           this.map.setView([46.8, 2.5], 6)
         }
+      },
+
+      focusFormation(id) {
+        var marker = this.markersById[id]
+
+        if (marker && this.map) {
+          // Scroll vers la carte
+          var mapEl = this.$('div[ref="map"]')
+          if (mapEl) {
+            mapEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+          }
+
+          // Zoom sur le marqueur et ouvrir le popup
+          setTimeout(() => {
+            this.map.setView(marker.getLatLng(), 13, { animate: true })
+            marker.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 8b66167..e84a631 100644
--- a/parcoursup/components/result-list.riot
+++ b/parcoursup/components/result-list.riot
@@ -17,6 +17,17 @@
 
       <button onclick={ () => props.ondetail(i) }>Voir détail</button>
       <button onclick={ () => props.onselect(i) }>Ajouter à la sélection</button>
+      <button onclick={ () => locateOnMap(f) } if={ f.latitude != null }>Localiser</button>
     </div>
   </div>
-</result-list>
\ No newline at end of file
+
+  <script>
+    export default {
+      locateOnMap(f) {
+        if (window.mapFocus) {
+          window.mapFocus(f.id)
+        }
+      }
+    }
+  </script>
+</result-list>
diff --git a/parcoursup/components/search-bar.riot b/parcoursup/components/search-bar.riot
index 01861a4..1511402 100644
--- a/parcoursup/components/search-bar.riot
+++ b/parcoursup/components/search-bar.riot
@@ -2,26 +2,133 @@
   <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.showFilters ? 'Masquer les filtres' : 'Filtres avancés' }
+    </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="BTS Agricole">BTS Agricole</option>
+          <option value="DN MADE">DN MADE</option>
+          <option value="DCG">DCG</option>
+          <option value="Ecole de Commerce">École de Commerce</option>
+          <option value="Ecole d'Ingénieurs">École d'Ingénieurs</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,
+        filiere: '',
+        selectivite: '',
+        region: '',
+        tauxMin: 0,
+        tauxMax: 100
       },
 
       updateQuery(e) {
         this.update({ query: e.target.value })
       },
 
+      handleKey(e) {
+        if (e.key === 'Enter') {
+          this.submitSearch()
+        }
+      },
+
+      toggleFilters() {
+        this.update({ showFilters: !this.state.showFilters })
+      },
+
+      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/style.css b/parcoursup/style.css
index 3f221b4..9f4e3b6 100644
--- a/parcoursup/style.css
+++ b/parcoursup/style.css
@@ -1,644 +1,901 @@
-/* ============================================================
-   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;
-  }
-  
-  /* --- Reset & base --- */
-  *, *::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 — Bandeau Parcoursup
-     =========================================================== */
-  
-  .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;
-  }
-  
-  .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;
-  }
-  
-  /* ===========================================================
-     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
-     =========================================================== */
-  
-  .result-count {
-    font-size: 14px;
-    color: var(--gris-500);
-    margin: 0 0 14px;
-  }
-  
-  /* ===========================================================
-     CARDS — Résultats + comparateur items
-     =========================================================== */
-  
-  .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;
-  }
-  
-  /* ===========================================================
-     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);
-  }
-  
-  /* ===========================================================
-     BADGES ESTIMATION
-     =========================================================== */
-  
-  .estimate {
-    display: inline-block;
-    padding: 3px 12px;
-    border-radius: 4px;
-    font-size: 13px;
-    font-weight: 700;
-  }
-  
-  .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: var(--rouge);
-    border: 1px solid #f5c6cb;
-  }
-  
-  /* ===========================================================
-     LAYOUT
-     =========================================================== */
-  
-  .layout {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-  
-  .results {
-    display: grid;
-    gap: 12px;
-  }
-  
-  /* ===========================================================
-     MESSAGE (loading / no result)
-     =========================================================== */
-  
-  .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 — Fiche formation
-     =========================================================== */
-  
-  .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;
-  }
-  
-  /* --- Tableaux --- */
-  .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 --- */
-  .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-wrapper .data {
-    font-size: 11px;
-    font-weight: 700;
-    color: #fff;
-    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
-  }
-  
-  /* --- Bouton retour --- */
-  .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
-     =========================================================== */
-  
-  @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%;
-    }
-  }
\ 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