/* Reset simple */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    padding: 20px;
}

h2 {
    margin: 20px 0;
}

/* 4.1 Grille de cartes responsive */
/* 'repeat(auto-fit, minmax(200px, 1fr))' permet d'avoir 
   des colonnes automatiques qui s'adaptent à la largeur de l'écran 
   tout en garantissant au moins 200px chacune. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.card {
    background-color: #e0fbfc;
    border: 1px solid #98c1d9;
    padding: 40px;
    text-align: center;
    border-radius: 8px;
}

/* 4.2 Layout complet avec Grid Areas */
/* 'grid-template-areas' permet de définir visuellement la structure. */
.layout {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    gap: 10px;
    grid-template-columns: 200px 1fr; /* Sidebar de 200px et le reste pour Main */
    grid-template-rows: auto 400px auto; /* Hauteur des lignes */
}

.header { grid-area: header; background-color: #ff99c8; padding: 20px; text-align: center; }
.sidebar { grid-area: sidebar; background-color: #fcf6bd; padding: 20px; }
.main-content { grid-area: main; background-color: #d0f4de; padding: 20px; }
.footer { grid-area: footer; background-color: #a9def9; padding: 20px; text-align: center; }