Hugging Face's logo

Spaces:
pchevallot
/
ddec5455
Running

App Files Community
ddec5455
File size: 75,785 Bytes 
5200325
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bibliothèque de Prompts - DDEC 54-55</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .sidebar {
            scrollbar-width: thin;
            scrollbar-color: #4b5563 #1f2937;
        }
        .sidebar::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar::-webkit-scrollbar-track {
            background: #1f2937;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background-color: #4b5563;
            border-radius: 6px;
        }
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .markdown-content h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 1rem;
            color: #1e40af;
        }
        .markdown-content h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: 1.25rem;
            margin-bottom: 0.75rem;
            color: #1e40af;
        }
        .markdown-content p {
            margin-bottom: 1rem;
            line-height: 1.625;
        }
        .markdown-content ul, .markdown-content ol {
            margin-bottom: 1rem;
            padding-left: 1.5rem;
        }
        .markdown-content li {
            margin-bottom: 0.5rem;
        }
        .markdown-content pre {
            background-color: #f3f4f6;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
            overflow-x: auto;
        }
        .markdown-content code {
            background-color: #f3f4f6;
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            font-family: monospace;
        }
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .badge-blue {
            background-color: #dbeafe;
            color: #1e40af;
        }
        .badge-green {
            background-color: #dcfce7;
            color: #166534;
        }
        .badge-purple {
            background-color: #f3e8ff;
            color: #7e22ce;
        }
        .badge-yellow {
            background-color: #fef9c3;
            color: #854d0e;
        }
        .badge-red {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .badge-indigo {
            background-color: #e0e7ff;
            color: #4338ca;
        }
        .badge-pink {
            background-color: #fce7f3;
            color: #be185d;
        }
        .badge-gray {
            background-color: #f3f4f6;
            color: #4b5563;
        }
        .example-card {
            border-left: 4px solid #3b82f6;
            background-color: #f8fafc;
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0.375rem;
        }
        .example-card h4 {
            font-weight: 600;
            color: #1e40af;
            margin-bottom: 0.5rem;
        }
        .principle-card {
            background-color: #eff6ff;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .principle-card h4 {
            font-weight: 600;
            color: #1e40af;
            margin-bottom: 0.5rem;
        }
        .more-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .more-details.active {
            max-height: 1000px;
            transition: max-height 0.5s ease-in;
        }
        .chevron {
            transition: transform 0.3s ease;
        }
        .chevron.active {
            transform: rotate(90deg);
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- Header -->
    <header class="gradient-bg text-white shadow-lg">
        <div class="container mx-auto px-4 py-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fas fa-cross text-3xl mr-3"></i>
                    <div>
                        <h1 class="text-2xl font-bold">Bibliothèque de Prompts IA</h1>
                        <p class="text-blue-100">Guide pratique pour l'Enseignement Catholique - DDEC 54-55</p>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="Rechercher un prompt..." class="bg-white bg-opacity-20 placeholder-blue-100 text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-300 w-full md:w-64">
                        <i class="fas fa-search absolute left-3 top-2.5 text-blue-100"></i>
                    </div>
                    <button class="bg-white text-blue-800 font-semibold py-2 px-4 rounded-full hover:bg-blue-100 transition">
                        <i class="fas fa-user mr-2"></i>Connexion
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <div class="container mx-auto px-4 py-8 flex flex-col lg:flex-row">
        <!-- Sidebar -->
        <aside class="w-full lg:w-1/4 lg:pr-6 mb-8 lg:mb-0">
            <div class="bg-white rounded-xl shadow-md overflow-hidden sidebar h-[calc(100vh-180px)] overflow-y-auto">
                <div class="p-4 bg-blue-800 text-white">
                    <h2 class="text-xl font-bold flex items-center">
                        <i class="fas fa-list-ul mr-2"></i> Catégories
                    </h2>
                </div>
                <div class="p-4">
                    <div class="mb-6">
                        <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-graduation-cap mr-2 text-blue-600"></i> Techniques de Prompt
                        </h3>
                        <ul class="space-y-1 ml-2">
                            <li><a href="#" class="text-blue-600 hover:text-blue-800 flex items-center" data-category="zero-shot"><i class="fas fa-bolt mr-2 text-xs"></i> Zero-Shot</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="few-shot"><i class="fas fa-copy mr-2 text-xs"></i> One/Few-Shot</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="recherche"><i class="fas fa-search mr-2 text-xs"></i> Recherche</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="creative"><i class="fas fa-pen-fancy mr-2 text-xs"></i> Créatif</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="context"><i class="fas fa-expand mr-2 text-xs"></i> Contextuel (QQOQPC)</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="iteratif"><i class="fas fa-redo mr-2 text-xs"></i> Itératif</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="cot"><i class="fas fa-link mr-2 text-xs"></i> Chain of Thought</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="chaining"><i class="fas fa-project-diagram mr-2 text-xs"></i> Prompt Chaining</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tot"><i class="fas fa-tree mr-2 text-xs"></i> Tree of Thought</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="roleplay"><i class="fas fa-theater-masks mr-2 text-xs"></i> Role Playing</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tcrei"><i class="fas fa-list-ol mr-2 text-xs"></i> TCREI</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="metaprompt"><i class="fas fa-comment-dots mr-2 text-xs"></i> Méta-Prompting</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="translation"><i class="fas fa-language mr-2 text-xs"></i> Traduction Contextuelle</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="multimodal"><i class="fas fa-images mr-2 text-xs"></i> Multimodal</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="density"><i class="fas fa-layer-group mr-2 text-xs"></i> Chaîne de Densité</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="expert"><i class="fas fa-user-tie mr-2 text-xs"></i> Instruction/Rôle Expert</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="template"><i class="fas fa-stamp mr-2 text-xs"></i> Remplissage de Templates</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="summary"><i class="fas fa-filter mr-2 text-xs"></i> Résumé Spécifique</a></li>
                        </ul>
                    </div>
                    
                    <div class="mb-6">
                        <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-sitemap mr-2 text-blue-600"></i> Frameworks
                        </h3>
                        <ul class="space-y-1 ml-2">
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="ape"><i class="fas fa-bullseye mr-2 text-xs"></i> APE</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="bab"><i class="fas fa-arrows-alt-h mr-2 text-xs"></i> BAB</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="care"><i class="fas fa-hands-helping mr-2 text-xs"></i> CARE</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="cidi"><i class="fas fa-tasks mr-2 text-xs"></i> CIDI</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="coast"><i class="fas fa-ship mr-2 text-xs"></i> COAST</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="costar"><i class="fas fa-star mr-2 text-xs"></i> COSTAR</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="era"><i class="fas fa-user-tie mr-2 text-xs"></i> ERA</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="fab"><i class="fas fa-chart-line mr-2 text-xs"></i> FAB</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="focus"><i class="fas fa-bullseye mr-2 text-xs"></i> FOCUS</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="race"><i class="fas fa-running mr-2 text-xs"></i> RACE</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="relic"><i class="fas fa-shield-alt mr-2 text-xs"></i> RELIC</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="risen"><i class="fas fa-mountain mr-2 text-xs"></i> RISEN</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="rodes"><i class="fas fa-check-circle mr-2 text-xs"></i> RODES</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="roses"><i class="fas fa-rose mr-2 text-xs"></i> ROSES</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="rtf"><i class="fas fa-file-alt mr-2 text-xs"></i> RTF</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="spar"><i class="fas fa-fist-raised mr-2 text-xs"></i> SPAR</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="spear"><i class="fas fa-bullhorn mr-2 text-xs"></i> SPEAR</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tag"><i class="fas fa-tag mr-2 text-xs"></i> TAG</a></li>
                        </ul>
                    </div>
                    
                    <div class="mb-6">
                        <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-users mr-2 text-blue-600"></i> Par Public
                        </h3>
                        <ul class="space-y-1 ml-2">
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="directeurs"><i class="fas fa-user-tie mr-2 text-xs"></i> Directeurs</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="enseignants"><i class="fas fa-chalkboard-teacher mr-2 text-xs"></i> Enseignants</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="pastorale"><i class="fas fa-pray mr-2 text-xs"></i> Pastorale</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="inclusion"><i class="fas fa-heart mr-2 text-xs"></i> Inclusion</a></li>
                            <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="secretaires"><i class="fas fa-keyboard mr-2 text-xs"></i> Secrétaires</a></li>
                        </ul>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
                        <h3 class="font-semibold text-blue-800 mb-2 flex items-center">
                            <i class="fas fa-lightbulb mr-2"></i> Astuce du jour
                        </h3>
                        <p class="text-sm text-gray-700">Utilisez le framework CARE pour structurer vos prompts : Contexte, Action, Résultat, Exemple.</p>
                        <button class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
                            Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i>
                        </button>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content Area -->
        <main class="w-full lg:w-3/4">
            <!-- Featured Prompts -->
            <section class="mb-8">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                        <i class="fas fa-star mr-2 text-yellow-500"></i> Prompts en vedette
                    </h2>
                    <div class="flex space-x-2">
                        <button class="bg-white text-blue-600 border border-blue-600 px-3 py-1 rounded-full text-sm hover:bg-blue-50 transition">
                            <i class="fas fa-random mr-1"></i> Aléatoire
                        </button>
                        <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm hover:bg-blue-700 transition">
                            <i class="fas fa-plus mr-1"></i> Nouveau
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Prompt Card 1 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                        <div class="p-5">
                            <div class="flex justify-between items-start mb-2">
                                <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Zero-Shot</span>
                                <button class="text-gray-400 hover:text-blue-600">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            <h3 class="text-lg font-bold text-gray-800 mb-2">Indicateurs pour piloter un projet pédagogique</h3>
                            <p class="text-gray-600 text-sm mb-4">"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?"</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500 flex items-center">
                                    <i class="fas fa-user-tie mr-1"></i> Directeur
                                </span>
                                <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details1">
                                    Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
                                </button>
                            </div>
                            <div id="details1" class="more-details mt-4">
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <h4 class="font-semibold text-blue-800 mb-2">Détails supplémentaires</h4>
                                    <p class="text-sm text-gray-700 mb-2">Ce prompt permet d'obtenir une liste d'indicateurs clés pour évaluer l'avancement et l'impact d'un projet pédagogique dans un établissement catholique.</p>
                                    <div class="bg-white p-3 rounded border border-blue-100">
                                        <h5 class="font-medium text-sm text-blue-700 mb-1">Exemple de réponse attendue :</h5>
                                        <ul class="text-xs text-gray-600 list-disc pl-4">
                                            <li>Taux de participation des enseignants aux réunions de suivi</li>
                                            <li>Évolution des résultats scolaires des élèves concernés</li>
                                            <li>Nombre d'actions concrètes mises en œuvre</li>
                                            <li>Retours qualitatifs des familles via les enquêtes</li>
                                            <li>Degré d'intégration dans le projet d'établissement</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Prompt Card 2 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                        <div class="p-5">
                            <div class="flex justify-between items-start mb-2">
                                <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">CARE</span>
                                <button class="text-gray-400 hover:text-blue-600">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            <h3 class="text-lg font-bold text-gray-800 mb-2">Stratégie pour élèves à besoins particuliers</h3>
                            <p class="text-gray-600 text-sm mb-4">Contexte, Action, Résultat et Exemple pour accompagner les élèves en APC.</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500 flex items-center">
                                    <i class="fas fa-heart mr-1"></i> Inclusion
                                </span>
                                <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details2">
                                    Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
                                </button>
                            </div>
                            <div id="details2" class="more-details mt-4">
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <h4 class="font-semibold text-blue-800 mb-2">Structure CARE complète</h4>
                                    <div class="grid grid-cols-1 gap-3">
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Contexte :</h5>
                                            <p class="text-xs text-gray-600">Élèves en difficulté bénéficiant d'APC dans une école primaire rurale avec peu de moyens spécialisés.</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Action :</h5>
                                            <p class="text-xs text-gray-600">Mettre en place des ateliers différenciés avec des objectifs progressifs et des supports adaptés.</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Résultat attendu :</h5>
                                            <p class="text-xs text-gray-600">Amélioration des compétences ciblées chez 80% des élèves après un trimestre.</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Exemple :</h5>
                                            <p class="text-xs text-gray-600">Atelier de lecture avec textes simplifiés et marque-page des stratégies de compréhension.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Prompt Card 3 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                        <div class="p-5">
                            <div class="flex justify-between items-start mb-2">
                                <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">ROSES</span>
                                <button class="text-gray-400 hover:text-blue-600">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            <h3 class="text-lg font-bold text-gray-800 mb-2">Projet pastoral itinérant</h3>
                            <p class="text-gray-600 text-sm mb-4">Rôle, Objectif, Scénario, Solution attendue et Étapes pour un projet innovant.</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500 flex items-center">
                                    <i class="fas fa-pray mr-1"></i> Pastorale
                                </span>
                                <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details3">
                                    Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
                                </button>
                            </div>
                            <div id="details3" class="more-details mt-4">
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <h4 class="font-semibold text-blue-800 mb-2">Développement ROSES</h4>
                                    <div class="grid grid-cols-1 gap-3">
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Rôle :</h5>
                                            <p class="text-xs text-gray-600">Animateur pastoral itinérant visitant 5 écoles primaires du secteur.</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Objectif :</h5>
                                            <p class="text-xs text-gray-600">Créer du lien entre les communautés scolaires autour d'un thème commun.</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Scénario :</h5>
                                            <p class="text-xs text-gray-600">Chaque école prépare une partie d'une fresque collective sur le thème "Chemins de paix".</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Solution attendue :</h5>
                                            <p class="text-xs text-gray-600">Une œuvre collective exposée lors de la fête de fin d'année diocésaine.</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Étapes :</h5>
                                            <ol class="text-xs text-gray-600 list-decimal pl-4">
                                                <li>Présentation du projet aux équipes</li>
                                                <li>Ateliers dans chaque école</li>
                                                <li>Rassemblement final pour l'assemblage</li>
                                                <li>Célébration et exposition</li>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- Prompt Details Section -->
            <section class="bg-white rounded-xl shadow-md overflow-hidden mb-8 fade-in" id="prompt-details">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded mb-2 inline-block">Zero-Shot</span>
                            <h2 class="text-2xl font-bold text-gray-800">ZERO-SHOT PROMPTING – "Pose une question directe"</h2>
                            <p class="text-gray-600">Technique de base pour obtenir des réponses factuelles rapides</p>
                        </div>
                        <div class="flex space-x-2">
                            <button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50">
                                <i class="fas fa-share-alt"></i>
                            </button>
                            <button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="border-t border-b border-gray-200 py-4 mb-4">
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center">
                                <i class="fas fa-graduation-cap text-blue-600 mr-2"></i>
                                <span class="text-sm text-gray-700">Technique de Prompt</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-clock text-blue-600 mr-2"></i>
                                <span class="text-sm text-gray-700">2 min de lecture</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-calendar-alt text-blue-600 mr-2"></i>
                                <span class="text-sm text-gray-700">Mis à jour le 15/06/2023</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="markdown-content">
                        <div class="principle-card">
                            <h4>Principe pédagogique</h4>
                            <p>Obtenir une réponse factuelle, rapide, sans fournir d'exemple. Idéal pour les questions directes nécessitant une expertise spécifique.</p>
                        </div>
                        
                        <h3>Exemples DDEC</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <div class="example-card">
                                <h4>Directeur d'établissement</h4>
                                <pre>"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?"</pre>
                            </div>
                            <div class="example-card">
                                <h4>Enseignant en maternelle</h4>
                                <pre>"Quels sont les signes d'alerte d'un trouble du langage oral chez un élève de grande section ?"</pre>
                            </div>
                            <div class="example-card">
                                <h4>Formateur</h4>
                                <pre>"Comment expliquer simplement le concept d'IA générative à des enseignants du 1er degré ?"</pre>
                            </div>
                        </div>
                        
                        <h3>Conseils d'utilisation</h3>
                        <div class="bg-blue-50 p-4 rounded-lg mb-4">
                            <ul class="list-disc pl-5 space-y-2">
                                <li>Être précis dans la formulation de la question</li>
                                <li>Spécifier le contexte si nécessaire (niveau scolaire, type d'établissement)</li>
                                <li>Demander un format de réponse spécifique si besoin (liste, tableau, etc.)</li>
                                <li>Utiliser pour des questions factuelles ou des demandes simples</li>
                                <li>Éviter pour des sujets complexes nécessitant des exemples ou un raisonnement</li>
                            </ul>
                        </div>
                        
                        <h3>Variantes pour d'autres techniques</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-blue-800">One/Few-Shot</h4>
                                <p class="text-sm">"Voici une évaluation de dictée pour des élèves de CE2. Crée une évaluation similaire pour des CM1 sur l'accord sujet-verbe : « [dictée] »"</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-blue-800">Prompt de recherche</h4>
                                <p class="text-sm">"Quels sont les derniers textes parus sur les PIAL dans l'Enseignement Catholique ?"</p>
                            </div>
                        </div>
                        
                        <h3>Tags associés</h3>
                        <div class="flex flex-wrap">
                            <span class="badge badge-blue">Directeur</span>
                            <span class="badge badge-blue">Enseignant</span>
                            <span class="badge badge-blue">Formateur</span>
                            <span class="badge badge-green">Factuel</span>
                            <span class="badge badge-green">Rapide</span>
                            <span class="badge badge-purple">Technique de base</span>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- Related Prompts -->
            <section>
                <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-link mr-2 text-blue-600"></i> Techniques associées
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Related Prompt 1 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                        <div class="p-5">
                            <div class="flex justify-between items-start mb-2">
                                <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">One/Few-Shot</span>
                                <button class="text-gray-400 hover:text-blue-600">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            <h3 class="text-lg font-bold text-gray-800 mb-2">ONE-SHOT / FEW-SHOT PROMPTING</h3>
                            <p class="text-gray-600 text-sm mb-4">"Donne un exemple, puis demande le même format"</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500 flex items-center">
                                    <i class="fas fa-chalkboard-teacher mr-1"></i> Technique
                                </span>
                                <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details4">
                                    Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
                                </button>
                            </div>
                            <div id="details4" class="more-details mt-4">
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <h4 class="font-semibold text-blue-800 mb-2">Exemple complet</h4>
                                    <div class="bg-white p-3 rounded border border-blue-100">
                                        <h5 class="font-medium text-sm text-blue-700 mb-1">Prompt :</h5>
                                        <p class="text-xs text-gray-600 mb-2">"Voici un exemple de consigne pour une activité en APC : 'Lisez le texte et soulignez les verbes d'action.' Crée une consigne similaire pour travailler les adjectifs qualificatifs."</p>
                                        <h5 class="font-medium text-sm text-blue-700 mb-1">Réponse attendue :</h5>
                                        <p class="text-xs text-gray-600">"Lisez le texte et entourez les adjectifs qualificatifs."</p>
                                    </div>
                                    <p class="text-xs text-gray-600 mt-2">Cette technique est particulièrement utile pour maintenir une cohérence dans les formulations pédagogiques.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Related Prompt 2 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                        <div class="p-5">
                            <div class="flex justify-between items-start mb-2">
                                <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">QQOQPC</span>
                                <button class="text-gray-400 hover:text-blue-600">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            <h3 class="text-lg font-bold text-gray-800 mb-2">EXPANSION CONTEXTUELLE</h3>
                            <p class="text-gray-600 text-sm mb-4">"Précise le besoin de manière exhaustive"</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500 flex items-center">
                                    <i class="fas fa-expand mr-1"></i> Technique
                                </span>
                                <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details5">
                                    Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
                                </button>
                            </div>
                            <div id="details5" class="more-details mt-4">
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <h4 class="font-semibold text-blue-800 mb-2">Application QQOQPC</h4>
                                    <div class="grid grid-cols-1 gap-2">
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Quoi :</h5>
                                            <p class="text-xs text-gray-600">Note d'information aux familles</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Qui :</h5>
                                            <p class="text-xs text-gray-600">Parents d'élèves de CM2</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Où :</h5>
                                            <p class="text-xs text-gray-600">École Saint-Joseph à Nancy</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Quand :</h5>
                                            <p class="text-xs text-gray-600">Pour la rentrée 2024</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Pourquoi :</h5>
                                            <p class="text-xs text-gray-600">Présenter les nouveautés pédagogiques</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Comment :</h5>
                                            <p class="text-xs text-gray-600">Ton rassurant et positif, avec infographies</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Related Prompt 3 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                        <div class="p-5">
                            <div class="flex justify-between items-start mb-2">
                                <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">TCREI</span>
                                <button class="text-gray-400 hover:text-blue-600">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            <h3 class="text-lg font-bold text-gray-800 mb-2">Cadre structuré TCREI</h3>
                            <p class="text-gray-600 text-sm mb-4">Task, Context, Reference, Evaluate, Iterate</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500 flex items-center">
                                    <i class="fas fa-list-ol mr-1"></i> Framework
                                </span>
                                <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details6">
                                    Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
                                </button>
                            </div>
                            <div id="details6" class="more-details mt-4">
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <h4 class="font-semibold text-blue-800 mb-2">Détail TCREI</h4>
                                    <div class="grid grid-cols-1 gap-3">
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Task :</h5>
                                            <p class="text-xs text-gray-600">Créer une fiche de préparation de séance sur la classification des animaux</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Context :</h5>
                                            <p class="text-xs text-gray-600">Classe de CE2 en REP+, 24 élèves dont 3 à besoins particuliers</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Reference :</h5>
                                            <p class="text-xs text-gray-600">Programmes officiels et progression de l'école</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Evaluate :</h5>
                                            <p class="text-xs text-gray-600">Vérifier l'accessibilité et la différenciation</p>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm text-blue-700 mb-1">Iterate :</h5>
                                            <p class="text-xs text-gray-600">Ajouter des supports visuels pour les élèves dyslexiques</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">Bibliothèque de Prompts</h3>
                    <p class="text-gray-400">Guide pratique des prompts IA pour l'Enseignement Catholique. Outils concrets pour les acteurs de la DDEC 54-55.</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Ressources</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Exemples</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Contact</h3>
                    <ul class="space-y-2">
                        <li class="text-gray-400">DDEC 54-55</li>
                        <li class="text-gray-400">[email protected]</li>
                        <li class="text-gray-400">03 83 00 00 00</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Suivez-nous</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2023 DDEC 54-55. Tous droits réservés.</p>
            </div>
        </div>
    </footer>

    <script>
        // Gestion des liens "Voir plus"
        document.querySelectorAll('.see-more-btn').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const detailsSection = document.getElementById(targetId);
                const chevron = this.querySelector('.chevron');
                
                detailsSection.classList.toggle('active');
                chevron.classList.toggle('active');
                
                // Mise à jour du texte du bouton
                if (detailsSection.classList.contains('active')) {
                    this.innerHTML = 'Voir moins <i class="fas fa-chevron-right ml-1 text-xs chevron active"></i>';
                } else {
                    this.innerHTML = 'Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>';
                }
            });
        });

        // Simple interactivity for the demo
        document.querySelectorAll('[data-category]').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const category = this.getAttribute('data-category');
                
                // Update active state in sidebar
                document.querySelectorAll('[data-category]').forEach(link => {
                    link.classList.remove('text-blue-600');
                    link.classList.add('text-gray-700');
                });
                this.classList.remove('text-gray-700');
                this.classList.add('text-blue-600');
                
                // Simulate loading content
                const promptDetails = document.getElementById('prompt-details');
                promptDetails.classList.remove('fade-in');
                void promptDetails.offsetWidth; // Trigger reflow
                promptDetails.classList.add('fade-in');
                
                // Update content based on category (in a real app, this would be fetched from a database)
                let title = "";
                let description = "";
                let principle = "";
                let examples = [];
                let tags = [];
                
                switch(category) {
                    case "zero-shot":
                        title = "ZERO-SHOT PROMPTING – \"Pose une question directe\"";
                        description = "Technique de base pour obtenir des réponses factuelles rapides";
                        principle = "Obtenir une réponse factuelle, rapide, sans fournir d'exemple. Idéal pour les questions directes nécessitant une expertise spécifique.";
                        examples = [
                            {
                                role: "Directeur d'établissement",
                                prompt: "\"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?\""
                            },
                            {
                                role: "Enseignant en maternelle",
                                prompt: "\"Quels sont les signes d'alerte d'un trouble du langage oral chez un élève de grande section ?\""
                            },
                            {
                                role: "Formateur",
                                prompt: "\"Comment expliquer simplement le concept d'IA générative à des enseignants du 1er degré ?\""
                            }
                        ];
                        tags = [
                            {text: "Directeur", color: "blue"},
                            {text: "Enseignant", color: "blue"},
                            {text: "Formateur", color: "blue"},
                            {text: "Factuel", color: "green"},
                            {text: "Rapide", color: "green"},
                            {text: "Technique de base", color: "purple"}
                        ];
                        break;
                    case "few-shot":
                        title = "ONE-SHOT / FEW-SHOT PROMPTING – \"Donne un exemple, puis demande le même format\"";
                        description = "Technique d'apprentissage par imitation";
                        principle = "L'IA apprend par imitation du style ou de la structure. Fournir un ou plusieurs exemples avant de demander à l'IA de produire un résultat similaire. Excellente pour le style ou le format.";
                        examples = [
                            {
                                role: "Enseignant",
                                prompt: "\"Voici une évaluation de dictée pour des élèves de CE2. Crée une évaluation similaire pour des CM1 sur l'accord sujet-verbe : « [dictée] »\""
                            },
                            {
                                role: "Chargé de mission pastoral",
                                prompt: "\"À partir de ce message d'invitation à une retraite spirituelle, rédige une invitation similaire pour les familles de 6e : [message d'invitation]\""
                            },
                            {
                                role: "Responsable d'établissement",
                                prompt: "\"Rédige un mail de remerciement au prêtre accompagnateur, en gardant un ton à la fois chaleureux et professionnel : [exemple de mail]\""
                            }
                        ];
                        tags = [
                            {text: "Enseignant", color: "blue"},
                            {text: "Pastorale", color: "blue"},
                            {text: "Direction", color: "blue"},
                            {text: "Imitation", color: "green"},
                            {text: "Structure", color: "green"},
                            {text: "Style", color: "purple"}
                        ];
                        break;
                    case "recherche":
                        title = "PROMPTING DE RECHERCHE – \"Obtenir des données précises et récentes\"";
                        description = "Adapté à Perplexity ou autres outils de recherche";
                        principle = "Cibler une requête pointue, réglementaire ou scientifique. Particulièrement utile pour obtenir des informations actualisées ou des références précises.";
                        examples = [
                            {
                                role: "Directeur diocésain",
                                prompt: "\"Quels sont les derniers textes parus sur les PIAL dans l'Enseignement Catholique ?\""
                            },
                            {
                                role: "Enseignant en lycée",
                                prompt: "\"Quels sont les derniers ajustements du programme de philosophie en terminale en 2025 ?\""
                            },
                            {
                                role: "Chargé de mission",
                                prompt: "\"Quels exemples d'IA sont utilisés aujourd'hui dans des projets pédagogiques d'autres DDEC en France ?\""
                            }
                        ];
                        tags = [
                            {text: "Recherche", color: "blue"},
                            {text: "Actualité", color: "blue"},
                            {text: "Réglementation", color: "blue"},
                            {text: "Précis", color: "green"},
                            {text: "Récent", color: "green"},
                            {text: "Perplexity", color: "purple"}
                        ];
                        break;
                    case "creative":
                        title = "ÉCRITURE CRÉATIVE – \"Génère un contenu original avec style et contraintes\"";
                        description = "Pour générer des textes inédits et adaptés";
                        principle = "Générer un texte inédit à destination d'un public identifié, avec des contraintes de style, de ton ou de format.";
                        examples = [
                            {
                                role: "Chef d'établissement",
                                prompt: "\"Rédige un discours de rentrée à destination des parents en lien avec le projet éducatif de l'établissement.\""
                            },
                            {
                                role: "Enseignant",
                                prompt: "\"Rédige une lettre fictive d'un poilu pour un travail d'expression écrite en 3e.\""
                            },
                            {
                                role: "Responsable communication",
                                prompt: "\"Crée un post Facebook pour valoriser les élèves qui s'engagent dans l'animation pastorale.\""
                            }
                        ];
                        tags = [
                            {text: "Création", color: "blue"},
                            {text: "Original", color: "blue"},
                            {text: "Style", color: "blue"},
                            {text: "Contraintes", color: "green"},
                            {text: "Public cible", color: "green"},
                            {text: "Expression", color: "purple"}
                        ];
                        break;
                    case "context":
                        title = "EXPANSION CONTEXTUELLE (QQOQPC) – \"Précise le besoin de manière exhaustive\"";
                        description = "QQOQPC : Quoi, Qui, Où, Quand, Pourquoi, Comment";
                        principle = "Obtenir une réponse contextualisée, éviter les généralités. La méthode QQOQPC permet de structurer une demande en précisant tous les aspects contextuels.";
                        examples = [
                            {
                                role: "Directeur",
                                prompt: "\"Rédige une note (Quoi) pour les parents d'élèves (Qui) du collège Sainte-Marie (Où), expliquant l'intégration d'un module d'initiation à l'IA (Pourquoi) à partir de janvier 2025 (Quand), en lien avec le projet éducatif (Comment).\""
                            },
                            {
                                role: "Enseignant",
                                prompt: "\"Propose un plan de séance (Quoi) en SVT (Matière) pour une classe de 5e (Qui) dans un établissement rural (Où) sur le thème de la biodiversité (Pourquoi) avec une activité en extérieur (Comment).\""
                            },
                            {
                                role: "Chargé de mission pastorale",
                                prompt: "\"Prépare une fiche d'activité (Quoi) à destination des élèves de 4e (Qui) du collège Saint-Jean à Verdun (Où), pour un temps fort de réflexion sur le thème 'Pèlerins d'espérance, sur le chemin de la paix' (Pourquoi), prévu lors du temps de l'Avent 2025 (Quand). L'activité devra combiner une vidéo inspirante, un temps de silence et une expression créative collective (Comment).\""
                            }
                        ];
                        tags = [
                            {text: "Contextuel", color: "blue"},
                            {text: "QQOQPC", color: "blue"},
                            {text: "Structuré", color: "blue"},
                            {text: "Complet", color: "green"},
                            {text: "Précis", color: "green"},
                            {text: "Méthodologie", color: "purple"}
                        ];
                        break;
                    case "iteratif":
                        title = "PROMPTING ITÉRATIF – \"Approfondir progressivement un sujet\"";
                        description = "Exploration pas à pas d'un sujet complexe";
                        principle = "Explorer un sujet complexe ou technique en plusieurs étapes, comme dans une démarche d'enquête ou de recherche. Chaque prompt s'appuie sur la réponse précédente pour approfondir.";
                        examples = [
                            {
                                role: "Formateur DDEC",
                                prompt: "\"Quelles sont les principales compétences numériques attendues pour les élèves de cycle 4 ?\" → \"Comment évaluer ces compétences dans un cadre pastoral ?\" → \"Quels outils numériques sont adaptés à cet usage dans un établissement rural ?\""
                            },
                            {
                                role: "Enseignant de lycée pro",
                                prompt: "\"Quels sont les risques de cybersécurité pour un compte scolaire partagé ?\" → \"Quelles bonnes pratiques peuvent être mises en place avec des élèves de seconde ?\""
                            },
                            {
                                role: "Chargé de mission innovation",
                                prompt: "\"Quels usages d'IA sont déjà expérimentés dans les établissements catholiques en France ?\" → \"Comment sont-ils évalués ?\" → \"Quels résultats ont été publiés ?\""
                            }
                        ];
                        tags = [
                            {text: "Itératif", color: "blue"},
                            {text: "Approfondissement", color: "blue"},
                            {text: "Complexe", color: "blue"},
                            {text: "Étapes", color: "green"},
                            {text: "Recherche", color: "green"},
                            {text: "Enquête", color: "purple"}
                        ];
                        break;
                    case "cot":
                        title = "CHAIN OF THOUGHT (CHAÎNE DE PENSÉE - CoT) – \"Explique étape par étape\"";
                        description = "Obtenir le raisonnement avant la réponse";
                        principle = "Obtenir le raisonnement avant la réponse, pour comprendre comment l'IA structure sa pensée. Particulièrement utile pour les problèmes complexes nécessitant une démonstration ou une explication pédagogique.";
                        examples = [
                            {
                                role: "Responsable informatique",
                                prompt: "\"Voici une grille de compétences numériques pour les enseignants. Propose une stratégie d'auto-évaluation à partir de cette grille. Explique étape par étape.\""
                            },
                            {
                                role: "Élève en terminale",
                                prompt: "\"Résous cet exercice de probabilités. Explique chaque étape de ton raisonnement.\""
                            },
                            {
                                role: "Enseignant de SVT",
                                prompt: "\"Pourquoi l'usage excessif de pesticides réduit-il la biodiversité ? Donne une explication pas à pas.\""
                            }
                        ];
                        tags = [
                            {text: "Raisonnement", color: "blue"},
                            {text: "Étapes", color: "blue"},
                            {text: "Pédagogique", color: "blue"},
                            {text: "Explication", color: "green"},
                            {text: "Démonstration", color: "green"},
                            {text: "Complexe", color: "purple"}
                        ];
                        break;
                    case "chaining":
                        title = "PROMPT CHAINING – \"Découper une tâche complexe\"";
                        description = "Enchaînement de prompts pour un projet complet";
                        principle = "Traiter un projet en plusieurs étapes logiques, chaque prompt s'appuyant sur la réponse précédente. Idéal pour les projets complexes nécessitant une progression méthodique.";
                        examples = [
                            {
                                role: "Chef d'établissement",
                                prompt: "Prompt 1 : \"Décris les objectifs de notre projet de jardin pédagogique.\"\nPrompt 2 : \"Sur cette base, propose une fiche action par classe participante.\"\nPrompt 3 : \"Nous sommes à Longwy en Meurthe-et-Moselle. Identifie les partenaires locaux à solliciter pour appuyer le projet.\""
                            },
                            {
                                role: "Enseignant",
                                prompt: "Prompt 1 : \"Propose une séquence d'histoire sur la Révolution française pour une classe de CM1.\"\nPrompt 2 : \"Crée une évaluation finale avec des critères clairs.\"\nPrompt 3 : \"Rédige un corrigé commenté.\""
                            },
                            {
                                role: "Animateur pastoral",
                                prompt: "Prompt 1 : \"Imagine une animation spirituelle sur le thème de la solidarité.\"\nPrompt 2 : \"Prévois une activité en petits groupes.\"\nPrompt 3 : \"Rédige une prière collective liée au thème.\""
                            }
                        ];
                        tags = [
                            {text: "Enchaînement", color: "blue"},
                            {text: "Projet", color: "blue"},
                            {text: "Complexe", color: "blue"},
                            {text: "Étapes", color: "green"},
                            {text: "Méthodique", color: "green"},
                            {text: "Progressif", color: "purple"}
                        ];
                        break;
                    case "tot":
                        title = "TREE OF THOUGHT (ToT) – \"Explorer plusieurs pistes en parallèle\"";
                        description = "Comparaison de stratégies ou options";
                        principle = "Comparer différentes stratégies ou options, puis choisir la meilleure ou proposer une synthèse. Utile pour l'analyse stratégique ou la prise de décision.";
                        examples = [
                            {
                                role: "Chef d'établissement",
                                prompt: "\"Comment mieux impliquer les familles dans le projet éducatif ? Explore 3 stratégies : 1) réunions de co-construction, 2) café des parents mensuel, 3) communication numérique hebdomadaire. Compare-les et recommande une solution adaptée.\""
                            },
                            {
                                role: "Enseignant de collège",
                                prompt: "\"Propose 3 manières différentes d'enseigner la notion d'énergie renouvelable en 5e : 1) sortie terrain, 2) expérience en classe, 3) débat d'argumentation. Compare l'impact pédagogique de chaque méthode.\""
                            },
                            {
                                role: "Responsable pastorale",
                                prompt: "\"Quelle est la meilleure façon d'intégrer Laudato Si' dans le parcours de foi des élèves de seconde ? Évalue 3 approches : 1) atelier nature, 2) retraite spirituelle, 3) exposition collaborative.\""
                            }
                        ];
                        tags = [
                            {text: "Comparaison", color: "blue"},
                            {text: "Stratégie", color: "blue"},
                            {text: "Options", color: "blue"},
                            {text: "Analyse", color: "green"},
                            {text: "Décision", color: "green"},
                            {text: "Synthèse", color: "purple"}
                        ];
                        break;
                    case "roleplay":
                        title = "SIMULATION / ROLE PLAYING – \"S'entraîner à gérer des situations concrètes\"";
                        description = "Préparation d'interactions réalistes";
                        principle = "Préparer une prise de parole, un entretien, une médiation, en simulant une interaction. Permet de s'entraîner à des situations professionnelles délicates.";
                        examples = [
                            {
                                role: "Chef d'établissement",
                                prompt: "\"Tu es un parent inquiet car son enfant est victime de harcèlement. J'incarne le chef d'établissement et je veux expliquer notre dispositif de prise en charge. Joue ce rôle avec réalisme.\""
                            },
                            {
                                role: "Enseignant",
                                prompt: "\"Tu es un élève de 5ème qui refuse systématiquement de faire ses devoirs. Je suis ton enseignant et je cherche à comprendre ce blocage.\""
                            },
                            {
                                role: "Formateur",
                                prompt: "\"Tu es un enseignant réticent à utiliser l'IA. Je suis ton collègue qui mène une formation courte. Posons-nous des questions et cherchons un terrain d'entente.\""
                            }
                        ];
                        tags = [
                            {text: "Simulation", color: "blue"},
                            {text: "Interaction", color: "blue"},
                            {text: "Rôle", color: "blue"},
                            {text: "Entraînement", color: "green"},
                            {text: "Réaliste", color: "green"},
                            {text: "Professionnel", color: "purple"}
                        ];
                        break;
                    case "tcrei":
                        title = "TCREI (Task, Context, Reference, Evaluate, Iterate) – Cadre structuré pour écrire un bon prompt";
                        description = "Structurer ses demandes selon 5 étapes";
                        principle = "Structurer ses demandes selon 5 étapes : Tâche, Contexte, Référence, Évaluation, Itération. Méthode complète pour des prompts efficaces et précis.";
                        examples = [
                            {
                                role: "Exemple DDEC",
                                prompt: "• Tâche : \"Tu es un conseiller pédagogique expert. Propose un atelier de formation.\"\n• Contexte : \"Cet atelier est destiné aux enseignants de cycle 3 sur l'évaluation par compétences.\"\n• Référence : \"Modèle attendu : titre, objectifs, déroulé, durée.\"\n• Évaluation : \"La proposition est-elle actionnable avec 12 enseignants ?\"\n• Itération : \"Ajoute une variante pour les enseignants de collège.\""
                            }
                        ];
                        tags = [
                            {text: "Structure", color: "blue"},
                            {text: "Méthode", color: "blue"},
                            {text: "Complet", color: "blue"},
                            {text: "Tâche", color: "green"},
                            {text: "Contexte", color: "green"},
                            {text: "Itération", color: "purple"}
                        ];
                        break;
                    case "metaprompt":
                        title = "MÉTA-PROMPTING – \"Demande à l'IA d'écrire un bon prompt pour toi\"";
                        description = "Utiliser l'IA pour améliorer ses prompts";
                        principle = "Utiliser l'IA pour générer des prompts réutilisables ou améliorer ses propres formulations. Particulièrement utile pour affiner ses techniques de prompting.";
                        examples = [
                            {
                                role: "Enseignant",
                                prompt: "\"Je veux un prompt pour générer des fiches de lecture adaptées au niveau CM1. Aide-moi à le formuler. Voici mon premier jet : [prompt initial]\""
                            },
                            {
                                role: "Chef d'établissement",
                                prompt: "\"Quel serait le meilleur prompt pour générer une lettre de félicitations personnalisée aux enseignants en fin d'année ? Voici une première idée de prompt : [prompt initial]\""
                            },
                            {
                                role: "Formateur",
                                prompt: "\"Améliore ce prompt : 'Explique l'IA aux enseignants de maternelle.' Fais-le plus précis, plus structuré, plus engageant.\""
                            }
                        ];
                        tags = [
                            {text: "Amélioration", color: "blue"},
                            {text: "Optimisation", color: "blue"},
                            {text: "Prompting", color: "blue"},
                            {text: "Affinage", color: "green"},
                            {text: "Formulation", color: "green"},
                            {text: "Réutilisable", color: "purple"}
                        ];
                        break;
                    case "translation":
                        title = "TRADUCTION CONTEXTUELLE – \"Traduire avec sens et précision\"";
                        description = "Traduction adaptée au contexte et au public";
                        principle = "Traduire un texte en tenant compte du contexte d'usage, du public et du registre. Plus qu'une simple traduction mot à mot, il s'agit d'adapter le message.";
                        examples = [
                            {
                                role: "Enseignant en anglais",
                                prompt: "\"Traduis cette consigne d'évaluation en anglais niveau A2 pour des élèves de 5e.\""
                            },
                            {
                                role: "Responsable de jumelage",
                                prompt: "\"Traduis ce discours de bienvenue pour nos correspondants espagnols. Le ton doit être chaleureux et respectueux.\""
                            },
                            {
                                role: "Responsable communication",
                                prompt: "\"Traduis cette affiche sur la Semaine de la Foi en allemand pour notre école partenaire de Sarre.\""
                            }
                        ];
                        tags = [
                            {text: "Traduction", color: "blue"},
                            {text: "Langue", color: "blue"},
                            {text: "Adaptation", color: "blue"},
                            {text: "Contexte", color: "green"},
                            {text: "Public", color: "green"},
                            {text: "Registre", color: "purple"}
                        ];
                        break;
                    case "multimodal":
                        title = "PROMPTING MULTIMODAL – \"Utiliser images, sons ou vidéos dans le prompt\"";
                        description = "Pour les vidéos YouTube, utiliser NotebookLM par exemple";
                        principle = "Fournir une image ou un média et poser une question à son sujet, ou générer un visuel à partir d'une consigne. Permet d'exploiter les capacités multimodales des IA avancées
</html>