diff --git a/index.html b/index.html
index c8523f4..ae77e36 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,9 @@
     <script src="./riot/suiviformation.riot" type="riot"></script>
     <script src="./riot/choixformation.riot" type="riot"></script>
     <script src="./riot/app.riot" type="riot"></script>
+    <script src="./riot/pourcentageForma.riot" type="riot"></script>
     <script src="./riot/statistiqueFormation.riot" type="riot"></script>
+    <script src="./riot/tableuFormation.riot" type="riot"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/7.1.0/riot+compiler.min.js" integrity="sha512-sSGKGR9MvL0bUx3CScaBb56crXwspwDkL/JnB0IrLFQfw3uvSUlITQtsTtDZctshhv5wdwIt+qZeN8zThRF4Dw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <title>S4WEB</title>
 </head>
diff --git a/js/model.js b/js/model.js
deleted file mode 100644
index 2848164..0000000
--- a/js/model.js
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-async function  getFiliere(search){
-        try {
-            let xhr=new XMLHttpRequest();
-            xhr.open("get", `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&sort=tri&facet=fili&timezone=Europe%2FBerlin&q=${search}`);
-            xhr.responseType = "json";
-
-            xhr.onload=() =>{
-                if(xhr.status == 200){
-                    resolbe(xhr.response)
-                }else{
-                    PromiseRejectionEvent(xhr.statusText)
-                }
-            }
-
-            xhr.onerror= () => PromiseRejectionEvent("Erreur Reseau");
-            return xhr.send();
-        } catch (error){}
-        return null;
-    }
diff --git a/riot/app.riot b/riot/app.riot
index 9da30c0..7ed1a47 100644
--- a/riot/app.riot
+++ b/riot/app.riot
@@ -5,7 +5,13 @@
     </div>
     
     <div class="column">
-        <statistiqueFormation statistique={state.statistique} moyenne={state.moyenne} selectivite={state.selectivite} pct_femme={state.pct_femme}> </statistiqueFormation>
+      <div class="box p-5 my-5" if={state.statistique!=''}>
+        <pourcentageForma statistique={state.statistique} moyenne={state.moyenne} selectivite={state.selectivite} capacite={state.capacite}></pourcentageForma>
+        <statistiqueFormation pct_femme={state.pct_femme} repartitionBac={state.pct_Bac} repartitionMention={state.repartitionMention}></statistiqueFormation>
+      </div>
+      <div class="box p-5 my-5" if={state.statistique!=''}>
+        <tableuFormation records={state.statistique.records}></tableuFormation>
+      </div>
     </div>
 </div>
 
@@ -18,7 +24,10 @@
           statistique: '',
           selectivite: '',
           moyenne: '',
-          pct_femme: ''
+          pct_femme: '',
+          pct_Bac: '',
+          capacite: '',
+          repartitionMention: ''
         };
       },
 
@@ -31,7 +40,10 @@
           statistique: '',
           selectivite: '',
           moyenne: '',
-          pct_femme: ''
+          pct_femme: '',
+          pct_Bac: '',
+          capacite: '',
+          repartitionMention: ''
         })
       },
 
@@ -64,7 +76,7 @@
         }, 0);
         
         this.update({
-            selectivite: Math.round(gen/total)-1
+            selectivite: Math.round(gen/total)
         })
       },
 
@@ -144,10 +156,97 @@
         })
       },
 
