Hugging Face's logo

Spaces:
Mousco
/
anycoder-f13f4aa5
Running

App Files Community
Mousco commited on
Commit
1aca6b0
·
verified ·
1 Parent(s): 6eb0850

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +793 -823
index.html CHANGED
@@ -1,830 +1,800 @@
1
  <!DOCTYPE html>
2
  <html lang="fr">
 
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Première D Côte d'Ivoire - Cours & Exercices</title>
7
-
8
- <!-- Importation des icônes (FontAwesome via CDN) -->
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
-
11
- <style>
12
- /* --- VARIABLES & RESET --- */
13
- :root {
14
- --primary-color: #009739; /* Vert Côte d'Ivoire */
15
- --secondary-color: #FF7722; /* Orange Côte d'Ivoire */
16
- --accent-color: #2c3e50;
17
- --bg-color: #f4f7f6;
18
- --sidebar-bg: #ffffff;
19
- --text-color: #333;
20
- --text-light: #666;
21
- --border-color: #e0e0e0;
22
- --shadow: 0 4px 6px rgba(0,0,0,0.05);
23
- --radius: 8px;
24
- --max-width: 1200px;
25
- }
26
-
27
- * {
28
- box-sizing: border-box;
29
- margin: 0;
30
- padding: 0;
31
- }
32
-
33
- body {
34
- font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
35
- background-color: var(--bg-color);
36
- color: var(--text-color);
37
- line-height: 1.6;
38
- height: 100vh;
39
- display: flex;
40
- flex-direction: column;
41
- overflow: hidden; /* Le scroll sera géré dans Main */
42
- }
43
-
44
- /* --- HEADER --- */
45
- header {
46
- background: linear-gradient(135deg, var(--primary-color), #007a2e);
47
- color: white;
48
- padding: 0.8rem 1.5rem;
49
- display: flex;
50
- justify-content: space-between;
51
- align-items: center;
52
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
53
- z-index: 100;
54
- }
55
-
56
- .logo-area {
57
- display: flex;
58
- align-items: center;
59
- gap: 10px;
60
- font-weight: 700;
61
- font-size: 1.2rem;
62
- }
63
-
64
- .logo-area i {
65
- font-size: 1.5rem;
66
- color: var(--secondary-color);
67
- }
68
-
69
- .anycoder-link {
70
- font-size: 0.85rem;
71
- background: rgba(255, 255, 255, 0.2);
72
- padding: 5px 12px;
73
- border-radius: 20px;
74
- text-decoration: none;
75
- color: white;
76
- transition: background 0.3s;
77
- }
78
-
79
- .anycoder-link:hover {
80
- background: rgba(255, 255, 255, 0.3);
81
- }
82
-
83
- /* --- LAYOUT PRINCIPAL --- */
84
- .app-container {
85
- display: flex;
86
- flex: 1;
87
- overflow: hidden;
88
- position: relative;
89
- }
90
-
91
- /* --- SIDEBAR (Navigation) --- */
92
- .sidebar {
93
- width: 280px;
94
- background: var(--sidebar-bg);
95
- border-right: 1px solid var(--border-color);
96
- display: flex;
97
- flex-direction: column;
98
- overflow-y: auto;
99
- transition: transform 0.3s ease;
100
- }
101
-
102
- .subject-list {
103
- list-style: none;
104
- padding: 1rem 0;
105
- }
106
-
107
- .subject-item {
108
- border-bottom: 1px solid #f0f0f0;
109
- }
110
-
111
- .subject-header {
112
- padding: 1rem 1.5rem;
113
- cursor: pointer;
114
- display: flex;
115
- justify-content: space-between;
116
- align-items: center;
117
- font-weight: 600;
118
- color: var(--accent-color);
119
- transition: background 0.2s;
120
- }
121
-
122
- .subject-header:hover {
123
- background-color: #f9f9f9;
124
- }
125
-
126
- .subject-header i.icon {
127
- margin-right: 10px;
128
- width: 20px;
129
- text-align: center;
130
- color: var(--primary-color);
131
- }
132
-
133
- .subject-header .arrow {
134
- font-size: 0.8rem;
135
- transition: transform 0.3s;
136
- }
137
-
138
- .subject-item.active .subject-header {
139
- background-color: #e8f5e9;
140
- color: var(--primary-color);
141
- }
142
-
143
- .subject-item.active .arrow {
144
- transform: rotate(90deg);
145
- }
146
-
147
- /* Sous-menu Chapitres */
148
- .chapter-list {
149
- list-style: none;
150
- max-height: 0;
151
- overflow: hidden;
152
- transition: max-height 0.3s ease-out;
153
- background-color: #fafafa;
154
- }
155
-
156
- .subject-item.active .chapter-list {
157
- max-height: 500px; /* Valeur arbitraire suffisante */
158
- transition: max-height 0.5s ease-in;
159
- overflow-y: auto;
160
- }
161
-
162
- .chapter-item {
163
- padding: 0.8rem 1.5rem 0.8rem 3rem;
164
- cursor: pointer;
165
- font-size: 0.9rem;
166
- color: var(--text-light);
167
- border-left: 3px solid transparent;
168
- transition: all 0.2s;
169
- }
170
-
171
- .chapter-item:hover {
172
- color: var(--primary-color);
173
- background-color: #f0f0f0;
174
- }
175
-
176
- .chapter-item.active-chapter {
177
- border-left-color: var(--secondary-color);
178
- background-color: #fff;
179
- color: var(--accent-color);
180
- font-weight: 600;
181
- box-shadow: 0 2px 4px rgba(0,0,0,0.03);
182
- }
183
-
184
- /* --- MAIN CONTENT --- */
185
- .main-content {
186
- flex: 1;
187
- padding: 2rem;
188
- overflow-y: auto;
189
- scroll-behavior: smooth;
190
- }
191
-
192
- .content-wrapper {
193
- max-width: 900px;
194
- margin: 0 auto;
195
- background: white;
196
- padding: 3rem;
197
- border-radius: var(--radius);
198
- box-shadow: var(--shadow);
199
- min-height: 80vh;
200
- }
201
-
202
- /* --- TYPOGRAPHIE DU COURS --- */
203
- h1.course-title {
204
- color: var(--primary-color);
205
- margin-bottom: 0.5rem;
206
- font-size: 2rem;
207
- }
208
-
209
- .course-meta {
210
- color: #888;
211
- font-size: 0.9rem;
212
- margin-bottom: 2rem;
213
- display: flex;
214
- gap: 15px;
215
- }
216
-
217
- .course-meta span {
218
- display: flex;
219
- align-items: center;
220
- gap: 5px;
221
- }
222
-
223
- h2 {
224
- margin-top: 2rem;
225
- margin-bottom: 1rem;
226
- color: var(--accent-color);
227
- border-bottom: 2px solid #f0f0f0;
228
- padding-bottom: 0.5rem;
229
- }
230
-
231
- p {
232
- margin-bottom: 1rem;
233
- text-align: justify;
234
- }
235
-
236
- ul, ol {
237
- margin-left: 1.5rem;
238
- margin-bottom: 1rem;
239
- }
240
-
241
- li {
242
- margin-bottom: 0.5rem;
243
- }
244
-
245
- /* --- EXEMPLES & DEFINITIONS --- */
246
- .box {
247
- padding: 1.2rem;
248
- border-radius: var(--radius);
249
- margin: 1.5rem 0;
250
- border-left: 4px solid;
251
- }
252
-
253
- .box.definition {
254
- background-color: #e3f2fd;
255
- border-color: #2196f3;
256
- }
257
-
258
- .box.example {
259
- background-color: #e8f5e9;
260
- border-color: var(--primary-color);
261
- }
262
-
263
- .box-title {
264
- font-weight: bold;
265
- display: block;
266
- margin-bottom: 0.5rem;
267
- text-transform: uppercase;
268
- font-size: 0.85rem;
269
- letter-spacing: 0.5px;
270
- }
271
-
272
- .definition .box-title { color: #1565c0; }
273
- .example .box-title { color: #2e7d32; }
274
-
275
- /* --- MATHS STYLE --- */
276
- .math {
277
- font-family: 'Times New Roman', Times, serif;
278
- font-style: italic;
279
- background: #f5f5f5;
280
- padding: 0 4px;
281
- }
282
-
283
- /* --- EXERCICES --- */
284
- .exercise-section {
285
- margin-top: 3rem;
286
- border-top: 1px solid var(--border-color);
287
- padding-top: 2rem;
288
- }
289
-
290
- .exercise-card {
291
- background: #fafafa;
292
- border: 1px solid #eee;
293
- padding: 1.5rem;
294
- border-radius: var(--radius);
295
- margin-bottom: 1.5rem;
296
- }
297
-
298
- .exercise-question {
299
- font-weight: 600;
300
- margin-bottom: 1rem;
301
- }
302
-
303
- .solution-container {
304
- margin-top: 1rem;
305
- padding: 1rem;
306
- background: #fff;
307
- border-left: 3px solid var(--secondary-color);
308
- display: none; /* Caché par défaut */
309
- }
310
-
311
- .solution-container.visible {
312
- display: block;
313
- animation: fadeIn 0.5s;
314
- }
315
-
316
- .btn {
317
- display: inline-block;
318
- padding: 0.6rem 1.2rem;
319
- background-color: var(--primary-color);
320
- color: white;
321
- border: none;
322
- border-radius: 4px;
323
- cursor: pointer;
324
- font-size: 0.9rem;
325
- transition: background 0.2s;
326
- }
327
-
328
- .btn:hover {
329
- background-color: #007a2e;
330
- }
331
-
332
- .btn-outline {
333
- background: transparent;
334
- border: 1px solid var(--primary-color);
335
- color: var(--primary-color);
336
- }
337
-
338
- .btn-outline:hover {
339
- background: #e8f5e9;
340
- }
341
-
342
- /* --- MOBILE MENU BUTTON --- */
343
- .mobile-toggle {
344
- display: none;
345
- background: none;
346
- border: none;
347
- color: white;
348
- font-size: 1.5rem;
349
- cursor: pointer;
350
- }
351
-
352
- /* --- RESPONSIVE --- */
353
- @media (max-width: 768px) {
354
- .mobile-toggle {
355
- display: block;
356
- }
357
-
358
- .sidebar {
359
- position: absolute;
360
- top: 0;
361
- left: 0;
362
- height: 100%;
363
- z-index: 200;
364
- transform: translateX(-100%);
365
- box-shadow: 2px 0 10px rgba(0,0,0,0.1);
366
- }
367
-
368
- .sidebar.open {
369
- transform: translateX(0);
370
- }
371
-
372
- .main-content {
373
- padding: 1rem;
374
- }
375
-
376
- .content-wrapper {
377
- padding: 1.5rem;
378
- }
379
-
380
- h1.course-title {
381
- font-size: 1.5rem;
382
- }
383
- }
384
-
385
- @keyframes fadeIn {
386
- from { opacity: 0; transform: translateY(-5px); }
387
- to { opacity: 1; transform: translateY(0); }
388
- }
389
-
390
- /* Utility */
391
- .hidden { display: none; }
392
- .badge {
393
- display: inline-block;
394
- padding: 2px 8px;
395
- border-radius: 12px;
396
- font-size: 0.75rem;
397
- background: #eee;
398
- color: #555;
399
- }
400
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
401
  </head>
 
402
  <body>
403
 
404
- <!-- HEADER -->
405
- <header>
406
- <div class="logo-area">
407
- <button class="mobile-toggle" onclick="toggleSidebar()">
408
- <i class="fas fa-bars"></i>
409
- </button>
410
- <i class="fas fa-graduation-cap"></i>
411
- <span>1ère D Côte d'Ivoire</span>
412
- </div>
413
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
414
- Built with anycoder <i class="fas fa-external-link-alt" style="font-size: 0.7em;"></i>
415
- </a>
416
- </header>
417
-
418
- <div class="app-container">
419
- <!-- SIDEBAR NAVIGATION -->
420
- <nav class="sidebar" id="sidebar">
421
- <ul class="subject-list" id="subjectList">
422
- <!-- La liste des matières sera générée par JS -->
423
- </ul>
424
- </nav>
425
-
426
- <!-- MAIN CONTENT AREA -->
427
- <main class="main-content" onclick="closeSidebarOnMobile(event)">
428
- <div class="content-wrapper" id="contentArea">
429
- <!-- Le contenu du cours sera injecté ici -->
430
- <div style="text-align: center; margin-top: 50px; color: #888;">
431
- <i class="fas fa-book-open" style="font-size: 3rem; margin-bottom: 1rem;"></i>
432
- <h2>Bienvenue élève de Première D</h2>
433
- <p>Sélectionnez une matière et un chapitre dans le menu pour commencer votre révision.</p>
434
- </div>
435
- </div>
436
- </main>
437
  </div>
438
-
439
- <script>
440
- // --- DONNÉES DU PROGRAMME (Structure JSON) ---
441
- const curriculum = [
442
- {
443
- id: "maths",
444
- name: "Mathématiques",
445
- icon: "fa-calculator",
446
- chapters: [
447
- {
448
- id: "m1",
449
- title: "Second Degré : Polynômes",
450
- content: `
451
- <h1 class="course-title">Le Second Degré</h1>
452
- <div class="course-meta">
453
- <span><i class="far fa-clock"></i> 4 Heures</span>
454
- <span><i class="fas fa-signal"></i> Difficulté: Moyenne</span>
455
- </div>
456
-
457
- <h2>1. Définition et Forme Canonique</h2>
458
- <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>
459
-
460
- <div class="box definition">
461
- <span class="box-title">Définition : Forme Canonique</span>
462
- Toute fonction polynôme de degré 2 peut s'écrire sous la forme :<br>
463
- <span class="math">f(x) = a(x - α)² + β</span><br>
464
- Où <span class="math">α = -b/2a</span> et <span class="math">β = f(α)</span>.
465
- </div>
466
-
467
- <h2>2. Équation du Second Degré</h2>
468
- <p>Pour résoudre <span class="math">ax² + bx + c = 0</span>, on calcule le discriminant <span class="math">Δ = b² - 4ac</span>.</p>
469
- <ul>
470
- <li>Si <span class="math">Δ > 0</span> : deux solutions distinctes <span class="math">x₁</span> et <span class="math">x₂</span>.</li>
471
- <li>Si <span class="math">Δ = 0</span> : une solution double <span class="math">x₀ = -b/2a</span>.</li>
472
- <li>Si <span class="math">Δ < 0</span> : pas de solution réelle.</li>
473
- </ul>
474
-
475
- <div class="box example">
476
- <span class="box-title">Exemple</span>
477
- Résoudre <span class="math">2x² - 5x + 2 = 0</span>.<br>
478
- <span class="math">Δ = (-5)² - 4(2)(2) = 25 - 16 = 9 > 0</span>.<br>
479
- <span class="math">x₁ = (5 - 3)/4 = 0.5</span> et <span class="math">x₂ = (5 + 3)/4 = 2</span>.<br>
480
- S = {0.5 ; 2}.
481
- </div>
482
-
483
- <h2>3. Signe du Trinôme</h2>
484
- <p>Le signe de <span class="math">ax² + bx + c</span> dépend du signe de <span class="math">a</span> et du discriminant <span class="math">Δ</span>.</p>
485
- <p>Si <span class="math">a > 0</span>, la parabole est orientée "vers le haut". Le polynôme est positif à l'extérieur des racines (si elles existent) et négatif entre elles.</p>
486
- `,
487
- exercises: [
488
- {
489
- question: "Résoudre l'équation : x² - 4x + 4 = 0",
490
- 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}."
491
- },
492
- {
493
- question: "Factoriser 3x² + 7x + 2",
494
- 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)."
495
- }
496
- ]
497
- },
498
- {
499
- id: "m2",
500
- title: "Géométrie : Barycentre",
501
- content: `
502
- <h1 class="course-title">Barycentre</h1>
503
- <div class="course-meta">
504
- <span><i class="far fa-clock"></i> 3 Heures</span>
505
- <span><i class="fas fa-shapes"></i> Géométrie Plane</span>
506
- </div>
507
- <p>Le barycentre est une généralisation de la notion de milieu ou de centre de gravité.</p>
508
- <h2>1. Définition</h2>
509
- <div class="box definition">
510
- <span class="box-title">Définition</span>
511
- Soient A et B deux points, α et β deux réels tels que α + β ≠ 0.<br>
512
- Il existe un unique point G tel que : <span class="math">αGA⃗ + βGB⃗ = 0⃗</span>.<br>
513
- Ce point G est appelé le barycentre des points pondérés (A, α) et (B, β).
514
- </div>
515
- <h2>2. Propriétés</h2>
516
- <ul>
517
- <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>
518
- <li><strong>Associativité :</strong> On peut remplacer un groupe de points par leur barycentre affecté de la somme de leurs coefficients.</li>
519
- </ul>
520
- `,
521
- exercises: [
522
- {
523
- question: "Construire le barycentre G de (A, 2), (B, -1) sachant que AB = 6cm.",
524
- 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 (ou G est le translaté de A par le vecteur AB).<br>Donc G est le point tel que AG = 6cm et G est sur la demi-droite [AB)."
525
- }
526
- ]
527
- }
528
- ]
529
- },
530
- {
531
- id: "physique",
532
- name: "Physique-Chimie",
533
- icon: "fa-atom",
534
- chapters: [
535
- {
536
- id: "p1",
537
- title: "Forces et Mouvements",
538
- content: `
539
- <h1 class="course-title">Forces et Mouvements</h1>
540
- <div class="course-meta">
541
- <span><i class="far fa-clock"></i> 5 Heures</span>
542
- <span><i class="fas fa-running"></i> Mécanique</span>
543
- </div>
544
-
545
- <h2>1. Référentiel et Relativité</h2>
546
- <p>Le mouvement d'un objet est relatif : il dépend de l'observateur (référentiel). Les référentiels courants sont :</p>
547
- <ul>
548
- <li>Référentiel terrestre (pour les mouvements sur Terre).</li>
549
- <li>Référentiel géocentrique (satellites, Lune).</li>
550
- <li>Référentiel héliocentrique (planètes du système solaire).</li>
551
- </ul>
552
-
553
- <h2>2. Les Forces</h2>
554
- <div class="box definition">
555
- <span class="box-title">Définition</span>
556
- 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.
557
- </div>
558
-
559
- <h2>3. Principe d'Inertie</h2>
560
- <div class="box example">
561
- <span class="box-title">1ère Loi de Newton</span>
562
- Dans un référentiel galiléen, si les forces qui s'exercent sur un solide se compensent (somme vectorielle nulle), alors le solide est soit au repos, soit animé d'un mouvement rectiligne uniforme.
563
- </div>
564
- `,
565
- exercises: [
566
- {
567
- question: "Un skieur descend une pente enneigée à vitesse constante. Que peut-on dire des forces qui s'appliquent sur lui ?",
568
- solution: "Puisque la vitesse est constante (et en l'absence de changement de direction indiqué), le mouvement est rectiligne uniforme par rapport au sol.<br>D'après le principe d'inertie, les forces qui s'exercent sur le skieur (Poids, Réaction du sol, Frottements) se compensent : <span class="math">P⃗ + R⃗ + f⃗ = 0⃗</span>."
569
- },
570
- {
571
- question: "Une voiture accélère sur une route horizontale. Les forces se compensent-elles ?",
572
- solution: "Non. Puisque la vitesse varie (accélération), le mouvement n'est pas uniforme.<br>Le vecteur vitesse change. Les forces ne se compensent pas. La force motrice est supérieure aux forces de frottement."
573
- }
574
- ]
575
- },
576
- {
577
- id: "p2",
578
- title: "Les Spectres Lumineux",
579
- content: `
580
- <h1 class="course-title">Les Spectres Lumineux</h1>
581
- <div class="course-meta">
582
- <span><i class="far fa-clock"></i> 3 Heures</span>
583
- <span><i class="fas fa-lightbulb"></i> Optique</span>
584
- </div>
585
- <p>L'étude des spectres permet d'identifier la composition chimique d'une source de lumière (étoile, gaz).</p>
586
-
587
- <h2>1. Spectre d'émission</h2>
588
- <ul>
589
- <li><strong>Spectre continu :</strong> Arc-en-ciel (lampe à incandescence). Présence de toutes les couleurs.</li>
590
- <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 (raies).</li>
591
- </ul>
592
-
593
- <h2>2. Spectre d'absorption</h2>
594
- <p>Lorsqu'une lumière blanche traverse un gaz froid, le gaz absorbe les radiations qu'il serait capable d'émettre. On obtient un fond coloré continu avec des raies noires.</p>
595
- `,
596
- exercises: [
597
- {
598
- question: "Comment peut-on savoir que le Soleil contient de l'hydrogène ?",
599
- 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 (spectre de raies)."
600
- }
601
- ]
602
- }
603
- ]
604
- },
605
- {
606
- id: "svt",
607
- name: "SVT",
608
- icon: "fa-dna",
609
- chapters: [
610
- {
611
- id: "s1",
612
- title: "Reproduction Humaine",
613
- content: `
614
- <h1 class="course-title">Reproduction Humaine</h1>
615
- <div class="course-meta">
616
- <span><i class="far fa-clock"></i> 4 Heures</span>
617
- <span><i class="fas fa-female"></i> Biologie</span>
618
- </div>
619
-
620
- <h2>1. Le fonctionnement de l'appareil reproducteur féminin</h2>
621
- <p>L'appareil reproducteur féminin est constitué de deux ovaires, des trompes de Fallope et de l'utérus.</p>
622
- <p>À partir de la puberté, les ovaires libèrent un ovule environ tous les 28 jours : c'est <strong>l'ovulation</strong>.</p>
623
- <div class="box definition">
624
- <span class="box-title">Cycle Utérin</span>
625
- 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.
626
- </div>
627
-
628
- <h2>2. La Fécondation</h2>
629
- <p>La rencontre entre l'ovule et un spermatozoïde a lieu dans la trompe de Fallope. La fécondation aboutit à la formation d'une cellule unique : l'œuf (ou zygote).</p>
630
- `,
631
- exercises: [
632
- {
633
- question: "Où se produit généralement la fécondation chez la femme ?",
634
- solution: "La fécondation a généralement lieu dans la trompe de Fallope (ou oviducte), et non dans l'utérus."
635
- },
636
- {
637
- question: "Qu'est-ce que la nidation ?",
638
- solution: "La nidation est l'implantation de l'embryon (qui est devenu blastocyste) dans la paroi de l'utérus (endomètre), environ 6 jours après la fécondation."
639
- }
640
- ]
641
- }
642
- ]
643
- },
644
- {
645
- id: "francais",
646
- name: "Français",
647
- icon: "fa-feather-alt",
648
- chapters: [
649
- {
650
- id: "f1",
651
- title: "L'Argumentation",
652
- content: `
653
- <h1 class="course-title">Les Genres de l'Argumentation</h1>
654
- <div class="course-meta">
655
- <span><i class="far fa-clock"></i> 2 Heures</span>
656
- <span><i class="fas fa-pen-nib"></i> Littérature</span>
657
- </div>
658
-
659
- <p>Argumenter, c'est tenter de convaincre ou de persuader un destinataire d'une thèse (une opinion) en utilisant des arguments.</p>
660
-
661
- <h2>1. Convaincre vs Persuader</h2>
662
- <ul>
663
- <li><strong>Convaincre</strong> : Faire appel à la raison (logique, faits, exemples). On cherche l'adhésion intellectuelle.</li>
664
- <li><strong>Persuader</strong> : Faire appel aux sentiments (émotions, pathos). On cherche l'adhésion sensible et passionnelle.</li>
665
- </ul>
666
-
667
- <h2>2. Les types d'arguments</h2>
668
- <div class="box example">
669
- <span class="box-title">Exemple</span>
670
- L'argument d'autorité (citer un expert), l'argument par l'exemple (cas concret), l'argument ad hominem (attaquer la personne), l'argument par la causalité (cause à effet).
671
- </div>
672
- `,
673
- exercises: [
674
- {
675
- question: "Dans un discours politique qui joue sur la peur de l'auditoire, quel mode d'argumentation est utilisé ?",
676
- 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."
677
- }
678
- ]
679
- }
680
- ]
681
- }
682
- ];
683
-
684
- // --- LOGIQUE JAVASCRIPT ---
685
-
686
- const subjectListEl = document.getElementById('subjectList');
687
- const contentAreaEl = document.getElementById('contentArea');
688
- const sidebar = document.getElementById('sidebar');
689
-
690
- // Fonction d'initialisation
691
- function init() {
692
- renderSidebar();
693
- }
694
-
695
- // Rendu de la barre latérale
696
- function renderSidebar() {
697
- subjectListEl.innerHTML = '';
698
-
699
- curriculum.forEach((subject, index) => {
700
- const li = document.createElement('li');
701
- li.className = 'subject-item';
702
- if (index === 0) li.classList.add('active'); // Ouvrir le premier par défaut
703
-
704
- // Header de la matière
705
- const header = document.createElement('div');
706
- header.className = 'subject-header';
707
- header.onclick = () => toggleSubject(index);
708
- header.innerHTML = `
709
- <span><i class="fas ${subject.icon} icon"></i> ${subject.name}</span>
710
- <i class="fas fa-chevron-right arrow"></i>
711
- `;
712
-
713
- // Liste des chapitres
714
- const ul = document.createElement('ul');
715
- ul.className = 'chapter-list';
716
-
717
- subject.chapters.forEach((chapter, chIndex) => {
718
- const chLi = document.createElement('li');
719
- chLi.className = 'chapter-item';
720
- if (index === 0 && chIndex === 0) chLi.classList.add('active-chapter');
721
- chLi.innerText = chapter.title;
722
- chLi.onclick = (e) => {
723
- e.stopPropagation(); // Évite de fermer le menu
724
- loadChapter(index, chIndex);
725
- };
726
- ul.appendChild(chLi);
727
- });
728
-
729
- li.appendChild(header);
730
- li.appendChild(ul);
731
- subjectListEl.appendChild(li);
732
- });
733
-
734
- // Charger le premier cours par défaut
735
- loadChapter(0, 0);
736
- }
737
-
738
- // Gérer l'ouverture/fermeture des matières
739
- function toggleSubject(index) {
740
- const subjects = document.querySelectorAll('.subject-item');
741
- subjects.forEach((subj, i) => {
742
- if (i === index) {
743
- subj.classList.toggle('active');
744
- } else {
745
- subj.classList.remove('active');
746
- }
747
- });
748
- }
749
-
750
- // Charger un chapitre spécifique
751
- function loadChapter(subjectIndex, chapterIndex) {
752
- // Mise à jour visuelle des menus
753
- document.querySelectorAll('.chapter-item').forEach(item => item.classList.remove('active-chapter'));
754
- const activeSubject = document.querySelectorAll('.subject-item')[subjectIndex];
755
- const activeChapter = activeSubject.querySelectorAll('.chapter-item')[chapterIndex];
756
- activeChapter.classList.add('active-chapter');
757
-
758
- // Récupération des données
759
- const subject = curriculum[subjectIndex];
760
- const chapter = subject.chapters[chapterIndex];
761
-
762
- // Construction du HTML
763
- let exercisesHTML = '';
764
- if (chapter.exercises && chapter.exercises.length > 0) {
765
- exercisesHTML = `<div class="exercise-section">
766
- <h2><i class="fas fa-pen"></i> Exercices Corrigés</h2>`;
767
-
768
- chapter.exercises.forEach((ex, exIndex) => {
769
- exercisesHTML += `
770
- <div class="exercise-card">
771
- <div class="exercise-question">Exercice ${exIndex + 1} : ${ex.question}</div>
772
- <button class="btn btn-outline" onclick="toggleSolution(${exIndex})">
773
- <i class="fas fa-eye"></i> Voir la correction
774
- </button>
775
- <div id="sol-${exIndex}" class="solution-container">
776
- <strong>Correction :</strong><br>${ex.solution}
777
- </div>
778
- </div>
779
- `;
780
- });
781
-
782
- exercisesHTML += `</div>`;
783
- }
784
-
785
- const htmlContent = `
786
- ${chapter.content}
787
- ${exercisesHTML}
788
- `;
789
-
790
- // Animation de transition simple
791
- contentAreaEl.style.opacity = 0;
792
- setTimeout(() => {
793
- contentAreaEl.innerHTML = htmlContent;
794
- contentAreaEl.scrollTop = 0;
795
- contentAreaEl.style.opacity = 1;
796
- contentAreaEl.style.transition = 'opacity 0.3s ease';
797
-
798
- // Fermer la sidebar sur mobile après sélection
799
- if(window.innerWidth <= 768) {
800
- sidebar.classList.remove('open');
801
- }
802
- }, 200);
803
- }
804
-
805
- // Afficher/Masquer la correction
806
- function toggleSolution(index) {
807
- const sol = document.getElementById(`sol-${index}`);
808
- sol.classList.toggle('visible');
809
- }
810
-
811
- // Gestion Mobile
812
- function toggleSidebar() {
813
- sidebar.classList.toggle('open');
814
- }
815
-
816
- function closeSidebarOnMobile(e) {
817
- if (window.innerWidth <= 768 && sidebar.classList.contains('open')) {
818
- // Si on clique sur la zone de contenu et non sur un bouton interne
819
- if (!e.target.closest('.sidebar') && !e.target.closest('.mobile-toggle')) {
820
- sidebar.classList.remove('open');
821
- }
822
- }
823
- }
824
-
825
- // Lancer l'app
826
- init();
827
-
828
- </script>
829
- </body>
830
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="fr">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Première D Côte d'Ivoire - Cours & Exercices</title>
8
+
9
+ <!-- Importation des icônes (FontAwesome via CDN) -->
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+
12
+ <style>
13
+ /* --- VARIABLES & RESET --- */
14
+ :root {
15
+ --primary-color: #009739; /* Vert Côte d'Ivoire */
16
+ --secondary-color: #FF7722; /* Orange Côte d'Ivoire */
17
+ --accent-color: #2c3e50;
18
+ --bg-color: #f4f7f6;
19
+ --sidebar-bg: #ffffff;
20
+ --text-color: #333;
21
+ --text-light: #666;
22
+ --border-color: #e0e0e0;
23
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
24
+ --radius: 8px;
25
+ --max-width: 1200px;
26
+ }
27
+
28
+ * {
29
+ box-sizing: border-box;
30
+ margin: 0;
31
+ padding: 0;
32
+ }
33
+
34
+ body {
35
+ font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
36
+ background-color: var(--bg-color);
37
+ color: var(--text-color);
38
+ line-height: 1.6;
39
+ height: 100vh;
40
+ display: flex;
41
+ flex-direction: column;
42
+ overflow: hidden; /* Le scroll sera géré dans Main */
43
+ }
44
+
45
+ /* --- HEADER --- */
46
+ header {
47
+ background: linear-gradient(135deg, var(--primary-color), #007a2e);
48
+ color: white;
49
+ padding: 0.8rem 1.5rem;
50
+ display: flex;
51
+ justify-content: space-between;
52
+ align-items: center;
53
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
54
+ z-index: 100;
55
+ }
56
+
57
+ .logo-area {
58
+ display: flex;
59
+ align-items: center;
60
+ gap: 10px;
61
+ font-weight: 700;
62
+ font-size: 1.2rem;
63
+ }
64
+
65
+ .logo-area i {
66
+ font-size: 1.5rem;
67
+ color: var(--secondary-color);
68
+ }
69
+
70
+ .anycoder-link {
71
+ font-size: 0.85rem;
72
+ background: rgba(255, 255, 255, 0.2);
73
+ padding: 5px 12px;
74
+ border-radius: 20px;
75
+ text-decoration: none;
76
+ color: white;
77
+ transition: background 0.3s;
78
+ }
79
+
80
+ .anycoder-link:hover {
81
+ background: rgba(255, 255, 255, 0.3);
82
+ }
83
+
84
+ /* --- LAYOUT PRINCIPAL --- */
85
+ .app-container {
86
+ display: flex;
87
+ flex: 1;
88
+ overflow: hidden;
89
+ position: relative;
90
+ }
91
+
92
+ /* --- SIDEBAR (Navigation) --- */
93
+ .sidebar {
94
+ width: 280px;
95
+ background: var(--sidebar-bg);
96
+ border-right: 1px solid var(--border-color);
97
+ display: flex;
98
+ flex-direction: column;
99
+ overflow-y: auto;
100
+ transition: transform 0.3s ease;
101
+ }
102
+
103
+ /* Scrollbar fine pour la sidebar */
104
+ .sidebar::-webkit-scrollbar {
105
+ width: 6px;
106
+ }
107
+ .sidebar::-webkit-scrollbar-thumb {
108
+ background-color: #ccc;
109
+ border-radius: 3px;
110
+ }
111
+
112
+ .subject-list {
113
+ list-style: none;
114
+ padding: 1rem 0;
115
+ }
116
+
117
+ .subject-item {
118
+ border-bottom: 1px solid #f0f0f0;
119
+ }
120
+
121
+ .subject-header {
122
+ padding: 1rem 1.5rem;
123
+ cursor: pointer;
124
+ display: flex;
125
+ justify-content: space-between;
126
+ align-items: center;
127
+ font-weight: 600;
128
+ color: var(--accent-color);
129
+ transition: background 0.2s;
130
+ }
131
+
132
+ .subject-header:hover {
133
+ background-color: #f9f9f9;
134
+ }
135
+
136
+ .subject-header i.icon {
137
+ margin-right: 10px;
138
+ width: 20px;
139
+ text-align: center;
140
+ color: var(--primary-color);
141
+ }
142
+
143
+ .subject-header .arrow {
144
+ font-size: 0.8rem;
145
+ transition: transform 0.3s;
146
+ }
147
+
148
+ .subject-item.active .subject-header {
149
+ background-color: #e8f5e9;
150
+ color: var(--primary-color);
151
+ }
152
+
153
+ .subject-item.active .arrow {
154
+ transform: rotate(90deg);
155
+ }
156
+
157
+ /* Sous-menu Chapitres */
158
+ .chapter-list {
159
+ list-style: none;
160
+ max-height: 0;
161
+ overflow: hidden;
162
+ transition: max-height 0.3s ease-out;
163
+ background-color: #fafafa;
164
+ }
165
+
166
+ .subject-item.active .chapter-list {
167
+ max-height: 1000px; /* Augmenté pour accueillir plus de chapitres */
168
+ transition: max-height 0.5s ease-in;
169
+ overflow-y: auto;
170
+ }
171
+
172
+ .chapter-item {
173
+ padding: 0.8rem 1.5rem 0.8rem 3rem;
174
+ cursor: pointer;
175
+ font-size: 0.9rem;
176
+ color: var(--text-light);
177
+ border-left: 3px solid transparent;
178
+ transition: all 0.2s;
179
+ }
180
+
181
+ .chapter-item:hover {
182
+ color: var(--primary-color);
183
+ background-color: #f0f0f0;
184
+ }
185
+
186
+ .chapter-item.active-chapter {
187
+ border-left-color: var(--secondary-color);
188
+ background-color: #fff;
189
+ color: var(--accent-color);
190
+ font-weight: 600;
191
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
192
+ }
193
+
194
+ /* --- MAIN CONTENT --- */
195
+ .main-content {
196
+ flex: 1;
197
+ padding: 2rem;
198
+ overflow-y: auto;
199
+ scroll-behavior: smooth;
200
+ }
201
+
202
+ .content-wrapper {
203
+ max-width: 900px;
204
+ margin: 0 auto;
205
+ background: white;
206
+ padding: 3rem;
207
+ border-radius: var(--radius);
208
+ box-shadow: var(--shadow);
209
+ min-height: 80vh;
210
+ }
211
+
212
+ /* --- TYPOGRAPHIE DU COURS --- */
213
+ h1.course-title {
214
+ color: var(--primary-color);
215
+ margin-bottom: 0.5rem;
216
+ font-size: 2rem;
217
+ }
218
+
219
+ .course-meta {
220
+ color: #888;
221
+ font-size: 0.9rem;
222
+ margin-bottom: 2rem;
223
+ display: flex;
224
+ gap: 15px;
225
+ flex-wrap: wrap;
226
+ }
227
+
228
+ .course-meta span {
229
+ display: flex;
230
+ align-items: center;
231
+ gap: 5px;
232
+ }
233
+
234
+ h2 {
235
+ margin-top: 2rem;
236
+ margin-bottom: 1rem;
237
+ color: var(--accent-color);
238
+ border-bottom: 2px solid #f0f0f0;
239
+ padding-bottom: 0.5rem;
240
+ }
241
+
242
+ p {
243
+ margin-bottom: 1rem;
244
+ text-align: justify;
245
+ }
246
+
247
+ ul, ol {
248
+ margin-left: 1.5rem;
249
+ margin-bottom: 1rem;
250
+ }
251
+
252
+ li {
253
+ margin-bottom: 0.5rem;
254
+ }
255
+
256
+ /* --- EXEMPLES & DEFINITIONS --- */
257
+ .box {
258
+ padding: 1.2rem;
259
+ border-radius: var(--radius);
260
+ margin: 1.5rem 0;
261
+ border-left: 4px solid;
262
+ }
263
+
264
+ .box.definition {
265
+ background-color: #e3f2fd;
266
+ border-color: #2196f3;
267
+ }
268
+
269
+ .box.example {
270
+ background-color: #e8f5e9;
271
+ border-color: var(--primary-color);
272
+ }
273
+
274
+ .box.important {
275
+ background-color: #fff3e0;
276
+ border-color: var(--secondary-color);
277
+ }
278
+
279
+ .box-title {
280
+ font-weight: bold;
281
+ display: block;
282
+ margin-bottom: 0.5rem;
283
+ text-transform: uppercase;
284
+ font-size: 0.85rem;
285
+ letter-spacing: 0.5px;
286
+ }
287
+
288
+ .definition .box-title { color: #1565c0; }
289
+ .example .box-title { color: #2e7d32; }
290
+ .important .box-title { color: #ef6c00; }
291
+
292
+ /* --- MATHS STYLE --- */
293
+ .math {
294
+ font-family: 'Times New Roman', Times, serif;
295
+ font-style: italic;
296
+ background: #f5f5f5;
297
+ padding: 0 4px;
298
+ }
299
+
300
+ /* --- EXERCICES --- */
301
+ .exercise-section {
302
+ margin-top: 3rem;
303
+ border-top: 1px solid var(--border-color);
304
+ padding-top: 2rem;
305
+ }
306
+
307
+ .exercise-card {
308
+ background: #fafafa;
309
+ border: 1px solid #eee;
310
+ padding: 1.5rem;
311
+ border-radius: var(--radius);
312
+ margin-bottom: 1.5rem;
313
+ }
314
+
315
+ .exercise-question {
316
+ font-weight: 600;
317
+ margin-bottom: 1rem;
318
+ }
319
+
320
+ .solution-container {
321
+ margin-top: 1rem;
322
+ padding: 1rem;
323
+ background: #fff;
324
+ border-left: 3px solid var(--secondary-color);
325
+ display: none; /* Caché par défaut */
326
+ }
327
+
328
+ .solution-container.visible {
329
+ display: block;
330
+ animation: fadeIn 0.5s;
331
+ }
332
+
333
+ .btn {
334
+ display: inline-block;
335
+ padding: 0.6rem 1.2rem;
336
+ background-color: var(--primary-color);
337
+ color: white;
338
+ border: none;
339
+ border-radius: 4px;
340
+ cursor: pointer;
341
+ font-size: 0.9rem;
342
+ transition: background 0.2s;
343
+ }
344
+
345
+ .btn:hover {
346
+ background-color: #007a2e;
347
+ }
348
+
349
+ .btn-outline {
350
+ background: transparent;
351
+ border: 1px solid var(--primary-color);
352
+ color: var(--primary-color);
353
+ }
354
+
355
+ .btn-outline:hover {
356
+ background: #e8f5e9;
357
+ }
358
+
359
+ /* --- MOBILE MENU BUTTON --- */
360
+ .mobile-toggle {
361
+ display: none;
362
+ background: none;
363
+ border: none;
364
+ color: white;
365
+ font-size: 1.5rem;
366
+ cursor: pointer;
367
+ }
368
+
369
+ /* --- RESPONSIVE --- */
370
+ @media (max-width: 768px) {
371
+ .mobile-toggle {
372
+ display: block;
373
+ }
374
+
375
+ .sidebar {
376
+ position: absolute;
377
+ top: 0;
378
+ left: 0;
379
+ height: 100%;
380
+ z-index: 200;
381
+ transform: translateX(-100%);
382
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
383
+ width: 80%;
384
+ }
385
+
386
+ .sidebar.open {
387
+ transform: translateX(0);
388
+ }
389
+
390
+ .main-content {
391
+ padding: 1rem;
392
+ }
393
+
394
+ .content-wrapper {
395
+ padding: 1.5rem;
396
+ }
397
+
398
+ h1.course-title {
399
+ font-size: 1.5rem;
400
+ }
401
+ }
402
+
403
+ @keyframes fadeIn {
404
+ from { opacity: 0; transform: translateY(-5px); }
405
+ to { opacity: 1; transform: translateY(0); }
406
+ }
407
+
408
+ /* Utility */
409
+ .hidden { display: none; }
410
+ .badge {
411
+ display: inline-block;
412
+ padding: 2px 8px;
413
+ border-radius: 12px;
414
+ font-size: 0.75rem;
415
+ background: #eee;
416
+ color: #555;
417
+ }
418
+ </style>
419
  </head>
420
+
421
  <body>
422
 
423
+ <!-- HEADER -->
424
+ <header>
425
+ <div class="logo-area">
426
+ <button class="mobile-toggle" onclick="toggleSidebar()">
427
+ <i class="fas fa-bars"></i>
428
+ </button>
429
+ <i class="fas fa-graduation-cap"></i>
430
+ <span>1ère D Côte d'Ivoire</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
431
  </div>
432
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
433
+ Built with anycoder <i class="fas fa-external-link-alt" style="font-size: 0.7em;"></i>
434
+ </a>
435
+ </header>
436
+
437
+ <div class="app-container">
438
+ <!-- SIDEBAR NAVIGATION -->
439
+ <nav class="sidebar" id="sidebar">
440
+ <ul class="subject-list" id="subjectList">
441
+ <!-- La liste des matières sera générée par JS -->
442
+ </ul>
443
+ </nav>
444
+
445
+ <!-- MAIN CONTENT AREA -->
446
+ <main class="main-content" onclick="closeSidebarOnMobile(event)">
447
+ <div class="content-wrapper" id="contentArea">
448
+ <!-- Le contenu du cours sera injecté ici -->
449
+ <div style="text-align: center; margin-top: 50px; color: #888;">
450
+ <i class="fas fa-book-open" style="font-size: 3rem; margin-bottom: 1rem;"></i>
451
+ <h2>Bienvenue élève de Première D</h2>
452
+ <p>Sélectionnez une matière et un chapitre dans le menu pour commencer votre révision.</p>
453
+ </div>
454
+ </div>
455
+ </main>
456
+ </div>
457
+
458
+ <script>
459
+ // --- DONNÉES DU PROGRAMME (Structure JSON ÉTENDUE) ---
460
+ const curriculum = [
461
+ {
462
+ id: "maths",
463
+ name: "Mathématiques",
464
+ icon: "fa-calculator",
465
+ chapters: [
466
+ {
467
+ id: "m1",
468
+ title: "Second Degré : Polynômes",
469
+ content: `
470
+ <h1 class="course-title">Le Second Degré</h1>
471
+ <div class="course-meta">
472
+ <span><i class="far fa-clock"></i> 4 Heures</span>
473
+ <span><i class="fas fa-signal"></i> Difficulté: Moyenne</span>
474
+ </div>
475
+ <h2>1. Définition et Forme Canonique</h2>
476
+ <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>
477
+ <div class="box definition">
478
+ <span class="box-title">Définition : Forme Canonique</span>
479
+ Toute fonction polynôme de degré 2 peut s'écrire sous la forme :<br>
480
+ <span class="math">f(x) = a(x - α)² + β</span><br>
481
+ Où <span class="math">α = -b/2a</span> et <span class="math">β = f(α)</span>.
482
+ </div>
483
+ <h2>2. Équation du Second Degré</h2>
484
+ <p>Pour résoudre <span class="math">ax² + bx + c = 0</span>, on calcule le discriminant <span class="math">Δ = b² - 4ac</span>.</p>
485
+ <ul>
486
+ <li>Si <span class="math">Δ > 0</span> : deux solutions distinctes <span class="math">x₁</span> et <span class="math">x₂</span>.</li>
487
+ <li>Si <span class="math">Δ = 0</span> : une solution double <span class="math">x₀ = -b/2a</span>.</li>
488
+ <li>Si <span class="math">Δ < 0</span> : pas de solution réelle.</li>
489
+ </ul>
490
+ `,
491
+ exercises: [
492
+ {
493
+ question: "Résoudre l'équation : x² - 4x + 4 = 0",
494
+ 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}."
495
+ },
496
+ {
497
+ question: "Factoriser 3x² + 7x + 2",
498
+ 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)."
499
+ }
500
+ ]
501
+ },
502
+ {
503
+ id: "m2",
504
+ title: "Géométrie : Barycentre",
505
+ content: `
506
+ <h1 class="course-title">Barycentre</h1>
507
+ <div class="course-meta">
508
+ <span><i class="far fa-clock"></i> 3 Heures</span>
509
+ <span><i class="fas fa-shapes"></i> Géométrie Plane</span>
510
+ </div>
511
+ <p>Le barycentre est une généralisation de la notion de milieu ou de centre de gravité.</p>
512
+ <h2>1. Définition</h2>
513
+ <div class="box definition">
514
+ <span class="box-title">Définition</span>
515
+ Soient A et B deux points, α et β deux réels tels que α + β ≠ 0.<br>
516
+ Il existe un unique point G tel que : <span class="math">αGA⃗ + βGB⃗ = 0⃗</span>.<br>
517
+ Ce point G est appelé le barycentre des points pondérés (A, α) et (B, β).
518
+ </div>
519
+ <h2>2. Propriétés</h2>
520
+ <ul>
521
+ <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>
522
+ <li><strong>Associativité :</strong> On peut remplacer un groupe de points par leur barycentre affecté de la somme de leurs coefficients.</li>
523
+ </ul>
524
+ `,
525
+ exercises: [
526
+ {
527
+ question: "Construire le barycentre G de (A, 2), (B, -1) sachant que AB = 6cm.",
528
+ 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)."
529
+ }
530
+ ]
531
+ },
532
+ {
533
+ id: "m3",
534
+ title: "Suites Numériques",
535
+ content: `
536
+ <h1 class="course-title">Suites Numériques</h1>
537
+ <div class="course-meta">
538
+ <span><i class="far fa-clock"></i> 5 Heures</span>
539
+ <span><i class="fas fa-sort-numeric-down"></i> Analyse</span>
540
+ </div>
541
+ <p>Une suite numérique est une fonction définie sur l'ensemble des entiers naturels ℕ (ou une partie de ℕ).</p>
542
+ <h2>1. Suite Arithmétique</h2>
543
+ <div class="box definition">
544
+ <span class="box-title">Définition</span>
545
+ 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>
546
+ r est appelé la raison de la suite.
547
+ </div>
548
+ <p>Terme général : <span class="math">uₙ = u₀ + n × r</span>.</p>
549
+
550
+ <h2>2. Suite Géométrique</h2>
551
+ <div class="box definition">
552
+ <span class="box-title">Définition</span>
553
+ 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>
554
+ q est appelé la raison de la suite.
555
+ </div>
556
+ <p>Terme général : <span class="math">uₙ = u₀ × qⁿ</span>.</p>
557
+ `,
558
+ exercises: [
559
+ {
560
+ question: "Soit (uₙ) une suite arithmétique de premier terme u₀ = 5 et de raison r = 3. Calculer u₁₀.",
561
+ solution: "On utilise la formule uₙ = u₀ + n×r.<br>u₁₀ = 5 + 10×3 = 5 + 30 = 35."
562
+ },
563
+ {
564
+ question: "Calculer la somme des 10 premiers termes de la suite géométrique de premier terme 1 et de raison 2.",
565
+ 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."
566
+ }
567
+ ]
568
+ },
569
+ {
570
+ id: "m4",
571
+ title: "Dérivation",
572
+ content: `
573
+ <h1 class="course-title">Dérivation</h1>
574
+ <div class="course-meta">
575
+ <span><i class="far fa-clock"></i> 6 Heures</span>
576
+ <span><i class="fas fa-chart-line"></i> Analyse</span>
577
+ </div>
578
+ <p>La dérivation permet d'étudier les variations d'une fonction.</p>
579
+ <h2>1. Nombre Dérivé</h2>
580
+ <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>
581
+ <div class="box example">
582
+ <span class="box-title">Interprétation Graphique</span>
583
+ Le nombre dérivé f'(a) est le coefficient directeur de la tangente à la courbe Cf au point d'abscisse a.
584
+ </div>
585
+ <h2>2. Formules Usuelles</h2>
586
+ <p>Si f(x) = x² alors f'(x) = 2x.</p>
587
+ <p>Si f(x) = 1/x alors f'(x) = -1/x².</p>
588
+ <p>Si f(x) = √x alors f'(x) = 1/(2√x).</p>
589
+ `,
590
+ exercises: [
591
+ {
592
+ question: "Déterminer la dérivée de f(x) = 3x² + 5x + 2.",
593
+ solution: "On utilise la linéarité de la dérivée.<br>f'(x) = 3(2x) + 5(1) + 0 = 6x + 5."
594
+ },
595
+ {
596
+ question: "Soit f(x) = x³. Calculer f'(2).",
597
+ solution: "La dérivée de x³ est 3x².<br>Donc f'(x) = 3x².<br>f'(2) = 3 × 2² = 12."
598
+ }
599
+ ]
600
+ }
601
+ ]
602
+ },
603
+ {
604
+ id: "physique",
605
+ name: "Physique-Chimie",
606
+ icon: "fa-atom",
607
+ chapters: [
608
+ {
609
+ id: "p1",
610
+ title: "Forces et Mouvements",
611
+ content: `
612
+ <h1 class="course-title">Forces et Mouvements</h1>
613
+ <div class="course-meta">
614
+ <span><i class="far fa-clock"></i> 5 Heures</span>
615
+ <span><i class="fas fa-running"></i> Mécanique</span>
616
+ </div>
617
+ <h2>1. Référentiel et Relativité</h2>
618
+ <p>Le mouvement d'un objet est relatif : il dépend de l'observateur (référentiel). Les référentiels courants sont :</p>
619
+ <ul>
620
+ <li>Référentiel terrestre (pour les mouvements sur Terre).</li>
621
+ <li>Référentiel géocentrique (satellites, Lune).</li>
622
+ <li>Référentiel héliocentrique (planètes du système solaire).</li>
623
+ </ul>
624
+ <h2>2. Les Forces</h2>
625
+ <div class="box definition">
626
+ <span class="box-title">Définition</span>
627
+ 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.
628
+ </div>
629
+ `,
630
+ exercises: [
631
+ {
632
+ question: "Un skieur descend une pente enneigée à vitesse constante. Que peut-on dire des forces ?",
633
+ 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⃗."
634
+ }
635
+ ]
636
+ },
637
+ {
638
+ id: "p2",
639
+ title: "Les Spectres Lumineux",
640
+ content: `
641
+ <h1 class="course-title">Les Spectres Lumineux</h1>
642
+ <div class="course-meta">
643
+ <span><i class="far fa-clock"></i> 3 Heures</span>
644
+ <span><i class="fas fa-lightbulb"></i> Optique</span>
645
+ </div>
646
+ <p>L'étude des spectres permet d'identifier la composition chimique d'une source de lumière.</p>
647
+ <h2>1. Spectre d'émission</h2>
648
+ <ul>
649
+ <li><strong>Spectre continu :</strong> Arc-en-ciel (lampe à incandescence). Présence de toutes les couleurs.</li>
650
+ <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>
651
+ </ul>
652
+ `,
653
+ exercises: [
654
+ {
655
+ question: "Comment peut-on savoir que le Soleil contient de l'hydrogène ?",
656
+ 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."
657
+ }
658
+ ]
659
+ },
660
+ {
661
+ id: "p3",
662
+ title: "Chimie Organique",
663
+ content: `
664
+ <h1 class="course-title">Introduction à la Chimie Organique</h1>
665
+ <div class="course-meta">
666
+ <span><i class="far fa-clock"></i> 4 Heures</span>
667
+ <span><i class="fas fa-flask"></i> Chimie</span>
668
+ </div>
669
+ <p>La chimie organique étudie les composés du carbone (à quelques exceptions près).</p>
670
+ <h2>1. Les Hydrocarbures</h2>
671
+ <p>Ils ne contiennent que du carbone (C) et de l'hydrogène (H).</p>
672
+ <ul>
673
+ <li><strong>Alcanes :</strong> Liaisons simples C-C (ex: Méthane CH₄, Éthane C₂H₆).</li>
674
+ <li><strong>Alcènes :</strong> Possèdent une double liaison C=C (ex: Éthène C₂H₄).</li>
675
+ </ul>
676
+ <h2>2. Les Groupes Caractéristiques</h2>
677
+ <p>Ce sont des atomes ou groupes d'atomes qui donnent des propriétés spécifiques à la molécule.</p>
678
+ <ul>
679
+ <li>Alcools (groupe -OH)</li>
680
+ <li>Acides carboxyliques (groupe -COOH)</li>
681
+ </ul>
682
+ `,
683
+ exercises: [
684
+ {
685
+ question: "Donner la formule brute du butane (alcane à 4 carbones).",
686
+ solution: "La formule générale d'un alcane est CₙH₂ₙ₊₂.<br>Pour n=4 : C₄H₂₍₄₎₊₂ = C₄H₁₀."
687
+ }
688
+ ]
689
+ }
690
+ ]
691
+ },
692
+ {
693
+ id: "svt",
694
+ name: "SVT",
695
+ icon: "fa-dna",
696
+ chapters: [
697
+ {
698
+ id: "s1",
699
+ title: "Reproduction Humaine",
700
+ content: `
701
+ <h1 class="course-title">Reproduction Humaine</h1>
702
+ <div class="course-meta">
703
+ <span><i class="far fa-clock"></i> 4 Heures</span>
704
+ <span><i class="fas fa-female"></i> Biologie</span>
705
+ </div>
706
+ <h2>1. Le fonctionnement de l'appareil reproducteur féminin</h2>
707
+ <p>À partir de la puberté, les ovaires libèrent un ovule environ tous les 28 jours : c'est <strong>l'ovulation</strong>.</p>
708
+ <div class="box definition">
709
+ <span class="box-title">Cycle Utérin</span>
710
+ 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.
711
+ </div>
712
+ `,
713
+ exercises: [
714
+ {
715
+ question: "Où se produit généralement la fécondation chez la femme ?",
716
+ solution: "La fécondation a généralement lieu dans la trompe de Fallope (ou oviducte), et non dans l'utérus."
717
+ }
718
+ ]
719
+ },
720
+ {
721
+ id: "s2",
722
+ title: "Structure du Globe Terrestre",
723
+ content: `
724
+ <h1 class="course-title">La Structure du Globe</h1>
725
+ <div class="course-meta">
726
+ <span><i class="far fa-clock"></i> 5 Heures</span>
727
+ <span><i class="fas fa-globe-africa"></i> Géologie</span>
728
+ </div>
729
+ <p>La Terre est constituée de plusieurs couches concentriques.</p>
730
+ <h2>1. Les Enveloppes</h2>
731
+ <ul>
732
+ <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>
733
+ <li><strong>Le Manteau :</strong> Très épais (environ 2900 km), constitué de péridotites.</li>
734
+ <li><strong>Le Noyau :</strong> Divisé en noyau externe (liquide) et noyau interne (solide), composé essentiellement de fer et de nickel.</li>
735
+ </ul>
736
+ `,
737
+ exercises: [
738
+ {
739
+ question: "Qu'est-ce que le Moho ?",
740
+ solution: "Le Moho (discontinuité de Mohorovičić) est la limite de surface qui sépare la croûte terrestre du manteau supérieur."
741
+ }
742
+ ]
743
+ }
744
+ ]
745
+ },
746
+ {
747
+ id: "francais",
748
+ name: "Français",
749
+ icon: "fa-feather-alt",
750
+ chapters: [
751
+ {
752
+ id: "f1",
753
+ title: "L'Argumentation",
754
+ content: `
755
+ <h1 class="course-title">Les Genres de l'Argumentation</h1>
756
+ <div class="course-meta">
757
+ <span><i class="far fa-clock"></i> 2 Heures</span>
758
+ <span><i class="fas fa-pen-nib"></i> Littérature</span>
759
+ </div>
760
+ <p>Argumenter, c'est tenter de convaincre ou de persuader un destinataire d'une thèse (une opinion).</p>
761
+ <h2>1. Convaincre vs Persuader</h2>
762
+ <ul>
763
+ <li><strong>Convaincre</strong> : Faire appel à la raison (logique, faits, exemples).</li>
764
+ <li><strong>Persuader</strong> : Faire appel aux sentiments (émotions, pathos).</li>
765
+ </ul>
766
+ `,
767
+ exercises: [
768
+ {
769
+ question: "Dans un discours politique qui joue sur la peur de l'auditoire, quel mode d'argumentation est utilisé ?",
770
+ 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."
771
+ }
772
+ ]
773
+ },
774
+ {
775
+ id: "f2",
776
+ title: "Le Théâtre",
777
+ content: `
778
+ <h1 class="course-title">Le Texte de Théâtre</h1>
779
+ <div class="course-meta">
780
+ <span><i class="far fa-clock"></i> 3 Heures</span>
781
+ <span><i class="fas fa-masks-theater"></i> Littérature</span>
782
+ </div>
783
+ <p>Le théâtre est un art de la représentation. Le texte est destiné à être joué par des comédiens.</p>
784
+ <h2>1. Les Conventions</h2>
785
+ <ul>
786
+ <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>
787
+ <li><strong>Le Dialogue :</strong> Les personnages parlent les uns aux autres.</li>
788
+ <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>
789
+ </ul>
790
+ `,
791
+ exercises: [
792
+ {
793
+ question: "Quelle est la différence entre un monologue et un aparté ?",
794
+ 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."
795
+ }
796
+ ]
797
+ }
798
+ ]
799
+ },
800
+ {