Filtres : bulle de recherche « Ville, quartier ou code postal » compacte (42 px, centrée, max 440 px — pleine largeur conservée dans la feuille mobile, 16 px anti-zoom iOS) ; README — captures d'écran refaites sur la prod avec la nouvelle identité visuelle (9 écrans web + mobile)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
10 changed files +6 −3
modified
docs/screenshots/accueil-mobile.png
+0 −0
Binary file not shown.
modified
docs/screenshots/accueil.png
+0 −0
Binary file not shown.
modified
docs/screenshots/annonces.jpg
+0 −0
Binary file not shown.
modified
docs/screenshots/carte.jpg
+0 −0
Binary file not shown.
modified
docs/screenshots/fiche-logement.jpg
+0 −0
Binary file not shown.
modified
docs/screenshots/sources.png
+0 −0
Binary file not shown.
modified
docs/screenshots/stats.png
+0 −0
Binary file not shown.
modified
docs/screenshots/ville-quebec.jpg
+0 −0
Binary file not shown.
modified
docs/screenshots/villes.jpg
+0 −0
Binary file not shown.
modified
frontend/src/styles.css
+6 −3
@@ -189,9 +189,10 @@ h1 .hl, h2 .hl { color: var(--orange); } | ||
| 189 | 189 | /* — rangée principale — */ |
| 190 | 190 | .f-primary { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; } |
| 191 | 191 | .f-search { |
| 192 | − flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 9px; | |
| 192 | + flex: 1 1 220px; min-width: 0; max-width: 440px; align-self: center; | |
| 193 | + display: flex; align-items: center; gap: 8px; | |
| 193 | 194 | border: 1px solid transparent; border-radius: var(--r-pill); background: var(--grey); |
| 194 | − padding: 0 18px; min-height: 52px; color: var(--ink-2); | |
| 195 | + padding: 0 15px; min-height: 42px; color: var(--ink-2); | |
| 195 | 196 | transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; |
| 196 | 197 | } |
| 197 | 198 | .f-search:focus-within { |
@@ -200,7 +201,7 @@ h1 .hl, h2 .hl { color: var(--orange); } | ||
| 200 | 201 | } |
| 201 | 202 | .f-search input { |
| 202 | 203 | border: none; background: none; outline: none; flex: 1; min-width: 0; |
| 203 | − font-size: 15px; color: var(--ink); font-family: inherit; | |
| 204 | + font-size: 14px; color: var(--ink); font-family: inherit; | |
| 204 | 205 | } |
| 205 | 206 | .f-clear { |
| 206 | 207 | border: none; background: var(--line); color: var(--ink-2); border-radius: 50%; |
@@ -589,6 +590,8 @@ h1 .hl, h2 .hl { color: var(--orange); } | ||
| 589 | 590 | /* La barre de filtres devient une feuille coulissante (bottom sheet) */ |
| 590 | 591 | .filterbar { display: none; } |
| 591 | 592 | .filterbar.open .f-primary { flex-direction: column; } |
| 593 | + .filterbar.open .f-search { align-self: stretch; max-width: none; min-height: 46px; } | |
| 594 | + .filterbar.open .f-search input { font-size: 16px; } /* anti-zoom iOS */ | |
| 592 | 595 | .filterbar.open .f-ctl select { max-width: none; width: 100%; } |
| 593 | 596 | .filterbar.open .f-more { display: none; } |
| 594 | 597 | .filterbar.open .f-adv { margin-top: 4px; } |
| 595 | 598 | |