diff --git a/htdocs/public/demo/demo.css b/htdocs/public/demo/demo.css
new file mode 100644
index 00000000000..486096ccdfa
--- /dev/null
+++ b/htdocs/public/demo/demo.css
@@ -0,0 +1,113 @@
+
+/* ============================================================================== */
+/*  Demo                                                                          */
+/* ============================================================================== */
+
+
+.CTable {
+	padding: 6px;
+	font-weight: normal;
+	color: #444444 !important;
+	
+	margin: 8px 0px 8px 2px;
+	
+	/*border: 1px solid #bbb;
+	border-radius: 8px;
+	-moz-border-radius: 8px;*/
+	
+	background: -webkit-linear-gradient(bottom, rgb(255,255,255) 85%, rgb(255,255,255) 100%);
+}
+.csscolumns {
+    margin-top: 6px;
+    -webkit-column-count: 4; /* Chrome, Safari, Opera */
+    -moz-column-count: 4; /* Firefox */
+    column-count: 3;
+    text-align: left;
+}
+.demomaxoveflow {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+@media only screen and (max-width: 840px)
+{
+	.csscolumns {
+		-webkit-column-count: 3; /* Chrome, Safari, Opera */
+	    -moz-column-count: 3; /* Firefox */
+	    column-count: 3;
+        text-align: left;
+	}
+}
+@media only screen and (max-width: 640px)
+{
+	.csscolumns {
+		-webkit-column-count: 2; /* Chrome, Safari, Opera */
+	    -moz-column-count: 2; /* Firefox */
+	    column-count: 2;
+        text-align: left;
+	}
+}
+@media only screen and (max-width: 420px)
+{
+	.csscolumns {
+		-webkit-column-count: 1; /* Chrome, Safari, Opera */
+	    -moz-column-count: 1; /* Firefox */
+	    column-count: 1;
+        text-align: left;
+	}
+}
+
+
+/* For demo pages */
+.demobody {
+	line-height: 130%;
+	font-size: 150%;
+	text-align: center;
+}
+.demobantext {
+	max-width: 1024px;
+	text-align: center;
+	display: inline-block;
+}
+.demobanbox {
+    font-size: 90%;
+}
+img.demothumb {
+    /* box-shadow: 2px 2px 8px #BBB; */
+    margin-right: 20px;
+    margin-left: 10px;
+    width: 110px;
+}
+.demobackground {
+    background-image: url('dolibarr_demo_ban.jpg');
+    background-size: cover;
+    object-fit: contain;
+    height: 140px;
+    background-position-y: bottom;
+}
+div#tr1profdemoall {
+    margin-left: -40px;
+    margin-right: -40px;
+}
+
+
+@media only screen and (max-width: 767px)
+{
+    .demobody {
+    	line-height: 150% !important;
+        font-size: 100% !important;
+    }
+    img.demothumb {
+        box-shadow: 1px 1px 4px #BBB;
+        margin-right: 6px;
+        margin-left: 4px;
+        width: 80px;
+    }
+    .demobanbox {
+        font-size: 100%;
+    }
+    div#tr1profdemoall {
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+}
\ No newline at end of file
diff --git a/htdocs/public/demo/index.php b/htdocs/public/demo/index.php
index a83ef87b65b..800639be251 100644
--- a/htdocs/public/demo/index.php
+++ b/htdocs/public/demo/index.php
@@ -247,62 +247,8 @@ if (GETPOST("action") == 'gotodemo')
 $head='';
 $head.='<meta name="keywords" content="demo,online,demonstration,example,test,erp,crm,demos,web">'."\n";
 $head.='<meta name="description" content="Dolibarr ERP and CRM demo. You can test here several profiles for Dolibarr ERP and CRM demonstration.">'."\n";
