diff --git a/README.md b/README.md
index afdfdc7..7a3beb8 100644
--- a/README.md
+++ b/README.md
@@ -61,18 +61,28 @@ Exemple :
 
 ##### menu
  * prototype 
-     **menu.**`enabled`: "true" (boolean).
+     **menu.**`enabled`: "true" (boolean)(supprimé pour version > 1.0).
+ * prototype 
+     **menu.**`shareenabled`: "true" (boolean). Ce paramètre active le bouton Partage permettant d'accéder à la fenêtre avec toutes les options de partage de la storymap
+ * prototype 
+     **menu.**`creditenabled`: "true" (boolean). Ce paramètre active le bouton Crédits permettant d'accéder à la fenêtre avec les informations complémentaires
+ * prototype 
+     **menu.**`credit`: "Ce paramètre permet de saisir des informations affichées dans la fenêtre modale Crédits. Il est possible de saisir du html pour une personnalisation avancée. Attention, ce paramètre est valable seulement si le menu est actif `enabled:true` "
      
 Exemple :
 ```
   {
-  "enabled":"true"
+  "shareenabled":"true",
+  "creditenabled":"true",
+  "credit" : "Les données proviennent de <a href='https://geobretagne.fr/'>GéoBretagne</a>"
   }
 ```
   
 ##### theme
  * prototype 
      **theme.**`css`: "url vers le fichier css à utliser pour personnaliser la storymap" (str).
+ * prototype 
+     **theme.**`color`: "paramètre permettant de définir le code couleur de la storie (couleur des boutons et de la barre de progression pour le mode carousel. Si non définie, la couleur par défaut est #212529)" (str).
      
 Exemple :
 ```
@@ -106,7 +116,8 @@ Exemple :
   "center": [-227028,6182514]
   }
 ```   
- 
+ * prototype 
+     **map.**`width`: "taille de la carte. (supprimé pour les version >1.0. La taille de la carte est calculée automatiquement selon le paramètre data.template.size)" 
  * prototype 
      **map.**`zoom`: "zoom (1 à 20)" (str)
  * descriptif : zoom utilisé lors de l'initialisation de la carte et du zoom sur les entités géographiques.
@@ -118,7 +129,7 @@ Exemple :
  * prototype 
      **map.**`overview`: "true" (booleen)
      
- * descriptif : Parmet d'afficher ou de masquer la mini carte de localisation.
+ * descriptif : Permet d'afficher ou de masquer la mini carte de localisation.
  
  Exemple :
 ```
@@ -166,15 +177,17 @@ Exemple :
 ```
  
  * prototype 
-     **data.**`template`: {`name`: ""}
-     
- * descriptif : Template utilisé par la storymap au choix entre carousel et list.   
+     **data.**`template`: {`name`: ""}: Template utilisé par la storymap au choix entre carousel et list. 
+
+  * prototype 
+     **data.**`template`: {`size`: ""}: Taille de la fenêtre avec les informations attributaires (exprimée en %). Si non définie, la taille par défaut est 50% en mode carousel et 30% en mode list. En mode mobile, cette valeur n'est pas prise en compte car l'affichage est adapté.  
  
  Exemple :
 ```
-  {
-  "template": "carousel"
-  }
+  "template": {
+      "name": "carousel",
+      "size": "20%"
+    },
 ```
 
  
diff --git a/css/storymap.css b/css/storymap.css
index 5ab221a..80131ad 100644
--- a/css/storymap.css
+++ b/css/storymap.css
@@ -28,10 +28,14 @@ body {
 	z-index: 50;
 }
 
-#menu.no-visible {
+.no-visible {
 	display: none;
 }
 
+img {
+    max-width: 100%;
+}
+
 .ol-zoom {
 	display: none;
 }
@@ -44,7 +48,7 @@ body {
 	position: fixed;
 	z-index: 50;
 	width: 100%;
-	color: #ffffff;
+	background-color: #fffffff5;
 	height: 100%;
 	top: 0px;
 	left: 0px;
@@ -75,3 +79,70 @@ audio {
 	}
 }
 
+/* Share panel */
+.is-hidden {
+	display: none;
+}
+
+.iconShare__list > a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 2em;
+    font-size: small;
+    text-decoration: none;
+    color: currentColor;
+	transition: 0.3s;
+}
+
+.iconShare__list > a:hover {
+    cursor: pointer;
+    opacity: .8;
+}
+
+.iconShare__list {
+    display: flex;
+}
+
+.iconShare__list > a > i {
+    font-size: large;
+    background-color: #212529;
+    color: white;
+    border-radius: 2em;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#block__ShareLink {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-start;
+    border: 1px solid #d1d1d1;
+    padding: 0.5em .5em;
+    border-radius: .7em;
+}
+
+#urlShare__link {
+    border: none;
+    width: 100%;
+}
+
+#blockIframe > div {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: space-between;
+}
+
+#blockIframe > .textEdit {
+    border: 1px solid #d1d1d1;
+    padding: 0.5em .5em;
+    border-radius: .7em;
+    font-family: monospace;
+    font-size: smaller;
+}
diff --git a/index.html b/index.html
index 4f7e34e..e3ce6d0 100755
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>    
     <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <base href="/storymap/"></base>
-    <title>Kartenn story</title>
+    <title>Storymap</title>
     <link rel="stylesheet" href="lib/bootstrap/5.3.3/bootstrap.min.css">
     <link rel="stylesheet" href="lib/bootstrap_icons/1.11.3/bootstrap-icons.min.css">
     <script src="lib/jquery/3.7.1/jquery-3.7.1.min.js"></script>
@@ -24,22 +24,16 @@
         <button role="button" id="btn-zoomplus" href="#" onclick="ks.menuaction('zoomplus');" title="Zoomer" class="btn btn-light">
             <i class="bi bi-plus-lg"></i>
         </button>
-        <button role="button" id="btn-home" href="#" onclick="ks.menuaction('home');" title="Accueil" class="btn btn-light">
-            <i class="bi bi-house-door"></i>
+        <button role="button" id="btn-extent" href="#" onclick="ks.menuaction('extent');" title="Revenir à l'étendue initiale" class="btn btn-light">
+            <i class="bi bi-fullscreen"></i>
         </button>
         <button role="button" id="btn-zoommoins" href="#" onclick="ks.menuaction('zoommoins');" title="Dézoomer" class="btn btn-light">
             <i class="bi bi-dash"></i>
         </button>
     </div>
-    <div id="menu" class="btn-group-vertical no-visible" role="group" aria-label="Vertical button group" >
-        <button role="button" id="btn-extent" href="#" onclick="ks.menuaction('extent');" title="Revenir à l'étendue initiale" class="btn btn-light">
-            <i class="bi bi-fullscreen"></i>
-        </button>
-        <button role="button" id="btn-infos" href="#" onclick="ks.menuaction('infos');" title="Crédits" class="btn btn-light">
-            <i class="bi bi-info-circle"></i>
-        </button>
-        <button role="button" id="btn-share" href="#" onclick="ks.menuaction('share');" title="Partager" class="btn btn-light">
-            <i class="bi bi-share"></i>
+    <div id="menu" class="btn-group-vertical " role="group" aria-label="Vertical button group" >        
+        <button role="button" id="btn-home" href="#" onclick="ks.menuaction('home');" title="Accueil" class="btn btn-light no-visible">
+            <i class="bi bi-house-door"></i>
         </button>
     </div>
     <div  id="content-title" style="display: none;">
@@ -49,8 +43,8 @@ <h3></h3>
     <div id="feature-info" class="" data-bs-toggle="tooltip" title=""></div>    
     <div id="template" ></div>     
     <div  id="splash" style="display: none;"> 
-        <div class="story-btn story-btn-next" style="opacity: 1;">
-            <a class="btn btn-default" onclick="$('#splash').fadeOut();$('#content-title').show();">> </a>
+        <div class="story-btn story-btn-next container px-5" style="opacity: 1;">
+            <a class="btn btn-dark" onclick="$('#splash').fadeOut();$('#content-title').show();">Accéder</a>
         </div>
     </div>
     <!-- Modal -->
