diff --git a/css/ens.css b/css/ens.css
index 8bdbd70..1d54ef2 100644
--- a/css/ens.css
+++ b/css/ens.css
@@ -64,4 +64,93 @@ tr:hover {
 .centre-horizontal{
     margin: auto;
     justify-content: center;
-}
\ No newline at end of file
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+.card img {
+  max-width: 100%;
+  height: auto;
+  margin-bottom: 10px;
+}
+
+.card iframe {
+  width: 100%;
+  height: 50vw;
+  margin-bottom: 10px;
+
+}
+.card embed{
+  width: 100%;
+  height: 500px;
+  margin-bottom: 10px;
+}
+.card video {
+  width: 100%;
+  height: auto;
+}
+
+.card div {
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+
+.card ul {
+  padding-left: 20px;
+  margin-bottom: 10px;
+}
+
+/* Responsive styles */
+@media only screen and (max-width: 600px) {
+  .card {
+      padding: 15px;
+  }
+
+  .card div {
+      font-size: 14px;
+  }
+}
+
+/* Styles pour les titres importants */
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  margin-top: 10px;
+}
+
+/* Styles pour le texte principal */
+.main-text {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #555;
+}
+
+/* Styles pour les liens */
+.lien {
+  color: #007bff;
+  text-decoration: none;
+  padding: 10px;
+  background-color: rgba(224, 54, 54, 0.482);
+  border-bottom: 2px solid rgba(224, 54, 54, 0.482);
+  border-radius: 5px;
+  margin-bottom: 30px;
+}
+
+.lien:hover {
+  text-decoration: underline;
+}
+
+/* Styles pour les informations secondaires */
+.secondary-text {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #777;
+}
+
diff --git a/css/index.css b/css/index.css
index dffadb8..07ade22 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,20 +1,22 @@
-@media (hover: none) {
+@media (hover: none){
     /* For mobile phones: */
     .floating-action-btn{
-        position: fixed;
-        bottom: 30vh;
-        margin-left:5%;
-        padding: 10px;
-        padding-top: 0px;
-        width: fit-content;
+        width: auto;
         text-align: left;
         border-radius: 5px;
         border-width: 2px;
         font-weight:bolder;
         text-decoration: none;
         color: black;
+        background-color: rgba(224, 54, 54, 0.482);
         border-bottom: 3px solid rgba(224, 54, 54, 0.482);
 
+        margin-top: 50vh;
+
+    }
+
+    .card{
+      width: 85vw;
     }
 
 }
@@ -36,6 +38,10 @@
         border-bottom: 3px solid rgba(224, 54, 54, 0.482);
 
     }
+
+    .card {
+      width: 70vw;
+    }
 }
 
 .gros-titre{
@@ -52,6 +58,7 @@
 .centre-horizontal{
     margin: auto;
     justify-content: center;
+    display: flex;
 }
 
 .centre-txt{
@@ -118,4 +125,70 @@
 
 .champ:focus{
     outline: none;
+}
+
+.card {
+    background-color: #f6f3f3;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    padding: 20px;
+}
+  
+.card img {
+  width: 100%;
+  height: auto;
+  margin-bottom: 10px;
+  border-radius: 7px;
+}
+.card embed{
+  width: 100%;
+  height: 50vw;
+  margin-bottom: 10px;
+}
+
+.card iframe {
+  width: 100%;
+  height: 50vw; /* Ajuster la hauteur selon vos besoins */
+}
+
+.card video {
+  width: 100%;
+  height: auto;
+}
+
+.card div {
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+
+.card ul {
+  padding-left: 20px;
+  margin-bottom: 10px;
+}
+
+
+
+
+/* Styles pour les liens */
+.lien {
+  color: #007bff;
+  text-decoration: none;
+  padding: 10px;
+  background-color: rgba(224, 54, 54, 0.482);
+  border-bottom: 2px solid rgba(224, 54, 54, 0.482);
+  border-radius: 5px;
+  margin-bottom: 30px;
+  margin-left: 2vw;
+  margin-top: 2vh;
+}
+
+.lien:hover {
+  text-decoration: underline;
+}
+
+/* Styles pour les informations secondaires */
+.secondary-text {
+  font-size: 14px;
+  color: #777;
 }
\ No newline at end of file
diff --git a/index.php b/index.php
index 6f1815f..8b0c189 100644
--- a/index.php
+++ b/index.php
@@ -35,22 +35,27 @@
     <div class="barre-recherche centre-horizontal">
         <form id="recherche_form">
             <input  class="champ" type="text" id="recherche_input" placeholder="Rechercher une fiche, annale ...">
+            <input hidden type="submit">
             <input hidden class="champ" type="text" id="themes_input" placeholder="themes (appuyez sur la touche entrée entre chaque thèmes)">
             <input  hidden class="champ" type="number" id="duree_input" placeholder="durée en minutes">
         </form>
     </div>
 
     <a href="televerser.php" class="color-red-tr floating-action-btn">
-        
-<pre>    _   
-  _| |_ 
- |_   _| Téléverser des documents
-   |_|   
+<pre>
+============================================
+|    _                                     |
+|  _| |_                                   |
+| |_   _| Téléverser des documents         |
+|   |_|                                    |
+============================================
 </pre></a>
 
 
-    <div id="liste_resultats" class="centre-txt">
-    </div>
+    <div class="centre-horizontal etaler">
+        <div id="liste_resultats" class="centre-txt">
+        </div>
+    <div>
 
 </body>
 <?php
diff --git a/js/ens.js b/js/ens.js
index d15cf6c..8980341 100644
--- a/js/ens.js
+++ b/js/ens.js
@@ -1,14 +1,3 @@
-/*
-
-    pour les docs afficher un truc du même acabit que la php :
-        if (strtolower($extension) === 'pdf'):
-        echo "<embed src=\"{$doc['upload_path']}\" type=\"application/pdf\" width=\"100%\" height=\"600px\" />";
-    elseif (in_array(strtolower($extension), ['jpg', 'jpeg', 'png', 'gif'])):
-        echo "<img src=\"{$doc['upload_path']}\">";
-    else:
-        echo "<p>Oups ! Je ne sais pas afficher ce document :/ (Rales autant que tu veux je men fous) </p>".$doc['upload_path'];
-    endif;
-    */
 
 // fetch l'api et afficher tout ce qu'elle nous rend
 function querystring(key) {
@@ -20,7 +9,7 @@ function querystring(key) {
 }
 
 
-async function gen_contenu() {
+/*async function gen_contenu() {
     try {
       const response = await fetch('api.php/decomposer_ensemble?ensemble_id='+querystring("ensemble_id"));
       const data = await response.json();
@@ -172,9 +161,145 @@ async function gen_contenu() {
     } catch (error) {
       console.error(error);
     }
+}*/
+
+async function gen_contenu() {
+  try {
+      const response = await fetch('api.php/decomposer_ensemble?ensemble_id=' + querystring("ensemble_id"));
+      const data = await response.json();
+      console.log(data);
+
+      const image_extensions = [
+          'jpg', 
+          'jpeg',
+          'png',
+          'gif',
+          'bmp',
+          'tiff', 
+          'tif',
+          'webp',
+          'svg',
+          'ico',
+          'raw'
+      ];
+
+      const dataContainer = document.getElementById('data-container');
+
+      if (data.status === "1" && data.msg.documents.length > 0) {
+          data.msg.documents.forEach(doc => {
+              // Création d'une carte (card)
+              const card = document.createElement('div');
+              card.classList.add('card');
+
+              // Construction du contenu de la carte
+              const idDiv = document.createElement('div');
+              idDiv.textContent = `ID: ${doc.id}`;
+              card.appendChild(idDiv);
+
+              const titreDiv = document.createElement('div');
+              titreDiv.classList.add('title');
+              titreDiv.textContent = `Titre: ${doc.titre}`;
+              card.appendChild(titreDiv);
+
+              const typeDiv = document.createElement('div');
+              typeDiv.textContent = `Type: ${doc.type}`;
+              card.appendChild(typeDiv);
+
+              const uploadPathDiv = document.createElement('div');
+              uploadPathDiv.textContent = `Upload Path: ${doc.upload_path}`;
+              card.appendChild(uploadPathDiv);
+
+              // Ajout du contenu spécifique selon le type de fichier
+              let ext = doc.upload_path.toString().split(".").pop();
+              switch (true) {
+                  case image_extensions.includes(ext): // image
+                      const img = document.createElement('img');
+                      img.src = doc.upload_path;
+                      img.alt = doc.titre;
+                      card.appendChild(img);
+
+                      const imageLink = document.createElement('a');
+                      imageLink.href = doc.upload_path;
+                      imageLink.classList.add('lien');
+                      imageLink.textContent = 'Voir image';
+                      imageLink.target = '_blank';
+                      card.appendChild(imageLink);
+                      break;
+                  case ext == "pdf": // pdf
+                      const embed = document.createElement('embed');
+                      embed.src = doc.upload_path;
+                      card.appendChild(embed);
+
+                      const pdfLink = document.createElement('a');
+                      pdfLink.href = doc.upload_path;
+                      pdfLink.classList.add('lien');
+                      pdfLink.textContent = 'Voir PDF en grand';
+                      pdfLink.target = '_blank';
+                      card.appendChild(pdfLink);
+                      break;
+                  case ext == "mp4": // video
+                      const video = document.createElement('video');
+                      video.src = doc.upload_path;
+                      video.controls = true;
+                      card.appendChild(video);
+                      break;
+                  case ext == "html":
+                      const iframe = document.createElement('iframe');
+                      iframe.src = doc.upload_path;
+                      card.appendChild(iframe);
+                      break;
+                  default:
+                      const unsupportedLink = document.createElement('a');
+                      unsupportedLink.href = doc.upload_path;
+                      unsupportedLink.classList.add('lien');
+                      unsupportedLink.textContent = 'Type de fichier non supporté.';
+                      unsupportedLink.target = '_blank';
+                      card.appendChild(unsupportedLink);
+                      break;
+              }
+
+              // Ajout du contenu restant de la carte
+              const commentaireDiv = document.createElement('div');
+              commentaireDiv.classList.add('title');
+              commentaireDiv.textContent = `Commentaire Auteur: ${data.msg.commentaire_auteur || ''}`;
+              card.appendChild(commentaireDiv);
+
+              // Exercices
+              if (doc.exercices && doc.exercices.length > 0) {
+                  const exercicesTitle = document.createElement('div');
+                  exercicesTitle.classList.add('title');
+                  exercicesTitle.textContent = 'Exercices:';
+                  card.appendChild(exercicesTitle);
+
+                  const exercicesList = document.createElement('ul');
+                  doc.exercices.forEach(exercice => {
+                      const exerciceItem = document.createElement('li');
+                      exerciceItem.classList.add('main-text');
+                      exerciceItem.textContent = `Exo n°${exercice.id} ${exercice.commentaire_auteur}, Durée: ${exercice.duree} min`;
+                      exercicesList.appendChild(exerciceItem);
+                  });
+                  card.appendChild(exercicesList);
+              } else {
+                  const noExercicesDiv = document.createElement('div');
+                  noExercicesDiv.textContent = 'Pas de détails sur les exercices';
+                  card.appendChild(noExercicesDiv);
+              }
+
+              // Ajout de la carte au conteneur principal
+              dataContainer.appendChild(card);
+          });
+      } else {
+          dataContainer.textContent = data.msg;
+      }
+  } catch (error) {
+      console.error(error);
+  }
 }
 
 
+
+
+
 document.addEventListener("DOMContentLoaded", (event)=>{
 
     gen_contenu();
diff --git a/js/index.js b/js/index.js
index 576a4fa..b4b51d4 100644
--- a/js/index.js
+++ b/js/index.js
@@ -56,30 +56,88 @@ async function rechercher(){
         data.resultats.forEach(doc => {
 
 
+            const card = document.createElement('div');
+            card.classList.add('card');                
 
             // on affiche le titre du résultat parce qu'on est pas des sauvages
             let titre_ensemble;
             titre_ensemble = document.createElement("h2");
             titre_ensemble.innerText = doc.titre;
             titre_ensemble.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
-
-            document.getElementById("liste_resultats").appendChild(titre_ensemble);
             
+            card.appendChild(titre_ensemble);
+            
+            // fichiers spéciaux ?
+            let ext = doc.upload_path.toString().split(".").pop();
+            const image_extensions = [
+                'jpg', 
+                'jpeg',
+                'png',
+                'gif',
+                'bmp',
+                'tiff', 
+                'tif',
+                'webp',
+                'svg',
+                'ico',
+                'raw'
+            ];
 
-            // images ou pdf ?
-            let ele;
-            if(doc.upload_path.toString().split(".").pop() == "pdf"){
-                ele = document.createElement("embed");
+            switch (true) {
+                case image_extensions.includes(ext): // image
+                    const img = document.createElement('img');
+                    img.src = doc.upload_path;
+                    img.alt = doc.titre;
+                    card.appendChild(img);
 
+                    const imageLink = document.createElement('a');
+                    imageLink.href = doc.upload_path;
+                    imageLink.classList.add('lien');
+                    imageLink.textContent = 'Voir image';
+                    imageLink.target = '_blank';
+                    card.appendChild(imageLink);
+                    break;
+                case ext == "pdf": // pdf
+                    const embed = document.createElement('embed');
+                    embed.src = doc.upload_path;
+                    card.appendChild(embed);
 
-            }else{
-                ele = document.createElement("img");
+                    const pdfLink = document.createElement('a');
+                    pdfLink.href = doc.upload_path;
+                    pdfLink.classList.add('lien');
+                    pdfLink.textContent = 'Voir PDF en grand';
+                    pdfLink.target = '_blank';
+                    card.appendChild(pdfLink);
+                    break;
+                case ext == "mp4": // video
+                    const video = document.createElement('video');
+                    video.src = doc.upload_path;
+                    video.controls = true;
+                    card.appendChild(video);
+                    break;
+                case ext == "html":
+                    const iframe = document.createElement('iframe');
+                    iframe.src = doc.upload_path;
+                    card.appendChild(iframe);
+                    break;
+                default:
+                    const unsupportedLink = document.createElement('a');
+                    unsupportedLink.href = doc.upload_path;
+                    unsupportedLink.classList.add('lien');
+                    unsupportedLink.textContent = 'Type de fichier non supporté.';
+                    unsupportedLink.target = '_blank';
+                    card.appendChild(unsupportedLink);
+                    break;
             }
 
-            ele.src = doc.upload_path;
-            ele.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
-            document.getElementById("liste_resultats").appendChild(ele);
             
+            const ele = document.createElement("a");
+            ele.innerText = "Voir ce que c'est";
+            ele.href = `ens.php?ensemble_id=${doc.ensemble_id}`;
+            ele.classList.add("lien")
+            card.appendChild(ele)
+
+            document.getElementById("liste_resultats").appendChild(card);
 
 
 
@@ -111,34 +169,89 @@ async function gen_chronologie(){
         data.resultats.forEach(ens => {
 
             ens.documents.forEach(doc=>{
+
+                const card = document.createElement('div');
+                card.classList.add('card');                
+
                 // on affiche le titre du résultat parce qu'on est pas des sauvages
                 let titre_ensemble;
                 titre_ensemble = document.createElement("h2");
                 titre_ensemble.innerText = doc.titre;
                 titre_ensemble.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
-                document.getElementById("liste_resultats").appendChild(titre_ensemble);
+                
+                card.appendChild(titre_ensemble);
                 
                 // fichiers spéciaux ?
-                let apercu;
                 let ext = doc.upload_path.toString().split(".").pop();
-                switch(ext){
-                    case "pdf":
-                        ele = document.createElement("embed");
+                const image_extensions = [
+                    'jpg', 
+                    'jpeg',
+                    'png',
+                    'gif',
+                    'bmp',
+                    'tiff', 
+                    'tif',
+                    'webp',
+                    'svg',
+                    'ico',
+                    'raw'
+                ];
+
+                switch (true) {
+                    case image_extensions.includes(ext): // image
+                        const img = document.createElement('img');
+                        img.src = doc.upload_path;
+                        img.alt = doc.titre;
+                        card.appendChild(img);
+  
+                        const imageLink = document.createElement('a');
+                        imageLink.href = doc.upload_path;
+                        imageLink.classList.add('lien');
+                        imageLink.textContent = 'Voir image';
+                        imageLink.target = '_blank';
+                        card.appendChild(imageLink);
                         break;
-                    case "html":
-                        ele = document.createElement("iframe");
-                        ele.setAttribute("sandbox","allow-forms allow-modals allow-scripts");
+                    case ext == "pdf": // pdf
+                        const embed = document.createElement('embed');
+                        embed.src = doc.upload_path;
+                        card.appendChild(embed);
+  
+                        const pdfLink = document.createElement('a');
+                        pdfLink.href = doc.upload_path;
+                        pdfLink.classList.add('lien');
+                        pdfLink.textContent = 'Voir PDF en grand';
+                        pdfLink.target = '_blank';
+                        card.appendChild(pdfLink);
+                        break;
+                    case ext == "mp4": // video
+                        const video = document.createElement('video');
+                        video.src = doc.upload_path;
+                        video.controls = true;
+                        card.appendChild(video);
+                        break;
+                    case ext == "html":
+                        const iframe = document.createElement('iframe');
+                        iframe.src = doc.upload_path;
+                        card.appendChild(iframe);
                         break;
                     default:
-                        ele = document.createElement("img");
+                        const unsupportedLink = document.createElement('a');
+                        unsupportedLink.href = doc.upload_path;
+                        unsupportedLink.classList.add('lien');
+                        unsupportedLink.textContent = 'Type de fichier non supporté.';
+                        unsupportedLink.target = '_blank';
+                        card.appendChild(unsupportedLink);
                         break;
-
-
                 }
 
-                ele.src = doc.upload_path;
-                ele.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
-                document.getElementById("liste_resultats").appendChild(ele);
+                
+                const ele = document.createElement("a");
+                ele.innerText = "Voir ce que c'est";
+                ele.href = `ens.php?ensemble_id=${doc.ensemble_id}`;
+                ele.classList.add("lien")
+                card.appendChild(ele)
+
+                document.getElementById("liste_resultats").appendChild(card);
 
             });
 
@@ -158,6 +271,14 @@ document.addEventListener("DOMContentLoaded", (event)=>{
             rechercher();
         }
     }
+
+    document.getElementById("recherche_form").onsubmit = function(event){
+        event.preventDefault();
+        // faire tomber le clavier sur mobile
+        document.activeElement.blur();
+        rechercher();
+    }
+
     document.getElementById("themes_input").onkeydown =function(event) {
         if (event.key === "Enter"){
             var theme = document.createElement("div");