feat: refactorer l'interface Picwall avec design moderne masonry layout, contrôles de taille interactifs (slider + boutons +/-), overlay gradient avec titre et description tronquée, animations hover avec scale et opacity, variables CSS personnalisables (--picwall-item-size), support complet thème clair/sombre, et amélioration responsive avec breakpoints optimisés pour mobile

shaarli-pro/css/style.css

@@ -2383,6 +2383,194 @@ select:focus {
     color: var(--text-secondary);
 }
 
+/* ===== Picwall (Image Wall) ===== */
+.picwall-controls {
+    margin: 1.5rem 0 1.75rem;
+    display: flex;
+    justify-content: center;
+}
+
+.picwall-controls-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.85rem 1.25rem;
+    border-radius: 999px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-sm);
+}
+
+.picwall-controls-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-weight: 600;
+    color: var(--text-main);
+    font-size: 0.9rem;
+}
+
+.picwall-size-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.picwall-size-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--bg-body);
+    color: var(--text-main);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.picwall-size-btn:hover {
+    background: var(--bg-card-hover);
+    transform: translateY(-1px);
+}
+
+.picwall-size-slider {
+    width: 160px;
+    accent-color: var(--primary);
+}
+
+.picwall-size-value {
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    min-width: 60px;
+    text-align: right;
+}
+
+.picwall-container {
+    --picwall-item-size: 220px;
+    column-width: var(--picwall-item-size);
+    column-gap: 18px;
+    width: 100%;
+    padding-bottom: 2rem;
+}
+
+.picwall-pictureframe {
+    display: inline-block;
+    width: 100%;
+    margin: 0 0 18px;
+    position: relative;
+    border-radius: 18px;
+    overflow: hidden;
+    background: var(--bg-card);
+    box-shadow: var(--shadow-md);
+    break-inside: avoid;
+    isolation: isolate;
+}
+
+.picwall-image-link img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+    transform: scale(1);
+    transition: transform 0.35s ease;
+}
+
+.picwall-pictureframe:hover .picwall-image-link img,
+.picwall-pictureframe:focus-within .picwall-image-link img {
+    transform: scale(1.04);
+}
+
+.picwall-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(8, 15, 30, 0.05) 0%, rgba(8, 15, 30, 0.65) 60%, rgba(8, 15, 30, 0.85) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    display: flex;
+    align-items: flex-end;
+}
+
+.picwall-pictureframe:hover .picwall-overlay,
+.picwall-pictureframe:focus-within .picwall-overlay {
+    opacity: 1;
+}
+
+.picwall-link {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    padding: 1.1rem 1.2rem 1.25rem;
+    color: #ffffff;
+    width: 100%;
+}
+
+.picwall-title {
+    font-size: 1.05rem;
+    font-weight: 600;
+    line-height: 1.3;
+    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
+}
+
+.picwall-description {
+    font-size: 0.85rem;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.85);
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+[data-theme="dark"] .picwall-controls-inner {
+    background: #111827;
+    border-color: #1f2937;
+}
+
+[data-theme="dark"] .picwall-size-btn {
+    background: #0f172a;
+    border-color: #1f2937;
+}
+
+[data-theme="dark"] .picwall-pictureframe {
+    background: #0f172a;
+    box-shadow: 0 18px 26px rgba(4, 12, 26, 0.45);
+}
+
+@media (max-width: 900px) {
+    .picwall-controls-inner {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .picwall-size-slider {
+        width: 140px;
+    }
+}
+
+@media (max-width: 600px) {
+    .picwall-controls {
+        margin: 1rem 0 1.25rem;
+    }
+
+    .picwall-controls-inner {
+        width: 100%;
+        border-radius: 16px;
+    }
+
+    .picwall-container {
+        column-gap: 14px;
+    }
+
+    .picwall-pictureframe {
+        border-radius: 14px;
+        margin-bottom: 14px;
+    }
+}
+
 /* ===== Bulk Bookmark Creation ===== */
 .page-add .col-md-6.col-md-offset-3 {
     width: 100%;

shaarli-pro/picwall.html

@@ -57,10 +57,9 @@
                     <div class="picwall-overlay">
                         <a class="picwall-link" href="{$value.real_url}" target="_blank" rel="noopener noreferrer">
                             <span class="picwall-title">{$value.title}</span>
-                            <span class="picwall-url">
+                            {if="$value.description"}
-                                <i class="mdi mdi-open-in-new"></i>
+                            <span class="picwall-description">{$value.description}</span>
-                                {$value.real_url}
+                            {/if}
-                            </span>
                         </a>
                     </div>