<!-- .slide: data-state="titre" -->
# Titre du diaporama
Cédric Eyssette (2022-2023)
https://eyssette.github.io
---
<!-- .slide: data-state="partie" -->
# I – Partie 1
Première partie
---
<!-- .slide: data-state="souspartie" -->
## A. Sous-partie 1
---
<!-- .slide: data-state="vcenter" -->
Lorem ipsum dolor sit amet, **consectetur** adipiscing elit.
<span class="fragment">Aliquam fringilla _condimentum tellus_, porttitor porta elit egestas ut.</span>
<span class="fragment">Sed viverra consequat magna, quis tempor nisl placerat sed. Sed hendrerit risus sit amet lacinia sodales.</span>
<span class="fragment">Nunc sollicitudin libero ac velit feugiat auctor. Nullam tincidunt quam est. </span>
---
<!-- .slide: data-state="vcenter" -->
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla condimentum tellus, porttitor porta elit egestas ut. Sed viverra consequat magna, quis tempor nisl placerat sed. Sed hendrerit risus sit amet lacinia sodales. Nunc sollicitudin libero ac velit feugiat auctor. Nullam tincidunt quam est. Integer convallis nibh non erat efficitur, sit amet mollis eros commodo. Cras bibendum libero purus, in vulputate mi gravida eu. In pharetra purus non orci egestas, vel interdum lacus malesuada. Ut nec sapien rutrum, pharetra urna ultricies, gravida mi. Phasellus luctus massa elit, in laoreet elit auctor in.
---
**Portrait de Jean-Jacques Rousseau**
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla condimentum tellus
---
<!-- .slide: data-state="vcenter" -->
```mermaid
%%{init{"theme":"base","themeCSS":"* {line-height:1.25em!important; font-size:20px; text-align:left!important;} g[id*=\"A\"] span {font-size:1.01em; color:white; display:block; text-align:center!important} g[id*=\"A\"] rect {fill:black} g[id*=\"V\"] * {} g[id*=\"B\"] span {font-size:0.9em; color:white; display:block; text-align:center!important} g[id*=\"B\"] rect {fill:#6f0000; stroke:transparent} g[id*=\"C\"] rect {fill:white; stroke:grey} g[id*=\"C\"] span {font-size:0.75em; display:block;} g[id*=\"D\"] span, g[id*=\"E\"] span {font-size:0.7em; display:block;} g[id*=\"D\"] rect, g[id*=\"E\"] rect {stroke:transparent!important}.edge-thickness-normal{stroke-width:1px; stroke:#999;} .edge-thickness-thick{stroke-width:1px!important;} .edge-pattern-dotted{stroke:transparent}","themeVariables":{"secondaryColor":"white","primaryColor":"hsl(60,9%,97%)","primaryBorderColor":"black"},"flowchart":{"htmlLabels":true,"padding":20,"rankSpacing":50,"nodeSpacing":20}} }%%
flowchart LR
A1(["Titre <br> niveau 1"])
B1("Titre <br>niveau 2")
B2("Titre <br>niveau 2")
B3("Titre <br>niveau 2")
C1["Titre <br>niveau 3"]
C2["Titre <br>niveau 3"]
C3["Titre <br>niveau 3"]
D1("Titre <br>niveau 4")
D2("Titre <br>niveau 4")
D3("Titre <br>niveau 4")
A1 === B1 & B2 & B3
B1 --- C1
B2 --- C2
B3 --- C3
C1 --- D1
C2 --- D2
C3 --- D3
```
---
<!-- .slide: data-state="flashcard" -->
**Flashcard**
1.
- Question
- Réponse
---
<!-- .slide: data-state="dialog" -->
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aliquam fringilla condimentum tellus, porttitor porta elit egestas ut.
- Sed viverra consequat magna, quis tempor nisl placerat sed.
<style>
section {height:100%; background-color:white; background-image: url('https://raw.githubusercontent.com/eyssette/teaching-theme-for-marp/master/assets/bg_t.png'); background-size:960px 720px}
.ui-content section {width:426px; height:325px;background-size:426px 325px}
.slides p {color:black; text-align:left; margin-left:60px; margin-right:50px}
.ui-content p {margin-left:20px; margin-right:15px}
section[data-state="titre"] {background-image: url('https://raw.githubusercontent.com/eyssette/teaching-theme-for-marp/master/assets/bg-titre_t.png')}
.titre h1 {color:#75140C; display:flex; align-items:center; height:480px; justify-content:center}
.titre p {position:absolute; bottom:90px; width:100%; text-align:center; margin:auto;}
.ui-content section[data-state="titre"] h1 {height:130px; margin-top:70px;color:#75140C;}
.ui-content section[data-state="titre"] p {text-align:center;}
section[data-state="partie"] {background-image: url('https://raw.githubusercontent.com/eyssette/teaching-theme-for-marp/master/assets/bg-titre-partie_t.png')}
.partie h1 {color:black; display:flex; align-items:center; height:480px; justify-content:center}
.partie p {position:absolute; bottom:40px; width:100%; text-align:center; margin:auto; color:white; font-size:1.3em; font-weight:bold; text-transform:uppercase;}
.ui-content section[data-state="partie"] h1 {margin-top:100px; border:none}
.ui-content section[data-state="partie"] p {color:white!important; margin-top:200px; text-transform:uppercase; font-weight:bold; text-align:center; margin-top:120px}
section[data-state="souspartie"] > div {display:flex; align-items:center; height:620px}
.souspartie h2, .ui-content section[data-state="souspartie"] h2 {color:black; background:#00000009; padding : 50px 80px; border-top:1px solid #333333; border-bottom:1px solid #333333; width:100%}
.ui-content section[data-state="souspartie"] h2 {padding:30px 50px}
section[data-state~="vcenter"] > div {display:flex;justify-content:center; flex-direction:column; height:650px}
.ui-content section[data-state~="vcenter"] > div {height:720px!important}
strong {color: rgb(24, 33, 117);}
blockquote {font-family: "ETBembo", "et-book", "Minion Pro", "Times New Roman";border:none!important;background-color:#00000009!important;padding:20px;border-radius:15px;box-shadow:none!important; width:85%!important}
blockquote p {font-style:normal; font-size:0.7em; line-height:1.25em!important; text-align:justify!important;}
.ui-content blockquote {width:92%!important; margin:auto}
.ui-content blockquote p {margin:0px; padding:10px 0}
.reveal blockquote p:first-child, .reveal blockquote p:last-child {display:block;}
img[alt~="d-left"] {height:600px!important; float:left; padding-right:30px; box-shadow:none!important}
.ui-content img[alt~="d-left"] {height:280px!important}
section[data-state="flashcard"] > div {display:flex; align-items:center; height:620px; flex-direction:column; justify-content:center;}
.flashcard ol, .ui-content section[data-state="flashcard"] ol {display:block; margin-top:2em; margin-left:-50px}
.flashcard ol,.flashcard ul, .ui-content section[data-state="flashcard"] ol, .ui-content section[data-state="flashcard"] ul {list-style-type:none}
.flashcard ul li, .ui-content section[data-state="flashcard"] ul li {left:0;background-color:#fff;}
.flashcard ol li, .ui-content section[data-state="flashcard"] ol li {background-color:transparent;border-radius:20px;width:760px;height:300px;border:none;margin:auto;margin-bottom:3em;perspective:1000px;display:flex;align-items:center;justify-content:center;}
.flashcard ul, .ui-content section[data-state="flashcard"] ul {position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d}
.flashcard ol li:hover>ul, .ui-content section[data-state="flashcard"] ol li:hover>ul{transform:rotateY(180deg)}
.flashcard ol li>ul li:first-of-type,.flashcard ol li>ul li:nth-of-type(2), .ui-content section[data-state="flashcard"] ol li>ul li:first-of-type, .ui-content section[data-state="flashcard"] ol li>ul li:nth-of-type(2){position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flashcard ol li>ul li:first-of-type, .ui-content section[data-state="flashcard"] ol li>ul li:first-of-type{color:#000;font-weight:600;font-size:1.5em}
.flashcard ol li>ul li:nth-of-type(2), .ui-content section[data-state="flashcard"] ol li>ul li:nth-of-type(2){color:#000;transform:rotateY(180deg)}
.flashcard ul li, .ui-content section[data-state="flashcard"] ul li{padding:3em;overflow:hidden;border:5px solid #005596}
.ui-content section[data-state="flashcard"] ol li:hover ul {transform:rotateY(180deg)!important}
.ui-content section[data-state="flashcard"] ol li {height:200px!important; width:320px!important;}
.ui-content section[data-state="flashcard"] ol li ul li:first-of-type, .ui-content section[data-state="flashcard"] ol li ul li:nth-of-type(2){position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden!important;backface-visibility:hidden!important}
.ui-content section[data-state="flashcard"] ol li ul li:nth-of-type(2){color:#000;transform:rotateY(180deg)}
.ui-content section[data-state="flashcard"] p {text-align:center; margin-top:20px}
.ui-content section[data-state="flashcard"] ol li ul li:first-of-type{color:#000;font-weight:600;font-size:1.1em}
.dialog ul li {font-size:0.6em}
.dialog ul li:nth-of-type(2n):after,.dialog ul li:nth-of-type(2n):before{content:"";position:absolute;bottom:0;border-bottom-left-radius:30px}
.dialog ul{background-color:#fff;list-style-type:none;padding:initial initial 50px;margin-left:40px;margin-right:40px;margin-top:20px}
.dialog ul li:before{content:""!important;margin:0}
.dialog ul li{margin-top:1em;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px 20px 20px 20px;padding:20px;max-width:400px;display:table;line-height:1.25em;position:relative;overflow-wrap:break-word;-webkit-border-radius:20px 20px 20px 20px}
.dialog ul li:nth-of-type(odd){background:#e5e5ea;text-shadow:1px 1px 0 #f3f3f4;margin-left:-50px; color:#333}
.dialog ul li:nth-of-type(2n){color:#fff;text-shadow:1px 1px 0 #1b96fc;background-color:#39a1f9;margin-left:280px;}
.dialog ul li:nth-of-type(odd):before{content:"";position:absolute;z-index:0;bottom:0;left:-20px;height:40px;width:40px;background:#e5e5ea;border-bottom-right-radius:30px}
.dialog ul li:nth-of-type(odd):after{content:"";position:absolute;z-index:1;bottom:0;left:-20px;width:20px;height:40px;background:#fff;border-bottom-right-radius:30px}
.dialog ul li:nth-of-type(2n):before{z-index:0;right:-20px;height:40px;width:40px;background:fixed #39a1f9}
.dialog ul li:nth-of-type(2n):after{z-index:1;right:-21px;width:21px;height:41px;background:#fff}
.ui-content section[data-state="dialog"] ul li {font-size:0.6em}
.ui-content section[data-state="dialog"] ul li:nth-of-type(2n):after,.ui-content section[data-state="dialog"] ul li:nth-of-type(2n):before{content:"";position:absolute;bottom:0;border-bottom-left-radius:30px}
.ui-content section[data-state="dialog"] ul{background-color:#fff;list-style-type:none;margin-left:40px;margin-right:40px;margin-top:20px}
.ui-content section[data-state="dialog"] ul li:before{content:""!important;margin:0;}
.ui-content section[data-state="dialog"] ul li{margin-top:1em;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px 15px 15px 15px;padding:15px;max-width:200px;display:table;line-height:1.25em;position:relative;overflow-wrap:break-word;-webkit-border-radius:15px 15px 15px 15px; text-align:left!important}
.ui-content section[data-state="dialog"] ul li:nth-of-type(odd){background:#e5e5ea;text-shadow:1px 1px 0 #f3f3f4;margin-left:-50px; color:#333; padding-left:20px}
.ui-content section[data-state="dialog"] ul li:nth-of-type(2n){color:#fff;text-shadow:1px 1px 0 #1b96fc;background-color:#39a1f9;margin-left:100px; padding-right:15px}
.ui-content section[data-state="dialog"] ul li:nth-of-type(odd):before{content:"";position:absolute;z-index:0;bottom:0;left:-20px;height:40px;width:40px;background:#e5e5ea;border-bottom-right-radius:30px}
.ui-content section[data-state="dialog"] ul li:nth-of-type(odd):after{content:"";position:absolute;z-index:1;bottom:0;left:-20px;width:20px;height:40px;background:#fff;border-bottom-right-radius:30px}
.ui-content section[data-state="dialog"] ul li:nth-of-type(2n):before{z-index:0;right:-20px;height:40px;width:40px;background:fixed #39a1f9}
.ui-content section[data-state="dialog"] ul li:nth-of-type(2n):after{z-index:1;right:-21px;width:21px;height:41px;background:#fff}
</style>