Desktop : grille uniforme + header sans debordement
- Grille editoriale : suppression du grand format 7n+1 — 3 colonnes uniformes, style editorial conserve - Header : la nav (8 entrees) + connexion depassaient le conteneur 1240px meme a 1440 (bouton Se connecter coupe, masque par overflow-x clip) — nav resserree (13px, nowrap), badge Groupe KA masque sous 1400px, burger des 1200px, header-inner en pleine largeur pour s aligner aux bords de l ecran sur les grands moniteurs — verifie par mesure Playwright de 1600 a 900px : plus aucun element coupe
1 changed file +15 −6
modified
frontend/src/styles.css
+15 −6
@@ -1520,17 +1520,11 @@ table.rooms tbody tr:hover td { background: var(--accent-soft); } | ||
| 1520 | 1520 | |
| 1521 | 1521 | /* ---- Grille à rythme éditorial (accueil) ---- */ |
| 1522 | 1522 | .grid.grid-edito { grid-template-columns: repeat(3, 1fr); gap: 36px 26px; align-items: start; } |
| 1523 | −.grid-edito > *:nth-child(7n+1) { grid-column: span 2; } | |
| 1524 | −.grid-edito > *:nth-child(7n+1) .card-img, | |
| 1525 | −.grid-edito > .skel:nth-child(7n+1) .sk-img { aspect-ratio: 16/9; } | |
| 1526 | −.grid-edito > *:nth-child(7n+1) .card-price { font-size: 27px; } | |
| 1527 | −.grid-edito > *:nth-child(7n+1) .card-title { font-size: 15px; } | |
| 1528 | 1523 | @media (max-width: 980px) { |
| 1529 | 1524 | .grid.grid-edito { grid-template-columns: 1fr 1fr; gap: 30px 20px; } |
| 1530 | 1525 | } |
| 1531 | 1526 | @media (max-width: 640px) { |
| 1532 | 1527 | .grid.grid-edito { grid-template-columns: 1fr; gap: 32px; } |
| 1533 | − .grid-edito > *:nth-child(7n+1) { grid-column: auto; } | |
| 1534 | 1528 | } |
| 1535 | 1529 | @media (prefers-reduced-motion: no-preference) { |
| 1536 | 1530 | .grid-edito > * { animation: rise 0.5s var(--ease-out) backwards; } |
@@ -1641,3 +1635,18 @@ table.rooms tbody tr:hover td { background: var(--accent-soft); } | ||
| 1641 | 1635 | .kaa-btn.kaa-btn { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 14px; } |
| 1642 | 1636 | .kaa-panel.kaa-panel:not(.kaa-full) { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); } |
| 1643 | 1637 | } |
| 1638 | + | |
| 1639 | +/* ---- Header : jamais de débordement à droite ---- | |
| 1640 | + La nav (8 entrées) + connexion dépassaient le conteneur même à 1440px | |
| 1641 | + (masqué par overflow-x: clip). Resserrage, badge Groupe KA masqué quand | |
| 1642 | + l'espace manque, burger sous 1200px. ---- */ | |
| 1643 | +.nav a { white-space: nowrap; padding: 8px 11px; font-size: 13px; } | |
| 1644 | +@media (max-width: 1400px) { .header .gk-badge { display: none; } } | |
| 1645 | +@media (max-width: 1200px) { | |
| 1646 | + .nav { display: none; } | |
| 1647 | + .menu-btn { display: flex; } | |
| 1648 | +} | |
| 1649 | + | |
| 1650 | +/* header pleine largeur : la nav dense s'aligne aux bords de l'écran au lieu | |
| 1651 | + de déborder du conteneur 1240px sur les grands écrans */ | |
| 1652 | +.header .header-inner { max-width: none; } | |
| 1644 | 1653 | |