-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
765 lines (725 loc) · 44.8 KB
/
Copy pathindex.html
File metadata and controls
765 lines (725 loc) · 44.8 KB
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portail CSE - Espace salarié</title>
<meta name="description" content="Démo d'un portail CSE interne : billetterie, tickets de cinéma, réservation d'activités, justificatifs et suivi des demandes.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%231f4e79'/%3E%3Ctext x='16' y='22' font-size='15' font-family='Arial' font-weight='bold' fill='white' text-anchor='middle'%3ECSE%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.3.1/dist/driver.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<a class="skip-link" href="#contenu">Aller au contenu</a>
<div class="demo-banner" role="note">
Démonstration : ce portail est fictif, aucune donnée n'est enregistrée ni transmise.
</div>
<header class="site-header" id="en-tete">
<div class="container header-inner">
<a class="brand" href="#accueil" data-page="accueil">
<span class="brand-logo" aria-hidden="true">CSE</span>
<span class="brand-text">
<strong>Portail CSE</strong>
<small>Comité social et économique - Groupe Aldéris</small>
</span>
</a>
<button class="nav-toggle" id="nav-toggle" aria-expanded="false" aria-controls="nav-principale">
<span class="sr-only">Menu</span>
<span class="burger" aria-hidden="true"></span>
</button>
<nav class="nav-principale" id="nav-principale" aria-label="Navigation principale">
<ul>
<li><a href="#accueil" data-page="accueil" class="active">Accueil</a></li>
<li><a href="#billetterie" data-page="billetterie">Billetterie</a></li>
<li><a href="#cinema" data-page="cinema">Tickets de cinéma</a></li>
<li><a href="#activites" data-page="activites">Activités</a></li>
<li><a href="#justificatif" data-page="justificatif">Justificatifs</a></li>
<li><a href="#demandes" data-page="demandes">Mes demandes</a></li>
<li><a href="#contact" data-page="contact">Contact</a></li>
<li><a href="#aide" data-page="aide">Aide / FAQ</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="btn btn-help" id="btn-aide" type="button" aria-haspopup="menu" aria-expanded="false">
<span aria-hidden="true">?</span> Voir le guide
</button>
<div class="help-menu" id="help-menu" role="menu" hidden>
<p class="help-menu-title">Tutoriels interactifs</p>
<button role="menuitem" type="button" data-tour="decouverte">Découvrir le portail</button>
<button role="menuitem" type="button" data-tour="cinema">Commander mes tickets de cinéma</button>
<button role="menuitem" type="button" data-tour="activite">Réserver une activité</button>
<button role="menuitem" type="button" data-tour="justificatif">Déposer un justificatif</button>
<button role="menuitem" type="button" data-tour="demandes">Suivre mes demandes</button>
</div>
<div class="user-chip" id="profil-utilisateur" title="Compte bénéficiaire">
<span class="avatar" aria-hidden="true">KM</span>
<span class="user-name">Kevin Martin</span>
</div>
</div>
</div>
</header>
<main id="contenu" class="container">
<!-- ===================== ACCUEIL ===================== -->
<section class="page" id="page-accueil" data-page-section="accueil">
<div class="hero" id="hero">
<div class="hero-text">
<p class="eyebrow">Bienvenue sur votre espace</p>
<h1>Bonjour Kevin, que souhaitez-vous faire aujourd'hui ?</h1>
<p class="lead">Retrouvez ici vos avantages CSE : billetterie à tarif réduit, tickets de cinéma subventionnés, activités, remboursements et suivi de vos demandes.</p>
<div class="hero-actions">
<button class="btn btn-primary" type="button" data-page="cinema">Commander des tickets de cinéma</button>
<button class="btn btn-secondary" type="button" data-tour="decouverte" id="btn-decouverte">Visite guidée du portail</button>
</div>
</div>
<div class="hero-solde" id="solde-subvention">
<p class="solde-label">Subvention annuelle restante</p>
<p class="solde-montant"><span id="solde-valeur">142,50</span> €</p>
<p class="solde-detail">sur 200,00 € pour 2026 (2 ayants droit déclarés)</p>
<div class="progress" role="progressbar" aria-valuenow="71" aria-valuemin="0" aria-valuemax="100" aria-label="Subvention consommée">
<span id="solde-barre" style="width:71%"></span>
</div>
</div>
</div>
<h2 class="section-title">Vos services</h2>
<div class="cards-grid" id="cartes-services">
<article class="card service" data-page="cinema" tabindex="0" role="link">
<span class="icon" aria-hidden="true">🎬</span>
<h3>Tickets de cinéma</h3>
<p>Places à 5,50 € au lieu de 12 €, valables dans tous les cinémas partenaires.</p>
<span class="card-link">Commander</span>
</article>
<article class="card service" data-page="billetterie" tabindex="0" role="link">
<span class="icon" aria-hidden="true">🎟️</span>
<h3>Billetterie</h3>
<p>Parcs, spectacles, musées et concerts à tarif négocié pour vous et vos ayants droit.</p>
<span class="card-link">Voir les offres</span>
</article>
<article class="card service" data-page="activites" tabindex="0" role="link">
<span class="icon" aria-hidden="true">🏕️</span>
<h3>Activités</h3>
<p>Sorties, ateliers, week-ends et événements organisés par le CSE.</p>
<span class="card-link">Réserver</span>
</article>
<article class="card service" data-page="justificatif" tabindex="0" role="link">
<span class="icon" aria-hidden="true">📄</span>
<h3>Justificatifs</h3>
<p>Déposez une facture pour un remboursement sport, culture ou vacances.</p>
<span class="card-link">Déposer</span>
</article>
<article class="card service" data-page="demandes" tabindex="0" role="link">
<span class="icon" aria-hidden="true">📋</span>
<h3>Mes demandes</h3>
<p>Suivez l'avancement de vos commandes, réservations et remboursements.</p>
<span class="card-link">Consulter</span>
</article>
<article class="card service" data-page="contact" tabindex="0" role="link">
<span class="icon" aria-hidden="true">✉️</span>
<h3>Contacter le CSE</h3>
<p>Une question ? Les élus et la permanence vous répondent sous 48 h.</p>
<span class="card-link">Écrire</span>
</article>
</div>
<div class="two-cols">
<section class="card" id="actualites" aria-labelledby="titre-actus">
<h2 id="titre-actus">Actualités du CSE</h2>
<ul class="news-list">
<li>
<time datetime="2026-08-25">25 août 2026</time>
<strong>Ouverture des inscriptions à l'arbre de Noël</strong>
<p>Spectacle et goûter le samedi 12 décembre. Inscriptions jusqu'au 15 novembre.</p>
</li>
<li>
<time datetime="2026-08-18">18 août 2026</time>
<strong>Nouveaux cinémas partenaires</strong>
<p>Les réseaux Pathé et CGR acceptent désormais les e-billets du CSE.</p>
</li>
<li>
<time datetime="2026-07-30">30 juillet 2026</time>
<strong>Subvention sport et culture : rappel</strong>
<p>Les justificatifs 2026 doivent être déposés avant le 15 décembre.</p>
</li>
</ul>
</section>
<section class="card" id="prochaines-activites" aria-labelledby="titre-prochaines">
<h2 id="titre-prochaines">Prochaines activités</h2>
<ul class="agenda">
<li><span class="date-badge">19<br><small>sept.</small></span><div><strong>Sortie accrobranche en famille</strong><p>Forêt de Fontainebleau - 12 places restantes</p></div></li>
<li><span class="date-badge">03<br><small>oct.</small></span><div><strong>Atelier cuisine italienne</strong><p>Paris 11e - 4 places restantes</p></div></li>
<li><span class="date-badge">17<br><small>oct.</small></span><div><strong>Match Ligue 1 - tribune CSE</strong><p>Stade de France - 30 places restantes</p></div></li>
</ul>
<button class="btn btn-secondary btn-block" type="button" data-page="activites">Voir toutes les activités</button>
</section>
</div>
</section>
<!-- ===================== BILLETTERIE ===================== -->
<section class="page" id="page-billetterie" data-page-section="billetterie" hidden>
<nav class="breadcrumb" aria-label="Fil d'Ariane"><a href="#accueil" data-page="accueil">Accueil</a> › <span>Billetterie</span></nav>
<h1>Billetterie</h1>
<p class="lead">Des tarifs négociés par votre CSE pour les loisirs, la culture et les sorties. Les prix affichés incluent la participation du CSE.</p>
<div class="filters" id="filtres-billetterie" role="group" aria-label="Filtrer les offres">
<button class="chip active" type="button" data-filter="tous">Toutes</button>
<button class="chip" type="button" data-filter="parcs">Parcs de loisirs</button>
<button class="chip" type="button" data-filter="spectacles">Spectacles</button>
<button class="chip" type="button" data-filter="culture">Musées et culture</button>
<button class="chip" type="button" data-filter="sport">Sport</button>
</div>
<div class="cards-grid" id="offres-billetterie">
<article class="card offer" data-cat="parcs">
<div class="offer-head"><span class="tag">Parc de loisirs</span><span class="offer-discount">-35 %</span></div>
<h3>Disneyland Paris - 1 jour / 2 parcs</h3>
<p class="price"><s>105 €</s> <strong>68 €</strong></p>
<p>Billet daté, valable en basse et moyenne saison. Limité à 6 billets par bénéficiaire et par an.</p>
<button class="btn btn-primary btn-block" type="button" data-offer="Disneyland Paris">Commander</button>
</article>
<article class="card offer" data-cat="parcs">
<div class="offer-head"><span class="tag">Parc de loisirs</span><span class="offer-discount">-30 %</span></div>
<h3>Parc Astérix - billet non daté</h3>
<p class="price"><s>59 €</s> <strong>41 €</strong></p>
<p>Valable toute la saison 2026. Gratuit pour les enfants de moins de 3 ans.</p>
<button class="btn btn-primary btn-block" type="button" data-offer="Parc Astérix">Commander</button>
</article>
<article class="card offer" data-cat="spectacles">
<div class="offer-head"><span class="tag">Spectacle</span><span class="offer-discount">-25 %</span></div>
<h3>Le Roi Lion - Théâtre Mogador</h3>
<p class="price"><s>89 €</s> <strong>67 €</strong></p>
<p>Catégorie 1, représentations du mardi au jeudi. Choix de la date à la commande.</p>
<button class="btn btn-primary btn-block" type="button" data-offer="Le Roi Lion">Commander</button>
</article>
<article class="card offer" data-cat="culture">
<div class="offer-head"><span class="tag">Culture</span><span class="offer-discount">-40 %</span></div>
<h3>Pass Musées - 12 mois</h3>
<p class="price"><s>75 €</s> <strong>45 €</strong></p>
<p>Accès illimité à plus de 60 musées et monuments nationaux.</p>
<button class="btn btn-primary btn-block" type="button" data-offer="Pass Musées">Commander</button>
</article>
<article class="card offer" data-cat="sport">
<div class="offer-head"><span class="tag">Sport</span><span class="offer-discount">-20 %</span></div>
<h3>Carte 10 entrées piscine - Réseau Aquapolis</h3>
<p class="price"><s>48 €</s> <strong>38 €</strong></p>
<p>Utilisable dans 22 centres aquatiques en Île-de-France.</p>
<button class="btn btn-primary btn-block" type="button" data-offer="Carte piscine">Commander</button>
</article>
<article class="card offer" data-cat="spectacles">
<div class="offer-head"><span class="tag">Concert</span><span class="offer-discount">-15 %</span></div>
<h3>Festival Jazz sous les Étoiles</h3>
<p class="price"><s>42 €</s> <strong>36 €</strong></p>
<p>Pass 1 soirée, 3 et 4 juillet 2026. Places assises non numérotées.</p>
<button class="btn btn-primary btn-block" type="button" data-offer="Festival Jazz">Commander</button>
</article>
</div>
<aside class="info-box" id="regles-billetterie">
<h2>Bon à savoir</h2>
<ul>
<li>Les billets sont réservés aux salariés et à leurs ayants droit déclarés (conjoint, enfants à charge).</li>
<li>Le paiement s'effectue par carte bancaire ou par retenue sur salaire (dans la limite de 150 € par mois).</li>
<li>Les e-billets sont envoyés par courriel sous 24 h ouvrées après validation.</li>
</ul>
</aside>
</section>
<!-- ===================== CINEMA ===================== -->
<section class="page" id="page-cinema" data-page-section="cinema" hidden>
<nav class="breadcrumb" aria-label="Fil d'Ariane"><a href="#accueil" data-page="accueil">Accueil</a> › <span>Commander mes tickets de cinéma</span></nav>
<div class="page-head">
<div>
<h1>Commander mes tickets de cinéma</h1>
<p class="lead">Des e-billets valables 6 mois, acceptés dans plus de 900 cinémas en France. Le CSE prend en charge une partie du prix.</p>
</div>
<button class="btn btn-secondary" type="button" data-tour="cinema" id="btn-guide-cinema">
<span aria-hidden="true">▶</span> Voir le guide de commande
</button>
</div>
<div class="layout-form">
<form id="form-cinema" class="card form" novalidate>
<fieldset id="cinema-reseau">
<legend>1. Choisissez le réseau de cinémas</legend>
<div class="radio-cards">
<label class="radio-card">
<input type="radio" name="reseau" value="UGC" checked>
<span><strong>UGC / Mk2</strong><small>5,50 € le billet</small></span>
</label>
<label class="radio-card">
<input type="radio" name="reseau" value="Pathé">
<span><strong>Pathé / Gaumont</strong><small>5,90 € le billet</small></span>
</label>
<label class="radio-card">
<input type="radio" name="reseau" value="CGR">
<span><strong>CGR Cinémas</strong><small>5,20 € le billet</small></span>
</label>
<label class="radio-card">
<input type="radio" name="reseau" value="Indépendants">
<span><strong>Cinémas indépendants</strong><small>4,80 € le billet</small></span>
</label>
</div>
</fieldset>
<fieldset id="cinema-quantite">
<legend>2. Indiquez la quantité</legend>
<div class="field-row">
<label for="cinema-nb">Nombre de billets</label>
<div class="stepper">
<button type="button" class="stepper-btn" data-step="-1" aria-label="Retirer un billet">−</button>
<input type="number" id="cinema-nb" name="quantite" min="1" max="10" value="2" inputmode="numeric">
<button type="button" class="stepper-btn" data-step="1" aria-label="Ajouter un billet">+</button>
</div>
<p class="hint">Limite : 10 billets par bénéficiaire et par mois. Il vous en reste <strong>8</strong> ce mois-ci.</p>
</div>
</fieldset>
<fieldset id="cinema-beneficiaire">
<legend>3. Précisez le bénéficiaire</legend>
<div class="field">
<label for="cinema-benef">Pour qui sont ces billets ?</label>
<select id="cinema-benef" name="beneficiaire">
<option value="Kevin Martin (moi)">Kevin Martin (moi)</option>
<option value="Alex Martin (conjoint)">Alex Martin (conjoint)</option>
<option value="Léa Martin (enfant, 14 ans)">Léa Martin (enfant, 14 ans)</option>
</select>
<p class="hint">Les ayants droit doivent être déclarés dans votre dossier CSE.</p>
</div>
</fieldset>
<fieldset id="cinema-livraison">
<legend>4. Mode de réception</legend>
<div class="radio-list">
<label><input type="radio" name="livraison" value="E-billets par courriel" checked> E-billets par courriel (immédiat après validation)</label>
<label><input type="radio" name="livraison" value="Retrait à la permanence CSE"> Retrait à la permanence CSE (bâtiment B, mardi et jeudi 12 h - 14 h)</label>
</div>
</fieldset>
<fieldset id="cinema-paiement">
<legend>5. Mode de paiement</legend>
<div class="radio-list">
<label><input type="radio" name="paiement" value="Carte bancaire" checked> Carte bancaire (paiement sécurisé)</label>
<label><input type="radio" name="paiement" value="Retenue sur salaire"> Retenue sur salaire du mois prochain</label>
</div>
</fieldset>
<div class="form-footer">
<label class="checkbox" id="cinema-conditions">
<input type="checkbox" id="cinema-cgv" name="cgv"> J'ai lu et j'accepte les <a href="#aide" data-page="aide">conditions d'utilisation de la billetterie</a>.
</label>
<div class="form-actions">
<button type="button" class="btn btn-link" data-page="accueil">Annuler</button>
<button type="submit" class="btn btn-primary btn-lg" id="cinema-valider">Valider ma commande</button>
</div>
</div>
</form>
<aside class="card recap sticky" id="recap-cinema" aria-live="polite">
<h2>Récapitulatif</h2>
<dl class="recap-list">
<div><dt>Réseau</dt><dd id="recap-reseau">UGC / Mk2</dd></div>
<div><dt>Quantité</dt><dd id="recap-qte">2 billets</dd></div>
<div><dt>Prix unitaire public</dt><dd>12,00 €</dd></div>
<div><dt>Participation CSE</dt><dd class="good" id="recap-subvention">- 13,00 €</dd></div>
<div class="total"><dt>Reste à votre charge</dt><dd id="recap-total">11,00 €</dd></div>
</dl>
<p class="hint">La participation du CSE est déduite de votre subvention annuelle (<strong id="recap-solde">142,50 €</strong> restants).</p>
</aside>
</div>
</section>
<!-- ===================== ACTIVITES ===================== -->
<section class="page" id="page-activites" data-page-section="activites" hidden>
<nav class="breadcrumb" aria-label="Fil d'Ariane"><a href="#accueil" data-page="accueil">Accueil</a> › <span>Réserver une activité</span></nav>
<div class="page-head">
<div>
<h1>Réserver une activité</h1>
<p class="lead">Sorties, ateliers et événements organisés par le CSE. Les places sont attribuées par ordre d'inscription.</p>
</div>
<button class="btn btn-secondary" type="button" data-tour="activite">
<span aria-hidden="true">▶</span> Voir le guide
</button>
</div>
<div class="cards-grid" id="liste-activites">
<article class="card activity" data-activite="Sortie accrobranche en famille" data-prix="8" data-date="samedi 19 septembre 2026">
<div class="activity-img" style="--img:linear-gradient(135deg,#2f7a4f,#8bc48a)" aria-hidden="true">🌲</div>
<div class="activity-body">
<span class="tag">Famille</span>
<h3>Sortie accrobranche en famille</h3>
<p class="meta">Samedi 19 septembre 2026 - Forêt de Fontainebleau - dès 6 ans</p>
<p class="price"><strong>8 €</strong> par personne <s>26 €</s></p>
<p class="places ok">12 places restantes</p>
<button class="btn btn-primary btn-block btn-reserver" type="button">Réserver</button>
</div>
</article>
<article class="card activity" data-activite="Atelier cuisine italienne" data-prix="15" data-date="samedi 3 octobre 2026">
<div class="activity-img" style="--img:linear-gradient(135deg,#b3412f,#f2a65a)" aria-hidden="true">🍝</div>
<div class="activity-body">
<span class="tag">Atelier</span>
<h3>Atelier cuisine italienne</h3>
<p class="meta">Samedi 3 octobre 2026 - Paris 11e - 3 h - adultes</p>
<p class="price"><strong>15 €</strong> par personne <s>65 €</s></p>
<p class="places warn">4 places restantes</p>
<button class="btn btn-primary btn-block btn-reserver" type="button">Réserver</button>
</div>
</article>
<article class="card activity" data-activite="Match Ligue 1 - tribune CSE" data-prix="20" data-date="samedi 17 octobre 2026">
<div class="activity-img" style="--img:linear-gradient(135deg,#1f4e79,#5b9bd5)" aria-hidden="true">⚽</div>
<div class="activity-body">
<span class="tag">Sport</span>
<h3>Match Ligue 1 - tribune CSE</h3>
<p class="meta">Samedi 17 octobre 2026 - Stade de France - 21 h</p>
<p class="price"><strong>20 €</strong> par personne <s>55 €</s></p>
<p class="places ok">30 places restantes</p>
<button class="btn btn-primary btn-block btn-reserver" type="button">Réserver</button>
</div>
</article>
<article class="card activity" data-activite="Week-end à Amsterdam" data-prix="190" data-date="du 14 au 15 novembre 2026">
<div class="activity-img" style="--img:linear-gradient(135deg,#6a4c93,#c77dff)" aria-hidden="true">🚲</div>
<div class="activity-body">
<span class="tag">Voyage</span>
<h3>Week-end à Amsterdam</h3>
<p class="meta">14 et 15 novembre 2026 - train + hôtel 3* - petit déjeuner inclus</p>
<p class="price"><strong>190 €</strong> par personne <s>340 €</s></p>
<p class="places warn">2 places restantes</p>
<button class="btn btn-primary btn-block btn-reserver" type="button">Réserver</button>
</div>
</article>
<article class="card activity" data-activite="Arbre de Noël" data-prix="0" data-date="samedi 12 décembre 2026">
<div class="activity-img" style="--img:linear-gradient(135deg,#9c2a2a,#e0a458)" aria-hidden="true">🎄</div>
<div class="activity-body">
<span class="tag">Événement</span>
<h3>Arbre de Noël du CSE</h3>
<p class="meta">Samedi 12 décembre 2026 - Salle des fêtes - spectacle et goûter</p>
<p class="price"><strong>Gratuit</strong> pour les enfants de moins de 12 ans</p>
<p class="places ok">Inscriptions ouvertes</p>
<button class="btn btn-primary btn-block btn-reserver" type="button">Réserver</button>
</div>
</article>
<article class="card activity" data-activite="Cours de yoga du midi" data-prix="30" data-date="du 5 octobre au 14 décembre 2026">
<div class="activity-img" style="--img:linear-gradient(135deg,#2a9d8f,#8ecae6)" aria-hidden="true">🧘</div>
<div class="activity-body">
<span class="tag">Bien-être</span>
<h3>Cours de yoga du midi</h3>
<p class="meta">Tous les lundis, 12 h 30 - 13 h 15 - salle Horizon - 10 séances</p>
<p class="price"><strong>30 €</strong> les 10 séances <s>120 €</s></p>
<p class="places full">Complet - liste d'attente</p>
<button class="btn btn-secondary btn-block btn-reserver" type="button">Rejoindre la liste d'attente</button>
</div>
</article>
</div>
<form id="form-activite" class="card form" hidden novalidate>
<h2 id="activite-titre">Réservation : <span id="activite-nom"></span></h2>
<p class="meta" id="activite-date"></p>
<div class="grid-2">
<div class="field" id="activite-participants-field">
<label for="activite-participants">Nombre de participants</label>
<input type="number" id="activite-participants" min="1" max="6" value="2">
</div>
<div class="field">
<label for="activite-ayants-droit">Participants</label>
<select id="activite-ayants-droit" multiple size="3" aria-describedby="activite-hint">
<option selected>Kevin Martin (moi)</option>
<option selected>Alex Martin (conjoint)</option>
<option>Léa Martin (enfant, 14 ans)</option>
</select>
<p class="hint" id="activite-hint">Maintenez Ctrl (ou Cmd) pour sélectionner plusieurs personnes.</p>
</div>
</div>
<div class="field">
<label for="activite-commentaire">Informations complémentaires (facultatif)</label>
<textarea id="activite-commentaire" rows="2" placeholder="Allergie, mobilité réduite, covoiturage..."></textarea>
</div>
<div class="recap-inline" id="activite-recap">
<span>Montant estimé</span><strong id="activite-total">16 €</strong>
</div>
<div class="form-actions">
<button type="button" class="btn btn-link" id="activite-annuler">Annuler</button>
<button type="submit" class="btn btn-primary btn-lg" id="activite-valider">Confirmer ma réservation</button>
</div>
</form>
</section>
<!-- ===================== JUSTIFICATIF ===================== -->
<section class="page" id="page-justificatif" data-page-section="justificatif" hidden>
<nav class="breadcrumb" aria-label="Fil d'Ariane"><a href="#accueil" data-page="accueil">Accueil</a> › <span>Déposer un justificatif</span></nav>
<div class="page-head">
<div>
<h1>Déposer un justificatif</h1>
<p class="lead">Demandez le remboursement d'une dépense sport, culture ou vacances. Le CSE rembourse 50 % du montant, dans la limite de votre subvention annuelle.</p>
</div>
<button class="btn btn-secondary" type="button" data-tour="justificatif" id="btn-guide-justificatif">
<span aria-hidden="true">▶</span> Aide au dépôt
</button>
</div>
<div class="layout-form">
<form id="form-justificatif" class="card form" novalidate>
<div class="field" id="justif-type-field">
<label for="justif-type">Type de dépense <span class="req" aria-hidden="true">*</span></label>
<select id="justif-type" required>
<option value="">Sélectionnez...</option>
<option>Licence ou abonnement sportif</option>
<option>Activité culturelle (cours, conservatoire, théâtre)</option>
<option>Séjour vacances (location, camping, colonie)</option>
<option>Garde d'enfant (centre de loisirs)</option>
<option>Autre dépense éligible</option>
</select>
</div>
<div class="grid-2">
<div class="field" id="justif-montant-field">
<label for="justif-montant">Montant TTC payé <span class="req" aria-hidden="true">*</span></label>
<div class="input-suffix"><input type="number" id="justif-montant" min="1" step="0.01" placeholder="0,00" required><span>€</span></div>
</div>
<div class="field">
<label for="justif-date">Date de la facture <span class="req" aria-hidden="true">*</span></label>
<input type="date" id="justif-date" required max="2026-12-31">
</div>
</div>
<div class="field">
<label for="justif-benef">Bénéficiaire</label>
<select id="justif-benef">
<option>Kevin Martin (moi)</option>
<option>Alex Martin (conjoint)</option>
<option>Léa Martin (enfant, 14 ans)</option>
</select>
</div>
<div class="field" id="justif-fichier-field">
<span class="label">Pièce justificative <span class="req" aria-hidden="true">*</span></span>
<label class="dropzone" for="justif-fichier" id="justif-dropzone">
<span class="dropzone-icon" aria-hidden="true">📎</span>
<span><strong>Glissez votre fichier ici</strong> ou cliquez pour parcourir</span>
<small>PDF, JPG ou PNG - 5 Mo maximum - facture acquittée à votre nom</small>
<input type="file" id="justif-fichier" accept=".pdf,.jpg,.jpeg,.png" class="sr-only">
</label>
<p class="file-name" id="justif-fichier-nom" aria-live="polite"></p>
</div>
<label class="checkbox" id="justif-attestation">
<input type="checkbox" id="justif-honneur"> J'atteste sur l'honneur l'exactitude des informations fournies et que cette dépense n'a pas déjà fait l'objet d'un remboursement.
</label>
<div class="form-actions">
<button type="button" class="btn btn-link" data-page="accueil">Annuler</button>
<button type="submit" class="btn btn-primary btn-lg" id="justif-valider">Envoyer ma demande</button>
</div>
</form>
<aside class="card recap sticky" id="recap-justificatif" aria-live="polite">
<h2>Estimation du remboursement</h2>
<dl class="recap-list">
<div><dt>Montant déclaré</dt><dd id="justif-recap-montant">0,00 €</dd></div>
<div><dt>Taux de prise en charge</dt><dd>50 %</dd></div>
<div class="total"><dt>Remboursement estimé</dt><dd id="justif-recap-rembourse">0,00 €</dd></div>
</dl>
<p class="hint">Plafonné à votre subvention restante (<strong>142,50 €</strong>). Versement sur la paie du mois suivant la validation.</p>
<h3>Pièces acceptées</h3>
<ul class="check-list">
<li>Facture ou reçu acquitté</li>
<li>Nom du bénéficiaire lisible</li>
<li>Date de moins de 12 mois</li>
</ul>
</aside>
</div>
</section>
<!-- ===================== DEMANDES ===================== -->
<section class="page" id="page-demandes" data-page-section="demandes" hidden>
<nav class="breadcrumb" aria-label="Fil d'Ariane"><a href="#accueil" data-page="accueil">Accueil</a> › <span>Suivre mes demandes</span></nav>
<div class="page-head">
<div>
<h1>Suivre mes demandes</h1>
<p class="lead">Retrouvez l'historique et l'état de vos commandes, réservations et demandes de remboursement.</p>
</div>
<button class="btn btn-secondary" type="button" data-tour="demandes" id="btn-guide-demandes">
<span aria-hidden="true">▶</span> Voir le guide
</button>
</div>
<div class="stats" id="stats-demandes">
<div class="stat"><span class="stat-value" id="stat-en-cours">2</span><span class="stat-label">En cours</span></div>
<div class="stat"><span class="stat-value" id="stat-validees">3</span><span class="stat-label">Validées</span></div>
<div class="stat"><span class="stat-value" id="stat-attente">1</span><span class="stat-label">Pièce manquante</span></div>
</div>
<div class="table-toolbar">
<div class="filters" id="filtres-demandes" role="group" aria-label="Filtrer par état">
<button class="chip active" type="button" data-status="tous">Toutes</button>
<button class="chip" type="button" data-status="en-cours">En cours</button>
<button class="chip" type="button" data-status="validee">Validées</button>
<button class="chip" type="button" data-status="attente">Pièce manquante</button>
</div>
<label class="search" for="recherche-demandes"><span class="sr-only">Rechercher</span><input type="search" id="recherche-demandes" placeholder="Rechercher un numéro ou un libellé"></label>
</div>
<div class="table-wrap card" id="tableau-demandes">
<table>
<caption class="sr-only">Liste de vos demandes</caption>
<thead>
<tr><th scope="col">N° de dossier</th><th scope="col">Type</th><th scope="col">Libellé</th><th scope="col">Date</th><th scope="col">Montant</th><th scope="col">État</th><th scope="col"><span class="sr-only">Actions</span></th></tr>
</thead>
<tbody id="demandes-tbody">
<tr data-status="en-cours" data-id="D-2026-0418">
<td data-label="N° de dossier"><code>D-2026-0418</code></td>
<td data-label="Type">Cinéma</td>
<td data-label="Libellé">4 billets UGC / Mk2</td>
<td data-label="Date">26/08/2026</td>
<td data-label="Montant">22,00 €</td>
<td data-label="État"><span class="badge en-cours">En cours de traitement</span></td>
<td><button class="btn btn-small btn-detail" type="button">Détail</button></td>
</tr>
<tr data-status="attente" data-id="D-2026-0402">
<td data-label="N° de dossier"><code>D-2026-0402</code></td>
<td data-label="Type">Remboursement</td>
<td data-label="Libellé">Licence club de natation - Léa</td>
<td data-label="Date">19/08/2026</td>
<td data-label="Montant">95,00 €</td>
<td data-label="État"><span class="badge attente">Pièce manquante</span></td>
<td><button class="btn btn-small btn-detail" type="button">Détail</button></td>
</tr>
<tr data-status="en-cours" data-id="D-2026-0397">
<td data-label="N° de dossier"><code>D-2026-0397</code></td>
<td data-label="Type">Activité</td>
<td data-label="Libellé">Accrobranche - 3 participants</td>
<td data-label="Date">12/08/2026</td>
<td data-label="Montant">24,00 €</td>
<td data-label="État"><span class="badge en-cours">En attente de paiement</span></td>
<td><button class="btn btn-small btn-detail" type="button">Détail</button></td>
</tr>
<tr data-status="validee" data-id="D-2026-0351">
<td data-label="N° de dossier"><code>D-2026-0351</code></td>
<td data-label="Type">Billetterie</td>
<td data-label="Libellé">2 billets Parc Astérix</td>
<td data-label="Date">03/07/2026</td>
<td data-label="Montant">82,00 €</td>
<td data-label="État"><span class="badge validee">Validée - e-billets envoyés</span></td>
<td><button class="btn btn-small btn-detail" type="button">Détail</button></td>
</tr>
<tr data-status="validee" data-id="D-2026-0290">
<td data-label="N° de dossier"><code>D-2026-0290</code></td>
<td data-label="Type">Remboursement</td>
<td data-label="Libellé">Abonnement salle de sport</td>
<td data-label="Date">15/05/2026</td>
<td data-label="Montant">57,50 €</td>
<td data-label="État"><span class="badge validee">Remboursée sur paie de juin</span></td>
<td><button class="btn btn-small btn-detail" type="button">Détail</button></td>
</tr>
<tr data-status="validee" data-id="D-2026-0212">
<td data-label="N° de dossier"><code>D-2026-0212</code></td>
<td data-label="Type">Cinéma</td>
<td data-label="Libellé">6 billets Pathé / Gaumont</td>
<td data-label="Date">02/04/2026</td>
<td data-label="Montant">35,40 €</td>
<td data-label="État"><span class="badge validee">Validée - e-billets envoyés</span></td>
<td><button class="btn btn-small btn-detail" type="button">Détail</button></td>
</tr>
</tbody>
</table>
<p class="empty" id="demandes-vide" hidden>Aucune demande ne correspond à votre recherche.</p>
</div>
<div class="card detail-panel" id="detail-demande" hidden aria-live="polite">
<div class="detail-head">
<h2>Dossier <span id="detail-id"></span></h2>
<button class="btn btn-link" type="button" id="detail-fermer">Fermer</button>
</div>
<ol class="timeline" id="detail-timeline"></ol>
<div class="detail-actions" id="detail-actions"></div>
</div>
</section>
<!-- ===================== CONTACT ===================== -->
<section class="page" id="page-contact" data-page-section="contact" hidden>
<nav class="breadcrumb" aria-label="Fil d'Ariane"><a href="#accueil" data-page="accueil">Accueil</a> › <span>Contacter le CSE</span></nav>
<h1>Contacter le CSE</h1>
<p class="lead">Les élus et la permanence du CSE sont à votre écoute. Réponse sous 48 h ouvrées.</p>
<div class="layout-form">
<form id="form-contact" class="card form" novalidate>
<div class="field">
<label for="contact-objet">Objet de votre message <span class="req" aria-hidden="true">*</span></label>
<select id="contact-objet" required>
<option value="">Sélectionnez...</option>
<option>Question sur une demande en cours</option>
<option>Mise à jour de mes ayants droit</option>
<option>Problème avec un e-billet</option>
<option>Suggestion d'activité</option>
<option>Autre</option>
</select>
</div>
<div class="field">
<label for="contact-dossier">Numéro de dossier concerné (facultatif)</label>
<input type="text" id="contact-dossier" placeholder="D-2026-0000">
</div>
<div class="field">
<label for="contact-message">Votre message <span class="req" aria-hidden="true">*</span></label>
<textarea id="contact-message" rows="6" required placeholder="Décrivez votre demande..."></textarea>
</div>
<label class="checkbox"><input type="checkbox" id="contact-copie" checked> Recevoir une copie par courriel</label>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-lg">Envoyer le message</button>
</div>
</form>
<aside class="card" id="coordonnees-cse">
<h2>Permanence du CSE</h2>
<p><strong>Bâtiment B, rez-de-chaussée, bureau 012</strong></p>
<p>Mardi et jeudi : 12 h - 14 h<br>Vendredi : 9 h - 12 h</p>
<p><a href="mailto:cse@alderis-demo.fr">cse@alderis-demo.fr</a><br>Poste interne : 4520</p>
<h3>Vos élus</h3>
<ul class="people">
<li><span class="avatar" aria-hidden="true">SD</span><div><strong>Sophie Durand</strong><small>Secrétaire du CSE</small></div></li>
<li><span class="avatar" aria-hidden="true">KB</span><div><strong>Karim Benali</strong><small>Trésorier</small></div></li>
<li><span class="avatar" aria-hidden="true">JR</span><div><strong>Julie Roussel</strong><small>Commission activités sociales</small></div></li>
</ul>
</aside>
</div>
</section>
<!-- ===================== AIDE / FAQ ===================== -->
<section class="page" id="page-aide" data-page-section="aide" hidden>
<nav class="breadcrumb" aria-label="Fil d'Ariane"><a href="#accueil" data-page="accueil">Accueil</a> › <span>Aide / FAQ</span></nav>
<h1>Aide et questions fréquentes</h1>
<p class="lead">Besoin d'un coup de main ? Relancez un tutoriel interactif ou consultez les réponses aux questions les plus courantes.</p>
<section class="card" id="tutoriels" aria-labelledby="titre-tutoriels">
<h2 id="titre-tutoriels">Tutoriels interactifs</h2>
<p>Chaque tutoriel vous guide pas à pas directement dans l'interface. Vous pouvez les rejouer autant de fois que nécessaire.</p>
<div class="tuto-grid">
<button class="tuto" type="button" data-tour="decouverte"><span aria-hidden="true">🧭</span><strong>Découvrir le portail</strong><small>2 min - 8 étapes</small></button>
<button class="tuto" type="button" data-tour="cinema"><span aria-hidden="true">🎬</span><strong>Commander mes tickets de cinéma</strong><small>3 min - 9 étapes</small></button>
<button class="tuto" type="button" data-tour="activite"><span aria-hidden="true">🏕️</span><strong>Réserver une activité</strong><small>2 min - 5 étapes</small></button>
<button class="tuto" type="button" data-tour="justificatif"><span aria-hidden="true">📄</span><strong>Déposer un justificatif</strong><small>2 min - 6 étapes</small></button>
<button class="tuto" type="button" data-tour="demandes"><span aria-hidden="true">📋</span><strong>Suivre mes demandes</strong><small>2 min - 6 étapes</small></button>
</div>
</section>
<section class="card" id="faq" aria-labelledby="titre-faq">
<h2 id="titre-faq">Questions fréquentes</h2>
<details open>
<summary>Qui peut bénéficier des offres du CSE ?</summary>
<p>Tous les salariés en CDI ou CDD de plus de 3 mois, ainsi que leurs ayants droit déclarés : conjoint (marié, pacsé ou concubin) et enfants à charge de moins de 20 ans.</p>
</details>
<details>
<summary>Comment déclarer un ayant droit ?</summary>
<p>Envoyez un message via la rubrique <a href="#contact" data-page="contact">Contacter le CSE</a> avec l'objet « Mise à jour de mes ayants droit », accompagné d'un justificatif (livret de famille, attestation de PACS, certificat de concubinage).</p>
</details>
<details>
<summary>Quel est le montant de ma subvention annuelle ?</summary>
<p>Chaque bénéficiaire dispose de 200 € par an, majorés de 50 € par ayant droit. Le solde est visible en haut de la page d'accueil et se met à jour à chaque demande validée.</p>
</details>
<details>
<summary>Combien de temps mes e-billets de cinéma sont-ils valables ?</summary>
<p>Les e-billets sont valables 6 mois à compter de la date d'émission, hors séances spéciales (avant-premières, 3D, IMAX) qui peuvent nécessiter un supplément réglé sur place.</p>
</details>
<details>
<summary>Que signifie l'état « Pièce manquante » ?</summary>
<p>Le gestionnaire a besoin d'un document complémentaire pour traiter votre dossier. Ouvrez le détail de la demande dans <a href="#demandes" data-page="demandes">Mes demandes</a> pour connaître la pièce attendue et la déposer directement.</p>
</details>
<details>
<summary>Quand suis-je remboursé après avoir déposé un justificatif ?</summary>
<p>Après validation par le CSE (sous 10 jours ouvrés en moyenne), le remboursement est versé sur la paie du mois suivant.</p>
</details>
<details>
<summary>Puis-je annuler une réservation d'activité ?</summary>
<p>Oui, jusqu'à 7 jours avant la date de l'activité, depuis le détail de la demande. Passé ce délai, la participation reste due sauf cas de force majeure.</p>
</details>
</section>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<p><strong>Portail CSE - Groupe Aldéris</strong> (démonstration). Aucune donnée réelle n'est traitée.</p>
<ul>
<li><a href="#aide" data-page="aide">Aide / FAQ</a></li>
<li><a href="#contact" data-page="contact">Contact</a></li>
<li><button class="btn btn-link" type="button" data-tour="decouverte">Rejouer la visite guidée</button></li>
</ul>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
<div class="modal" id="modal" hidden role="dialog" aria-modal="true" aria-labelledby="modal-titre">
<div class="modal-backdrop" data-close></div>
<div class="modal-box">
<div class="modal-icon" aria-hidden="true">✔</div>
<h2 id="modal-titre"></h2>
<div id="modal-corps"></div>
<div class="modal-actions">
<button class="btn btn-secondary" type="button" data-close>Fermer</button>
<button class="btn btn-primary" type="button" id="modal-suivi" data-page="demandes">Suivre ma demande</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.3.1/dist/driver.js.iife.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/tours.js"></script>
</body>
</html>