fix: change short alignment

css/styles.css

@@ -1115,6 +1115,46 @@ img {
     transform: scale(1.2);
 }
 
+/* Shorts specific styling */
+.short-card {
+    width: 180px;
+}
+
+.short-thumbnail {
+    aspect-ratio: 9/16;
+    height: 320px;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.short-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+/* Ajustements pour mobile */
+@media (max-width: 768px) {
+    .short-card {
+        width: 150px;
+    }
+    
+    .short-thumbnail {
+        height: 267px; /* Maintient le ratio 9:16 */
+    }
+}
+
+@media (max-width: 480px) {
+    .short-card {
+        width: 130px;
+    }
+    
+    .short-thumbnail {
+        height: 231px; /* Maintient le ratio 9:16 */
+    }
+}
+
 /* View More Button */
 .view-more {
     display: block;

index.php

@@ -271,14 +271,34 @@ setSecurityHeaders();
                         foreach ($shorts as $video):
                     ?>
                     <div class="carousel-item">
-                        <article class="video-card" data-video-id="<?php echo $video['id']; ?>">
+                        <article class="video-card short-card" data-video-id="<?php echo $video['id']; ?>">
-                            <div class="video-thumbnail">
+                            <div class="video-thumbnail short-thumbnail">
-                                <img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
+                                <img src="<?php echo $video['thumbnail']; ?>" alt="Miniature de la vidéo: <?php echo htmlspecialchars($video['title']); ?>">
-                                <div class="video-play-icon">
+                                <div class="video-play-icon" aria-hidden="true">
                                     <i class="fas fa-play-circle"></i>
                                 </div>
+                                <div class="video-duration" aria-label="Durée: <?php echo formatDuration($video['duration']); ?>">
+                                    <?php echo formatDuration($video['duration']); ?>
+                                </div>
                             </div>
-                        </div>
+                            <div class="video-info">
+                                <h3 class="video-title"><?php echo htmlspecialchars($video['title']); ?></h3>
+                                <div class="video-channel">
+                                    <?php if (strpos($video['channelAvatar'], 'default-avatar.png') !== false || empty($video['channelAvatar'])): ?>
+                                        <div class="channel-avatar-placeholder">
+                                            <i class="fas fa-user-circle"></i>
+                                        </div>
+                                    <?php else: ?>
+                                        <img src="<?php echo $video['channelAvatar']; ?>" alt="<?php echo $video['channel']; ?>" class="channel-avatar">
+                                    <?php endif; ?>
+                                    <span class="channel-name"><?php echo $video['channel']; ?></span>
+                                </div>
+                                <div class="video-metadata">
+                                    <span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
+                                    <span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
+                                </div>
+                            </div>
+                        </article>
                     </div>
                     <?php
                         endforeach;