diff --git a/css/styles.css b/css/styles.css index 7ea19b5..f29473c 100644 --- a/css/styles.css +++ b/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 {