collection

src/pages/collection.astro

@@ -137,12 +137,15 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
     .user-flex-row {
         display: flex;
         flex-wrap: wrap;
-        gap: 20px; /* Gap simple comme demandé */
-        justify-content: flex-center;
+        gap: 45px; /* Gap simple comme demandé */
+        justify-content: flex-start;
+        margin-bottom: 100px;
     }
 
     .entry-meta {
         font-family: "Inter", sans-serif;
+        position: relative;
+        top: 5px;
         font-size: 0.8rem;
         color: #94a3b8;
         text-transform: uppercase;
@@ -153,26 +156,72 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
     .card-link {
         text-decoration: none;
         transition: transform 0.3s ease;
+
+        /* 1. On définit la taille "réelle" que prendra la carte dans le flux */
+        /* Si ta Card fait 300px de large, on met 150px ici */
+        width: 150px;
+        height: 220px;
+
+        /* 2. On autorise le contenu à déborder visuellement de la boîte logicielle */
+        overflow: visible;
     }
 
     .card-link:hover {
         transform: translateY(-5px);
     }
 
+    .card-scaler {
+        /* 3. On réduit l'échelle */
+        transform: scale(0.5);
+
+        /* 4. On fixe l'origine en haut à gauche pour que la carte
+               se cale parfaitement dans le coin du .card-link */
+        transform-origin: top left;
+
+        /* 5. On s'assure que la carte garde sa taille originale en interne
+               pour ne pas briser le layout interne de <Card /> */
+        width: 300px;
+        height: 440px;
+    }
+
     .separator {
         margin-top: 50px;
         border: 0;
         border-top: 1px solid rgba(0, 0, 0, 0.05);
     }
 
-    /* Adaptabilité mobile [cite: 96] */
+    /* Adaptabilité mobile */
     @media (max-width: 480px) {
         .user-flex-row {
-            gap: 15px;
-            justify-content: center;
+            display: flex; /*  */
+            flex-wrap: wrap; /*  */
+            gap: 10px; /* Espacement horizontal entre les colonnes */
+            justify-content: center; /* [cite: 36] */
+            padding: 0;
         }
+
+        .card-link {
+            /* On force la largeur à un tiers de l'écran moins le gap */
+            width: calc(45%);
+            /* On réduit la hauteur de la boîte pour que le separator remonte */
+            height: 190px;
+            text-decoration: none; /* [cite: 33] */
+            display: block;
+            overflow: visible;
+        }
+
         .card-scaler {
-            transform: scale(0.9);
+            transform: scale(0.4) !important; /* On force le scale à 0.3 */
+            transform-origin: top left; /* Indispensable pour coller au bord haut-gauche */
+            width: 300px; /* Taille originale [cite: 23] */
+            height: 440px; /* Taille originale [cite: 24] */
+        }
+
+        .entry-meta {
+            /* On masque ou on réduit drastiquement la méta pour gagner de la place */
+            font-size: 0.5rem; /* [cite: 32] */
+            margin-top: -5px;
+            white-space: nowrap;
         }
     }
 </style>