added new style from website

src/app/app.css

@@ -6,60 +6,83 @@
     height: 100vh;
 }
 
-.top-nav {
-    line-height: 64px;
-}
-
-.logo {
-    float: left;
-    height: 64px;
-    padding-right: 24px;
-    line-height: 64px;
-}
-
-.logo img {
-    display: inline-block;
-    height: 32px;
-    width: 32px;
-    vertical-align: middle;
-}
-
-.logo h1 {
-    display: inline-block;
-    margin: 0 0 0 15px;
-    color: #fff;
-    font-weight: 600;
-    font-size: 20px;
-    font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
-    vertical-align: middle;
-}
-
-nz-content {
-    padding: 24px 50px;
-}
-
-.inner-content {
-    padding: 24px;
-    background: #fff;
-    height: 100%;
+nz-header {
+    display: flex;
+    align-items: center;
+    background: #001529;
+    padding: 0 24px;
 }
 
 .header-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
 }
 
+/* --- LOGO + TITRE --- */
 .logo {
     display: flex;
     align-items: center;
 }
 
-.top-nav {
-    flex: 1;
-    margin-left: 40px;
+.logo a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
 }
 
+.logo img {
+    height: 40px;
+    width: auto;
+}
+
+.logo h1 {
+    margin: 0 0 0 10px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 20px;
+    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+}
+
+/* --- MENU PRINCIPAL --- */
+.top-nav {
+    flex: 1;
+    margin: 0 40px;
+    line-height: 64px;
+    background: #001529;
+    border: none;
+}
+
+/* Couleur grise par défaut + effet blanc et zoom au survol */
+.top-nav li {
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.top-nav li a {
+    color: #bfbfbf !important; /* gris clair par défaut */
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+/* Au survol → zoom + blanc pur */
+.top-nav li:hover {
+    transform: scale(1.08);
+    background: transparent !important;
+    color: #fff !important;
+}
+
+.top-nav li:hover a {
+    color: #ffffff !important;
+}
+
+/* Supprime toute coloration bleue ou fond par défaut NG-ZORRO */
+.top-nav li.ant-menu-item-active,
+.top-nav li.ant-menu-item-selected {
+    background: transparent !important;
+    color: #fff !important;
+}
+
+/* --- ICONES DROITES --- */
 .right-icons {
     display: flex;
     align-items: center;
@@ -69,6 +92,22 @@ nz-content {
     cursor: pointer;
 }
 
-.right-icons nz-icon:hover {
-    color: #40a9ff;
+.right-icons app-modal-nav {
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.right-icons app-modal-nav:hover {
+    color: #40a9ff; /* survol bleu clair uniquement pour les icônes */
+    transform: scale(1.2);
+}
+
+/* --- CONTENU --- */
+nz-content {
+    padding: 24px 50px;
+}
+
+.inner-content {
+    padding: 24px;
+    background: #fff;
+    height: 100%;
 }

src/app/app.html

@@ -1,11 +1,19 @@
 <nz-layout class="app-layout">
     <nz-header>
+        <div class="header-container">
+            <!-- LOGO -->
             <div class="logo">
                 <a routerLink="/welcome">
-                <img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png" alt="logo" style="width: 100px; height: auto">
+                    <img
+                            src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
+                            alt="logo"
+                            style="width: 100px; height: auto"
+                    />
                     <h1>PYRO FÊTES</h1>
                 </a>
             </div>
+
+            <!-- MENU PRINCIPAL -->
             <ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
                 <li nz-menu-item routerLinkActive="ant-menu-item-selected">
                     <a routerLink="/stock">
@@ -57,17 +65,17 @@
                         <span>Utilisateur</span>
                     </a>
                 </li>
-            <li nz-menu-item>
-                <app-modalNav nameIcon="bell" name="Notification"></app-modalNav>
-            </li>
-            <li nz-menu-item>
-                <app-modalNav nameIcon="user" name="Profil"></app-modalNav>
-            </li>
-            <li nz-menu-item>
-                <app-modalNav nameIcon="setting" name="Paramètres"></app-modalNav>
-            </li>
             </ul>
+
+            <!-- ICONES À DROITE -->
+            <div class="right-icons">
+                <app-modal-nav nameIcon="bell" name="Notification"></app-modal-nav>
+                <app-modal-nav nameIcon="user" name="Profil"></app-modal-nav>
+                <app-modal-nav nameIcon="setting" name="Paramètres"></app-modal-nav>
+            </div>
+        </div>
     </nz-header>
+
     <nz-content>
         <div class="inner-content">
             <router-outlet></router-outlet>