From 1280af1af86682f85db47296308a892d74adb66e Mon Sep 17 00:00:00 2001
From: Alpinux <cedric.abonnel@gmail.com>
Date: Wed, 6 May 2026 10:59:54 +0200
Subject: [PATCH] style: responsive mobile/tablette/PC (2 breakpoints)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tablette ≤ 768px : nav scrollable horizontalement, date masquée,
  stat boxes 2 par ligne, padding réduit, footer réorganisé.
Mobile ≤ 480px : colonnes taille/hits/origin masquées, stat boxes
  empilées, grille dossiers 2 colonnes, header compact,
  preview-meta en colonne, chips resize plus petits.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/static/app.css | 84 ++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 78 insertions(+), 6 deletions(-)

diff --git a/app/static/app.css b/app/static/app.css
index 25761b8..76c61e3 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -251,15 +251,87 @@ main { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem 3rem; display: fl
 .resize-list--err li { color: #b91c1c; }
 .resize-list--err code { background: #fef2f2; border-radius: 3px; padding: .1rem .3rem; }
 
-/* ── Responsive ───────────────────────────────────────────────────── */
-@media (max-width: 700px) {
-  .header-inner { flex-wrap: wrap; }
-  .header-nav { order: 3; width: 100%; }
+/* ── Responsive — tablette (≤ 768 px) ───────────────────────────── */
+@media (max-width: 768px) {
+  /* Header */
+  .header-inner { flex-wrap: wrap; gap: .6rem; padding: .65rem 1rem; }
+  .brand        { flex: 1; }
+  .header-user  { order: 2; margin-left: 0; }
+  .header-nav   { order: 3; width: 100%; overflow-x: auto; padding-bottom: .15rem;
+                  scrollbar-width: none; }
+  .header-nav::-webkit-scrollbar { display: none; }
   .header-search { order: 4; width: 100%; }
   .header-search input { width: 100%; }
-  .header-user { order: 2; }
+
+  /* Layout */
+  main { padding: 0 1rem 2rem; margin: 1.2rem auto; gap: 1rem; }
+  .card { padding: 1.2rem 1.4rem; }
+
+  /* Tableau : cacher la date */
   .col-date { display: none; }
-  .stat-box .value { font-size: 1.4rem; }
+
+  /* Stat boxes : 2 par ligne */
+  .stat-box { min-width: calc(50% - .5rem); }
+  .stat-box .value { font-size: 1.5rem; }
+
+  /* Aperçu */
+  .preview-meta { gap: .8rem; font-size: .82rem; }
+
+  /* Footer */
+  .footer-inner { flex-wrap: wrap; gap: .7rem; padding: .9rem 1rem; }
+  .footer-nav   { flex-wrap: wrap; gap: .7rem 1.2rem; }
+  .footer-version { margin-left: 0; }
+}
+
+/* ── Responsive — mobile (≤ 480 px) ─────────────────────────────── */
+@media (max-width: 480px) {
+  /* Header */
+  .header-inner { gap: .5rem; padding: .6rem .75rem; }
+  .brand-sub    { display: none; }
+  .header-nav a { padding: .35rem .5rem; font-size: .82rem; }
+
+  /* Layout */
+  main { padding: 0 .75rem 1.5rem; margin: .75rem auto; gap: .75rem; }
+  .card { padding: .9rem 1rem; border-radius: 8px; }
+
+  /* Tableau : ne garder que icône + nom + actions */
+  .col-size, .col-hits, .col-origin { display: none; }
+  .file-table th, .file-table td    { padding: .4rem .5rem; }
+  .thumb-sm { width: 32px; height: 32px; }
+  .type-badge { display: none; }
+
+  /* Stat boxes : empilées */
+  .stat-row { flex-direction: column; }
+  .stat-box { min-width: 0; }
+  .stat-box .value { font-size: 1.35rem; }
+
+  /* Grille dossiers */
+  .folder-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
+  .folder-card { padding: .9rem 1rem; }
+  .folder-card .icon { font-size: 1.4rem; }
+
+  /* Aperçu */
+  .preview-header { gap: .6rem; }
+  .preview-header h1 { font-size: .95rem; }
+  .preview-meta { flex-direction: column; align-items: flex-start; gap: .4rem; }
+  .preview-meta .btn { margin-left: 0 !important; width: 100%; justify-content: center; }
+  .preview-image-wrap { padding: .75rem; }
+
+  /* Resize */
+  .chip span { padding: .25rem .55rem; font-size: .8rem; }
+  .resize-custom-row { gap: .35rem; }
+  .custom-dim { width: 4.5rem; }
+
+  /* Corbeille */
+  .trash-header { flex-direction: column; align-items: flex-start; }
+
+  /* Recherche */
+  .search-row { flex-direction: column; }
+  .content-match { max-width: 100%; }
+
+  /* Footer */
+  .footer-inner { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .8rem .75rem; }
+  .footer-nav   { gap: .5rem .9rem; }
 }
 
 /* ── Footer ─────────────────────────────────────────────────────────── */