diff --git a/parcoursup/app.riot b/parcoursup/app.riot
index 72fcb55..13c51dc 100644
--- a/parcoursup/app.riot
+++ b/parcoursup/app.riot
@@ -3,43 +3,21 @@
   <p>Recherche de formations Parcoursup avec Riot</p>
 
   <div if={ !state.selected }>
-    <input
-      type="text"
-      placeholder="Ex : BUT informatique"
-      oninput={ updateQuery }
-      value={ state.query }
-    />
-    <button onclick={ search }>Rechercher</button>
+    <search-bar onsearch={ launchSearch }></search-bar>
 
-    <p if={ state.loading }>Chargement...</p>
-    <p if={ !state.loading && state.results.length === 0 && state.hasSearched }>
-      Aucun résultat trouvé
-    </p>
-
-    <div each={ f, i in state.results } key={ f.id }
-         style="border:1px solid #ccc; padding:10px; margin:10px;">
-      <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={ () => showDetail(i) }>Voir détail</button>
-    </div>
+    <result-list
+      results={ state.results }
+      hasSearched={ state.hasSearched }
+      loading={ state.loading }
+      ondetail={ showDetail }>
+    </result-list>
   </div>
 
   <div if={ state.selected }>
-    <h2>{ state.selected.nom }</h2>
-    <p><b>Établissement :</b> { state.selected.etablissement }</p>
-    <p><b>Ville :</b> { state.selected.ville }</p>
-    <p><b>Département :</b> { state.selected.departement }</p>
-    <p><b>Filière :</b> { state.selected.filiere }</p>
-    <p><b>Sélectivité :</b> { state.selected.selectivite }</p>
-    <p><b>Capacité :</b> { state.selected.capacite }</p>
-    <p><b>Candidats :</b> { state.selected.candidats }</p>
-    <p><b>Admis :</b> { state.selected.admis }</p>
-    <p><b>Taux d'accès :</b> { state.selected.tauxAcces }%</p>
-
-    <button onclick={ backToList }>Retour</button>
+    <detail-view
+      formation={ state.selected }
+      onback={ backToList }>
+    </detail-view>
   </div>
 
   <script>
@@ -48,18 +26,13 @@
 
     export default {
       state: {
-        query: '',
         loading: false,
         hasSearched: false,
         results: [],
         selected: null
       },
 
-      updateQuery(e) {
-        this.update({ query: e.target.value })
-      },
-
-      async search() {
+      async launchSearch(query) {
         this.update({
           loading: true,
           hasSearched: true,
@@ -67,12 +40,14 @@
         })
 
         try {
-          const data = await fetchFormations(this.state.query)
+          const data = await fetchFormations(query)
           const formations = []
 
           if (data.results) {
             for (let i = 0; i < data.results.length; i++) {
-              formations.push(createFormation(data.results[i]))
+              const raw = data.results[i]
+              const formation = createFormation(raw)
+              formations.push(formation)
             }
           }
 
diff --git a/parcoursup/components/detail-view.riot b/parcoursup/components/detail-view.riot
index fa62d88..5dee019 100644
--- a/parcoursup/components/detail-view.riot
+++ b/parcoursup/components/detail-view.riot
@@ -1,428 +1,17 @@
 <detail-view>
-  <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 if={ props.formation }
+       style="border:1px solid #ccc; padding:10px; margin:10px;">
+    <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>
 
-    <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>
+    <button onclick={ () => props.onback() }>Retour</button>
   </div>
-
-  <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>
+</detail-view>
\ No newline at end of file
diff --git a/parcoursup/components/result-list.riot b/parcoursup/components/result-list.riot
index 28d25cb..edc6ea5 100644
--- a/parcoursup/components/result-list.riot
+++ b/parcoursup/components/result-list.riot
@@ -1,49 +1,22 @@
 <result-list>
-  <div class="results">
-
-    <div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
+  <div>
+    <div if={ props.results.length === 0 && props.hasSearched && !props.loading }>
       Aucun résultat trouvé
     </div>
 
-    <div class="message" if={ props.loading }>
+    <div if={ props.loading }>
       Chargement...
     </div>
 
-    <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 each={ f, i in props.results }
+         key={ f.id }
+         style="border:1px solid #ccc; padding:10px; margin:10px;">
+      <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>
-
   </div>
-
-  <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>
+</result-list>
\ No newline at end of file
diff --git a/parcoursup/components/search-bar.riot b/parcoursup/components/search-bar.riot
index ebc5337..1a625e7 100644
--- a/parcoursup/components/search-bar.riot
+++ b/parcoursup/components/search-bar.riot
@@ -1,147 +1,27 @@
 <search-bar>
-  <div class="search-bar">
+  <div>
     <input
       type="text"
-      placeholder="Ex : BUT informatique, Licence droit..."
+      placeholder="Ex : BUT informatique"
       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: '',
-        showFilters: false,
-        labelFiltres: 'Filtres avancés',
-        filiere: '',
-        selectivite: '',
-        region: '',
-        tauxMin: 0,
-        tauxMax: 100
+        query: ''
       },
 
       updateQuery(e) {
-        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) });
+        this.update({ query: e.target.value })
       },
 
       submitSearch() {
-        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);
+        this.props.onsearch(this.state.query)
       }
-    };
+    }
   </script>
-</search-bar>
+</search-bar>
\ No newline at end of file