forked from yhatt/marp-cli-example
-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
773 lines (709 loc) · 160 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
<!DOCTYPE html><html lang="en-US"><head><link rel="canonical" href="https://eyssette.github.io/teaching-theme-for-marp"><meta property="og:url" content="https://eyssette.github.io/teaching-theme-for-marp"><meta property="og:image" content="https://eyssette.github.io/teaching-theme-for-marp/og-image.jpg"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@media screen{body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear;-webkit-tap-highlight-color:transparent}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover{opacity:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:active{opacity:.6}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:not(:disabled){transition:none}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-prev{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTBMMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-next{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMzIgOTBsNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTQwIDcwSDIwVjUwbTIwIDBMMjAgNzBtNDAtNDBoMjB2MjBtLTIwIDBsMjAtMjAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen]{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTIwIDUwaDIwdjIwbS0yMCAwbDIwLTIwbTQwIDBINjBWMzBtMjAgMEw2MCA1MCIvPjwvc3ZnPg==")}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS13aWR0aDo1cHh9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yMCA2MGgtNWE1IDUgMCAwMS01LTVWMjBhNSA1IDAgMDE1LTVoNjBhNSA1IDAgMDE1IDV2NU0zMCA4NWg2MCIvPjxyZWN0IHg9IjMwIiB5PSIzNSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjQwIiByeD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIi8+PHJlY3QgY2xhc3M9ImEiIHg9IjMwIiB5PSIzNSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjQwIiByeD0iNSIvPjxwYXRoIGNsYXNzPSJhIiBkPSJNNDAgNTBoNDBNNDAgNjBoMzAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body,html{height:100%;margin:0}body{background:#000;overflow:hidden}svg.bespoke-marp-slide{opacity:0;pointer-events:none;z-index:-1}svg.bespoke-marp-slide.bespoke-marp-active{opacity:1;pointer-events:auto;z-index:0}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable]{display:none}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable].bespoke-marp-active{display:block}[data-bespoke-marp-fragment=inactive]{visibility:hidden}body[data-bespoke-view=""] .bespoke-marp-parent,body[data-bespoke-view=next] .bespoke-marp-parent{bottom:0;left:0;position:absolute;right:0;top:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc{background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:1;will-change:transform}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>*,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>:first-child,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{height:32px;line-height:32px;width:32px}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive{cursor:none}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}body[data-bespoke-view=""] svg.bespoke-marp-slide,body[data-bespoke-view=next] svg.bespoke-marp-slide{height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent+.bespoke-marp-parent{top:5px}body[data-bespoke-view=""] .bespoke-progress-parent .bespoke-progress-bar{flex:0 0 0;background:#0288d1;transition:flex-basis .2s cubic-bezier(0,1,1,1)}body[data-bespoke-view=next]{background:transparent}body[data-bespoke-view=presenter]{background:#161616}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container{height:100%;left:0;position:absolute;top:0;width:100%;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:minmax(140px,1fr) 2fr 3em;grid-template-areas:"current next" "current note" "info note"}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent{grid-area:current;position:relative;overflow:hidden}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide{height:calc(100% - 40px);left:20px;position:absolute;pointer-events:none;top:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide.bespoke-marp-active{-webkit-filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container{background:#222;cursor:pointer;display:none;grid-area:next;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container iframe.bespoke-marp-presenter-next{background:transparent;border:0;display:block;-webkit-filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));height:calc(100% - 40px);left:20px;position:absolute;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;top:20px;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container{background:#222;color:#ddd;grid-area:note}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note{margin:20px;width:calc(100% - 40px);height:calc(100% - 40px);box-sizing:border-box;overflow:auto;padding-right:3px;white-space:pre-wrap;word-wrap:break-word;scrollbar-width:thin;scrollbar-color:hsla(0,0%,86.7%,.5) transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar{width:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-track{background:transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-thumb{background:hsla(0,0%,86.7%,.5);border-radius:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note:empty{pointer-events:none}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:first-child{margin-top:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:last-child{margin-bottom:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container{align-items:center;box-sizing:border-box;color:#ddd;display:flex;flex-wrap:nowrap;grid-area:info;justify-content:center;padding:0 10px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{display:block;box-sizing:border-box;padding:0 10px;white-space:nowrap;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page{order:2;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page .bespoke-marp-presenter-info-page-text{display:inline-block;min-width:120px;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time{color:#999;order:1;text-align:left}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{color:#999;order:3;text-align:right}}@media print{.bespoke-marp-presenter-info-container,.bespoke-marp-presenter-next-container,.bespoke-marp-presenter-note-container{display:none}}</style><style>@charset "UTF-8";div#p>svg>foreignObject>section{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}div#p>svg>foreignObject>section:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}div#p>svg>foreignObject>section:not([data-marpit-pagination]):after{display:none}/* Normalization */div#p>svg>foreignObject>section h1{font-size:2em;margin:0.67em 0}div#p>svg>foreignObject>section video::-webkit-media-controls{will-change:transform}@page{size:960px 720px;margin:0}@media print{body,html{background-color:#fff;margin:0;page-break-inside:avoid;break-inside:avoid-page}div#p>svg>foreignObject>section{page-break-before:always;break-before:page}div#p>svg>foreignObject>section,div#p>svg>foreignObject>section *{-webkit-print-color-adjust:exact!important;color-adjust:exact!important}div#p>svg[data-marpit-svg]{display:block;height:100vh;width:100vw}}/*!
* Marp default theme.
*
* @theme default
* @author Yuki Hattori
*
* @auto-scaling true
* @size 4:3 960px 720px
*/div#p>svg>foreignObject>section .octicon{display:inline-block;fill:currentColor;vertical-align:text-bottom}div#p>svg>foreignObject>section .anchor{float:left;line-height:1;margin-left:-20px;padding-right:4px}div#p>svg>foreignObject>section .anchor:focus{outline:none}div#p>svg>foreignObject>section h1 .octicon-link,div#p>svg>foreignObject>section h2 .octicon-link,div#p>svg>foreignObject>section h3 .octicon-link,div#p>svg>foreignObject>section h4 .octicon-link,div#p>svg>foreignObject>section h5 .octicon-link,div#p>svg>foreignObject>section h6 .octicon-link{color:#1b1f23;vertical-align:middle;visibility:hidden}div#p>svg>foreignObject>section h1:hover .anchor,div#p>svg>foreignObject>section h2:hover .anchor,div#p>svg>foreignObject>section h3:hover .anchor,div#p>svg>foreignObject>section h4:hover .anchor,div#p>svg>foreignObject>section h5:hover .anchor,div#p>svg>foreignObject>section h6:hover .anchor{text-decoration:none}div#p>svg>foreignObject>section h1:hover .anchor .octicon-link,div#p>svg>foreignObject>section h2:hover .anchor .octicon-link,div#p>svg>foreignObject>section h3:hover .anchor .octicon-link,div#p>svg>foreignObject>section h4:hover .anchor .octicon-link,div#p>svg>foreignObject>section h5:hover .anchor .octicon-link,div#p>svg>foreignObject>section h6:hover .anchor .octicon-link{visibility:visible}div#p>svg>foreignObject>section h1:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h2:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h3:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h4:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h5:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h6:hover .anchor .octicon-link:before{width:16px;height:16px;content:" ";display:inline-block;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'/%3E%3C/svg%3E")}div#p>svg>foreignObject>section{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:16px;line-height:1.5;word-wrap:break-word}div#p>svg>foreignObject>section details{display:block}div#p>svg>foreignObject>section summary{display:list-item}div#p>svg>foreignObject>section a{background-color:initial}div#p>svg>foreignObject>section a:active,div#p>svg>foreignObject>section a:hover{outline-width:0}div#p>svg>foreignObject>section strong{font-weight:inherit;font-weight:bolder}div#p>svg>foreignObject>section h1{margin:.67em 0}div#p>svg>foreignObject>section img{border-style:none}div#p>svg>foreignObject>section code,div#p>svg>foreignObject>section kbd,div#p>svg>foreignObject>section pre{font-family:monospace,monospace;font-size:1em}div#p>svg>foreignObject>section hr{box-sizing:initial;overflow:visible}div#p>svg>foreignObject>section input{font:inherit;margin:0;overflow:visible}div#p>svg>foreignObject>section [type=checkbox]{padding:0}div#p>svg>foreignObject>section *,div#p>svg>foreignObject>section [type=checkbox]{box-sizing:border-box}div#p>svg>foreignObject>section input{font-family:inherit;font-size:inherit;line-height:inherit}div#p>svg>foreignObject>section a{color:#0366d6;text-decoration:none}div#p>svg>foreignObject>section a:hover{text-decoration:underline}div#p>svg>foreignObject>section strong{font-weight:600}div#p>svg>foreignObject>section hr{height:0;margin:15px 0;overflow:hidden;background:transparent;border-bottom:1px solid #dfe2e5}div#p>svg>foreignObject>section hr:after,div#p>svg>foreignObject>section hr:before{display:table;content:""}div#p>svg>foreignObject>section hr:after{clear:both}div#p>svg>foreignObject>section table{border-spacing:0;border-collapse:collapse}div#p>svg>foreignObject>section td,div#p>svg>foreignObject>section th{padding:0}div#p>svg>foreignObject>section details summary{cursor:pointer}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2,div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4,div#p>svg>foreignObject>section h5,div#p>svg>foreignObject>section h6{margin-top:0;margin-bottom:0}div#p>svg>foreignObject>section h1{font-size:32px}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2{font-weight:600}div#p>svg>foreignObject>section h2{font-size:24px}div#p>svg>foreignObject>section h3{font-size:20px}div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4{font-weight:600}div#p>svg>foreignObject>section h4{font-size:16px}div#p>svg>foreignObject>section h5{font-size:14px}div#p>svg>foreignObject>section h5,div#p>svg>foreignObject>section h6{font-weight:600}div#p>svg>foreignObject>section h6{font-size:12px}div#p>svg>foreignObject>section p{margin-top:0;margin-bottom:10px}div#p>svg>foreignObject>section blockquote{margin:0}div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section ul{padding-left:0;margin-top:0;margin-bottom:0}div#p>svg>foreignObject>section ol ol,div#p>svg>foreignObject>section ul ol{list-style-type:lower-roman}div#p>svg>foreignObject>section ol ol ol,div#p>svg>foreignObject>section ol ul ol,div#p>svg>foreignObject>section ul ol ol,div#p>svg>foreignObject>section ul ul ol{list-style-type:lower-alpha}div#p>svg>foreignObject>section dd{margin-left:0}div#p>svg>foreignObject>section code,div#p>svg>foreignObject>section pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px}div#p>svg>foreignObject>section pre{margin-top:0;margin-bottom:0}div#p>svg>foreignObject>section input::-webkit-inner-spin-button,div#p>svg>foreignObject>section input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}div#p>svg>foreignObject>section :checked+.radio-label{position:relative;z-index:1;border-color:#0366d6}div#p>svg>foreignObject>section .border{border:1px solid #e1e4e8!important}div#p>svg>foreignObject>section .border-0{border:0!important}div#p>svg>foreignObject>section .border-bottom{border-bottom:1px solid #e1e4e8!important}div#p>svg>foreignObject>section .rounded-1{border-radius:3px!important}div#p>svg>foreignObject>section .bg-white{background-color:#fff!important}div#p>svg>foreignObject>section .bg-gray-light{background-color:#fafbfc!important}div#p>svg>foreignObject>section .text-gray-light{color:#6a737d!important}div#p>svg>foreignObject>section .pl-3,div#p>svg>foreignObject>section .px-3{padding-left:16px!important}div#p>svg>foreignObject>section .px-3{padding-right:16px!important}div#p>svg>foreignObject>section .f6{font-size:12px!important}div#p>svg>foreignObject>section .lh-condensed{line-height:1.25!important}div#p>svg>foreignObject>section .text-bold{font-weight:600!important}div#p>svg>foreignObject>section .pl-c{color:#6a737d}div#p>svg>foreignObject>section .pl-c1,div#p>svg>foreignObject>section .pl-s .pl-v{color:#005cc5}div#p>svg>foreignObject>section .pl-e,div#p>svg>foreignObject>section .pl-en{color:#6f42c1}div#p>svg>foreignObject>section .pl-s .pl-s1,div#p>svg>foreignObject>section .pl-smi{color:#24292e}div#p>svg>foreignObject>section .pl-ent{color:#22863a}div#p>svg>foreignObject>section .pl-k{color:#d73a49}div#p>svg>foreignObject>section .pl-pds,div#p>svg>foreignObject>section .pl-s,div#p>svg>foreignObject>section .pl-s .pl-pse .pl-s1,div#p>svg>foreignObject>section .pl-sr,div#p>svg>foreignObject>section .pl-sr .pl-cce,div#p>svg>foreignObject>section .pl-sr .pl-sra,div#p>svg>foreignObject>section .pl-sr .pl-sre{color:#032f62}div#p>svg>foreignObject>section .pl-smw,div#p>svg>foreignObject>section .pl-v{color:#e36209}div#p>svg>foreignObject>section .pl-bu{color:#b31d28}div#p>svg>foreignObject>section .pl-ii{color:#fafbfc;background-color:#b31d28}div#p>svg>foreignObject>section .pl-c2{color:#fafbfc;background-color:#d73a49}div#p>svg>foreignObject>section .pl-c2:before{content:"^M"}div#p>svg>foreignObject>section .pl-sr .pl-cce{font-weight:700;color:#22863a}div#p>svg>foreignObject>section .pl-ml{color:#735c0f}div#p>svg>foreignObject>section .pl-mh,div#p>svg>foreignObject>section .pl-mh .pl-en,div#p>svg>foreignObject>section .pl-ms{font-weight:700;color:#005cc5}div#p>svg>foreignObject>section .pl-mi{font-style:italic;color:#24292e}div#p>svg>foreignObject>section .pl-mb{font-weight:700;color:#24292e}div#p>svg>foreignObject>section .pl-md{color:#b31d28;background-color:#ffeef0}div#p>svg>foreignObject>section .pl-mi1{color:#22863a;background-color:#f0fff4}div#p>svg>foreignObject>section .pl-mc{color:#e36209;background-color:#ffebda}div#p>svg>foreignObject>section .pl-mi2{color:#f6f8fa;background-color:#005cc5}div#p>svg>foreignObject>section .pl-mdr{font-weight:700;color:#6f42c1}div#p>svg>foreignObject>section .pl-ba{color:#586069}div#p>svg>foreignObject>section .pl-sg{color:#959da5}div#p>svg>foreignObject>section .pl-corl{text-decoration:underline;color:#032f62}div#p>svg>foreignObject>section .mb-0{margin-bottom:0!important}div#p>svg>foreignObject>section .my-2{margin-bottom:8px!important;margin-top:8px!important}div#p>svg>foreignObject>section .pl-0{padding-left:0!important}div#p>svg>foreignObject>section .py-0{padding-top:0!important;padding-bottom:0!important}div#p>svg>foreignObject>section .pl-1{padding-left:4px!important}div#p>svg>foreignObject>section .pl-2{padding-left:8px!important}div#p>svg>foreignObject>section .py-2{padding-top:8px!important;padding-bottom:8px!important}div#p>svg>foreignObject>section .pl-3{padding-left:16px!important}div#p>svg>foreignObject>section .pl-4{padding-left:24px!important}div#p>svg>foreignObject>section .pl-5{padding-left:32px!important}div#p>svg>foreignObject>section .pl-6{padding-left:40px!important}div#p>svg>foreignObject>section .pl-7{padding-left:48px!important}div#p>svg>foreignObject>section .pl-8{padding-left:64px!important}div#p>svg>foreignObject>section .pl-9{padding-left:80px!important}div#p>svg>foreignObject>section .pl-10{padding-left:96px!important}div#p>svg>foreignObject>section .pl-11{padding-left:112px!important}div#p>svg>foreignObject>section .pl-12{padding-left:128px!important}div#p>svg>foreignObject>section hr{border-bottom-color:#eee}div#p>svg>foreignObject>section kbd{display:inline-block;padding:3px 5px;font:11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;line-height:10px;color:#444d56;vertical-align:middle;background-color:#fafbfc;border:1px solid #d1d5da;border-radius:3px;box-shadow:inset 0 -1px 0 #d1d5da}div#p>svg>foreignObject>section:after,div#p>svg>foreignObject>section:before{display:table
/* content:""; */}div#p>svg>foreignObject>section:after{clear:both}div#p>svg>foreignObject>section>:first-child{margin-top:0!important}div#p>svg>foreignObject>section>:last-child{margin-bottom:0!important}div#p>svg>foreignObject>section a:not([href]){color:inherit;text-decoration:none}div#p>svg>foreignObject>section blockquote,div#p>svg>foreignObject>section details,div#p>svg>foreignObject>section dl,div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section p,div#p>svg>foreignObject>section pre,div#p>svg>foreignObject>section table,div#p>svg>foreignObject>section ul{margin-top:0;margin-bottom:16px}div#p>svg>foreignObject>section hr{height:.25em;padding:0;margin:24px 0;background-color:#e1e4e8;border:0}div#p>svg>foreignObject>section blockquote{padding:0 1em;color:#6a737d;border-left:.25em solid #dfe2e5}div#p>svg>foreignObject>section blockquote>:first-child{margin-top:0}div#p>svg>foreignObject>section blockquote>:last-child{margin-bottom:0}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2,div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4,div#p>svg>foreignObject>section h5,div#p>svg>foreignObject>section h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}div#p>svg>foreignObject>section h1{font-size:2em}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2{padding-bottom:.3em;border-bottom:1px solid #eaecef}div#p>svg>foreignObject>section h2{font-size:1.5em}div#p>svg>foreignObject>section h3{font-size:1.25em}div#p>svg>foreignObject>section h4{font-size:1em}div#p>svg>foreignObject>section h5{font-size:.875em}div#p>svg>foreignObject>section h6{font-size:.85em;color:#6a737d}div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section ul{padding-left:2em}div#p>svg>foreignObject>section ol ol,div#p>svg>foreignObject>section ol ul,div#p>svg>foreignObject>section ul ol,div#p>svg>foreignObject>section ul ul{margin-top:0;margin-bottom:0}div#p>svg>foreignObject>section li{word-wrap:break-all}div#p>svg>foreignObject>section li>p{margin-top:16px}div#p>svg>foreignObject>section li+li{margin-top:.25em}div#p>svg>foreignObject>section dl{padding:0}div#p>svg>foreignObject>section dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:600}div#p>svg>foreignObject>section dl dd{padding:0 16px;margin-bottom:16px}div#p>svg>foreignObject>section table{display:block;width:100%;overflow:auto}div#p>svg>foreignObject>section table th{font-weight:600}div#p>svg>foreignObject>section table td,div#p>svg>foreignObject>section table th{padding:6px 13px;border:1px solid #dfe2e5}div#p>svg>foreignObject>section table tr{background-color:#fff;border-top:1px solid #c6cbd1}div#p>svg>foreignObject>section table tr:nth-child(2n){background-color:#f6f8fa}div#p>svg>foreignObject>section img{max-width:100%;box-sizing:initial;background-color:#fff}div#p>svg>foreignObject>section img[align=right]{padding-left:20px}div#p>svg>foreignObject>section img[align=left]{padding-right:20px}div#p>svg>foreignObject>section code{padding:.2em .4em;margin:0;font-size:85%;background-color:rgba(27,31,35,.05);border-radius:3px}div#p>svg>foreignObject>section pre{word-wrap:normal}div#p>svg>foreignObject>section pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}div#p>svg>foreignObject>section .highlight{margin-bottom:16px}div#p>svg>foreignObject>section .highlight pre{margin-bottom:0;word-break:normal}div#p>svg>foreignObject>section pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f6f8fa;border-radius:3px}div#p>svg>foreignObject>section pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:initial;border:0}div#p>svg>foreignObject>section .commit-tease-sha{display:inline-block;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:90%;color:#444d56}div#p>svg>foreignObject>section .full-commit .btn-outline:not(:disabled):hover{color:#005cc5;border-color:#005cc5}div#p>svg>foreignObject>section .blob-wrapper{overflow-x:auto;overflow-y:hidden}div#p>svg>foreignObject>section .blob-wrapper-embedded{max-height:240px;overflow-y:auto}div#p>svg>foreignObject>section .blob-num{width:1%;min-width:50px;padding-right:10px;padding-left:10px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:20px;color:rgba(27,31,35,.3);text-align:right;white-space:nowrap;vertical-align:top;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div#p>svg>foreignObject>section .blob-num:hover{color:rgba(27,31,35,.6)}div#p>svg>foreignObject>section .blob-num:before{content:attr(data-line-number)}div#p>svg>foreignObject>section .blob-code{position:relative;padding-right:10px;padding-left:10px;line-height:20px;vertical-align:top}div#p>svg>foreignObject>section .blob-code-inner{overflow:visible;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;color:#24292e;word-wrap:normal;white-space:pre}div#p>svg>foreignObject>section .pl-token.active,div#p>svg>foreignObject>section .pl-token:hover{cursor:pointer;background:#ffea7f}div#p>svg>foreignObject>section .tab-size[data-tab-size="1"]{-moz-tab-size:1;-o-tab-size:1;tab-size:1}div#p>svg>foreignObject>section .tab-size[data-tab-size="2"]{-moz-tab-size:2;-o-tab-size:2;tab-size:2}div#p>svg>foreignObject>section .tab-size[data-tab-size="3"]{-moz-tab-size:3;-o-tab-size:3;tab-size:3}div#p>svg>foreignObject>section .tab-size[data-tab-size="4"]{-moz-tab-size:4;-o-tab-size:4;tab-size:4}div#p>svg>foreignObject>section .tab-size[data-tab-size="5"]{-moz-tab-size:5;-o-tab-size:5;tab-size:5}div#p>svg>foreignObject>section .tab-size[data-tab-size="6"]{-moz-tab-size:6;-o-tab-size:6;tab-size:6}div#p>svg>foreignObject>section .tab-size[data-tab-size="7"]{-moz-tab-size:7;-o-tab-size:7;tab-size:7}div#p>svg>foreignObject>section .tab-size[data-tab-size="8"]{-moz-tab-size:8;-o-tab-size:8;tab-size:8}div#p>svg>foreignObject>section .tab-size[data-tab-size="9"]{-moz-tab-size:9;-o-tab-size:9;tab-size:9}div#p>svg>foreignObject>section .tab-size[data-tab-size="10"]{-moz-tab-size:10;-o-tab-size:10;tab-size:10}div#p>svg>foreignObject>section .tab-size[data-tab-size="11"]{-moz-tab-size:11;-o-tab-size:11;tab-size:11}div#p>svg>foreignObject>section .tab-size[data-tab-size="12"]{-moz-tab-size:12;-o-tab-size:12;tab-size:12}div#p>svg>foreignObject>section .task-list-item{list-style-type:none}div#p>svg>foreignObject>section .task-list-item+.task-list-item{margin-top:3px}div#p>svg>foreignObject>section .task-list-item input{margin:0 .2em .25em -1.6em;vertical-align:middle}div#p>svg>foreignObject>section .hljs{display:block;background:#fff;padding:.5em;color:#333;overflow-x:auto}div#p>svg>foreignObject>section .hljs-comment,div#p>svg>foreignObject>section .hljs-meta{color:#969896}div#p>svg>foreignObject>section .hljs-emphasis,div#p>svg>foreignObject>section .hljs-quote,div#p>svg>foreignObject>section .hljs-strong,div#p>svg>foreignObject>section .hljs-template-variable,div#p>svg>foreignObject>section .hljs-variable{color:#df5000}div#p>svg>foreignObject>section .hljs-keyword,div#p>svg>foreignObject>section .hljs-selector-tag,div#p>svg>foreignObject>section .hljs-type{color:#d73a49}div#p>svg>foreignObject>section .hljs-attribute,div#p>svg>foreignObject>section .hljs-bullet,div#p>svg>foreignObject>section .hljs-literal,div#p>svg>foreignObject>section .hljs-symbol{color:#0086b3}div#p>svg>foreignObject>section .hljs-name,div#p>svg>foreignObject>section .hljs-section{color:#63a35c}div#p>svg>foreignObject>section .hljs-tag{color:#333}div#p>svg>foreignObject>section .hljs-attr,div#p>svg>foreignObject>section .hljs-selector-attr,div#p>svg>foreignObject>section .hljs-selector-class,div#p>svg>foreignObject>section .hljs-selector-id,div#p>svg>foreignObject>section .hljs-selector-pseudo,div#p>svg>foreignObject>section .hljs-title{color:#6f42c1}div#p>svg>foreignObject>section .hljs-addition{color:#55a532;background-color:#eaffea}div#p>svg>foreignObject>section .hljs-deletion{color:#bd2c00;background-color:#ffecec}div#p>svg>foreignObject>section .hljs-link{text-decoration:underline}div#p>svg>foreignObject>section .hljs-number{color:#005cc5}div#p>svg>foreignObject>section .hljs-string{color:#032f62}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{max-height:563px}div#p>svg>foreignObject>section h1{color:#246;font-size:1.6em}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2{border-bottom:none}div#p>svg>foreignObject>section h2{font-size:1.3em}div#p>svg>foreignObject>section h3{font-size:1.1em}div#p>svg>foreignObject>section h4{font-size:1.05em}div#p>svg>foreignObject>section h5{font-size:1em}div#p>svg>foreignObject>section h6{font-size:.9em}div#p>svg>foreignObject>section h1 strong,div#p>svg>foreignObject>section h2 strong,div#p>svg>foreignObject>section h3 strong,div#p>svg>foreignObject>section h4 strong,div#p>svg>foreignObject>section h5 strong,div#p>svg>foreignObject>section h6 strong{font-weight:inherit;color:#48c}div#p>svg>foreignObject>section hr{height:0;padding-top:.25em}div#p>svg>foreignObject>section pre{border:1px solid #999;line-height:1.15;overflow:visible}div#p>svg>foreignObject>section pre code svg[data-marp-fitting=svg]{max-height:529px}div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header{margin:0;position:absolute;left:30px;color:hsla(0,0%,40%,.75);font-size:18px}div#p>svg>foreignObject>section header{top:21px}div#p>svg>foreignObject>section footer{bottom:21px}div#p>svg>foreignObject>section{align-items:stretch;background:#fff;display:flex;flex-direction:column;flex-wrap:nowrap;font-size:29px;height:720px;justify-content:center;padding:78.5px;width:1280px}div#p>svg>foreignObject>section>:last-child,div#p>svg>foreignObject>section[data-footer]>:nth-last-child(2){margin-bottom:0}div#p>svg>foreignObject>section>:first-child,div#p>svg>foreignObject>section>header:first-child+*{margin-top:0}div#p>svg>foreignObject>section:after{position:absolute;padding:0;right:30px;bottom:21px;font-size:24px;color:#777}div#p>svg>foreignObject>section.invert{background-color:#222;color:#e6eaf0}div#p>svg>foreignObject>section.invert:after{color:#999}div#p>svg>foreignObject>section.invert img{background-color:transparent}div#p>svg>foreignObject>section.invert a{color:#50b3ff}div#p>svg>foreignObject>section.invert h1{color:#a3c5e7}div#p>svg>foreignObject>section.invert h2,div#p>svg>foreignObject>section.invert h3,div#p>svg>foreignObject>section.invert h4,div#p>svg>foreignObject>section.invert h5{color:#ebeff5}div#p>svg>foreignObject>section.invert blockquote,div#p>svg>foreignObject>section.invert h6{border-color:#3d3f43;color:#939699}div#p>svg>foreignObject>section.invert h1 strong,div#p>svg>foreignObject>section.invert h2 strong,div#p>svg>foreignObject>section.invert h3 strong,div#p>svg>foreignObject>section.invert h4 strong,div#p>svg>foreignObject>section.invert h5 strong,div#p>svg>foreignObject>section.invert h6 strong{color:#7bf}div#p>svg>foreignObject>section.invert hr{background-color:#3d3f43}div#p>svg>foreignObject>section.invert footer,div#p>svg>foreignObject>section.invert header{color:hsla(0,0%,60%,.75)}div#p>svg>foreignObject>section.invert code,div#p>svg>foreignObject>section.invert kbd{background-color:#111}div#p>svg>foreignObject>section.invert kbd{border-color:#666;box-shadow:inset 0 -1px 0 #555;color:#e6eaf0}div#p>svg>foreignObject>section.invert table tr{background-color:#12181d;border-color:#60657b}div#p>svg>foreignObject>section.invert table tr:nth-child(2n){background-color:#1b2024}div#p>svg>foreignObject>section.invert table td,div#p>svg>foreignObject>section.invert table th{border-color:#5b5e61}div#p>svg>foreignObject>section.invert pre{background-color:#0a0e12;border-color:#777}div#p>svg>foreignObject>section.invert pre code{background-color:transparent}div#p>svg>foreignObject>section[data-color] h1,div#p>svg>foreignObject>section[data-color] h2,div#p>svg>foreignObject>section[data-color] h3,div#p>svg>foreignObject>section[data-color] h4,div#p>svg>foreignObject>section[data-color] h5,div#p>svg>foreignObject>section[data-color] h6{color:currentColor}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{display:block;height:auto;width:100%}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{position:static}}div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{content:""}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{position:relative}}div#p>svg>foreignObject>section [data-marp-fitting-svg-content]{display:table;white-space:nowrap}div#p>svg>foreignObject>section [data-marp-fitting-svg-content-wrap]{white-space:pre}div#p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}
/* @theme teaching */@font-face{font-family:"et-book";src:url("../et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");src:url("../et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"),url("../et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"),url("../et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"),url("../et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:"et-book";src:url("../et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");src:url("../et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"),url("../et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"),url("../et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"),url("../et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg");font-weight:normal;font-style:italic}@font-face{font-family:"et-book";src:url("../et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");src:url("../et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"),url("../et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"),url("../et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"),url("../et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg");font-weight:bold;font-style:normal}div#p>svg>foreignObject>section{--inside-width:660px;--inside-height:887px;background-image:url('https://raw.githubusercontent.com/eyssette/teaching-theme-for-marp/master/assets/bg_t.png');background-size:cover;width:960px;height:720px;font-family:Helvetica;margin:0;padding:0;font-size:calc(var(--inside-width) * 7/100)}div#p>svg>foreignObject>section.partie p,div#p>svg>foreignObject>section.souspartie p,div#p>svg>foreignObject>section.titre p,div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2{text-align:center;margin:0;padding:0}div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4,div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section p{text-align:left;margin-left:38px;margin-right:36px;padding-left:30px;padding-right:30px}div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4{margin-bottom:0.5em}div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section p,div#p>svg>foreignObject>section ul{text-align:justify;line-height:1.3em}div#p>svg>foreignObject>section a{color:#0E83B5}div#p>svg>foreignObject>section table{padding-left:60px;padding-right:60px}div#p>svg>foreignObject>section table td,div#p>svg>foreignObject>section table th,div#p>svg>foreignObject>section table tr{background-color:white;border:none}div#p>svg>foreignObject>section table th{border-bottom:3px solid black;padding-bottom:15px}div#p>svg>foreignObject>section table td{border-bottom:1px solid grey}
/* Changer la taille de police */div#p>svg>foreignObject>section.fpppppppppppp{font-size:3.02rem!important}div#p>svg>foreignObject>section.fppppppppppp{font-size:2.96rem!important}div#p>svg>foreignObject>section.fpppppppppp{font-size:2.89rem!important}div#p>svg>foreignObject>section.fppppppppp{font-size:2.82rem!important}div#p>svg>foreignObject>section.fpppppppp{font-size:2.75rem!important}div#p>svg>foreignObject>section.fppppppp{font-size:2.68rem!important}div#p>svg>foreignObject>section.fpppppp{font-size:2.61rem!important}div#p>svg>foreignObject>section.fppppp{font-size:2.54rem!important}div#p>svg>foreignObject>section.fpppp{font-size:2.47rem!important}div#p>svg>foreignObject>section.fppp{font-size:2.40rem!important}div#p>svg>foreignObject>section.fppp{font-size:2.33rem!important}div#p>svg>foreignObject>section.fpp{font-size:2.24rem!important}div#p>svg>foreignObject>section.fp{font-size:2.17rem!important}div#p>svg>foreignObject>section.f{font-size:2.10rem!important}div#p>svg>foreignObject>section.fm{font-size:2.03rem!important}div#p>svg>foreignObject>section.fmm{font-size:1.94rem!important}div#p>svg>foreignObject>section.fmmm{font-size:1.87rem!important}div#p>svg>foreignObject>section.fmmmm{font-size:1.80rem!important}div#p>svg>foreignObject>section.fmmmmm{font-size:1.73rem!important}div#p>svg>foreignObject>section.fmmmmmm{font-size:1.66rem!important}div#p>svg>foreignObject>section.fmmmmmmm{font-size:1.59rem!important}div#p>svg>foreignObject>section.fmmmmmmmm{font-size:1.52rem!important}div#p>svg>foreignObject>section.fmmmmmmmmm{font-size:1.45rem!important}div#p>svg>foreignObject>section.fmmmmmmmmmm{font-size:1.38rem!important}div#p>svg>foreignObject>section.fmmmmmmmmmmm{font-size:1.31rem!important}div#p>svg>foreignObject>section.fmmmmmmmmmmmm{font-size:1.24rem!important}div#p>svg>foreignObject>section.fmmmmmmmmmmmmm{font-size:1.17rem!important}div#p>svg>foreignObject>section.fmmmmmmmmmmmmmm{font-size:1.10rem!important}
/* Diapositives en pleine page */div#p>svg>foreignObject>section.cinema,div#p>svg>foreignObject>section.citationC,div#p>svg>foreignObject>section.citationL,div#p>svg>foreignObject>section.citationM1,div#p>svg>foreignObject>section.citationM2,div#p>svg>foreignObject>section.pleinepage,div#p>svg>foreignObject>section.pp{background:none;background-color:white}
/* PAGINATION */div#p>svg>foreignObject>section:after{position:absolute;color:white;font-size:14px;margin-right:-20px;margin-bottom:-12px}div#p>svg>foreignObject>section.cinema:after,div#p>svg>foreignObject>section.citationC:after,div#p>svg>foreignObject>section.citationL:after,div#p>svg>foreignObject>section.citationM1:after,div#p>svg>foreignObject>section.citationM2:after,div#p>svg>foreignObject>section.pleinepage:after,div#p>svg>foreignObject>section.pp:after{color:black}
/* Utilisation des puces pour les questions, et style des listes ordonnées */div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section ul{margin-top:0.5em;margin-left:38px;margin-right:36px;padding:15px 30px}div#p>svg>foreignObject>section ul{background-color:#00000009;list-style-type:none}div#p>svg>foreignObject>section ol{margin-left:38px;padding-left:78px}div#p>svg>foreignObject>section ul li{padding-left:1.5em}div#p>svg>foreignObject>section ul li:before{display:inline-block;content:"➢";width:1.5em;margin-left:-1.5em}div#p>svg>foreignObject>section ol ul,div#p>svg>foreignObject>section ul ul{list-style-type:none;list-style-type:circle;background:unset;margin:0;padding:0;padding-top:10px;padding-left:2em;font-size:0.95em}div#p>svg>foreignObject>section ol ul li,div#p>svg>foreignObject>section ul ul li{padding-left:0.2em}div#p>svg>foreignObject>section ol ul li:before,div#p>svg>foreignObject>section ul ul li:before{content:""}div#p>svg>foreignObject>section ol~ul,div#p>svg>foreignObject>section p~ol{margin-top:-0.25em}
/* Utilisation des puces dans un bloc div marqué par la classe .puces */div#p>svg>foreignObject>section div.puces ul{padding-left:1.8em;background-color:inherit}div#p>svg>foreignObject>section div.puces ul li{padding-left:0.2em;list-style-type:disc}div#p>svg>foreignObject>section div.puces ul ul{}div#p>svg>foreignObject>section div.puces ul ul li{list-style-type:circle}div#p>svg>foreignObject>section div.puces ul li:before{content:none}
/* Centrer certains éléments */div#p>svg>foreignObject>section.centrertitre h3,div#p>svg>foreignObject>section.centrertitre h4{text-align:center;margin-bottom:1em}div#p>svg>foreignObject>section.centrerquestion ul{text-align:center}
/* Dispositions en grille */div#p>svg>foreignObject>section.cinema,div#p>svg>foreignObject>section.citationL,div#p>svg>foreignObject>section.citationM1,div#p>svg>foreignObject>section.citationM2,div#p>svg>foreignObject>section.partie,div#p>svg>foreignObject>section.tableau,div#p>svg>foreignObject>section.titre{display:grid;grid-gap:0px;align-items:center}
/* DIAPOSITIVE “TITRE” */div#p>svg>foreignObject>section.titre{--title-height:470px;--subtitle-height:130px;background-image:url('https://raw.githubusercontent.com/eyssette/teaching-theme-for-marp/master/assets/bg-titre_t.png');grid-template-rows:30px var(--title-height) 12px var(--subtitle-height) 88px ;grid-template-columns:37px 887px 37px;grid-template-areas:". . ." ". title ." ". . ." ". subtitle ." ". . ."}div#p>svg>foreignObject>section.titre h1{color:#75140C;grid-area:title;line-height:1.2em;padding-left:40px;padding-right:40px;font-size:calc(var(--title-height) * 0.2)}div#p>svg>foreignObject>section.titre p{grid-area:subtitle;margin:0;padding:0;font-size:calc(var(--subtitle-height) * 0.35);text-align:center;line-height:1.2em}
/* DIAPOSITIVE “PARTIE” */div#p>svg>foreignObject>section.partie{--partie-title-height:565px;--partie-subtitle-height:70px;background-image:url('https://raw.githubusercontent.com/eyssette/teaching-theme-for-marp/master/assets/bg-titre-partie_t.png')!important;background-size:cover!important;grid-template-rows:30px var(--partie-title-height) 10px var(--partie-subtitle-height) 45px ;grid-template-columns:37px 887px 37px;grid-template-areas:". . ." ". title ." ". . ." ". subtitle ." ". . ."}div#p>svg>foreignObject>section.partie h1{color:black;grid-area:title;padding-left:70px;padding-right:70px;padding-bottom:30px;font-size:calc(var(--partie-title-height) * 0.2)}div#p>svg>foreignObject>section.partie p{grid-area:subtitle;color:white;font-weight:bold;text-transform:uppercase;font-size:120%}
/* DIAPOSITIVE “SOUS-PARTIE” */div#p>svg>foreignObject>section.souspartie h1{display:none}div#p>svg>foreignObject>section.souspartie h2{background:#00000009;padding:50px 80px;border-top:1px solid #333333;border-bottom:1px solid #333333;margin-bottom:40px;line-height:1.3em;font-size:180%}
/* DIAPOSITIVE “ETAPE” */div#p>svg>foreignObject>section.etape h3{text-align:center;border-bottom:3px solid black;padding-bottom:40px}div#p>svg>foreignObject>section.etape p{text-align:center}
/* DIAPOSITIVE “POINT MÉTHODE” */div#p>svg>foreignObject>section.pointmethode{font-size:3rem}div#p>svg>foreignObject>section.pointmethode h3{color:#48742C;text-align:center;margin-bottom:80px;font-size:180%}div#p>svg>foreignObject>section.pointmethode ol,div#p>svg>foreignObject>section.pointmethode p,div#p>svg>foreignObject>section.pointmethode ul{background-color:#E9EFE1;margin-left:38px;margin-right:36px;padding:40px 1em;line-height:1.4em;margin-bottom:0;margin-top:-30px}div#p>svg>foreignObject>section.pointmethode ul{list-style-type:circle;padding-left:1.8em}div#p>svg>foreignObject>section.pointmethode ol{padding-left:2em}div#p>svg>foreignObject>section.pointmethode ul li{padding-left:0.2em}div#p>svg>foreignObject>section.pointmethode ul li:before{content:none}
/* ANNONCE DU POINT MÉTHODE */div#p>svg>foreignObject>section.pm:before{content:"[PM]";font-size:25px!important;color:#48742C;position:absolute;top:40px;right:45px;font-family:'Times New Roman',Times,serif}div#p>svg>foreignObject>section.pp.pm:before{top:10px;right:15px}
/* DIAPOSITIVE “DÉFINITION” */div#p>svg>foreignObject>section.definition{padding-bottom:20px}div#p>svg>foreignObject>section.definition h3{text-align:center;font-size:180%}div#p>svg>foreignObject>section.definition ol,div#p>svg>foreignObject>section.definition p,div#p>svg>foreignObject>section.definition ul{border:rgb(24,33,117) 4px solid;border-radius:40px;margin-left:70px;margin-right:70px;padding-top:20px;padding-bottom:20px;margin-bottom:40px}div#p>svg>foreignObject>section.definition ul li:before{content:"•"!important;color:rgb(24,33,117)}div#p>svg>foreignObject>section.definition strong{color:rgb(14,23,107);font-weight:400}
/* GESTION DES CITATIONS */div#p>svg>foreignObject>section blockquote{color:black;font-family:"ETBembo","et-book","Minion Pro","Times New Roman";border:none;background-color:#00000009;padding:20px;border-radius:15px}div#p>svg>foreignObject>section blockquote p{margin:0;padding:0;line-height:1.25em}div#p>svg>foreignObject>section blockquote blockquote{margin:0;padding:0;padding-top:0.75em;background-color:unset!important;font-size:97%}div#p>svg>foreignObject>section blockquote blockquote strong{font-variant:small-caps;font-weight:normal}
/* Diapositive “Citation Longue”*/div#p>svg>foreignObject>section.citationL{grid-template-rows:20px 680px 20px ;grid-template-columns:20px 920px 20px;grid-template-areas:". . ." ". citation ." ". . .";font-size:1.7rem}div#p>svg>foreignObject>section.citationL blockquote{grid-area:citation}
/* Diapositive “Citation Moyenne” – M1 */div#p>svg>foreignObject>section.citationM1,div#p>svg>foreignObject>section.citationM2{grid-template-rows:20px 680px 20px ;grid-template-areas:". . . . ." ". image . citation ." ". . . . .";font-size:2rem}div#p>svg>foreignObject>section.citationM1{grid-template-columns:20px 1fr 25px 2fr 20px}div#p>svg>foreignObject>section.citationM2{grid-template-columns:20px 1fr 25px 3.5fr 20px}div#p>svg>foreignObject>section.citationM1 blockquote,div#p>svg>foreignObject>section.citationM2 blockquote{grid-area:citation}div#p>svg>foreignObject>section.citationM1 p,div#p>svg>foreignObject>section.citationM2 p{grid-area:image;margin:0;padding:0}div#p>svg>foreignObject>section.citationM1 img{padding-bottom:40px}div#p>svg>foreignObject>section.citationM2 img{padding-bottom:100px}
/* Diapositive “Citation Courte” */div#p>svg>foreignObject>section.citationC blockquote{margin-left:20px;margin-right:20px}
/* DIAPOSITIVE “EN-TÊTE” */div#p>svg>foreignObject>section.entete h3{text-align:center;font-size:120%;background-color:#00000009;font-weight:normal;padding-top:30px;padding-bottom:10px;margin-bottom:10px;width:880px}div#p>svg>foreignObject>section.entete ul{padding-left:1em;padding-right:1em;margin-top:-20px}div#p>svg>foreignObject>section.entete ol{padding-left:2.5em;padding-right:1em}div#p>svg>foreignObject>section.entete{display:grid;grid-template-rows:130px ;grid-template-areas:"titre" "." "." "." ".";align-items:center;grid-gap:0px}div#p>svg>foreignObject>section.entete h3{grid-area:titre}
/* Diapositives “En-tête” : Lecture / Approfondissement */div#p>svg>foreignObject>section.entete.approfondissement,div#p>svg>foreignObject>section.entete.lecture{font-size:3rem}div#p>svg>foreignObject>section.entete.lecture h3:before{content:"\01F4D6";padding-right:1em}div#p>svg>foreignObject>section.entete.approfondissement h3:before{content:"\01F9D7 \01F3FD \0200D \02640 \0FE0F";padding-right:1em}
/* Diapositives “En-tête” : Discussion / Travail en groupe */div#p>svg>foreignObject>section.entete.approfondissement,div#p>svg>foreignObject>section.entete.lecture{font-size:2.5rem}div#p>svg>foreignObject>section.entete.discussion h3:before{content:"\01F5E3";padding-right:1em}div#p>svg>foreignObject>section.entete.groupe h3:before{content:"\01F465 \01F465";padding-right:1em}
/* DIAPOSITIVES “CINEMA” : Affiche + résumé */div#p>svg>foreignObject>section.cinema{grid-template-rows:20px 680px 20px ;grid-template-columns:1fr 25px 1fr 20px;grid-template-areas:"image . . ." "image . resume ." "image . . .";margin:0;padding:0;font-size:1.4rem}div#p>svg>foreignObject>section.cinema p{grid-area:image;margin:0;padding:0}div#p>svg>foreignObject>section.cinema p img{height:730px;width:100%;margin:0;padding:0;object-fit:cover}div#p>svg>foreignObject>section.cinema blockquote{grid-area:resume;margin:0}
/* DIAPOSITIVES “QCM” */div#p>svg>foreignObject>section.qcm{font-size:2rem;padding-top:90px}div#p>svg>foreignObject>section.qcm:before{content:"\02753 ";top:40px;left:45%;position:absolute;font-size:80px}div#p>svg>foreignObject>section.qcm ol{list-style-type:upper-alpha;margin-top:0}div#p>svg>foreignObject>section.qcm ol li{padding-left:0.2em}div#p>svg>foreignObject>section.qcm ol li:before{content:""}div#p>svg>foreignObject>section.qcm ol li strong{color:green}
/* DIAPOSITIVES “EXERCICE TABLEAU” */div#p>svg>foreignObject>section.exercice.tableau{font-size:2.3em;display:grid;grid-gap:0px;grid-template-columns:41px 881px 38px;grid-template-areas:". . ." ". haut ." ". bas ." ". . .";align-items:center}div#p>svg>foreignObject>section.exercice.tableau table{grid-area:haut;padding-left:20px;padding-right:20px;padding-top:30px}div#p>svg>foreignObject>section.exercice.tableau table td{color:#08200e8c;width:420px}div#p>svg>foreignObject>section.exercice.tableau ol{grid-area:bas;margin:0;padding:20px;background-color:#00000009;text-align:left}div#p>svg>foreignObject>section.exercice.tableau ol li{display:inline;counter-increment:listCounter;padding-left:1em}div#p>svg>foreignObject>section.exercice.tableau ol li:before{content:'(' counter(listCounter) ') ';color:grey;margin-right:-0.2em}div#p>svg>foreignObject>section.exercice.tableau-r table td em{color:grey;font-style:normal;font-size:0.9em}div#p>svg>foreignObject>section.exercice.tableau-r table td em:before{content:"("}div#p>svg>foreignObject>section.exercice.tableau-r table td em:after{content:")"}
/* Exercice “Tableau” avec les réponses en colonnes */div#p>svg>foreignObject>section.exercice.tableau.colonnes{font-size:1.7em}div#p>svg>foreignObject>section.exercice.tableau.colonnes ol{font-size:90%;display:flex;flex-direction:column;flex-wrap:wrap;max-width:400px;margin-left:10px;padding:0}div#p>svg>foreignObject>section.exercice.tableau.colonnes ol li{background-color:#00000009;margin:0;padding:10px}div#p>svg>foreignObject>section.exercice.tableau.colonnes ol{height:400px!important;max-width:430px;background-color:transparent!important}div#p>svg>foreignObject>section.exercice.tableau.colonnes table{margin-bottom:10px}
/* DIAPOSITIVE “EXERCICE D'ARGUMENTATION" */div#p>svg>foreignObject>section.exercice.argumentation{font-size:2.3rem}div#p>svg>foreignObject>section.exercice.argumentation:before{content:"Exercice d'argumentation";margin-bottom:50px;text-align:center;font-size:120%;font-weight:bold;width:100%}div#p>svg>foreignObject>section.exercice.argumentation ol{border:green 3px solid;list-style-type:none;margin-left:2.3em;margin-right:2.3em}div#p>svg>foreignObject>section.exercice.argumentation ol li{padding:0px;padding-top:20px;padding-bottom:20px;margin-left:-1.5em}div#p>svg>foreignObject>section.exercice.argumentation ol li:first-of-type:before{content:" \024B6";padding-right:35px}div#p>svg>foreignObject>section.exercice.argumentation ol li:nth-of-type(2):before{content:"Or : \024B7 ";padding-right:35px}div#p>svg>foreignObject>section.exercice.rgumentation ol li:nth-of-type(2){padding-bottom:45px;border-bottom:1px grey solid}div#p>svg>foreignObject>section.exercice.argumentation ol li:nth-of-type(3):before{content:"Donc : \024B8";padding-right:35px}div#p>svg>foreignObject>section.exercice.argumentation ol li:nth-of-type(3){padding-top:30px}
/* DIAPOSITIVE “EXERCICE D'APPLICATION" */div#p>svg>foreignObject>section.exercice.application{font-size:2rem}div#p>svg>foreignObject>section.exercice.application h3{text-align:center;font-size:120%}div#p>svg>foreignObject>section.exercice.application h3:before{content:"\0270E ";color:#19780d}div#p>svg>foreignObject>section.exercice.application ul{margin-bottom:0em}div#p>svg>foreignObject>section.exercice.application ol{margin-top:0}div#p>svg>foreignObject>section.exercice.application ol li{margin-top:0.1em;margin-left:1.5em}
/* MISE EN PAGE */
/* AVEC 1 IMAGE + 0 TEXTE */div#p>svg>foreignObject>section.i1.pp p,div#p>svg>foreignObject>section.i1t0.pp p{width:958px;height:716px;margin:0;padding:0}div#p>svg>foreignObject>section.i1 p img,div#p>svg>foreignObject>section.i1t0 p img{height:100%;width:100%;object-fit:contain}div#p>svg>foreignObject>section.i1:not(.pp) p,div#p>svg>foreignObject>section.i1t0:not(.pp) p{width:860px;height:644px;margin:auto;padding:0}
/* AVEC 1 IMAGE + 1 BLOC DE TEXTE */
/* Alignement vertical */div#p>svg>foreignObject>section.i1t1.vertical{display:grid;align-items:center;grid-template-areas:". . . " ". zone1 . " ". zone2 . " ". . . ";align-items:center;grid-gap:0.25em;padding-top:30px;padding-bottom:40px}div#p>svg>foreignObject>section.i1t1.vertical.pp{padding:0}div#p>svg>foreignObject>section.i1t1.vertical :first-child{grid-area:zone1;margin:0 auto;text-align:center}div#p>svg>foreignObject>section.i1t1.vertical p img{max-width:884px;max-height:555px;margin:0 auto;object-fit:contain}div#p>svg>foreignObject>section.i1t1.vertical.pp p img{max-width:956px;max-height:605px}div#p>svg>foreignObject>section.i1t1.vertical *~*{grid-area:zone2;margin:0 auto;text-align:center}div#p>svg>foreignObject>section.i1t1.vertical :first-child img{margin-bottom:-0.25em}div#p>svg>foreignObject>section.i1t1.vertical ol,div#p>svg>foreignObject>section.i1t1.vertical ul{padding:8px;margin:10px}
/* Alignement horizontal */div#p>svg>foreignObject>section.i1t1.horizontal{display:grid;align-items:center;grid-template-areas:". . ." "zone1 zone2 . " ". . . ";grid-gap:0px;padding-left:40px;padding-right:40px;font-size:2.3em}div#p>svg>foreignObject>section.i1t1.horizontal :first-child{grid-area:zone1;margin:2px;text-align:justify}div#p>svg>foreignObject>section.i1t1.horizontal *~*{grid-area:zone2;margin:0}div#p>svg>foreignObject>section.i1t1.horizontal *~ol,div#p>svg>foreignObject>section.i1t1.horizontal *~ul{padding:8px;margin-right:20px;text-align:left}div#p>svg>foreignObject>section.i1t1.horizontal:not(.pp) *~p{margin-left:-5px}div#p>svg>foreignObject>section.i1t1.horizontal p{text-align:center}div#p>svg>foreignObject>section.i1t1.horizontal img{object-fit:cover}div#p>svg>foreignObject>section.i1t1.horizontal :first-child img{width:460px;height:620px;margin-top:10px}div#p>svg>foreignObject>section.i1t1.horizontal :nth-child(2) img{height:500px}div#p>svg>foreignObject>section.i1t1.horizontal *~*{width:350px}div#p>svg>foreignObject>section.i1t1.horizontal.pp :first-child img{width:580px;height:680px;margin-top:10px}div#p>svg>foreignObject>section.i1t1.horizontal.pp :nth-child(2) img{height:580px}div#p>svg>foreignObject>section.i1t1.horizontal.pp *~*{width:370px}
/* AVEC 1 IMAGE + 2 BLOCS DE TEXTE */div#p>svg>foreignObject>section.i1t2{display:grid;grid-template-areas:"titre titre" "zone1 zone2";grid-gap:0px;font-size:2.2em;align-content:center;align-items:center}div#p>svg>foreignObject>section.i1t2 h1,div#p>svg>foreignObject>section.i1t2 h2{display:none}div#p>svg>foreignObject>section.i1t2 h3,div#p>svg>foreignObject>section.i1t2 h4{grid-area:titre;text-align:center;margin-bottom:30px;font-size:38px}div#p>svg>foreignObject>section.i1t2 :nth-child(2){grid-area:zone1;width:400px;margin:0;padding:0;margin-left:80px;text-align:justify}div#p>svg>foreignObject>section.i1t2 *~*~*{grid-area:zone2;width:400px;margin:0;padding:0;margin-right:80px;margin-left:40px;text-align:justify}div#p>svg>foreignObject>section.i1t2 img{width:410px;height:520px;object-fit:cover}div#p>svg>foreignObject>section.i1t2.pp section.i1t2 :nth-child(2){width:460px}div#p>svg>foreignObject>section.i1t2.pp *~*~*{width:460px}div#p>svg>foreignObject>section.i1t2.pp img{width:460px;height:580px}div#p>svg>foreignObject>section.i1t2.pp h3,div#p>svg>foreignObject>section.i1t2.pp h4{font-size:44px}
/* AVEC DEUX IMAGES */
/* Alignement horizontal */div#p>svg>foreignObject>section.i2t0,div#p>svg>foreignObject>section.i2t1{display:grid;grid-template-areas:"titre titre" "zone1 zone2";grid-gap:0px;font-size:2.2em;align-content:center;align-items:center}div#p>svg>foreignObject>section.i2t0 h1,div#p>svg>foreignObject>section.i2t0 h2,div#p>svg>foreignObject>section.i2t1 h1,div#p>svg>foreignObject>section.i2t1 h2{display:none}div#p>svg>foreignObject>section.i2t0 :nth-last-child(3),div#p>svg>foreignObject>section.i2t1 :nth-last-child(3){grid-area:titre;text-align:center}div#p>svg>foreignObject>section.i2t0 h3,div#p>svg>foreignObject>section.i2t0 h4,div#p>svg>foreignObject>section.i2t1 h3,div#p>svg>foreignObject>section.i2t1 h4{grid-area:titre;text-align:center;margin-bottom:30px;font-size:38px}div#p>svg>foreignObject>section.i2t0 p:nth-last-child(2),div#p>svg>foreignObject>section.i2t1 p:nth-last-child(2){grid-area:zone1;width:400px;height:520px;margin:0;padding:0;margin-left:70px}div#p>svg>foreignObject>section.i2t0 p:last-child,div#p>svg>foreignObject>section.i2t1 p:last-child{grid-area:zone2;width:400px;height:520px;margin:0;padding:0;margin-left:30px;margin-right:70px}div#p>svg>foreignObject>section.i2t0 img,div#p>svg>foreignObject>section.i2t1 img{width:400px;height:520px;object-fit:cover}div#p>svg>foreignObject>section.i2t0.pp img,div#p>svg>foreignObject>section.i2t1.pp img{width:450px;height:580px}div#p>svg>foreignObject>section.i2t0.pp p:last-child,div#p>svg>foreignObject>section.i2t0.pp p:nth-last-child(2),div#p>svg>foreignObject>section.i2t1.pp p:last-child,div#p>svg>foreignObject>section.i2t1.pp p:nth-last-child(2){width:450px;height:580px}div#p>svg>foreignObject>section.i2t0.pp h3,div#p>svg>foreignObject>section.i2t0.pp h4,div#p>svg>foreignObject>section.i2t1.pp h3,div#p>svg>foreignObject>section.i2t1.pp h4{font-size:44px}div#p>svg>foreignObject>section.i2t0 ul,div#p>svg>foreignObject>section.i2t1 ul{padding:8px}
/* rapprocher les deux images */div#p>svg>foreignObject>section.i2t0.rapprocher p:nth-child(2),div#p>svg>foreignObject>section.i2t1.rapprocher p:nth-child(2){margin-left:80px}div#p>svg>foreignObject>section.i2t0.rapprocher p:nth-child(3),div#p>svg>foreignObject>section.i2t1.rapprocher p:nth-child(3){margin-left:-40px}
/* Alignement vertical */div#p>svg>foreignObject>section.i2t0.vertical{grid-template-areas:"zone1" "zone2";grid-gap:10px}div#p>svg>foreignObject>section.i2t0.vertical p{height:310px;width:850px;margin:0;padding:0}div#p>svg>foreignObject>section.i2t0.vertical img{height:310px;width:850px}div#p>svg>foreignObject>section.i2t0.vertical.pp p{height:340px;width:900px;margin:0;padding:0}div#p>svg>foreignObject>section.i2t0.vertical.pp img{height:340px;width:900px}
/* AVEC 3 IMAGES + 0 BLOC DE TEXTE */
/* Alignement horizontal */div#p>svg>foreignObject>section.i3t0:not(.citationC) figure{margin-left:5px!important;margin-right:5px!important;margin-top:38px!important;margin-bottom:37px!important}div#p>svg>foreignObject>section.i3t0:not(.citationC) figure:first-child{margin-left:40px!important}div#p>svg>foreignObject>section.i3t0:not(.citationC) figure:last-child{margin-right:40px!important}
/* Alignement vertical */div#p>svg>foreignObject>section.i3t0.vertical:not(.citationC) figure{margin-top:2px!important;margin-bottom:2px!important;margin-left:37px!important;margin-right:37px!important}div#p>svg>foreignObject>section.i3t0.vertical:not(.citationC) figure:first-child{margin-top:40px!important}div#p>svg>foreignObject>section.i3t0.vertical:not(.citationC) figure:last-child{margin-bottom:40px!important}div#p>svg>foreignObject>section.i3t0.pp:not(.citationC) figure{margin-left:5px!important;margin-right:5px!important;margin-top:38px!important;margin-bottom:37px!important}div#p>svg>foreignObject>section.i3t0.pp.vertical:not(.citationC) figure{margin-top:2px!important;margin-bottom:2px!important;margin-left:37px!important;margin-right:37px!important}
/* AVEC 4 IMAGES */div#p>svg>foreignObject>section.i4t0{display:grid;grid-template-areas:"image1 image2" "image3 image4";grid-gap:10px;align-content:center;align-items:center;padding-top:15px}div#p>svg>foreignObject>section.i4t0 *{margin:0;padding:0}div#p>svg>foreignObject>section.i4t0 p:nth-child(3),div#p>svg>foreignObject>section.i4t0 p:nth-child(4){margin-top:-15px}div#p>svg>foreignObject>section.i4t0 img{width:430px;height:315px;object-fit:cover;margin:0;padding:0}div#p>svg>foreignObject>section.i4t0.pp img{width:460px;height:325px;object-fit:cover;margin:0;padding:0}
/* MISE EN PAGE COMPLEXE */div#p>svg>foreignObject>section.grille.quadrillage{
/*background-image: url('./images/quadrillage.png');*/background-image:url('https://i.ibb.co/RDz0HNP/quadrillage.png')}div#p>svg>foreignObject>section.grille{display:grid;grid-template-columns:repeat(96,1fr);grid-template-rows:repeat(72,1fr) ;margin:0;padding:0;padding-top:2px;padding-left:12px;font-size:2.5rem}div#p>svg>foreignObject>section.grille h1,div#p>svg>foreignObject>section.grille h2,div#p>svg>foreignObject>section.grille h3,div#p>svg>foreignObject>section.grille h4,div#p>svg>foreignObject>section.grille p{margin:0;padding:0}div#p>svg>foreignObject>section.grille p img{object-fit:cover;max-width:100%;max-height:100%}div#p>svg>foreignObject>section.grille h1,div#p>svg>foreignObject>section.grille h2,div#p>svg>foreignObject>section.grille h3,div#p>svg>foreignObject>section.grille h4{padding-top:20px;margin-bottom:0px}div#p>svg>foreignObject>section.grille ul{margin:0;padding:10px 0px 0px 0px}div#p>svg>foreignObject>section.grille ul li{padding-left:60px;padding-right:10px}
/* Redimensionner l'image pour qu'on la voit en entier dans le cadre */div#p>svg>foreignObject>section.contain p img{object-fit:contain!important}div#p>svg>foreignObject>section{width:960px;height:720px}div#p>svg>foreignObject>section[data-marpit-scope-wDuqth2O] ol{list-style-type:none}
/* La compilation via Github ne permet pas l'usage de la balise div, mais on peut l'utiliser en compilant sur son ordinateur */div#p>svg>foreignObject>section[data-marpit-scope-qaYNAZ9b] ul{padding-left:1.8em;background-color:inherit}div#p>svg>foreignObject>section[data-marpit-scope-qaYNAZ9b] ul li{padding-left:0.2em;list-style-type:disc}div#p>svg>foreignObject>section[data-marpit-scope-qaYNAZ9b] ul ul li{list-style-type:circle}div#p>svg>foreignObject>section[data-marpit-scope-qaYNAZ9b] ul li:before{content:none}div#p>svg>foreignObject>section[data-marpit-scope-EE0YW3Z7] p:first-child{padding-bottom:5px}div#p>svg>foreignObject>section[data-marpit-scope-wFpjU7ZU] img{height:510px}div#p>svg>foreignObject>section[data-marpit-scope-O6t53FUa] p:first-child img{object-position:0px -40px}div#p>svg>foreignObject>section[data-marpit-scope-BeZv1AJi] p:nth-child(2) img{object-position:0px -20px}div#p>svg>foreignObject>section[data-marpit-scope-ksa8jaJj] :first-child{font-size:inherit;grid-area:1/1/1/-1}div#p>svg>foreignObject>section[data-marpit-scope-ksa8jaJj] :nth-child(2){font-size:inherit;grid-area:1/1/-1/-1;display:none!important}div#p>svg>foreignObject>section[data-marpit-scope-ksa8jaJj] :nth-child(3){font-size:inherit;grid-area:1/1/-1/-1;display:none!important}div#p>svg>foreignObject>section[data-marpit-scope-ksa8jaJj] :nth-child(4){font-size:inherit;grid-area:1/1/-1/-1;display:none!important}div#p>svg>foreignObject>section[data-marpit-scope-ksa8jaJj] :nth-child(5){font-size:inherit;grid-area:1/1/-1/-1;display:none!important}div#p>svg>foreignObject>section[data-marpit-scope-Jx6n4jlU] :first-child{font-size:inherit;grid-area:7/6/25/-6}div#p>svg>foreignObject>section[data-marpit-scope-Jx6n4jlU] :nth-child(2){font-size:inherit;grid-area:32/6/-25/-6}div#p>svg>foreignObject>section[data-marpit-scope-Jx6n4jlU] :nth-child(3){font-size:29px;grid-area:32/22/-8/-6}div#p>svg>foreignObject>section[data-marpit-scope-Jx6n4jlU] :nth-child(4){font-size:inherit;grid-area:2/2/-2/-2;display:none!important}div#p>svg>foreignObject>section[data-marpit-scope-Jx6n4jlU] :nth-child(5){font-size:inherit;grid-area:2/2/-2/-2;display:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]{display:block!important;padding:0!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#p>svg>foreignObject>section[data-marpit-advanced-background=content],div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id="p"><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="1" data-paginate="true" data-class="titre" data-theme="teaching" class="titre" data-marpit-pagination="1" data-marpit-pagination-total="103" style="--paginate:true;--class:titre;--theme:teaching;" data-size="4:3">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>Utiliser Marp<br /> pour ses<br /> diaporamas </span></foreignObject></svg></h1>
<p>Cédric Eyssette (2019-2020)</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="2" data-paginate="true" data-theme="teaching" data-marpit-pagination="2" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<p><a href="https://marp.app/">Marp</a> est un outil qui permet de créer un diaporama à partir d'un fichier texte, écrit avec une syntaxe très simple.</p>
<p>Cela permet de se concentrer sur le contenu, sans avoir à gérer le positionnement, le redimensionnement des éléments et des polices de caractère, grâce à des modèles de diapositives déjà définis.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="3" data-paginate="true" data-class="fppppppppp" data-theme="teaching" class="fppppppppp" data-marpit-pagination="3" data-marpit-pagination-total="103" style="--paginate:true;--class:fppppppppp;--theme:teaching;" data-size="4:3">
<p>Pour écrire un diaporama avec Marp, il faut :</p>
<ol>
<li>Connaître la syntaxe <a href="https://github.com/YannHY/cours/blob/master/Markdown/Apprendre%20le%20Markdown.md">Markown</a> (c'est très simple),</li>
<li>Savoir convertir son fichier en PDF ou en fichier html avec <a href="https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode">Marp for VS Code</a> ou <a href="https://github.com/marp-team/marp-cli">Marp CLI</a>
<ul>
<li>Une solution plus simple, mais pour le moment moins complète : <a href="https://web.marp.app/">Marp web</a></li>
</ul>
</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="4" data-marpit-scope-wDuqth2O="" data-paginate="true" data-theme="teaching" data-marpit-pagination="4" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<p>Ce diaporama a été créé avec ce système et sert à en illustrer les fonctionnalités :</p>
<ol>
<li>I – Organiser son diaporama</li>
<li>II – Construire son cours</li>
<li>III – Intégrer des exercices</li>
<li>IV – Gérer la mise en page</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="5" data-paginate="true" data-class="partie" data-theme="teaching" class="partie" data-marpit-pagination="5" data-marpit-pagination-total="103" style="--paginate:true;--class:partie;--theme:teaching;" data-size="4:3">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>I – Organiser <br />son diaporama </span></foreignObject></svg></h1>
<p>Première partie</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="6" data-paginate="true" data-theme="teaching" data-marpit-pagination="6" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<p>Pour faire une partie, une sous-partie, ou une étape, il suffit d'utiliser les codes suivants :</p>
<ol>
<li><code><!-- _class: partie --> </code></li>
<li><code><!-- _class: souspartie --></code></li>
<li><code><!-- _class: etape --></code></li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="7" data-paginate="true" data-class="fppppppp" data-theme="teaching" class="fppppppp" data-marpit-pagination="7" data-marpit-pagination-total="103" style="--paginate:true;--class:fppppppp;--theme:teaching;" data-size="4:3">
<p>Pour les parties, on utilise un titre de niveau 1 (<code>#</code>), pour les sous-parties, un titre de niveau 2 (<code>##</code>), et pour les étapes, un titre de niveau 3 (<code>###</code>).</p>
<p>Si on veut que le titre occupe le maximum de place sur la diapositive, on ajoute, après le titre : <code><!-- fit --></code>. On peut utiliser <code><br></code>pour forcer le passage à la ligne.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="8" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="8" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>A. Faire une sous‑partie <br />(niveau 2) </span></foreignObject></svg></h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="9" data-paginate="true" data-class="etape" data-theme="teaching" class="etape" data-marpit-pagination="9" data-marpit-pagination-total="103" style="--paginate:true;--class:etape;--theme:teaching;" data-size="4:3">
<h3>1/ Etape (niveau 3)</h3>
<p>On utilise la classe <code>etape</code><br />
si on souhaite la faire<br />
apparaître en pleine page</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="10" data-paginate="true" data-theme="teaching" data-marpit-pagination="10" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<h3>2/ Étape (niveau 3)</h3>
<p>Le titre d'une étape de niveau 3 peut être intégré dans une diapositive avec du contenu, si on le souhaite.</p>
<p>Dans ce cas, on n'utilise pas de code particulier, on définit simplement un titre de niveau 3 en markdown : <code>### Titre</code></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="11" data-paginate="true" data-class="partie" data-theme="teaching" class="partie" data-marpit-pagination="11" data-marpit-pagination-total="103" style="--paginate:true;--class:partie;--theme:teaching;" data-size="4:3">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>II – Construire <br />son cours </span></foreignObject></svg></h1>
<p>Deuxième partie</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="12" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="12" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Explications et questions</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="13" data-paginate="true" data-theme="teaching" data-marpit-pagination="13" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<p>On écrit son texte normalement, sans code particulier, pour faire un paragraphe simple</p>
<p>Pour intégrer une question que l'on veut poser aux élèves, on utilise une puce : <code>- </code> qui s'affichera ainsi :</p>
<ul>
<li>Question posée aux élèves : ………… ?</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="14" data-marpit-scope-qaYNAZ9b="" data-paginate="true" data-class="puces" data-theme="teaching" class="puces" data-marpit-pagination="14" data-marpit-pagination-total="103" style="--paginate:true;--class:puces;--theme:teaching;" data-size="4:3">
<p>Pour utiliser les puces ordinaires, on encadre les puces avec la balise <code><div class="puces"></div></code></p>
<ul>
<li>puce ordinaire
<ul>
<li>puce ordinaire</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="15" data-marpit-fragments="4" data-paginate="true" data-class="fmmmmmmm centrerquestion" data-theme="teaching" class="fmmmmmmm centrerquestion" data-marpit-pagination="15" data-marpit-pagination-total="103" style="--paginate:true;--class:fmmmmmmm centrerquestion;--theme:teaching;" data-size="4:3">
<p>Comme il y a beaucoup de contenu dans cette diapositive (c'est déconseillé <img class="emoji" draggable="false" alt="😄" src="https://twemoji.maxcdn.com/2/svg/1f604.svg" data-marp-twemoji=""/>), on peut réduire la taille de la police de caractère avec la class <code>f</code>(pour “font”) et on ajoute une série de “m” pour avoir une police <em>moins</em> grande, ou une série de “p” pour avoir une police <em>plus</em> grande. Ici la classe utilisée est : <code>fmmmmmmm</code></p>
<p><strong>Trois remarques</strong> :</p>
<ol>
<li data-marpit-fragment="1">On peut faire apparaître progressivement du contenu dans des listes ordonnées en écrivant <code>1)</code>, <code>2)</code>, … plutôt que <code>1.</code>, <code>2.</code>, ….</li>
<li data-marpit-fragment="2">Cela ne marche bien sûr que pour l'export en HTML : le fichier PDF affichera la diapositive complète.</li>
<li data-marpit-fragment="3">On peut utiliser cet affichage progressif également pour les “puces” ordinaires, qui sont utilisées, dans ce modèle, pour afficher des questions posées aux élèves. On écrit alors <code>* </code> plutôt que <code>-</code>.</li>
</ol>
<ul>
<li data-marpit-fragment="4">Est-ce suffisament clair ?</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="16" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="16" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Point méthode</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="17" data-paginate="true" data-class="pm" data-theme="teaching" class="pm" data-marpit-pagination="17" data-marpit-pagination-total="103" style="--paginate:true;--class:pm;--theme:teaching;" data-size="4:3">
<p>On peut annoncer un point méthode avec la classe <code>pm</code> : le sigle [PM] s'affiche dans le coin en haut à droite.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="18" data-paginate="true" data-class="pointmethode" data-theme="teaching" class="pointmethode" data-marpit-pagination="18" data-marpit-pagination-total="103" style="--paginate:true;--class:pointmethode;--theme:teaching;" data-size="4:3">
<h3>Point méthode</h3>
<p>Les points méthodes sont définis par la classe <code>pointmethode</code></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="19" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="19" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Définition</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="20" data-paginate="true" data-class="definition fppppppp" data-theme="teaching" class="definition fppppppp" data-marpit-pagination="20" data-marpit-pagination-total="103" style="--paginate:true;--class:definition fppppppp;--theme:teaching;" data-size="4:3">
<h3>Définition</h3>
<ul>
<li>Le but de cet encadré est de formuler explicitement la <strong>définition</strong> d'un terme, mais on pourrait bien sûr imaginer d'autres usages.</li>
<li>Pour créer une diapositive de ce type, on utilise la classe <code>definition</code></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="21" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="21" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Citations</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="22" data-paginate="true" data-class="etape fpp" data-theme="teaching" class="etape fpp" data-marpit-pagination="22" data-marpit-pagination-total="103" style="--paginate:true;--class:etape fpp;--theme:teaching;" data-size="4:3">
<h3>Citation longue</h3>
<p>Les citations longues s'affichent<br />
en pleine page, sans image</p>
<p>On utilise la classe <code>citationL</code>, et la syntaxe<br />
Markdown pour les citations (<code>></code>).</p>
<p>La syntaxe pour le gras (<code>**Auteur**</code>) est<br />
utilisée ici pour les petites majuscules.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="23" data-paginate="true" data-class="citationL" data-theme="teaching" class="citationL" data-marpit-pagination="23" data-marpit-pagination-total="103" style="--paginate:true;--class:citationL;--theme:teaching;" data-size="4:3">
<blockquote>
<p>« Peu de créatures humaines accepteraient d'être changées en animaux inférieurs sur la promesse de la plus large ration de plaisirs de bêtes ; aucun être humain intelligent ne consentirait à être un imbécile, aucun homme instruit à être un ignorant, […] même s'ils avaient la conviction que l'imbécile, l'ignorant […] sont, avec leurs lots respectifs, plus complètement satisfaits qu'eux-mêmes avec le leur. [...] Un être pourvu de facultés supérieures demande plus pour être heureux, est probablement exposé à souffrir de façon plus aiguë, et offre certainement à la souffrance plus de points vulnérables qu'un être de type inférieur, mais en dépit de ces risques, il ne peut jamais souhaiter réellement tomber à un niveau d'existence qu'il sent inférieur. Nous pouvons donner de cette répugnance le nom qu'il nous plaira [...] mais si on veut l'appeler de son vrai nom, c'est un sens de la dignité que tous les êtres humains possèdent, sous une forme ou sous une autre, et qui correspond – de façon nullement rigoureuse d'ailleurs – au développement de leurs facultés supérieures. [...] Il vaut mieux être un homme insatisfait qu'un porc satisfait ; il vaut mieux être Socrate insatisfait qu'un imbécile satisfait. »</p>
<blockquote>
<p>John Stuart <strong>Mill</strong>, <em>L'Utilitarisme</em></p>
</blockquote>
</blockquote>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="24" data-paginate="true" data-class="etape fppp" data-theme="teaching" class="etape fppp" data-marpit-pagination="24" data-marpit-pagination-total="103" style="--paginate:true;--class:etape fppp;--theme:teaching;" data-size="4:3">
<h3>Citation de taille moyenne</h3>
<p>Les citations de taille moyenne intègrent<br />
une image (auteur ou couverture du livre).</p>
<p>On utilise la classe <code>citationM1</code> ou <code>citationM2</code><br />
selon la taille du texte, et la syntaxe<br />
Markdown pour les images <code>![](URL)</code></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="25" data-paginate="true" data-class="citationM1" data-theme="teaching" class="citationM1" data-marpit-pagination="25" data-marpit-pagination-total="103" style="--paginate:true;--class:citationM1;--theme:teaching;" data-size="4:3">
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Jean-Jacques_Rousseau_%28painted_portrait%29.jpg/860px-Jean-Jacques_Rousseau_%28painted_portrait%29.jpg" alt="" /></p>
<blockquote>
<p>« [L]a pitié, disposition convenable à des êtres aussi faibles, et sujets à autant de maux que nous le sommes [est une] vertu d’autant plus universelle et d’autant plus utile à l’homme qu’elle précède en lui l’usage de toute réflexion, et si naturelle que les bêtes mêmes en donnent quelquefois des signes sensibles. […] [D]e cette seule qualité découlent toutes les vertus sociales […] la générosité, la clémence, l’humanité »</p>
<blockquote>
<p><strong>Rousseau</strong>, <em>Discours sur l’origine et les fondements de l’inégalité parmi les hommes</em>, I</p>
</blockquote>
</blockquote>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="26" data-paginate="true" data-class="citationM2" data-theme="teaching" class="citationM2" data-marpit-pagination="26" data-marpit-pagination-total="103" style="--paginate:true;--class:citationM2;--theme:teaching;" data-size="4:3">
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Jean-Jacques_Rousseau_%28painted_portrait%29.jpg/860px-Jean-Jacques_Rousseau_%28painted_portrait%29.jpg" alt="" /></p>
<blockquote>
<p>« [L]a pitié, disposition convenable à des êtres aussi faibles, et sujets à autant de maux que nous le sommes [est une] vertu d’autant plus universelle et d’autant plus utile à l’homme qu’elle précède en lui l’usage de toute réflexion, et si naturelle que les bêtes mêmes en donnent quelquefois des signes sensibles. […] [D]e cette seule qualité découlent toutes les vertus sociales […] la générosité, la clémence, l’humanité »</p>
<blockquote>
<p><strong>Rousseau</strong>, <em>Discours sur l’origine et les fondements de l’inégalité parmi les hommes</em>, I</p>
</blockquote>
</blockquote>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="27" data-paginate="true" data-class="etape fpppppp" data-theme="teaching" class="etape fpppppp" data-marpit-pagination="27" data-marpit-pagination-total="103" style="--paginate:true;--class:etape fpppppp;--theme:teaching;" data-size="4:3">
<h3>Citation courte</h3>
<p>On utilise la classe <code>citationC</code>.</p>
<p>Pour l'image, on utilise la syntaxe<br />
Mardown <code>![bg left:40%](URL)</code><br />
pour mettre l'image à gauche<br />
(on peut régler le pourcentage)</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section data-paginate="true" data-class="citationC" data-theme="teaching" class="citationC" data-marpit-pagination="28" data-marpit-pagination-total="103" style="--paginate:true;--class:citationC;--theme:teaching;--marpit-advanced-background-split:40%;" data-size="4:3" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://upload.wikimedia.org/wikipedia/commons/e/ea/Spinoza.jpg");"></figure></div></section></foreignObject><foreignObject width="60%" height="720" x="40%"><section id="28" data-paginate="true" data-class="citationC" data-theme="teaching" class="citationC" data-marpit-pagination="28" data-marpit-pagination-total="103" style="--paginate:true;--class:citationC;--theme:teaching;--marpit-advanced-background-split:40%;" data-size="4:3" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
<blockquote>
<p>« Les hommes sont conscients de leurs désirs et ignorants des causes qui les déterminent ! »</p>
<blockquote>
<p><strong>Spinoza</strong>, <em>Lettre 58 à Schuller</em></p>
</blockquote>
</blockquote>
</section>
</foreignObject><foreignObject width="960" height="720" data-marpit-advanced-background="pseudo"><section class="citationC" style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="28" data-marpit-pagination-total="103" data-size="4:3"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="29" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="29" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Lectures et approfondissement</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="30" data-paginate="true" data-class="entete lecture fppp" data-theme="teaching" class="entete lecture fppp" data-marpit-pagination="30" data-marpit-pagination-total="103" style="--paginate:true;--class:entete lecture fppp;--theme:teaching;" data-size="4:3">
<h3>Lectures</h3>
<p>On utilise la classe <code>entete</code> pour faire apparaître le titre de niveau 3 en haut avec un fond grisé, et on ajoute <code>lecture</code> si on souhaite faire apparaître l'icône “livre”.<br />
Une liste ordonnée peut être utile ici pour indiquer les lectures à faire :</p>
<ol>
<li>Première lecture possible</li>
<li>Deuxième lecture possible</li>
<li>...</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="31" data-paginate="true" data-class="entete approfondissement fppppppp" data-theme="teaching" class="entete approfondissement fppppppp" data-marpit-pagination="31" data-marpit-pagination-total="103" style="--paginate:true;--class:entete approfondissement fppppppp;--theme:teaching;" data-size="4:3">
<h3>Pour aller plus loin</h3>
<p>On utilise à nouveau la classe <code>entete</code>.</p>
<p>On ajoute <code>approfondissement</code> si on souhaite faire apparaître l'icône “escalade”.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="32" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="32" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Usage du cinéma : affiche + résumé</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="33" data-paginate="true" data-class="fppppppp" data-theme="teaching" class="fppppppp" data-marpit-pagination="33" data-marpit-pagination-total="103" style="--paginate:true;--class:fppppppp;--theme:teaching;" data-size="4:3">
<p>On utilise la classe <code>cinema</code>.</p>
<p>Pour l'image (affiche ou photogramme), on utilise la syntaxe Markdown <code>![](URL)</code>. Pour le résumé, on utilise la syntaxe pour les citations <code>></code>.</p>
<p>On peut également faire en sorte que l'image soit cliquable pour renvoyer vers une vidéo en ligne : <code>[![](URL-image)](URL-vidéo-en-ligne)</code></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="34" data-paginate="true" data-class="cinema fmmmmmmmmmm" data-theme="teaching" class="cinema fmmmmmmmmmm" data-marpit-pagination="34" data-marpit-pagination-total="103" style="--paginate:true;--class:cinema fmmmmmmmmmm;--theme:teaching;" data-size="4:3">
<p><a href="https://safeYouTube.net/w/kg3J"><img src="https://raw.githubusercontent.com/eyssette/marp-slides/master/slides/images/scarface.png" alt="" /></a></p>
<blockquote>
<p>« Antonio “Tony” Montana (Al Pacino) […] est un petit malfrat cubain qui migre vers Miami dans l'espoir de faire fortune. Il trouve au départ un petit boulot dans une baraque à frites de Miami. Mais travailler pour quelques dollars ne correspond pas à l'idée qu'il se fait du « rêve américain ». Il se fait alors embaucher par un malfrat local puis par Frank Lopez, son patron]. […] Tony apprend vite le métier de mafioso de la drogue : il monte en grade […] Il a les dents beaucoup plus longues que ses collègues, il est mégalomane, ambitieux et d'une intelligence plus perverse. Il prend pour adage : <em>The World is Yours</em> (Le monde est à toi) [...] Mais il commence à faire des erreurs dans ce monde qui ne pardonne pas, où l'on est vite remplacé. Il prend conscience que d'être arrivé au sommet de la mafia ne le rend pas aussi heureux qu'il l'avait espéré, qu'il n'est pas capable de rendre heureuses les personnes qu'il aime » (source : <a href="https://fr.wikipedia.org/wiki/American_History_X">wikipedia</a>)</p>
</blockquote>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="35" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="35" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Images, schémas, photogrammes</h2>
<p>Voir la partie IV pour la mise en page</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="36" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="36" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Tableaux récapitulatifs</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="37" data-paginate="true" data-class="fpppppp" data-theme="teaching" class="fpppppp" data-marpit-pagination="37" data-marpit-pagination-total="103" style="--paginate:true;--class:fpppppp;--theme:teaching;" data-size="4:3">
<p>On utilise la syntaxe Markdown pour les tableaux. Il faudra généralement diminuer la taille de la police.</p>
<p>Si on veut faire apparaître progressivement le contenu du tableau (avec l'export HTML), on peut utiliser la syntaxe : <code><div data-marpit-fragment>Texte</div></code> dans chaque cellule.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="38" data-paginate="true" data-class="fmmmmmm" data-theme="teaching" class="fmmmmmm" data-marpit-pagination="38" data-marpit-pagination-total="103" style="--paginate:true;--class:fmmmmmm;--theme:teaching;" data-size="4:3">
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:center">Pertinence</th>
<th style="text-align:center">Limites</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong>Relativisme culturel</strong></td>
<td style="text-align:center">Paragraphe explicatif. Paragraphe explicatif. Paragraphe explicatif.</td>
<td style="text-align:center">Paragraphe explicatif. Paragraphe explicatif. Paragraphe explicatif.</td>
</tr>
<tr>
<td style="text-align:left"><strong>Morale de la<br />sensibilité</strong></td>
<td style="text-align:center">Paragraphe explicatif. Paragraphe explicatif. Paragraphe explicatif.</td>
<td style="text-align:center">Paragraphe explicatif. Paragraphe explicatif. Paragraphe explicatif.</td>
</tr>
<tr>
<td style="text-align:left"><strong>Morale des<br /> conséquences</strong></td>
<td style="text-align:center">Paragraphe explicatif. Paragraphe explicatif. Paragraphe explicatif.</td>
<td style="text-align:center">Paragraphe explicatif. Paragraphe explicatif. Paragraphe explicatif.</td>
</tr>
<tr>
<td style="text-align:left"><strong>Morale des<br /> principes</strong></td>
<td style="text-align:center">Paragraphe explicatif. Paragraphe explicatif. Paragraphe explicatif.</td>
<td style="text-align:center">Paragraphe explicatif. Paragraphe explicatif. Paragraphe explicatif.</td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="39" data-paginate="true" data-class="partie" data-theme="teaching" class="partie" data-marpit-pagination="39" data-marpit-pagination-total="103" style="--paginate:true;--class:partie;--theme:teaching;" data-size="4:3">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>III – Intégrer <br />des exercices </span></foreignObject></svg></h1>
<p>Troisième partie</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="40" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="40" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Exercice type :<br /> QCM</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="41" data-paginate="true" data-class="fpppppppp" data-theme="teaching" class="fpppppppp" data-marpit-pagination="41" data-marpit-pagination-total="103" style="--paginate:true;--class:fpppppppp;--theme:teaching;" data-size="4:3">
<p>On utilise la classe <code>qcm</code>. L'icône “question” est automatiquement intégrée.</p>
<p>Pour poser la question, on utilise une puce <code>-</code>, et une liste ordonnée <code>1.</code>, <code>2.</code>… pour les propositions.</p>
<p>Pour la correction, on copie-colle la diapositive, et on indique la réponse en utilisant la syntaxe pour le gras : <code>**réponse**</code>.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="42" data-paginate="true" data-class="qcm" data-theme="teaching" class="qcm" data-marpit-pagination="42" data-marpit-pagination-total="103" style="--paginate:true;--class:qcm;--theme:teaching;" data-size="4:3">
<ul>
<li>Comment peut-on distinguer le bonheur du plaisir ?</li>
</ul>
<ol>
<li>Le bonheur est un état de satisfaction partiel qui provient d’un jugement sur la vie en général</li>
<li>Le bonheur est un état de satisfaction global, et non pas durable</li>
<li>Le bonheur est un état de satisfaction durable causé par un fait particulier</li>
<li>Le bonheur est un état de satisfaction global qui provient d’un jugement sur la vie en général</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="43" data-paginate="true" data-class="qcm" data-theme="teaching" class="qcm" data-marpit-pagination="43" data-marpit-pagination-total="103" style="--paginate:true;--class:qcm;--theme:teaching;" data-size="4:3">
<ul>
<li>Comment peut-on distinguer le bonheur du plaisir ?</li>
</ul>
<ol>
<li>Le bonheur est un état de satisfaction partiel qui provient d’un jugement sur la vie en général</li>
<li>Le bonheur est un état de satisfaction global, et non pas durable</li>
<li>Le bonheur est un état de satisfaction durable causé par un fait particulier</li>
<li><strong>Le bonheur est un état de satisfaction global qui provient d’un jugement sur la vie en général</strong></li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="44" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="44" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Exercice type : tableau de distinctions</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="45" data-paginate="true" data-class="fppp" data-theme="teaching" class="fppp" data-marpit-pagination="45" data-marpit-pagination-total="103" style="--paginate:true;--class:fppp;--theme:teaching;" data-size="4:3">
<p>On utilise la classe <code>exercice tableau</code>, la syntaxe Markdown pour le tableau, et une liste ordonnée <code>1.</code>, <code>2.</code>, … pour les propositions de réponses.</p>
<p>Pour la correction, on crée une autre diapositive, on copie-colle le tableau, et on inscrit les propositions au bon endroit. On utilise la classe <code>exercice tableau-r</code> pour cette diapositive.</p>
<p>On peut décider de garder les numéros des propositions : il faut alors utiliser la syntaxe pour l'italique (<code>_1_</code>ou <code>*1*</code>), afin de les faire apparaître en grisé.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="46" data-paginate="true" data-class="etape" data-theme="teaching" class="etape" data-marpit-pagination="46" data-marpit-pagination-total="103" style="--paginate:true;--class:etape;--theme:teaching;" data-size="4:3">
<h3>1) Tableau simple</h3>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="47" data-paginate="true" data-class="exercice tableau" data-theme="teaching" class="exercice tableau" data-marpit-pagination="47" data-marpit-pagination-total="103" style="--paginate:true;--class:exercice tableau;--theme:teaching;" data-size="4:3">
<table>
<thead>
<tr>
<th style="text-align:center">Le bonheur est un état de satisfaction …</th>
<th style="text-align:center">Le plaisir est un état de satisfaction …</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">?</td>
<td style="text-align:center">?</td>
</tr>
<tr>
<td style="text-align:center">?</td>
<td style="text-align:center">?</td>
</tr>
<tr>
<td style="text-align:center">?</td>
<td style="text-align:center">?</td>
</tr>
</tbody>
</table>
<ol>
<li>qui provient d’un jugement général sur la vie</li>
<li>durable</li>
<li>global</li>
<li>éphémère</li>
<li>partiel</li>
<li>qui provient d’un fait particulier</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="48" data-paginate="true" data-class="exercice tableau-r fpppp" data-theme="teaching" class="exercice tableau-r fpppp" data-marpit-pagination="48" data-marpit-pagination-total="103" style="--paginate:true;--class:exercice tableau-r fpppp;--theme:teaching;" data-size="4:3">
<table>
<thead>
<tr>
<th style="text-align:center">Le bonheur est un état de satisfaction <br />…</th>
<th style="text-align:center">Le plaisir est un état de satisfaction <br />…</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><em>3</em> global</td>
<td style="text-align:center"><em>5</em> partiel</td>
</tr>
<tr>
<td style="text-align:center"><em>2</em> durable</td>
<td style="text-align:center"><em>4</em> éphémère</td>
</tr>
<tr>
<td style="text-align:center"><em>1</em> qui provient d’un <br />jugement général<br /> sur la vie</td>
<td style="text-align:center"><em>6</em> qui provient d’un<br /> fait particulier</td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="49" data-paginate="true" data-class="etape fpppp" data-theme="teaching" class="etape fpppp" data-marpit-pagination="49" data-marpit-pagination-total="103" style="--paginate:true;--class:etape fpppp;--theme:teaching;" data-size="4:3">
<h3>2) Tableau avec propositions de réponse en deux colonnes</h3>
<p>Si le tableau est complexe, on peut disposer les propositions de réponse en colonnes : on ajoute simplement la classe <code>colonnes</code></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="50" data-paginate="true" data-class="exercice tableau colonnes" data-theme="teaching" class="exercice tableau colonnes" data-marpit-pagination="50" data-marpit-pagination-total="103" style="--paginate:true;--class:exercice tableau colonnes;--theme:teaching;" data-size="4:3">
<table>
<thead>
<tr>
<th style="text-align:center">La contrainte</th>
<th style="text-align:center">L'obligation</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">?</td>
<td style="text-align:center">?</td>
</tr>
<tr>
<td style="text-align:center">?</td>
<td style="text-align:center">?</td>
</tr>
<tr>
<td style="text-align:center">?</td>
<td style="text-align:center">?</td>
</tr>
</tbody>
</table>
<ol>
<li>Exemple : la menace (« je dois lui donner mon argent ») ; l'arbre sur la route (« je dois faire demi-tour »)</li>
<li>Elle réside dans la conscience intérieure</li>
<li>Exemple : le médecin face à son patient (« je dois lui dire la vérité »)</li>
<li>Les autres options ne sont pas rationnellement envisageables (pas réalisables ou bien trop risquées ou coûteuses pour moi)</li>
<li>Elle réside dans un élément extérieur</li>
<li>Les autres options ne sont pas acceptables du point de vue de certaines valeurs ou normes sociales, juridiques, morales</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="51" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="51" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Exercice type : argumentation</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="52" data-paginate="true" data-class="fppppppppp" data-theme="teaching" class="fppppppppp" data-marpit-pagination="52" data-marpit-pagination-total="103" style="--paginate:true;--class:fppppppppp;--theme:teaching;" data-size="4:3">
<p>Le but de ce type d'exercice est soit de trouver la prémisse intermédiaire qui permet de parvenir à une conclusion, soit la conclusion que l'on peut déduire de deux prémisses.</p>
<p>Pour cette diapositive, on utilise la classe <code>exercice argumentation</code>, et une liste ordonnée pour les deux prémisses et la conclusion.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="53" data-paginate="true" data-class="exercice argumentation fppppppp" data-theme="teaching" class="exercice argumentation fppppppp" data-marpit-pagination="53" data-marpit-pagination-total="103" style="--paginate:true;--class:exercice argumentation fppppppp;--theme:teaching;" data-size="4:3">
<ol>
<li>Le désir est un état de manque</li>
<li>………………………………</li>
<li>Désirer, c'est souffrir</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="54" data-paginate="true" data-class="exercice argumentation" data-theme="teaching" class="exercice argumentation" data-marpit-pagination="54" data-marpit-pagination-total="103" style="--paginate:true;--class:exercice argumentation;--theme:teaching;" data-size="4:3">
<ol>
<li>Le bonheur est un idéal, non de la raison, mais de l'imagination</li>
<li>L'imagination produit des images vagues et non des concepts précis et déterminés</li>
<li>………………………………</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="55" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="55" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Exercice type : Application des connaissances</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="56" data-paginate="true" data-class="fppppp" data-theme="teaching" class="fppppp" data-marpit-pagination="56" data-marpit-pagination-total="103" style="--paginate:true;--class:fppppp;--theme:teaching;" data-size="4:3">
<p>Les exercices d'application sont des exercices de rédaction (un paragraphe).</p>
<p>Pour cette diapositive, on utilise la classe <code>exercice application</code>, un titre de niveau 3 (<code>###</code>), une puce pour la question (<code>-</code>), et une liste ordonnée pour les propositions de sujet (<code>1.</code>, <code>2.</code>, …).</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="57" data-paginate="true" data-class="exercice application" data-theme="teaching" class="exercice application" data-marpit-pagination="57" data-marpit-pagination-total="103" style="--paginate:true;--class:exercice application;--theme:teaching;" data-size="4:3">
<h3>Exercice : application des connaissances</h3>
<ul>
<li>Rédiger un paragraphe (150 mots minimum), qui répond à l'un de ces sujets, avec un argument qui mobilise le cours sur le stoïcisme :</li>
</ul>
<ol>
<li>Le désir nous rend-il aveugle ?</li>
<li>Est-il raisonnable de lutter contre le temps ?</li>
<li>Le bonheur dépend-il de nous ?</li>
<li>La réflexion est-elle un obstacle au bonheur ?</li>
<li>Le bonheur se trouve-t-il dans le plaisir ?</li>
<li>Le bonheur peut-il s’apprendre ?</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="58" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="58" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Exercice type : discussion</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="59" data-paginate="true" data-class="entete discussion" data-theme="teaching" class="entete discussion" data-marpit-pagination="59" data-marpit-pagination-total="103" style="--paginate:true;--class:entete discussion;--theme:teaching;" data-size="4:3">
<h3>Discussion</h3>
<p><br />On utilise la classe <code>entete</code> et on ajoute <code>discussion</code> si on souhaite faire apparaître l'icône associée à ce type d'exercice.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="60" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="60" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>Exercice type : travaux de groupe</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="61" data-paginate="true" data-class="entete groupe" data-theme="teaching" class="entete groupe" data-marpit-pagination="61" data-marpit-pagination-total="103" style="--paginate:true;--class:entete groupe;--theme:teaching;" data-size="4:3">
<h3>Travail en groupe</h3>
<p><br />On utilise la classe <code>entete</code> et on ajoute <code>groupe</code> si on souhaite faire apparaître l'icône associée à ce type d'exercice.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="62" data-paginate="true" data-class="partie" data-theme="teaching" class="partie" data-marpit-pagination="62" data-marpit-pagination-total="103" style="--paginate:true;--class:partie;--theme:teaching;" data-size="4:3">
<h1>IV – Mises <br />en page</h1>
<p>Quatrième partie</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="63" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="63" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>A. Avec une image</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="64" data-paginate="true" data-class="etape fppppppp" data-theme="teaching" class="etape fppppppp" data-marpit-pagination="64" data-marpit-pagination-total="103" style="--paginate:true;--class:etape fppppppp;--theme:teaching;" data-size="4:3">
<h3>1) Une image, sans texte</h3>
<p>On utilise la classe <code>i1t0</code><br />
(image : 1 / texte : 0)</p>
<p>On ajoute <code>pp</code>si on veut utiliser<br />
le mode pleine page</p>
<p>L'image se redimensionne automatiquement pour occuper le maximum de place sur la diapositive</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="65" data-paginate="true" data-class="i1t0 pp" data-theme="teaching" class="i1t0 pp" data-marpit-pagination="65" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t0 pp;--theme:teaching;" data-size="4:3">
<p><img src="https://i.ibb.co/DbydYNJ/plan.png" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="66" data-paginate="true" data-class="i1t0 pp" data-theme="teaching" class="i1t0 pp" data-marpit-pagination="66" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t0 pp;--theme:teaching;" data-size="4:3">
<p><img src="https://i.ibb.co/RP9jppt/Platon-Aristote.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="67" data-paginate="true" data-class="i1t0" data-theme="teaching" class="i1t0" data-marpit-pagination="67" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t0;--theme:teaching;" data-size="4:3">
<p><img src="https://i.ibb.co/DbydYNJ/plan.png" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="68" data-paginate="true" data-class="i1t0" data-theme="teaching" class="i1t0" data-marpit-pagination="68" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t0;--theme:teaching;" data-size="4:3">
<p><img src="https://i.ibb.co/RP9jppt/Platon-Aristote.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="69" data-paginate="true" data-class="etape fmmmmm" data-theme="teaching" class="etape fmmmmm" data-marpit-pagination="69" data-marpit-pagination-total="103" style="--paginate:true;--class:etape fmmmmm;--theme:teaching;" data-size="4:3">
<h3><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>2) Une image + un bloc de texte </span></foreignObject></svg></h3>
<p>On utilise la classe <code>i1t1 vertical</code> pour un alignement vertical, ou la classe <code>i1t1 horizontal</code> pour un alignement horizontal.</p>
<p>La disposition (en haut ou en bas, à gauche ou à droite)<br />
dépend de l'ordre dans lequel vous avez placé l'image<br />
et le texte dans votre fichier en Markdown.</p>
<p>On peut ajouter <code>pp</code> pour avoir un affichage en pleine page.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="70" data-paginate="true" data-class="i1t1 vertical" data-theme="teaching" class="i1t1 vertical" data-marpit-pagination="70" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 vertical;--theme:teaching;" data-size="4:3">
<p><img src="https://pbs.twimg.com/media/ETu0VirWoAgwlqs.jpg" alt="" /></p>
<p>Un extrait de Minority Report <a href="https://drive.google.com/file/d/10Rz6T-5OkkDlnwSzHse2SnyMd7ZiT-HF/view?usp=sharing">+</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="71" data-marpit-scope-EE0YW3Z7="" data-paginate="true" data-class="i1t1 vertical" data-theme="teaching" class="i1t1 vertical" data-marpit-pagination="71" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 vertical;--theme:teaching;" data-size="4:3">
<p>Platon : le mythe d'Aristophane</p>
<p><img src="https://vignette.wikia.nocookie.net/lettresantiques/images/7/78/Clivage-de-landrogyne.jpg/revision/latest?cb=20141118131404&path-prefix=fr" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="72" data-paginate="true" data-class="i1t1 vertical fmmmmmmmm" data-theme="teaching" class="i1t1 vertical fmmmmmmmm" data-marpit-pagination="72" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 vertical fmmmmmmmm;--theme:teaching;" data-size="4:3">
<p><img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Caravaggio_incredulity.jpg" alt="" /></p>
<ul>
<li>Comment peut-on chercher à prouver la vérité d'un jugement de fait ?</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="73" data-paginate="true" data-class="i1t1 vertical" data-theme="teaching" class="i1t1 vertical" data-marpit-pagination="73" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 vertical;--theme:teaching;" data-size="4:3">
<p><img src="https://i.ibb.co/DbydYNJ/plan.png" alt="" /></p>
<p>Plan du cours</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="74" data-paginate="true" data-class="i1t1 vertical pp" data-theme="teaching" class="i1t1 vertical pp" data-marpit-pagination="74" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 vertical pp;--theme:teaching;" data-size="4:3">
<p>Plan du cours</p>
<p><img src="https://i.ibb.co/DbydYNJ/plan.png" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="75" data-paginate="true" data-class="i1t1 vertical pp" data-theme="teaching" class="i1t1 vertical pp" data-marpit-pagination="75" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 vertical pp;--theme:teaching;" data-size="4:3">
<p><img src="https://i.ibb.co/RP9jppt/Platon-Aristote.jpg" alt="" /></p>
<p>Platon et Aristote</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="76" data-paginate="true" data-theme="teaching" data-marpit-pagination="76" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<p>En cas d'alignement vertical, le bloc de texte est conçu pour ne pas être très grand (une ou deux lignes).</p>
<p>Si on souhaite avoir une image plus petite, on peut le faire en transformant le style de mise en page seulement pour cette diapositive :</p>
<p><code> <style scoped> section img {height:510px;} </style></code></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="77" data-marpit-scope-wFpjU7ZU="" data-paginate="true" data-class="i1t1 vertical pp fmmmm" data-theme="teaching" class="i1t1 vertical pp fmmmm" data-marpit-pagination="77" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 vertical pp fmmmm;--theme:teaching;" data-size="4:3">
<p><img src="https://www.tate.org.uk/art/images/work/T/T07/T07573_9.jpg" alt="" /></p>
<ul>
<li>Pourquoi cet objet ne semble-t-il pas, à première vue, être une œuvre d’art ? Qu’attendons-nous d’une œuvre d’art ?</li>
<li>Quel est, à votre avis, le sens du geste de Duchamp ? Que cherche-t-il à faire ?</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="78" data-paginate="true" data-class="i1t1 horizontal" data-theme="teaching" class="i1t1 horizontal" data-marpit-pagination="78" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 horizontal;--theme:teaching;" data-size="4:3">
<p><img src="https://i.ibb.co/RP9jppt/Platon-Aristote.jpg" alt="" /></p>
<p>Platon et Aristote : détail de la fresque <em>L'école d'Athènes</em></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="79" data-paginate="true" data-class="i1t1 horizontal fppppppp" data-theme="teaching" class="i1t1 horizontal fppppppp" data-marpit-pagination="79" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 horizontal fppppppp;--theme:teaching;" data-size="4:3">
<p><img src="https://cdn.pixabay.com/photo/2015/04/06/19/56/boy-709943_1280.jpg" alt="" /></p>
<ul>
<li>Manger du chocolat, est-ce le bonheur ?</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="80" data-paginate="true" data-class="i1t1 horizontal pp contain" data-theme="teaching" class="i1t1 horizontal pp contain" data-marpit-pagination="80" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t1 horizontal pp contain;--theme:teaching;" data-size="4:3">
<p>Par défaut, l'image est zoomée pour correspondre au cadre prédéfini.<br /><br />
Si on souhaite que l'image soit redimensionnée automatiquement pour qu'on puisse la voir dans son intégralité, on ajoute la classe <code>contain</code></p>
<p><img src="https://i.ibb.co/RP9jppt/Platon-Aristote.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="81" data-paginate="true" data-class="etape fpp" data-theme="teaching" class="etape fpp" data-marpit-pagination="81" data-marpit-pagination-total="103" style="--paginate:true;--class:etape fpp;--theme:teaching;" data-size="4:3">
<h3>3) Une image + deux <br />blocs de texte</h3>
<p>On utilise la classe <code>i1t2</code>, un titre de<br />
niveau 3 (<code>### Titre</code>), et un bloc de texte,<br />
qui se positionne automatiquement à droite<br />
ou à gauche selon l'ordre par rapport à<br />
l'image dans le fichier Markdown.</p>
<p>On peut ajouter <code>pp</code>pour un<br />
affichage en pleine page.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="82" data-paginate="true" data-class="i1t2" data-theme="teaching" class="i1t2" data-marpit-pagination="82" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t2;--theme:teaching;" data-size="4:3">
<h3>Raphaël, <em>L'École d'Athènes</em></h3>
<p>L'École d'Athènes est une fresque du peintre italien Raphaël, qui présente les figures majeures de la pensée antique.</p>
<p><img src="https://i.ibb.co/RP9jppt/Platon-Aristote.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="83" data-paginate="true" data-class="i1t2 fm" data-theme="teaching" class="i1t2 fm" data-marpit-pagination="83" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t2 fm;--theme:teaching;" data-size="4:3">
<h3>Raphaël, <em>L'École d'Athènes</em></h3>
<p><img src="https://i.ibb.co/RP9jppt/Platon-Aristote.jpg" alt="" /></p>
<p>L'École d'Athènes est une fresque du peintre italien Raphaël, qui présente les figures majeures de la pensée antique.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="84" data-paginate="true" data-class="i1t2 pp" data-theme="teaching" class="i1t2 pp" data-marpit-pagination="84" data-marpit-pagination-total="103" style="--paginate:true;--class:i1t2 pp;--theme:teaching;" data-size="4:3">
<h3>Raphaël, <em>L'École d'Athènes</em></h3>
<p>L'École d'Athènes est une fresque du peintre italien Raphaël, qui présente les figures majeures de la pensée antique.</p>
<p><img src="https://i.ibb.co/RP9jppt/Platon-Aristote.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="85" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="85" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>B. Avec deux images</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="86" data-paginate="true" data-class="etape" data-theme="teaching" class="etape" data-marpit-pagination="86" data-marpit-pagination-total="103" style="--paginate:true;--class:etape;--theme:teaching;" data-size="4:3">
<h3>1) Deux images : alignement horizontal</h3>
<p>On utilise la classe <code>i2t0</code> (aucun texte) ou <code>i2t1</code> (titre en haut).<br />
Par défaut l'alignement est horizontal.</p>
<p>On ajoute <code>pp</code>si on veut un<br />
affichage en pleine page.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="87" data-paginate="true" data-class="i2t0" data-theme="teaching" class="i2t0" data-marpit-pagination="87" data-marpit-pagination-total="103" style="--paginate:true;--class:i2t0;--theme:teaching;" data-size="4:3">
<h3>Platon et Aristote</h3>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Raffael_067.jpg" alt="" /></p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Raffael_061.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="88" data-paginate="true" data-class="i2t1 rapprocher contain fmmmmm" data-theme="teaching" class="i2t1 rapprocher contain fmmmmm" data-marpit-pagination="88" data-marpit-pagination-total="103" style="--paginate:true;--class:i2t1 rapprocher contain fmmmmm;--theme:teaching;" data-size="4:3">
<ul>
<li>Que peut-on dire à propos de la question du déterminisme biologique en l’état actuel de nos connaissances ?</li>
</ul>
<p><img src="https://static.fnac-static.com/multimedia/images_produits/ZoomPE/4/5/4/9782738115454/tsp20130828140529/Existe-t-il-des-genes-du-comportement.jpg" alt="" /></p>
<p><img src="https://images-na.ssl-images-amazon.com/images/I/51Anet6cFzL._SX328_BO1,204,203,200_.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="89" data-paginate="true" data-class="etape" data-theme="teaching" class="etape" data-marpit-pagination="89" data-marpit-pagination-total="103" style="--paginate:true;--class:etape;--theme:teaching;" data-size="4:3">
<h3>1) Deux images : alignement vertical</h3>
<p>On utilise la classe : <code>i2t0</code>,<br />
et on ajoute <code>vertical</code>si on veut un alignement vertical des deux images.</p>
<p>On ajoute <code>pp</code> pour<br />
l'affichage en pleine page.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="90" data-paginate="true" data-class="fppp" data-theme="teaching" class="fppp" data-marpit-pagination="90" data-marpit-pagination-total="103" style="--paginate:true;--class:fppp;--theme:teaching;" data-size="4:3">
<p>On peut décaler la zone affichée de l'image en changeant le style de la diapositive.</p>
<p><br />Par exemple :</p>
<p><code><style scoped> p:nth-child(1) img {object-position:0px -40px} </style></code></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="91" data-marpit-scope-O6t53FUa="" data-paginate="true" data-class="i2t0 vertical pp" data-theme="teaching" class="i2t0 vertical pp" data-marpit-pagination="91" data-marpit-pagination-total="103" style="--paginate:true;--class:i2t0 vertical pp;--theme:teaching;" data-size="4:3">
<p><img src="https://usbeketrica.com/media/1972/download/5b51b6806d0e2.jpg?v=1&inline=1" alt="" /></p>
<p><img src="https://pbs.twimg.com/media/ETu0VirWoAgwlqs.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="92" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="92" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>C. Avec trois images</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="93" data-paginate="true" data-class="fppp" data-theme="teaching" class="fppp" data-marpit-pagination="93" data-marpit-pagination-total="103" style="--paginate:true;--class:fppp;--theme:teaching;" data-size="4:3">
<p>On utilise la classe <code>i3t0</code> et la syntaxe <code>![bg contain](URL)</code> pour les trois images.</p>
<p>On ajoute la classe <code>pp</code> pour un affichage en pleine page.</p>
<p>Pour un alignement vertical, on utilise la même syntaxe, sauf pour la première image, où l'on met : <code>![bg contain vertical](URL)</code>.</p>
<p>On peut supprimer le mot clé <code>contain</code> : l'image sera alors zoomée pour correspondre automatiquement au cadre prédéfini.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section data-paginate="true" data-class="i3t0" data-theme="teaching" class="i3t0" data-marpit-pagination="94" data-marpit-pagination-total="103" style="--paginate:true;--class:i3t0;--theme:teaching;" data-size="4:3" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://fr.web.img5.acsta.net/medias/nmedia/18/83/23/81/19672460.jpg");background-size:contain;"></figure><figure style="background-image:url("https://cenicienta.fr/wp-content/uploads/2018/02/pocahontas.jpg");background-size:contain;"></figure><figure style="background-image:url("https://www.filmspourenfants.net/wp-content/uploads/2018/01/avatar-a-376x500.jpg");background-size:contain;"></figure></div></section></foreignObject><foreignObject width="960" height="720"><section id="94" data-paginate="true" data-class="i3t0" data-theme="teaching" class="i3t0" data-marpit-pagination="94" data-marpit-pagination-total="103" style="--paginate:true;--class:i3t0;--theme:teaching;" data-size="4:3" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="960" height="720" data-marpit-advanced-background="pseudo"><section class="i3t0" style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="94" data-marpit-pagination-total="103" data-size="4:3"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section data-paginate="true" data-class="i3t0 vertical pp" data-theme="teaching" class="i3t0 vertical pp" data-marpit-pagination="95" data-marpit-pagination-total="103" style="--paginate:true;--class:i3t0 vertical pp;--theme:teaching;" data-size="4:3" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="vertical"><figure style="background-image:url("https://s.yimg.com/uu/api/res/1.2/PQRflV1fICGi5BDeo0gMGg--~B/aD0yNDA7dz00MjU7YXBwaWQ9eXRhY2h5b24-/https://www.blogcdn.com/massively.joystiq.com/media/2008/12/smeagol_1-sms-1208.jpg");background-size:contain;"></figure><figure style="background-image:url("https://i.imgur.com/AEiMmrN.jpg");background-size:contain;"></figure><figure style="background-image:url("https://i.ytimg.com/vi/UYpRSs7pzJo/maxresdefault.jpg");"></figure></div></section></foreignObject><foreignObject width="960" height="720"><section id="95" data-paginate="true" data-class="i3t0 vertical pp" data-theme="teaching" class="i3t0 vertical pp" data-marpit-pagination="95" data-marpit-pagination-total="103" style="--paginate:true;--class:i3t0 vertical pp;--theme:teaching;" data-size="4:3" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="960" height="720" data-marpit-advanced-background="pseudo"><section class="i3t0 vertical pp" style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="95" data-marpit-pagination-total="103" data-size="4:3"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="96" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="96" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>D. Avec quatre images</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="97" data-paginate="true" data-theme="teaching" data-marpit-pagination="97" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<p>On utilise la classe <code>i4t0</code>.</p>
<p>On ajoute <code>pp</code>pour un affichage en pleine page.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="98" data-marpit-scope-BeZv1AJi="" data-paginate="true" data-class="i4t0 pp" data-theme="teaching" class="i4t0 pp" data-marpit-pagination="98" data-marpit-pagination-total="103" style="--paginate:true;--class:i4t0 pp;--theme:teaching;" data-size="4:3">
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/StillLifeWithASkull.jpg/1564px-StillLifeWithASkull.jpg" alt="" /></p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Georges_de_La_Tour_-_The_Penitent_Magdalen_-_WGA12339.jpg" alt="" /></p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Pieter_van_Steenwyck_%E2%80%94_Ars_longa%2C_vitta_brevis.jpg" alt="" /></p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Edwaert_Collier_-_Vanitas_-_Still_Life_with_Books_and_Manuscripts_and_a_Skull_-_Google_Art_Project.jpg/1474px-Edwaert_Collier_-_Vanitas_-_Still_Life_with_Books_and_Manuscripts_and_a_Skull_-_Google_Art_Project.jpg" alt="" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="99" data-paginate="true" data-class="souspartie" data-theme="teaching" class="souspartie" data-marpit-pagination="99" data-marpit-pagination-total="103" style="--paginate:true;--class:souspartie;--theme:teaching;" data-size="4:3">
<h2>E. Mises en page complexes</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="100" data-paginate="true" data-theme="teaching" data-marpit-pagination="100" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<p>Pour contrôler précisément la disposition de chaque élément sur une diapositive, on peut utiliser une grille.</p>
<p>On utilise la classe <code>grille</code>. On peut tout d'abord s'aider avec un quadrillage, que l'on fait apparaître, temporairement, avec la classe <code>quadrillage</code>.</p>
<p>On dispose alors les éléments avec la propriété CSS <code>grid-area</code>.</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="101" data-marpit-scope-ksa8jaJj="" data-paginate="true" data-class="grille quadrillage" data-theme="teaching" class="grille quadrillage" data-marpit-pagination="101" data-marpit-pagination-total="103" style="--paginate:true;--class:grille quadrillage;--theme:teaching;" data-size="4:3"></section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="102" data-marpit-scope-Jx6n4jlU="" data-paginate="true" data-class="grille" data-theme="teaching" class="grille" data-marpit-pagination="102" data-marpit-pagination-total="103" style="--paginate:true;--class:grille;--theme:teaching;" data-size="4:3">
<p>Cette idée que l'harmonie se définit objectivement par des rapports numériques, par des proportions définies, correspond à la <strong>conception pythagoricienne du Beau</strong>.</p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Kapitolinischer_Pythagoras_adjusted.jpg" alt="" /></p>
<ul>
<li>Lire le texte de la diapositive suivante (Carole Talon-Hugon, <em>L’antiquité grecque</em> (2014), chapitre II : « Qu’est-ce que le beau ? »), et répondre aux questions suivantes :</li>
<li>Pourquoi Pythagore affirme-t-il que le principe de toutes choses est dans le nombre ?</li>
<li>Quelles ont été les applications de cette idée en architecture, en peinture et dans la sculpture ?</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 960 720"><foreignObject width="960" height="720"><section id="103" data-paginate="true" data-theme="teaching" data-marpit-pagination="103" data-marpit-pagination-total="103" style="--paginate:true;--theme:teaching;" data-size="4:3">
<p>Ce thème pour le logiciel <a href="https://marp.app/">Marp</a> s'intitule <em>teaching</em>. Vous pouvez l'utiliser pour vos diapositives, le modifier. Il est <a href="https://github.com/eyssette/teaching-theme-for-marp">publié sur Github</a>.</p>
<p>Merci de me faire part de vos usages, de vos remarques et de vos suggestions d'amélioration !</p>
<ul>
<li>Email : <a href="mailto:c%65%64%72ic.e%79%73%73%65t%74e@gmai%6C.%63om">contactez-moi</a></li>
</ul>
</section>
<script>!function(){"use strict";function t(t){Array.from(document.getElementsByTagName("svg"),e=>{if(e.hasAttribute("data-marpit-svg")){const{clientHeight:r,clientWidth:a}=e;e.style.transform||(e.style.transform="translateZ(0)");const o=t||e.currentScale||1,i=e.viewBox.baseVal.width/o,n=e.viewBox.baseVal.height/o,s=Math.min(r/n,a/i);Array.from(e.querySelectorAll(":scope > foreignObject"),t=>{const e=t.x.baseVal.value,o=t.y.baseVal.value;Array.from(t.querySelectorAll(":scope > section"),t=>{t.style.transformOrigin||(t.style.transformOrigin="0 0");const l=(a-s*i)/2-e,c=(r-s*n)/2-o;t.style.transform=`translate3d(${l}px,${c}px,0) scale(${s}) translate(${e}px,${o}px)`})})}})}const e=(t,e,r)=>{if(t.getAttribute(e)!==r)return t.setAttribute(e,r),!0};function r(a=!0){for(const e of"Apple Computer, Inc."===navigator.vendor?[t]:[])e();Array.from(document.querySelectorAll('svg[data-marp-fitting="svg"]'),t=>{const r=t.firstChild,a=r.firstChild,{scrollWidth:o,scrollHeight:i}=a;let n,s=1;if(t.hasAttribute("data-marp-fitting-code")&&(n=t.parentElement.parentElement),t.hasAttribute("data-marp-fitting-math")&&(n=t.parentElement),n){const t=getComputedStyle(n),e=Math.ceil(n.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight));e&&(s=e)}const l=Math.max(o,s),c=Math.max(i,1),p=`0 0 ${l} ${c}`;e(r,"width",""+l),e(r,"height",""+c),e(t,"preserveAspectRatio",getComputedStyle(t).getPropertyValue("--preserve-aspect-ratio")||"xMinYMin meet"),e(t,"viewBox",p)&&t.classList.toggle("__reflow__")}),a&&window.requestAnimationFrame(()=>r(a))}!function(){if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");window.marpCoreBrowserScript?console.warn("Marp Core's browser script has already executed."):(Object.defineProperty(window,"marpCoreBrowserScript",{value:!0}),r())}()}();
</script></foreignObject></svg></div><div class="bespoke-marp-note" data-index="7" tabindex="0"><p>Code html trait d'union insécable : &#8209;</p></div><div class="bespoke-marp-note" data-index="47" tabindex="0"><p>TODO : Utiliser du bleu (pour la couleur de la conceptualisation)</p></div><div class="bespoke-marp-note" data-index="64" tabindex="0"><p>https://www.pastery.net/buhwpe/</p></div><script>!function(){"use strict";var e=function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),s=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),a={},o=function(e,t){return(t=t||{}).index=s.indexOf(e),t.slide=e,t},i=function(e,t){a[e]=(a[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(a[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){s[e]&&(n&&l("deactivate",o(n,t)),n=s[e],l("activate",o(n,t)))},d=function(e,t){var r=s.indexOf(n)+e;l(e>0?"next":"prev",o(n,t))&&c(r,t)},u={off:i,on:function(e,t){return(a[e]||(a[e]=[])).push(t),i.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return s.indexOf(n);l("slide",o(s[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:s,destroy:function(e){l("destroy",o(n,e)),a={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u};function t(e){e.parent.classList.add("bespoke-marp-parent"),e.slides.map(e=>e.classList.add("bespoke-marp-slide")),e.on("activate",t=>{e.slides.map(e=>e.classList.remove("bespoke-marp-active")),t.slide.classList.add("bespoke-marp-active")})}function n(e=2e3){return t=>{let n;function r(){n&&clearTimeout(n),n=setTimeout(()=>{t.parent.classList.add("bespoke-marp-inactive")},e),t.parent.classList.remove("bespoke-marp-inactive")}document.addEventListener("mousedown",r),document.addEventListener("mousemove",r),document.addEventListener("touchend",r),setTimeout(r,0)}}const r=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"];function s(e){e.parent.addEventListener("keydown",e=>{if(!e.target)return;const t=e.target;(r.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()})}function a(e){window.addEventListener("load",()=>{for(const t of e.slides){const e=t.querySelector("[data-marp-fitting]")?"":"hideable";t.setAttribute("data-bespoke-marp-load",e)}})}function o(e){let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map(e=>[null,...e.querySelectorAll("[data-marpit-fragment]")])});const r=r=>void 0!==e.fragments[t][n+r],s=(r,s)=>{t=r,n=s,e.fragments.forEach((e,t)=>{e.forEach((e,n)=>{if(null==e)return;const a=t<r||t===r&&n<=s;e.setAttribute("data-bespoke-marp-fragment",a?"active":"inactive"),t===r&&n===s?e.setAttribute("data-bespoke-marp-current-fragment","current"):e.removeAttribute("data-bespoke-marp-current-fragment")})}),e.fragmentIndex=s;const a={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:s};e.fire("fragment",a)};e.on("next",()=>{if(r(1))return s(t,n+1),!1;const a=t+1;e.fragments[a]&&s(a,0)}),e.on("prev",()=>{if(r(-1))return s(t,n-1),!1;const a=t-1;e.fragments[a]&&s(a,e.fragments[a].length-1)}),e.on("slide",({index:t,fragment:n})=>{let r=0;if(void 0!==n){const s=e.fragments[t];if(s){const{length:e}=s;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}s(t,r)}),s(0,0)}var i,l=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){
/*!
* screenfull
* v5.0.2 - 2020-02-13
* (c) Sindre Sorhus; MIT License
*/
!function(){var t="undefined"!=typeof window&&void 0!==window.document?window.document:{},n=e.exports,r=function(){for(var e,n=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],r=0,s=n.length,a={};r<s;r++)if((e=n[r])&&e[1]in t){for(r=0;r<e.length;r++)a[n[0][r]]=e[r];return a}return!1}(),s={change:r.fullscreenchange,error:r.fullscreenerror},a={request:function(e){return new Promise(function(n,s){var a=function(){this.off("change",a),n()}.bind(this);this.on("change",a);var o=(e=e||t.documentElement)[r.requestFullscreen]();o instanceof Promise&&o.then(a).catch(s)}.bind(this))},exit:function(){return new Promise(function(e,n){if(this.isFullscreen){var s=function(){this.off("change",s),e()}.bind(this);this.on("change",s);var a=t[r.exitFullscreen]();a instanceof Promise&&a.then(s).catch(n)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,n){var r=s[e];r&&t.addEventListener(r,n,!1)},off:function(e,n){var r=s[e];r&&t.removeEventListener(r,n,!1)},raw:r};r?(Object.defineProperties(a,{isFullscreen:{get:function(){return Boolean(t[r.fullscreenElement])}},element:{enumerable:!0,get:function(){return t[r.fullscreenElement]}},isEnabled:{enumerable:!0,get:function(){return Boolean(t[r.fullscreenEnabled])}}}),n?e.exports=a:window.screenfull=a):n?e.exports={isEnabled:!1}:window.screenfull={isEnabled:!1}}()}));l.isEnabled;function c(e){e.fullscreen=()=>{l.isEnabled&&l.toggle(document.body)},document.addEventListener("keydown",t=>{70!==t.which&&122!==t.which||t.altKey||t.ctrlKey||t.metaKey||!l.isEnabled||(e.fullscreen(),t.preventDefault())})}function d(e={}){const t=Object.assign({interval:200},e);return e=>{document.addEventListener("keydown",t=>{(32===t.which&&t.shiftKey||33===t.which||37===t.which||38===t.which)&&e.prev(),(32===t.which&&!t.shiftKey||34===t.which||39===t.which||40===t.which)&&e.next(),35===t.which&&e.slide(e.slides.length-1,{fragment:-1}),36===t.which&&e.slide(0)});let n,r,s=0;e.parent.addEventListener("wheel",a=>{let o=!1;const l=(e,t)=>{e&&(o=o||function(e,t){return function(e,t){const n=t===i.X?"Width":"Height";return e["client"+n]<e["scroll"+n]}(e,t)&&function(e,t){const{overflow:n}=e,r=e["overflow"+t];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r}(getComputedStyle(e),t)}(e,t)),(null==e?void 0:e.parentElement)&&l(e.parentElement,t)};if(0!==a.deltaX&&l(a.target,i.X),0!==a.deltaY&&l(a.target,i.Y),o)return;a.preventDefault(),r&&clearTimeout(r),r=setTimeout(()=>{n=0},t.interval);const c=Date.now()-s<t.interval,d=Math.sqrt(Math.pow(a.deltaX,2)+Math.pow(a.deltaY,2)),u=d<=n;if(n=d,c||u)return;let f;(a.deltaX>0||a.deltaY>0)&&(f="next"),(a.deltaX<0||a.deltaY<0)&&(f="prev"),f&&(e[f](),s=Date.now())})}}!function(e){e.X="X",e.Y="Y"}(i||(i={}));const u=(...e)=>history.replaceState(...e);var f;!function(e){e.Normal="",e.Presenter="presenter",e.Next="next"}(f||(f={}));const p=(e,{protocol:t,host:n,pathname:r,hash:s}=location)=>{const a=e.toString();return`${t}//${n}${r}${a?"?":""}${a}${s}`},m=()=>{switch(document.body.getAttribute("data-bespoke-view")){case f.Normal:return f.Normal;case f.Presenter:return f.Presenter;case f.Next:return f.Next;default:throw new Error("View mode is not assigned.")}},h=e=>new URLSearchParams(location.search).get(e),g=(e,t={})=>{const n=Object.assign({location:location,setter:u},t),r=new URLSearchParams(n.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?r.set(t,n):r.delete(t)}try{n.setter(null,document.title,p(r,n.location))}catch(e){console.error(e)}},b={available:(()=>{try{return localStorage.setItem("bespoke-marp","bespoke-marp"),localStorage.removeItem("bespoke-marp"),!0}catch(e){return console.warn("Warning: Using localStorage is restricted in the current host so some features may not work."),!1}})(),get:e=>{try{return localStorage.getItem(e)}catch(e){return null}},set:(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},remove:e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}}};function v(e=".bespoke-marp-osc"){const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[data-bespoke-marp-osc=${JSON.stringify(e)}]`).forEach(n)};return l.isEnabled||n("fullscreen",e=>e.style.display="none"),b.available||n("presenter",e=>{e.disabled=!0,e.title="Presenter view is disabled due to restricted localStorage."}),e=>{t.addEventListener("click",t=>{if(t.target instanceof HTMLElement){const{bespokeMarpOsc:n}=t.target.dataset;switch(n&&t.target.blur(),n){case"next":e.next();break;case"prev":e.prev();break;case"fullscreen":"function"==typeof e.fullscreen&&l.isEnabled&&e.fullscreen();break;case"presenter":e.openPresenterView()}}}),e.parent.appendChild(t),e.on("activate",({index:t})=>{n("page",n=>n.textContent=`Page ${t+1} of ${e.slides.length}`)}),e.on("fragment",({index:t,fragments:r,fragmentIndex:s})=>{n("prev",e=>e.disabled=0===t&&0===s),n("next",n=>n.disabled=t===e.slides.length-1&&s===r.length-1)}),l.isEnabled&&l.onchange(()=>n("fullscreen",e=>e.classList.toggle("exit",l.isEnabled&&l.isFullscreen)))}}function w(){const e=Math.max(Math.floor(.85*window.innerWidth),640),t=Math.max(Math.floor(.85*window.innerHeight),360);return window.open(this.presenterUrl,"bespoke-marp-presenter-"+this.syncKey,`width=${e},height=${t},menubar=no,toolbar=no`)}function y(){const e=new URLSearchParams(location.search);return e.set("view","presenter"),e.set("sync",this.syncKey),p(e)}var x=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];let E=e=>String(e).replace(/[&<>"']/g,e=>`&${k[e]};`),k={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},S="dangerouslySetInnerHTML",L={className:"class",htmlFor:"for"},I={};function P(e,t){let n=[],r="";t=t||{};for(let e=arguments.length;e-- >2;)n.push(arguments[e]);if("function"==typeof e)return t.children=n.reverse(),e(t);if(e){if(r+="<"+e,t)for(let e in t)!1!==t[e]&&null!=t[e]&&e!==S&&(r+=` ${L[e]?L[e]:E(e)}="${E(t[e])}"`);r+=">"}if(-1===x.indexOf(e)){if(t[S])r+=t[S].__html;else for(;n.length;){let e=n.pop();if(e)if(e.pop)for(let t=e.length;t--;)n.push(e[t]);else r+=!0===I[e]?e:E(e)}r+=e?`</${e}>`:""}return I[r]=!0,r}const M=({children:e})=>P(null,null,...e),N="bespoke-marp-presenter-container",F="bespoke-marp-presenter-next",O="bespoke-marp-presenter-next-container",T="bespoke-marp-presenter-note-container",q="bespoke-marp-presenter-info-container",C="bespoke-marp-presenter-info-page",$="bespoke-marp-presenter-info-page-text",j="bespoke-marp-presenter-info-page-prev",A="bespoke-marp-presenter-info-page-next",K="bespoke-marp-presenter-info-time",R="bespoke-marp-presenter-info-timer";function U(e){const{title:t}=document;document.title="[Presenter view]"+(t?" - "+t:"");const n={},r=e=>(n[e]=n[e]||document.querySelector("."+e),n[e]);document.body.appendChild((e=>{const t=document.createElement("div");return t.className=N,t.appendChild(e),t.insertAdjacentHTML("beforeend",P(M,null,P("div",{class:O},P("iframe",{class:F,src:"?view=next"})),P("div",{class:T}),P("div",{class:q},P("div",{class:C},P("button",{class:j,tabindex:"-1",title:"Previous"},"Previous"),P("span",{class:$}),P("button",{class:A,tabindex:"-1",title:"Next"},"Next")),P("time",{class:K,title:"Current time"}),P("div",{class:R})))),t})(e.parent)),(e=>{r(O).addEventListener("click",()=>e.next());const t=r(F),n=(s=t,(e,t)=>s.contentWindow.postMessage(`navigate:${e},${t}`,"null"===window.origin?"*":window.origin));var s;t.addEventListener("load",()=>{r(O).classList.add("active"),n(e.slide(),e.fragmentIndex),e.on("fragment",({index:e,fragmentIndex:t})=>n(e,t))});const a=document.querySelectorAll(".bespoke-marp-note");a.forEach(e=>{e.addEventListener("keydown",e=>e.stopPropagation()),r(T).appendChild(e)}),e.on("activate",()=>a.forEach(t=>t.classList.toggle("active",t.dataset.index==e.slide()))),e.on("activate",({index:t})=>{r($).textContent=`${t+1} / ${e.slides.length}`});const o=r(j),i=r(A);o.addEventListener("click",()=>{o.blur(),e.prev()}),i.addEventListener("click",()=>{i.blur(),e.next()}),e.on("fragment",({index:t,fragments:n,fragmentIndex:r})=>{o.disabled=0===t&&0===r,i.disabled=t===e.slides.length-1&&r===n.length-1});const l=()=>r(K).textContent=(new Date).toLocaleTimeString();l(),setInterval(l,250)})(e)}function V(e){const t=m();return t===f.Next&&e.appendChild(document.createElement("span")),e=>{t===f.Normal&&function(e){if(!(e=>e.syncKey&&"string"==typeof e.syncKey)(e))throw new Error("The current instance of Bespoke.js is invalid for Marp bespoke presenter plugin.");Object.defineProperties(e,{openPresenterView:{enumerable:!0,value:w},presenterUrl:{enumerable:!0,get:y}}),b.available&&document.addEventListener("keydown",t=>{80!==t.which||t.altKey||t.ctrlKey||t.metaKey||(t.preventDefault(),e.openPresenterView())})}(e),t===f.Presenter&&U(e),t===f.Next&&function(e){const t=t=>{if(t.origin!==window.origin)return;const[n,r]=t.data.split(":");if("navigate"===n){const[t,n]=r.split(",");e.slide(Number.parseInt(t,10),{fragment:Number.parseInt(n,10)}),e.next()}};window.addEventListener("message",t),e.on("destroy",()=>window.removeEventListener("message",t))}(e)}}function X(e){e.on("activate",t=>{document.querySelectorAll(".bespoke-progress-bar").forEach(n=>{n.style.flexBasis=100*t.index/(e.slides.length-1)+"%"})})}const D=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t};function Y(e={}){const t=Object.assign({history:!0},e);return e=>{let n=!0;const r=e=>{const t=n;try{return n=!0,e()}finally{n=t}},s=(t={fragment:!0})=>{((t,n)=>{const{fragments:r,slides:s}=e,a=Math.max(0,Math.min(t,s.length-1)),o=Math.max(0,Math.min(n||0,r[a].length-1));a===e.slide()&&o===e.fragmentIndex||e.slide(a,{fragment:o})})((D(location.hash.slice(1))||1)-1,t.fragment?D(h("f")||""):null)};e.on("fragment",({index:e,fragmentIndex:r})=>{n||g({f:0===r||r.toString()},{location:Object.assign(Object.assign({},location),{hash:"#"+(e+1)}),setter:(...e)=>t.history?history.pushState(...e):history.replaceState(...e)})}),setTimeout(()=>{s(),window.addEventListener("hashchange",()=>r(()=>{s({fragment:!1}),g({f:void 0})})),window.addEventListener("popstate",()=>{n||r(()=>s())}),n=!1},0)}}function B(e={}){const t=e.key||((e=21)=>{let t="",n=crypto.getRandomValues(new Uint8Array(e));for(;e--;){let r=63&n[e];t+=r<36?r.toString(36):r<62?(r-26).toString(36).toUpperCase():r<63?"_":"-"}return t})(),n="bespoke-marp-sync-"+t,r=()=>{const e=b.get(n);return e?JSON.parse(e):Object.create(null)},s=e=>{const t=r(),s=Object.assign(Object.assign({},t),e(t));return b.set(n,JSON.stringify(s)),s};return s(e=>({reference:(e.reference||0)+1})),e=>{Object.defineProperty(e,"syncKey",{value:t,enumerable:!0});let a=!0;setTimeout(()=>{e.on("fragment",e=>{a&&s(()=>({index:e.index,fragmentIndex:e.fragmentIndex}))})},0),window.addEventListener("storage",t=>{if(t.key===n&&t.oldValue&&t.newValue){const n=JSON.parse(t.oldValue),r=JSON.parse(t.newValue);if(n.index!==r.index||n.fragmentIndex!==r.fragmentIndex)try{a=!1,e.slide(r.index,{fragment:r.fragmentIndex})}finally{a=!0}}}),e.on("destroy",()=>{const{reference:e}=r();void 0===e||e<=1?b.remove(n):s(()=>({reference:e-1}))})}}function z(e={}){const t=Object.assign({slope:Math.tan(-35*Math.PI/180),swipeThreshold:30},e);return e=>{let n;const r=e.parent,s=e=>{const t=r.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};r.addEventListener("touchstart",e=>{n=1===e.touches.length?s(e.touches[0]):void 0},{passive:!0}),r.addEventListener("touchmove",e=>{if(n)if(1===e.touches.length){e.preventDefault();const t=s(e.touches[0]),r=t.x-n.x,a=t.y-n.y;n.delta=Math.sqrt(Math.pow(Math.abs(r),2)+Math.pow(Math.abs(a),2)),n.radian=Math.atan2(r,a)}else n=void 0}),r.addEventListener("touchend",r=>{if(n){if(n.delta&&n.delta>=t.swipeThreshold){let s=n.radian-t.slope;s=(s+Math.PI)%(2*Math.PI)-Math.PI,e[s<0?"next":"prev"](),r.stopPropagation()}n=void 0}},{passive:!0})}}const H=[f.Normal,f.Presenter,f.Next];!function(r=document.getElementById("p")){document.body.setAttribute("data-bespoke-view",(()=>{switch(h("view")){case"next":return f.Next;case"presenter":return f.Presenter;default:return f.Normal}})());const i=(e=>{const t=h(e);return g({[e]:void 0}),t})("sync")||void 0,l=!1,u=!0,p=e(r,((...e)=>{const t=H.findIndex(e=>m()===e);if(t<0)throw new Error("Invalid view");return e.map(([e,n])=>e[t]&&n).filter(e=>e)})([[u,u,l],B({key:i})],[[u,u,u],V(r)],[[u,u,l],s],[[u,u,u],t],[[u,l,l],n()],[[u,u,u],a],[[u,u,u],Y({history:!1})],[[u,u,l],d()],[[u,u,l],c],[[u,l,l],X],[[u,u,l],z()],[[u,l,l],v()],[[u,u,u],o]));window.addEventListener("beforeunload",()=>g({sync:p.syncKey})),window.addEventListener("unload",()=>p.destroy())}()}();
</script></body></html>