improve video page

css/video-page.css

@@ -2,12 +2,14 @@
 .video-page {
     display: grid;
     grid-template-columns: 1fr 350px;
+    grid-template-rows: auto auto;
     gap: 30px;
     margin-top: 20px;
 }
 
 .video-player-container {
     grid-column: 1 / -1;
+    grid-row: 1;
 }
 
 .video-player {
@@ -30,6 +32,10 @@
 
 .video-content {
     grid-column: 1;
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 }
 
 .video-primary-info {
@@ -57,13 +63,22 @@
 
 .video-metadata {
     display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
 }
 
 .video-views, .video-date {
     font-size: 0.875rem;
     color: #666;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.video-views i, .video-date i {
+    font-size: 0.9375rem;
+    color: #555;
 }
 
 .video-actions {
@@ -165,6 +180,7 @@
 
 /* Commentaires */
 .comments-section {
+    grid-column: 1;
     background-color: #fff;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -294,6 +310,8 @@
 /* Vidéos suggérées */
 .video-suggestions {
     grid-column: 2;
+    grid-row: 2;
+    align-self: start;
 }
 
 .suggestion-list {