+      getRepartitionBac(records){
+
+        let general=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_bg){
+            accumulateur +=  (valeurCourante.fields.acc_bg)
+          }
+          return accumulateur;
+        }, 0);
+
+        let pro=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_bp){
+            accumulateur +=  (valeurCourante.fields.acc_bp)
+          }
+          return accumulateur;
+        }, 0);
+
+        let tecno=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_bt){
+            accumulateur +=  (valeurCourante.fields.acc_bt)
+          }
+          return accumulateur;
+        }, 0);
+
+        let total=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_neobac){
+            accumulateur +=  (valeurCourante.fields.acc_neobac)
+          }
+          if(valeurCourante.fields.acc_at){
+            accumulateur +=  (valeurCourante.fields.acc_at)
+          }
+          return accumulateur;
+        }, 0);
+
+        let autre=total - (general+tecno+pro);
+
+        this.update({
+            capacite: Math.round(total/records.length),
+            pct_Bac: new Array(Math.round(general/total*100), Math.round(tecno/total*100), Math.round(pro/total*100), Math.round(autre/total*100))
+        })
+      },
+
+      getRepartitionMention(records){
+
+        let sans=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_sansmention){
+            accumulateur +=  (valeurCourante.fields.acc_sansmention)
+          }
+          return accumulateur;
+        }, 0);
+
+        let assez=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_ab){
+            accumulateur +=  (valeurCourante.fields.acc_ab)
+          }
+          return accumulateur;
+        }, 0);
+
+        let bien=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_b){
+            accumulateur +=  (valeurCourante.fields.acc_b)
+          }
+          return accumulateur;
+        }, 0);
+
+        let tres=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_tb){
+            accumulateur +=  (valeurCourante.fields.acc_tb)
+          }
+          return accumulateur;
+        }, 0);
+
+        let felicitation=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_tbf){
+            accumulateur +=  (valeurCourante.fields.acc_tbf)
+          }
+          return accumulateur;
+        }, 0);
+
+        let total=sans+assez+bien+tres+felicitation;
+
+        this.update({
+            repartitionMention: new Array(Math.round(sans/total*100), Math.round(assez/total*100), Math.round(bien/total*100), Math.round(tres/total*100), Math.round(felicitation/total*100))
+        })
+      },
+
       calcule(){
         this.getSelectivite(this.state.statistique.records)
         this.getMoyenne(this.state.statistique.records)
         this.getPctFemme(this.state.statistique.records)
+        this.getRepartitionBac(this.state.statistique.records)
+        this.getRepartitionMention(this.state.statistique.records)
       },
 
     }
diff --git a/riot/pourcentageForma.riot b/riot/pourcentageForma.riot
new file mode 100644
index 0000000..32dab24
--- /dev/null
+++ b/riot/pourcentageForma.riot
@@ -0,0 +1,38 @@
+<pourcentageForma>
+    <div class="recap box has-background-light has-text-weight-normal">
+        <p>Moyenne des admis : <span class="is-pulled-right" if={props.moyenne}>{props.moyenne}</span></p>
+        <p>Nombre de formations : <span class="is-pulled-right">{props.statistique.nhits}</span></p>
+        <p>Capacité : <span class="is-pulled-right" if={props.capacite}>{props.capacite}</span></p>
+        <div class="is-flex m-0">
+            <p class="column is-5 p-0">Sélectivité :</p>
+            <div class="column p-0">
+                <progress-bar select={props.getSelectivite} if={props.selectivite}>
+                    <div class="columns is-mobile is-vcentered">
+                        <div class="column is-narrow pr-1">
+                            <p class="has-text-right has-text-weight-bold">{props.selectivite}</p>
+                        </div>
+                        <div class="column pl-0">
+                            <progress class="progress is-info" value="{100-props.selectivite}" max="100" if={props.selectivite >= 75}>{props.selectivite}%</progress>
+                            <progress class="progress is-success" value="{100-props.selectivite}" max="100" if={props.selectivite >= 50 && props.selectivite < 75}>{props.selectivite}%</progress>
+                            <progress class="progress is-warning" value="{100-props.selectivite}" max="100" if={props.selectivite > 25 && props.selectivite < 50}>{props.selectivite}%</progress>           
+                            <progress class="progress is-danger" value="{100-props.selectivite}" max="100" if={props.selectivite <= 25}>{props.selectivite}%</progress>
+                        </div>
+                    </div>
+                </progress-bar>
+            </div>
+        </div>
+    </div>
+    <script>
+    export default function todos() {
+    return {
+      onBeforeMount(props, state) {
+        // initial state
+        this.state = {
+        };
+      }
+    }
+    }
+
+    </script>
+    
+</pourcentageForma>
\ No newline at end of file
diff --git a/riot/statistiqueFormation.riot b/riot/statistiqueFormation.riot
index e619e24..c2c9c12 100644
--- a/riot/statistiqueFormation.riot
+++ b/riot/statistiqueFormation.riot
@@ -1,30 +1,4 @@
 <statistiqueFormation>
