/* --- 1. BASE (MOBILE FIRST) --- */
/* Ces styles s'appliquent à TOUS les écrans par défaut */
body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    line-height: 1.5;
    background-color: #f4f4f4;
}
.page-container {
    display: grid;
    gap: 10px;
    padding: 10px;
    /* Sur mobile : 1 seule colonne qui prend toute la place */
    grid-template-columns: 1fr; 
    /* Les zones s'empilent simplement */
    grid-template-areas: 
        "header"
        "nav"
        "main"
        "sidebar"
        "footer";
}
/* --- ETAPE CRUCIALE : Assigner les zones --- */
/* Sans cela, grid-template-areas ne fonctionne pas ! */
/* On en profite pour ajouter de la couleur aux zones */
.header  { grid-area: header; background: #2c3e50; color: white; }
.nav     { grid-area: nav; background: #34495e; }
.main    { grid-area: main; background: #ffffff; }
.sidebar { grid-area: sidebar; background: #95a5a6; color: white; }
.footer  { grid-area: footer; background: #2c3e50; color: white; }
.header, .nav, .main, .sidebar, .footer {
    padding: 20px;
    border-radius: 5px;
}
/* Navigation verticale sur mobile pour être facile à toucher */
.nav {
    display: flex;
    flex-direction: column; /* Les liens les uns sous les autres */
    text-align: center;
}
.nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* --- 2. TABLETTE (dès 600px) --- */
@media screen and (min-width: 600px) {
    .page-container {
        /* On passe à 2 colonnes : Contenu flexible | Sidebar fixe (200px) */
        grid-template-columns: 200px 1fr;
        
        /* Le header et la nav prennent toute la largeur (span 2) */
        /* Le main et la sidebar sont côte à côte */
        grid-template-areas: 
            "header header"
            "nav    nav"
            "sidebar main"
            "footer footer";
    }
    /* La nav passe à l'horizontale */
    .nav {
        flex-direction: row;
        justify-content: space-around;
    }
    .nav a {
        border-bottom: none;
    }
}
/* --- 3. BUREAU (dès 1024px) --- */
@media screen and (min-width: 1024px) {
    .page-container {
        max-width: 1200px; /* On limite la largeur maximale pour ne pas trop étirer */
        margin: 0 auto; /* On centre la page */
        
        /* On élargit la sidebar : Contenu | Sidebar (300px) */
        grid-template-columns: 1fr 300px;
        
        /* La structure reste la même que tablette (nav horizontale), mais centrée */
        grid-template-areas: 
            "header header"
            "nav    nav"
            "main   sidebar"
            "footer footer";
    }
    /* On peut aligner le menu différemment sur grand écran */
    .nav {
        justify-content: flex-start; /* Aligné à gauche */
    }   
    .nav a {
        padding: 10px 20px; /* Plus d'espace latéral */
        margin-right: 10px;
    }
}