Desktop : grille uniforme + header sans debordement
- Grille editoriale : suppression du grand format 7n+1 (annonces de tailles inegales jugees etranges) — 3 colonnes uniformes, le style editorial (fiches sans boite, image dominante, stagger) est conserve - Header : nav sans retour de ligne (Court terme tenait sur 2 lignes), burger des 960px, badge Groupe KA masque sous 1140px (debordement de 6px du bouton Connexion autour de 1100px) — verifie par mesure Playwright de 1440 a 900px : plus aucun element coupe a droite
1 changed file +12 −6
modified
frontend/src/styles.css
+12 −6
@@ -2594,17 +2594,11 @@ html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */ | ||
| 2594 | 2594 | |
| 2595 | 2595 | /* ---- Grille à rythme éditorial (accueil) : grand / petits / panoramique ---- */ |
| 2596 | 2596 | .grid.grid-edito { grid-template-columns: repeat(3, 1fr); gap: 36px 26px; } |
| 2597 | −.grid-edito > *:nth-child(7n+1) { grid-column: span 2; } | |
| 2598 | −.grid-edito > *:nth-child(7n+1) .card-img, | |
| 2599 | −.grid-edito > .skel:nth-child(7n+1) .sk-img { aspect-ratio: 16/9; } | |
| 2600 | −.grid-edito > *:nth-child(7n+1) .card-price { font-size: 27px; } | |
| 2601 | −.grid-edito > *:nth-child(7n+1) .card-title { font-size: 15px; } | |
| 2602 | 2597 | @media (max-width: 980px) { |
| 2603 | 2598 | .grid.grid-edito { grid-template-columns: 1fr 1fr; gap: 30px 20px; } |
| 2604 | 2599 | } |
| 2605 | 2600 | @media (max-width: 640px) { |
| 2606 | 2601 | .grid.grid-edito { grid-template-columns: 1fr; gap: 32px; } |
| 2607 | − .grid-edito > *:nth-child(7n+1) { grid-column: auto; } | |
| 2608 | 2602 | } |
| 2609 | 2603 | @media (prefers-reduced-motion: no-preference) { |
| 2610 | 2604 | .grid-edito > * { animation: rise 0.5s var(--ease-out) backwards; } |
@@ -2705,3 +2699,15 @@ html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */ | ||
| 2705 | 2699 | |
| 2706 | 2700 | /* les fiches s'alignent en haut : pas d'étirement vide sous les petites */ |
| 2707 | 2701 | .grid.grid-edito { align-items: start; } |
| 2702 | + | |
| 2703 | +/* ---- Header : jamais de débordement à droite ---- | |
| 2704 | + La nav ne casse pas de ligne ; sous 960px on passe au menu burger | |
| 2705 | + (le contenu complet ne tient plus), le badge Groupe KA disparaît déjà | |
| 2706 | + sous 1080px (règle plus haut). ---- */ | |
| 2707 | +.nav a { white-space: nowrap; } | |
| 2708 | +@media (max-width: 960px) { | |
| 2709 | + .nav { display: none; } | |
| 2710 | + .menu-btn { display: flex; } | |
| 2711 | +} | |
| 2712 | +/* le badge Groupe KA lâche prise un peu plus tôt (débordement de ~6px à 1100) */ | |
| 2713 | +@media (max-width: 1140px) { .header .gk-badge { display: none; } } | |
| 2708 | 2714 | |