Spaces:

Mousco
/

anycoder-9223fa79

Running

File size: 35,080 Bytes

7e83dc5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cours 1ère D - Côte d'Ivoire</title>
    <!-- Importation d'une police moderne -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Importation des icônes FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            /* Palette de couleurs inspirée de l'éducation et de la modernité */
            --primary-color: #0056D2; /* Bleu académique */
            --secondary-color: #F77F00; /* Orange dynamique */
            --accent-color: #FCBF49; /* Jaune doux */
            --bg-light: #F8F9FA;
            --bg-white: #FFFFFF;
            --text-main: #2B2D42;
            --text-light: #8D99AE;
            --border-color: #E9ECEF;
            --sidebar-width: 280px;
            --header-height: 70px;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }

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

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-main);
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* --- HEADER --- */
        header {
            height: var(--header-height);
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 100;
            box-shadow: var(--shadow-sm);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            font-size: 1.25rem;
            color: var(--primary-color);
        }

        .brand i {
            font-size: 1.5rem;
            color: var(--secondary-color);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .anycoder-link {
            font-size: 0.85rem;
            color: var(--text-light);
            text-decoration: none;
            transition: var(--transition);
            font-weight: 500;
        }

        .anycoder-link:hover {
            color: var(--primary-color);
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--text-main);
            cursor: pointer;
        }

        /* --- LAYOUT PRINCIPAL --- */
        .app-container {
            display: flex;
            margin-top: var(--header-height);
            height: calc(100vh - var(--header-height));
            width: 100%;
        }

        /* --- SIDEBAR (MATIÈRES) --- */
        aside {
            width: var(--sidebar-width);
            background-color: var(--bg-white);
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease-in-out;
        }

        .search-container {
            padding: 1.5rem;
            position: sticky;
            top: 0;
            background: var(--bg-white);
            z-index: 10;
        }

        .search-box {
            position: relative;
        }

        .search-box input {
            width: 100%;
            padding: 10px 15px 10px 40px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-family: inherit;
            font-size: 0.9rem;
            background-color: var(--bg-light);
            transition: var(--transition);
        }

        .search-box input:focus {
            outline: none;
            border-color: var(--primary-color);
            background-color: var(--bg-white);
            box-shadow: 0 0 0 3px rgba(0, 86, 210, 0.1);
        }

        .search-box i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
        }

        .subject-list {
            list-style: none;
            padding: 0 1rem 2rem 1rem;
        }

        .subject-item {
            margin-bottom: 0.5rem;
        }

        .subject-btn {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border: none;
            background: none;
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-main);
            transition: var(--transition);
        }

        .subject-btn:hover {
            background-color: var(--bg-light);
            color: var(--primary-color);
        }

        .subject-btn.active {
            background-color: rgba(0, 86, 210, 0.1);
            color: var(--primary-color);
            font-weight: 600;
        }

        .subject-icon {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-light);
            border-radius: 6px;
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .subject-btn.active .subject-icon {
            background-color: var(--primary-color);
            color: white;
        }

        /* --- MAIN CONTENT --- */
        main {
            flex: 1;
            background-color: var(--bg-light);
            overflow-y: auto;
            padding: 2rem;
            position: relative;
        }

        /* État vide */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--text-light);
            text-align: center;
        }

        .empty-state i {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            color: #DEE2E6;
        }

        .empty-state h2 {
            font-size: 1.5rem;
            color: var(--text-main);
            margin-bottom: 0.5rem;
        }

        /* Affichage des Chapitres */
        .content-header {
            margin-bottom: 2rem;
        }

        .breadcrumb {
            font-size: 0.85rem;
            color: var(--text-light);
            margin-bottom: 0.5rem;
        }

        .content-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .chapters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .chapter-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .chapter-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary-color);
        }

        .chapter-meta {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--secondary-color);
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .chapter-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }

        .chapter-desc {
            font-size: 0.9rem;
            color: var(--text-light);
            line-height: 1.5;
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }

        .chapter-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--primary-color);
            font-weight: 500;
        }

        /* Affichage du Cours (Lecture) */
        .lesson-view {
            background: var(--bg-white);
            border-radius: 12px;
            padding: 3rem;
            box-shadow: var(--shadow-sm);
            max-width: 900px;
            margin: 0 auto;
            animation: fadeIn 0.4s ease;
        }

        .lesson-header {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 2rem;
            margin-bottom: 2rem;
        }

        .lesson-title {
            font-size: 2.25rem;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 1rem;
        }

        .lesson-tags {
            display: flex;
            gap: 10px;
        }

        .tag {
            padding: 4px 12px;
            background-color: var(--bg-light);
            border-radius: 20px;
            font-size: 0.8rem;
            color: var(--text-light);
            font-weight: 500;
        }

        .lesson-content {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #374151;
        }

        .lesson-content h3 {
            font-size: 1.5rem;
            color: var(--text-main);
            margin-top: 2.5rem;
            margin-bottom: 1rem;
        }

        .lesson-content p {
            margin-bottom: 1.5rem;
        }

        .lesson-content ul {
            margin-bottom: 1.5rem;
            padding-left: 1.5rem;
        }

        .lesson-content li {
            margin-bottom: 0.5rem;
        }

        .lesson-content blockquote {
            border-left: 4px solid var(--secondary-color);
            padding-left: 1.5rem;
            font-style: italic;
            color: #555;
            background: #FFF8F0;
            padding: 1.5rem;
            border-radius: 0 8px 8px 0;
            margin: 2rem 0;
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background-color: var(--bg-light);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-main);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            margin-bottom: 2rem;
        }

        .back-btn:hover {
            background-color: #E9ECEF;
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 768px) {
            header {
                padding: 0 1rem;
            }

            .mobile-menu-btn {
                display: block;
            }

            aside {
                position: fixed;
                left: 0;
                top: var(--header-height);
                height: calc(100vh - var(--header-height));
                transform: translateX(-100%);
                z-index: 90;
                box-shadow: var(--shadow-md);
            }

            aside.open {
                transform: translateX(0);
            }

            main {
                padding: 1.5rem;
            }

            .lesson-view {
                padding: 1.5rem;
            }

            .lesson-title {
                font-size: 1.75rem;
            }

            .content-title {
                font-size: 1.5rem;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- FOOTER --- */
        .app-footer {
            margin-top: auto;
            padding-top: 3rem;
            text-align: center;
            font-size: 0.85rem;
            color: var(--text-light);
            border-top: 1px solid var(--border-color);
        }
    </style>
</head>
<body>

    <!-- Header -->
    <header>
        <div class="brand">
            <button class="mobile-menu-btn" id="menuToggle" aria-label="Menu">
                <i class="fa-solid fa-bars"></i>
            </button>
            <i class="fa-solid fa-graduation-cap"></i>
            <span>Première D CI</span>
        </div>
        <div class="header-actions">
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
                Built with anycoder
            </a>
            <div style="width: 35px; height: 35px; background: #e0e0e0; border-radius: 50%; overflow: hidden;">
                <img src="https://picsum.photos/seed/student/100/100" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover;">
            </div>
        </div>
    </header>

    <!-- App Container -->
    <div class="app-container">
        
        <!-- Sidebar Navigation -->
        <aside id="sidebar">
            <div class="search-container">
                <div class="search-box">
                    <i class="fa-solid fa-search"></i>
                    <input type="text" id="searchInput" placeholder="Rechercher un cours...">
                </div>
            </div>
            <ul class="subject-list" id="subjectList">
                <!-- Les matières seront injectées ici par JS -->
            </ul>
        </aside>

        <!-- Main Content Area -->
        <main id="mainContent">
            <!-- Le contenu sera injecté ici par JS -->
        </main>

    </div>

    <script>
        // --- DONNÉES PÉDAGOGIQUES (Simulation du programme 1ère D CI) ---
        const curriculumData = {
            mathematiques: {
                title: "Mathématiques",
                icon: "fa-calculator",
                color: "#e74c3c",
                chapters: [
                    {
                        id: "m1",
                        title: "Généralités sur les suites numériques",
                        desc: "Définitions, suites arithmétiques et géométriques, sens de variation.",
                        content: `
                            <h2>1. Définition d'une suite</h2>
                            <p>Une suite numérique est une fonction définie sur l'ensemble des entiers naturels <strong>N</strong> (ou une partie de N) à valeurs dans <strong>R</strong>.</p>
                            <p>On note généralement <em>(u<sub>n</sub>)</em> ou <em>u<sub>n</sub></em> le terme de rang <em>n</em>.</p>
                            
                            <h2>2. Modes de génération d'une suite</h2>
                            <ul>
                                <li><strong>Par formule explicite :</strong> u<sub>n</sub> = f(n). Exemple : u<sub>n</sub> = 2n + 1.</li>
                                <li><strong>Par récurrence :</strong> u<sub>n+1</sub> = f(u<sub>n</sub>). Exemple : u<sub>0</sub> = 1 et u<sub>n+1</sub> = 2u<sub>n</sub> + 3.</li>
                            </ul>

                            <h2>3. Suites arithmétiques</h2>
                            <p>Une suite (u<sub>n</sub>) est arithmétique s'il existe un réel <strong>r</strong> (raison) tel que pour tout n, u<sub>n+1</sub> = u<sub>n</sub> + r.</p>
                            <blockquote>Propriété : Pour tout n, u<sub>n</sub> = u<sub>0</sub> + nr. La somme des n premiers termes est S<sub>n</sub> = n(u<sub>0</sub> + u<sub>n-1</sub>)/2.</blockquote>

                            <h2>4. Suites géométriques</h2>
                            <p>Une suite (u<sub>n</sub>) est géométrique s'il existe un réel <strong>q</strong> (raison) tel que pour tout n, u<sub>n+1</sub> = q × u<sub>n</sub>.</p>
                        `
                    },
                    {
                        id: "m2",
                        title: "Étude de fonctions",
                        desc: "Limites, continuité, dérivabilité et variations des fonctions usuelles.",
                        content: `
                            <h2>1. Limites de fonctions</h2>
                            <p>Soit f une fonction définie sur un intervalle contenant a ou admettant a comme borne.</p>
                            <p>On dit que f admet une limite finie L en a si tout intervalle ouvert contenant L contient toutes les valeurs f(x) pour x assez proche de a.</p>
                            
                            <h2>2. Continuité</h2>
                            <p>Une fonction f est continue en un point a si elle admet une limite finie en a et que cette limite est égale à f(a).</p>
                            <p><strong>Théorème des valeurs intermédiaires :</strong> Si f est continue sur [a; b], alors pour tout réel k compris entre f(a) et f(b), il existe au moins un réel c dans [a; b] tel que f(c) = k.</p>

                            <h2>3. Dérivabilité</h2>
                            <p>Le nombre dérivé de f en a, noté f'(a), est le coefficient directeur de la tangente à la courbe au point d'abscisse a.</p>
                        `
                    },
                    {
                        id: "m3",
                        title: "Géométrie dans l'espace",
                        desc: "Positions relatives de droites et plans, vecteurs de l'espace, produit scalaire.",
                        content: `
                            <h2>1. Positions relatives</h2>
                            <ul>
                                <li>Droites : Parallèles, sécantes ou non coplanaires.</li>
                                <li>Plans : Parallèles ou sécants (l'intersection est une droite).</li>
                            </ul>
                            <h2>2. Vecteurs de l'espace</h2>
                            <p>Les opérations sur les vecteurs du plan s'étendent à l'espace. Repère (O, i, j, k).</p>
                        `
                    }
                ]
            },
            physique_chimie: {
                title: "Physique-Chimie",
                icon: "fa-flask",
                color: "#2ecc71",
                chapters: [
                    {
                        id: "pc1",
                        title: "Chimie organique : Extraction",
                        desc: "Principes de l'extraction, hydrodistillation et chromatographie.",
                        content: `
                            <h2>1. Les techniques d'extraction</h2>
                            <p>L'extraction consiste à séparer une substance (通常 un composé organique) d'un mélange (milieu biologique ou synthétique) en utilisant un solvant approprié.</p>
                            <p><strong>Choix du solvant :</strong> Il doit être non miscible avec le milieu initial, dissoudre efficacement la substance recherchée et être le moins toxique possible.</p>
                            
                            <h2>2. L'hydrodistillation</h2>
                            <p>Technique utilisée pour extraire les huiles essentielles de végétaux. Le mélange (eau et plante) est porté à ébullition. La vapeur d'eau entraîne les huiles, puis est refroidie dans un réfrigérant.</p>
                        `
                    },
                    {
                        id: "pc2",
                        title: "Électricité : Dipôle RC",
                        desc: "Charge et décharge d'un condensateur, énergie emmagasinée.",
                        content: `
                            <h2>1. Le condensateur</h2>
                            <p>Un condensateur est constitué de deux armatures conductrices séparées par un isolant (diélectrique). Il est caractérisé par sa capacité C en Farads (F).</p>
                            
                            <h2>2. Charge d'un condensateur</h2>
                            <p>On soumet le dipôle RC à un échelon de tension E. La tension aux bornes du condensateur u<sub>c</sub> augmente progressivement selon la loi :</p>
                            <p style="text-align:center; font-family:serif; font-size:1.2em;">u<sub>c</sub>(t) = E(1 - e<sup>-t/τ</sup>)</p>
                            <p>Où τ = RC est la constante de temps du dipôle.</p>
                        `
                    }
                ]
            },
            svt: {
                title: "SVT",
                icon: "fa-dna",
                color: "#9b59b6",
                chapters: [
                    {
                        id: "svt1",
                        title: "La digestion chez l'homme",
                        desc: "Les enzymes digestives, l'absorption intestinale et l'assimilation.",
                        content: `
                            <h2>1. Transformation des aliments</h2>
                            <p>La digestion est un processus mécanique et chimique. Les enzymes (protéines) catalysent l'hydrolyse des polymères alimentaires en monomères assimilables.</p>
                            <ul>
                                <li>Glucides → Oses (ex: Amidon → Glucose)</li>
                                <li>Protéines → Acides aminés</li>
                                <li>Lipides → Acides gras et Glycérol</li>
                            </ul>
                            <h2>2. Absorption intestinale</h2>
                            <p>Les nutriments passent de la lumière intestinale vers le sang (glucides, acides aminés) ou la lymphe (lipides) au niveau des villosités intestinales.</p>
                        `
                    },
                    {
                        id: "svt2",
                        title: "La transmission de la vie chez l'homme",
                        desc: "Le fonctionnement des appareils reproducteurs et le contrôle hormonal.",
                        content: `
                            <h2>1. L'appareil reproducteur masculin</h2>
                            <p>Les testicules produisent les spermatozoïdes et la testostérone. L'éjaculation libère des millions de spermatozoïdes.</p>
                            
                            <h2>2. L'appareil reproducteur féminin</h2>
                            <p>Les ovaires produisent les ovules et les œstrogènes/progestérone. Le cycle utérin dure environ 28 jours.</p>
                            
                            <h2>3. La fécondation</h2>
                            <p>Rencontre de l'ovule et du spermatozoïde dans la trompe (ampoule tubaire), aboutissant à la formation d'un œuf diploïde.</p>
                        `
                    }
                ]
            },
            francais: {
                title: "Français",
                icon: "fa-book-open",
                color: "#f39c12",
                chapters: [
                    {
                        id: "fr1",
                        title: "L'argumentation",
                        desc: "Convaincre, persuader et délibérer. Analyse d'essais et discours.",
                        content: `
                            <h2>1. Les buts de l'argumentation</h2>
                            <ul>
                                <li><strong>Convaincre :</strong> Faire appel à la raison (logos), utilisant des arguments rationnels.</li>
                                <li><strong>Persuader :</strong> Faire appel aux sentiments (pathos), cherchant à toucher l'émotion.</li>
                                <li><strong>Délibérer :</strong> Peser le pour et le contre pour prendre une décision.</li>
                            </ul>
                            <h2>2. Les types d'arguments</h2>
                            <p>On distingue l'argument d'autorité, l'argument par l'exemple, l'ad hominem, le causal, etc.</p>
                        `
                    },
                    {
                        id: "fr2",
                        title: "Le théâtre",
                        desc: "Le texte théâtral, la double énonciation et la représentation.",
                        content: `
                            <h2>1. Spécificités du texte de théâtre</h2>
                            <p>Le texte théâtral est destiné à être joué. Il comprend des didascalies (indications scéniques) et des répliques.</p>
                            <h2>2. La double énonciation</h2>
                            <p>Le personnage s'adresse à un autre personnage, mais le spectateur reçoit aussi le message, souvent avec une compréhension différente (ironie, double sens).</p>
                        `
                    }
                ]
            },
            histoire_geo: {
                title: "Histoire-Géo",
                icon: "fa-globe-africa",
                color: "#34495e",
                chapters: [
                    {
                        id: "hg1",
                        title: "La Première Guerre Mondiale",
                        desc: "Les causes, les grandes phases et les conséquences du conflit.",
                        content: `
                            <h2>1. Les causes de la guerre</h2>
                            <p>Un système d'alliances (Triple-Entente vs Triple-Alliance), les rivalités coloniales et nationalistes, ainsi que l'assassinat de l'archiduc François-Ferdinand à Sarajevo en 1914.</p>
                            <h2>2. Une guerre totale</h2>
                            <p>Mobilisation de toutes les ressources : économie de guerre, propagande, et implication des civils.</p>
                        `
                    },
                    {
                        id: "hg2",
                        title: "L'Afrique : défis et développement",
                        desc: "Démographie, urbanisation et enjeux économiques du continent africain.",
                        content: `
                            <h2>1. La transition démographique</h2>
                            <p>L'Afrique connaît une forte croissance démographique, entraînant une population très jeune.</p>
                            <h2>2. L'urbanisation rapide</h2>
                            <p>Les villes africaines grossissent vite, posant des défis d'infrastructures (eau, électricité) mais offrant des opportunités économiques.</p>
                        `
                    }
                ]
            },
            philosophie: {
                title: "Philosophie",
                icon: "fa-lightbulb",
                color: "#d35400",
                chapters: [
                    {
                        id: "ph1",
                        title: "La conscience",
                        desc: "La conscience de soi, l'inconscient et l'identité personnelle.",
                        content: `
                            <h2>1. Qu'est-ce que la conscience ?</h2>
                            <p>La conscience est la présence immédiate de l'esprit à lui-même. C'est le savoir réflexif que l'homme a de ses pensées et de ses actes.</p>
                            <h2>2. Conscience et Inconscient</h2>
                            <p>Freud a montré que la conscience n'est pas la totalité de la vie psychique. L'inconscient (pulsions, refoulements) influence nos comportements à notre insu.</p>
                        `
                    }
                ]
            },
            anglais: {
                title: "Anglais",
                icon: "fa-language",
                color: "#16a085",
                chapters: [
                    {
                        id: "en1",
                        title: "Communication Skills",
                        desc: "Expressing opinions, agreeing and disagreeing in debates.",
                        content: `
                            <h2>1. Useful phrases for opinions</h2>
                            <ul>
                                <li>"In my opinion..."</li>
                                <li>"I strongly believe that..."</li>
                                <li>"From my point of view..."</li>
                            </ul>
                            <h2>2. Agreeing and Disagreeing</h2>
                            <p>"I couldn't agree more" (strong agreement).<br>"I see your point, but..." (polite disagreement).</p>
                        `
                    }
                ]
            }
        };

        // --- ÉLÉMENTS DU DOM ---
        const subjectListEl = document.getElementById('subjectList');
        const mainContentEl = document.getElementById('mainContent');
        const searchInput = document.getElementById('searchInput');
        const menuToggle = document.getElementById('menuToggle');
        const sidebar = document.getElementById('sidebar');

        // --- ÉTAT DE L'APPLICATION ---
        let currentSubject = null;

        // --- FONCTIONS ---

        // 1. Initialisation
        function init() {
            renderSubjects();
            renderEmptyState();
            
            // Event Listeners
            searchInput.addEventListener('input', handleSearch);
            menuToggle.addEventListener('click', () => {
                sidebar.classList.toggle('open');
            });

            // Fermer la sidebar si on clique en dehors sur mobile
            mainContentEl.addEventListener('click', () => {
                if(window.innerWidth <= 768) {
                    sidebar.classList.remove('open');
                }
            });
        }

        // 2. Rendu de la liste des matières
        function renderSubjects(filter = "") {
            subjectListEl.innerHTML = "";
            
            Object.keys(curriculumData).forEach(key => {
                const subject = curriculumData[key];
                
                // Filtrage par recherche
                if (filter && !subject.title.toLowerCase().includes(filter.toLowerCase())) {
                    return;
                }

                const li = document.createElement('li');
                li.className = 'subject-item';
                
                const btn = document.createElement('button');
                btn.className = `subject-btn ${currentSubject === key ? 'active' : ''}`;
                btn.onclick = () => selectSubject(key);
                
                btn.innerHTML = `
                    <div class="subject-icon" style="color: ${currentSubject === key ? 'white' : subject.color}">
                        <i class="fa-solid ${subject.icon}"></i>
                    </div>
                    <span>${subject.title}</span>
                `;
                
                li.appendChild(btn);
                subjectListEl.appendChild(li);
            });
        }

        // 3. Sélection d'une matière
        function selectSubject(subjectKey) {
            currentSubject = subjectKey;
            renderSubjects(searchInput.value); // Re-render pour mettre à jour la classe active
            renderChapterList(subjectKey);
            
            // Sur mobile, fermer le menu après sélection
            if(window.innerWidth <= 768) {
                sidebar.classList.remove('open');
            }
        }

        // 4. Rendu de la liste des chapitres (Vue principale)
        function renderChapterList(subjectKey) {
            const subject = curriculumData[subjectKey];
            const chapters = subject.chapters;

            let html = `
                <div class="content-header">
                    <div class="breadcrumb">Accueil > ${subject.title}</div>
                    <h1 class="content-title">${subject.title}</h1>
                </div>
                <div class="chapters-grid">
            `;

            chapters.forEach(chapter => {
                html += `
                    <div class="chapter-card" onclick="renderLesson('${subjectKey}', '${chapter.id}')">
                        <div class="chapter-meta">Chapitre ${chapter.id.replace(/\D/g, '')}</div>
                        <h3 class="chapter-title">${chapter.title}</h3>
                        <p class="chapter-desc">${chapter.desc}</p>
                        <div class="chapter-footer">
                            <span>Voir le cours</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>
                    </div>
                `;
            });

            html += `</div>`;
            mainContentEl.innerHTML = html;
        }

        // 5. Rendu du détail d'une leçon
        window.renderLesson = function(subjectKey, chapterId) {
            const subject = curriculumData[subjectKey];
            const chapter = subject.chapters.find(c => c.id === chapterId);

            if (!chapter) return;

            const html = `
                <button class="back-btn" onclick="selectSubject('${subjectKey}')">
                    <i class="fa-solid fa-arrow-left"></i> Retour aux chapitres
                </button>
                <div class="lesson-view">
                    <div class="lesson-header">
                        <div class="lesson-tags">
                            <span class="tag">${subject.title}</span>
                            <span class="tag">1ère D</span>
                        </div>
                        <h1 class="lesson-title">${chapter.title}</h1>
                    </div>
                    <div class="lesson-content">
                        ${chapter.content}
                    </div>
                </div>
                <div class="app-footer">
                    <p>&copy; 2023-2024 Cours Première D Côte d'Ivoire</p>
                </div>
            `;
            
            mainContentEl.innerHTML = html;
            // Scroll to top
            mainContentEl.scrollTop = 0;
        };

        // 6. État vide
        function renderEmptyState() {
            mainContentEl.innerHTML = `
                <div class="empty-state">
                    <i class="fa-solid fa-book-open-reader"></i>
                    <h2>Bienvenue sur votre plateforme de cours</h2>
                    <p>Sélectionnez une matière dans le menu latéral pour accéder aux chapitres complets de la classe de Première D.</p>
                    <p style="margin-top: 10px; font-size: 0.9rem;">Programme officiel - Côte d'Ivoire</p>
                </div>
            `;
        }

        // 7. Gestion de la recherche
        function handleSearch(e) {
            const term = e.target.value;
            renderSubjects(term);
        }

        // Lancer l'application
        init();

    </script>
</body>
</html>