diff --git a/assets/css/baguette.css b/assets/css/baguette.css
index 688a146..6240ee5 100644
--- a/assets/css/baguette.css
+++ b/assets/css/baguette.css
@@ -9,201 +9,87 @@
     pointer-events: auto;
 }
 
-#bar1 {
+
+#shaft, #star1, #star2, #star3, #star4 {
     position: absolute;
-    width: 30px;
-    height: 3px;
-    background-color: #ffffff;
-    margin: 4px 0;
-    transition: 0.3s;
-}
-
-#bar2 {
-    position: relative;
-    width: 3px;
-    height: 3px;
-    background-color: #ffffff;
-    margin: 4px 0;
-    transition: 0.3s;
-
-}
-
-#bar3 {
-    position: relative;
-    width: 3px;
-    height: 3px;
-    background-color: #ffffff;
-    margin: 4px 0;
-    transition: 0.3s;
-
-}
-
-#bar4 {
-    position: relative;
-    width: 3px;
-    height: 3px;
-    background-color: #ffffff;
-    margin: 4px 0;
-    transition: 0.3s;
-
-}
-#bar5 {
-    position: relative;
-    width: 3px;
-    height: 3px;
-    background-color: #ffffff;
-    margin: 4px 0;
-    transition: 0.3s;
-
-}
-
-#bar6 {
-    position: relative;
-    width: 3px;
-    height: 3px;
-    background-color: #ffffff;
-    margin: 4px 0;
-    transition: 0.3s;
-
-}
-
-#bar7 {
-    position: relative;
-    width: 3px;
-    height: 3px;
-    background-color: #ffffff;
-    margin: 4px 0;
-    transition: 0.3s;
-
-}
-
-
-#bar8{
-    position: absolute;
-    width: 40px;
-    height: 5px;
-    background-color: #fff;
-    margin: 5px 0;
-    transition: 0.3s;
-}
-#bar9 {
-    position: absolute;
-    width: 40px;
+    width: 100%;
     height: 5px;
     background-color: #fff;
     margin: 5px 0;
     transition: 0.3s;
 }
 
-#bar1 {
+#shaft {
+    margin: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+#star1, #star2 {
+    width: 20px;
     top: 0;
-    -webkit-transform: rotate(-30deg) translate(-10px, 10px);
-    transform: rotate(-45deg) translate(-10px, 12px);
 }
 
-#bar2 {
-    top: 0px;
-    right:-20px;
-
+#star3, #star4 {
+    width: 20px;
+    bottom: 0;
 }
 
-#bar3 {
-    right: -28px;
-    bottom:9px;
+#star1, #star3 {
+    left: 0;
 }
 
-#bar4 {
-    bottom: 8PX;
-    left:36px;
-}
-#bar5 {
-    bottom: 21px;
-    left:34px;
-}
-#bar6 {
-    bottom: 2px;
-    left:-100px;            /*je ne sais pas encore si je la mets ou pas*/
+#star2, #star4 {
+    right: 0;
 }
 
-#bar7 {
-    bottom: 23px;
-    right:-32px;
-}
 
-#bar8{
-    top:0;
-    opacity:0;
-    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
-    transform: rotate(-45deg) translate(-8px, 8px);
-}
-
-#bar9{
-    bottom:0;
-   opacity:0;
-    -webkit-transform: rotate(45deg) translate(-10px, -10px);
-    transform: rotate(45deg) translate(-10px, -10px);
-}
 /* Mouse hovers the baguette */
 
-.change-hover #bar2 {
+.change-hover #shaft {
+    background-color: #e9b82f;
+    transform: translateY(-50%) rotate(-45deg);
+}
+
+.change-hover #star1, .change-hover #star2, .change-hover #star3, .change-hover #star4 {
+    width: 5px;
+    border-radius: 100%;
+}
+
+.change-hover #star1 {
     background-color: #ff5f5f;
+    transform: translateX(15px);
+
 }
-.change-hover #bar3 {
+
+.change-hover #star2 {
     background-color: #7ffd78;
+    transform: translate(-10px, -5px);
 }
-.change-hover #bar4 {
+
+.change-hover #star3 {
     background-color: #fafd78;
-}
-.change-hover #bar5 {
-    background-color: #e9b82f;
+    transform: translate(35px, -10px);
 }
 
-.change-hover #bar7 {
+.change-hover #star4 {
     background-color: #60bdff;
-}
-
-
-.change-hover #bar1 {
-    background-color: #e9b82f;
-}
-
-.change-hover #bar8 {
-    background-color: #e9b82f;
-}
-.change-hover #bar9 {
-    background-color: #e9b82f;
+    transform: translate(5px, -20px);
 }
 
 /* Mouse clics the baguette */
 
-.change-clic #bar1 {
-    opacity:0;
+.change-clic #shaft {
+    transform: translateY(-50%) rotate(-135deg);
+    background-color: #b0120b;
 }
 
-.change-clic #bar2 {
-    opacity: 0;
-}
-
-.change-clic #bar3 {
-    opacity: 0;
-}
-
-.change-clic #bar4 {
-    opacity:0;
-}
-.change-clic #bar5 {
-    opacity:0;
-}
-/*.change-clic #bar6 {
-    opacity:0;
-}*/
-.change-clic #bar7 {
-     opacity:0;
- }
-
-.change-clic #bar8 {
-    opacity : 100;
-}
-.change-clic #bar9 {
-    opacity : 100;
+.change-clic #star1, .change-clic #star2, .change-clic #star3, .change-clic #star4 {
+    left: 0;
+    width: 100%;
+    border-radius: 0;
+    margin: 0;
+    top: 50%;
+    transform: translateY(-50%) rotate(-45deg);
+    background-color: #b0120b;
 }
diff --git a/assets/css/style.css b/assets/css/style.css
index d51718f..173192a 100755
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -592,6 +592,11 @@ Full-Width Styles
     padding-bottom: 50px;
 }
 
+.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button {
+    font-family: Harry-P,fantasy;
+    font-size: 2rem;
+}
+
 /*******************************************************************************
 Small Device Styles
 *******************************************************************************/
diff --git a/includes/top_bar.php b/includes/top_bar.php
index 5d76209..cb5e83e 100755
--- a/includes/top_bar.php
+++ b/includes/top_bar.php
@@ -1,14 +1,10 @@
 <div id="header-top">
     <div id="baguette" onclick="toggleNav()">
-        <div id="bar1"></div>
-        <div id="bar2"></div>
-        <div id="bar3"></div>
-        <div id="bar4"></div>
-        <div id="bar5"></div>
-        <div id="bar6"></div>
-        <div id="bar7"></div>
-        <div id="bar8"></div>
-        <div id="bar9"></div>
+        <div id="shaft"></div>
+        <div id="star1"></div>
+        <div id="star2"></div>
+        <div id="star3"></div>
+        <div id="star4"></div>
     </div>
     <a id="menu-link" href="<?= $relativePath ?>index.php">
         <img src="<?= $relativePath ?>assets/images/logo-site-accueil.svg" id="menu-icon">