Noteo/index.html at main · Pyronixus/Noteo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO -->
    <title>Noteo. — Gestion de notes &amp; moyennes académiques</title>
    <meta name="description" content="Noteo est ton espace académique premium pour gérer tes notes, calculer tes moyennes et analyser tes résultats par matière, semestre ou trimestre.">
    <meta name="author" content="Pyro">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#6366f1" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#05050a" media="(prefers-color-scheme: dark)">
    <meta name="color-scheme" content="light dark">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Noteo. — Gestion de notes &amp; moyennes académiques">
    <meta property="og:description" content="Gère tes notes, calcule tes moyennes et suis tes résultats académiques avec Noteo.">
    <meta property="og:image" content="Source/Assets/Img/logo.png">
    <meta property="og:locale" content="fr_FR">
    <meta property="og:site_name" content="Noteo.">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Noteo. — Gestion de notes &amp; moyennes académiques">
    <meta name="twitter:description" content="Gère tes notes, calcule tes moyennes et suis tes résultats académiques avec Noteo.">
    <meta name="twitter:image" content="Source/Assets/Img/logo.png">

    <!-- Icons -->
    <link rel="icon" type="image/png" href="Source/Assets/Img/logo.png">
    <link rel="apple-touch-icon" href="Source/Assets/Img/logo.png">

    <!-- Resource hints (early connections) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://cdn.tailwindcss.com">
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    <link rel="dns-prefetch" href="https://ui-avatars.com">

    <!-- Tailwind (blocking — required for first paint) -->
    <script src="https://cdn.tailwindcss.com" fetchpriority="high"></script>

    <!-- Chart.js (loaded on demand — only when Charts tab is opened) -->

    <!-- EmailJS (loaded on demand — only needed for PIN recovery) -->

    <!-- Fonts -->
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- OpenDyslexic: lazy-loaded (only needed when dyslexia setting is on) -->
    <link href="https://cdn.jsdelivr.net/gh/antijingo/open-dyslexic@1.0/src/open-dyslexic.css" rel="stylesheet" media="print" onload="this.media='all'">

    <!-- Styles -->
    <link rel="preload" as="style" href="Source/code/style.css">
    <link rel="stylesheet" href="Source/code/style.css">
