Exercice 8 : Layout avec Sidebar 📐

🎯 Objectif

Créer un layout de page complet avec sidebar qui se réorganise selon la taille de l'écran en utilisant CSS Grid avec une approche Mobile First.

📄 Le HTML (à créer)

Créez le fichier index.html avec le contenu suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 8 - Layout Grid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="logo">POKÉDEX</div>
            <p class="header-subtitle">HEADER</p>
        </header>

        <main class="main">
            <h2>MAIN</h2>
            <p>
                Contenu principal de la page. Cette zone contient les informations les plus importantes.
            </p>
            <p>
                Sur mobile, cette zone apparaît en premier pour que l'utilisateur voie d'abord le contenu essentiel.
            </p>
            <p>
                Sur desktop, la sidebar s'affiche à gauche et le main prend le reste de l'espace disponible.
            </p>
        </main>

        <aside class="sidebar">
            <h2>SIDEBAR</h2>
            <p>Zone latérale pour les filtres, menus ou informations complémentaires.</p>
        </aside>

        <footer class="footer">
            <p>FOOTER - Attrapez-les tous !</p>
        </footer>
    </div>
</body>
</html>

🎨 Le CSS (à créer)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.header {
    background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.logo {
    font-size: 2.5rem;
    font-weight: 900;
    color: #ffcb05;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.header-subtitle {
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

.main {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-height: 400px;
}

.main h2 {
    color: #cc0000;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.main p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
}

.sidebar {
    background: #ffcb05;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-height: 300px;
}

.sidebar h2 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.sidebar p {
    color: #333;
    line-height: 1.6;
}

.footer {
    background: #3d7dca;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.footer p {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

📋 Comportement attendu

📱 Sur mobile (par défaut, < 768px)

┌─────────────────┐
│     HEADER      │
├─────────────────┤
│                 │
│      MAIN       │
│                 │
├─────────────────┤
│                 │
│     SIDEBAR     │
│                 │
├─────────────────┤
│     FOOTER      │
└─────────────────┘

Une seule colonne
Main AVANT sidebar
Tout en vertical

🖥️ Sur ordinateur (≥ 768px)

┌─────────────────────────────┐
│          HEADER             │
├──────────┬──────────────────┤
│          │                  │
│ SIDEBAR  │      MAIN        │
│          │                  │
├──────────┴──────────────────┤
│          FOOTER             │
└─────────────────────────────┘

Deux colonnes : sidebar (240px) + main (reste de l'espace)
Sidebar à gauche, Main à droite
Header et Footer sur toute la largeur

🔧 Technologies à utiliser

CSS Grid avec display: grid
Media Query avec approche Mobile First (min-width)