Spaces:

Mousco
/

anycoder-f13f4aa5

Running

File size: 28,628 Bytes

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Première D Côte d'Ivoire - Cours & Exercices</title>

  <!-- Importation des icônes (FontAwesome via CDN) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    /* --- VARIABLES & RESET --- */
    :root {
      --primary-color: #009739; /* Vert Côte d'Ivoire */
      --secondary-color: #FF7722; /* Orange Côte d'Ivoire */
      --accent-color: #2c3e50;
      --bg-color: #f4f7f6;
      --sidebar-bg: #ffffff;
      --text-color: #333;
      --text-light: #666;
      --border-color: #e0e0e0;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      --radius: 8px;
      --max-width: 1200px;
    }

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

    body {
      font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      line-height: 1.6;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden; /* Le scroll sera géré dans Main */
    }

    /* --- HEADER --- */
    header {
      background: linear-gradient(135deg, var(--primary-color), #007a2e);
      color: white;
      padding: 0.8rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 100;
    }

    .logo-area {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 1.2rem;
    }

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

    .anycoder-link {
      font-size: 0.85rem;
      background: rgba(255, 255, 255, 0.2);
      padding: 5px 12px;
      border-radius: 20px;
      text-decoration: none;
      color: white;
      transition: background 0.3s;
    }

    .anycoder-link:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    /* --- LAYOUT PRINCIPAL --- */
    .app-container {
      display: flex;
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    /* --- SIDEBAR (Navigation) --- */
    .sidebar {
      width: 280px;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      transition: transform 0.3s ease;
    }

    /* Scrollbar fine pour la sidebar */
    .sidebar::-webkit-scrollbar {
      width: 6px;
    }
    .sidebar::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 3px;
    }

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

    .subject-item {
      border-bottom: 1px solid #f0f0f0;
    }

    .subject-header {
      padding: 1rem 1.5rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: var(--accent-color);
      transition: background 0.2s;
    }

    .subject-header:hover {
      background-color: #f9f9f9;
    }

    .subject-header i.icon {
      margin-right: 10px;
      width: 20px;
      text-align: center;
      color: var(--primary-color);
    }

    .subject-header .arrow {
      font-size: 0.8rem;
      transition: transform 0.3s;
    }

    .subject-item.active .subject-header {
      background-color: #e8f5e9;
      color: var(--primary-color);
    }

    .subject-item.active .arrow {
      transform: rotate(90deg);
    }

    /* Sous-menu Chapitres */
    .chapter-list {
      list-style: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
      background-color: #fafafa;
    }

    .subject-item.active .chapter-list {
      max-height: 1000px; /* Augmenté pour accueillir plus de chapitres */
      transition: max-height 0.5s ease-in;
      overflow-y: auto;
    }

    .chapter-item {
      padding: 0.8rem 1.5rem 0.8rem 3rem;
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--text-light);
      border-left: 3px solid transparent;
      transition: all 0.2s;
    }

    .chapter-item:hover {
      color: var(--primary-color);
      background-color: #f0f0f0;
    }

    .chapter-item.active-chapter {
      border-left-color: var(--secondary-color);
      background-color: #fff;
      color: var(--accent-color);
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    }

    /* --- MAIN CONTENT --- */
    .main-content {
      flex: 1;
      padding: 2rem;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    .content-wrapper {
      max-width: 900px;
      margin: 0 auto;
      background: white;
      padding: 3rem;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      min-height: 80vh;
    }

    /* --- TYPOGRAPHIE DU COURS --- */
    h1.course-title {
      color: var(--primary-color);
      margin-bottom: 0.5rem;
      font-size: 2rem;
    }

    .course-meta {
      color: #888;
      font-size: 0.9rem;
      margin-bottom: 2rem;
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .course-meta span {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    h2 {
      margin-top: 2rem;
      margin-bottom: 1rem;
      color: var(--accent-color);
      border-bottom: 2px solid #f0f0f0;
      padding-bottom: 0.5rem;
    }

    p {
      margin-bottom: 1rem;
      text-align: justify;
    }

    ul, ol {
      margin-left: 1.5rem;
      margin-bottom: 1rem;
    }

    li {
      margin-bottom: 0.5rem;
    }

    /* --- EXEMPLES & DEFINITIONS --- */
    .box {
      padding: 1.2rem;
      border-radius: var(--radius);
      margin: 1.5rem 0;
      border-left: 4px solid;
    }

    .box.definition {
      background-color: #e3f2fd;
      border-color: #2196f3;
    }

    .box.example {
      background-color: #e8f5e9;
      border-color: var(--primary-color);
    }

    .box.important {
      background-color: #fff3e0;
      border-color: var(--secondary-color);
    }

    .box-title {
      font-weight: bold;
      display: block;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      font-size: 0.85rem;
      letter-spacing: 0.5px;
    }

    .definition .box-title { color: #1565c0; }
    .example .box-title { color: #2e7d32; }
    .important .box-title { color: #ef6c00; }

    /* --- MATHS STYLE --- */
    .math {
      font-family: 'Times New Roman', Times, serif;
      font-style: italic;
      background: #f5f5f5;
      padding: 0 4px;
    }

    /* --- EXERCICES --- */
    .exercise-section {
      margin-top: 3rem;
      border-top: 1px solid var(--border-color);
      padding-top: 2rem;
    }

    .exercise-card {
      background: #fafafa;
      border: 1px solid #eee;
      padding: 1.5rem;
      border-radius: var(--radius);
      margin-bottom: 1.5rem;
    }

    .exercise-question {
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .solution-container {
      margin-top: 1rem;
      padding: 1rem;
      background: #fff;
      border-left: 3px solid var(--secondary-color);
      display: none; /* Caché par défaut */
    }

    .solution-container.visible {
      display: block;
      animation: fadeIn 0.5s;
    }

    .btn {
      display: inline-block;
      padding: 0.6rem 1.2rem;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: background 0.2s;
    }

    .btn:hover {
      background-color: #007a2e;
    }

    .btn-outline {
      background: transparent;
      border: 1px solid var(--primary-color);
      color: var(--primary-color);
    }

    .btn-outline:hover {
      background: #e8f5e9;
    }

    /* --- MOBILE MENU BUTTON --- */
    .mobile-toggle {
      display: none;
      background: none;
      border: none;
      color: white;
      font-size: 1.5rem;
      cursor: pointer;
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 768px) {
      .mobile-toggle {
        display: block;
      }

      .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 200;
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        width: 80%;
      }

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

      .main-content {
        padding: 1rem;
      }

      .content-wrapper {
        padding: 1.5rem;
      }

      h1.course-title {
        font-size: 1.5rem;
      }
    }

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

    /* Utility */
    .hidden { display: none; }
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 0.75rem;
      background: #eee;
      color: #555;
    }
  </style>
</head>

<body>

  <!-- HEADER -->
  <header>
    <div class="logo-area">
      <button class="mobile-toggle" onclick="toggleSidebar()">
        <i class="fas fa-bars"></i>
      </button>
      <i class="fas fa-graduation-cap"></i>
      <span>1ère D Côte d'Ivoire</span>
    </div>
    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
      Built with anycoder <i class="fas fa-external-link-alt" style="font-size: 0.7em;"></i>
    </a>
  </header>

  <div class="app-container">
    <!-- SIDEBAR NAVIGATION -->
    <nav class="sidebar" id="sidebar">
      <ul class="subject-list" id="subjectList">
        <!-- La liste des matières sera générée par JS -->
      </ul>
    </nav>

    <!-- MAIN CONTENT AREA -->
    <main class="main-content" onclick="closeSidebarOnMobile(event)">
      <div class="content-wrapper" id="contentArea">
        <!-- Le contenu du cours sera injecté ici -->
        <div style="text-align: center; margin-top: 50px; color: #888;">
          <i class="fas fa-book-open" style="font-size: 3rem; margin-bottom: 1rem;"></i>
          <h2>Bienvenue élève de Première D</h2>
          <p>Sélectionnez une matière et un chapitre dans le menu pour commencer votre révision.</p>
        </div>
      </div>
    </main>
  </div>

  <script>
    // --- DONNÉES DU PROGRAMME (Structure JSON ÉTENDUE) ---
    const curriculum = [
      {
        id: "maths",
        name: "Mathématiques",
        icon: "fa-calculator",
        chapters: [
          {
            id: "m1",
            title: "Second Degré : Polynômes",
            content: `
              <h1 class="course-title">Le Second Degré</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 4 Heures</span>
                <span><i class="fas fa-signal"></i> Difficulté: Moyenne</span>
              </div>
              <h2>1. Définition et Forme Canonique</h2>
              <p>Une fonction polynôme de degré 2 est une fonction définie sur ℝ par <span class="math">f(x) = ax² + bx + c</span> où <span class="math">a</span>, <span class="math">b</span>, <span class="math">c</span> sont des réels avec <span class="math">a ≠ 0</span>.</p>
              <div class="box definition">
                <span class="box-title">Définition : Forme Canonique</span>
                Toute fonction polynôme de degré 2 peut s'écrire sous la forme :<br>
                <span class="math">f(x) = a(x - α)² + β</span><br>
                Où <span class="math">α = -b/2a</span> et <span class="math">β = f(α)</span>.
              </div>
              <h2>2. Équation du Second Degré</h2>
              <p>Pour résoudre <span class="math">ax² + bx + c = 0</span>, on calcule le discriminant <span class="math">Δ = b² - 4ac</span>.</p>
              <ul>
                <li>Si <span class="math">Δ > 0</span> : deux solutions distinctes <span class="math">x₁</span> et <span class="math">x₂</span>.</li>
                <li>Si <span class="math">Δ = 0</span> : une solution double <span class="math">x₀ = -b/2a</span>.</li>
                <li>Si <span class="math">Δ < 0</span> : pas de solution réelle.</li>
              </ul>
            `,
            exercises: [
              {
                question: "Résoudre l'équation : x² - 4x + 4 = 0",
                solution: "Calcul du discriminant : Δ = (-4)² - 4(1)(4) = 16 - 16 = 0.<br>Comme Δ = 0, il y a une racine double : x₀ = -(-4)/(2*1) = 2.<br>L'ensemble des solutions est S = {2}."
              },
              {
                question: "Factoriser 3x² + 7x + 2",
                solution: "Posons P(x) = 3x² + 7x + 2.<br>Δ = 7² - 4(3)(2) = 49 - 24 = 25.<br>Les racines sont :<br>x₁ = (-7 - 5)/6 = -2<br>x₂ = (-7 + 5)/6 = -1/3<br>La forme factorisée est : a(x - x₁)(x - x₂) = 3(x + 2)(x + 1/3) = (x + 2)(3x + 1)."
              }
            ]
          },
          {
            id: "m2",
            title: "Géométrie : Barycentre",
            content: `
              <h1 class="course-title">Barycentre</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 3 Heures</span>
                <span><i class="fas fa-shapes"></i> Géométrie Plane</span>
              </div>
              <p>Le barycentre est une généralisation de la notion de milieu ou de centre de gravité.</p>
              <h2>1. Définition</h2>
              <div class="box definition">
                <span class="box-title">Définition</span>
                Soient A et B deux points, α et β deux réels tels que α + β ≠ 0.<br>
                Il existe un unique point G tel que : <span class="math">αGA⃗ + βGB⃗ = 0⃗</span>.<br>
                Ce point G est appelé le barycentre des points pondérés (A, α) et (B, β).
              </div>
              <h2>2. Propriétés</h2>
              <ul>
                <li><strong>Homogénéité :</strong> On ne change pas le barycentre en multipliant tous les coefficients par un même nombre non nul.</li>
                <li><strong>Associativité :</strong> On peut remplacer un groupe de points par leur barycentre affecté de la somme de leurs coefficients.</li>
              </ul>
            `,
            exercises: [
              {
                question: "Construire le barycentre G de (A, 2), (B, -1) sachant que AB = 6cm.",
                solution: "On a 2GA⃗ - 1GB⃗ = 0⃗.<br>Donc 2GA⃗ - (GA⃗ + AB⃗) = 0⃗ => GA⃗ - AB⃗ = 0⃗ => GA⃗ = AB⃗.<br>Le point G est le point tel que ABGA est un parallélogramme.<br>Donc G est le point tel que AG = 6cm et G est sur la demi-droite [AB)."
              }
            ]
          },
          {
            id: "m3",
            title: "Suites Numériques",
            content: `
              <h1 class="course-title">Suites Numériques</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 5 Heures</span>
                <span><i class="fas fa-sort-numeric-down"></i> Analyse</span>
              </div>
              <p>Une suite numérique est une fonction définie sur l'ensemble des entiers naturels ℕ (ou une partie de ℕ).</p>
              <h2>1. Suite Arithmétique</h2>
              <div class="box definition">
                <span class="box-title">Définition</span>
                Une suite (uₙ) est arithmétique s'il existe un réel r tel que pour tout n, <span class="math">uₙ₊₁ = uₙ + r</span>.<br>
                r est appelé la raison de la suite.
              </div>
              <p>Terme général : <span class="math">uₙ = u₀ + n × r</span>.</p>
              
              <h2>2. Suite Géométrique</h2>
              <div class="box definition">
                <span class="box-title">Définition</span>
                Une suite (uₙ) est géométrique s'il existe un réel q tel que pour tout n, <span class="math">uₙ₊₁ = uₙ × q</span>.<br>
                q est appelé la raison de la suite.
              </div>
              <p>Terme général : <span class="math">uₙ = u₀ × qⁿ</span>.</p>
            `,
            exercises: [
              {
                question: "Soit (uₙ) une suite arithmétique de premier terme u₀ = 5 et de raison r = 3. Calculer u₁₀.",
                solution: "On utilise la formule uₙ = u₀ + n×r.<br>u₁₀ = 5 + 10×3 = 5 + 30 = 35."
              },
              {
                question: "Calculer la somme des 10 premiers termes de la suite géométrique de premier terme 1 et de raison 2.",
                solution: "Formule de la somme : S = u₀ × (1 - qⁿ)/(1 - q) si q ≠ 1.<br>Ici u₀=1, q=2, n=10.<br>S = 1 × (1 - 2¹⁰)/(1 - 2) = (1 - 1024)/(-1) = 1023."
              }
            ]
          },
          {
            id: "m4",
            title: "Dérivation",
            content: `
              <h1 class="course-title">Dérivation</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 6 Heures</span>
                <span><i class="fas fa-chart-line"></i> Analyse</span>
              </div>
              <p>La dérivation permet d'étudier les variations d'une fonction.</p>
              <h2>1. Nombre Dérivé</h2>
              <p>Soit f une fonction définie sur un intervalle I et a ∈ I. On dit que f est dérivable en a si le taux d'accroissement admet une limite finie quand h tend vers 0.</p>
              <div class="box example">
                <span class="box-title">Interprétation Graphique</span>
                Le nombre dérivé f'(a) est le coefficient directeur de la tangente à la courbe Cf au point d'abscisse a.
              </div>
              <h2>2. Formules Usuelles</h2>
              <p>Si f(x) = x² alors f'(x) = 2x.</p>
              <p>Si f(x) = 1/x alors f'(x) = -1/x².</p>
              <p>Si f(x) = √x alors f'(x) = 1/(2√x).</p>
            `,
            exercises: [
              {
                question: "Déterminer la dérivée de f(x) = 3x² + 5x + 2.",
                solution: "On utilise la linéarité de la dérivée.<br>f'(x) = 3(2x) + 5(1) + 0 = 6x + 5."
              },
              {
                question: "Soit f(x) = x³. Calculer f'(2).",
                solution: "La dérivée de x³ est 3x².<br>Donc f'(x) = 3x².<br>f'(2) = 3 × 2² = 12."
              }
            ]
          }
        ]
      },
      {
        id: "physique",
        name: "Physique-Chimie",
        icon: "fa-atom",
        chapters: [
          {
            id: "p1",
            title: "Forces et Mouvements",
            content: `
              <h1 class="course-title">Forces et Mouvements</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 5 Heures</span>
                <span><i class="fas fa-running"></i> Mécanique</span>
              </div>
              <h2>1. Référentiel et Relativité</h2>
              <p>Le mouvement d'un objet est relatif : il dépend de l'observateur (référentiel). Les référentiels courants sont :</p>
              <ul>
                <li>Référentiel terrestre (pour les mouvements sur Terre).</li>
                <li>Référentiel géocentrique (satellites, Lune).</li>
                <li>Référentiel héliocentrique (planètes du système solaire).</li>
              </ul>
              <h2>2. Les Forces</h2>
              <div class="box definition">
                <span class="box-title">Définition</span>
                Une force est une action mécanique capable de modifier le mouvement d'un corps ou de le déformer. Elle est modélisée par un vecteur caractérisé par : direction, sens, intensité (en Newton N) et point d'application.
              </div>
            `,
            exercises: [
              {
                question: "Un skieur descend une pente enneigée à vitesse constante. Que peut-on dire des forces ?",
                solution: "Puisque la vitesse est constante, le mouvement est rectiligne uniforme par rapport au sol.<br>D'après le principe d'inertie, les forces (Poids, Réaction, Frottements) se compensent : ΣF⃗ = 0⃗."
              }
            ]
          },
          {
            id: "p2",
            title: "Les Spectres Lumineux",
            content: `
              <h1 class="course-title">Les Spectres Lumineux</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 3 Heures</span>
                <span><i class="fas fa-lightbulb"></i> Optique</span>
              </div>
              <p>L'étude des spectres permet d'identifier la composition chimique d'une source de lumière.</p>
              <h2>1. Spectre d'émission</h2>
              <ul>
                <li><strong>Spectre continu :</strong> Arc-en-ciel (lampe à incandescence). Présence de toutes les couleurs.</li>
                <li><strong>Spectre de raies :</strong> Discontinu. Obtenu avec un gaz à basse pression excité (ex: néon). Chaque élément chimique possède sa propre signature.</li>
              </ul>
            `,
            exercises: [
              {
                question: "Comment peut-on savoir que le Soleil contient de l'hydrogène ?",
                solution: "En analysant le spectre de la lumière solaire. On observe des raies d'absorption noires qui correspondent exactement aux raies d'émission caractéristiques de l'hydrogène."
              }
            ]
          },
          {
            id: "p3",
            title: "Chimie Organique",
            content: `
              <h1 class="course-title">Introduction à la Chimie Organique</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 4 Heures</span>
                <span><i class="fas fa-flask"></i> Chimie</span>
              </div>
              <p>La chimie organique étudie les composés du carbone (à quelques exceptions près).</p>
              <h2>1. Les Hydrocarbures</h2>
              <p>Ils ne contiennent que du carbone (C) et de l'hydrogène (H).</p>
              <ul>
                <li><strong>Alcanes :</strong> Liaisons simples C-C (ex: Méthane CH₄, Éthane C₂H₆).</li>
                <li><strong>Alcènes :</strong> Possèdent une double liaison C=C (ex: Éthène C₂H₄).</li>
              </ul>
              <h2>2. Les Groupes Caractéristiques</h2>
              <p>Ce sont des atomes ou groupes d'atomes qui donnent des propriétés spécifiques à la molécule.</p>
              <ul>
                <li>Alcools (groupe -OH)</li>
                <li>Acides carboxyliques (groupe -COOH)</li>
              </ul>
            `,
            exercises: [
              {
                question: "Donner la formule brute du butane (alcane à 4 carbones).",
                solution: "La formule générale d'un alcane est CₙH₂ₙ₊₂.<br>Pour n=4 : C₄H₂₍₄₎₊₂ = C₄H₁₀."
              }
            ]
          }
        ]
      },
      {
        id: "svt",
        name: "SVT",
        icon: "fa-dna",
        chapters: [
          {
            id: "s1",
            title: "Reproduction Humaine",
            content: `
              <h1 class="course-title">Reproduction Humaine</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 4 Heures</span>
                <span><i class="fas fa-female"></i> Biologie</span>
              </div>
              <h2>1. Le fonctionnement de l'appareil reproducteur féminin</h2>
              <p>À partir de la puberté, les ovaires libèrent un ovule environ tous les 28 jours : c'est <strong>l'ovulation</strong>.</p>
              <div class="box definition">
                <span class="box-title">Cycle Utérin</span>
                La muqueuse utérine s'épaissit pour accueillir un éventuel embryon. S'il n'y a pas de fécondation, cette muqueuse est éliminée : ce sont les règles.
              </div>
            `,
            exercises: [
              {
                question: "Où se produit généralement la fécondation chez la femme ?",
                solution: "La fécondation a généralement lieu dans la trompe de Fallope (ou oviducte), et non dans l'utérus."
              }
            ]
          },
          {
            id: "s2",
            title: "Structure du Globe Terrestre",
            content: `
              <h1 class="course-title">La Structure du Globe</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 5 Heures</span>
                <span><i class="fas fa-globe-africa"></i> Géologie</span>
              </div>
              <p>La Terre est constituée de plusieurs couches concentriques.</p>
              <h2>1. Les Enveloppes</h2>
              <ul>
                <li><strong>La Croûte :</strong> C'est la couche superficielle. Elle est discontinue (croûte continentale et océanique). La limite entre croûte et manteau est le <strong>Moho</strong>.</li>
                <li><strong>Le Manteau :</strong> Très épais (environ 2900 km), constitué de péridotites.</li>
                <li><strong>Le Noyau :</strong> Divisé en noyau externe (liquide) et noyau interne (solide), composé essentiellement de fer et de nickel.</li>
              </ul>
            `,
            exercises: [
              {
                question: "Qu'est-ce que le Moho ?",
                solution: "Le Moho (discontinuité de Mohorovičić) est la limite de surface qui sépare la croûte terrestre du manteau supérieur."
              }
            ]
          }
        ]
      },
      {
        id: "francais",
        name: "Français",
        icon: "fa-feather-alt",
        chapters: [
          {
            id: "f1",
            title: "L'Argumentation",
            content: `
              <h1 class="course-title">Les Genres de l'Argumentation</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 2 Heures</span>
                <span><i class="fas fa-pen-nib"></i> Littérature</span>
              </div>
              <p>Argumenter, c'est tenter de convaincre ou de persuader un destinataire d'une thèse (une opinion).</p>
              <h2>1. Convaincre vs Persuader</h2>
              <ul>
                <li><strong>Convaincre</strong> : Faire appel à la raison (logique, faits, exemples).</li>
                <li><strong>Persuader</strong> : Faire appel aux sentiments (émotions, pathos).</li>
              </ul>
            `,
            exercises: [
              {
                question: "Dans un discours politique qui joue sur la peur de l'auditoire, quel mode d'argumentation est utilisé ?",
                solution: "C'est la persuasion. En jouant sur la peur (une émotion), l'orateur cherche à toucher la sensibilité de l'auditoire plutôt que sa raison pure."
              }
            ]
          },
          {
            id: "f2",
            title: "Le Théâtre",
            content: `
              <h1 class="course-title">Le Texte de Théâtre</h1>
              <div class="course-meta">
                <span><i class="far fa-clock"></i> 3 Heures</span>
                <span><i class="fas fa-masks-theater"></i> Littérature</span>
              </div>
              <p>Le théâtre est un art de la représentation. Le texte est destiné à être joué par des comédiens.</p>
              <h2>1. Les Conventions</h2>
              <ul>
                <li><strong>Les Didascalies :</strong> Indications scéniques (en italique généralement) données par l'auteur sur les décors, les jeux d'acteurs, les tons.</li>
                <li><strong>Le Dialogue :</strong> Les personnages parlent les uns aux autres.</li>
                <li><strong>Le Monologue / l'Aparté :</strong> Le personnage parle seul (ou pensant être seul) pour révéler ses pensées au public.</li>
              </ul>
            `,
            exercises: [
              {
                question: "Quelle est la différence entre un monologue et un aparté ?",
                solution: "Dans un monologue, le personnage est seul sur scène et parle haut fort pour exprimer ses pensées.<br>Dans un aparté, le personneau est en présence d'autres personnages, mais il dit une phrase pour le public, censée n'être pas entendue par les autres personnages."
              }
            ]
          }
        ]
      },
      {