-<div class="box p-5 my-5" if={props.statistique} onload={load()} unload={reset()}>
-
-    <div class="recap box has-background-light has-text-weight-normal">
-        <p>Moyenne des admis : <span class="is-pulled-right" if={props.moyenne}>{props.moyenne}</span></p>
-        <p>Nombre de formations : <span class="is-pulled-right">{props.statistique.nhits}</span></p>
-        <p>Capacité : <span class="is-pulled-right"></span></p>
-        <div class="is-flex m-0">
-            <p class="column is-5 p-0">Sélectivité :</p>
-            <div class="column p-0">
-                <progress-bar select={props.getSelectivite} if={props.selectivite}>
-                    <div class="columns is-mobile is-vcentered">
-                        <div class="column is-narrow pr-1">
-                            <p class="has-text-right has-text-weight-bold">{props.selectivite}</p>
-                        </div>
-                        <div class="column pl-0">
-                            <progress class="progress is-info" value="{props.selectivite}" max="100" if={props.selectivite <= 25}>{props.selectivite}%</progress>
-                            <progress class="progress is-success" value="{props.selectivite}" max="100" if={props.selectivite > 25 && props.selectivite < 50}>{props.selectivite}%</progress>
-                            <progress class="progress is-warning" value="{props.selectivite}" max="100" if={props.selectivite > 50 && props.selectivite < 75}>{props.selectivite}%</progress>           
-                            <progress class="progress is-danger" value="{props.selectivite}" max="100" if={props.selectivite >= 75}>{props.selectivite}%</progress>
-                        </div>
-                    </div>
-                </progress-bar>
-            </div>
-        </div>
-    </div>
-    
 
     <bar-chart label="Répartition par genre" if={props.pct_femme}>
         <div class="bar-chart block m-5">
@@ -59,24 +33,24 @@
     </bar-chart>
 
 
-    <bar-chart label="Répartition par bac">
+    <bar-chart label="Répartition par bac" if={props.repartitionBac}>
         <div class="bar-chart block m-5">
             <div class="has-text-centered block is-size-5">
                 <h2 class="is-unselectable">Répartition par bac</h2>
             </div>
             <div class="is-size-7">
                 <div class="columns is-mobile is-vcentered">
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#003f5c;">
-                        <p class="has-text-centered m-1 has-text-white is-unselectable">%</p>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[0]}%;background-color:#003f5c;" if={props.repartitionBac[0] >0}>
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionBac[0]}%</p>
                     </div>
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#2f4b7c;">
-                        <p class="has-text-centered m-1 has-text-white is-unselectable">%</p>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[1]}%;background-color:#2f4b7c;" if={props.repartitionBac[1] >0}>
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionBac[1]}%</p>
                     </div>
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#665191;">
-                        <p class="has-text-centered m-1  is-unselectable">%</p>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[2]}%;background-color:#665191;" if={props.repartitionBac[2] >0}>
+                        <p class="has-text-centered m-1  is-unselectable">{props.repartitionBac[2]}%</p>
                     </div>
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#a05195;">
-                        <p class="has-text-centered m-1  is-unselectable">%</p>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[3]}%;background-color:#a05195;" if={props.repartitionBac[3] >0}>
+                        <p class="has-text-centered m-1  is-unselectable">{props.repartitionBac[3]}%</p>
                     </div>
                 </div>
                 <div class="columns is-mobile is-justify-content-center">
@@ -109,24 +83,24 @@
         </div>
     </bar-chart>
 
-    <bar-chart label="Répartition par mention au bac">
+    <bar-chart label="Répartition par mention au bac" if={props.repartitionMention}>
         <div class="bar-chart block m-5">
             <div class="has-text-centered block is-size-5">
                 <h2 class="is-unselectable">Répartition par mention au bac</h2>
             </div>
             <div class="is-size-7">
                 <div class="columns is-mobile is-vcentered">
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:28%;background-color:#003f5c;">
-                        <p class="has-text-centered m-1 has-text-white is-unselectable">28%</p>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[0]}%;background-color:#003f5c;"if={props.repartitionMention[0] > 0}>
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[0]}%</p>
                     </div>
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:45%;background-color:#2f4b7c;">
-                        <p class="has-text-centered m-1 has-text-white is-unselectable">45%</p>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[1]}%;background-color:#2f4b7c;" if={props.repartitionMention[1] > 0}>
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[1]}%</p>
                     </div>
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:24%;background-color:#665191;">
-                        <p class="has-text-centered m-1 has-text-white is-unselectable">24%</p>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[2]}%;background-color:#665191;" if={props.repartitionMention[2] > 0}>
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[2]}%</p>
                     </div>
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:4%;background-color:#a05195;">
-                        <p class="has-text-centered m-1 has-text-white is-unselectable">4%</p>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[3]}%;background-color:#a05195;" if={props.repartitionMention[3] > 0}>
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[3]}%</p>
                     </div>
                 </div>
                 <div class="columns is-mobile is-justify-content-center">