</head>
<body class="antialiased light-mode">

    <!-- Loading Screen -->
    <div id="loading-screen" class="flex justify-center items-center h-screen">
        <div class="text-center">
            <div class="pulse-logo w-24 h-24 rounded-[2rem] mx-auto mb-8 flex items-center justify-center shadow-2xl bg-gradient-to-tr from-indigo-500 to-purple-500">
                <span class="text-white text-5xl font-black">N.</span>
            </div>
            <div class="flex justify-center gap-3">
                <div class="w-4 h-4 rounded-full bg-indigo-500 animate-bounce" style="animation-delay: 0s"></div>
                <div class="w-4 h-4 rounded-full bg-purple-500 animate-bounce" style="animation-delay: 0.1s"></div>
                <div class="w-4 h-4 rounded-full bg-pink-500 animate-bounce" style="animation-delay: 0.2s"></div>
            </div>
        </div>
    </div>

    <div class="blobs-container">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        <div class="blob blob-3"></div>
    </div>

    <!-- Toast Container -->
    <div id="toast-container"></div>

    <!-- Login Screen -->
    <div id="login-screen" class="hidden min-h-screen flex items-center justify-center p-3 sm:p-6">
        <div class="glass-card p-6 sm:p-12 rounded-[1.5rem] sm:rounded-[3rem] w-full max-w-md animate-entrance text-center relative overflow-hidden">
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

            <div class="w-20 h-20 rounded-[1.8rem] mx-auto mb-8 flex items-center justify-center shadow-2xl bg-gradient-to-tr from-indigo-500 to-purple-500 hover:scale-110 transition-transform duration-500">
                <span class="text-white text-4xl font-black">N.</span>
            </div>
            <h1 class="text-3xl font-black italic text-[var(--text-main)] mb-2 tracking-tight">Noteo.</h1>
            <p class="text-[var(--text-muted)] text-sm mb-8 font-medium">Ton espace académique premium</p>

            <form id="login-form" class="space-y-4">
                <input type="text" id="prenom" required placeholder="Prénom" title="Prénom" class="w-full px-6 py-4 rounded-2xl outline-none font-bold text-[var(--text-main)]">
                <input type="text" id="nom" required placeholder="Nom" title="Nom" class="w-full px-6 py-4 rounded-2xl outline-none font-bold text-[var(--text-main)]">
                <select id="new-account-period-type" title="Type d'organisation de l'année" class="w-full px-6 py-4 rounded-2xl outline-none font-bold text-[var(--text-main)] bg-[var(--input-bg)] border border-[var(--border)] text-sm">
                    <option value="semesters">Organisation en Semestres</option>
                    <option value="trimesters">Organisation en Trimestres</option>
                </select>
                <div class="mt-2 text-left text-sm text-[var(--text-muted)] space-y-2">
                    <p class="font-bold text-[var(--text-main)]">Sauvegarde des données</p>
                    <label class="flex items-center gap-2">
                        <input type="radio" name="storage-mode" value="local" checked class="form-radio" />
                        <span>Local (sur cet appareil)</span>
                    </label>
                    <label class="flex items-center gap-2">
                        <input type="radio" name="storage-mode" value="cloud" class="form-radio" />
                        <span>Cloud (synchronisation via lien partageable)</span>
                    </label>
                </div>
                <button type="submit" title="Accéder à mon espace" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-black py-4 rounded-2xl shadow-lg hover:shadow-indigo-500/30 hover:scale-[1.02] active:scale-95 transition-all">Accéder</button>
            </form>

            <div id="login-sessions-area" class="mt-8 pt-8 border-t border-[var(--border)] hidden">
                <p class="text-[10px] font-black uppercase text-[var(--text-muted)] tracking-widest mb-4">Comptes récents</p>
                <div id="login-sessions-list" class="flex flex-col gap-2"></div>
            </div>
        </div>
    </div>

    <!-- User Selection Screen -->
    <div id="user-selection-screen" class="hidden min-h-screen flex items-center justify-center p-3 sm:p-6">
        <div class="w-full max-w-4xl animate-entrance text-center">
            <h1 class="text-2xl sm:text-4xl font-black italic text-[var(--text-main)] mb-2 tracking-tight">Qui est-ce ?</h1>
            <p class="text-[var(--text-muted)] text-sm sm:text-lg mb-6 sm:mb-12 font-medium">Sélectionnez votre profil pour continuer.</p>
            <div id="user-selection-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-8">
                <!-- User cards will be injected here by JS -->
            </div>
            <div class="mt-8">
                <label class="flex items-center justify-center gap-3 cursor-pointer text-sm">
                        <input type="checkbox" id="stay-logged-in-checkbox" title="Rester connecté" placeholder="Rester connecté" class="styled-checkbox">
                    <span class="font-bold text-[var(--text-muted)]">Rester connecté (2h)</span>
                </label>
            </div>
            <div class="mt-8 pt-8 border-t border-[var(--border)]">
                <button onclick="addNewAccountFromSelection()" class="px-8 py-4 rounded-2xl bg-indigo-500/10 text-indigo-500 font-bold hover:bg-indigo-500 hover:text-white transition-all shadow-sm">
                    <svg class="w-5 h-5 inline-block mr-2 -mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                    Ajouter un autre utilisateur
                </button>
            </div>
        </div>
    </div>

    <!-- Main Dashboard -->
    <div id="dashboard-screen" class="hidden min-h-screen flex flex-col opacity-0 transition-opacity duration-1000 ">
        <header class="sticky top-0 z-40 bg-[var(--bg-body)]/40 backdrop-blur-md border-b border-[var(--border)]">
            <div class="max-w-7xl mx-auto px-3 sm:px-6 py-2 sm:py-3 flex items-center justify-between flex-wrap gap-2">
                <div class="flex items-center gap-3 sm:gap-6 md:gap-12 flex-shrink-0">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 to-purple-500 flex items-center justify-center shadow-lg hover:scale-110 transition-transform">
                            <span class="text-white text-xl font-black">N.</span>
                        </div>
                        <span class="text-2xl font-black italic text-[var(--text-main)] tracking-tighter hidden sm:block">Noteo.</span>
                        <span id="mobile-semester-label" class="hidden phone-xp:flex items-center gap-2 text-sm font-bold text-[var(--text-muted)]">Semestre 1</span>
                    </div>

                    <nav class="flex gap-1 sm:gap-2 bg-[var(--input-bg)] p-1 sm:p-1.5 rounded-xl sm:rounded-2xl border border-[var(--card-border)]">
                        <button onclick="switchTab('notes')" id="btn-notes" class="tab-btn active px-3 sm:px-6 py-2 sm:py-2.5 rounded-lg sm:rounded-xl text-[0.65rem] sm:text-xs font-black uppercase tracking-widest transition-all">Notes</button>
                        <button onclick="switchTab('charts')" id="btn-charts" class="tab-btn px-3 sm:px-6 py-2 sm:py-2.5 rounded-lg sm:rounded-xl text-[0.65rem] sm:text-xs font-black uppercase tracking-widest transition-all">Graphiques</button>
                    </nav>

                    <!-- Semester/Period Selector -->
                    <div class="relative hidden md:block">
                        <div class="flex items-center rounded-2xl bg-[var(--input-bg)] border border-[var(--border)] overflow-hidden">
                            <button onclick="cycleSemester(-1)" title="Période précédente" class="h-12 w-10 flex items-center justify-center text-[var(--text-muted)] hover:bg-[var(--bg-card)] transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                            </button>
                            <button onclick="toggleSemesterMenu(event)" title="Menu des périodes" class="h-12 px-4 flex items-center gap-2 text-[var(--text-main)] hover:bg-[var(--bg-card)] transition-colors border-l border-r border-[var(--border)]">
                                <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                <span id="current-semester-name" class="font-bold text-sm"></span>
                                <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                            </button>
                            <button onclick="cycleSemester(1)" title="Période suivante" class="h-12 w-10 flex items-center justify-center text-[var(--text-muted)] hover:bg-[var(--bg-card)] transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                            </button>
                        </div>
                        <div id="semester-menu" class="dropdown-menu absolute left-0 mt-3 w-56 sm:w-64 glass-card rounded-[2rem] p-4 z-[100]">
                            <!-- JS will populate this -->
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-2 sm:gap-3 flex-shrink-0">
                    <!-- Bouton Thème avec animation précise -->
                    <button onclick="cycleTheme()" title="Changer le thème" class="relative overflow-hidden w-10 h-10 sm:w-12 sm:h-12 rounded-xl sm:rounded-2xl bg-[var(--input-bg)] border border-[var(--border)] text-[var(--text-main)] hover:border-indigo-500 transition-all hover:scale-105 active:scale-95">
                        <div class="theme-icon-wrapper sun-icon">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z" /></svg>
                        </div>
                        <div class="theme-icon-wrapper moon-icon">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
                        </div>
                    </button>

                    <!-- Bouton Paramètres (Engrenage) -->
                    <button onclick="openSettings()" title="Ouvrir les paramètres" class="w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center rounded-xl sm:rounded-2xl bg-[var(--input-bg)] border border-[var(--border)] text-[var(--text-main)] hover:text-indigo-500 hover:border-indigo-500 transition-all hover:scale-105 active:scale-95">
                        <svg class="w-5 h-5 hover:rotate-90 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                    </button>

                    <!-- Profil & Dropdown basique -->
                    <div class="relative">
                        <button onclick="toggleUserMenu(event)" class="h-10 sm:h-12 px-2 sm:px-4 flex items-center gap-2 sm:gap-3 rounded-xl sm:rounded-2xl bg-indigo-500/10 text-indigo-600 hover:bg-indigo-500 hover:text-white transition-all">
                            <span id="header-user-name" class="font-bold text-sm hidden md:block">--</span>
                            <img src="" id="user-avatar" class="w-7 h-7 rounded-full" alt="Avatar">
                        </button>

                        <div id="user-menu" class="dropdown-menu absolute right-0 mt-3 w-48 sm:w-56 glass-card rounded-[2rem] p-4 z-[100]">
                            <div class="mb-4 px-2">
                                <p class="text-[10px] font-black uppercase text-indigo-500 tracking-widest mb-1">Actuel</p>
                                <p id="user-display" class="text-lg font-black truncate">--</p>
                            </div>
                            <div class="space-y-1">
                                <button id="lock-session-btn" onclick="lockSession()" class="w-full text-left px-3 py-2 text-xs font-bold text-[var(--text-main)] hover:bg-[var(--input-bg)] rounded-xl transition-all flex items-center justify-between" style="display: none;">
                                    <span class="flex items-center gap-2" title="Verrouiller la session">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                                        Verrouiller
                                    </span>
                                    <kbd class="text-[10px] font-mono bg-[var(--bg-body)] px-1.5 py-0.5 rounded-md border border-[var(--border)]">Ctrl+L</kbd>
                                </button>
                                <button onclick="openUserSwitchModal()" class="w-full text-left px-3 py-2 text-xs font-bold text-[var(--text-main)] hover:bg-[var(--input-bg)] rounded-xl transition-all flex items-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                                    Changer d'utilisateur
                                </button>
                            </div>
                            <div class="mt-2 pt-2 border-t border-[var(--border)]">
                                <button onclick="logout()" class="w-full text-left px-3 py-2 text-xs font-black text-rose-500 uppercase tracking-widest hover:bg-rose-500/10 rounded-xl transition-all">Se déconnecter</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <main class="max-w-7xl mx-auto px-3 sm:px-6 py-4 sm:py-8 md:py-12 w-full flex-grow">
            <!-- Tab: Notes -->
            <section id="tab-notes" class="animate-entrance">
                <div class="flex flex-col lg:flex-row gap-4 sm:gap-8 xl:gap-12">
                    <!-- Main content -->
                    <div class="flex-grow min-w-0 space-y-12">
                        <!-- Input Form -->
                        <div id="main-card" class="glass-card p-4 sm:p-8 md:p-10 rounded-[1.5rem] sm:rounded-[2rem] md:rounded-[3rem] transition-all duration-500 cursor-pointer" onclick="if(this.classList.contains('collapsed')) toggleMainCard()">
                            <div class="flex justify-between items-center mb-3 sm:mb-6">
                                <div class="flex items-center gap-2 sm:gap-3">
                                    <h2 class="text-lg sm:text-2xl font-black text-[var(--text-main)] tracking-tight">Ajouter une matière</h2>
                                    <button onclick="event.stopPropagation(); openTutoModal()" title="Comment ça marche ?" class="w-10 h-10 flex items-center justify-center rounded-full bg-[var(--input-bg)] border border-[var(--border)] text-[var(--text-muted)] hover:text-indigo-500 hover:border-indigo-500 transition-all hover:scale-105 active:scale-95">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    </button>
                                </div>
                                <div>
                                    <button onclick="event.stopPropagation(); toggleMainCard()" id="toggle-main-card-btn" title="Réduire/Agrandir le formulaire" class="w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center rounded-xl sm:rounded-2xl bg-[var(--input-bg)] border border-[var(--border)] text-[var(--text-main)] hover:text-indigo-500 hover:border-indigo-500 transition-all hover:scale-105 active:scale-95">
                                        <svg id="main-card-icon-minus" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M20 12H4"></path></svg>
                                        <svg id="main-card-icon-plus" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path></svg>
                                    </button>
                                </div>
                            </div>

                            <div id="main-card-content">
                              <form id="calc-form" class="space-y-4 sm:space-y-8">
                                <div class="flex flex-col md:flex-row md:items-end justify-between gap-3 sm:gap-6">
                                    <div class="space-y-3 flex-grow">
                                        <label class="text-[10px] font-black uppercase text-[var(--text-muted)] tracking-widest pl-2">Matière</label>
                                <input type="text" id="subject-name" required title="Nom de la matière" placeholder="Ex: Mathématiques" aria-label="Nom de la matière" class="w-full px-6 py-4 rounded-2xl text-xl font-extrabold focus:ring-2 focus:ring-indigo-500/50 bg-[var(--input-bg)] border border-[var(--border)] text-[var(--text-main)]">
                                    </div>
                                    <div class="relative">
                                        <label class="text-[10px] font-black uppercase text-[var(--text-muted)] tracking-widest pl-2">Couleur</label>
                                        <button type="button" onclick="toggleColorMenu(event)" class="mt-1 w-full md:w-48 h-[58px] px-4 flex items-center justify-between rounded-2xl bg-[var(--input-bg)] border border-[var(--border)]">
                                            <div class="flex items-center gap-3">
                                                <div id="selected-color-preview" class="w-6 h-6 rounded-full" style="background-color: #6366f1;"></div>
                                                <span id="selected-color-name" class="font-bold">Indigo</span>
                                            </div>
                                            <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                        </button>
                                        <div id="color-menu" class="dropdown-menu absolute right-0 mt-2 w-52 sm:w-64 glass-card rounded-[2rem] p-4 z-50">
                                            <div class="grid grid-cols-4 sm:grid-cols-6 gap-3">
                                                <div class="color-dot bg-indigo-500 text-indigo-500" data-color="#6366f1" data-name="Indigo" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-emerald-400 text-emerald-400" data-color="#34d399" data-name="Émeraude" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-rose-400 text-rose-400" data-color="#fb7185" data-name="Rose" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-amber-400 text-amber-400" data-color="#fbbf24" data-name="Ambre" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-purple-500 text-purple-500" data-color="#a855f7" data-name="Violet" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-sky-400 text-sky-400" data-color="#38bdf8" data-name="Ciel" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-teal-400 text-teal-400" data-color="#2dd4bf" data-name="Turquoise" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-lime-400 text-lime-400" data-color="#a3e635" data-name="Citron Vert" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-orange-500 text-orange-500" data-color="#f97316" data-name="Orange" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-fuchsia-500 text-fuchsia-500" data-color="#d946ef" data-name="Fuchsia" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-cyan-400 text-cyan-400" data-color="#22d3ee" data-name="Cyan" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-slate-500 text-slate-500" data-color="#64748b" data-name="Ardoise" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-green-400 text-green-400" data-color="#4ade80" data-name="Vert" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-yellow-400 text-yellow-400" data-color="#facc15" data-name="Jaune" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-pink-500 text-pink-500" data-color="#ec4899" data-name="Rose Vif" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-blue-500 text-blue-500" data-color="#3b82f6" data-name="Bleu" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-red-400 text-red-400" data-color="#f87171" data-name="Rouge" onclick="selectColor(this)"></div>
                                                <div class="color-dot bg-zinc-400 text-zinc-400" data-color="#a1a1aa" data-name="Gris" onclick="selectColor(this)"></div>
                                            </div>
                                            <div class="mt-4 pt-4 border-t border-[var(--border)]"><button type="button" onclick="document.getElementById('custom-color-picker').click()" class="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-xl font-bold bg-[var(--input-bg)] border border-[var(--border)] hover:border-indigo-400 transition-all"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>Couleur personnalisée</button></div>
                                            <input title="Couleur personnalisée" type="color" id="custom-color-picker" class="hidden" onchange="setCustomColor(this.value)">
                                        </div>
                                    </div>
                                </div>

                                <div class="flex flex-col md:flex-row items-center gap-4 sm:gap-8 bg-[var(--bg-body)]/50 p-3 sm:p-6 md:p-8 rounded-[1.25rem] sm:rounded-[2rem] md:rounded-[2.5rem] border border-[var(--border)]">
                                    <!-- Fraction Input UI -->
                                    <div class="flex-grow flex flex-col items-center justify-center relative fraction-input-container w-full py-2 sm:py-4">
                                        <input type="text" id="calc-top" required placeholder="Note (ex: 15+8 ou 12x2)" title="Note ou calcul de notes" aria-label="Note" class="w-full text-center outline-none text-2xl sm:text-4xl font-black text-[var(--text-main)] transition-all hover:scale-105">
                                        <div class="fraction-bar my-1 sm:my-2"></div>
                                        <input type="text" id="calc-bot" required placeholder="Barème (ex: 20)" title="Barème de la note" aria-label="Barème" class="w-full text-center outline-none text-base sm:text-xl font-bold text-[var(--text-muted)] transition-all hover:scale-105">
                                    </div>

                                    <button type="submit" class="w-full md:w-32 h-14 sm:h-20 md:h-32 bg-gradient-to-br from-indigo-500 to-purple-600 text-white rounded-xl sm:rounded-[1.5rem] md:rounded-[2rem] flex flex-col items-center justify-center gap-1 sm:gap-2 shadow-lg hover:shadow-indigo-500/40 hover:scale-[1.05] active:scale-95 transition-all">
                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path></svg>
                                        <span class="text-xs font-black uppercase tracking-widest">Ajouter</span>
                                    </button>
                                </div>
                              </form>
                            </div>
                        </div>

                        <!-- Cloud Import Section (for mobile view mode) -->
                        <div id="cloud-import-section" class="glass-card p-4 sm:p-8 md:p-10 rounded-[1.5rem] sm:rounded-[2rem] md:rounded-[3rem] transition-all duration-500" style="display: none;">
                            <div class="flex justify-between items-center mb-6">
                                <div class="flex items-center gap-3">
                                    <h2 class="text-2xl font-black text-[var(--text-main)] tracking-tight">Importer un compte</h2>
                                    <button onclick="openTutoModal()" title="Comment ça marche ?" class="w-10 h-10 flex items-center justify-center rounded-full bg-[var(--input-bg)] border border-[var(--border)] text-[var(--text-muted)] hover:text-indigo-500 hover:border-indigo-500 transition-all hover:scale-105 active:scale-95">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    </button>
                                </div>
                            </div>
                            <div class="space-y-6">
                                <div class="space-y-3">
                                    <label class="text-[10px] font-black uppercase text-[var(--text-muted)] tracking-widest pl-2">Lien de partage cloud</label>
                                    <input type="text" id="cloud-link-input" placeholder="Collez votre lien de partage cloud ici" class="w-full px-6 py-4 rounded-2xl text-lg font-bold focus:ring-2 focus:ring-indigo-500/50 bg-[var(--input-bg)] border border-[var(--border)] text-[var(--text-main)]">
                                </div>
                                <button onclick="importCloudAccount()" class="w-full bg-gradient-to-br from-indigo-500 to-purple-600 text-white font-black py-4 rounded-2xl shadow-lg hover:shadow-indigo-500/40 hover:scale-[1.02] active:scale-95 transition-all">
                                    Importer le compte
                                </button>
                            </div>
                        </div>

                        <!-- Grades List -->
                        <div class="space-y-4">
                            <div id="grades-actions" class="flex justify-end z-10 relative">
                                <div class="relative mr-auto">
                                    <button id="sort-menu-btn" onclick="toggleSortMenu(event)" title="Trier les matières" class="text-xs font-black uppercase tracking-widest text-[var(--text-main)] bg-[var(--input-bg)] px-3 py-2 rounded-xl border border-[var(--border)] flex items-center gap-3">
                                        <svg id="sort-menu-btn-icon" class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
                                        <span id="sort-menu-btn-label" class="text-xs font-black">Trier</span>
                                        <svg class="w-3 h-3 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                    </button>
                                    <div id="sort-menu" class="dropdown-menu absolute left-0 mt-3 w-64 glass-card rounded-[1.25rem] p-3 z-50" style="display:none;">
                                        <div class="flex items-center justify-between mb-2">
                                            <strong class="text-sm">Trier les matières</strong>
                                            <button onclick="toggleSortOrder()" id="sort-order-btn-mini" class="text-xs font-bold text-indigo-500 hover:text-indigo-600 bg-indigo-500/10 px-2 py-1 rounded-lg transition-all flex items-center gap-2">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
                                                <span>Décroissant</span>
                                            </button>
                                        </div>
                                        <div id="sort-options-list" class="grid grid-cols-1 gap-1"></div>
                                    </div>
                                </div>
                                <button onclick="toggleAllAccordions()" class="text-xs font-black uppercase tracking-widest text-indigo-500 hover:text-indigo-600 bg-indigo-500/10 px-4 py-2 rounded-xl transition-all hover:scale-105">
                                    Tout déplier / replier
                                </button>
                            </div>
                            <div id="grades-container"></div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Tab: Analyses (Charts - NEW) -->
            <section id="tab-charts" class="hidden animate-entrance">
                <div class="flex flex-col lg:flex-row gap-4 sm:gap-8">
                    <!-- Controls Sidebar -->
                    <div class="w-full lg:w-96 glass-card p-4 sm:p-6 rounded-[1.25rem] sm:rounded-[2rem] self-start lg:sticky top-28">
                        <h3 class="font-black text-lg mb-4 text-[var(--text-main)]">1. Choisir les matières</h3>
                        <div id="chart-subject-selector" class="space-y-2 max-h-48 overflow-y-auto pr-2 border-b border-[var(--border)] pb-4 mb-4"></div>
                        <h3 class="font-black text-lg mb-4 text-[var(--text-main)]">2. Choisir un graphique</h3>
                        <div id="chart-type-selector" class="space-y-1"></div>
                    </div>
                    <!-- Chart Display Area -->
                    <div class="flex-grow min-w-0">
                        <div class="flex justify-between items-center mb-4 sm:mb-6">
                            <h2 class="text-xl sm:text-3xl font-black">Analyses</h2>
                            <div class="flex items-center gap-2">
                                <button onclick="updateAllCharts()" class="px-4 py-2 rounded-lg text-xs font-bold text-indigo-500 hover:bg-indigo-500/10 transition-colors">Mettre à jour</button>
                                <button onclick="clearCharts()" class="px-4 py-2 rounded-lg text-xs font-bold text-rose-500 hover:bg-rose-500/10 transition-colors">Réinitialiser</button>
                            </div>
                        </div>
                        <div id="charts-grid" class="grid grid-cols-1 xl:grid-cols-2 gap-4 sm:gap-8"></div>
                        <div id="no-charts-msg" class="hidden text-center py-20 glass-card rounded-[2rem]">
                            <svg class="w-24 h-24 mx-auto mb-6 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <footer class="mt-auto p-3 sm:p-4 text-center text-[var(--text-muted)] text-xs sm:text-sm">
            <div class="flex items-center justify-center flex-wrap gap-3 sm:gap-6">
                <span>Noteo <button onclick="openVersionModal()" class="hover:text-indigo-500 transition-colors font-bold">v2.2</button></span>
                <button onclick="openOpenSourceModal()" class="hover:text-green-500 transition-colors">Open Source</button>
                <span>Copyright © <button onclick="openPyroModal()" class="hover:text-purple-500 transition-colors"><strong>Pyro</strong></button></span>
                <button onclick="openLegalModal()" class="hover:text-blue-500 transition-colors">Légal</button>
                <button onclick="openHelpModal()" class="hover:text-green-500 transition-colors">Aide</button>
            </div>
        </footer>

        <!-- Mobile Bottom Navigation Bar (≤639px only) -->
        <nav id="mobile-nav-bar" aria-label="Navigation mobile">
            <button onclick="switchTab('notes')" id="mobile-btn-notes" class="mobile-nav-item active" aria-label="Notes">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                <span>Notes</span>
            </button>
            <div class="mobile-nav-semester">
                <button onclick="cycleSemester(-1)" aria-label="Période précédente" class="mobile-nav-sem-arrow">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path></svg>
                </button>
                <span id="mobile-nav-semester-name" class="mobile-nav-sem-name">—</span>
                <button onclick="cycleSemester(1)" aria-label="Période suivante" class="mobile-nav-sem-arrow">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path></svg>
                </button>
            </div>
            <button onclick="switchTab('charts')" id="mobile-btn-charts" class="mobile-nav-item" aria-label="Graphiques">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                <span>Graphiques</span>
            </button>
        </nav>
    </div>

    <!-- Modal: Switch User -->
    <div id="switch-user-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-md relative">
            <button onclick="closeModals()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-6 tracking-tight">Changer d'utilisateur</h2>
            <div id="modal-user-list" class="space-y-3 max-h-60 overflow-y-auto pr-2 mb-6"></div>
            <button onclick="addNewAccount()" class="w-full flex items-center justify-center gap-3 px-4 py-4 rounded-2xl font-bold bg-indigo-500 text-white hover:bg-indigo-600 hover:scale-[1.02] transition-all shadow-lg">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                Démarrer avec un nouvel utilisateur
            </button>
        </div>
    </div>

    <!-- Modal: Paramètres (Comptes & Notes) -->
    <div id="settings-modal" class="modal-overlay">
        <div class="modal-content glass-card p-4 sm:p-8 rounded-[1.5rem] sm:rounded-[3rem] w-full max-w-3xl relative max-h-[90vh] flex flex-col">
            <button onclick="closeModals()" title="Fermer" class="absolute top-4 right-4 sm:top-6 sm:right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors z-10">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <h2 class="text-xl sm:text-3xl font-black text-[var(--text-main)] mb-4 tracking-tight flex items-center gap-2 sm:gap-3">
                <svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                Paramètres
            </h2>

            <!-- Tabs -->
            <div class="flex border-b border-[var(--border)] mb-4 sm:mb-6 overflow-x-auto -mx-1 px-1" style="scrollbar-width: none;">
                <button id="settings-tab-btn-profile" onclick="switchSettingsTab('profile')" class="settings-tab-btn active flex-shrink-0">Profil</button>
                <button id="settings-tab-btn-interface" onclick="switchSettingsTab('interface')" class="settings-tab-btn flex-shrink-0">Interface</button>
                <button id="settings-tab-btn-behavior" onclick="switchSettingsTab('behavior')" class="settings-tab-btn flex-shrink-0">Comportement</button>
                <button id="settings-tab-btn-data" onclick="switchSettingsTab('data')" class="settings-tab-btn flex-shrink-0">Données</button>
                <button id="settings-tab-btn-accounts" onclick="switchSettingsTab('accounts')" class="settings-tab-btn flex-shrink-0">Comptes</button>
                <button id="settings-tab-btn-accessibility" onclick="switchSettingsTab('accessibility')" class="settings-tab-btn flex-shrink-0">Accessibilité</button>
            </div>

            <!-- Auth Setup (nested inside settings logic) -->
            <div id="auth-setup-content" class="hidden space-y-6">
                <h3 class="text-lg font-bold text-[var(--text-main)]">Type de protection</h3>
                <!-- Content will be injected by JS -->
            </div>

            <div class="flex-grow overflow-y-auto pr-4 -mr-4 space-y-8">
                <!-- Tab: Profile -->
                <div id="settings-tab-content-profile" class="settings-tab-content space-y-6">
                    <div class="p-6 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <h3 class="text-lg font-bold text-[var(--text-main)] mb-4">Profil Utilisateur Actif</h3>
                        <form id="profile-form" class="space-y-4 max-w-md">
                            <div>
                                <label for="settings-prenom" class="text-xs font-bold text-[var(--text-muted)]">Prénom</label>
                                <input type="text" id="settings-prenom" required title="Prénom" placeholder="Votre prénom" class="w-full mt-1 px-4 py-3 rounded-xl font-bold text-[var(--text-main)] bg-[var(--input-bg)] border border-[var(--border)]">
                            </div>
                            <div>
                                <label for="settings-nom" class="text-xs font-bold text-[var(--text-muted)]">Nom</label>
                                <input type="text" id="settings-nom" required title="Nom" placeholder="Votre nom" class="w-full mt-1 px-4 py-3 rounded-xl font-bold text-[var(--text-main)] bg-[var(--input-bg)] border border-[var(--border)]">
                            </div>
                            <div>
                                <label for="setting-periodType" class="text-xs font-bold text-[var(--text-muted)]">Organisation de l'année</label>
                                <select id="setting-periodType" title="Organisation de l'année" onchange="updateSetting('periodType', this.value)" class="w-full mt-1 px-4 py-3 rounded-xl font-bold text-[var(--text-main)] bg-[var(--input-bg)] border border-[var(--border)]">
                                    <option value="semesters">En Semestres</option>
                                    <option value="trimesters">En Trimestres</option>
                                </select>
                            </div>
                            <button type="submit" class="px-6 py-3 rounded-xl bg-indigo-600 text-white font-bold hover:bg-indigo-500 transition-all">Enregistrer le profil</button>
                        </form>
                    </div>
                    <div class="p-6 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <h3 class="text-lg font-bold text-[var(--text-main)] mb-4">Sécurité du compte</h3>
                        <div id="pin-management-area" class="space-y-2">
                            <!-- This will be populated by JS -->
                        </div>
                    </div>
                </div>

                <!-- Tab: Interface (NEW) -->
                <div id="settings-tab-content-interface" class="settings-tab-content hidden space-y-6">
                    <h3 class="text-lg font-bold text-[var(--text-main)]">Thème</h3>
                    <div class="p-2 bg-[var(--input-bg)] rounded-2xl flex gap-2 border border-[var(--border)]">
                        <button onclick="setThemePreference('light')" id="theme-btn-light" title="Thème Clair" class="flex-1 py-2 rounded-lg font-bold">Clair</button>
                        <button onclick="setThemePreference('dark')" id="theme-btn-dark" title="Thème Sombre" class="flex-1 py-2 rounded-lg font-bold">Sombre</button>
                        <button onclick="setThemePreference('system')" id="theme-btn-system" title="Thème Système" class="flex-1 py-2 rounded-lg font-bold">Système</button>
                    </div>
                    <h3 class="text-lg font-bold text-[var(--text-main)] pt-4">Affichage</h3>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Barre de navigation fixe</h4><p class="text-xs text-[var(--text-muted)]">Garder le menu visible au défilement.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-fixedNav" title="Barre de navigation fixe" placeholder="Barre de navigation fixe" onchange="updateSetting('fixedNav', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Mode Zen</h4><p class="text-xs text-[var(--text-muted)]">Masquer les éléments décoratifs pour plus de concentration.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-zenMode" title="Mode Zen" placeholder="Mode Zen" onchange="updateSetting('zenMode', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Afficher l'avatar</h4><p class="text-xs text-[var(--text-muted)]">Montrer votre photo de profil dans l'en-tête.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-showAvatar" title="Afficher l'avatar" placeholder="Afficher l'avatar" onchange="updateSetting('showAvatar', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <h3 class="text-lg font-bold text-[var(--text-main)] pt-4">Effets Visuels</h3>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Activer les animations</h4><p class="text-xs text-[var(--text-muted)]">Active ou désactive les animations de l'interface.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-animations" title="Activer les animations" placeholder="Activer les animations" onchange="updateSetting('animations', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Activer le flou</h4><p class="text-xs text-[var(--text-muted)]">Effet de verre dépoli sur les cartes.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-blur" title="Activer le flou" placeholder="Activer le flou" onchange="updateSetting('blur', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Afficher les blobs</h4><p class="text-xs text-[var(--text-muted)]">Affiche les formes colorées en arrière-plan.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-blobs" title="Afficher les blobs" placeholder="Afficher les blobs" onchange="updateSetting('blobs', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Masquer l'ajout de matière</h4><p class="text-xs text-[var(--text-muted)]">Cache le formulaire d'ajout de matière pour un mode visualisation.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-hideAddSubject" title="Masquer l'ajout de matière" placeholder="Masquer l'ajout de matière" onchange="updateSetting('hideAddSubject', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                </div>

                <!-- Tab: Comportement (NEW) -->
                <div id="settings-tab-content-behavior" class="settings-tab-content hidden space-y-6">
                    <h3 class="text-lg font-bold text-[var(--text-main)]">Général</h3>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <label for="sound-toggle" id="label-sound-toggle" class="font-bold text-[var(--text-main)]">Activer les sons de l'interface</label>
                        <label class="relative">
                            <input type="checkbox" id="sound-toggle" title="Activer les sons" placeholder="Activer les sons" class="sr-only peer" onchange="toggleSounds(this.checked)">
                            <div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div>
                            <div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <label for="setting-soundVolume" class="font-bold">Volume des sons</label>
                        <input type="range" min="0" max="1" step="0.05" id="setting-soundVolume" title="Volume des sons" aria-label="Volume des sons" oninput="updateSetting('soundVolume', parseFloat(this.value))" class="w-full sm:w-40 accent-indigo-500">
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Confirmer avant suppression</h4><p class="text-xs text-[var(--text-muted)]">Affiche une alerte avant toute suppression.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-confirmDelete" title="Confirmer avant suppression" placeholder="Confirmer avant suppression" onchange="updateSetting('confirmDelete', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <h3 class="text-lg font-bold text-[var(--text-main)] pt-4">Affichage des listes</h3>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div>
                            <h4 class="font-bold text-[var(--text-main)]">Tri des matières</h4>
                            <p class="text-xs text-[var(--text-muted)]">Le tri se gère via le bouton "Trier" à gauche de la liste des matières.</p>
                        </div>
                        <div class="text-xs font-bold text-[var(--text-muted)]">Déplacé vers le menu principal</div>
                    </div>
                    <div id="sort-order-container" class="hidden px-4 flex justify-end -mt-2">
                        <button onclick="toggleSortOrder()" id="sort-order-btn" class="text-xs font-bold text-indigo-500 hover:text-indigo-600 bg-indigo-500/10 hover:bg-indigo-500/20 px-3 py-1.5 rounded-lg transition-all flex items-center gap-2">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
                            <span>Décroissant</span>
                        </button>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Afficher la date des notes</h4><p class="text-xs text-[var(--text-muted)]">Affiche la date à côté de chaque note.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-showNoteDate" title="Afficher la date des notes" placeholder="Afficher la date des notes" onchange="updateSetting('showNoteDate', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                </div>

                <!-- Tab: Données -->
                <div id="settings-tab-content-data" class="settings-tab-content hidden space-y-6">
                    <h3 class="text-lg font-bold text-[var(--text-main)]">Sauvegarde et Restauration</h3>
                    <div class="p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)] space-y-3">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <button onclick="openExportModal()" title="Exporter les notes au format JSON" class="p-3 bg-[var(--bg-body)] rounded-lg font-bold hover:bg-indigo-500/10 hover:text-indigo-500 transition-all border border-[var(--border)]">Exporter les notes (JSON)</button>
                            <button onclick="exportFullAccount()" title="Exporter une sauvegarde complète du compte" class="p-3 bg-[var(--bg-body)] rounded-lg font-bold hover:bg-purple-500/10 hover:text-purple-500 transition-all border border-[var(--border)]">Exporter le compte (Sauvegarde)</button>
                            <button onclick="document.getElementById('import-input').click()" title="Importer un fichier JSON" class="col-span-full p-3 bg-[var(--bg-body)] rounded-lg font-bold hover:bg-emerald-500/10 hover:text-emerald-500 transition-all border border-[var(--border)]">Importer un fichier (JSON)</button>
                            <input type="file" id="import-input" title="Choisir un fichier JSON à importer" placeholder="Importer un fichier" class="hidden" accept=".json" onchange="importData(event)">
                        </div>
                    </div>

                    <h3 class="text-lg font-bold text-[var(--text-main)] pt-4">Cloud (synchronisation)</h3>
                    <div class="p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)] space-y-3">
                        <p class="text-sm text-[var(--text-muted)]">Générez un lien pour synchroniser vos données entre plusieurs appareils ou importez un lien reçu.</p>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <button onclick="generateCloudLink()" class="p-3 bg-[var(--bg-body)] rounded-lg font-bold hover:bg-indigo-500/10 hover:text-indigo-500 transition-all border border-[var(--border)]">Générer un lien de synchronisation</button>
                            <button onclick="importCloudLinkPrompt()" class="p-3 bg-[var(--bg-body)] rounded-lg font-bold hover:bg-emerald-500/10 hover:text-emerald-500 transition-all border border-[var(--border)]">Importer un lien de synchronisation</button>
                        </div>
                        <textarea id="cloud-link-output" class="w-full mt-2 p-3 rounded-xl border border-[var(--border)] bg-[var(--bg-body)] text-xs text-[var(--text-main)] hidden" rows="3" readonly placeholder="Le lien s'affichera ici..."></textarea>
                    </div>

                    <h3 class="text-lg font-bold text-[var(--text-main)] pt-4">Édition rapide des notes</h3>
                    <div id="settings-notes-list" class="space-y-4"></div>

                    <h3 class="text-lg font-bold text-rose-500 pt-4">Suppression des notes</h3>
                    <div class="p-4 bg-rose-500/10 rounded-2xl border border-rose-500/20 flex items-center justify-between">
                        <p class="font-medium text-sm text-rose-200">Supprime toutes les notes de <strong class="text-rose-100">l'utilisateur actuel</strong>.</p>
                        <button onclick="clearCurrentUserNotes()" class="px-4 py-2 rounded-lg bg-rose-500 text-white font-bold hover:bg-rose-600 transition-all">Supprimer</button>
                    </div>
                </div>

                <!-- Tab: Comptes -->
                <div id="settings-tab-content-accounts" class="settings-tab-content hidden space-y-6">
                    <h3 class="text-lg font-bold text-[var(--text-main)]">Gestion des comptes</h3>
                    <div id="settings-accounts-list" class="space-y-3"></div>
                    <h3 class="text-lg font-bold text-rose-500 pt-4">Réinitialisation de l'application</h3>
                    <div class="p-4 bg-rose-500/10 rounded-2xl border border-rose-500/20 flex items-center justify-between">
                        <p class="font-medium text-sm text-rose-200">Supprime <strong class="text-rose-100">tous les comptes et toutes les données</strong> de l'application.</p>
                        <button onclick="deleteAllData()" class="px-4 py-2 rounded-lg bg-rose-500 text-white font-bold hover:bg-rose-600 transition-all">Tout effacer</button>
                    </div>
                </div>

                <!-- Tab: Accessibilité (NEW) -->
                <div id="settings-tab-content-accessibility" class="settings-tab-content hidden space-y-6">
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Texte à fort contraste</h4><p class="text-xs text-[var(--text-muted)]">Améliore la lisibilité du texte.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-highContrast" title="Texte à fort contraste" placeholder="Texte à fort contraste" onchange="updateSetting('highContrast', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Réduire les mouvements</h4><p class="text-xs text-[var(--text-muted)]">Désactive la plupart des animations de l'interface.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-reduceMotion" title="Réduire les mouvements" placeholder="Réduire les mouvements" onchange="updateSetting('reduceMotion', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                        <div><h4 class="font-bold text-[var(--text-main)]">Police pour dyslexiques</h4><p class="text-xs text-[var(--text-muted)]">Utilise une police de caractères adaptée.</p></div>
                        <label class="relative"><input type="checkbox" id="setting-dyslexicFont" title="Police pour dyslexiques" placeholder="Police pour dyslexiques" onchange="updateSetting('dyslexicFont', this.checked)" class="sr-only peer"><div class="w-14 h-8 bg-slate-300 dark:bg-slate-700 rounded-full peer-checked:bg-indigo-500 transition-colors"></div><div class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Tutoriel -->
    <div id="tuto-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-lg relative">
            <button onclick="closeModals()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-6 tracking-tight flex items-center gap-3">
                <svg class="w-7 h-7 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Comment ça marche ?
            </h2>
            <ol class="space-y-4 text-[var(--text-muted)] font-medium list-decimal list-inside">
                <li>Va sur <strong>Pronote → Notes</strong>.</li>
                <li>Clique sur <strong>Par matière</strong> puis choisis une matière.</li>
                <li>Clique sur <strong>Afficher le calcul de la moyenne</strong>.</li>
                <li>Copie les notes au-dessus de la barre de fraction et colle-les sur le site.</li>
                <li>Fais pareil avec le bas, puis répète pour chaque matière. 👍</li>
            </ol>
            <button onclick="closeModals()" class="mt-8 w-full bg-indigo-600 hover:bg-indigo-500 text-white font-black py-3 rounded-2xl shadow-lg hover:shadow-indigo-500/30 transition-all">J'ai compris !</button>
        </div>
    </div>

    <!-- Modal: PIN Lock -->
    <div id="pin-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-sm relative text-center">
            <h2 id="pin-modal-title" class="text-2xl font-black text-[var(--text-main)] mb-2 tracking-tight">Verrouillage PIN</h2>
            <p id="pin-modal-user" class="text-[var(--text-muted)] mb-6"></p>

            <div class="flex justify-center items-center gap-3 h-12 mb-6">
                <div id="pin-display" class="text-5xl font-black tracking-[0.5em]"></div>
            </div>

            <div class="grid grid-cols-3 gap-4" role="group" aria-label="Clavier numérique pour code PIN">
                <button onclick="handlePinInput('1')" title="Chiffre 1" class="pin-btn">1</button><button onclick="handlePinInput('2')" title="Chiffre 2" class="pin-btn">2</button><button onclick="handlePinInput('3')" title="Chiffre 3" class="pin-btn">3</button>
                <button onclick="handlePinInput('4')" title="Chiffre 4" class="pin-btn">4</button><button onclick="handlePinInput('5')" title="Chiffre 5" class="pin-btn">5</button><button onclick="handlePinInput('6')" title="Chiffre 6" class="pin-btn">6</button>
                <button onclick="handlePinInput('7')" title="Chiffre 7" class="pin-btn">7</button><button onclick="handlePinInput('8')" title="Chiffre 8" class="pin-btn">8</button><button onclick="handlePinInput('9')" title="Chiffre 9" class="pin-btn">9</button>
                <button onclick="closePinModal()" title="Annuler" class="pin-btn !bg-rose-500/10 !text-rose-500">Annuler</button>
                <button onclick="handlePinInput('0')" title="Chiffre 0" class="pin-btn">0</button>
                <button onclick="handlePinInput('backspace')" title="Effacer" class="pin-btn flex items-center justify-center">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 002.828 0L19 12M3 12l6.414-6.414a2 2 0 012.828 0L19 12"></path></svg>
                </button>
            </div>
            <div class="mt-6">
                <label class="flex items-center justify-center gap-3 cursor-pointer">
                    <input type="checkbox" id="skip-pin-checkbox" title="Ne plus demander pendant 15 min" placeholder="Ne plus demander pendant 15 min" class="styled-checkbox">
                    <span class="text-sm font-bold text-[var(--text-muted)]" title="Option de délai de grâce PIN">Ne plus demander pendant 15 min</span>
                </label>
            </div>
            <button id="forgot-pin-btn" onclick="forgotPin()" class="hidden mt-4 text-sm font-bold text-indigo-500 hover:underline">Code PIN oublié ?</button>
        </div>
    </div>

    <!-- Modal: PIN Recovery -->
    <div id="recovery-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-sm relative text-center">
            <button onclick="closeRecoveryModal()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>

            <!-- Step 1: Confirm email -->
            <div id="recovery-step-email">
                <div class="w-14 h-14 mx-auto mb-4 rounded-2xl bg-indigo-500/10 flex items-center justify-center">
                    <svg class="w-7 h-7 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                </div>
                <h2 class="text-xl font-black text-[var(--text-main)] mb-2 tracking-tight">Récupération du PIN</h2>
                <p class="text-sm text-[var(--text-muted)] mb-5">Un code de vérification à 6 chiffres sera envoyé à votre adresse email.</p>
                <p id="recovery-email-display" class="text-sm font-bold text-[var(--text-main)] mb-5 bg-[var(--input-bg)] rounded-xl py-3 px-4"></p>
                <button onclick="sendRecoveryCode()" id="recovery-send-btn" class="w-full py-3 rounded-2xl font-bold text-white bg-indigo-600 hover:bg-indigo-500 transition-all shadow-lg">
                    Envoyer le code
                </button>
                <p id="recovery-send-error" class="hidden text-xs text-rose-500 font-bold mt-3"></p>
            </div>

            <!-- Step 2: Enter code -->
            <div id="recovery-step-code" class="hidden">
                <div class="w-14 h-14 mx-auto mb-4 rounded-2xl bg-emerald-500/10 flex items-center justify-center">
                    <svg class="w-7 h-7 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <h2 class="text-xl font-black text-[var(--text-main)] mb-2 tracking-tight">Entrez le code</h2>
                <p class="text-sm text-[var(--text-muted)] mb-5">Vérifiez votre boîte mail (et les spams).</p>
                <input type="text" id="recovery-code-input" maxlength="6" inputmode="numeric" pattern="[0-9]*" placeholder="000000" autocomplete="one-time-code" class="w-full text-center text-3xl font-black tracking-[0.4em] py-3 px-4 rounded-2xl bg-[var(--input-bg)] border border-[var(--border)] outline-none text-[var(--text-main)] mb-2">
                <p id="recovery-timer" class="text-xs text-[var(--text-muted)] font-bold mb-4"></p>
                <button onclick="verifyRecoveryCode()" id="recovery-verify-btn" class="w-full py-3 rounded-2xl font-bold text-white bg-emerald-600 hover:bg-emerald-500 transition-all shadow-lg">
                    Vérifier
                </button>
                <p id="recovery-code-error" class="hidden text-xs text-rose-500 font-bold mt-3"></p>
                <button onclick="sendRecoveryCode()" id="recovery-resend-btn" class="mt-3 text-sm font-bold text-indigo-500 hover:underline disabled:opacity-40 disabled:no-underline" disabled>Renvoyer le code</button>
            </div>

            <!-- Step 3: No email -->
            <div id="recovery-step-noemail" class="hidden">
                <div class="w-14 h-14 mx-auto mb-4 rounded-2xl bg-rose-500/10 flex items-center justify-center">
                    <svg class="w-7 h-7 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>
                </div>
                <h2 class="text-xl font-black text-[var(--text-main)] mb-2 tracking-tight">Aucun email configuré</h2>
                <p class="text-sm text-[var(--text-muted)] mb-5">Ce compte n'a pas d'email de récupération. Vous pouvez forcer la réinitialisation, mais cette action est <strong>irréversible</strong>.</p>
                <button onclick="forceResetPin()" class="w-full py-3 rounded-2xl font-bold text-white bg-rose-600 hover:bg-rose-500 transition-all shadow-lg">
                    Réinitialiser le PIN
                </button>
            </div>
        </div>
    </div>

    <!-- Modal: Duplicate Subject -->
    <div id="duplicate-subject-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-lg relative">
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-2 tracking-tight">Matière existante</h2>
            <p class="text-[var(--text-muted)] mb-6">Une matière nommée "<strong id="duplicate-subject-name"></strong>" existe déjà. Que souhaitez-vous faire ?</p>
            <div class="space-y-3">
                <button id="duplicate-opt-update" class="w-full text-left p-4 rounded-2xl font-bold bg-indigo-500/10 text-indigo-500 border border-indigo-500/20 hover:bg-indigo-500 hover:text-white transition-all">
                    <span class="block">Mettre à jour la matière existante</span>
                    <span class="block text-xs font-normal opacity-70">Ajoute les nouvelles notes à la matière existante.</span>
                </button>
                <button id="duplicate-opt-create" class="w-full text-left p-4 rounded-2xl font-bold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 hover:bg-emerald-500 hover:text-white transition-all">
                    <span class="block">Créer une nouvelle matière</span>
                    <span class="block text-xs font-normal opacity-70">Conserve l'ancienne et en crée une nouvelle avec le même nom.</span>
                </button>
                <button id="duplicate-opt-rename" class="w-full text-left p-4 rounded-2xl font-bold bg-[var(--input-bg)] border border-[var(--border)] hover:border-indigo-400 transition-all">
                    <span class="block">Renommer la nouvelle matière</span>
                    <span class="block text-xs font-normal opacity-70">Permet de choisir un autre nom avant de l'ajouter.</span>
                </button>
            </div>
            <button onclick="closeModals()" class="mt-6 w-full text-center text-sm font-bold text-[var(--text-muted)] hover:text-rose-500">Annuler</button>
        </div>
    </div>

    <!-- Modal: Export Semesters -->
    <div id="export-semester-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-md relative">
            <button onclick="closeModals()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-6 tracking-tight">Exporter les notes</h2>
            <p class="text-sm text-[var(--text-muted)] mb-4">Cochez les périodes que vous souhaitez inclure dans le fichier d'exportation.</p>
            <div id="export-semester-list" class="space-y-2 max-h-60 overflow-y-auto pr-2 mb-6">
                <!-- JS will populate this -->
            </div>
            <button type="button" onclick="performSelectiveExport()" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-black py-3 rounded-2xl shadow-lg transition-all">Exporter la sélection</button>
        </div>
    </div>

    <!-- Modal: Auth Setup -->
    <div id="auth-setup-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-md relative">
            <button onclick="closeModals()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-2 tracking-tight">Type de protection</h2>
            <p class="text-[var(--text-muted)] mb-6">Choisissez comment vous souhaitez protéger votre compte.</p>
            <div class="space-y-3">
                <button onclick="setupProtection('pin4')" class="w-full text-left p-4 rounded-2xl font-bold bg-[var(--input-bg)] border border-[var(--border)] hover:border-indigo-500 transition-all">PIN à 4 chiffres</button>
                <button onclick="setupProtection('pin6')" class="w-full text-left p-4 rounded-2xl font-bold bg-[var(--input-bg)] border border-[var(--border)] hover:border-indigo-500 transition-all">PIN à 6 chiffres</button>
                <button onclick="setupProtection('pin8')" class="w-full text-left p-4 rounded-2xl font-bold bg-[var(--input-bg)] border border-[var(--border)] hover:border-indigo-500 transition-all">PIN à 8 chiffres</button>
            </div>
            <div class="mt-6 pt-6 border-t border-[var(--border)]">
                <label for="recovery-email-input" class="text-xs font-bold text-[var(--text-muted)]">Email de récupération (Optionnel)</label>
                <input type="email" id="recovery-email-input" title="Email de récupération" placeholder="vous@email.com" class="w-full mt-1 px-4 py-3 rounded-xl font-bold text-[var(--text-main)] bg-[var(--input-bg)] border border-[var(--border)]">
                <p class="text-xs text-[var(--text-muted)] mt-2" title="Information sur l'email de récupération">Utilisé uniquement si vous oubliez votre code PIN. Laissez vide si vous ne souhaitez pas en définir.</p>
            </div>
        </div>
    </div>

    <!-- Modal: Fullscreen Chart -->
    <div id="fullscreen-chart-modal" class="modal-overlay !bg-black/90">
        <div class="absolute top-2 sm:top-4 right-3 sm:right-6 flex gap-2 sm:gap-4 z-20">
            <button onclick="navigateFullscreenChart(-1)" title="Graphique précédent" class="w-12 h-12 flex items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-all">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            </button>
            <button onclick="navigateFullscreenChart(1)" title="Graphique suivant" class="w-12 h-12 flex items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-all">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            </button>
            <button onclick="closeModals()" title="Fermer" class="w-12 h-12 flex items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-all">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
        </div>
        <div id="fullscreen-chart-content" class="w-full h-full p-4 sm:p-8 md:p-16"><canvas id="fullscreen-chart-canvas"></canvas></div>
    </div>

    <!-- Modal: Reload Required -->
    <div id="reload-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-sm relative text-center">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-500">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
            </div>
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-2">Rechargement requis</h2>
            <p class="text-[var(--text-muted)] text-sm mb-6 font-medium">Pour appliquer ce changement, l'application doit être rechargée. Pas d'inquiétude, vos données sont sauvegardées en temps réel.</p>
            <button onclick="window.location.reload()" class="w-full py-3 rounded-xl bg-indigo-600 text-white font-bold hover:bg-indigo-500 transition-all mb-4 shadow-lg shadow-indigo-500/30">Recharger la page</button>
            <label class="flex items-center justify-center gap-2 cursor-pointer text-xs text-[var(--text-muted)] hover:text-[var(--text-main)] transition-colors"><input type="checkbox" title="Recharger automatiquement" placeholder="Recharger automatiquement" onchange="updateSetting('autoReload', this.checked); if(this.checked) window.location.reload();" class="styled-checkbox w-4 h-4"><span class="font-bold">Ne plus afficher et recharger automatiquement</span></label>
        </div>
    </div>

    <!-- Modal: Phone Experience Warning -->
    <div id="phone-warning-modal" class="modal-overlay">
        <div class="modal-content glass-card p-6 rounded-[2.5rem] w-full max-w-md relative text-center">
            <button onclick="closeModals()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-4">Expérience mobile restreinte</h2>
            <p class="text-[var(--text-muted)] text-sm mb-6">Vous utilisez une version simplifiée sur mobile. Pour une expérience complète, il est recommandé d'utiliser un PC.</p>
            <div class="flex flex-col gap-4">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" id="dismiss-phone-warning" class="w-5 h-5 rounded border-2 border-[var(--border)] bg-[var(--input-bg)] checked:bg-indigo-500 checked:border-indigo-500 transition-all">
                    <span class="text-sm text-[var(--text-main)] font-medium">Ne plus afficher ce message</span>
                </label>
                <button onclick="closeModals()" class="w-full py-3 rounded-xl bg-indigo-600 text-white font-bold hover:bg-indigo-500 transition-all">J'ai compris</button>
            </div>
        </div>
    </div>

    <!-- Modal: Version -->
    <div id="version-modal" class="modal-overlay">
        <div class="modal-content glass-card p-8 rounded-[3rem] w-full max-w-lg relative">
            <button onclick="closeModals()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-6 tracking-tight flex items-center gap-3">
                <svg class="w-7 h-7 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Version et Changelog
            </h2>
            <div class="space-y-4">
                <div class="p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                    <h3 class="text-lg font-bold text-[var(--text-main)] mb-2">Version actuelle</h3>
                    <p class="text-[var(--text-muted)]">2.3 (macOS, performances maximales et correctifs)</p>
                </div>
                <div class="p-4 bg-[var(--input-bg)] rounded-2xl border border-[var(--border)]">
                    <h3 class="text-lg font-bold text-[var(--text-main)] mb-4">Changelog</h3>
                    <p class="text-[var(--text-muted)] mb-4">Toutes les versions et leurs détails sont disponibles dans la fenêtre ci-dessous.</p>
                    <a href="changelog.html" class="inline-flex items-center gap-2 text-indigo-500 hover:text-indigo-400 font-bold">
                        Voir toutes les mises à jour
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Changelog -->
    <div id="changelog-modal" class="modal-overlay">
        <div class="modal-content glass-card p-4 sm:p-8 rounded-[1.5rem] sm:rounded-[2.5rem] w-full max-w-5xl max-h-[90vh] overflow-y-auto relative">
            <button onclick="closeModals()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <h2 class="text-2xl font-black text-[var(--text-main)] mb-6 tracking-tight flex items-center gap-3">
                <svg class="w-7 h-7 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Historique des mises à jour
            </h2>
            <div class="space-y-6">
                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 2.2 (mode dev avancé)</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Mode développeur enrichi avec actions rapides et infos détaillées.</li>
                        <li>Simulation réaliste d'appareils iOS et Android (barre de statut, Dynamic Island, navigation gestuelle).</li>
                        <li>Fermeture des modals en cliquant en dehors.</li>
                        <li>Optimisation des performances du terminal développeur (zéro coût quand fermé).</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 2.0 (mise à jour majeure)</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Intégration du Cloud (synchronisation via lien partageable) pour retrouver ses données sur plusieurs appareils.</li>
                        <li>Nouvelle expérience mobile améliorée (pop‑up de restriction, navigation haut/bas, UI plus compacte).</li>
                        <li>Modals plus petites et adaptées aux écrans mobiles.</li>
                        <li>Ajout d'un message dédié pour Safari, indiquant que l'expérience peut être différente.</li>
                        <li>Refonte du système de versioning et mise à jour des informations d'interface.</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 1.8</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Optimisations de l'interface mobile et des performances.</li>
                        <li>Meilleure gestion des modals et des transitions.</li>
                        <li>Ajout d'un bouton de navigation haut/bas sur mobile.</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 1.7</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Ajout d'un mode d'expérience restreinte pour téléphones.</li>
                        <li>Amélioration des performances de chargement et de l'enregistrement local.</li>
                        <li>Correction de bugs mineurs et stabilisation générale.</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 1.6</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Ajout d'un footer avec liens vers les politiques de confidentialité et la licence.</li>
                        <li>Implémentation d'une option de tri pour les matières (par moyenne, alphabétique, nombre de notes, date).</li>
                        <li>Correction de nombreux bugs liés à l'affichage et à la sauvegarde des données.</li>
                        <li>Amélioration de la stabilité de l'application.</li>
                        <li>Optimisation des performances pour les grands volumes de données.</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 1.5</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Correction de bugs critiques dans le calcul des moyennes.</li>
                        <li>Résolution de problèmes d'affichage sur différents navigateurs.</li>
                        <li>Amélioration de la gestion des erreurs lors de l'import/export.</li>
                        <li>Correction de fuites mémoire dans les graphiques.</li>
                        <li>Stabilisation de la synchronisation des données localStorage.</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 1.4</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Ajout d'effets sonores pour améliorer l'expérience utilisateur.</li>
                        <li>Refonte complète de l'interface avec intégration du glassmorphism.</li>
                        <li>Amélioration de l'accessibilité avec options de contraste et réduction des mouvements.</li>
                        <li>Optimisation de la responsivité pour les appareils mobiles.</li>
                        <li>Ajout de transitions fluides et d'animations subtiles.</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 1.3</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Implémentation d'un système de code PIN pour sécuriser les comptes.</li>
                        <li>Ajout de la fonctionnalité de changement rapide de compte.</li>
                        <li>Enrichissement des paramètres avec thèmes sombre/clair/système.</li>
                        <li>Ajout du mode Zen pour une interface minimaliste.</li>
                        <li>Amélioration de la gestion des périodes (semestres/trimestres).</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 1.2</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Ajout de la personnalisation des couleurs pour chaque matière.</li>
                        <li>Implémentation d'un système de paramètres complet.</li>
                        <li>Ajout d'options de configuration pour les sons et animations.</li>
                        <li>Amélioration de l'interface utilisateur avec des indicateurs visuels.</li>
                        <li>Optimisation de la navigation entre les onglets.</li>
                    </ul>
                </article>

                <article class="bg-[var(--input-bg)] p-6 rounded-2xl border border-[var(--border)]">
                    <h3 class="text-xl font-bold text-[var(--text-main)] mb-3">Version 1.0 (beta)</h3>
                    <ul class="list-disc list-inside space-y-1 text-[var(--text-muted)]">
                        <li>Lancement de l'application de base avec gestion des notes.</li>
                        <li>Interface simple pour ajouter des matières et des notes.</li>
                        <li>Calcul automatique des moyennes par matière et générale.</li>
                        <li>Stockage des données en localStorage.</li>
                        <li>Design responsive adapté aux navigateurs modernes.</li>
                    </ul>
                </article>
            </div>
        </div>
    </div>

    <!-- Modal: Help (list) -->
    <div id="help-modal" class="modal-overlay">
        <div class="modal-content glass-card p-4 sm:p-8 rounded-[1.5rem] sm:rounded-[3rem] w-full max-w-3xl relative max-h-[88vh] overflow-y-auto">
            <button onclick="closeModals()" title="Fermer" class="absolute top-6 right-6 text-[var(--text-muted)] hover:text-rose-500 transition-colors">