handle licence in video page

css/video-page.css

@@ -239,6 +239,51 @@
     white-space: pre-line;
 }
 
+/* Licence de la vidéo */
+.video-licence {
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid #eee;
+}
+
+.licence-title {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    color: #333;
+}
+
+.licence-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.licence-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    transition: opacity 0.2s;
+}
+
+.licence-link:hover {
+    opacity: 0.8;
+}
+
+.licence-logo {
+    height: 31px;
+    width: auto;
+}
+
+.licence-label {
+    font-size: 0.875rem;
+    color: #555;
+}
+
 .video-tags {
     display: flex;
     flex-wrap: wrap;
@@ -741,17 +786,17 @@
 
 @media (max-width: 576px) {
     .video-page {
-        gap: 20px;
-        margin-top: 10px;
+        grid-template-columns: 1fr;
+        padding: 0;
     }
     
     .video-player-container {
-        margin-bottom: 0;
+        margin-bottom: 1rem;
     }
     
     .video-content, 
     .video-suggestions {
-        width: 100%;
+        padding: 1rem;
     }
     
     .video-title {
@@ -759,17 +804,17 @@
     }
     
     .video-actions {
-        justify-content: space-around;
+        justify-content: flex-start;
     }
     
     .action-button {
-        font-size: 0.75rem;
-        min-width: 60px;
-        padding: 0.5rem 0.25rem;
+        padding: 0.4rem 0.6rem;
+        min-width: auto;
+        gap: 0.3rem;
     }
     
     .video-views, .video-date {
-        font-size: 0.8125rem;
+        font-size: 0.75rem;
     }
     
     .comment {
@@ -777,22 +822,30 @@
     }
     
     .comment-avatar {
-        margin-bottom: 10px;
+        margin-bottom: 0.75rem;
     }
     
     .suggested-video {
-        display: flex;
         flex-direction: column;
     }
     
     .suggested-video-thumbnail {
         width: 100%;
-        height: auto;
-        padding-top: 56.25%; /* Maintien du ratio 16:9 */
     }
     
     .suggested-video-title {
-        font-size: 0.875rem;
+        font-size: 0.9375rem;
+    }
+    
+    /* Licence responsive */
+    .licence-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    
+    .licence-logo {
+        height: 28px;
     }
 }