@@ -164,7 +138,6 @@
             </div>
         </div>
     </bar-chart>
-</div>
 
 <script>
 export default function todos() {
@@ -172,16 +145,7 @@ export default function todos() {
       onBeforeMount(props, state) {
         // initial state
         this.state = {
-            pct_femme: ''
         };
-      },
-
-      load(){
-      },
-
-      
-
-      reset(){
       }
       
     }
diff --git a/riot/tableuFormation.riot b/riot/tableuFormation.riot
new file mode 100644
index 0000000..fd7715d
--- /dev/null
+++ b/riot/tableuFormation.riot
@@ -0,0 +1,103 @@
+<tableuFormation>
+<div class="scrollable" style="overflow-x: auto">
+    <my-table>
+        <div class="field is-grouped is-grouped-multiline">
+        </div>
+        <table class="table is-fullwidth is-hoverable tableFixHead">
+            <thead>
+                <tr>
+                    <th class="has-text-link">Nom
+                        <span class="is-clickable">
+                            <span class="icon">
+                                <i class="fas fa-sort"></i>
+                            </span>
+                        </span>
+                    </th>
+                    <th class="has-text-link">Ville
+                        <span class="is-clickable">
+                            <span class="icon">
+                                <i class="fas fa-sort"></i>
+                            </span>
+                        </span>
+                    </th>
+                    <th class="has-text-link">Dpt
+                        <span class="is-clickable">
+                            <span class="icon">
+                                <i class="fas fa-sort"></i>
+                            </span>
+                        </span>
+                    </th>
+                    <th class="has-text-link">Moyenne
+                        <span class="is-clickable">
+                            <span class="icon">
+                                <i class="fas fa-sort"></i>
+                            </span>
+                        </span>
+                    </th>
+                    <th class="has-text-link">Selectivité
+                        <span class="is-clickable">
+                            <span class="icon">
+                                <i class="fas fa-sort"></i>
+                            </span>
+                        </span>
+                    </th>
+                </tr>
+            </thead>
+            <tbody each={item in props.records}>
+                <tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;">
+                    <td>{item.fields.lib_comp_voe_ins}</td><td>{item.fields.ville_etab}</td><td>{item.fields.dep}</td><td>{getMoyenne(item)}</td><td><progress-bar select="{getSelectivite(item)}">
+                    <div class="columns is-mobile is-vcentered">
+                        <div class="column is-narrow pr-1"><p class="has-text-right has-text-weight-bold">{getSelectivite(item)}%</p></div>
+                        <div class="column pl-0">
+                        <progress class="progress is-info" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 75}> {getSelectivite(item)}%</progress>
+                        <progress class="progress is-success" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 50 && getSelectivite(item) < 75}>{getSelectivite(item)}%</progress>
+                        <progress class="progress is-warning" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) > 25 && getSelectivite(item) < 50}>{getSelectivite(item)}%</progress>           
+                        <progress class="progress is-danger" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) <= 25}>{getSelectivite(item)}%</progress>
+                        </div></div></progress-bar></td>
+                </tr>
+            </tbody>
+        </table>
+    </my-table>
+</div>
+<script>
+
+
+export default function todos() {
+    return {
+        onBeforeMount(props, state) {
+        // initial state
+        this.state = {
+        };
+        },
+
+        getMoyenne(item){
+
+            let sans=item.fields.acc_sansmention
+            let assez=item.fields.acc_ab
+            let bien=item.fields.acc_b
+            let tres=item.fields.acc_tb
+            let felicitation=item.fields.acc_tbf
+
+            let total=sans+assez+bien+felicitation;
+
+            sans=sans*10;
+            assez=assez*12
+            bien=bien*14
+            tres=tres*16
+            felicitation=felicitation*18
+
+            console.log(sans+" "+assez+" "+bien+" "+tres+" "+felicitation)
+
+            return Math.round((sans+assez+bien+felicitation)/total*100)/100
+        },
+
+        getSelectivite(item){
+            return item.fields.taux_acces_ens;
+        }
+        
+    }
+
+}
+</script>
+
+</tableuFormation>
\ No newline at end of file