@@ -107,11 +101,29 @@ <h5 class="modal-title"></h5>
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">                    
-                    <h5 class="modal-title">Partager</h5>
+                    <h5 class="modal-title">Partager cette storymap</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body" >
-                    <div class="row">                        
+                <div class="modal-body">
+                    <div class="iconShare__list mb-3">
+                        <a id="btnShareEmail"><i class="bi bi-envelope"></i><span>E-mail</span></a>
+                        <a onclick="document.querySelector('#blockIframe').classList.toggle('is-hidden');"><i class="bi bi-code"></i><span>Intégrer</span></a>
+                        <a id="btnShareWhatapp" target="_blank"><i class="bi bi-whatsapp"></i><span>WhatsApp</span></a>
+                        <a id="btnShareFacebook" target="_blank"><i class="bi bi-facebook"></i><span>Facebook</span></a>
+                        <a id="btnShareX" target="_blank"><i class="bi bi-twitter-x"></i><span>X</span></a>
+                    </div>
+                    <div id="blockIframe" class="is-hidden">
+                        <div class="mb-2">
+                            <h6>Code d'intégration en iframe</h6>
+                            <button class="btn btn-dark btn-sm" onclick="navigator.clipboard.writeText(document.getElementById('block__IframeUrl').textContent);">Copier</button>
+                        </div>
+                        <div class="textEdit" id="block__IframeUrl" contentEditable></div>                        
+                    </div>
+                    <hr>
+                    <h6>Lien de partage</h6>
+                    <div id="block__ShareLink">
+                        <input id="urlShare__link" type="text" value=""></span>
+                        <button type="button" class="btn btn-dark btn-sm" onclick="navigator.clipboard.writeText(document.getElementById('urlShare__link').value)">Copier</button>
                     </div>
                 </div>
             </div>
@@ -125,9 +137,9 @@ <h5 class="modal-title">Partager</h5>
                     <h5 class="modal-title">Crédits</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body" >
-                    <div class="row">
-                    </div>
+                <div class="modal-body">
+                    <div id="panelInfos_content" class="mb-2"></div>
+                    <p>Cette application a été réalisée à l'aide de la solution libre <a href="https://github.com/mviewer/storymap" target="_blank">storymap</a>.</p>
                 </div>
             </div>
         </div>
