fix logo width on small devices

css/styles.css

@@ -600,19 +600,28 @@ img {
     justify-content: flex-start;
     align-items: center;
     margin-bottom: 20px;
+    flex-wrap: nowrap;
 }
 
 .section-logo {
     margin-right: 15px;
+    flex-shrink: 0;
+    min-width: 60px;
 }
 
 .section-logo img {
     height: 80px;
+    width: auto;
+    min-width: 80px;
+    object-fit: contain;
 }
 
 .section-title {
     font-size: 24px;
     font-weight: 600;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
 }
 
 /* Video Sections */
@@ -975,6 +984,117 @@ img {
     .info-image {
         max-width: 80%;
     }
+    
+    .header {
+        padding-left: 25px;
+        padding-right: 25px;
+    }
+    
+    .search-container {
+        max-width: 70%;
+    }
+    
+    .video-grid {
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+    
+    .section-title {
+        font-size: 20px;
+    }
+    
+    /* Ajustement du header de section pour mobile */
+    .section-header {
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+    
+    .section-logo {
+        margin-right: 10px;
+        margin-bottom: 0;
+    }
+    
+    .section-logo img {
+        height: 50px;
+        min-width: 50px;
+    }
+    
+    /* Pour les cas très extrêmes où le texte est excessivement long */
+    @media (max-width: 360px) {
+        .search-page .section-header,
+        .category-page .section-header {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        
+        .search-page .section-logo,
+        .category-page .section-logo {
+            margin-bottom: 10px;
+        }
+    }
+    
+    .hero-logo {
+        font-size: 36px;
+    }
+    
+    .play-button {
+        width: 60px;
+        height: 60px;
+    }
+    
+    .play-button i {
+        font-size: 24px;
+    }
+    
+    .video-title {
+        font-size: 16px;
+    }
+    
+    .cc-licenses {
+        gap: 15px;
+    }
+    
+    .cc-license {
+        flex: 1 0 100%;
+        padding: 15px;
+    }
+    
+    .cc-license h4 {
+        font-size: 15px;
+    }
+    
+    .cc-license p {
+        font-size: 13px;
+    }
+    
+    .info-section {
+        padding: 20px 15px;
+    }
+    
+    .footer-social {
+        gap: 10px;
+    }
+    
+    .footer-social a {
+        width: 35px;
+        height: 35px;
+        min-width: 35px;
+        min-height: 35px;
+        font-size: 18px;
+        margin: 0 5px;
+    }
+    
+    .mobile-social-icons {
+        gap: 10px;
+    }
+    
+    .mobile-social-icons a {
+        width: 35px;
+        height: 35px;
+        min-width: 35px;
+        min-height: 35px;
+        font-size: 18px;
+    }
 }
 
 /* Footer */
@@ -1450,90 +1570,6 @@ 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;
-    }
-    
-    .section-title {
-        font-size: 20px;
-    }
-    
-    .hero-logo {
-        font-size: 36px;
-    }
-    
-    .play-button {
-        width: 60px;
-        height: 60px;
-    }
-    
-    .play-button i {
-        font-size: 24px;
-    }
-    
-    .video-title {
-        font-size: 16px;
-    }
-    
-    .cc-licenses {
-        gap: 15px;
-    }
-    
-    .cc-license {
-        flex: 1 0 100%;
-        padding: 15px;
-    }
-    
-    .cc-license h4 {
-        font-size: 15px;
-    }
-    
-    .cc-license p {
-        font-size: 13px;
-    }
-    
-    .info-section {
-        padding: 20px 15px;
-    }
-    
-    .footer-social {
-        gap: 10px;
-    }
-    
-    .footer-social a {
-        width: 35px;
-        height: 35px;
-        min-width: 35px;
-        min-height: 35px;
-        font-size: 18px;
-        margin: 0 5px;
-    }
-    
-    .mobile-social-icons {
-        gap: 10px;
-    }
-    
-    .mobile-social-icons a {
-        width: 35px;
-        height: 35px;
-        min-width: 35px;
-        min-height: 35px;
-        font-size: 18px;
-    }
-}
-
 @media (max-width: 400px) {
     .cc-license {
         padding: 12px;