Zone principale de contenu
5.1 Mobile First
Base mobile + media queries tablette et desktop avec min-width.
/* Base mobile */
.container {
width: 100%;
padding: 15px;
}
.nav-menu {
display: flex;
flex-direction: column;
gap: 5px;
}
.content {
display: block;
}
.sidebar {
display: none;
}
/* Tablette */
@media (min-width: 768px) {
.nav-menu { flex-direction: row; }
.content {
display: grid;
grid-template-columns: 1fr 240px;
gap: 10px;
}
.sidebar { display: block; }
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 980px;
margin: 0 auto;
}
.content {
grid-template-columns: 2fr 1fr;
gap: 16px;
}
}