fix header

css/styles.css

@@ -63,7 +63,8 @@ img {
 .main-content {
     margin-left: 250px;
     width: calc(100% - 250px);
-    padding: 20px;
+    padding: 0 20px 20px 20px;
+    position: relative;
 }
 
 /* Logo */
@@ -147,12 +148,18 @@ img {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 20px;
+    padding: 20px 20px 25px 20px;
     background-color: var(--main-bg);
     position: sticky;
     top: 0;
     z-index: 50;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    width: calc(100vw - 250px);
+    margin-bottom: 20px;
+    margin-left: -20px;
+    padding-left: 40px;
+    padding-right: 40px;
+    right: 0;
 }
 
 .search-container {
@@ -249,6 +256,7 @@ img {
     display: flex;
     gap: 20px;
     margin-bottom: 30px;
+    padding-top: 5px;
 }
 
 .hero {
@@ -551,6 +559,7 @@ img {
 .video-section {
     margin-bottom: 40px;
     position: relative;
+    padding-top: 5px;
 }
 
 .video-grid {
@@ -1193,6 +1202,14 @@ img {
         width: calc(100% - 70px);
     }
     
+    /* Ajuster le header pour le mode sidebar compact */
+    .header {
+        width: calc(100vw - 70px);
+        margin-left: -20px;
+        padding-left: 40px;
+        padding-right: 40px;
+    }
+    
     .nav-item span {
         display: none;
     }
@@ -1250,17 +1267,20 @@ img {
         width: 100%;
     }
     
+    /* Ajuster le header pour l'affichage mobile */
+    .header {
+        width: 100vw;
+        margin-left: -20px;
+        padding-left: 35px;
+        padding-right: 40px;
+    }
+    
     .mobile-menu-toggle {
         display: block;
     }
     
-    .header {
-        padding: 10px 15px;
-        justify-content: space-between;
-    }
-    
     .search-container {
-        max-width: 50%;
+        max-width: 60%;
     }
     
     .social-icons {
@@ -1317,6 +1337,16 @@ img {
 }
 
 @media (max-width: 576px) {
+    /* Ajustements pour les très petits écrans */
+    .header {
+        padding-left: 25px;
+        padding-right: 25px;
+    }
+    
+    .search-container {
+        max-width: 70%;
+    }
+    
     .video-grid {
         grid-template-columns: 1fr;
         gap: 15px;
@@ -1579,6 +1609,7 @@ i.icon-x,
 .live-page {
     width: 100%;
     margin-bottom: 40px;
+    padding-top: 5px;
 }
 
 .live-container {
@@ -1761,6 +1792,7 @@ i.icon-x,
 .category-page {
     width: 100%;
     margin-bottom: 40px;
+    padding-top: 5px;
 }
 
 .category-videos {
@@ -1828,6 +1860,7 @@ i.icon-x,
 /* Page de recherche */
 .search-page {
     margin-bottom: 40px;
+    padding-top: 5px;
 }
 
 .search-form-container {