-$head.='<style type="text/css">'."\n";
-$head.='.CTable {
-padding: 6px;
-font-weight: normal;
-color: #444444 !important;
-
-margin: 8px 0px 8px 2px;
-
-/*border: 1px solid #bbb;
-border-radius: 8px;
--moz-border-radius: 8px;*/
-
-background: -webkit-linear-gradient(bottom, rgb(255,255,255) 85%, rgb(255,255,255) 100%);
-
-}
-.csscolumns {
-    margin-top: 6px;
-    -webkit-column-count: 4; /* Chrome, Safari, Opera */
-    -moz-column-count: 4; /* Firefox */
-    column-count: 3;
-    text-align: left;
-}
-.demomaxoveflow {
-    max-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-@media only screen and (max-width: 840px)
-{
-	.csscolumns {
-		-webkit-column-count: 3; /* Chrome, Safari, Opera */
-	    -moz-column-count: 3; /* Firefox */
-	    column-count: 3;
-        text-align: left;
-	}
-}
-@media only screen and (max-width: 640px)
-{
-	.csscolumns {
-		-webkit-column-count: 2; /* Chrome, Safari, Opera */
-	    -moz-column-count: 2; /* Firefox */
-	    column-count: 2;
-        text-align: left;
-	}
-}
-@media only screen and (max-width: 420px)
-{
-	.csscolumns {
-		-webkit-column-count: 1; /* Chrome, Safari, Opera */
-	    -moz-column-count: 1; /* Firefox */
-	    column-count: 1;
-        text-align: left;
-	}
-}
-</style>
 
+$head.='
 <script type="text/javascript">
 var openedId="";
 jQuery(document).ready(function () {
@@ -510,7 +456,7 @@ function llxHeaderVierge($title, $head = "")
 
     top_httphead();
 
-    top_htmlhead($head,$title);
+    top_htmlhead($head,$title,0,0,array(),array('public/demo/demo.css'));
 
     print '<body class="demobody"><div class="demobackgrounddiv">'."\n";
 }
diff --git a/htdocs/theme/eldy/style.css.php b/htdocs/theme/eldy/style.css.php
index c42ea93cfce..354013e7ea3 100644
--- a/htdocs/theme/eldy/style.css.php
+++ b/htdocs/theme/eldy/style.css.php
@@ -4543,43 +4543,6 @@ border-top-right-radius: 6px;
 }
 
 
-/* ============================================================================== */
-/*  Demo                                                                          */
-/* ============================================================================== */
-
-
-/* For demo pages */
-.demobody {
-	line-height: 130%;
-	font-size: 150%;
-	text-align: center;
-}
-.demobantext {
-	max-width: 1024px;
-	text-align: center;
-	display: inline-block;
-}
-.demobanbox {
-    font-size: 90%;
-}
-img.demothumb {
-    /* box-shadow: 2px 2px 8px #BBB; */
-    margin-right: 20px;
-    margin-left: 10px;
-    width: 110px;
-}
-.demobackground {
-    background-image: url(<?php echo DOL_URL_ROOT.'/public/demo/dolibarr_demo_ban.jpg' ?>);
-    background-size: cover;
-    object-fit: contain;
-    height: 140px;
-    background-position-y: bottom;
-}
-div#tr1profdemoall {
-    margin-left: -40px;
-    margin-right: -40px;
-}
-
 
 /* ============================================================================== */
 /*  Public                                                                        */
@@ -4617,20 +4580,6 @@ div#tr1profdemoall {
 		width: <?php print dol_size(350,'width'); ?>px;
 	}
 
-    .demobody {
-    	line-height: 150% !important;
-        font-size: 100% !important;
-    }
-    img.demothumb {
-        box-shadow: 1px 1px 4px #BBB;
-        margin-right: 6px;
-        margin-left: 4px;
-        width: 80px;
-    }
-    .demobanbox {
-        font-size: 100%;
-    }
-
     div.tabBar {
         padding-left: 0px;
         padding-right: 0px;
diff --git a/htdocs/theme/md/style.css.php b/htdocs/theme/md/style.css.php
index f1f783f448f..473ea8e243b 100644
--- a/htdocs/theme/md/style.css.php
+++ b/htdocs/theme/md/style.css.php
@@ -4445,19 +4445,6 @@ border-top-right-radius: 6px;
 
 
 
-/* ============================================================================== */
-/*  Demo                                                                          */
-/* ============================================================================== */
-
-img.demothumb {
-    box-shadow: 2px 2px 8px #888;
-	margin-bottom: 4px;
-    margin-right: 20px;
-    margin-left: 10px;
-}
-
-
-
 /* ============================================================================== */
 /*  Public                                                                        */
 /* ============================================================================== */
@@ -4505,13 +4492,6 @@ img.demothumb {
 		width: <?php print dol_size(350,'width'); ?>px;
 	}
 
-    img.demothumb {
-        box-shadow: 1px 1px 4px #BBB;
-        margin-right: 6px;
-        margin-left: 4px;
-        width: 80px;
-    }
-
     div.tabBar {
         padding-left: 0px;
         padding-right: 0px;