amélioration de l'affichage global de la page d'administration sur mobile

admin/index.php

@@ -60,14 +60,17 @@ $stories = Stories::getAll();
             </form>
         </div>
     </nav>
-    
+
     <main class="admin-main">
         <h1>Gestion des romans</h1>
         
         <div class="stories-list">
             <?php foreach ($stories as $story): ?>
             <div class="story-item">
-                <img src="<?= htmlspecialchars('../' . $story['cover']) ?>" alt="" class="story-cover">
+                <img src="<?= htmlspecialchars('../' . $story['cover']) ?>" 
+                    alt="Couverture de <?= htmlspecialchars($story['title']) ?>" 
+                    class="story-cover"
+                    loading="lazy">
                 <div class="story-info">
                     <h2><?= htmlspecialchars($story['title']) ?></h2>
                     <p>

assets/css/components.css

@@ -21,6 +21,7 @@
     object-fit: cover;
     border-radius: var(--radius-sm);
     border: 1px solid var(--border-color);
+    flex-shrink: 0;
 }
 
 .current-cover {
@@ -386,12 +387,41 @@
 
 /* Media queries */
 @media (max-width: 768px) {
-    .story-cover {
-        width: 100%;
-        height: 200px;
-        max-width: none;
+    .story-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-md);
     }
     
+    .story-cover {
+        width: 100%;
+        height: 160px;
+    }
+    
+    .story-info {
+        width: 100%;
+    }
+    
+    .story-actions {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        margin-top: var(--spacing-md);
+    }
+    
+    .story-actions .button {
+        flex: 1;
+        text-align: center;
+        margin: 0 var(--spacing-xs);
+    }
+    
+    .story-actions .button:first-child {
+        margin-left: 0;
+    }
+    
+    .story-actions .button:last-child {
+        margin-right: 0;
+    }    
     .current-cover {
         max-width: 100%;
         height: auto;
@@ -423,4 +453,34 @@
         width: 100%;
         justify-content: flex-end;
     }
+}
+
+/* Adaptations pour très petits écrans */
+@media (max-width: 480px) {
+    .story-actions {
+        flex-direction: column;
+        gap: var(--spacing-xs);
+    }
+    
+    .story-actions .button {
+        width: 100%;
+        margin: 0;
+        text-align: center;
+    }
+    
+    .story-item {
+        padding: var(--spacing-md);
+    }
+    
+    .story-cover {
+        height: 140px;
+    }
+    
+    .story-info h2 {
+        font-size: 1.3rem;
+    }
+    
+    .story-info p {
+        font-size: 0.9rem;
+    }
 }

version.txt

@@ -1 +1 @@
-1.2.0
+1.2.1