This repository has been archived by the owner on Mar 18, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1610 lines (1558 loc) · 196 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="fr" data-theme='none'>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/css/app.css">
<title>Gabi</title>
</head>
<body>
<nav class="menu">
</nav>
<div class="percent">
<svg width="500" height="190" viewPort="100 100 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle r="20" cx="20" cy="20" fill="transparent" stroke-dasharray="500" stroke-dashoffset="0">
</circle>
<circle id="bar" transform="rotate(-90 25 25)" r="20" cx="25" cy="25" fill="transparent"
stroke-dasharray="498" stroke-dashoffset="0"></circle>
</svg>
<span class="value"></span>
</div>
<div class="line__start line-top hidden"></div>
<div class="line line-bottom"></div>
<div class="side__line line__left hidden"></div>
<div class="side__line line__right hidden"></div>
<span class="aboutBtn">En savoir +</span>
<div class="about fadeOut">
<span class="close">
<svg width="42" height="43" viewBox="0 0 42 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M20.9713 42.7618C32.504 42.7618 41.8531 33.4127 41.8531 21.8799C41.8531 10.3472 32.504 0.998047 20.9713 0.998047C9.43848 0.998047 0.0893555 10.3472 0.0893555 21.8799C0.0893555 33.4127 9.43848 42.7618 20.9713 42.7618ZM14.2224 16.4809C13.8496 16.1082 13.8496 15.5038 14.2224 15.1311C14.5951 14.7584 15.1994 14.7584 15.5721 15.1311L20.9713 20.5302L26.3702 15.1313C26.743 14.7585 27.3473 14.7585 27.72 15.1313C28.0927 15.504 28.0927 16.1083 27.72 16.481L22.321 21.88L27.72 27.2791C28.0928 27.6518 28.0928 28.2561 27.72 28.6288C27.3474 29.0016 26.743 29.0016 26.3703 28.6288L20.9713 23.2298L15.5721 28.629C15.1993 29.0017 14.595 29.0017 14.2223 28.629C13.8495 28.2563 13.8495 27.6519 14.2223 27.2792L19.6215 21.88L14.2224 16.4809Z"
fill="#484848" style="mix-blend-mode:darken" />
</svg>
</span>
<img class="gabi_logo" src="dist/img/logo.png" alt="Logo du site Gabi">
<p class="intro">Travail étudiant réalisé par</p>
<p>Hugo lefrant</p>
<p>Amelie Mouillac</p>
<p>Laura Rodrigues</p>
<p>Eva Vermot-Desroches</p>
<p>Aurelie Mery</p>
<a class="source"
href="https://docs.google.com/document/d/1kUS07btKjVyuKObRmXW1ZmlV1VFrsKqt6xJT_EjT2Y4/edit?usp=sharing">Lien
vers les sources</a>
<div class="logo">
<a href="https://www.gobelins.fr/"><img src="dist/img/gobelins.png" alt=""></a>
<a href="hhttps://www.gobelins.fr/"><img src="dist/img/logo_campus.png" alt=""></a>
</div>
</div>
<div class="timeline">
<div class="timeline__item is-active" data-id="0" data-state="first" data-number="1"></div>
<div class="timeline__item" data-id="1" data-state="second" data-number="2"></div>
<div class="timeline__item" data-id="2" data-state="third" data-number="3"></div>
<div class="timeline__item" data-id="3" data-state="fourth" data-number="4"></div>
<div class="timeline__item" data-id="4" data-state="fifth" data-number="5"></div>
</div>
<div class="timeline__values">
<div class="timeline__value fadeOut">
<p>5 ans</p>
</div>
<div class="timeline__value fadeOut">
<p>15 ans</p>
</div>
<div class="timeline__value fadeOut">
<p>25 ans</p>
</div>
<div class="timeline__value fadeOut">
<p>35 ans</p>
</div>
<div class="timeline__value fadeOut">
<p>70 ans</p>
</div>
</div>
<section class="introduction">
<svg width="413" height="147" viewBox="0 0 413 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M155.177 53.067L159.089 76.8845C159.089 76.8845 166.249 72.4553 186.479 71.7867C186.479 71.7867 193.888 71.6195 199.715 74.3774C201.38 75.1295 202.795 76.2995 203.794 77.7202C205.293 79.8094 205.293 80.9794 205.459 83.8208C205.459 83.8208 208.207 109.226 212.286 130.286C212.286 130.286 213.118 135.216 216.032 139.228C217.697 141.568 220.194 143.239 222.942 144.075C227.021 145.328 234.347 146.248 245.752 143.156V124.854C245.752 124.854 238.093 125.857 238.01 118.168C238.01 118.252 237.76 79.893 237.76 79.893C237.76 79.893 237.927 55.6576 212.452 48.8049C212.536 48.972 184.397 40.6986 155.177 53.067Z"
fill="#484848" style="mix-blend-mode:darken" />
<g style="mix-blend-mode:multiply">
<path d="M212.426 89.2531C210.261 86.9131 207.847 84.8239 204.933 83.5703C187.035 75.6312 169.219 83.4868 169.219 83.4868C148.24 92.1781 150.904 115.327 150.904 115.327C151.737 130.37 160.728 138.142 168.97 141.819C177.294 145.579 186.618 146.164 195.526 144.242C212.675 140.565 215.506 130.203 215.506 130.203C222.665 113.656 221 98.613 212.426 89.2531ZM207.764 111.232C204.018 120.091 192.113 119.673 192.113 119.673C183.122 119.589 183.288 112.235 183.205 112.235C182.289 107.054 185.869 104.296 185.869 104.296C194.444 98.5294 204.018 103.376 207.264 105.215C208.013 105.633 208.43 106.469 208.43 107.304C208.513 109.979 207.764 111.232 207.764 111.232Z"
fill="#FFAB33" />
</g>
<g clip-path="url(#clip1)">
<path d="M262.961 0.524902H295.373L294.623 146.475C294.623 146.475 277.22 145.039 262.961 139.678V0.524902Z"
fill="#484848" style="mix-blend-mode:darken" />
</g>
<g style="mix-blend-mode:multiply" opacity="0.9">
<path d="M347.856 63.0119C326.961 36.6873 295.825 50.1421 295.825 50.1421C267.521 60.5884 263.608 92.0108 262.942 102.791C262.775 104.797 262.775 106.719 262.859 108.725C263.608 124.018 271.267 133.378 278.926 138.977C286.335 144.326 295.326 146.916 304.483 147C353.6 147.418 357.43 112.987 357.513 112.653C364.007 79.3917 347.773 62.9284 347.856 63.0119ZM325.212 104.63C321.633 126.525 294.993 117.583 294.993 117.583V78.8067C307.231 73.6254 315.222 78.1382 316.221 78.7231C316.305 78.7231 316.305 78.8067 316.388 78.8067C329.042 86.7459 325.212 104.713 325.212 104.63Z"
fill="#FF614C" style="mix-blend-mode:darken" />
</g>
<path d="M100.898 92.2613C101.648 86.9128 102.647 76.0487 100.316 65.5189H135.78C135.78 65.5189 142.606 111.733 110.639 133.963C110.972 133.712 87.6617 152.599 48.368 141.986C47.9518 141.818 5.99414 132.876 0.249932 83.57C0.666179 83.2357 -5.41102 46.047 23.1435 20.6416C23.4765 20.3074 52.8635 -6.10083 95.2374 8.18968C95.2374 8.18968 125.873 17.9674 133.532 51.4791H98.6506C98.6506 51.4791 93.6557 37.4393 73.0099 36.3528C73.2596 36.3528 43.1233 33.01 37.0461 66.3546C37.0461 66.1038 29.3872 110.897 70.5956 112.318C70.5956 112.318 89.4932 113.739 97.9014 100.284C99.6496 97.9441 100.482 95.1027 100.898 92.2613Z"
fill="#484848" style="mix-blend-mode:darken" />
<g style="mix-blend-mode:multiply" opacity="0.9">
<path d="M71.1782 65.4355V95.688H134.364C134.364 95.688 137.694 85.4088 135.78 65.4355H71.1782Z"
fill="#FF614C" style="mix-blend-mode:darken" />
</g>
</g>
<g clip-path="url(#clip2)">
<g style="mix-blend-mode:multiply">
<path d="M377.023 49.9556H410.249V143.85H376.811L377.023 49.9556Z" fill="#FFAB33" />
</g>
<path d="M395.901 4.24296C395.901 4.24296 407.668 4.83885 411.858 15.8627C412.874 18.5442 413.17 21.396 412.959 24.2477C412.535 29.7809 410.08 39.4853 397.34 41.8263C394.801 42.2945 392.219 42.3371 389.679 41.8689C384.812 40.9325 377.193 37.9105 374.95 28.1209C373.892 23.4816 374.145 18.5868 376.219 14.2879C378.547 9.39312 383.838 3.64708 395.901 4.24296Z"
fill="#484848" style="mix-blend-mode:darken" />
</g>
<defs>
<clipPath id="clip0">
<rect width="413" height="147" fill="white" />
</clipPath>
<clipPath id="clip1">
<rect width="32.9355" height="145.95" fill="white"
transform="translate(262.438 0.524902)" />
</clipPath>
<clipPath id="clip2">
<rect width="38.6861" height="139.65" fill="white"
transform="translate(374.314 4.2002)" />
</clipPath>
</defs>
</svg>
<div class="content">
<div class="text ">
<span>Bonjour,</span>
<span>je</span>
<span>suis</span>
<span>Gabi,</span>
<span>l’avatar</span>
<span>qui</span>
<span>va</span>
<span>t'accompagner</span>
<span>lors</span>
<span>de</span>
<span>cette</span>
<span>expérience.</span>
</div>
</div>
<p>Entrer</p>
</section>
<section class="onboarding">
<div class="content">
<div class="text">
<span>Ensemble,</span>
<span>nous</span>
<span>allons</span>
<span>voir</span>
<span>les</span>
<span>inégalités</span>
<span>qui</span>
<span>marquent</span>
<span>la</span>
<span>vie</span>
<span>des</span>
<span>hommes</span>
<span>et</span>
<span>des</span>
<span>femmes</span>
<span>en</span>
<span>France</span>
<span>en</span>
<span>2019.</span>
</div>
</div>
<svg width="133" height="224" viewBox="0 0 133 224" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.7641 186.274H86.6692C86.6692 186.274 98.5564 169.693 98.5564 147.96C98.5564 119.996 132.951 109.645 132.951 70.5948C133 30.0727 101.528 0.0490583 66.5487 0H66.5H66.4513C31.4718 0.0490583 0 30.0727 0 70.5948C0 109.645 34.3949 119.996 34.3949 147.96C34.3949 169.693 50.7641 186.274 50.7641 186.274Z"
fill="#333333" />
<path d="M2.72826 171.213C0.584672 156.496 28.3052 146.733 31.7154 142.956C36.2462 138.001 43.8949 137.707 48.7667 142.22C53.6872 146.782 55.4898 152.915 51.0077 157.82C49.4001 159.685 4.92057 185.931 2.72826 171.213Z"
fill="#333333" />
<path d="M81.3103 157.771C77.5103 152.228 80.3359 145.948 85.7924 142.122C91.2975 138.295 98.8001 139.669 102.6 145.212C106.497 150.854 129.298 163.119 127.446 177.247C125.741 189.905 82.6744 159.832 81.3103 157.771Z"
fill="#333333" />
<path d="M53.4923 224C40.5333 224 36.0026 163.168 36.0026 163.168C35.2718 156.496 40.0462 150.462 46.6718 149.726C53.2974 148.99 59.2897 153.798 60.0205 160.47C60.0205 160.47 66.4513 224 53.4923 224Z"
fill="#333333" />
<path d="M78.6308 223.46C63.5282 223.46 72.9795 158.998 72.9795 158.998C73.6615 152.326 79.6051 147.42 86.2308 148.107C92.8564 148.794 97.7282 154.779 97.0462 161.451C96.9974 161.5 92.5154 223.46 78.6308 223.46Z"
fill="#333333" />
<path d="M52.8589 100.03C56.805 102.63 61.482 105.819 66.4999 105.819C71.5179 105.819 76.2435 102.63 80.1409 100.03H52.8589Z"
fill="#F2F2F2" />
<path d="M98.2641 85.8519C102.085 85.8519 105.182 82.733 105.182 78.8857C105.182 75.0383 102.085 71.9194 98.2641 71.9194C94.4435 71.9194 91.3462 75.0383 91.3462 78.8857C91.3462 82.733 94.4435 85.8519 98.2641 85.8519Z"
fill="#F2F2F2" />
<path d="M105.085 69.5646C102.697 69.3193 100.651 69.074 98.7026 69.3193C97.7282 69.4174 96.8026 69.6627 95.8282 70.0061C94.8539 70.3495 93.8795 70.8401 92.8077 71.3798C93.4898 69.025 95.877 67.1607 98.459 66.9154C99.7257 66.7683 101.041 66.9645 102.162 67.406C103.282 67.8966 104.354 68.5344 105.085 69.5646Z"
fill="#F2F2F2" />
<path d="M34.7359 85.8519C38.5566 85.8519 41.6539 82.733 41.6539 78.8857C41.6539 75.0383 38.5566 71.9194 34.7359 71.9194C30.9153 71.9194 27.818 75.0383 27.818 78.8857C27.818 82.733 30.9153 85.8519 34.7359 85.8519Z"
fill="#F2F2F2" />
<path d="M27.9154 69.5646C28.6462 68.5344 29.718 67.8476 30.8385 67.406C32.0077 66.9645 33.2744 66.7683 34.5411 66.9154C37.1231 67.1607 39.5103 68.9759 40.1923 71.3798C39.0718 70.8401 38.0975 70.3495 37.1718 70.0061C36.1975 69.6627 35.2718 69.4665 34.2975 69.3193C32.3487 69.074 30.3026 69.3193 27.9154 69.5646Z"
fill="#F2F2F2" />
</svg>
<p>Commencer</p>
</section>
<section class="choose__sexe">
<p>Pour commencer, choisis mon sexe.</p>
<svg class="male" width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69.5453 24.1985L78.0536 22.4967L74.9858 7.15793C74.8178 6.31799 74.405 5.54656 73.7993 4.94087C73.1936 4.33519 72.4222 3.92234 71.5822 3.75438L56.2435 0.686523L54.5417 9.19486L61.9312 10.6732L49.0345 23.5699C42.8854 18.9721 35.223 16.874 27.5893 17.6979C19.9557 18.5218 12.9174 22.2065 7.89099 28.0105C2.86457 33.8146 0.223113 41.307 0.498217 48.9801C0.773321 56.6532 3.94457 63.9373 9.37373 69.3664C14.8029 74.7956 22.087 77.9668 29.76 78.2419C37.4331 78.517 44.9256 75.8756 50.7296 70.8492C56.5337 65.8228 60.2184 58.7845 61.0423 51.1508C61.8662 43.5171 59.7681 35.8547 55.1702 29.7056L68.067 16.8089L69.5453 24.1985ZM46.189 63.2287C42.6402 66.7774 37.9708 68.9858 32.9763 69.4777C27.9818 69.9695 22.9712 68.7144 18.7984 65.9261C14.6255 63.1379 11.5486 58.989 10.0918 54.1864C8.63499 49.3838 8.8885 44.2247 10.8091 39.588C12.7297 34.9514 16.1986 31.1242 20.6247 28.7584C25.0508 26.3927 30.1603 25.6348 35.0825 26.614C40.0047 27.5932 44.4352 30.2487 47.6189 34.1283C50.8027 38.0078 52.5428 42.8712 52.5427 47.8899C52.5506 50.7398 51.9931 53.5629 50.9025 56.1958C49.8119 58.8287 48.2098 61.2191 46.189 63.2287Z"
fill="#333333" />
</svg>
<svg width="133" height="224" viewBox="0 0 133 224" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.7641 186.274H86.6692C86.6692 186.274 98.5564 169.693 98.5564 147.96C98.5564 119.996 132.951 109.645 132.951 70.5948C133 30.0727 101.528 0.0490583 66.5487 0H66.5H66.4513C31.4718 0.0490583 0 30.0727 0 70.5948C0 109.645 34.3949 119.996 34.3949 147.96C34.3949 169.693 50.7641 186.274 50.7641 186.274Z"
fill="#333333" />
<path d="M2.72826 171.213C0.584672 156.496 28.3052 146.733 31.7154 142.956C36.2462 138.001 43.8949 137.707 48.7667 142.22C53.6872 146.782 55.4898 152.915 51.0077 157.82C49.4001 159.685 4.92057 185.931 2.72826 171.213Z"
fill="#333333" />
<path d="M81.3103 157.771C77.5103 152.228 80.3359 145.948 85.7924 142.122C91.2975 138.295 98.8001 139.669 102.6 145.212C106.497 150.854 129.298 163.119 127.446 177.247C125.741 189.905 82.6744 159.832 81.3103 157.771Z"
fill="#333333" />
<path d="M53.4923 224C40.5333 224 36.0026 163.168 36.0026 163.168C35.2718 156.496 40.0462 150.462 46.6718 149.726C53.2974 148.99 59.2897 153.798 60.0205 160.47C60.0205 160.47 66.4513 224 53.4923 224Z"
fill="#333333" />
<path d="M78.6308 223.46C63.5282 223.46 72.9795 158.998 72.9795 158.998C73.6615 152.326 79.6051 147.42 86.2308 148.107C92.8564 148.794 97.7282 154.779 97.0462 161.451C96.9974 161.5 92.5154 223.46 78.6308 223.46Z"
fill="#333333" />
<path d="M52.8589 100.03C56.805 102.63 61.482 105.819 66.4999 105.819C71.5179 105.819 76.2435 102.63 80.1409 100.03H52.8589Z"
fill="#F2F2F2" />
<path d="M98.2641 85.8519C102.085 85.8519 105.182 82.733 105.182 78.8857C105.182 75.0383 102.085 71.9194 98.2641 71.9194C94.4435 71.9194 91.3462 75.0383 91.3462 78.8857C91.3462 82.733 94.4435 85.8519 98.2641 85.8519Z"
fill="#F2F2F2" />
<path d="M105.085 69.5646C102.697 69.3193 100.651 69.074 98.7026 69.3193C97.7282 69.4174 96.8026 69.6627 95.8282 70.0061C94.8539 70.3495 93.8795 70.8401 92.8077 71.3798C93.4898 69.025 95.877 67.1607 98.459 66.9154C99.7257 66.7683 101.041 66.9645 102.162 67.406C103.282 67.8966 104.354 68.5344 105.085 69.5646Z"
fill="#F2F2F2" />
<path d="M34.7359 85.8519C38.5566 85.8519 41.6539 82.733 41.6539 78.8857C41.6539 75.0383 38.5566 71.9194 34.7359 71.9194C30.9153 71.9194 27.818 75.0383 27.818 78.8857C27.818 82.733 30.9153 85.8519 34.7359 85.8519Z"
fill="#F2F2F2" />
<path d="M27.9154 69.5646C28.6462 68.5344 29.718 67.8476 30.8385 67.406C32.0077 66.9645 33.2744 66.7683 34.5411 66.9154C37.1231 67.1607 39.5103 68.9759 40.1923 71.3798C39.0718 70.8401 38.0975 70.3495 37.1718 70.0061C36.1975 69.6627 35.2718 69.4665 34.2975 69.3193C32.3487 69.074 30.3026 69.3193 27.9154 69.5646Z"
fill="#F2F2F2" />
</svg>
<svg class="female" width="61" height="87" viewBox="0 0 61 87" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M60.8471 30.4604C60.8478 24.639 59.1753 18.94 56.0289 14.0422C52.8824 9.14437 48.3946 5.25407 43.0998 2.83458C37.805 0.41508 31.9264 -0.431653 26.164 0.395209C20.4016 1.22207 14.9983 3.68769 10.5975 7.49843C6.1967 11.3092 2.98388 16.3045 1.34164 21.8894C-0.300597 27.4744 -0.303054 33.4137 1.33457 39C2.97218 44.5863 6.18087 49.5843 10.5785 53.3987C14.9762 57.213 20.3774 59.6831 26.1391 60.5148V65.1683H17.4621V73.8453H26.1391V86.8608H34.8161V73.8453H43.4931V65.1683H34.8161V60.5148C42.0398 59.4632 48.6442 55.8485 53.4233 50.3307C58.2025 44.8129 60.8375 37.7601 60.8471 30.4604ZM8.78515 30.4604C8.78515 26.17 10.0574 21.976 12.441 18.4087C14.8246 14.8414 18.2125 12.061 22.1763 10.4191C26.1401 8.77727 30.5017 8.34769 34.7096 9.1847C38.9175 10.0217 42.7828 12.0877 45.8165 15.1215C48.8503 18.1552 50.9163 22.0204 51.7533 26.2284C52.5903 30.4363 52.1607 34.7979 50.5189 38.7617C48.877 42.7255 46.0966 46.1134 42.5293 48.497C38.962 50.8806 34.768 52.1528 30.4776 52.1528C24.7264 52.1464 19.2126 49.8589 15.1459 45.7921C11.0791 41.7254 8.79161 36.2116 8.78515 30.4604Z"
fill="#333333" />
</svg>
<div class="background"></div>
</section>
<section class="choose__time">
<p>Quelle période de la vie veux-tu découvrir ?</p>
<svg class="gabi_time" width="133" height="224" viewBox="0 0 133 224" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.7641 186.274H86.6692C86.6692 186.274 98.5564 169.693 98.5564 147.96C98.5564 119.996 132.951 109.645 132.951 70.5948C133 30.0727 101.528 0.0490583 66.5487 0H66.5H66.4513C31.4718 0.0490583 0 30.0727 0 70.5948C0 109.645 34.3949 119.996 34.3949 147.96C34.3949 169.693 50.7641 186.274 50.7641 186.274Z"
fill="#333333" />
<path d="M2.72826 171.213C0.584672 156.496 28.3052 146.733 31.7154 142.956C36.2462 138.001 43.8949 137.707 48.7667 142.22C53.6872 146.782 55.4898 152.915 51.0077 157.82C49.4001 159.685 4.92057 185.931 2.72826 171.213Z"
fill="#333333" />
<path d="M81.3103 157.771C77.5103 152.228 80.3359 145.948 85.7924 142.122C91.2975 138.295 98.8001 139.669 102.6 145.212C106.497 150.854 129.298 163.119 127.446 177.247C125.741 189.905 82.6744 159.832 81.3103 157.771Z"
fill="#333333" />
<path d="M53.4923 224C40.5333 224 36.0026 163.168 36.0026 163.168C35.2718 156.496 40.0462 150.462 46.6718 149.726C53.2974 148.99 59.2897 153.798 60.0205 160.47C60.0205 160.47 66.4513 224 53.4923 224Z"
fill="#333333" />
<path d="M78.6308 223.46C63.5282 223.46 72.9795 158.998 72.9795 158.998C73.6615 152.326 79.6051 147.42 86.2308 148.107C92.8564 148.794 97.7282 154.779 97.0462 161.451C96.9974 161.5 92.5154 223.46 78.6308 223.46Z"
fill="#333333" />
<path d="M52.8589 100.03C56.805 102.63 61.482 105.819 66.4999 105.819C71.5179 105.819 76.2435 102.63 80.1409 100.03H52.8589Z"
fill="#F2F2F2" />
<path d="M98.2641 85.8519C102.085 85.8519 105.182 82.733 105.182 78.8857C105.182 75.0383 102.085 71.9194 98.2641 71.9194C94.4435 71.9194 91.3462 75.0383 91.3462 78.8857C91.3462 82.733 94.4435 85.8519 98.2641 85.8519Z"
fill="#F2F2F2" />
<path d="M105.085 69.5646C102.697 69.3193 100.651 69.074 98.7026 69.3193C97.7282 69.4174 96.8026 69.6627 95.8282 70.0061C94.8539 70.3495 93.8795 70.8401 92.8077 71.3798C93.4898 69.025 95.877 67.1607 98.459 66.9154C99.7257 66.7683 101.041 66.9645 102.162 67.406C103.282 67.8966 104.354 68.5344 105.085 69.5646Z"
fill="#F2F2F2" />
<path d="M34.7359 85.8519C38.5566 85.8519 41.6539 82.733 41.6539 78.8857C41.6539 75.0383 38.5566 71.9194 34.7359 71.9194C30.9153 71.9194 27.818 75.0383 27.818 78.8857C27.818 82.733 30.9153 85.8519 34.7359 85.8519Z"
fill="#F2F2F2" />
<path d="M27.9154 69.5646C28.6462 68.5344 29.718 67.8476 30.8385 67.406C32.0077 66.9645 33.2744 66.7683 34.5411 66.9154C37.1231 67.1607 39.5103 68.9759 40.1923 71.3798C39.0718 70.8401 38.0975 70.3495 37.1718 70.0061C36.1975 69.6627 35.2718 69.4665 34.2975 69.3193C32.3487 69.074 30.3026 69.3193 27.9154 69.5646Z"
fill="#F2F2F2" />
</svg>
<div class="timeline__horizontal">
<div class="timeline__item" data-id="0" data-state="first" data-number="1">
</div>
<div class="timeline__item" data-id="1" data-state="second" data-number="2">
</div>
<div class="timeline__item" data-id="2" data-state="third" data-number="3">
</div>
<div class="timeline__item" data-id="3" data-state="fourth" data-number="4">
</div>
<div class="timeline__item" data-id="4" data-state="fifth" data-number="5">
</div>
</div>
<div class="timeline__horizontal__values">
<div class="timeline__value fadeOut">
<div class="timeline__line"></div>
<p>5 ans</p>
</div>
<div class="timeline__value fadeOut">
<div class="timeline__line"></div>
<p>15 ans</p>
</div>
<div class="timeline__value fadeOut">
<div class="timeline__line"></div>
<p>25 ans</p>
</div>
<div class="timeline__value fadeOut">
<div class="timeline__line"></div>
<p>35 ans</p>
</div>
<div class="timeline__value fadeOut">
<div class="timeline__line"></div>
<p>70 ans</p>
</div>
</div>
</section>
<div class="first__question-compare compare question__item fadeOut">
<p class="text">Les femmes ont effectivement tendance à être moins choisies. L’une des principales causes est qu’elles auront plus de chance de partir en congé maternité.</p>
<div id="babyMixte"></div>
<span class="btn__compare btnBack">Revoir les données
<svg width="18" height="24" viewBox="0 0 18 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M17.0309 8.80653C17.0311 7.26912 16.5894 5.76406 15.7584 4.47057C14.9274 3.17709 13.7421 2.14968 12.3437 1.5107C10.9453 0.871726 9.39275 0.648109 7.87088 0.866479C6.349 1.08485 4.92195 1.736 3.75968 2.7424C2.5974 3.7488 1.74888 5.06803 1.31515 6.54299C0.881426 8.01795 0.880777 9.58648 1.31328 11.0618C1.74579 12.5371 2.59322 13.857 3.75466 14.8644C4.9161 15.8718 6.34261 16.5241 7.86431 16.7437V17.9727H5.57267V20.2643H7.86431V23.7016H10.156V20.2643H12.4476V17.9727H10.156V16.7437C12.0638 16.466 13.808 15.5114 15.0702 14.0542C16.3324 12.5969 17.0283 10.7344 17.0309 8.80653ZM3.28102 8.80653C3.28102 7.67346 3.61703 6.56585 4.24655 5.62374C4.87607 4.68163 5.77084 3.94735 6.8177 3.51374C7.86455 3.08014 9.01648 2.96669 10.1278 3.18774C11.2392 3.40879 12.26 3.95441 13.0612 4.7556C13.8624 5.5568 14.4081 6.57759 14.6292 7.68888C14.8502 8.80017 14.7368 9.95205 14.3031 10.9989C13.8695 12.0457 13.1352 12.9404 12.1931 13.5699C11.2509 14.1994 10.1432 14.5354 9.01013 14.5354C7.4912 14.5337 6.03497 13.9296 4.96092 12.8556C3.88688 11.7816 3.28273 10.3254 3.28102 8.80653Z"
fill="white" />
</svg>
</span>
</div>
<div class="third__question-compare compare question__item fadeOut">
<p class="text">Malheureusement c’est un phénomène assez répandu. Jean-Kevin à beau se justifier en disant qu’il cherchait seulement à draguer, ce n’est jamais agréable de se faire aborder de cette manière. </p>
<div class="graph" >
<div id="streetMixteMen"></div>
<div id="streetMixteWomen"></div>
</div>
<span class="btn__compare btnBack">Revoir les données
<svg width="18" height="24" viewBox="0 0 18 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M17.0309 8.80653C17.0311 7.26912 16.5894 5.76406 15.7584 4.47057C14.9274 3.17709 13.7421 2.14968 12.3437 1.5107C10.9453 0.871726 9.39275 0.648109 7.87088 0.866479C6.349 1.08485 4.92195 1.736 3.75968 2.7424C2.5974 3.7488 1.74888 5.06803 1.31515 6.54299C0.881426 8.01795 0.880777 9.58648 1.31328 11.0618C1.74579 12.5371 2.59322 13.857 3.75466 14.8644C4.9161 15.8718 6.34261 16.5241 7.86431 16.7437V17.9727H5.57267V20.2643H7.86431V23.7016H10.156V20.2643H12.4476V17.9727H10.156V16.7437C12.0638 16.466 13.808 15.5114 15.0702 14.0542C16.3324 12.5969 17.0283 10.7344 17.0309 8.80653ZM3.28102 8.80653C3.28102 7.67346 3.61703 6.56585 4.24655 5.62374C4.87607 4.68163 5.77084 3.94735 6.8177 3.51374C7.86455 3.08014 9.01648 2.96669 10.1278 3.18774C11.2392 3.40879 12.26 3.95441 13.0612 4.7556C13.8624 5.5568 14.4081 6.57759 14.6292 7.68888C14.8502 8.80017 14.7368 9.95205 14.3031 10.9989C13.8695 12.0457 13.1352 12.9404 12.1931 13.5699C11.2509 14.1994 10.1432 14.5354 9.01013 14.5354C7.4912 14.5337 6.03497 13.9296 4.96092 12.8556C3.88688 11.7816 3.28273 10.3254 3.28102 8.80653Z"
fill="white" />
</svg>
</span>
</div>
<div class="fourth__question-compare compare question__item fadeOut">
<p class="text">Les femmes ont effectivement tendance à être moins choisies. L’une des principales causes est qu’elles auront plus de chance de partir en congé maternité.</p>
<div id="lineAll"></div>
<span class="btn__compare btnBack">Revoir les données
<svg width="18" height="24" viewBox="0 0 18 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M17.0309 8.80653C17.0311 7.26912 16.5894 5.76406 15.7584 4.47057C14.9274 3.17709 13.7421 2.14968 12.3437 1.5107C10.9453 0.871726 9.39275 0.648109 7.87088 0.866479C6.349 1.08485 4.92195 1.736 3.75968 2.7424C2.5974 3.7488 1.74888 5.06803 1.31515 6.54299C0.881426 8.01795 0.880777 9.58648 1.31328 11.0618C1.74579 12.5371 2.59322 13.857 3.75466 14.8644C4.9161 15.8718 6.34261 16.5241 7.86431 16.7437V17.9727H5.57267V20.2643H7.86431V23.7016H10.156V20.2643H12.4476V17.9727H10.156V16.7437C12.0638 16.466 13.808 15.5114 15.0702 14.0542C16.3324 12.5969 17.0283 10.7344 17.0309 8.80653ZM3.28102 8.80653C3.28102 7.67346 3.61703 6.56585 4.24655 5.62374C4.87607 4.68163 5.77084 3.94735 6.8177 3.51374C7.86455 3.08014 9.01648 2.96669 10.1278 3.18774C11.2392 3.40879 12.26 3.95441 13.0612 4.7556C13.8624 5.5568 14.4081 6.57759 14.6292 7.68888C14.8502 8.80017 14.7368 9.95205 14.3031 10.9989C13.8695 12.0457 13.1352 12.9404 12.1931 13.5699C11.2509 14.1994 10.1432 14.5354 9.01013 14.5354C7.4912 14.5337 6.03497 13.9296 4.96092 12.8556C3.88688 11.7816 3.28273 10.3254 3.28102 8.80653Z"
fill="white" />
</svg>
</span>
</div>
<section class="male__questions questions">
<svg class="sign" width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54.3096 18.4883L61 17.1501L58.5876 5.08871C58.4556 4.42823 58.1309 3.82163 57.6547 3.34535C57.1784 2.86908 56.5718 2.54444 55.9113 2.41237L43.8499 0L42.5117 6.69041L48.3224 7.85289L38.1812 17.994C33.346 14.3786 27.3207 12.7288 21.3181 13.3766C15.3155 14.0245 9.78101 16.9219 5.82855 21.4859C1.8761 26.0498 -0.200977 31.9414 0.0153477 37.975C0.231672 44.0086 2.72534 49.7364 6.99449 54.0055C11.2636 58.2747 16.9914 60.7683 23.025 60.9846C29.0586 61.201 34.9502 59.1239 39.5141 55.1715C44.0781 51.219 46.9755 45.6845 47.6234 39.6819C48.2712 33.6793 46.6214 27.654 43.006 22.8188L53.1471 12.6776L54.3096 18.4883ZM35.9437 49.1792C33.1532 51.9696 29.4814 53.7062 25.554 54.093C21.6267 54.4797 17.6867 53.4928 14.4054 51.3003C11.1242 49.1078 8.70464 45.8453 7.55912 42.0689C6.41359 38.2924 6.61293 34.2356 8.12318 30.5897C9.63344 26.9437 12.3611 23.9342 15.8416 22.074C19.322 20.2137 23.3397 19.6178 27.2102 20.3877C31.0808 21.1577 34.5646 23.2458 37.0681 26.2965C39.5716 29.3471 40.9399 33.1714 40.9398 37.1177C40.9461 39.3587 40.5077 41.5786 39.6501 43.649C38.7925 45.7193 37.5327 47.599 35.9437 49.1792Z"
fill="#FFAB33" />
</svg>
<p class="indicator">Appuyer sur espace pour passer</p>
<div class="first__question question">
<div class="question__onboarding question__item">
<div class="forms item">
<svg width="142" height="239" viewBox="0 0 142 239" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M54.1993 198.748H92.5341C92.5341 198.748 105.226 181.056 105.226 157.868C105.226 128.032 141.948 116.988 141.948 75.3222C142 32.0865 108.399 0.0523434 71.052 0H71H70.948C33.6015 0.0523434 0 32.0865 0 75.3222C0 116.988 36.7223 128.032 36.7223 157.868C36.7223 181.056 54.1993 198.748 54.1993 198.748Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M2.91264 182.679C0.623996 166.976 30.2203 156.56 33.8614 152.529C38.6987 147.242 46.865 146.928 52.0665 151.744C57.32 156.612 59.2445 163.155 54.4592 168.389C52.7427 170.378 5.2533 198.382 2.91264 182.679Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M86.8127 168.337C82.7555 162.422 85.7724 155.722 91.598 151.639C97.4757 147.557 105.486 149.022 109.543 154.937C113.704 160.956 138.047 174.042 136.071 189.117C134.25 202.622 88.2691 170.535 86.8127 168.337Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M57.1122 239C43.2763 239 38.439 174.094 38.439 174.094C37.6587 166.976 42.7562 160.537 49.8302 159.752C56.9042 158.967 63.302 164.097 64.0822 171.215C64.0822 171.215 70.9481 239 57.1122 239Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M83.9515 238.424C67.827 238.424 77.9178 169.645 77.9178 169.645C78.646 162.526 84.9918 157.292 92.0658 158.025C99.1398 158.757 104.341 165.143 103.613 172.262C103.561 172.314 98.7757 238.424 83.9515 238.424Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M56.4358 106.729C60.649 109.503 65.6424 112.905 70.9999 112.905C76.3574 112.905 81.4028 109.503 85.564 106.729H56.4358Z"
fill="#F2F2F2" />
<path d="M104.914 91.6009C108.993 91.6009 112.3 88.2731 112.3 84.1681C112.3 80.0631 108.993 76.7354 104.914 76.7354C100.835 76.7354 97.5277 80.0631 97.5277 84.1681C97.5277 88.2731 100.835 91.6009 104.914 91.6009Z"
fill="#F2F2F2" />
<path d="M112.196 74.2228C109.647 73.9611 107.462 73.6994 105.382 73.9611C104.342 74.0658 103.353 74.3275 102.313 74.6939C101.273 75.0603 100.232 75.5838 99.0881 76.1595C99.8163 73.6471 102.365 71.658 105.122 71.3963C106.474 71.2393 107.879 71.4486 109.075 71.9197C110.271 72.4432 111.416 73.1236 112.196 74.2228Z"
fill="#F2F2F2" />
<path d="M37.0866 91.6009C41.1659 91.6009 44.4727 88.2731 44.4727 84.1681C44.4727 80.0631 41.1659 76.7354 37.0866 76.7354C33.0074 76.7354 29.7006 80.0631 29.7006 84.1681C29.7006 88.2731 33.0074 91.6009 37.0866 91.6009Z"
fill="#F2F2F2" />
<path d="M29.8044 74.2228C30.5847 73.1236 31.729 72.3908 32.9253 71.9197C34.1737 71.4486 35.5261 71.2393 36.8784 71.3963C39.6352 71.658 42.1839 73.5947 42.9121 76.1595C41.7158 75.5838 40.6755 75.0603 39.6872 74.6939C38.6469 74.3275 37.6587 74.1181 36.6184 73.9611C34.5378 73.6994 32.3532 73.9611 29.8044 74.2228Z"
fill="#F2F2F2" />
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd"
d="M74.052 157.206L77.5387 152.133C78.4508 150.806 77.5007 149 75.8905 149H66.3567C64.7465 149 63.7964 150.806 64.7085 152.133L68.1581 157.152L64 174.131H64.4529C64.2714 174.686 64.3274 175.324 64.7085 175.878L69.4754 182.814C70.2701 183.97 71.9772 183.97 72.7718 182.814L77.5387 175.878C77.9199 175.324 77.9758 174.686 77.7943 174.131H77.8515L74.052 157.206Z"
fill="#FFAB33" />
<path d="M56.9063 108C58.7938 108 60.511 107.321 61.6004 106.233C62.6907 107.321 64.4109 108 66.3004 108C68.1899 108 69.9091 107.321 70.9995 106.233C72.0889 107.321 73.807 108 75.6935 108C77.586 108 79.3083 107.321 80.3996 106.233C81.49 107.321 83.2102 108 85.0997 108C88.3537 108 91 106 91 103.541V99.9516C91 98.8306 90.7279 97.7401 90.1908 96.7106C88.4222 93.2952 83.9872 91 79.1531 91H62.8459C58.0128 91 53.5768 93.2944 51.8092 96.7091C51.2721 97.7394 51 98.8306 51 99.9516V103.541C51 106 53.6493 108 56.9063 108ZM53.0991 99.9516C53.0991 99.0301 53.3228 98.1346 53.7632 97.2878C55.2194 94.4755 58.8694 92.5862 62.8459 92.5862H79.1541C83.1306 92.5862 86.7806 94.4755 88.2368 97.2878L88.2378 97.2893C88.6782 98.1346 88.9019 99.0301 88.9019 99.9516V103.541C88.9019 105.125 87.1968 106.414 85.1007 106.414C83.3634 106.414 81.8498 105.521 81.4175 104.243L80.4006 101.232L79.3828 104.243C78.9505 105.521 77.4339 106.413 75.6935 106.413C73.9602 106.413 72.4486 105.521 72.0163 104.243L71.0005 101.232L69.9837 104.244C69.5524 105.522 68.0378 106.415 66.3004 106.415C64.5631 106.415 63.0495 105.522 62.6172 104.244L61.5994 101.234L60.5825 104.245C60.1512 105.523 58.6386 106.415 56.9053 106.415C54.8062 106.415 53.0981 105.127 53.0981 103.543V99.9516H53.0991Z"
fill="#FFAB33" />
</svg>
<svg width="75" height="126" viewBox="0 0 75 126" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M28.6264 104.779H48.8736C48.8736 104.779 55.5769 95.452 55.5769 83.2273C55.5769 67.498 74.9725 61.6754 74.9725 39.7096C75 16.9159 57.2528 0.0275953 37.5275 0H37.5H37.4725C17.7473 0.0275953 0 16.9159 0 39.7096C0 61.6754 19.3956 67.498 19.3956 83.2273C19.3956 95.452 28.6264 104.779 28.6264 104.779Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M1.53848 96.3071C0.329692 88.0285 15.9616 82.5371 17.8846 80.4122C20.4396 77.6251 24.7528 77.4595 27.5 79.9983C30.2747 82.5647 31.2912 86.0141 28.7638 88.7736C27.8572 89.8222 2.77475 104.586 1.53848 96.3071Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M45.8518 88.746C43.7089 85.6277 45.3023 82.0955 48.3793 79.9431C51.4837 77.7906 55.7144 78.5633 57.8573 81.6816C60.0551 84.855 72.9122 91.7538 71.8683 99.7013C70.9067 106.821 46.621 89.905 45.8518 88.746Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M30.1648 126C22.8571 126 20.3021 91.7817 20.3021 91.7817C19.8901 88.0287 22.5824 84.6345 26.3186 84.2205C30.0549 83.8066 33.434 86.511 33.8461 90.2639C33.8461 90.2639 37.4725 126 30.1648 126Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M44.3406 125.697C35.8241 125.697 41.1538 89.4367 41.1538 89.4367C41.5384 85.6837 44.8901 82.9242 48.6263 83.3105C52.3626 83.6968 55.1098 87.0635 54.7252 90.8164C54.6978 90.844 52.1703 125.697 44.3406 125.697Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M29.8077 56.2666C32.033 57.7292 34.6704 59.5228 37.5 59.5228C40.3297 59.5228 42.9945 57.7292 45.1923 56.2666H29.8077Z"
fill="#F2F2F2" />
<path d="M55.4122 48.2921C57.5667 48.2921 59.3133 46.5377 59.3133 44.3736C59.3133 42.2095 57.5667 40.4551 55.4122 40.4551C53.2577 40.4551 51.5111 42.2095 51.5111 44.3736C51.5111 46.5377 53.2577 48.2921 55.4122 48.2921Z"
fill="#F2F2F2" />
<path d="M59.2583 39.1296C57.9121 38.9917 56.7583 38.8537 55.6594 38.9917C55.1099 39.0468 54.5879 39.1848 54.0385 39.378C53.489 39.5712 52.9396 39.8471 52.3352 40.1507C52.7198 38.8261 54.066 37.7775 55.522 37.6395C56.2363 37.5567 56.9781 37.6671 57.6099 37.9154C58.2418 38.1914 58.8462 38.5501 59.2583 39.1296Z"
fill="#F2F2F2" />
<path d="M19.588 48.2921C21.7425 48.2921 23.4891 46.5377 23.4891 44.3736C23.4891 42.2095 21.7425 40.4551 19.588 40.4551C17.4335 40.4551 15.6869 42.2095 15.6869 44.3736C15.6869 46.5377 17.4335 48.2921 19.588 48.2921Z"
fill="#F2F2F2" />
<path d="M15.7418 39.1296C16.1539 38.5501 16.7583 38.1638 17.3902 37.9154C18.0495 37.6671 18.7638 37.5567 19.4781 37.6395C20.9341 37.7775 22.2803 38.7985 22.6649 40.1507C22.033 39.8471 21.4836 39.5712 20.9616 39.378C20.4122 39.1848 19.8902 39.0744 19.3407 38.9917C18.2418 38.8537 17.088 38.9917 15.7418 39.1296Z"
fill="#F2F2F2" />
</svg>
<svg width="155" height="225" viewBox="0 0 155 225" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M67.2374 188.453H102.063C102.063 188.453 113.592 172.39 113.592 151.336C113.592 124.247 146.953 114.219 146.953 76.3887C147 37.1329 116.475 8.04753 82.5473 8H82.5H82.4528C48.5253 8.04753 18 37.1329 18 76.3887C18 114.219 51.3604 124.247 51.3604 151.336C51.3604 172.39 67.2374 188.453 67.2374 188.453Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M20.646 173.862C18.5669 159.605 45.4537 150.147 48.7614 146.488C53.1559 141.688 60.5746 141.403 65.2998 145.775C70.0724 150.195 71.8207 156.136 67.4735 160.888C65.9141 162.694 22.7724 188.12 20.646 173.862Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M96.8652 160.841C93.1794 155.471 95.9201 149.387 101.212 145.68C106.552 141.974 113.829 143.304 117.515 148.675C121.295 154.14 143.409 166.021 141.614 179.709C139.96 191.97 98.1882 162.837 96.8652 160.841Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M69.8835 225C57.3143 225 52.9198 166.069 52.9198 166.069C52.211 159.605 56.8418 153.76 63.2681 153.047C69.6945 152.334 75.5066 156.991 76.2154 163.455C76.2154 163.455 82.4527 225 69.8835 225Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M94.2658 224.477C79.6174 224.477 88.7845 162.029 88.7845 162.029C89.446 155.565 95.2108 150.813 101.637 151.478C108.064 152.144 112.789 157.942 112.127 164.405C112.08 164.453 107.733 224.477 94.2658 224.477Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M69.2692 104.904C73.0966 107.423 77.6329 110.512 82.4999 110.512C87.367 110.512 91.9505 107.423 95.7307 104.904H69.2692Z"
fill="#F2F2F2" />
<path d="M113.309 91.169C117.015 91.169 120.019 88.1476 120.019 84.4205C120.019 80.6933 117.015 77.6719 113.309 77.6719C109.603 77.6719 106.599 80.6933 106.599 84.4205C106.599 88.1476 109.603 91.169 113.309 91.169Z"
fill="#F2F2F2" />
<path d="M119.924 75.3905C117.609 75.1529 115.624 74.9153 113.734 75.1529C112.789 75.2479 111.891 75.4856 110.946 75.8182C110.001 76.1509 109.056 76.6262 108.017 77.149C108.678 74.8677 110.994 73.0618 113.498 72.8242C114.727 72.6816 116.002 72.8717 117.089 73.2994C118.176 73.7747 119.216 74.3925 119.924 75.3905Z"
fill="#F2F2F2" />
<path d="M51.6913 91.169C55.3971 91.169 58.4012 88.1476 58.4012 84.4205C58.4012 80.6933 55.3971 77.6719 51.6913 77.6719C47.9856 77.6719 44.9814 80.6933 44.9814 84.4205C44.9814 88.1476 47.9856 91.169 51.6913 91.169Z"
fill="#F2F2F2" />
<path d="M45.0758 75.3905C45.7846 74.3925 46.8242 73.7271 47.911 73.2994C49.045 72.8717 50.2736 72.6816 51.5022 72.8242C54.0066 73.0618 56.322 74.8202 56.9835 77.149C55.8967 76.6262 54.9516 76.1509 54.0538 75.8182C53.1088 75.4856 52.211 75.2955 51.2659 75.1529C49.3758 74.9153 47.3912 75.1529 45.0758 75.3905Z"
fill="#F2F2F2" />
<g style="mix-blend-mode:multiply">
<path d="M114.149 145C86.2681 170.024 61.4113 155.426 49.9787 145C54.8468 161.379 51.2695 169.265 49.9787 171.161C51.7489 192.09 47.3972 199.597 45 200.734C57.3915 206.649 102.163 203.199 123 200.734C116.804 198.459 114.518 182.346 114.149 174.573C113.706 169.114 113.043 152.583 114.149 145Z"
fill="#FFAB33" />
</g>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.5 30.4995C30 22.5089 53 2.49952 82 0.999697C95.5 -0.350188 117.8 9.29952 121 12.4995C121.721 13.2203 121.24 15.2239 119.891 18.0391C123.775 18.5625 128.209 19.6316 131.015 21.42C142.849 28.2044 148.314 41.3041 148.953 45.7514C150.317 55.2408 148.775 60.7878 147.537 65.2396C146.539 68.8298 145.739 71.7077 146.821 75.3668C142.799 72.9113 135.904 57.2674 134.427 51.5299C133.676 52.5932 135.523 58.8801 136.541 61.8907C132.603 59.2712 124.405 44.462 120.799 37.3849C119.965 39.0254 119.559 44.6665 119.46 47.2819C116.783 45.2213 114.155 36.9349 112.716 29.6731C102.869 43.5721 87.0755 60.9467 78.9999 62.4997C81.3332 57.333 85.9999 45.9997 85.9999 41.9997C72.3332 52.1664 42.4999 72.7997 32.4999 73.9997C37.3332 69.1664 46.8999 58.7997 46.4999 55.9997C38.1665 65.6664 10 89.1995 0 89.9995C5.58043 83.9726 6.83597 77.607 8.40226 69.6657C10.3444 59.8188 12.7644 47.5493 24.5 30.4995Z"
fill="#FFAB33" />
</svg>
</div>
<div class="text__before item">
<p class="text">Bonne idée ! Commençons par le début. Gabi est un petit garçon de 5 ans.
Il a grandi entourée d’une famille aimante et attentionnée.</p>
</div>
<div class="text__after item">
<p class="text">Regardons ce que cela donnerait si en 2019, Gabi était en fait un adorable
petit garçon de 4 ans.</p>
</div>
</div>
<div class="question__base question__item fadeOut">
<div class="forms item">
<svg width="449" height="150" viewBox="0 0 449 150" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M54.3171 20.5488C53.5929 19.1632 52.6552 17.818 51.5097 16.5717C46.0904 10.6758 38.0714 9.22901 33.5986 13.3402C29.1259 17.4514 29.8932 25.5637 35.3125 31.4596C35.6255 31.8002 35.9472 32.1259 36.2764 32.4365C34.7493 36.0872 31.6481 39.4723 26 38.3964L47 44.3964C49.0963 42.9621 52.4927 39.921 54.3171 36.2883C56.1416 39.921 59.538 42.9621 61.6343 44.3964L82.6343 38.3964C76.9862 39.4723 73.885 36.0872 72.3579 32.4365C72.6871 32.1259 73.0088 31.8002 73.3218 31.4596C78.7411 25.5637 79.5084 17.4514 75.0357 13.3402C70.5629 9.22901 62.5438 10.6758 57.1246 16.5717C55.9791 17.818 55.0414 19.1632 54.3171 20.5488Z"
fill="#484848" style="mix-blend-mode:darken" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M115.5 42.0787C114.822 40.782 113.945 39.5231 112.873 38.3568C107.801 32.8392 100.297 31.4853 96.111 35.3327C91.9253 39.18 92.6434 46.7718 97.7149 52.2893C98.0078 52.608 98.3089 52.9128 98.617 53.2036C97.1879 56.62 94.2857 59.7878 89 58.781L108.652 64.396C110.614 63.0537 113.793 60.2077 115.5 56.8082C117.207 60.2077 120.386 63.0537 122.348 64.396L142 58.781C136.714 59.7878 133.812 56.62 132.383 53.2036C132.691 52.9128 132.992 52.608 133.285 52.2893C138.357 46.7718 139.075 39.18 134.889 35.3327C130.703 31.4853 123.199 32.8392 118.127 38.3568C117.055 39.5231 116.178 40.782 115.5 42.0787Z"
fill="#484848" style="mix-blend-mode:darken" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M336.5 53.9361C335.822 52.6394 334.945 51.3805 333.873 50.2142C328.801 44.6967 321.297 43.3427 317.111 47.1901C312.925 51.0374 313.643 58.6292 318.715 64.1467C319.008 64.4654 319.309 64.7703 319.617 65.061C318.188 68.4774 315.286 71.6452 310 70.6384L329.652 76.2534C331.614 74.9111 334.793 72.0651 336.5 68.6656C338.207 72.0651 341.386 74.9111 343.348 76.2534L363 70.6384C357.714 71.6452 354.812 68.4774 353.383 65.061C353.691 64.7703 353.992 64.4654 354.285 64.1467C359.357 58.6292 360.075 51.0374 355.889 47.1901C351.703 43.3427 344.199 44.6967 339.127 50.2142C338.055 51.3805 337.178 52.6394 336.5 53.9361Z"
fill="#484848" style="mix-blend-mode:darken" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M407.5 8.93613C406.822 7.63945 405.945 6.38049 404.873 5.21421C399.801 -0.303333 392.297 -1.65729 388.111 2.19007C383.925 6.03743 384.643 13.6292 389.715 19.1467C390.008 19.4654 390.309 19.7703 390.617 20.061C389.188 23.4774 386.286 26.6452 381 25.6384L400.652 31.2534C402.614 29.9111 405.793 27.0651 407.5 23.6656C409.207 27.0651 412.386 29.9111 414.348 31.2534L434 25.6384C428.714 26.6452 425.812 23.4774 424.383 20.061C424.691 19.7703 424.992 19.4654 425.285 19.1467C430.357 13.6292 431.075 6.03743 426.889 2.19007C422.703 -1.65729 415.199 -0.303333 410.127 5.21421C409.055 6.38049 408.178 7.63945 407.5 8.93613Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M225.626 128.779H245.874C245.874 128.779 252.577 119.452 252.577 107.227C252.577 91.498 271.973 85.6754 271.973 63.7096C272 40.9159 254.253 24.0276 234.527 24H234.5H234.473C214.747 24.0276 197 40.9159 197 63.7096C197 85.6754 216.396 91.498 216.396 107.227C216.396 119.452 225.626 128.779 225.626 128.779Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M198.538 120.307C197.33 112.029 212.962 106.537 214.885 104.412C217.44 101.625 221.753 101.46 224.5 103.998C227.275 106.565 228.291 110.014 225.764 112.774C224.857 113.822 199.775 128.586 198.538 120.307Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M242.852 112.746C240.709 109.628 242.302 106.096 245.379 103.943C248.484 101.791 252.714 102.563 254.857 105.682C257.055 108.855 269.912 115.754 268.868 123.701C267.907 130.821 243.621 113.905 242.852 112.746Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M227.165 150C219.857 150 217.302 115.782 217.302 115.782C216.89 112.029 219.582 108.634 223.319 108.221C227.055 107.807 230.434 110.511 230.846 114.264C230.846 114.264 234.472 150 227.165 150Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M241.341 149.697C232.824 149.697 238.154 113.437 238.154 113.437C238.538 109.684 241.89 106.924 245.626 107.311C249.363 107.697 252.11 111.063 251.725 114.816C251.698 114.844 249.17 149.697 241.341 149.697Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M226.808 80.2666C229.033 81.7292 231.67 83.5228 234.5 83.5228C237.33 83.5228 239.995 81.7292 242.192 80.2666H226.808Z"
fill="#F2F2F2" />
<path d="M252.412 72.2921C254.567 72.2921 256.313 70.5377 256.313 68.3736C256.313 66.2095 254.567 64.4551 252.412 64.4551C250.258 64.4551 248.511 66.2095 248.511 68.3736C248.511 70.5377 250.258 72.2921 252.412 72.2921Z"
fill="#F2F2F2" />
<path d="M256.258 63.1296C254.912 62.9917 253.758 62.8537 252.659 62.9917C252.11 63.0468 251.588 63.1848 251.038 63.378C250.489 63.5712 249.94 63.8471 249.335 64.1507C249.72 62.8261 251.066 61.7775 252.522 61.6395C253.236 61.5567 253.978 61.6671 254.61 61.9154C255.242 62.1914 255.846 62.5501 256.258 63.1296Z"
fill="#F2F2F2" />
<path d="M216.588 72.2921C218.743 72.2921 220.489 70.5377 220.489 68.3736C220.489 66.2095 218.743 64.4551 216.588 64.4551C214.433 64.4551 212.687 66.2095 212.687 68.3736C212.687 70.5377 214.433 72.2921 216.588 72.2921Z"
fill="#F2F2F2" />
<path d="M212.742 63.1296C213.154 62.5501 213.758 62.1638 214.39 61.9154C215.05 61.6671 215.764 61.5567 216.478 61.6395C217.934 61.7775 219.28 62.7985 219.665 64.1507C219.033 63.8471 218.484 63.5712 217.962 63.378C217.412 63.1848 216.89 63.0744 216.341 62.9917C215.242 62.8537 214.088 62.9917 212.742 63.1296Z"
fill="#F2F2F2" />
<rect x="43" y="36" width="22" height="87" fill="#484848"
style="mix-blend-mode:darken" />
<rect x="106" y="56" width="22" height="88" fill="#484848"
style="mix-blend-mode:darken" />
<rect x="326" y="66" width="22" height="72" fill="#484848"
style="mix-blend-mode:darken" />
<rect x="397" y="22" width="22" height="104" fill="#484848"
style="mix-blend-mode:darken" />
<g style="mix-blend-mode:multiply">
<rect y="36" width="108" height="87" fill="#FFAB33" />
</g>
<g style="mix-blend-mode:multiply">
<rect x="366" y="22" width="83" height="104" fill="#FFAB33" />
</g>
<g style="mix-blend-mode:multiply">
<rect x="79" y="56" width="75" height="88" fill="#FFAB33" />
</g>
<g style="mix-blend-mode:multiply">
<rect x="301" y="66" width="72" height="72" fill="#FFAB33" />
</g>
</svg>
</div>
<p class="text item">Les fêtes de fin d’année approchent à grand pas et Gabi trépigne
d’impatience de
faire sa liste au Père Noël. Il consulte le catalogue de Noël et choisit son premier jouet
dans la catégorie “aventure”.</p>
</div>
<div class="question__choices question__item fadeOut">
<div class="item">
<p class="text">D’après-toi, de quelle couleur sont vêtus les enfants figurant dans la
catégorie “princesse” du catalogue ?</p>
</div>
<div class="item choices">
<div class="choice" data-answer="true">
<svg width="86" height="85" viewBox="0 0 86 85" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M85.6042 1.15359C85.3563 0.303758 84.4676 -0.183414 83.62 0.064714C74.5506 2.72198 65.3871 4.50893 56.2974 5.39707V4.63166C56.2974 3.7462 55.5813 3.02854 54.6978 3.02854C53.8143 3.02854 53.0982 3.7462 53.0982 4.63166V5.66888C52.0572 5.74655 51.0171 5.81619 49.9788 5.87017C44.1073 6.1744 38.1954 6.09781 32.2889 5.65125V4.63166C32.2889 3.7462 31.5728 3.02854 30.6893 3.02854C29.8058 3.02854 29.0897 3.7462 29.0897 4.63166V5.37605C24.8791 4.96119 20.6757 4.35682 16.4959 3.56345C15.629 3.39832 14.7911 3.97028 14.6265 4.84025C14.4621 5.71021 15.0325 6.549 15.9005 6.71377C20.2776 7.54472 24.6799 8.1719 29.0897 8.59673V11.231L19.0141 14.4857C16.2242 15.387 14.0331 17.4809 13.0028 20.2311L4.56446 42.7506C4.40965 43.1638 4.43169 43.6229 4.6256 44.0194C4.81933 44.4159 5.16769 44.7146 5.58839 44.8455L18.7331 48.9298V81.0942C18.7331 81.9796 19.4492 82.6973 20.3327 82.6973H65.6045C66.488 82.6973 67.2041 81.9796 67.2041 81.0942V54.4707C67.2041 53.5852 66.488 52.8676 65.6045 52.8676C64.721 52.8676 64.0049 53.5852 64.0049 54.4707V79.491H21.9321V36.2839C21.9321 35.3985 21.216 34.6808 20.3325 34.6808C19.449 34.6808 18.7329 35.3985 18.7329 36.2839V38.3905C16.6214 40.5964 13.6065 42.0249 9.84548 42.8113L8.15558 42.2862L15.9976 21.358C16.6827 19.529 18.1398 18.1364 19.9952 17.5372L29.0895 14.5995V14.7251C29.0895 15.6106 29.8056 16.3282 30.6891 16.3282C31.394 16.3282 31.991 15.8708 32.2041 15.2363C34.9016 17.49 38.7865 18.8184 42.9681 18.8184C46.9472 18.8184 50.6584 17.6163 53.3328 15.5582C53.6138 16.0194 54.1189 16.3282 54.6975 16.3282C55.581 16.3282 56.2971 15.6106 56.2971 14.7251V14.422L65.8988 17.5235C67.7757 18.1296 69.2399 19.542 69.9163 21.3984L77.5271 42.2818L75.9547 42.7704C72.2509 41.9693 69.2822 40.5356 67.2034 38.3363V36.2841C67.2034 35.3987 66.4873 34.681 65.6038 34.681C64.7203 34.681 64.0042 35.3987 64.0042 36.2841V47.6537C64.0042 47.6599 64.0042 47.6663 64.0042 47.6726V49.602C64.0042 50.4875 64.7203 51.2051 65.6038 51.2051C66.4873 51.2051 67.2034 50.4875 67.2034 49.602V48.8466L80.0799 44.8457C80.4983 44.7157 80.8452 44.4195 81.0395 44.026C81.2339 43.6327 81.2588 43.1767 81.1088 42.7643L72.9214 20.2985C71.9041 17.5071 69.7021 15.3835 66.8801 14.4718L56.2969 11.0532V8.6165C65.6871 7.71964 75.1529 5.88584 84.517 3.14218C85.3655 2.8937 85.852 2.00325 85.6042 1.15359ZM53.0982 10.7219C45.6191 12.332 38.8761 12.3085 32.5025 10.6421C32.4316 10.6236 32.3602 10.6124 32.2889 10.6046V8.86819C35.8078 9.12843 39.3288 9.2606 42.8426 9.2606C45.2806 9.2606 47.7164 9.19754 50.1441 9.07178C51.1275 9.02084 52.1125 8.95547 53.0982 8.88369V10.7219Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M10.5324 5.55097C11.2611 5.55097 11.9198 5.04884 12.0901 4.30677C12.2879 3.44393 11.7506 2.58359 10.8895 2.38516C7.95634 1.70935 4.98285 0.928807 2.05094 0.0656134C1.20315 -0.184474 0.314297 0.302342 0.0652912 1.15182C-0.183715 2.0013 0.301322 2.89228 1.14912 3.14183C4.14163 4.02302 7.17751 4.81995 10.1727 5.51018C10.2932 5.53761 10.4137 5.55097 10.5324 5.55097Z"
fill="#484848" style="mix-blend-mode:darken" />
<g style="mix-blend-mode:multiply">
<path d="M19.7114 47.5588L3 43.0882L12.566 18.6171C13.571 16.0463 15.5939 14.0052 18.1556 12.9773L26.2745 9.71932C27.4586 9.24416 28.7227 9 29.9986 9H58.0815C59.2311 9 60.3721 9.19823 61.4543 9.58598L71.0348 13.0185C73.8126 14.0137 76.0091 16.185 77.0363 18.9512L86 43.0882L70.4027 47.5588V85H19.7114V47.5588Z"
fill="#9AE9EC" />
</g>
</svg>
<p class="choice_button text">Bleu</p>
</div>
<div class="choice" data-answer="true">
<svg width="86" height="85" viewBox="0 0 86 85" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M85.6042 1.15359C85.3563 0.303758 84.4676 -0.183414 83.62 0.064714C74.5506 2.72198 65.3871 4.50893 56.2974 5.39707V4.63166C56.2974 3.7462 55.5813 3.02854 54.6978 3.02854C53.8143 3.02854 53.0982 3.7462 53.0982 4.63166V5.66888C52.0572 5.74655 51.0171 5.81619 49.9788 5.87017C44.1073 6.1744 38.1954 6.09781 32.2889 5.65125V4.63166C32.2889 3.7462 31.5728 3.02854 30.6893 3.02854C29.8058 3.02854 29.0897 3.7462 29.0897 4.63166V5.37605C24.8791 4.96119 20.6757 4.35682 16.4959 3.56345C15.629 3.39832 14.7911 3.97028 14.6265 4.84025C14.4621 5.71021 15.0325 6.549 15.9005 6.71377C20.2776 7.54472 24.6799 8.1719 29.0897 8.59673V11.231L19.0141 14.4857C16.2242 15.387 14.0331 17.4809 13.0028 20.2311L4.56446 42.7506C4.40965 43.1638 4.43169 43.6229 4.6256 44.0194C4.81933 44.4159 5.16769 44.7146 5.58839 44.8455L18.7331 48.9298V81.0942C18.7331 81.9796 19.4492 82.6973 20.3327 82.6973H65.6045C66.488 82.6973 67.2041 81.9796 67.2041 81.0942V54.4707C67.2041 53.5852 66.488 52.8676 65.6045 52.8676C64.721 52.8676 64.0049 53.5852 64.0049 54.4707V79.491H21.9321V36.2839C21.9321 35.3985 21.216 34.6808 20.3325 34.6808C19.449 34.6808 18.7329 35.3985 18.7329 36.2839V38.3905C16.6214 40.5964 13.6065 42.0249 9.84548 42.8113L8.15558 42.2862L15.9976 21.358C16.6827 19.529 18.1398 18.1364 19.9952 17.5372L29.0895 14.5995V14.7251C29.0895 15.6106 29.8056 16.3282 30.6891 16.3282C31.394 16.3282 31.991 15.8708 32.2041 15.2363C34.9016 17.49 38.7865 18.8184 42.9681 18.8184C46.9472 18.8184 50.6584 17.6163 53.3328 15.5582C53.6138 16.0194 54.1189 16.3282 54.6975 16.3282C55.581 16.3282 56.2971 15.6106 56.2971 14.7251V14.422L65.8988 17.5235C67.7757 18.1296 69.2399 19.542 69.9163 21.3984L77.5271 42.2818L75.9547 42.7704C72.2509 41.9693 69.2822 40.5356 67.2034 38.3363V36.2841C67.2034 35.3987 66.4873 34.681 65.6038 34.681C64.7203 34.681 64.0042 35.3987 64.0042 36.2841V47.6537C64.0042 47.6599 64.0042 47.6663 64.0042 47.6726V49.602C64.0042 50.4875 64.7203 51.2051 65.6038 51.2051C66.4873 51.2051 67.2034 50.4875 67.2034 49.602V48.8466L80.0799 44.8457C80.4983 44.7157 80.8452 44.4195 81.0395 44.026C81.2339 43.6327 81.2588 43.1767 81.1088 42.7643L72.9214 20.2985C71.9041 17.5071 69.7021 15.3835 66.8801 14.4718L56.2969 11.0532V8.6165C65.6871 7.71964 75.1529 5.88584 84.517 3.14218C85.3655 2.8937 85.852 2.00325 85.6042 1.15359ZM53.0982 10.7219C45.6191 12.332 38.8761 12.3085 32.5025 10.6421C32.4316 10.6236 32.3602 10.6124 32.2889 10.6046V8.86819C35.8078 9.12843 39.3288 9.2606 42.8426 9.2606C45.2806 9.2606 47.7164 9.19754 50.1441 9.07178C51.1275 9.02084 52.1125 8.95547 53.0982 8.88369V10.7219Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M10.5324 5.55097C11.2611 5.55097 11.9198 5.04884 12.0901 4.30677C12.2879 3.44393 11.7506 2.58359 10.8895 2.38516C7.95634 1.70935 4.98285 0.928807 2.05094 0.0656134C1.20315 -0.184474 0.314297 0.302342 0.0652912 1.15182C-0.183715 2.0013 0.301322 2.89228 1.14912 3.14183C4.14163 4.02302 7.17751 4.81995 10.1727 5.51018C10.2932 5.53761 10.4137 5.55097 10.5324 5.55097Z"
fill="#484848" style="mix-blend-mode:darken" />
<g style="mix-blend-mode:multiply">
<path d="M18.7114 47.5588L2 43.0882L11.566 18.6171C12.571 16.0463 14.5939 14.0052 17.1556 12.9773L25.2745 9.71932C26.4586 9.24416 27.7227 9 28.9986 9H57.0815C58.2311 9 59.3721 9.19823 60.4543 9.58598L70.0348 13.0185C72.8126 14.0137 75.0091 16.185 76.0363 18.9512L85 43.0882L69.4027 47.5588V85H18.7114V47.5588Z"
fill="#FFB4AB" style="mix-blend-mode:darken" />
</g>
</svg>
<p class="choice_button text">Rose</p>
</div>
<div class="choice" data-answer="true">
<svg width="86" height="85" viewBox="0 0 86 85" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M85.6042 1.15359C85.3563 0.303758 84.4676 -0.183414 83.62 0.064714C74.5506 2.72198 65.3871 4.50893 56.2974 5.39707V4.63166C56.2974 3.7462 55.5813 3.02854 54.6978 3.02854C53.8143 3.02854 53.0982 3.7462 53.0982 4.63166V5.66888C52.0572 5.74655 51.0171 5.81619 49.9788 5.87017C44.1073 6.1744 38.1954 6.09781 32.2889 5.65125V4.63166C32.2889 3.7462 31.5728 3.02854 30.6893 3.02854C29.8058 3.02854 29.0897 3.7462 29.0897 4.63166V5.37605C24.8791 4.96119 20.6757 4.35682 16.4959 3.56345C15.629 3.39832 14.7911 3.97028 14.6265 4.84025C14.4621 5.71021 15.0325 6.549 15.9005 6.71377C20.2776 7.54472 24.6799 8.1719 29.0897 8.59673V11.231L19.0141 14.4857C16.2242 15.387 14.0331 17.4809 13.0028 20.2311L4.56446 42.7506C4.40965 43.1638 4.43169 43.6229 4.6256 44.0194C4.81933 44.4159 5.16769 44.7146 5.58839 44.8455L18.7331 48.9298V81.0942C18.7331 81.9796 19.4492 82.6973 20.3327 82.6973H65.6045C66.488 82.6973 67.2041 81.9796 67.2041 81.0942V54.4707C67.2041 53.5852 66.488 52.8676 65.6045 52.8676C64.721 52.8676 64.0049 53.5852 64.0049 54.4707V79.491H21.9321V36.2839C21.9321 35.3985 21.216 34.6808 20.3325 34.6808C19.449 34.6808 18.7329 35.3985 18.7329 36.2839V38.3905C16.6214 40.5964 13.6065 42.0249 9.84548 42.8113L8.15558 42.2862L15.9976 21.358C16.6827 19.529 18.1398 18.1364 19.9952 17.5372L29.0895 14.5995V14.7251C29.0895 15.6106 29.8056 16.3282 30.6891 16.3282C31.394 16.3282 31.991 15.8708 32.2041 15.2363C34.9016 17.49 38.7865 18.8184 42.9681 18.8184C46.9472 18.8184 50.6584 17.6163 53.3328 15.5582C53.6138 16.0194 54.1189 16.3282 54.6975 16.3282C55.581 16.3282 56.2971 15.6106 56.2971 14.7251V14.422L65.8988 17.5235C67.7757 18.1296 69.2399 19.542 69.9163 21.3984L77.5271 42.2818L75.9547 42.7704C72.2509 41.9693 69.2822 40.5356 67.2034 38.3363V36.2841C67.2034 35.3987 66.4873 34.681 65.6038 34.681C64.7203 34.681 64.0042 35.3987 64.0042 36.2841V47.6537C64.0042 47.6599 64.0042 47.6663 64.0042 47.6726V49.602C64.0042 50.4875 64.7203 51.2051 65.6038 51.2051C66.4873 51.2051 67.2034 50.4875 67.2034 49.602V48.8466L80.0799 44.8457C80.4983 44.7157 80.8452 44.4195 81.0395 44.026C81.2339 43.6327 81.2588 43.1767 81.1088 42.7643L72.9214 20.2985C71.9041 17.5071 69.7021 15.3835 66.8801 14.4718L56.2969 11.0532V8.6165C65.6871 7.71964 75.1529 5.88584 84.517 3.14218C85.3655 2.8937 85.852 2.00325 85.6042 1.15359ZM53.0982 10.7219C45.6191 12.332 38.8761 12.3085 32.5025 10.6421C32.4316 10.6236 32.3602 10.6124 32.2889 10.6046V8.86819C35.8078 9.12843 39.3288 9.2606 42.8426 9.2606C45.2806 9.2606 47.7164 9.19754 50.1441 9.07178C51.1275 9.02084 52.1125 8.95547 53.0982 8.88369V10.7219Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M10.5324 5.55097C11.2611 5.55097 11.9198 5.04884 12.0901 4.30677C12.2879 3.44393 11.7506 2.58359 10.8895 2.38516C7.95634 1.70935 4.98285 0.928807 2.05094 0.0656134C1.20315 -0.184474 0.314297 0.302342 0.0652912 1.15182C-0.183715 2.0013 0.301322 2.89228 1.14912 3.14183C4.14163 4.02302 7.17751 4.81995 10.1727 5.51018C10.2932 5.53761 10.4137 5.55097 10.5324 5.55097Z"
fill="#484848" style="mix-blend-mode:darken" />
<g style="mix-blend-mode:multiply">
<path d="M17.7114 47.5588L1 43.0882L10.566 18.6171C11.571 16.0463 13.5939 14.0052 16.1556 12.9773L24.2745 9.71932C25.4586 9.24416 26.7227 9 27.9986 9H56.0815C57.2311 9 58.3721 9.19823 59.4543 9.58598L69.0348 13.0185C71.8126 14.0137 74.0091 16.185 75.0363 18.9512L84 43.0882L68.4027 47.5588V85H17.7114V47.5588Z"
fill="#E53F17" />
</g>
</svg>
<p class="choice_button text">Rouge</p>
</div>
<div class="choice" data-answer="true">
<svg width="86" height="85" viewBox="0 0 86 85" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:multiply">
<path d="M18.7114 47.5588L2 43.0882L11.566 18.6171C12.571 16.0463 14.5939 14.0052 17.1556 12.9773L25.2745 9.71932C26.4586 9.24416 27.7227 9 28.9986 9H57.0815C58.2311 9 59.3721 9.19823 60.4543 9.58598L70.0348 13.0185C72.8126 14.0137 75.0091 16.185 76.0363 18.9512L85 43.0882L69.4027 47.5588V85H18.7114V47.5588Z"
fill="#FFAB33" />
</g>
<path d="M85.6042 1.15359C85.3563 0.303758 84.4676 -0.183414 83.62 0.064714C74.5506 2.72198 65.3871 4.50893 56.2974 5.39707V4.63166C56.2974 3.7462 55.5813 3.02854 54.6978 3.02854C53.8143 3.02854 53.0982 3.7462 53.0982 4.63166V5.66888C52.0572 5.74655 51.0171 5.81619 49.9788 5.87017C44.1073 6.1744 38.1954 6.09781 32.2889 5.65125V4.63166C32.2889 3.7462 31.5728 3.02854 30.6893 3.02854C29.8058 3.02854 29.0897 3.7462 29.0897 4.63166V5.37605C24.8791 4.96119 20.6757 4.35682 16.4959 3.56345C15.629 3.39832 14.7911 3.97028 14.6265 4.84025C14.4621 5.71021 15.0325 6.549 15.9005 6.71377C20.2776 7.54472 24.6799 8.1719 29.0897 8.59673V11.231L19.0141 14.4857C16.2242 15.387 14.0331 17.4809 13.0028 20.2311L4.56446 42.7506C4.40965 43.1638 4.43169 43.6229 4.6256 44.0194C4.81933 44.4159 5.16769 44.7146 5.58839 44.8455L18.7331 48.9298V81.0942C18.7331 81.9796 19.4492 82.6973 20.3327 82.6973H65.6045C66.488 82.6973 67.2041 81.9796 67.2041 81.0942V54.4707C67.2041 53.5852 66.488 52.8676 65.6045 52.8676C64.721 52.8676 64.0049 53.5852 64.0049 54.4707V79.491H21.9321V36.2839C21.9321 35.3985 21.216 34.6808 20.3325 34.6808C19.449 34.6808 18.7329 35.3985 18.7329 36.2839V38.3905C16.6214 40.5964 13.6065 42.0249 9.84548 42.8113L8.15558 42.2862L15.9976 21.358C16.6827 19.529 18.1398 18.1364 19.9952 17.5372L29.0895 14.5995V14.7251C29.0895 15.6106 29.8056 16.3282 30.6891 16.3282C31.394 16.3282 31.991 15.8708 32.2041 15.2363C34.9016 17.49 38.7865 18.8184 42.9681 18.8184C46.9472 18.8184 50.6584 17.6163 53.3328 15.5582C53.6138 16.0194 54.1189 16.3282 54.6975 16.3282C55.581 16.3282 56.2971 15.6106 56.2971 14.7251V14.422L65.8988 17.5235C67.7757 18.1296 69.2399 19.542 69.9163 21.3984L77.5271 42.2818L75.9547 42.7704C72.2509 41.9693 69.2822 40.5356 67.2034 38.3363V36.2841C67.2034 35.3987 66.4873 34.681 65.6038 34.681C64.7203 34.681 64.0042 35.3987 64.0042 36.2841V47.6537C64.0042 47.6599 64.0042 47.6663 64.0042 47.6726V49.602C64.0042 50.4875 64.7203 51.2051 65.6038 51.2051C66.4873 51.2051 67.2034 50.4875 67.2034 49.602V48.8466L80.0799 44.8457C80.4983 44.7157 80.8452 44.4195 81.0395 44.026C81.2339 43.6327 81.2588 43.1767 81.1088 42.7643L72.9214 20.2985C71.9041 17.5071 69.7021 15.3835 66.8801 14.4718L56.2969 11.0532V8.6165C65.6871 7.71964 75.1529 5.88584 84.517 3.14218C85.3655 2.8937 85.852 2.00325 85.6042 1.15359ZM53.0982 10.7219C45.6191 12.332 38.8761 12.3085 32.5025 10.6421C32.4316 10.6236 32.3602 10.6124 32.2889 10.6046V8.86819C35.8078 9.12843 39.3288 9.2606 42.8426 9.2606C45.2806 9.2606 47.7164 9.19754 50.1441 9.07178C51.1275 9.02084 52.1125 8.95547 53.0982 8.88369V10.7219Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M10.5324 5.55097C11.2611 5.55097 11.9198 5.04884 12.0901 4.30677C12.2879 3.44393 11.7506 2.58359 10.8895 2.38516C7.95634 1.70935 4.98285 0.928807 2.05094 0.0656134C1.20315 -0.184474 0.314297 0.302342 0.0652912 1.15182C-0.183715 2.0013 0.301322 2.89228 1.14912 3.14183C4.14163 4.02302 7.17751 4.81995 10.1727 5.51018C10.2932 5.53761 10.4137 5.55097 10.5324 5.55097Z"
fill="#484848" style="mix-blend-mode:darken" />
</svg>
<p class="choice_button text">Autre</p>
</div>
</div>
</div>
<div class="question__answers question__item fadeOut">
<div class="item answers">
<p class="text">Les enfants, en plein apprentissage, sont souvent les premiers à
identifier les
stéréotypes que leur transmet la société et à les perpétuer. Dans les catalogues de
Noël, les enfants de la catégorie “princesse” sont plutôt vêtus de rose.</p>
</div>
<div class="item">
<div id="babyMen"></div>
</div>
<div class="item">
<p class="btn btn__compare">Compare avec le sexe opposé
<svg width="18" height="24" viewBox="0 0 18 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M17.0309 8.80653C17.0311 7.26912 16.5894 5.76406 15.7584 4.47057C14.9274 3.17709 13.7421 2.14968 12.3437 1.5107C10.9453 0.871726 9.39275 0.648109 7.87088 0.866479C6.349 1.08485 4.92195 1.736 3.75968 2.7424C2.5974 3.7488 1.74888 5.06803 1.31515 6.54299C0.881426 8.01795 0.880777 9.58648 1.31328 11.0618C1.74579 12.5371 2.59322 13.857 3.75466 14.8644C4.9161 15.8718 6.34261 16.5241 7.86431 16.7437V17.9727H5.57267V20.2643H7.86431V23.7016H10.156V20.2643H12.4476V17.9727H10.156V16.7437C12.0638 16.466 13.808 15.5114 15.0702 14.0542C16.3324 12.5969 17.0283 10.7344 17.0309 8.80653ZM3.28102 8.80653C3.28102 7.67346 3.61703 6.56585 4.24655 5.62374C4.87607 4.68163 5.77084 3.94735 6.8177 3.51374C7.86455 3.08014 9.01648 2.96669 10.1278 3.18774C11.2392 3.40879 12.26 3.95441 13.0612 4.7556C13.8624 5.5568 14.4081 6.57759 14.6292 7.68888C14.8502 8.80017 14.7368 9.95205 14.3031 10.9989C13.8695 12.0457 13.1352 12.9404 12.1931 13.5699C11.2509 14.1994 10.1432 14.5354 9.01013 14.5354C7.4912 14.5337 6.03497 13.9296 4.96092 12.8556C3.88688 11.7816 3.28273 10.3254 3.28102 8.80653Z"
fill="white" />
</svg>
</p>
<img src="dist/img/gabi-compare.png" alt="">
</div>
</div>
</div>
<div class="second__question question">
<div class="question__onboarding question__item">
<img class="item" src="dist/img/adolescence_male.png">
<div class="text__before item">
<p class="text">Si Gabi était un peu plus âgé, il serait un adolescent révolté mais
paresseux. Avec Hortense, sa copine, il découvre les joies de la sexualité… et de la
contraception.</p>
</div>
<div class="text__after item">
<p class="text">En voyant les ados d’aujourd’hui, Gabi se met à leur place. Il serait un
adolescent
révolté mais paresseux. Avec Hortense, sa copine, il découvre les joies de la
sexualité… et de la contraception.</p>
</div>
</div>
<div class="question__choices question__item fadeOut">
<div class="item">
<p class="text">D’après-vous, quel pourcentage d’hommes se sentent concernés par la
contraception ?</p>
</div>
<div class="item range range__men">
<div class="condom">
<svg width="503" height="87" viewBox="0 0 503 87" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g>
<path class="condom_svg"
d="M16.2394 77.6759H451.619C458.729 77.6759 467.889 72.9259 471.989 67.1159L473.519 64.9459C477.919 58.7159 481.049 55.0059 492.699 55.0059H493.239C495.539 55.0059 497.744 54.0925 499.37 52.4665C500.996 50.8406 501.909 48.6353 501.909 46.3359C501.909 44.0365 500.996 41.8312 499.37 40.2053C497.744 38.5794 495.539 37.6659 493.239 37.6659H493.169C482.369 37.6659 478.779 33.9159 474.689 27.6659L473.029 25.1459C470.633 21.5012 467.367 18.5098 463.527 16.4412C459.686 14.3726 455.392 13.2917 451.029 13.2959H16.2394"
stroke="#484848" stroke-width="2" stroke-miterlimit="10"
style="mix-blend-mode:darken" />
<path class="condom_svg"
d="M465.979 29.5061C464.21 26.424 461.582 23.9229 458.416 22.3072C455.251 20.6915 451.684 20.031 448.149 20.4061C444.989 20.7761 444.949 25.7761 448.149 25.4061C450.807 25.0419 453.512 25.4781 455.921 26.6591C458.329 27.84 460.33 29.7121 461.669 32.0361C463.279 34.8161 467.609 32.3061 465.989 29.5161L465.979 29.5061Z"
fill="#484848" style="mix-blend-mode:darken" />
<path class="condom_svg"
d="M439.919 26.0059C443.139 26.0059 443.139 21.0059 439.919 21.0059C436.699 21.0059 436.699 26.0059 439.919 26.0059Z"
fill="#484848" style="mix-blend-mode:darken" />
</g>
<path fill="#f8f3ec"
d="M16.02 79.5059L16.02 7.75586C16.02 4.30408 13.2217 1.50586 9.76995 1.50586H8.22995C4.77817 1.50586 1.97995 4.30408 1.97995 7.75586L1.97995 79.5059C1.97995 82.9576 4.77817 85.7559 8.22995 85.7559H9.76995C13.2217 85.7559 16.02 82.9576 16.02 79.5059Z"
stroke="#484848" stroke-width="2" stroke-miterlimit="10" />
</svg>
<output class='output__range'>50%</output>
<div class="range">
<div class='slider-track'>
<div class='slider-level'></div>
</div>
<input type="range" min="0" max="100" value="50" class="range__condom">
<span class="left__ball"></span>
<span class="right__ball"></span>
</div>
</div>
</div>
<p class="choice">Entrer</p>
</div>
<div class="question__answers question__item fadeOut">
<div class="item answers">
<p class="text">Se protéger c’est essentiel et même si les méthodes de contraception les
plus connues
sont le préservatifs masculins et la pilule, Gabi sait qu’il en existe d’autres tout
aussi efficaces.</p>
</div>
<div class="item">
<div id="menRadial">
</div>
</div>
</div>
</div>
<div class="third__question question">
<div class="question__onboarding question__item">
<div class="text__before item">
<p class="text">Gabi a grandi et il est enfin autorisé à sortir seul sans surveillance de
ses parents...</p>
</div>
<div class="text__after item">
<p class="text">Gabi se souvient de ses meilleures soirées cinéma :</p>
</div>
<img class="item" src="dist/img/cinema_mal.png">
<div class="item">
<p class="text">Ce soir, Gabi sort avec ses amis. Il va voir le dernier Avengers au cinéma
et en profite pour engloutir un maximum de pop corn.</p>
</div>
</div>
<div class="question__base question__item fadeOut">
<img class="item" src="dist/img/cinema_2_male.png">
<p class="text item">Mais sur le chemin du retour, Marie-Kelly siffle ce dernier et lui demande
combien il prend.
</p>
</div>
<div class="question__choices question__item fadeOut">
<div class="item">
<p class="text">D’après-toi, quel est la forme de harcèlement que subissent plus les
hommes dans la rue ?</p>
</div>
<div class="item choices">
<div class="choice" data-answer="true">
<img src="dist/img/speak 1.png">
<p class="choice_button text">Interpellations</p>
</div>
<div class="choice" data-answer="true">
<img src="dist/img/Group 831.png">
<p class="choice_button text">Propos vexants</p>
</div>
<div class="choice" data-answer="true">
<img src="dist/img/tap 1.png">
<p class="choice_button text">Attouchements</p>
</div>
<div class="choice" data-answer="true">
<img src="dist/img/word 1.png">
<p class="choice_button text">Insultes</p>
</div>
</div>
</div>
<div class="question__answers question__item fadeOut">
<div class="item answers">
<p class="text">Malheureusement c’est un phénomène assez répandu. Marie-Kelly à beau se
justifier en
disant qu’elle cherchait seulement à draguer, ce n’est jamais agréable de se faire
aborder de cette
manière.</p>
</div>
<div class="item">
<div id="streetMen"></div>
</div>
<div class="item">
<p class="btn__compare">Compare avec le sexe opposé
<svg width="18" height="24" viewBox="0 0 18 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M17.0309 8.80653C17.0311 7.26912 16.5894 5.76406 15.7584 4.47057C14.9274 3.17709 13.7421 2.14968 12.3437 1.5107C10.9453 0.871726 9.39275 0.648109 7.87088 0.866479C6.349 1.08485 4.92195 1.736 3.75968 2.7424C2.5974 3.7488 1.74888 5.06803 1.31515 6.54299C0.881426 8.01795 0.880777 9.58648 1.31328 11.0618C1.74579 12.5371 2.59322 13.857 3.75466 14.8644C4.9161 15.8718 6.34261 16.5241 7.86431 16.7437V17.9727H5.57267V20.2643H7.86431V23.7016H10.156V20.2643H12.4476V17.9727H10.156V16.7437C12.0638 16.466 13.808 15.5114 15.0702 14.0542C16.3324 12.5969 17.0283 10.7344 17.0309 8.80653ZM3.28102 8.80653C3.28102 7.67346 3.61703 6.56585 4.24655 5.62374C4.87607 4.68163 5.77084 3.94735 6.8177 3.51374C7.86455 3.08014 9.01648 2.96669 10.1278 3.18774C11.2392 3.40879 12.26 3.95441 13.0612 4.7556C13.8624 5.5568 14.4081 6.57759 14.6292 7.68888C14.8502 8.80017 14.7368 9.95205 14.3031 10.9989C13.8695 12.0457 13.1352 12.9404 12.1931 13.5699C11.2509 14.1994 10.1432 14.5354 9.01013 14.5354C7.4912 14.5337 6.03497 13.9296 4.96092 12.8556C3.88688 11.7816 3.28273 10.3254 3.28102 8.80653Z"
fill="white" />
</svg>
</p>
<img src="dist/img/gabi-compare.png" alt="">
</div>
</div>
</div>
<div class="fourth__question question">
<div class="question__onboarding question__item">
<div class="text__before item">
<p class="text">Gabi s’imagine alors à quoi ressemblera sa vie à 25 ans, à la fin de ses
études : </p>
</div>
<div class="text__after item">
<p class="text">Gabi se souvient alors de ses 25 ans, lorsqu’il venait de terminer ses
études : </p>
</div>
<img class="item" src="dist/img/Group 868.png">
<div class="item">
<p class="text">Gabi cherche un nouveau job, il se rend donc à un entretien
d’embauche.Mais il n’est pas la seul à postuler... Il y a une autre candidate face à
lui et c’est une femme.</p>
</div>
</div>
<div class="question__choices question__item fadeOut">
<div class="item">
<p class="text">Selon-toi, qui a le plus de chance d’être sélectionné ?</p>
</div>
<div class="item choices">
<div class="choice" data-answer="true">
<img src="dist/img/Group 835.png">
<p class="choice_button text">Gabi</p>
</div>
<div class="choice" data-answer="true">
<img src="dist/img/Group 834.png">
<p class="choice_button text">L'autre candidate</p>
</div>
</div>
</div>
<div class="question__answers question__item fadeOut">
<div class="item answers">
<p class="text">Les femmes ont effectivement tendance à être moins choisies. L’une des
principales causes est qu’elles auront plus de chance de partir en congé maternité.
</p>
</div>
<div class="item">
<div id="lineMen"></div>
</div>
<div class="item">
<p class="btn__compare">Compare avec le sexe opposé
<svg width="18" height="24" viewBox="0 0 18 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M17.0309 8.80653C17.0311 7.26912 16.5894 5.76406 15.7584 4.47057C14.9274 3.17709 13.7421 2.14968 12.3437 1.5107C10.9453 0.871726 9.39275 0.648109 7.87088 0.866479C6.349 1.08485 4.92195 1.736 3.75968 2.7424C2.5974 3.7488 1.74888 5.06803 1.31515 6.54299C0.881426 8.01795 0.880777 9.58648 1.31328 11.0618C1.74579 12.5371 2.59322 13.857 3.75466 14.8644C4.9161 15.8718 6.34261 16.5241 7.86431 16.7437V17.9727H5.57267V20.2643H7.86431V23.7016H10.156V20.2643H12.4476V17.9727H10.156V16.7437C12.0638 16.466 13.808 15.5114 15.0702 14.0542C16.3324 12.5969 17.0283 10.7344 17.0309 8.80653ZM3.28102 8.80653C3.28102 7.67346 3.61703 6.56585 4.24655 5.62374C4.87607 4.68163 5.77084 3.94735 6.8177 3.51374C7.86455 3.08014 9.01648 2.96669 10.1278 3.18774C11.2392 3.40879 12.26 3.95441 13.0612 4.7556C13.8624 5.5568 14.4081 6.57759 14.6292 7.68888C14.8502 8.80017 14.7368 9.95205 14.3031 10.9989C13.8695 12.0457 13.1352 12.9404 12.1931 13.5699C11.2509 14.1994 10.1432 14.5354 9.01013 14.5354C7.4912 14.5337 6.03497 13.9296 4.96092 12.8556C3.88688 11.7816 3.28273 10.3254 3.28102 8.80653Z"
fill="white" />
</svg>
</p>
<img src="dist/img/gabi-compare.png" alt="">
</div>
</div>
</div>
<div class="fifth__question question">
<div class="question__onboarding question__item">
<img class="item" src="dist/img/Group 835.png">
<div class="text__before item">
<p class="text">Après ces années de pression au travail et à la maison, Gabi n’en peut
plus. Dans une dernière crise de larme, il décide de vider la bouteille de whisky et
les plaquettes de doliprane et s’endort pour toujours.</p>
</div>
<div class="text__after item">
<p class="text">Après ces années de pression au travail et à la maison, Gabi n’en peut
plus. Dans une dernière crise de larme, il décide de vider la bouteille de whisky et
les plaquettes de doliprane et s’endort pour toujours.</p>
</div>
</div>
<div class="question__choices question__item fadeOut">
<div class="item">
<p class="text">D’après-vous, est-ce que Gabi aurait eu plus de chance de vivre plus
longtemps qu’une femme même en ayant été chef de projet ?</p>
</div>
<div class="item choices">
<div class="choice" data-answer="true">
<p class="choice_button text">Oui je pense</p>
</div>
<div class="choice" data-answer="true">
<p class="choice_button text">Non c'est sûr !</p>
</div>
</div>
</div>
<div class="question__answers question__item fadeOut">
<div class="item answers">
<p class="text">Malheureusement, les hommes sont beaucoup plus nombreux à mourir de
cancers du poumons, d’accidents de transport ou à se suicider.
</p>
<div class="item">
<div id="deathMen"></div>
</div>
</div>
</div>
</div>
</section>
<section class="female__questions questions">
<svg class="sign" width="51" height="71" viewBox="0 0 51 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.1923 24.7838C50.1929 20.0337 48.8282 15.3835 46.2607 11.3869C43.6933 7.3904 40.0313 4.216 35.7109 2.24174C31.3904 0.267478 26.5936 -0.423439 21.8916 0.251264C17.1896 0.925967 12.7806 2.93786 9.18965 6.04735C5.59869 9.15684 2.97709 13.2329 1.63706 17.7901C0.297021 22.3473 0.295017 27.1937 1.63128 31.752C2.96755 36.3103 5.58577 40.3886 9.17416 43.501C12.7625 46.6135 17.1699 48.629 21.8713 49.3076V53.1048H14.7911V60.1851H21.8713V70.8055H28.9516V60.1851H36.0318V53.1048H28.9516V49.3076C34.8459 48.4496 40.235 45.5001 44.1347 40.9976C48.0343 36.4952 50.1844 30.7403 50.1923 24.7838ZM7.71081 24.7838C7.71081 21.283 8.74893 17.8607 10.6939 14.9499C12.6389 12.039 15.4033 9.7703 18.6377 8.43058C21.8721 7.09086 25.4311 6.74033 28.8647 7.42331C32.2982 8.10629 35.4522 9.79212 37.9277 12.2676C40.4031 14.7431 42.089 17.897 42.772 21.3306C43.4549 24.7642 43.1044 28.3232 41.7647 31.5576C40.425 34.7919 38.1562 37.5564 35.2454 39.5014C32.3345 41.4463 28.9123 42.4845 25.4114 42.4845C20.7186 42.4792 16.2194 40.6126 12.901 37.2942C9.58265 33.9759 7.71608 29.4767 7.71081 24.7838Z"
fill="#FF614C" style="mix-blend-mode:darken" />
</svg>
<p class="indicator">Appuyer sur espace pour passer</p>
<div class="first__question question">
<div class="question__onboarding question__item">
<div class="forms">
<svg width="142" height="239" viewBox="0 0 142 239" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M54.1993 198.748H92.5341C92.5341 198.748 105.226 181.056 105.226 157.868C105.226 128.032 141.948 116.988 141.948 75.3222C142 32.0865 108.399 0.0523434 71.052 0H71H70.948C33.6015 0.0523434 0 32.0865 0 75.3222C0 116.988 36.7223 128.032 36.7223 157.868C36.7223 181.056 54.1993 198.748 54.1993 198.748Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M2.91263 182.679C0.623981 166.976 30.2203 156.56 33.8613 152.529C38.6987 147.242 46.865 146.928 52.0665 151.744C57.32 156.612 59.2445 163.155 54.4591 168.389C52.7427 170.378 5.25328 198.382 2.91263 182.679Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M86.8127 168.337C82.7556 162.422 85.7724 155.722 91.5981 151.639C97.4757 147.557 105.486 149.022 109.543 154.937C113.704 160.956 138.047 174.042 136.071 189.117C134.25 202.622 88.2691 170.535 86.8127 168.337Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M57.1122 239C43.2763 239 38.4389 174.094 38.4389 174.094C37.6587 166.976 42.7562 160.537 49.8302 159.752C56.9041 158.967 63.3019 164.097 64.0822 171.215C64.0822 171.215 70.9481 239 57.1122 239Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M83.9515 238.424C67.8269 238.424 77.9178 169.645 77.9178 169.645C78.646 162.526 84.9918 157.292 92.0657 158.025C99.1397 158.757 104.341 165.143 103.613 172.262C103.561 172.314 98.7756 238.424 83.9515 238.424Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M56.4358 106.729C60.649 109.503 65.6424 112.905 70.9999 112.905C76.3574 112.905 81.4029 109.503 85.564 106.729H56.4358Z"
fill="#F2F2F2" />
<path d="M104.914 91.6009C108.993 91.6009 112.3 88.2731 112.3 84.1681C112.3 80.0631 108.993 76.7354 104.914 76.7354C100.835 76.7354 97.5277 80.0631 97.5277 84.1681C97.5277 88.2731 100.835 91.6009 104.914 91.6009Z"
fill="#F2F2F2" />
<path d="M112.196 74.2228C109.647 73.9611 107.462 73.6994 105.382 73.9611C104.342 74.0658 103.353 74.3275 102.313 74.6939C101.273 75.0603 100.232 75.5838 99.0881 76.1595C99.8163 73.6471 102.365 71.658 105.122 71.3963C106.474 71.2393 107.879 71.4486 109.075 71.9197C110.271 72.4432 111.416 73.1236 112.196 74.2228Z"
fill="#F2F2F2" />
<path d="M37.0867 91.6009C41.1659 91.6009 44.4728 88.2731 44.4728 84.1681C44.4728 80.0631 41.1659 76.7354 37.0867 76.7354C33.0075 76.7354 29.7006 80.0631 29.7006 84.1681C29.7006 88.2731 33.0075 91.6009 37.0867 91.6009Z"
fill="#F2F2F2" />
<path d="M29.8044 74.2228C30.5846 73.1236 31.7289 72.3908 32.9253 71.9197C34.1736 71.4486 35.526 71.2393 36.8784 71.3963C39.6352 71.658 42.1839 73.5947 42.9121 76.1595C41.7158 75.5838 40.6755 75.0603 39.6872 74.6939C38.6469 74.3275 37.6586 74.1181 36.6183 73.9611C34.5377 73.6994 32.3531 73.9611 29.8044 74.2228Z"
fill="#F2F2F2" />
<g opacity="0.8">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M74.052 157.206L77.5387 152.133C78.4508 150.806 77.5007 149 75.8905 149H66.3567C64.7465 149 63.7964 150.806 64.7085 152.133L68.1581 157.152L64 174.131H64.4529C64.2714 174.686 64.3274 175.324 64.7085 175.878L69.4754 182.814C70.2701 183.97 71.9772 183.97 72.7718 182.814L77.5387 175.878C77.9199 175.324 77.9758 174.686 77.7943 174.131H77.8515L74.052 157.206Z"
fill="#FF614C" style="mix-blend-mode:darken" />
</g>
<path d="M57.9063 108C59.7938 108 61.511 107.321 62.6004 106.233C63.6907 107.321 65.4109 108 67.3004 108C69.1899 108 70.9091 107.321 71.9995 106.233C73.0889 107.321 74.807 108 76.6935 108C78.586 108 80.3083 107.321 81.3996 106.233C82.49 107.321 84.2102 108 86.0997 108C89.3537 108 92 106 92 103.541V99.9516C92 98.8306 91.7279 97.7401 91.1908 96.7106C89.4222 93.2952 84.9872 91 80.1531 91H63.8459C59.0128 91 54.5768 93.2944 52.8092 96.7091C52.2721 97.7394 52 98.8306 52 99.9516V103.541C52 106 54.6493 108 57.9063 108ZM54.0991 99.9516C54.0991 99.0301 54.3228 98.1346 54.7632 97.2878C56.2194 94.4755 59.8694 92.5862 63.8459 92.5862H80.1541C84.1306 92.5862 87.7806 94.4755 89.2368 97.2878L89.2378 97.2893C89.6782 98.1346 89.9019 99.0301 89.9019 99.9516V103.541C89.9019 105.125 88.1968 106.414 86.1007 106.414C84.3634 106.414 82.8498 105.521 82.4175 104.243L81.4006 101.232L80.3828 104.243C79.9505 105.521 78.4339 106.413 76.6935 106.413C74.9602 106.413 73.4486 105.521 73.0163 104.243L72.0005 101.232L70.9837 104.244C70.5524 105.522 69.0378 106.415 67.3004 106.415C65.5631 106.415 64.0495 105.522 63.6172 104.244L62.5994 101.234L61.5825 104.245C61.1512 105.523 59.6386 106.415 57.9053 106.415C55.8062 106.415 54.0981 105.127 54.0981 103.543V99.9516H54.0991Z"
fill="#FF614C" />
</svg>
<svg width="75" height="126" viewBox="0 0 75 126" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M28.6264 104.779H48.8736C48.8736 104.779 55.5769 95.452 55.5769 83.2273C55.5769 67.498 74.9725 61.6754 74.9725 39.7096C75 16.9159 57.2528 0.0275953 37.5275 0H37.5H37.4725C17.7473 0.0275953 0 16.9159 0 39.7096C0 61.6754 19.3956 67.498 19.3956 83.2273C19.3956 95.452 28.6264 104.779 28.6264 104.779Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M1.53842 96.3071C0.329631 88.0285 15.9615 82.5371 17.8846 80.4122C20.4395 77.6251 24.7527 77.4595 27.5 79.9983C30.2747 82.5647 31.2912 86.0141 28.7637 88.7736C27.8571 89.8222 2.77469 104.586 1.53842 96.3071Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M45.8518 88.746C43.7089 85.6277 45.3023 82.0955 48.3792 79.9431C51.4836 77.7906 55.7144 78.5633 57.8573 81.6816C60.0551 84.855 72.9122 91.7538 71.8683 99.7013C70.9067 106.821 46.621 89.905 45.8518 88.746Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M30.1648 126C22.8571 126 20.3021 91.7817 20.3021 91.7817C19.8901 88.0287 22.5824 84.6345 26.3186 84.2205C30.0549 83.8066 33.434 86.511 33.8461 90.2639C33.8461 90.2639 37.4725 126 30.1648 126Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M44.3406 125.697C35.8241 125.697 41.1538 89.4367 41.1538 89.4367C41.5384 85.6837 44.8901 82.9242 48.6263 83.3105C52.3626 83.6968 55.1098 87.0635 54.7252 90.8164C54.6977 90.844 52.1703 125.697 44.3406 125.697Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M29.8077 56.2666C32.033 57.7292 34.6703 59.5228 37.5 59.5228C40.3297 59.5228 42.9945 57.7292 45.1923 56.2666H29.8077Z"
fill="#F2F2F2" />
<path d="M55.4121 48.2921C57.5667 48.2921 59.3132 46.5377 59.3132 44.3736C59.3132 42.2095 57.5667 40.4551 55.4121 40.4551C53.2576 40.4551 51.511 42.2095 51.511 44.3736C51.511 46.5377 53.2576 48.2921 55.4121 48.2921Z"
fill="#F2F2F2" />
<path d="M59.2583 39.1296C57.9121 38.9917 56.7583 38.8537 55.6594 38.9917C55.1099 39.0468 54.5879 39.1848 54.0385 39.378C53.489 39.5712 52.9396 39.8471 52.3352 40.1507C52.7198 38.8261 54.066 37.7775 55.522 37.6395C56.2363 37.5567 56.9781 37.6671 57.6099 37.9154C58.2418 38.1914 58.8462 38.5501 59.2583 39.1296Z"
fill="#F2F2F2" />
<path d="M19.588 48.2921C21.7425 48.2921 23.4891 46.5377 23.4891 44.3736C23.4891 42.2095 21.7425 40.4551 19.588 40.4551C17.4334 40.4551 15.6869 42.2095 15.6869 44.3736C15.6869 46.5377 17.4334 48.2921 19.588 48.2921Z"
fill="#F2F2F2" />
<path d="M15.7418 39.1296C16.1539 38.5501 16.7583 38.1638 17.3901 37.9154C18.0495 37.6671 18.7638 37.5567 19.478 37.6395C20.9341 37.7775 22.2802 38.7985 22.6649 40.1507C22.033 39.8471 21.4835 39.5712 20.9616 39.378C20.4121 39.1848 19.8901 39.0744 19.3407 38.9917C18.2418 38.8537 17.0879 38.9917 15.7418 39.1296Z"
fill="#F2F2F2" />
</svg>
<svg width="155" height="225" viewBox="0 0 155 225" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:multiply">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M116.543 136.726C106.526 142.009 95.1123 145 83 145C72.6027 145 62.7202 142.796 53.7941 138.83C31.4021 138.361 9.04033 136.843 11.1368 133.34C14.0401 128.487 12.679 98.4457 11.4258 80.8758C11.1444 78.2892 11 75.6615 11 73C11 33.2355 43.2355 1 83 1C122.765 1 155 33.2355 155 73C155 76.4724 154.754 79.8874 154.279 83.2285C153.134 101.01 152.188 126.869 154.863 131.34C156.824 134.617 137.388 136.156 116.543 136.726Z"
fill="#FF614C" style="mix-blend-mode:darken" />
</g>
<path d="M67.2374 188.453H102.063C102.063 188.453 113.592 172.39 113.592 151.336C113.592 124.247 146.953 114.219 146.953 76.3887C147 37.1329 116.475 8.04753 82.5473 8H82.5H82.4528C48.5253 8.04753 18 37.1329 18 76.3887C18 114.219 51.3604 124.247 51.3604 151.336C51.3604 172.39 67.2374 188.453 67.2374 188.453Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M20.646 173.862C18.5669 159.605 45.4537 150.147 48.7614 146.488C53.1559 141.688 60.5746 141.403 65.2998 145.775C70.0724 150.195 71.8207 156.136 67.4735 160.888C65.9141 162.694 22.7724 188.12 20.646 173.862Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M96.8651 160.841C93.1794 155.471 95.9201 149.387 101.212 145.68C106.552 141.974 113.829 143.304 117.515 148.675C121.295 154.14 143.409 166.021 141.613 179.709C139.96 191.97 98.1882 162.837 96.8651 160.841Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M69.8836 225C57.3143 225 52.9198 166.069 52.9198 166.069C52.2111 159.605 56.8418 153.76 63.2682 153.047C69.6946 152.334 75.5066 156.991 76.2154 163.455C76.2154 163.455 82.4528 225 69.8836 225Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M94.2658 224.477C79.6174 224.477 88.7844 162.029 88.7844 162.029C89.446 155.565 95.2108 150.813 101.637 151.478C108.064 152.144 112.789 157.942 112.127 164.405C112.08 164.453 107.733 224.477 94.2658 224.477Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M69.2692 104.904C73.0967 107.423 77.6329 110.512 82.5 110.512C87.367 110.512 91.9505 107.423 95.7307 104.904H69.2692Z"
fill="#F2F2F2" />
<path d="M113.309 91.169C117.015 91.169 120.019 88.1476 120.019 84.4205C120.019 80.6933 117.015 77.6719 113.309 77.6719C109.603 77.6719 106.599 80.6933 106.599 84.4205C106.599 88.1476 109.603 91.169 113.309 91.169Z"
fill="#F2F2F2" />
<path d="M119.924 75.3905C117.609 75.1529 115.624 74.9153 113.734 75.1529C112.789 75.2479 111.891 75.4856 110.946 75.8182C110.001 76.1509 109.056 76.6262 108.017 77.149C108.678 74.8677 110.994 73.0618 113.498 72.8242C114.727 72.6816 116.002 72.8717 117.089 73.2994C118.176 73.7747 119.216 74.3925 119.924 75.3905Z"
fill="#F2F2F2" />
<path d="M51.6914 91.169C55.3971 91.169 58.4013 88.1476 58.4013 84.4205C58.4013 80.6933 55.3971 77.6719 51.6914 77.6719C47.9856 77.6719 44.9815 80.6933 44.9815 84.4205C44.9815 88.1476 47.9856 91.169 51.6914 91.169Z"
fill="#F2F2F2" />
<path d="M45.0758 75.3905C45.7846 74.3925 46.8242 73.7271 47.911 73.2994C49.045 72.8717 50.2736 72.6816 51.5022 72.8242C54.0066 73.0618 56.322 74.8202 56.9835 77.149C55.8967 76.6262 54.9516 76.1509 54.0538 75.8182C53.1088 75.4856 52.211 75.2955 51.2659 75.1529C49.3758 74.9153 47.3912 75.1529 45.0758 75.3905Z"
fill="#F2F2F2" />
<g style="mix-blend-mode:multiply">
<path d="M114.149 145C86.2681 170.024 61.4113 155.426 49.9787 145C54.8468 161.379 51.2695 169.265 49.9787 171.161C51.7489 192.09 47.3972 199.597 45 200.734C57.3915 206.649 102.163 203.199 123 200.734C116.804 198.459 114.518 182.346 114.149 174.573C113.706 169.114 113.043 152.583 114.149 145Z"
fill="#FF614C" style="mix-blend-mode:darken" />
</g>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.5 30.4995C30 22.5089 53 2.49952 82 0.999697C95.5 -0.350188 117.8 9.29952 121 12.4995C121.721 13.2203 121.24 15.2239 119.891 18.0391C123.775 18.5625 128.209 19.6316 131.015 21.42C142.849 28.2044 148.314 41.304 148.953 45.7514C150.317 55.2408 148.775 60.7878 147.537 65.2396C146.539 68.8298 145.739 71.7077 146.821 75.3668C142.799 72.9113 135.904 57.2674 134.427 51.5299C133.676 52.5932 135.523 58.8801 136.541 61.8907C132.603 59.2712 124.405 44.462 120.799 37.3849C119.965 39.0254 119.559 44.6665 119.46 47.2819C116.783 45.2213 114.155 36.9349 112.716 29.6731C102.869 43.5721 87.0755 60.9467 78.9999 62.4997C81.3332 57.333 85.9999 45.9997 85.9999 41.9997C72.3332 52.1664 42.4999 72.7997 32.4999 73.9997C37.3332 69.1664 46.8999 58.7997 46.4999 55.9997C38.1665 65.6664 10 89.1995 0 89.9995C5.58043 83.9726 6.83597 77.607 8.40226 69.6657C10.3444 59.8188 12.7644 47.5493 24.5 30.4995Z"
fill="#FF614C" />
</svg>
</div>
<div class="text__before">
<p class="text">Gabi est une petite fille de 5 ans. Elle a grandi entourée d’une famille
aimante et
attentionnée.</p>
</div>
<div class="text__after">
<p class="text">Regardons ce que cela donnerait si en 2019, Gabi était en fait une
adorable
petite fille de 4 ans.</p>
</div>
</div>
<div class="question__base question__item fadeOut">
<div class="forms">
<svg width="154" height="133" viewBox="0 0 154 133" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M54.3171 9.54884C53.5929 8.16324 52.6552 6.81796 51.5097 5.57171C46.0904 -0.324182 38.0714 -1.77098 33.5986 2.3402C29.1259 6.45138 29.8932 14.5637 35.3125 20.4596C35.6255 20.8002 35.9472 21.1259 36.2764 21.4365C34.7493 25.0872 31.6481 28.4723 26 27.3965L47 33.3965C49.0963 31.9621 52.4927 28.921 54.3171 25.2883C56.1416 28.921 59.538 31.9621 61.6343 33.3965L82.6343 27.3965C76.9862 28.4723 73.885 25.0872 72.3579 21.4365C72.6871 21.1259 73.0088 20.8002 73.3218 20.4596C78.7411 14.5637 79.5084 6.45138 75.0357 2.3402C70.5629 -1.77098 62.5438 -0.324182 57.1246 5.57171C55.9791 6.81796 55.0414 8.16324 54.3171 9.54884Z"
fill="#484848" style="mix-blend-mode:darken" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M115.5 31.0787C114.822 29.782 113.945 28.523 112.873 27.3567C107.801 21.8392 100.297 20.4852 96.111 24.3326C91.9253 28.18 92.6434 35.7717 97.7149 41.2893C98.0078 41.608 98.3089 41.9128 98.617 42.2035C97.1879 45.62 94.2857 48.7878 89 47.781L108.652 53.3959C110.614 52.0537 113.793 49.2077 115.5 45.8081C117.207 49.2077 120.386 52.0537 122.348 53.3959L142 47.781C136.714 48.7878 133.812 45.62 132.383 42.2035C132.691 41.9128 132.992 41.608 133.285 41.2893C138.357 35.7717 139.075 28.18 134.889 24.3326C130.703 20.4852 123.199 21.8392 118.127 27.3567C117.055 28.523 116.178 29.782 115.5 31.0787Z"
fill="#484848" style="mix-blend-mode:darken" />
<rect x="43" y="25" width="22" height="87" fill="#484848"
style="mix-blend-mode:darken" />
<rect x="106" y="45" width="22" height="88" fill="#484848"
style="mix-blend-mode:darken" />
<g style="mix-blend-mode:multiply">
<rect y="25" width="108" height="87" fill="#FF614C"
style="mix-blend-mode:darken" />
</g>
<g style="mix-blend-mode:multiply">
<rect x="79" y="45" width="75" height="88" fill="#FF614C"
style="mix-blend-mode:darken" />
</g>
</svg>
<svg class="gabi" width="75" height="126" viewBox="0 0 75 126" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M28.6264 104.779H48.8736C48.8736 104.779 55.5769 95.452 55.5769 83.2273C55.5769 67.498 74.9725 61.6754 74.9725 39.7096C75 16.9159 57.2528 0.0275953 37.5275 0H37.5H37.4725C17.7473 0.0275953 0 16.9159 0 39.7096C0 61.6754 19.3956 67.498 19.3956 83.2273C19.3956 95.452 28.6264 104.779 28.6264 104.779Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M1.53842 96.3071C0.329631 88.0285 15.9615 82.5371 17.8846 80.4122C20.4395 77.6251 24.7527 77.4595 27.5 79.9983C30.2747 82.5647 31.2912 86.0141 28.7637 88.7736C27.8571 89.8222 2.77469 104.586 1.53842 96.3071Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M45.8518 88.746C43.7089 85.6277 45.3023 82.0955 48.3792 79.9431C51.4836 77.7906 55.7144 78.5633 57.8573 81.6816C60.0551 84.855 72.9122 91.7538 71.8683 99.7013C70.9067 106.821 46.621 89.905 45.8518 88.746Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M30.1648 126C22.8571 126 20.3021 91.7817 20.3021 91.7817C19.8901 88.0287 22.5824 84.6345 26.3186 84.2205C30.0549 83.8066 33.434 86.511 33.8461 90.2639C33.8461 90.2639 37.4725 126 30.1648 126Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M44.3406 125.697C35.8241 125.697 41.1538 89.4367 41.1538 89.4367C41.5384 85.6837 44.8901 82.9242 48.6263 83.3105C52.3626 83.6968 55.1098 87.0635 54.7252 90.8164C54.6977 90.844 52.1703 125.697 44.3406 125.697Z"
fill="#484848" style="mix-blend-mode:darken" />
<path d="M29.8077 56.2666C32.033 57.7292 34.6703 59.5228 37.5 59.5228C40.3297 59.5228 42.9945 57.7292 45.1923 56.2666H29.8077Z"
fill="#F2F2F2" />
<path d="M55.4121 48.2921C57.5667 48.2921 59.3132 46.5377 59.3132 44.3736C59.3132 42.2095 57.5667 40.4551 55.4121 40.4551C53.2576 40.4551 51.511 42.2095 51.511 44.3736C51.511 46.5377 53.2576 48.2921 55.4121 48.2921Z"
fill="#F2F2F2" />
<path d="M59.2583 39.1296C57.9121 38.9917 56.7583 38.8537 55.6594 38.9917C55.1099 39.0468 54.5879 39.1848 54.0385 39.378C53.489 39.5712 52.9396 39.8471 52.3352 40.1507C52.7198 38.8261 54.066 37.7775 55.522 37.6395C56.2363 37.5567 56.9781 37.6671 57.6099 37.9154C58.2418 38.1914 58.8462 38.5501 59.2583 39.1296Z"
fill="#F2F2F2" />
<path d="M19.588 48.2921C21.7425 48.2921 23.4891 46.5377 23.4891 44.3736C23.4891 42.2095 21.7425 40.4551 19.588 40.4551C17.4334 40.4551 15.6869 42.2095 15.6869 44.3736C15.6869 46.5377 17.4334 48.2921 19.588 48.2921Z"
fill="#F2F2F2" />
<path d="M15.7418 39.1296C16.1539 38.5501 16.7583 38.1638 17.3901 37.9154C18.0495 37.6671 18.7638 37.5567 19.478 37.6395C20.9341 37.7775 22.2802 38.7985 22.6649 40.1507C22.033 39.8471 21.4835 39.5712 20.9616 39.378C20.4121 39.1848 19.8901 39.0744 19.3407 38.9917C18.2418 38.8537 17.0879 38.9917 15.7418 39.1296Z"
fill="#F2F2F2" />
</svg>
<svg width="148" height="138" viewBox="0 0 148 138" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M35.5 53.9361C34.8222 52.6394 33.9447 51.3804 32.8727 50.2142C27.8012 44.6966 20.2967 43.3427 16.111 47.19C11.9253 51.0374 12.6434 58.6291 17.7149 64.1467C18.0078 64.4654 18.3089 64.7702 18.617 65.0609C17.1879 68.4774 14.2857 71.6452 9 70.6384L28.6524 76.2534C30.6142 74.9111 33.7926 72.0651 35.5 68.6655C37.2074 72.0651 40.3858 74.9111 42.3476 76.2534L62 70.6384C56.7143 71.6452 53.8121 68.4774 52.383 65.0609C52.6911 64.7702 52.9922 64.4654 53.2851 64.1467C58.3566 58.6291 59.0747 51.0374 54.889 47.19C50.7033 43.3427 43.1988 44.6966 38.1273 50.2142C37.0553 51.3804 36.1778 52.6394 35.5 53.9361Z"
fill="#484848" style="mix-blend-mode:darken" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M106.5 8.93608C105.822 7.6394 104.945 6.38045 103.873 5.21417C98.8012 -0.303379 91.2967 -1.65733 87.111 2.19003C82.9253 6.03739 83.6434 13.6291 88.7149 19.1467C89.0078 19.4654 89.3089 19.7702 89.617 20.0609C88.1879 23.4774 85.2857 26.6452 80 25.6384L99.6524 31.2534C101.614 29.9111 104.793 27.0651 106.5 23.6655C108.207 27.0651 111.386 29.9111 113.348 31.2534L133 25.6384C127.714 26.6452 124.812 23.4774 123.383 20.0609C123.691 19.7702 123.992 19.4654 124.285 19.1467C129.357 13.6291 130.075 6.03739 125.889 2.19003C121.703 -1.65733 114.199 -0.303379 109.127 5.21417C108.055 6.38045 107.178 7.6394 106.5 8.93608Z"
fill="#484848" style="mix-blend-mode:darken" />
<rect x="25" y="66" width="22" height="72" fill="#484848"
style="mix-blend-mode:darken" />
<rect x="96" y="22" width="22" height="104" fill="#484848"
style="mix-blend-mode:darken" />
<g style="mix-blend-mode:multiply">
<rect x="65" y="22" width="83" height="104" fill="#FF614C"
style="mix-blend-mode:darken" />
</g>
<g style="mix-blend-mode:multiply">
<rect y="66" width="72" height="72" fill="#FF614C"
style="mix-blend-mode:darken" />
</g>
</svg>
</div>
<p class="text">Les fêtes de fin d’année approchent à grand pas et Gabi trépigne d’impatience de
faire
sa liste au Père Noël. Elle reçoit les catalogues de jouets à la maison et
choisit ses cadeaux. Elle veut choisir un jouet en rapport avec un métier.</p>
</div>
<div class="question__choices question__item fadeOut">
<div class="item">
<p class="text">D’après-toi, de quelle couleur sont vêtus les enfants figurant dans la
catégorie
“princesse” du catalogue ?</p>
</div>
<div class="item choices">