* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #eef; padding: 20px;}
h2 { margin: 20px 0; border-bottom: 2px solid #ccc; padding-bottom: 5px; }

/* --- 4.1 Grille de cartes responsive (Grid) --- */
.grid-cards {
    display: grid;
    /* auto-fit permet de passer à la ligne automatiquement sans aucune media query */
    /* La largeur min est de 150px, et ça prend 1 fraction sinon */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}
.grid-cards .card {
    background: #fff;
    padding: 30px 20px;
    border: 1px solid #bdc3c7;
    text-align: center;
    border-radius: 4px;
    
}

/* --- 4.2 Layout complet avec Grid Areas (Grid) --- */
.page-layout {
    display: grid;
    min-height: 400px;
    /* Deux colonnes : une de 250px (sidebar) et le reste (main) */
    grid-template-columns: 250px 1fr;
    /* Trois lignes : header de 60px, centre auto, et footer de 50px */
    grid-template-rows: 60px 1fr 50px;
    
    /* On positionne nos zones créées via grid-area */
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    gap: 10px;
}

.header { grid-area: header; background: #2c3e50; color: white; padding: 20px; text-align: center; }
.sidebar { grid-area: sidebar; background: #34495e; color: white; padding: 20px; }
.main { grid-area: main; background: #ecf0f1; padding: 20px; }
.footer { grid-area: footer; background: #2c3e50; color: white; padding: 15px; text-align: center; }