diff --git a/css/styles.css b/css/styles.css index 9d5c805..40b116f 100644 --- a/css/styles.css +++ b/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;