Hugging Face's logo

Spaces:
OUAREDAEK
/
ReflAgent
Runtime error

App Files Community
OUAREDAEK commited on
Commit
3300333
·
verified ·
1 Parent(s): cfc3f57

Upload cross_reading/consensus_building-V2-OK.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. cross_reading/consensus_building-V2-OK.html +637 -0
cross_reading/consensus_building-V2-OK.html ADDED
@@ -0,0 +1,637 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Consensus Building - ReflAgent</title>
7
+
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Arial, sans-serif;
14
+ }
15
+
16
+ body {
17
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
18
+ color: #333;
19
+ min-height: 100vh;
20
+ padding: 20px;
21
+ }
22
+
23
+ .container {
24
+ max-width: 1400px;
25
+ margin: 0 auto;
26
+ background: white;
27
+ border-radius: 20px;
28
+ padding: 30px;
29
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
30
+ border: 1px solid #dee2e6;
31
+ }
32
+
33
+ header {
34
+ text-align: center;
35
+ margin-bottom: 40px;
36
+ padding-bottom: 20px;
37
+ border-bottom: 3px solid #4a90e2;
38
+ }
39
+
40
+ h1 {
41
+ color: #2c3e50;
42
+ font-size: 2.5em;
43
+ margin-bottom: 15px;
44
+ background: linear-gradient(90deg, #3498db, #2c3e50);
45
+ -webkit-background-clip: text;
46
+ -webkit-text-fill-color: transparent;
47
+ }
48
+
49
+ .subtitle {
50
+ color: #7f8c8d;
51
+ font-size: 1.1em;
52
+ line-height: 1.6;
53
+ max-width: 800px;
54
+ margin: 0 auto 20px;
55
+ }
56
+
57
+ .back-btn {
58
+ display: inline-flex;
59
+ align-items: center;
60
+ gap: 8px;
61
+ padding: 12px 24px;
62
+ background: linear-gradient(135deg, #3498db, #2980b9);
63
+ color: white;
64
+ text-decoration: none;
65
+ border-radius: 10px;
66
+ margin-bottom: 20px;
67
+ font-weight: 600;
68
+ transition: all 0.3s;
69
+ border: none;
70
+ cursor: pointer;
71
+ }
72
+
73
+ .back-btn:hover {
74
+ transform: translateY(-2px);
75
+ box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
76
+ }
77
+
78
+ .expert-process {
79
+ background: #f8f9fa;
80
+ padding: 25px;
81
+ border-radius: 15px;
82
+ margin: 30px 0;
83
+ border-left: 5px solid #3498db;
84
+ }
85
+
86
+ .expert-process h3 {
87
+ color: #2c3e50;
88
+ margin-bottom: 15px;
89
+ display: flex;
90
+ align-items: center;
91
+ gap: 10px;
92
+ }
93
+
94
+ .expert-process ul {
95
+ list-style-type: none;
96
+ padding-left: 20px;
97
+ }
98
+
99
+ .expert-process li {
100
+ margin-bottom: 12px;
101
+ padding-left: 25px;
102
+ position: relative;
103
+ }
104
+
105
+ .expert-process li:before {
106
+ content: "✓";
107
+ position: absolute;
108
+ left: 0;
109
+ color: #27ae60;
110
+ font-weight: bold;
111
+ }
112
+
113
+ .stats-overview {
114
+ display: grid;
115
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
116
+ gap: 20px;
117
+ margin: 30px 0;
118
+ }
119
+
120
+ .stat-card {
121
+ background: white;
122
+ padding: 25px;
123
+ border-radius: 12px;
124
+ box-shadow: 0 4px 15px rgba(0,0,0,0.08);
125
+ transition: transform 0.3s;
126
+ border-top: 4px solid #3498db;
127
+ }
128
+
129
+ .stat-card:hover {
130
+ transform: translateY(-5px);
131
+ }
132
+
133
+ .stat-card.highlight {
134
+ border-top-color: #e74c3c;
135
+ background: linear-gradient(135deg, #fff5f5, #fff);
136
+ }
137
+
138
+ .stat-value {
139
+ font-size: 42px;
140
+ font-weight: bold;
141
+ color: #2c3e50;
142
+ margin: 10px 0;
143
+ }
144
+
145
+ .stat-label {
146
+ font-size: 16px;
147
+ color: #7f8c8d;
148
+ font-weight: 500;
149
+ }
150
+
151
+ .chart-container {
152
+ background: white;
153
+ border-radius: 15px;
154
+ padding: 25px;
155
+ margin: 30px 0;
156
+ box-shadow: 0 4px 20px rgba(0,0,0,0.05);
157
+ border: 1px solid #e9ecef;
158
+ }
159
+
160
+ .chart-container h3 {
161
+ color: #2c3e50;
162
+ margin-bottom: 20px;
163
+ padding-bottom: 10px;
164
+ border-bottom: 2px solid #e9ecef;
165
+ }
166
+
167
+ .chart-wrapper {
168
+ height: 500px;
169
+ position: relative;
170
+ margin: 20px 0;
171
+ }
172
+
173
+ .section-title {
174
+ color: #2c3e50;
175
+ margin: 40px 0 20px;
176
+ padding-bottom: 10px;
177
+ border-bottom: 2px solid #4a90e2;
178
+ display: flex;
179
+ align-items: center;
180
+ gap: 10px;
181
+ }
182
+
183
+ .scenario-list {
184
+ display: grid;
185
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
186
+ gap: 20px;
187
+ margin: 25px 0;
188
+ }
189
+
190
+ .scenario-card {
191
+ background: white;
192
+ padding: 20px;
193
+ border-radius: 12px;
194
+ box-shadow: 0 3px 15px rgba(0,0,0,0.05);
195
+ border: 1px solid #e9ecef;
196
+ transition: all 0.3s;
197
+ }
198
+
199
+ .scenario-card:hover {
200
+ transform: translateY(-3px);
201
+ box-shadow: 0 5px 20px rgba(0,0,0,0.1);
202
+ }
203
+
204
+ .scenario-card h4 {
205
+ color: #2c3e50;
206
+ margin-bottom: 10px;
207
+ }
208
+
209
+ .confidence-badge {
210
+ display: inline-block;
211
+ padding: 4px 12px;
212
+ border-radius: 20px;
213
+ font-size: 12px;
214
+ font-weight: bold;
215
+ margin-top: 10px;
216
+ }
217
+
218
+ .confidence-high {
219
+ background: #d4edda;
220
+ color: #155724;
221
+ }
222
+
223
+ .confidence-medium {
224
+ background: #fff3cd;
225
+ color: #856404;
226
+ }
227
+
228
+ .confidence-low {
229
+ background: #f8d7da;
230
+ color: #721c24;
231
+ }
232
+
233
+ .methodology-grid {
234
+ display: grid;
235
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
236
+ gap: 25px;
237
+ margin: 30px 0;
238
+ }
239
+
240
+ .methodology-card {
241
+ background: white;
242
+ padding: 25px;
243
+ border-radius: 12px;
244
+ box-shadow: 0 4px 15px rgba(0,0,0,0.05);
245
+ border-top: 4px solid;
246
+ }
247
+
248
+ .methodology-card.calibration {
249
+ border-top-color: #3498db;
250
+ }
251
+
252
+ .methodology-card.reliability {
253
+ border-top-color: #e74c3c;
254
+ }
255
+
256
+ .methodology-card.analysis {
257
+ border-top-color: #2ecc71;
258
+ }
259
+
260
+ .methodology-card h4 {
261
+ color: #2c3e50;
262
+ margin-bottom: 15px;
263
+ display: flex;
264
+ align-items: center;
265
+ gap: 10px;
266
+ }
267
+
268
+ .kappa-score {
269
+ display: inline-block;
270
+ padding: 8px 16px;
271
+ background: #2c3e50;
272
+ color: white;
273
+ border-radius: 20px;
274
+ font-weight: bold;
275
+ font-size: 20px;
276
+ margin: 10px 0;
277
+ }
278
+
279
+ .comparison-table {
280
+ width: 100%;
281
+ border-collapse: collapse;
282
+ margin: 25px 0;
283
+ background: white;
284
+ border-radius: 10px;
285
+ overflow: hidden;
286
+ box-shadow: 0 3px 15px rgba(0,0,0,0.05);
287
+ }
288
+
289
+ .comparison-table th {
290
+ background: linear-gradient(135deg, #2c3e50, #34495e);
291
+ color: white;
292
+ padding: 15px;
293
+ text-align: left;
294
+ font-weight: 600;
295
+ }
296
+
297
+ .comparison-table td {
298
+ padding: 15px;
299
+ border-bottom: 1px solid #e9ecef;
300
+ }
301
+
302
+ .comparison-table tr:hover {
303
+ background: #f8f9fa;
304
+ }
305
+
306
+ .improvement-indicator {
307
+ display: inline-block;
308
+ padding: 4px 8px;
309
+ border-radius: 4px;
310
+ font-weight: bold;
311
+ font-size: 12px;
312
+ }
313
+
314
+ .improvement-positive {
315
+ background: #d4edda;
316
+ color: #155724;
317
+ }
318
+
319
+ .improvement-high {
320
+ background: #cce5ff;
321
+ color: #004085;
322
+ }
323
+
324
+ .download-btn {
325
+ display: inline-flex;
326
+ align-items: center;
327
+ gap: 8px;
328
+ padding: 12px 24px;
329
+ background: linear-gradient(135deg, #27ae60, #2ecc71);
330
+ color: white;
331
+ text-decoration: none;
332
+ border-radius: 10px;
333
+ font-weight: 600;
334
+ transition: all 0.3s;
335
+ border: none;
336
+ cursor: pointer;
337
+ margin: 10px 5px;
338
+ }
339
+
340
+ .download-btn:hover {
341
+ transform: translateY(-2px);
342
+ box-shadow: 0 5px 20px rgba(39, 174, 96, 0.3);
343
+ }
344
+
345
+ .export-controls {
346
+ display: flex;
347
+ gap: 15px;
348
+ flex-wrap: wrap;
349
+ margin: 25px 0;
350
+ }
351
+
352
+ .alert-box {
353
+ padding: 20px;
354
+ border-radius: 10px;
355
+ margin: 25px 0;
356
+ border-left: 5px solid;
357
+ }
358
+
359
+ .alert-info {
360
+ background: #d1ecf1;
361
+ border-left-color: #3498db;
362
+ color: #0c5460;
363
+ }
364
+
365
+ .alert-success {
366
+ background: #d4edda;
367
+ border-left-color: #27ae60;
368
+ color: #155724;
369
+ }
370
+
371
+ .loading {
372
+ text-align: center;
373
+ padding: 60px;
374
+ color: #7f8c8d;
375
+ }
376
+
377
+ .loading-spinner {
378
+ display: inline-block;
379
+ width: 50px;
380
+ height: 50px;
381
+ border: 4px solid #f3f3f3;
382
+ border-top: 4px solid #3498db;
383
+ border-radius: 50%;
384
+ animation: spin 1s linear infinite;
385
+ margin-bottom: 20px;
386
+ }
387
+
388
+ @keyframes spin {
389
+ 0% { transform: rotate(0deg); }
390
+ 100% { transform: rotate(360deg); }
391
+ }
392
+
393
+ .matrix-visualization {
394
+ display: grid;
395
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
396
+ gap: 20px;
397
+ margin: 30px 0;
398
+ }
399
+
400
+ .matrix-item {
401
+ background: white;
402
+ padding: 20px;
403
+ border-radius: 10px;
404
+ text-align: center;
405
+ box-shadow: 0 3px 15px rgba(0,0,0,0.05);
406
+ }
407
+
408
+ .matrix-value {
409
+ font-size: 36px;
410
+ font-weight: bold;
411
+ color: #2c3e50;
412
+ margin: 10px 0;
413
+ }
414
+
415
+ .matrix-label {
416
+ font-size: 14px;
417
+ color: #7f8c8d;
418
+ }
419
+
420
+ @media (max-width: 768px) {
421
+ .container {
422
+ padding: 15px;
423
+ }
424
+
425
+ h1 {
426
+ font-size: 2em;
427
+ }
428
+
429
+ .chart-wrapper {
430
+ height: 400px;
431
+ }
432
+
433
+ .scenario-list {
434
+ grid-template-columns: 1fr;
435
+ }
436
+
437
+ .methodology-grid {
438
+ grid-template-columns: 1fr;
439
+ }
440
+
441
+ .export-controls {
442
+ flex-direction: column;
443
+ }
444
+ }
445
+ </style>
446
+
447
+ <!-- Chart.js pour les visualisations -->
448
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
449
+ <!-- Pour l'export PDF -->
450
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
451
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
452
+ </head>
453
+ <body>
454
+ <div class="container">
455
+ <a href="cross_readers.html" class="back-btn">⬅️ Retour à l'Analyse Croisée</a>
456
+ <a href="index.html" class="back-btn" style="background:linear-gradient(135deg, #95a5a6, #7f8c8d);">🏠 Dashboard Principal</a>
457
+
458
+ <header>
459
+ <h1>🔄 Consensus Building - Processus Expert</h1>
460
+ <p class="subtitle">
461
+ <strong>Consensus Building (Expert Validation Phase):</strong>
462
+ Following individual assessment, 14 experts participated in a consensus-building process to address inter-rater variability.
463
+ Discrepancies were analyzed and resolved through calibration sessions, yielding substantial inter-coder agreement
464
+ (Cohen's Kappa > 0.75) across all stages.
465
+ </p>
466
+ </header>
467
+
468
+ <!-- Aperçu des statistiques -->
469
+ <div class="stats-overview">
470
+ <div class="stat-card">
471
+ <div class="stat-label">Nombre d'experts</div>
472
+ <div class="stat-value">14</div>
473
+ <div class="stat-label">Interdisciplinaires</div>
474
+ </div>
475
+ <div class="stat-card">
476
+ <div class="stat-label">Taux de divergence initial</div>
477
+ <div class="stat-value">7%</div>
478
+ <div class="stat-label">des prompts</div>
479
+ </div>
480
+ <div class="stat-card highlight">
481
+ <div class="stat-label">Cohen's Kappa</div>
482
+ <div class="stat-value">>0.75</div>
483
+ <div class="stat-label">Accord substantiel</div>
484
+ </div>
485
+ <div class="stat-card">
486
+ <div class="stat-label">Scénarios testés</div>
487
+ <div class="stat-value">12</div>
488
+ <div class="stat-label">Variété complète</div>
489
+ </div>
490
+ </div>
491
+
492
+ <!-- Processus d'expert -->
493
+ <div class="expert-process">
494
+ <h3>🔬 Processus de Validation par les Experts</h3>
495
+ <ul>
496
+ <li><strong>Phase d'évaluation individuelle :</strong> Chaque expert évalue indépendamment les scénarios</li>
497
+ <li><strong>Identification des divergences :</strong> Analyse systématique des évaluations divergentes</li>
498
+ <li><strong>Sessions de calibration :</strong> Sessions ciblées pour les évaluations persistemment divergentes</li>
499
+ <li><strong>Établissement de critères communs :</strong> Transformation des jugements individuels en référentiel collectif</li>
500
+ <li><strong>Validation finale :</strong> Approbation consensuelle des évaluations</li>
501
+ </ul>
502
+ </div>
503
+
504
+ <!-- Graphique principal -->
505
+ <div class="chart-container">
506
+ <h3>📊 Niveaux de Confiance Avant vs Après le Consensus</h3>
507
+ <div class="chart-wrapper">
508
+ <canvas id="mainTrustChart"></canvas>
509
+ </div>
510
+ <p style="color: #7f8c8d; font-size: 14px; margin-top: 15px;">
511
+ <strong>Ligne orange:</strong> Seuil de confiance cible (80%).
512
+ <strong>Barres rouges:</strong> Confiance avant consensus.
513
+ <strong>Barres vertes:</strong> Confiance après consensus.
514
+ </p>
515
+ </div>
516
+
517
+ <!-- Amélioration de la confiance -->
518
+ <div class="chart-container">
519
+ <h3>📈 Amélioration de la Confiance par le Consensus</h3>
520
+ <div class="chart-wrapper">
521
+ <canvas id="improvementChart"></canvas>
522
+ </div>
523
+ </div>
524
+
525
+ <!-- Méthodologie -->
526
+ <h2 class="section-title">🔍 Méthodologie de Consensus</h2>
527
+ <div class="methodology-grid">
528
+ <div class="methodology-card calibration">
529
+ <h4>🎯 Calibration des Évaluateurs</h4>
530
+ <p>Des sessions structurées permettent d'aligner les critères d'évaluation entre les 14 experts interdisciplinaires.</p>
531
+ <div class="kappa-score">κ = 0.85 → 0.92</div>
532
+ <p>Amélioration significative de la fiabilité inter-codeurs</p>
533
+ </div>
534
+
535
+ <div class="methodology-card reliability">
536
+ <h4>📐 Mesure de Fiabilité</h4>
537
+ <p>Utilisation de Cohen's Kappa pour quantifier l'accord entre évaluateurs à chaque étape du processus.</p>
538
+ <ul style="margin-top: 15px; padding-left: 20px;">
539
+ <li>Annotation: κ > 0.78</li>
540
+ <li>Révision: κ > 0.82</li>
541
+ <li>Évaluation: κ > 0.85</li>
542
+ </ul>
543
+ </div>
544
+
545
+ <div class="methodology-card analysis">
546
+ <h4>📋 Analyse des Divergences</h4>
547
+ <p>Identification systématique des points de désaccord et résolution par délibération collective.</p>
548
+ <p>Seulement <strong>7% des prompts</strong> nécessitent des sessions de calibration supplémentaires.</p>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Scénarios détaillés -->
553
+ <h2 class="section-title">📋 Détail des Scénarios Testés</h2>
554
+ <div class="scenario-list" id="scenarioDetails">
555
+ <!-- Les scénarios seront générés dynamiquement -->
556
+ </div>
557
+
558
+ <!-- Analyse statistique -->
559
+ <div class="chart-container">
560
+ <h3>📐 Analyse Statistique - Résumé</h3>
561
+ <div class="chart-wrapper">
562
+ <canvas id="statisticalChart"></canvas>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Matrice d'amélioration -->
567
+ <h2 class="section-title">🎯 Matrice d'Amélioration</h2>
568
+ <div class="matrix-visualization">
569
+ <div class="matrix-item">
570
+ <div class="matrix-label">Amélioration moyenne</div>
571
+ <div class="matrix-value">+36.5%</div>
572
+ </div>
573
+ <div class="matrix-item">
574
+ <div class="matrix-label">Scénarios >80%</div>
575
+ <div class="matrix-value">11/12</div>
576
+ <div class="matrix-label">(91.7%)</div>
577
+ </div>
578
+ <div class="matrix-item">
579
+ <div class="matrix-label">Amélioration max</div>
580
+ <div class="matrix-value">+44%</div>
581
+ <div class="matrix-label">(S3)</div>
582
+ </div>
583
+ <div class="matrix-item">
584
+ <div class="matrix-label">Taille d'effet</div>
585
+ <div class="matrix-value">2.15</div>
586
+ <div class="matrix-label">(Grand effet)</div>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Tableau de comparaison -->
591
+ <h2 class="section-title">📊 Comparaison Avant/Après par Scénario</h2>
592
+ <table class="comparison-table">
593
+ <thead>
594
+ <tr>
595
+ <th>Scénario</th>
596
+ <th>Avant Consensus</th>
597
+ <th>Après Consensus</th>
598
+ <th>Amélioration</th>
599
+ <th>Statut Final</th>
600
+ </tr>
601
+ </thead>
602
+ <tbody id="comparisonTable">
603
+ <!-- Données générées dynamiquement -->
604
+ </tbody>
605
+ </table>
606
+
607
+ <!-- Boîte d'alerte -->
608
+ <div class="alert-box alert-success">
609
+ <h4 style="margin-bottom: 10px;">✅ Consensus Réussi</h4>
610
+ <p>Le processus de consensus building a permis d'atteindre un accord substantiel (κ > 0.75) sur l'ensemble des évaluations,
611
+ réduisant les divergences initiales de 7% à moins de 2% pour les scénarios persistents.</p>
612
+ </div>
613
+
614
+ <!-- Contrôles d'export -->
615
+ <h2 class="section-title">💾 Export des Résultats</h2>
616
+ <div class="export-controls">
617
+ <button onclick="exportToPDF()" class="download-btn">
618
+ 📄 Exporter en PDF
619
+ </button>
620
+ <button onclick="exportCharts()" class="download-btn" style="background:linear-gradient(135deg, #e74c3c, #c0392b);">
621
+ 📊 Exporter les graphiques
622
+ </button>
623
+ <button onclick="generateReport()" class="download-btn" style="background:linear-gradient(135deg, #9b59b6, #8e44ad);">
624
+ 📋 Générer le rapport complet
625
+ </button>
626
+ </div>
627
+
628
+ <!-- Zone de chargement -->
629
+ <div id="loading" class="loading" style="display: none;">
630
+ <div class="loading-spinner"></div>
631
+ <p>Génération du rapport...</p>
632
+ </div>
633
+ </div>
634
+
635
+ <script src="consensus_building.js"></script>
636
+ </body>
637
+ </html>