diff --git a/proj/map/.index.html.swp b/proj/map/.index.html.swp
index 0169fe7..a0339d0 100644
Binary files a/proj/map/.index.html.swp and b/proj/map/.index.html.swp differ
diff --git a/proj/map/asset/css/style.css b/proj/map/asset/css/style.css
index a4fea74..37cd5ec 100644
--- a/proj/map/asset/css/style.css
+++ b/proj/map/asset/css/style.css
@@ -104,6 +104,34 @@ section.listchild {
   padding-right: 10px;
 }
 
+main section.void {
+  height: 100vh;
+}
 
+section.lastlistitem {
+  width: 100vw;
+  margin-bottom: 10px;
+}
 
+section.lastlistitem aside {
+  float: left;
+  width: 50%;
+}
 
+section.lastlistitem aside h3 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+section.lastlistitem img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  margin-left: -10px;
+}
+
+section.lastlistitem:after {
+  content: "";
+  display: table;
+  clear: both;
+}
diff --git a/proj/map/asset/img/salsamentiera.jpg b/proj/map/asset/img/salsamentiera.jpg
new file mode 100644
index 0000000..e861778
Binary files /dev/null and b/proj/map/asset/img/salsamentiera.jpg differ
diff --git a/proj/map/asset/img/santelmo.jpg b/proj/map/asset/img/santelmo.jpg
new file mode 100644
index 0000000..4198727
Binary files /dev/null and b/proj/map/asset/img/santelmo.jpg differ
diff --git a/proj/map/asset/js/.main.js.swp b/proj/map/asset/js/.main.js.swp
index be2c477..65de483 100644
Binary files a/proj/map/asset/js/.main.js.swp and b/proj/map/asset/js/.main.js.swp differ
diff --git a/proj/map/asset/js/main.js b/proj/map/asset/js/main.js
index fa54ccd..0f42c0b 100644
--- a/proj/map/asset/js/main.js
+++ b/proj/map/asset/js/main.js
@@ -1,6 +1,8 @@
 Vue.component('Accordeon', {
   template : `
   <section v-bind:id="this.list.id">
+  <nav v-if="this.list.type === 'list'">
+
     <a v-bind:href="this.href">
       <span
       v-on:click="toggleActive()"
@@ -15,7 +17,19 @@ Vue.component('Accordeon', {
       </span>
     </a>
     <section class="listchild" :class="{ active: isActive }">
-      <h3 v-for="i in this.list.sub"> {{ i.nameFR }} </h3>
+      <Accordeon v-for="i in this.list.sub" v-bind:list="i"></Accordeon>
+    </section>
+  </nav>
+    <section v-if="this.list.type === 'item'" class="lastlistitem">
+      <aside>
+        <img v-bind:src="this.list.img"></img>
+      </aside>
+      <aside>
+        <h3>{{ this.list.name }}</h3>
+        <p class="b9h-lang-fr">{{ this.list.txtFR }}</p>
+        <p class="b9h-lang-en">{{ this.list.txtEN }}</p>
+        <p class="b9h-lang-it">{{ this.list.txtIT }}</p>
+      </aside>
     </section>
   </section>
   `,
@@ -34,9 +48,16 @@ Vue.component('Accordeon', {
   },
   methods : {
     donothing () {
+
     },
     toggleActive () {
       this.isActive = !this.isActive
+      document.getElementById(this.list.id).scrollIntoView(
+        {
+          behavior: "smooth",
+          block: "end",
+          inline: "nearest"}
+      );
     }
   }
 })
@@ -44,11 +65,13 @@ Vue.component('Accordeon', {
 
 const jsonurl = "https://ed.brz9.dev/proj/map/asset/json/db.json"
 
+/*
 let jdnb
 
 fetch(jsonurl)
   .then(res => res.json())
   .then(data => jdnb = data)
+*/
 
 let vm = new Vue({
   el: '#root',
@@ -56,32 +79,58 @@ let vm = new Vue({
     currentLang: 'fr',
     db : {},
     dburl : "https://ed.brz9.dev/proj/map/asset/json/db.json",
-    db2 : {
+    db : {
       restaurants : {
         id : "resto",
+        type : "list",
         nameFR : "Restaurant",
         nameEN : "Restaurant",
         nameIT : "Ristoranti",
         sub : {
           italiens : {
             id: "restoital",
+            type : "list",
             nameFR : "Italien",
             nameEN : "Italian",
             nameIT : "Italiano",
-            SanTelmo : {
-              name: "San Telmo"
+            sub : {
+              SanTelmo : {
+                id: "santelmo",
+                type : "item",
+                name: "San Telmo",
+                img: "/home/ed/code/web/html-css/ed.brz9.dev/proj/map/asset/img/santelmo.jpg",
+                txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+                txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+                txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+              },
+              Salsamenteria : {
+                id: "salsamenteria",
+                type : "item",
+                name: "Salsamenteria di Parma",
+                img: "/home/ed/code/web/html-css/ed.brz9.dev/proj/map/asset/img/salsamentiera.jpg",
+                txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+                txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+                txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+              },
             },
-            Salsamenteria : {
-              name: "Salsamenteria di Parma"
-            }
           },
           vege : {
             id : "restovege",
+            type : "list",
             nameFR : "Végétarien",
             nameEN : "Vegan",
             nameIT : "Vegetariano",
-            SanTelmo : {
-              name: "San Telmo"
+            sub : {
+              SanTelmo : {
+                id: "santelmo",
+                type : "item",
+                name: "San Telmo",
+              },
+              Salsamenteria : {
+                id: "salsamenteria",
+                type : "item",
+                name: "Salsamenteria di Parma",
+              },
             }
           }
         }
@@ -123,9 +172,9 @@ let vm = new Vue({
     },
   },
   created: function(){
-    cosole.log("about to call getJDB")
-    this.getJDB();
-    cosole.log("after getJDB call")
+    console.log("about to call getJDB")
+//    this.getJDB();
+    console.log("after getJDB call")
   },
   mounted: function() {
     console.log("mounting");
diff --git a/proj/map/asset/json/.db.json.swp b/proj/map/asset/json/.db.json.swp
deleted file mode 100644
index 977a869..0000000
Binary files a/proj/map/asset/json/.db.json.swp and /dev/null differ
diff --git a/proj/map/index.html b/proj/map/index.html
index 969e593..7090f59 100644
--- a/proj/map/index.html
+++ b/proj/map/index.html
@@ -30,6 +30,7 @@
 
   <Accordeon v-bind:list="db.restaurants"></Accordeon>
 
+  <section class="void"></section>
 </div>
 
 </main>
diff --git a/proj/map/notes b/proj/map/notes
index 2307629..b76e9f9 100644
--- a/proj/map/notes
+++ b/proj/map/notes
@@ -1,2 +1,5 @@
-      <Accordeon v-bind:list="this.list.sub"></Accordeon>
 
+
+  <Accordeon v-bind:list="db.restaurants"></Accordeon>
+
+  <Accordeon v-bind:list="this.list.sub"></Accordeon>