diff --git a/js/storymap.js b/js/storymap.js
index e051dca..b21b3a6 100755
--- a/js/storymap.js
+++ b/js/storymap.js
@@ -108,23 +108,45 @@ ks = (function() {
 
     var _init = function(options) {
         _options = options;
-        if (options.menu && options.menu.enabled === "true") {            
-            $("#menu").removeClass("no-visible");
-        } else {
-            $("#menu").addClass("no-visible");
+        if (options.menu && options.menu.creditenabled === "true") {     
+            var creditbtn = `<button role="button" id="btn-infos" href="#" onclick="ks.menuaction('infos');" title="Crédits" class="btn btn-light"><i class="bi bi-info-circle"></i></button>`; 
+            $("#menu").append(creditbtn);
+            if (options.menu.credit) { 
+                $("#panelInfos_content").html(options.menu.credit);
+            }
+        } 
+        if (options.menu && options.menu.shareenabled === "true") {     
+            var sharebtn = `<button role="button" id="btn-share" href="#" onclick="ks.menuaction('share');" title="Partager" class="btn btn-light"><i class="bi bi-share"></i></button>`; 
+            $("#menu").append(sharebtn);
         }
+        //Url to panel share
+        const currentUrlApp = window.location.href;
+        $("#urlShare__link").val(currentUrlApp);
+        let urlEmail = `mailto:?&body=` + encodeURIComponent(currentUrlApp);
+        let urlFacebook = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(currentUrlApp);
+		let urlX = "https://twitter.com/intent/post?url=" + encodeURIComponent(currentUrlApp);
+		let urlWhatapp = "https://wa.me/?text=" + encodeURIComponent(currentUrlApp);
+        const btnEmail = document.getElementById('btnShareEmail');
+        const btnFacebook = document.getElementById('btnShareFacebook');
+		const btnX = document.getElementById('btnShareX');
+		const btnWhatapp = document.getElementById('btnShareWhatapp');
+        btnFacebook.setAttribute("href", urlFacebook);
+		btnX.setAttribute("href", urlX);
+		btnWhatapp.setAttribute("href", urlWhatapp);
+        btnEmail.setAttribute("href", urlEmail);
+        let urlIframe = `<iframe width="800" height="500" style="border:none;" src="${currentUrlApp}"></iframe>`;
+        document.getElementById("block__IframeUrl").innerText = urlIframe;
         //splash config
         if (options.splash && !options.splash.iframe) {            
-            $("#splash").prepend('<div class="col-md-4 col-md-offset-4"><h1></h1><p></p>');
-            $("#splash").css('background-color','rgba(12, 12, 12, .9)');
+            $("#splash").prepend('<div class="container p-5"><h1>'+ options.splash.title +'</h1><h5>'+ options.splash.text +'</h5>');
             $("#splash").show();
-            $("#splash h1").text(options.splash.title);
-            $("#splash p").text(options.splash.text);
+            $("#btn-home").toggleClass("no-visible");
         } else if (options.splash && options.splash.iframe) {
             $("#splash .story-btn-next").remove();
             $("#splash").prepend('<iframe src="'+options.splash.iframe+'" style="height:100%;border:none;width:100%;" scrolling="no"></iframe>');
             $("#splash").css('background-color','#ffffff');
             $("#splash").show();
+            $("#btn-home").toggleClass("no-visible");
         } else {
             $("#content-title").show();
         }
@@ -142,14 +164,26 @@ ks = (function() {
         if (options.theme && options.theme.css) {
             var cssfile = [_conf, options.theme.css].join("");
             $('head').append('<link rel="stylesheet" href="'+cssfile+'" type="text/css" />');
-        } else if (options.theme && options.theme.color) {
-            $("#content-title").css("color", options.theme.color);
+        } 
+        //Add style variables
+        var styleNode = document.createElement('style');
+        document.getElementsByTagName('head')[0].appendChild(styleNode);
+        if(options.theme && options.theme.color){
+            var styleColorStorie = document.createTextNode(':root {--colorStorie :'+ options.theme.color +';}');
+            styleNode.appendChild(styleColorStorie);
+        }   
+        // Panel size     
+        if(options.data.template && options.data.template.size){
+            var stylePanelSize = document.createTextNode(':root {--panelStorieSize :'+ options.data.template.size +';}');
+            styleNode.appendChild(stylePanelSize);
         }
         //Map title
         $("#content-title h1").text(options.data.title);
-        $("#content-title h3").text(options.data.subtitle);
-        //Map width
-        $("#map").css("width", options.map.width);
+        $("#content-title h3").text(options.data.subtitle); 
+        if(options.data.title){
+            document.title = options.data.title;
+        }
+
         // templates config
         _template = new templates[options.data.template.name](document, $("#template"));
         // Config map features styles              
@@ -439,7 +473,7 @@ ks = (function() {
             //Todo center with offset
             
         } else {
-            _map.getView().fit(feat.getGeometry(), { size: _map.getSize(), padding: [0, offset, 0, 0], nearest: false, maxZoom: _options.map.zoom});
+            _map.getView().fit(feat.getGeometry(), { size: _map.getSize(), padding: [0, 0, 0, 0], nearest: false, maxZoom: _options.map.zoom});
         }
     };
 
diff --git a/stories/demo_carousel/config.json b/stories/demo_carousel/config.json
index 8a56126..f871766 100644
--- a/stories/demo_carousel/config.json
+++ b/stories/demo_carousel/config.json
@@ -1,12 +1,10 @@
 {
   "splash": {
-    "iframe": "stories/demo_carousel/splash.html"
-  },
-  "menu" : {
-    "enabled":"true"
+    "title":"StoryMap de démo",
+    "text":"Mode carousel"
   },
   "theme": {
-    "css": "demo.css"
+    "color" : "#009688"
   },
   "tooltip": {
     "fields": [
@@ -18,7 +16,7 @@
 		"center": [-227028,6182514],
 		"zoom": 12,
     "width": "100%",
-    "overview": true,
+    "overview": false,
     "url": "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
     "animation": true
   },
@@ -27,7 +25,7 @@
     "subtitle": "Mode carousel",
     "template": {
       "name": "carousel",
-      "options": {}
+      "size": "40%"
     },
     "url": "stories/demo_carousel/rnr.geojson",
     "orderby": "ordre",
@@ -46,10 +44,10 @@
       "styles": [
         {
           "fill": {
-            "color": "rgba(207,220,154,0.7)"
+            "color": "rgba(14,152,139,0.6)"
           },
           "stroke": {
-            "color": "rgba(0,0,0,0.5)",
+            "color": "rgba(14,152,139)",
             "width": 0.5
           },
           "icon": {
@@ -61,14 +59,14 @@
     },
     "hightlightstyle": {
       "fill": {
-        "color": "rgba(110,130,37,0.5)"
+        "color": "rgba(14,152,139,0.8)"
       },
       "icon": {
         "src": "",
         "scale": 0.25
       },
       "stroke": {
-        "color": "rgba(110,130,37,0)",
+        "color": "rgba(14,152,139,0)",
         "width": 6
       }
     }
diff --git a/stories/demo_list/config.json b/stories/demo_list/config.json
index 9643257..b2ff4a1 100644
--- a/stories/demo_list/config.json
+++ b/stories/demo_list/config.json
@@ -3,7 +3,9 @@
     "iframe": "stories/demo_list/splash.html"
   },
   "menu" : {
-    "enabled":"true"
+    "shareenabled":"true",
+    "creditenabled":"true",
+    "credit":"<h5>Sources :</h5>Les données proviennent de <a href='https://geobretagne.fr/'>GéoBretagne</a> <a type='button' class='btn btn-sm btn-outline-dark my-2' href='https://geobretagne.fr/datahub/dataset/77f8fc52-ae57-41d1-8f08-7b121b013f51'>Consulter les métadonnées</a>"
   },
   "theme": {
     "css": "demo.css"
@@ -26,8 +28,7 @@
     "title": "StoryMap de démo",
     "subtitle": "Mode list",
     "template": {
-      "name": "list",
-      "options": {}
+      "name": "list"
     },
     "url": "stories/demo_list/rnr.geojson",
     "orderby": "ordre",
@@ -35,10 +36,21 @@
       {
         "name": "nom",
         "type": "title"
+      },
+      {
+        "name": "description",
+        "type": "texte"
+      },
+      {
+        "name": "image",
+        "type": "image"
+      },
+      {
+        "name": "site_web",
+        "type": "url"
       }
     ],
     "id": "id",
-    "tpl": "stories/demo_list/demo.mst",
     "analyse": {
       "type": "single",
       "field": "",
diff --git a/stories/dinan_leon/config.json b/stories/dinan_leon/config.json
index 3f60793..893f7f9 100644
--- a/stories/dinan_leon/config.json
+++ b/stories/dinan_leon/config.json
@@ -14,7 +14,7 @@
 	"data": {
         "title": "DE DINAN À LÉHON" ,
         "subtitle":"Par le chemin de halage",
-        "template": {"name": "carousel", "options": {"width":"50%", "color":"#7f8c8d"} },
+        "template": {"name": "carousel"},
 		"url": "stories/dinan_leon/dinan_leon.geojson",
         "orderby": "ordre",
 		"fields": [{
diff --git a/stories/dinan_leon/dinan_leon_t3.css b/stories/dinan_leon/dinan_leon_t3.css
index 567f297..27e4520 100644
--- a/stories/dinan_leon/dinan_leon_t3.css
+++ b/stories/dinan_leon/dinan_leon_t3.css
@@ -1,4 +1,4 @@
-/* ---- Intégration des fonts */
+/* ---- Int�gration des fonts */
 
 @font-face {
     font-family: "PT_bold";
@@ -40,9 +40,7 @@
     padding-left: 0px;
     padding-right: 0px;
 }
-.item.background{
-	top:-20px;
-}
+
 .item.background:before{
 	opacity: 0.7;
 }
@@ -143,42 +141,31 @@
 
 /* Titre StoryMap*/
 #content-title h1{
-	color:#ffffff;
 	font-size: 55px!important;
 	text-shadow: 0px 0px 7px rgba(0,0,0,0.9);
 	letter-spacing: 2px;
 	background-color: rgba(0, 0, 0, 1);
-	padding: 0px 10px 0px 10px;
 }
 #content-title h3{
 	color:#000;
 	font-size: 30px!important;
 	text-shadow: 0px 0px 7px rgba(0,0,0,0.75);
-	margin-top: -10px;
-	margin-left: 11px;
 	letter-spacing: 1px;
 }
 
 /* Panel-Story*/
 #panel-story .etape{
-	margin-left: 30px;
-	color: white;
 	font-family: "PT_bold";
 	font-size:18px;
-	background-color: black;
 }
 #panel-story .resume{
-	margin-left: 30px;
-	color: white;
 	font-family: "roboto_light";
 	font-size: 15px;
 	padding-right: 30px;
 	text-align: justify;
 }
 #panel-story .localisation{
-	padding-left: 20px;
 	margin-top: 15px;
-	color: white;
 	font-family: "PT_bold";
 	font-size:18px;
 	letter-spacing: 0.5px;
@@ -190,8 +177,6 @@
     margin-left: 30px;
 }
 #panel-story .historique{
-	padding-left: 20px;
-	color: white;
 	font-family: "PT_bold";
 	font-size:18px;
 	letter-spacing: 0.5px;
@@ -217,10 +202,6 @@ a:hover{
 	text-decoration: underline;
 }	
 .carousel-inner h2{
-	padding-left: 30px;
-	color: white;
-	margin-left: 0px!important;
-	padding-top: 10%;
 	font-family: 'PT_bold';
 	font-size: 40px;
 }
diff --git a/stories/dinan_leon/splash.html b/stories/dinan_leon/splash.html
index 95dd062..01659a5 100644
--- a/stories/dinan_leon/splash.html
+++ b/stories/dinan_leon/splash.html
@@ -8,6 +8,15 @@
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">
 	<style>
+		.earlybird {
+			width: 100%;
+			height: 100%;
+		}
+
+		#filtre {
+			height: 100%;
+			width: 100%;
+		}
 	body, html {
 			  margin:0px;
 			  position:relative;
diff --git a/stories/ligne7/patrimoine.css b/stories/ligne7/patrimoine.css
index 85126fd..6fbcf2d 100644
--- a/stories/ligne7/patrimoine.css
+++ b/stories/ligne7/patrimoine.css
@@ -1,6 +1,6 @@
 /********************************************** STORY MAP PATRIMOINE | THEME ***************************** /
 
-/* ------------------ Intégration des fonts ------------------ */
+/* ------------------ Int�gration des fonts ------------------ */
 @font-face {
     font-family: "spotka_black";
     src: url('../../css/fonts/region_bretagne/spotkablack.ttf');
@@ -164,7 +164,7 @@
  }
 
 /* ------------------  MAP ------------------  */
-/* Bandeau Région */
+/* Bandeau R�gion */
 #bandeau{
     background-image: url('image/bandeau_region_magenta.svg');    
     background-repeat: no-repeat;    
@@ -256,28 +256,6 @@
     background-color: #BA88A4;
 }
 
-/* button */
-.carButton {
-    background-color: rgba(153, 153, 153, 0);
-    height: 50px;
-}
-.precButton a {
-     background: url(image/precButton_magenta.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.precButton a:hover {
-     background: url(image/precButton_magenta.png) 0 -40px no-repeat!important;
- }
-.nextButton a {
-     background: url(image/nextButton_magenta.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton_magenta.png) 0 -40px no-repeat!important;
- }
-/* ----
 
 /* custom-tooltip */
 .tooltip-custom.tooltip-inner {
@@ -317,7 +295,7 @@
 .item.background:before{
     opacity: 0.7;
 }
-/* Contenu édito*/
+/* Contenu �dito*/
 
 .carousel-inner h2{
     padding-left: 30px;
diff --git a/stories/ligne7/splash.html b/stories/ligne7/splash.html
index d64f13a..6fd1301 100644
--- a/stories/ligne7/splash.html
+++ b/stories/ligne7/splash.html
@@ -5,7 +5,7 @@
     <title>splash</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    
-        <link rel="stylesheet" href="../../lib/bootstrap_3.3.7/css/bootstrap.min.css">
+        <link rel="stylesheet" href="../../lib/bootstrap/5.3.3/bootstrap.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">
   <style>
   @font-face {
@@ -189,8 +189,8 @@
 </head> 
 <body>  
   <div class="container-fluid">          
-    <div class="row" id="intro">        
-      <div class=" col-sm-offset-2 col-sm-8"> 
+    <div class="row justify-content-center" id="intro">        
+      <div class="col-8"> 
           <div class="bandeau">
             <img src="image/bandeau_region_magenta_top.svg">
           </div>
diff --git a/stories/meteo_city/config.json b/stories/meteo_city/config.json
index a16badd..da893d9 100644
--- a/stories/meteo_city/config.json
+++ b/stories/meteo_city/config.json
@@ -1,7 +1,7 @@
 {   "splash": {        
       "iframe": "stories/meteo_city/splash.html"
     },
-    "theme": {"css":"meteo.css"},
+    "theme": {"css":"meteo.css", "color":"#355a60"},
     "tooltip" : {"fields": ["nom_ville"]},
 	"map": {
 		"center": [-154709,6233593],
diff --git a/stories/meteo_city/meteo.css b/stories/meteo_city/meteo.css
index 28cd6d6..6fae49a 100644
--- a/stories/meteo_city/meteo.css
+++ b/stories/meteo_city/meteo.css
@@ -82,19 +82,6 @@
     top: 70%;
     left: 0.5em;
 }
-/* Carousel template */
-.carousel-indicators {
-    background-color: #d8d8d8;
-}
-.carousel-control span:hover {
-    background-color: #8e44ad;
-}
-.carousel-control span {
-    background-color: #9b59b6;
-}
-.carousel-indicators .active {
-    background-color: #8e44ad;
-}
 
 /* bar de progression*/
 .progress {
@@ -110,26 +97,18 @@
 .carButton {
     background-color: rgba(153, 153, 153, 0);
 }
-.precButton{
-    bottom: 4%!important;
-    left: 20%!important;
-}
-.precButton a {
-     background: url(image/precButton.png) 0 0 no-repeat!important;
- }
-.precButton a:hover {
-     background: url(image/precButton.png) 0 -50px no-repeat!important;
- }
-.nextButton{
-    bottom: 4%!important;
-    right: 70%!important;
+@media (min-width: 768px) {
+    .precButton{
+        bottom: 4%!important;
+        left: 20%!important;
+    }
+
+    .nextButton{
+        bottom: 4%!important;
+        right: 70%!important;
+    }
 }
-.nextButton a {
-     background: url(image/nextButton.png) 0 0 no-repeat!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton.png) 0 -50px no-repeat!important;
- }
+
 /* ----
 
 /* custom-tooltip */
@@ -171,7 +150,7 @@
 .item.background:before{
     opacity: 0.7;
 }
-/* Contenu édito*/
+/* Contenu �dito*/
 .carousel-inner{
     overflow-y: auto;
 }
@@ -248,7 +227,7 @@ h4{
     padding:5px;    
 }
 
-/* Agencement température*/
+/* Agencement temp�rature*/
 
 .temp_moy{
     background-color:#dbded5;
@@ -272,7 +251,7 @@ h4{
     margin-left: -18px;
 }
 
-/* Agencement précipitation */
+/* Agencement pr�cipitation */
 .pluie{
     background-color:#53b3a7;
     padding: 5px;
diff --git a/stories/meteo_city/splash.html b/stories/meteo_city/splash.html
index 8558b66..d9fb940 100644
--- a/stories/meteo_city/splash.html
+++ b/stories/meteo_city/splash.html
@@ -6,7 +6,7 @@
 			<meta http-equiv="X-UA-Compatible" content="IE=edge">
 			<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">
-	        <link rel="stylesheet" href="../../lib/bootstrap_3.3.7/css/bootstrap.min.css">
+	        <link rel="stylesheet" href="../../lib/bootstrap/5.3.3/bootstrap.min.css">
 		<style>
 			body, html {
 				margin:0px;
diff --git a/stories/mordelles/patrimoine.css b/stories/mordelles/patrimoine.css
index 2773ea3..53a706b 100644
--- a/stories/mordelles/patrimoine.css
+++ b/stories/mordelles/patrimoine.css
@@ -1,6 +1,6 @@
 /********************************************** STORY MAP PATRIMOINE | THEME ***************************** /
 
-/* ------------------ Intégration des fonts ------------------ */
+/* ------------------ Int�gration des fonts ------------------ */
 @font-face {
     font-family: "spotka_black";
     src: url('../../css/fonts/region_bretagne/spotkablack.ttf');
@@ -73,9 +73,6 @@
     .ks-bg {
         display:none;
      }
-     .nextButton, .precButton {
-        top: 25%;
-     }
      .image{
      	padding: 0!important;
      	margin-left: 0!important;
@@ -164,7 +161,7 @@
  }
 
 /* ------------------  MAP ------------------  */
-/* Bandeau Région */
+/* Bandeau R�gion */
 #bandeau{
     background-image: url('image/bandeau_region_magenta.svg');    
     background-repeat: no-repeat;    
@@ -256,27 +253,6 @@
     background-color: #BA88A4;
 }
 
-/* button */
-.carButton {
-    background-color: rgba(153, 153, 153, 0);
-    height: 50px;
-}
-.precButton a {
-     background: url(image/precButton_magenta.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.precButton a:hover {
-     background: url(image/precButton_magenta.png) 0 -40px no-repeat!important;
- }
-.nextButton a {
-     background: url(image/nextButton_magenta.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton_magenta.png) 0 -40px no-repeat!important;
- }
 /* ----
 
 /* custom-tooltip */
@@ -317,7 +293,7 @@
 .item.background:before{
     opacity: 0.7;
 }
-/* Contenu édito*/
+/* Contenu �dito*/
 
 .carousel-inner h2{
     padding-left: 30px;
diff --git a/stories/mordelles/splash.html b/stories/mordelles/splash.html
index dfaa35d..3fca4e0 100644
--- a/stories/mordelles/splash.html
+++ b/stories/mordelles/splash.html
@@ -5,7 +5,7 @@
     <title>splash</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    
-        <link rel="stylesheet" href="../../lib/bootstrap_3.3.7/css/bootstrap.min.css">
+        <link rel="stylesheet" href="../../lib/bootstrap/5.3.3/bootstrap.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">
   <style>
   @font-face {
@@ -189,8 +189,8 @@
 </head> 
 <body>  
   <div class="container-fluid">          
-    <div class="row" id="intro">        
-      <div class=" col-sm-offset-2 col-sm-8"> 
+    <div class="row justify-content-center" id="intro">        
+      <div class="col-8"> 
           <div class="bandeau">
             <img src="image/bandeau_region_magenta_top.svg">
           </div>
diff --git a/stories/pe_biodiversite/parcours_europeen.css b/stories/pe_biodiversite/parcours_europeen.css
index b0b5ece..7ede4e2 100644
--- a/stories/pe_biodiversite/parcours_europeen.css
+++ b/stories/pe_biodiversite/parcours_europeen.css
@@ -1,6 +1,6 @@
 /********************************************** STORY MAP PATRIMOINE | THEME ***************************** /
 
-/* ------------------ Intégration des fonts ------------------ */
+/* ------------------ Int�gration des fonts ------------------ */
 @font-face {
     font-family: "spotka_black";
     src: url('../../css/fonts/region_bretagne/spotkablack.ttf');
@@ -64,9 +64,6 @@
     .ks-bg {
         display:none;
      }
-     .nextButton, .precButton {
-        top: 25%;
-     }
      .image{
      	padding: 0!important;
      	margin-left: 0!important;
@@ -131,13 +128,10 @@
     .ks-bg {
         display:block;
      }
-     #panel-story {
-        width:55%!important;
-     }
  }
 
 /* ------------------  MAP ------------------  */
-/* Bandeau Région */
+/* Bandeau R�gion */
 /*#bandeau{
     background-image: url('image/bandeau_region_magenta.svg');    
     background-repeat: no-repeat;
@@ -232,26 +226,6 @@
     background-color: #0094AB;
 }
 
-/* button */
-.carButton {
-    background-color: rgba(153, 153, 153, 0);
-}
-.precButton a {
-     background: url(image/precButton_turquoise.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.precButton a:hover {
-     background: url(image/precButton_turquoise.png) 0 -40px no-repeat!important;
- }
-.nextButton a {
-     background: url(image/nextButton_turquoise.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton_turquoise.png) 0 -40px no-repeat!important;
- }
 /* ----
 
 /* custom-tooltip */
@@ -291,7 +265,7 @@
 .item.background:before{
     opacity: 0.7;
 }
-/* Contenu édito*/
+/* Contenu �dito*/
 
 .carousel-inner h2{
     color: #0094AB;
@@ -357,7 +331,7 @@
 }
 
 
-/********Style fond européen **********/
+/********Style fond europ�en **********/
 
 /*  Structuration du template europe */
 #panel-story{
@@ -390,7 +364,7 @@
 
 
 
-/* Bénéficiaire */
+/* B�n�ficiaire */
 #beneficiaire{
     border-bottom: 1.3px solid #333;
     border-top: 1px solid #333;
diff --git a/stories/pe_biodiversite/splash.html b/stories/pe_biodiversite/splash.html
index 4696df8..58bb8e3 100644
--- a/stories/pe_biodiversite/splash.html
+++ b/stories/pe_biodiversite/splash.html
@@ -5,7 +5,7 @@
     <title>splash</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    
-        <link rel="stylesheet" href="../../lib/bootstrap_3.3.7/css/bootstrap.min.css">
+        <link rel="stylesheet" href="../../lib/bootstrap/5.3.3/bootstrap.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">
         <link rel="stylesheet" href="http://guidestyles.bretagne.bzh/thematiques/bleu-emeraude.css">
         <link rel="stylesheet" href="http://guidestyles.bretagne.bzh/styles/crbicon.css">
diff --git a/stories/pe_brest/config.json b/stories/pe_brest/config.json
index 0812209..691c3e0 100644
--- a/stories/pe_brest/config.json
+++ b/stories/pe_brest/config.json
@@ -14,7 +14,7 @@
   "data": {
         "title": "",
         "subtitle":"",
-        "template": {"name": "carousel", "options": {} },
+        "template": {"name": "carousel", "size":"55%"},
     "url": "stories/pe_brest/parcours_brest3857.geojson",
     "orderby": "order",
     "fields": [{
diff --git a/stories/pe_brest/parcours_europeen.css b/stories/pe_brest/parcours_europeen.css
index b0b5ece..8cac575 100644
--- a/stories/pe_brest/parcours_europeen.css
+++ b/stories/pe_brest/parcours_europeen.css
@@ -1,6 +1,6 @@
 /********************************************** STORY MAP PATRIMOINE | THEME ***************************** /
 
-/* ------------------ Intégration des fonts ------------------ */
+/* ------------------ Int�gration des fonts ------------------ */
 @font-face {
     font-family: "spotka_black";
     src: url('../../css/fonts/region_bretagne/spotkablack.ttf');
@@ -131,13 +131,10 @@
     .ks-bg {
         display:block;
      }
-     #panel-story {
-        width:55%!important;
-     }
  }
 
 /* ------------------  MAP ------------------  */
-/* Bandeau Région */
+/* Bandeau R�gion */
 /*#bandeau{
     background-image: url('image/bandeau_region_magenta.svg');    
     background-repeat: no-repeat;
@@ -232,26 +229,6 @@
     background-color: #0094AB;
 }
 
-/* button */
-.carButton {
-    background-color: rgba(153, 153, 153, 0);
-}
-.precButton a {
-     background: url(image/precButton_turquoise.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.precButton a:hover {
-     background: url(image/precButton_turquoise.png) 0 -40px no-repeat!important;
- }
-.nextButton a {
-     background: url(image/nextButton_turquoise.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton_turquoise.png) 0 -40px no-repeat!important;
- }
 /* ----
 
 /* custom-tooltip */
@@ -291,7 +268,7 @@
 .item.background:before{
     opacity: 0.7;
 }
-/* Contenu édito*/
+/* Contenu �dito*/
 
 .carousel-inner h2{
     color: #0094AB;
@@ -357,7 +334,7 @@
 }
 
 
-/********Style fond européen **********/
+/********Style fond europ�en **********/
 
 /*  Structuration du template europe */
 #panel-story{
@@ -390,7 +367,7 @@
 
 
 
-/* Bénéficiaire */
+/* B�n�ficiaire */
 #beneficiaire{
     border-bottom: 1.3px solid #333;
     border-top: 1px solid #333;
diff --git a/stories/pe_cotesarmor/config.json b/stories/pe_cotesarmor/config.json
index 933e39e..6bd3c68 100644
--- a/stories/pe_cotesarmor/config.json
+++ b/stories/pe_cotesarmor/config.json
@@ -14,7 +14,7 @@
   "data": {
         "title": "",
         "subtitle":"",
-        "template": {"name": "carousel", "options": {} },
+        "template": {"name": "carousel","size":"55%"},
     "url": "stories/pe_cotesarmor/parcours_cotesarmor_3857.geojson",
     "orderby": "order",
     "fields": [{
diff --git a/stories/pe_cotesarmor/parcours_europeen.css b/stories/pe_cotesarmor/parcours_europeen.css
index b0b5ece..8cac575 100644
--- a/stories/pe_cotesarmor/parcours_europeen.css
+++ b/stories/pe_cotesarmor/parcours_europeen.css
@@ -1,6 +1,6 @@
 /********************************************** STORY MAP PATRIMOINE | THEME ***************************** /
 
-/* ------------------ Intégration des fonts ------------------ */
+/* ------------------ Int�gration des fonts ------------------ */
 @font-face {
     font-family: "spotka_black";
     src: url('../../css/fonts/region_bretagne/spotkablack.ttf');
@@ -131,13 +131,10 @@
     .ks-bg {
         display:block;
      }
-     #panel-story {
-        width:55%!important;
-     }
  }
 
 /* ------------------  MAP ------------------  */
-/* Bandeau Région */
+/* Bandeau R�gion */
 /*#bandeau{
     background-image: url('image/bandeau_region_magenta.svg');    
     background-repeat: no-repeat;
@@ -232,26 +229,6 @@
     background-color: #0094AB;
 }
 
-/* button */
-.carButton {
-    background-color: rgba(153, 153, 153, 0);
-}
-.precButton a {
-     background: url(image/precButton_turquoise.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.precButton a:hover {
-     background: url(image/precButton_turquoise.png) 0 -40px no-repeat!important;
- }
-.nextButton a {
-     background: url(image/nextButton_turquoise.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton_turquoise.png) 0 -40px no-repeat!important;
- }
 /* ----
 
 /* custom-tooltip */
@@ -291,7 +268,7 @@
 .item.background:before{
     opacity: 0.7;
 }
-/* Contenu édito*/
+/* Contenu �dito*/
 
 .carousel-inner h2{
     color: #0094AB;
@@ -357,7 +334,7 @@
 }
 
 
-/********Style fond européen **********/
+/********Style fond europ�en **********/
 
 /*  Structuration du template europe */
 #panel-story{
@@ -390,7 +367,7 @@
 
 
 
-/* Bénéficiaire */
+/* B�n�ficiaire */
 #beneficiaire{
     border-bottom: 1.3px solid #333;
     border-top: 1px solid #333;
diff --git a/stories/pe_fougeres/config.json b/stories/pe_fougeres/config.json
index 009c9e5..04e80cf 100644
--- a/stories/pe_fougeres/config.json
+++ b/stories/pe_fougeres/config.json
@@ -14,7 +14,7 @@
   "data": {
         "title": "",
         "subtitle":"",
-        "template": {"name": "carousel", "options": {} },
+        "template": {"name": "carousel", "size":"55%"},
     "url": "stories/pe_fougeres/parcours_fougeres_line_3857.geojson",
     "orderby": "order",
     "fields": [{
diff --git a/stories/pe_fougeres/parcours_europeen.css b/stories/pe_fougeres/parcours_europeen.css
index b0b5ece..8cac575 100644
--- a/stories/pe_fougeres/parcours_europeen.css
+++ b/stories/pe_fougeres/parcours_europeen.css
@@ -1,6 +1,6 @@
 /********************************************** STORY MAP PATRIMOINE | THEME ***************************** /
 
-/* ------------------ Intégration des fonts ------------------ */
+/* ------------------ Int�gration des fonts ------------------ */
 @font-face {
     font-family: "spotka_black";
     src: url('../../css/fonts/region_bretagne/spotkablack.ttf');
@@ -131,13 +131,10 @@
     .ks-bg {
         display:block;
      }
-     #panel-story {
-        width:55%!important;
-     }
  }
 
 /* ------------------  MAP ------------------  */
-/* Bandeau Région */
+/* Bandeau R�gion */
 /*#bandeau{
     background-image: url('image/bandeau_region_magenta.svg');    
     background-repeat: no-repeat;
@@ -232,26 +229,6 @@
     background-color: #0094AB;
 }
 
-/* button */
-.carButton {
-    background-color: rgba(153, 153, 153, 0);
-}
-.precButton a {
-     background: url(image/precButton_turquoise.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.precButton a:hover {
-     background: url(image/precButton_turquoise.png) 0 -40px no-repeat!important;
- }
-.nextButton a {
-     background: url(image/nextButton_turquoise.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton_turquoise.png) 0 -40px no-repeat!important;
- }
 /* ----
 
 /* custom-tooltip */
@@ -291,7 +268,7 @@
 .item.background:before{
     opacity: 0.7;
 }
-/* Contenu édito*/
+/* Contenu �dito*/
 
 .carousel-inner h2{
     color: #0094AB;
@@ -357,7 +334,7 @@
 }
 
 
-/********Style fond européen **********/
+/********Style fond europ�en **********/
 
 /*  Structuration du template europe */
 #panel-story{
@@ -390,7 +367,7 @@
 
 
 
-/* Bénéficiaire */
+/* B�n�ficiaire */
 #beneficiaire{
     border-bottom: 1.3px solid #333;
     border-top: 1px solid #333;
diff --git a/stories/rnr/config.json b/stories/rnr/config.json
index fe09653..41fb2f3 100755
--- a/stories/rnr/config.json
+++ b/stories/rnr/config.json
@@ -15,7 +15,7 @@
   "data": {
         "title": "Réserve naturelle régionnale",
         "subtitle":"La nature en Bretagne",
-        "template": {"name": "carousel", "options": {} },
+        "template": {"name": "carousel","size":"40%", "options": {} },
     "url": "stories/rnr/rnr.geojson",
         "orderby": "ordre",
     "fields": [{
diff --git a/stories/rnr/rnr.css b/stories/rnr/rnr.css
index 294288e..0ee6d26 100755
--- a/stories/rnr/rnr.css
+++ b/stories/rnr/rnr.css
@@ -256,27 +256,6 @@
     background-color: #cfdc9a;
 }
 
-/* button */
-.carButton {
-    background-color: rgba(153, 153, 153, 0);
-    height: 50px;
-}
-.precButton a {
-     background: url(image/precButton_vert.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.precButton a:hover {
-     background: url(image/precButton_vert.png) 0 -40px no-repeat!important;
- }
-.nextButton a {
-     background: url(image/nextButton_vert.png) 0 0 no-repeat!important;
-     width: 40px!important;
-     height: 40px!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton_vert.png) 0 -40px no-repeat!important;
- }
 /* ----
 
 /* custom-tooltip */
@@ -308,8 +287,6 @@
 #panel-story {
     font-family: 'Trebuchet MS', 'Arial', Sans-serif;
     background-color: rgba(255,255,255,0.9);
-    padding-left: 0px;
-    padding-right: 0px;
 }
 .item.background{
     top:-20px;
@@ -401,8 +378,3 @@
     padding-right:20px;
 }
 
-/* Menu */
-.cd-stretchy-nav.add-content .cd-nav-trigger , .cd-stretchy-nav.add-content .stretchy-nav-bg {
-    background-color: #69003F!important;
-}
-
diff --git a/stories/rnr/splash.html b/stories/rnr/splash.html
index a7befac..e206ad9 100755
--- a/stories/rnr/splash.html
+++ b/stories/rnr/splash.html
@@ -188,9 +188,9 @@
   </style>
 </head> 
 <body>  
-  <div class="container-fluid">          
-    <div class="row" id="intro">        
-      <div class=" col-sm-offset-3 col-sm-6"> 
+  <div class="container">          
+    <div class="row justify-content-md-center" id="intro">        
+      <div class="col-sm-6"> 
           <div class="bandeau">
             <img src="image/bandeau_region_vert_top.svg">
           </div>
diff --git a/stories/tournage_bzh/splash.html b/stories/tournage_bzh/splash.html
index 8b140f3..5529b02 100644
--- a/stories/tournage_bzh/splash.html
+++ b/stories/tournage_bzh/splash.html
@@ -83,16 +83,20 @@
 		</style>
 	</head> 
 	<body> 
-		<div class="col-md-4 col-md-offset-4"> 
-				<img class="img-responsive center-block"" src="image/splash_cinema.svg" style="width: 80%; margin-top:50px;">	
-				<div class="title">LIEUX DE TOURNAGE EN BRETAGNE</div>	
-			    <!--<div class="subtitle">Par le chemin de halage</div>-->
-			    <div class="corps">
-			        <p>Kartenn Story sur les lieux de tournages en Bretagne des longs métrages ayant réalisés plus d'un million d'entrées au sein des salles de cinéma lors de leurs sorties.</p>
-				</div>
-				<div id="next">
-					 <a onclick="next();">Découvrir les films</a>
+		<div class="container">
+			<div class="row justify-content-md-center">
+				<div class="col-md-4 "> 
+						<img class="img-responsive center-block" src="image/splash_cinema.svg" style="margin-top:50px;">	
+						<div class="title">LIEUX DE TOURNAGE EN BRETAGNE</div>	
+						<!--<div class="subtitle">Par le chemin de halage</div>-->
+						<div class="corps">
+							<p>Kartenn Story sur les lieux de tournages en Bretagne des longs métrages ayant réalisés plus d'un million d'entrées au sein des salles de cinéma lors de leurs sorties.</p>
+						</div>
+						<div id="next">
+							<a onclick="next();">Découvrir les films</a>
+						</div>
 				</div>
+			</div>
 		</div>
 	 <script>
     var next = function () {        
diff --git a/stories/tournage_bzh/tournage_bzh.css b/stories/tournage_bzh/tournage_bzh.css
index 34c346a..82c0910 100644
--- a/stories/tournage_bzh/tournage_bzh.css
+++ b/stories/tournage_bzh/tournage_bzh.css
@@ -1,6 +1,6 @@
 /********************************************** STORY MAP PATRIMOINE | THEME 2 ***************************** /
 
-/* ------------------ Intégration des fonts ------------------ */
+/* ------------------ Int�gration des fonts ------------------ */
 
 @font-face {
     font-family: "roboto_black";
@@ -64,60 +64,6 @@
     /*letter-spacing: 1px;*/
 }
 
-/* Openlayers 3 controls */
-.ol-control button {
-    background-color: rgba(149, 165, 166, 0.5);
-}
-.ol-control button:hover,
-.ol-control button:focus {
-    background-color: rgba(149, 165, 166, 0.8);
-}
-
-/* Hide zoom controls */
-.ol-zoom {
-    display: none;
-}
-.ol-custom-overviewmap,
-.ol-custom-overviewmap.ol-uncollapsible {
-    bottom: 10px;
-    left: 0;
-    right: auto;
-    top: auto;
-}
-.ol-custom-overviewmap:not(.ol-collapsed) {
-    border: 0px solid #f5f5f5;
-}
-.ol-custom-overviewmap .ol-overviewmap-map {
-    border: none;
-    width: 200px;
-}
-.ol-custom-overviewmap .ol-overviewmap-box {
-    border: 2px solid #A39F9F;
-}
-.ol-custom-overviewmap:not(.ol-collapsed) button {
-    bottom: auto;
-    left: auto;
-    right: 1px;
-    top: 1px;
-}
-.ol-zoom {
-    top: 70%;
-    left: 0.5em;
-}
-/* Carousel template */
-.carousel-indicators {
-    background-color: #d8d8d8;
-}
-.carousel-control span:hover {
-    background-color: #8e44ad;
-}
-.carousel-control span {
-    background-color: #9b59b6;
-}
-.carousel-indicators .active {
-    background-color: #8e44ad;
-}
-
 /* bar de progression*/
 .progress {
     background: rgba(245, 245, 245, 1);
@@ -136,22 +82,12 @@
     bottom: 4%!important;
     left: 20%!important;
 }
-.precButton a {
-     background: url(image/precButton.png) 0 0 no-repeat!important;
- }
-.precButton a:hover {
-     background: url(image/precButton.png) 0 -50px no-repeat!important;
- }
+
 .nextButton{
     bottom: 4%!important;
     right: 70%!important;
 }
-.nextButton a {
-     background: url(image/nextButton.png) 0 0 no-repeat!important;
- }
-.nextButton a:hover {
-     background: url(image/nextButton.png) 0 -50px no-repeat!important;
- }
+
 /* ----
 
 /* custom-tooltip */
@@ -194,7 +130,7 @@
 .item.background:before{
     opacity: 0.7;
 }
-/* Contenu édito*/
+/* Contenu �dito*/
 .carousel-inner{
     overflow-y: auto;
 }
@@ -240,7 +176,6 @@
 }
 .url_ba{
     width: 100%;
-    height: 35%;
     padding-right: 30px;
     padding-left: 30px;
     border: none;
diff --git a/stories/tournage_bzh/tournage_bzh.mst b/stories/tournage_bzh/tournage_bzh.mst
index af104ea..67dbd4d 100644
--- a/stories/tournage_bzh/tournage_bzh.mst
+++ b/stories/tournage_bzh/tournage_bzh.mst
@@ -1,16 +1,16 @@
-<!-- Style CSS du template se situe dans le fichier tournage_bzh.css---!>
+<!-- Style CSS du template se situe dans le fichier tournage_bzh.css-->
 
 <div class="nom">{{titre}}</div>
-<iframe class="url_ba" src="{{url_ba}}" scrolling="no" frameborder="0" allowfullscreen=""></iframe>
+<iframe class="url_ba" src="{{url_ba}}" scrolling="no" frameborder="0" allowfullscreen="" height="500"></iframe>
 <div class="resume">{{resume}}</div>
 
 <div class="iframe">
 	<div class="row" id="real_prod">
-		<div class="col-xs-6">
+		<div class="col-6">
 			<div class="title">RÉALISATION </div>
 			<div class="info">{{realisation}}</div>
 		</div>
-		<div class="col-xs-6">
+		<div class="col-6">
 			<div class="title"> PRODUCTION </div>
 			<div class="info">{{production}}</div>
 		</div>		
@@ -20,28 +20,28 @@
 		<div class="info">{{acteurs}}</div>	
 	</div>
 	<div class="row" id="annee">
-		<div class="col-xs-6">
+		<div class="col-6">
 			<div class="title"> ANNÉE DE TOURNAGE <span class="info">{{annee_tournage}}</span></div>
 		</div>
-		<div class="col-xs-6">
+		<div class="col-6">
 			<div class="title"> DATE DE SORTIE <span class="info">{{date_sortie}}</span></div>
 		</div>	
 	</div>
-	<div class="row" id="number">
-		<div class="col-xs-6">
-			<div class="col-xs-4" style="padding-left:0px;">
+	<div class="row my-4" id="number">
+		<div class="col-6 d-flex align-items-center">
+			<div class="" style="padding-left:0px;">
 				<img src="stories/tournage_bzh/image/clapperboard.svg" style="width:70px;"/>
 			</div>
-			<div class="col-xs-8" style="padding-left:0px;">
+			<div class="" style="padding-left:0px;">
 				<div class="chiffres">{{duree_tournage}}</div>
 				<div class="sub-title"> Nombre de jours de tournage en Bretagne </div>
 			</div>
 		</div>	
-		<div class="col-xs-6">
-			<div class="col-xs-3" style="padding-left:0px; margin-left:-15px;">
+		<div class="col-6 d-flex align-items-center">
+			<div class="" style="padding-left:0px; margin-left:-15px;">
 				<img src="stories/tournage_bzh/image/ticket.svg" style="width:70px;"/>
 			</div>
-			<div class="col-xs-9" style="padding-left:15px;">
+			<div class="" style="padding-left:15px;">
 				<div class="chiffres">{{nb_entrees}}</div>
 				<div class="sub-title"> Nombre d'entrées au cinéma</div>
 			</div>
diff --git a/templates/carousel.css b/templates/carousel.css
index 72f90b4..e2c222c 100644
--- a/templates/carousel.css
+++ b/templates/carousel.css
@@ -3,7 +3,7 @@
 @media (min-width: 768px) {
 	#map {
 		position: fixed;
-		width: 100vw;
+		width: calc(100% - (var(--panelStorieSize, 50%)));
 		height: 100vh;
 		margin: 0;
 	}
@@ -14,20 +14,30 @@
 
 	#panel-story {
 		position: fixed;
-		width: 50%;
+		width: var(--panelStorieSize, 50%);
 		right: 0px;
 		overflow-y: auto;
 	}
 
 	#tools {
 		top: 10px;
-		left: 47%;
+		left: calc(100% - (var(--panelStorieSize, 50%) + 4em));
 	}
 	
 	#menu {
-		left: 47%;
+		left: calc(100% - (var(--panelStorieSize, 50%)  + 4em));
 		top: 135px;
 	}
+	
+	.nextButton {
+		bottom: 45%;
+		right: 2%;
+	}
+
+	.precButton {
+		bottom: 45%;
+		left: 2%;
+	}
 }
 
 @media (max-width: 768px) {
@@ -61,6 +71,16 @@
 		top: 135px;
 		left: 88%;
 	}
+
+	.nextButton {
+		bottom: 53%;
+		right:35%;
+	}
+
+	.precButton {
+		bottom: 53%;
+		left: 35%;
+	}
 }
 
 /* PC Screen */
@@ -68,8 +88,6 @@
     bottom: 1em;
 }
 
-
-
 #panel-story {
 	background-color: white;
 	padding: 1em;
@@ -108,42 +126,28 @@
 	margin: 0;
 }
 
-.nextButton {
-	position: fixed;
-	bottom: 45%;
-	right: 2%;
-	z-index: 10;
-	border-radius: 50px;
+.progress-bar{
+	background-color: var(--colorStorie, #212529);
 }
 
-.precButton {
-	position: fixed;
-	bottom: 45%;
-	left: 2%;
+.carButton {
+    position: fixed;
 	z-index: 10;
-	border-radius: 52px;
-}
-
-.nextButton a {
-	display: block;
-	width: 50px;
-	height: 50px;
-	background: url(../img/nextButton.png) 0 0 no-repeat;
 	cursor: pointer;
+	background-color: var(--colorStorie, #212529);
+    color: white;
+    height: 45px;
+    width: 45px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: xx-large;
+    border-radius: 1em;
+	opacity: 1;
+	transition: 0.3s;
+	line-height: 0;
 }
 
-.nextButton a:hover {
-	background: url(../img/nextButton.png) 0 -50px no-repeat;
+.carButton:hover {
+    opacity: .7!important;
 }
-
-.precButton a {
-	display: block;
-	width: 50px;
-	height: 50px;
-	background: url(../img/precButton.png) 0 0 no-repeat;
-	cursor: pointer;
-}
-
-.precButton a:hover {
-	background: url(../img/precButton.png) 0 -50px no-repeat;
-}
\ No newline at end of file
diff --git a/templates/carousel.js b/templates/carousel.js
index af2ae97..89c84d8 100644
--- a/templates/carousel.js
+++ b/templates/carousel.js
@@ -45,10 +45,10 @@ templates.carousel = function(dom, div) {
         $("#panel-story").append(tpl);
         _div.append([
             '<div class="carButton precButton" style="opacity: 1;">',
-            '<a data-actual-slide="0" onclick="$(\'.carousel\').carousel(parseInt(this.getAttribute(\'data-actual-slide\'))-1);"> </a>',
+            '<a data-actual-slide="0" onclick="$(\'.carousel\').carousel(parseInt(this.getAttribute(\'data-actual-slide\'))-1);"><i class="bi bi-arrow-left-short"></i></a>',
             '</div>',
             '<div class="carButton nextButton" style="opacity: 1;">',
-            '<a data-actual-slide="0" onclick="$(\'.carousel\').carousel(parseInt(this.getAttribute(\'data-actual-slide\'))+1);"> </a></div>',
+            '<a data-actual-slide="0" onclick="$(\'.carousel\').carousel(parseInt(this.getAttribute(\'data-actual-slide\'))+1);"><i class="bi bi-arrow-right-short"></i></a></div>',
             '<div class="progress">',
             '<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">',
             '<span class="visually-hidden">0% Complete</span>',
@@ -105,8 +105,7 @@ templates.carousel = function(dom, div) {
             var position = ol.extent.getCenter(feature.getGeometry().getExtent()).join(",");
 
             carousel_items.push(['<div id="c' + (counter) + '" class="item carousel-item" data-featureid="' + feature.getId() + '" data-position="' + position + '" >',
-                content,
-                '<div class="ks-space"></br></br></br></br></br></div></div>'
+                content
             ].join(" "));
 
             carousel_indicators.push('<button data-bs-target="#myCarousel" data-bs-slide-to="' + (counter - 1) + '" data-featureid="' + feature.getId() + '" data-position="' + position + '" ></button>');
@@ -140,10 +139,10 @@ templates.carousel = function(dom, div) {
                         content.title = '<h2>' + feature.get(fields[j].name) + '</h2>';
                         break;
                     case "text":
-                        content.text.push('<div class="' + fields[j].name + '">' + (feature.get(fields[j].name) || "") + '</div>');
+                        content.text.push('<div class="my-2 ' + fields[j].name + '">' + (feature.get(fields[j].name) || "") + '</div>');
                         break;
                     case "image":
-                        content.text.push('<img class="' + fields[j].name + '" src="' + (feature.get(fields[j].name) || "") + '" class="img-responsive"></img>');
+                        content.text.push('<img class="my-2 ' + fields[j].name + '" src="' + (feature.get(fields[j].name) || "") + '" class="img-responsive"></img>');
                         break;
                     case "background":
                         content.classes.push("background");
@@ -163,27 +162,26 @@ templates.carousel = function(dom, div) {
                         content.style.push('#c' + counter + '{ position: relative;');
                         break;
                     case "url":
-                        content.text.push('<a class="' + fields[j].name + '" title="Ouvrir dans une nouvelle fenêtre" href="' + (feature.get(fields[j].name) || "") + '" target="_blank" >En savoir plus</a>');
+                        content.text.push('<a class="my-2 btn btn-dark ' + fields[j].name + '" title="Ouvrir dans une nouvelle fenêtre" href="' + (feature.get(fields[j].name) || "") + '" target="_blank" >En savoir plus</a>');
                         break;
                     case "iframe":
-                        content.text.push('<iframe class="'+fields[j].name+'" src="'+feature.get(fields[j].name) +'" scrolling="no" frameborder="0" allowfullscreen></iframe>');
+                        content.text.push('<iframe class="my-2 '+fields[j].name+'" src="'+feature.get(fields[j].name) +'" scrolling="no" frameborder="0" allowfullscreen></iframe>');
                         break;
                     default:
-                        content.text.push('<div class="' + fields[j].name + '" >' + (feature.get(fields[j].name) || "") + '</div>');
+                        content.text.push('<div class="my-2 ' + fields[j].name + '" >' + (feature.get(fields[j].name) || "") + '</div>');
                 }
             }
 
             var position = ol.extent.getCenter(feature.getGeometry().getExtent()).join(",");
 
-            carousel_items.push(['<div id="c' + (counter) + '" class="' + content.classes.join(" ") + '" data-featureid="' + feature.getId() + '" data-position="' + position + '" >',
+            carousel_items.push(['<div id="c' + (counter) + '" class="carousel-item ' + content.classes.join(" ") + '" data-featureid="' + feature.getId() + '" data-position="' + position + '" >',
                 content.background,
                 content.title,
-                content.text.join(" "),
-                '<div class="ks-space"></br></br></br></br></br></div></div>'
+                content.text.join(" ")
             ].join(" ") + ['<style>', content.style.join(" "), '</style>'].join(" "));
 
 
-            carousel_indicators.push('<li data-bs-target="#myCarousel" data-bs-slide-to="' + (counter - 1) + '" data-featureid="' + feature.getId() + '" data-position="' + position + '" ></li>');
+            carousel_indicators.push('<button data-bs-target="#myCarousel" data-bs-slide-to="' + (counter - 1) + '" data-featureid="' + feature.getId() + '" data-position="' + position + '" ></button>');
 
         }
 
diff --git a/templates/list.css b/templates/list.css
index 764dda8..753efaa 100644
--- a/templates/list.css
+++ b/templates/list.css
@@ -60,24 +60,24 @@
 @media (min-width: 768px) {
 	#map {
 		position: fixed;
-		width: 100vw;
+		width: calc(100% - (var(--panelStorieSize, 30%)));
 		height: 100vh;
 		margin: 0;
 	}
 
 	#panel-story {
 		position: fixed;
-		width: 30vw;
+		width: var(--panelStorieSize, 30%);
 		right: 0px;
 	}
 	
 	#tools {
 		top: 10px;
-		left: 67%;
+		left: calc(100% - (var(--panelStorieSize, 30%) + 4em));
 	}
 
 	#menu {
-		left: 67%;
+		left: calc(100% - (var(--panelStorieSize, 30%) + 4em));
 		top: 135px;
 	}
 }
\ No newline at end of file
diff --git a/templates/list.js b/templates/list.js
index 8181c9d..519b142 100644
--- a/templates/list.js
+++ b/templates/list.js
@@ -108,29 +108,31 @@ templates.list = function(dom, div) {
                         content.title = '<h2>' + feature.get(fields[j].name) + '</h2>';
                         break;
                     case "text":
-                        content.text.push('<div class="' + fields[j].name + '">' + (feature.get(fields[j].name) || "") + '</div>');
+                        content.text.push('<div class="my-2 ' + fields[j].name + '">' + (feature.get(fields[j].name) || "") + '</div>');
                         break;
                     case "url":
-                        content.text.push('<a class="' + fields[j].name + '" title="Ouvrir dans une nouvelle fenêtre" href="' + (feature.get(fields[j].name) || "") + '" target="_blank" >En savoir plus</a>');
+                        content.text.push('<a class="my-2 btn btn-dark ' + fields[j].name + '" title="Ouvrir dans une nouvelle fenêtre" href="' + (feature.get(fields[j].name) || "") + '" target="_blank" >En savoir plus</a>');
                         break;
                     case "image":
-                        content.text.push('<img class="img-responsive ' + fields[j].name + '" src="' + (feature.get(fields[j].name) || "") + '"></img>');
+                        content.text.push('<img class="my-2 img-responsive ' + fields[j].name + '" src="' + (feature.get(fields[j].name) || "") + '"></img>');
                         break;
                     case "iframe":
                         content.text.push('<iframe src="' + feature.get(fields[j].name) + '" scrolling="no" frameborder="0" allowfullscreen></iframe>');
                         break;
                     default:
-                        content.text.push('<div class="' + fields[j].name + '" >' + (feature.get(fields[j].name) || "") + '</div>');
+                        content.text.push('<div class="my-2 ' + fields[j].name + '" >' + (feature.get(fields[j].name) || "") + '</div>');
                 }
             }
 
             var position = ol.extent.getCenter(feature.getGeometry().getExtent()).join(",");
-            scrollspy_items.push(['<div id="item' + (counter) + '" class="item-story" data-featureid="' + feature.getId() + '" data-position="' + position + '" >',
-                content,
+            scrollspy_items.push(['<div id="item' + (counter) + '" data-id="' + (counter) + '"class="item-story" data-featureid="' + feature.getId() + '" data-position="' + position + '" data-spy>',
+                content.background,
+                content.title,
+                content.text.join(" "),
                 '</div>'
             ].join(" "));
 
-            scrollspy_nav.push('<a href="#item' + counter + '" data-bs-target="' + feature.getId() + '" data-featureid="' + feature.getId() + '" data-position="' + position + '" >' + content.title + '</a>');
+            scrollspy_nav.push('<a href="#item' + counter + '" data-featureid="' + feature.getId() + '" data-position="' + position + '" ></a>');
 
         } // end for            
         scrollspy_items.push('<div id="end-lst" class="item-story">');