diff --git a/scripts/films.js b/scripts/films.js
index f0d931d..f55f0f9 100644
--- a/scripts/films.js
+++ b/scripts/films.js
@@ -4,28 +4,30 @@ const films = document.getElementById("resultats");
 
 const API_URL = "https://swapi.dev/api/films/";         // déclare la localisation de la liste des films
 
-function remplissage(EPISODES){
-            console.log(EPISODES);                             
-    
-        for(index in EPISODES.results){
-            films.innerHTML +=`
+function remplissage(EPISODES) {
+    console.log(EPISODES);
+
+    for (index in EPISODES.results) {
+        films.innerHTML += `
             <section class="resultat accordeon_item">
-            <h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
-            <div class="accordeon_item_body">
-            <p class= "episode">Episode :  ${EPISODES.results[index].episode_id}</p>
-            <p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
-            <p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
-            <p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
-            </div>
+                <h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
+                <div class="accordeon_item_body">
+                    <div class="column1">
+                        <p class= "episode">Episode :  ${EPISODES.results[index].episode_id}</p>
+                        <p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
+                        <p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
+                        <p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
+                    </div>
+                </div>
             </section>`
-        }
-        const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-        accordeonItemHeader.forEach(accordeonItemHeader =>{
-        accordeonItemHeader.addEventListener("click", event => {
-        accordeonItemHeader.classList.toggle("active");    
-})
-        })
     }
+    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+    accordeonItemHeader.forEach(accordeonItemHeader => {
+        accordeonItemHeader.addEventListener("click", event => {
+            accordeonItemHeader.classList.toggle("active");
+        })
+    })
+}
 
 
 api_call(API_URL, remplissage);
\ No newline at end of file
diff --git a/scripts/personnages.js b/scripts/personnages.js
index 150500c..3017508 100644
--- a/scripts/personnages.js
+++ b/scripts/personnages.js
@@ -1,18 +1,18 @@
-import { api_call,API_URL, createPagination } from "./util";
+import { api_call, API_URL, createPagination } from "./util";
 
 const PERSONNAGES = document.getElementById("resultats");
 
 
 class People {
-  constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) {
-    this.birth_year = birth_year;
-    this.eye_colo = eye_colo;
-    this.gender = gender;
-    this.hair_color = hair_color;
-    this.height = height;
-    this.mass = mass;
-    this.skin_color=skin_color;
-  }
+    constructor(birth_year, eye_colo, gender, hair_color, height, mass, skin_color) {
+        this.birth_year = birth_year;
+        this.eye_colo = eye_colo;
+        this.gender = gender;
+        this.hair_color = hair_color;
+        this.height = height;
+        this.mass = mass;
+        this.skin_color = skin_color;
+    }
 }
 
 
@@ -32,64 +32,71 @@ console.log('personnage.js loaded');
 //                     ${error.message}`);
 // });
 
- function remplissage(json){
-   console.log(json.results[0]);
-   
-   // api_call(API_URL+ "/planets/1", (response) => {
-     //     console.log(response);
-     //     NAME.innerText = results[i].name;
-     
-     //  });
-     
-     
-     
-     
-     
-     PERSONNAGES.innerHTML = '';
-     const PERPAGE = json.results.length;
-     const previousUrl = json.previous;
-     const nextUrl = json.next;
-     console.log(previousUrl);
-     console.log(nextUrl);
-     
+function remplissage(json) {
+    console.log(json.results[0]);
+
+    // api_call(API_URL+ "/planets/1", (response) => {
+    //     console.log(response);
+    //     NAME.innerText = results[i].name;
+
+    //  });
+
+
+
+
+
+    PERSONNAGES.innerHTML = '';
+    const PERPAGE = json.results.length;
+    const previousUrl = json.previous;
+    const nextUrl = json.next;
+    console.log(previousUrl);
+    console.log(nextUrl);
+
     for (let i = 0; i < PERPAGE; i++) {
-      const urlbirth_year = json.results[i].birth_year;
-      const urleye_colo=json.results[i].eye_colo;
-      const urlgender=json.results[i].gender;
-      const urlhair_color=json.results[i].hair_color;
-      const urlheight = json.results[i].height;
-      const urlmass=json.results[i].mass;
-      const urlskin_color= json.results[i].skin_color;
-      const urlname= json.results[i].name;
-      const urlhomeworld=json.results[i].homeworld;
-      const urlfilms=json.results[i].films;
-      
-      // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
-      // console.log(gens);
-    //Appel Api pour les planetes :
+        const urlbirth_year = json.results[i].birth_year;
+        const urleye_colo = json.results[i].eye_colo;
+        const urlgender = json.results[i].gender;
+        const urlhair_color = json.results[i].hair_color;
+        const urlheight = json.results[i].height;
+        const urlmass = json.results[i].mass;
+        const urlskin_color = json.results[i].skin_color;
+        const urlname = json.results[i].name;
+        const urlhomeworld = json.results[i].homeworld;
+        const urlfilms = json.results[i].films;
+
+        // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
+        // console.log(gens);
+        //Appel Api pour les planetes :
 
 
-  PERSONNAGES.innerHTML += 
-    `<section class="resultat accordeon_item">
-      <h1 class="accordeon_item_header">${urlname}</h1>
-      <div class="accordeon_item_body">
-          <div class="column1">
-            <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
-            <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
-            <div id=genre>Genre : ${urlgender}</div>
-            <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
-            <div id= poids> Poids du personnage : ${urlmass}  kg</div>
-            <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
-          </div>
-          <div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
-          <div class="column3"> Film où je suis présent : ${urlfilms}</div>
-      </div>
-    </section>`;
-
+        PERSONNAGES.innerHTML +=
+            `<section class="resultat accordeon_item">
+                <h1 class="accordeon_item_header">${urlname}</h1>
+                <div class="accordeon_item_body">
+                    <div class="column1">
+                        <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
+                        <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
+                        <div id=genre>Genre : ${urlgender}</div>
+                        <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
+                        <div id= poids> Poids du personnage : ${urlmass}  kg</div>
+                        <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
+                    </div>
+                    <div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
+                    <div class="column3"> Film où je suis présent : ${urlfilms}</div>
+                </div>
+                </section>`;
 
+    }
     //Pagination
     createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
+
+    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+    accordeonItemHeader.forEach(accordeonItemHeader => {
+        accordeonItemHeader.addEventListener("click", event => {
+            accordeonItemHeader.classList.toggle("active");
+        });
+    });
 }
 
 api_call(API_URL + "/people", remplissage);
-console.log('personnage.js loaded');
+        console.log('personnage.js loaded');
diff --git a/scripts/planets.js b/scripts/planets.js
index 83834ef..7522478 100644
--- a/scripts/planets.js
+++ b/scripts/planets.js
@@ -42,11 +42,11 @@ function remplissage(results) {
     createPagination(previousUrl, nextUrl, planetes, remplissage);
 
     const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-    for (item of accordeonItemHeader) {
-        item.addEventListener("click", (event) => {
-            item.classList.toggle("active");
+    accordeonItemHeader.forEach(accordeonItemHeader => {
+        accordeonItemHeader.addEventListener("click", event => {
+            accordeonItemHeader.classList.toggle("active");
         });
-    }
+    });
 }
 
 api_call(API_URL + "/planets", remplissage);