diff --git a/bun.lockb b/bun.lockb
index 97b40d7..17f1ccf 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/intriduction-accessibilite-numerique.pdf b/intriduction-accessibilite-numerique.pdf
new file mode 100644
index 0000000..56ce6bc
Binary files /dev/null and b/intriduction-accessibilite-numerique.pdf differ
diff --git a/layouts/title-image.vue b/layouts/title-image.vue
index 78e0722..9588383 100644
--- a/layouts/title-image.vue
+++ b/layouts/title-image.vue
@@ -10,6 +10,10 @@ const props = defineProps({
     type: String,
     default: '3fr 2fr'
   },
+  textAlign: {
+    type: String,
+    default: 'start'
+  },
   imageAlign: {
     type: String,
     default: 'center'
@@ -33,6 +37,7 @@ const image = imageSrc(props.image)
 <style scoped>
 .grid {
   grid-template-columns: v-bind(ratio);
+  align-items: v-bind(textAlign);
 }
 .image {
   block-size: 100%;
diff --git a/package.json b/package.json
index b740c40..ca3f301 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@shikijs/transformers": "^1.24.2",
     "@slidev/cli": "^0.50.0-beta.11",
+    "playwright-chromium": "^1.49.1",
     "prettier": "3.4.2",
     "prettier-plugin-slidev": "^1.0.5"
   },
diff --git a/pages/eco.md b/pages/eco.md
index 1ea0b7d..2711b46 100644
--- a/pages/eco.md
+++ b/pages/eco.md
@@ -1,6 +1,132 @@
 ---
 layout: title-image
-image: brumm.avif
+image: moutain.jpg
+text-align: center
 ---
 
 # <span class="highlight">Sobriété</span> et performances
+
+Utiliser uniquement ce dont on a besoin.
+
+<!--
+Autant en terme de fonctionnalités que de ressources.
+Exemple T-shirt
+-->
+
+---
+layout: title-image
+image: pinky.jpg
+---
+
+# Contexte et législation
+
+- Il n'y a pas (encore) de cadre légal
+- Il existe un référentiel officiel&nbsp;: le [Référentiel général d'écoconception de services numériques](https://www.arcep.fr/mes-demarches-et-services/entreprises/fiches-pratiques/referentiel-general-ecoconception-services-numeriques.html) (RGESN) géré par l'ARCOM
+- Le RGESN se base en grande partie sur les [115 bonnes pratiques](https://collectif.greenit.fr/ecoconception-web/115-bonnes-pratiques-eco-conception_web.html) du collectif Green-IT.
+
+---
+layout: fact
+---
+
+# Sobriété
+
+<div v-click>tout simplement.</div>
+
+---
+layout: title-image
+image: monkey.jpg
+---
+
+# Idées reçues
+
+- ça fait des [sites moches…](https://lowww.directory/)
+- &laquo;&nbsp;On me bride ma créativité ALED !&nbsp;&raquo;
+- la direction/le client ne veut pas
+- on ne génère pas d'engagement qui [levrage les K€](https://www.instagram.com/reel/C9KqdlAI-OQ/) pour convertir les KPI 🤯
+- c'est cher
+
+<!--
+on appelle ça des contraintes, les contraintes stimulent la créativité.
+avez-vous demandé et informé ?
+OSKOUR
+interface simplifiée = interface plus facile/rapide à designer et développer.
+-->
+
+---
+layout: title-image
+image: 'brumm.avif'
+---
+
+# Performances
+
+## Leviers
+
+- Images
+  - dimensionner correctement
+  - compression et conversion (webp, avif)
+- Vidéos
+  - compression et conversion (webm, av1, h265, vp9)
+- Fonts
+  - compression et conversion (woff2)
+  - subsetting
+- Code source
+  - minification
+  - compression (gzip, brotli)
+
+<!--
+squoosh et/ou plugin WP
+-->
+
+---
+layout: auto-grid
+columns: 2
+---
+
+# Sécurité
+
+::content::
+
+<div>
+
+## Le strict minimum&nbsp;:
+
+- certificat TLS
+- pare feu
+- permissions
+- mots de passe forts
+- authentification à deux facteurs
+
+## Wordpress
+
+- mises à jour régulières
+- qualité des plugins
+- qualité des thèmes
+- ne pas modifier un réglages inconnu
+- ne pas exécuter du code non compris
+
+</div>
+
+<div>
+
+## Pour aller plus loin&nbsp;:
+
+- gestionnaire de mots de passe
+- outils et services hors <abbr title="Google Amazon Facebook Apple Microsofta">GAFAM</abbr>
+- [filigraner](https://filigrane.beta.gouv.fr/) ses documents
+- méfiance partout, confiance nulle-part
+
+![](/images/2fa.jpg)
+
+</div>
+
+<!--
+De nombreux réglages sont déjà activés. À vous de ne pas faire n'importe quoi avec le backoffice.
+-->
+
+---
+layout: end
+class: text-center
+hideInToc: true
+---
+
+À+ 🤙
diff --git a/public/images/2fa.jpg b/public/images/2fa.jpg
new file mode 100644
index 0000000..4b5ea75
Binary files /dev/null and b/public/images/2fa.jpg differ
diff --git a/public/images/monkey.jpg b/public/images/monkey.jpg
new file mode 100644
index 0000000..1ad5ec3
Binary files /dev/null and b/public/images/monkey.jpg differ
diff --git a/public/images/moutain.jpg b/public/images/moutain.jpg
new file mode 100644
index 0000000..e14c0ef
Binary files /dev/null and b/public/images/moutain.jpg differ
diff --git a/public/images/pinky.jpg b/public/images/pinky.jpg
new file mode 100644
index 0000000..eff66b2
Binary files /dev/null and b/public/images/pinky.jpg differ
diff --git a/slides.md b/slides.md
index 3e7f3b9..23b5be8 100644
--- a/slides.md
+++ b/slides.md
@@ -1,7 +1,7 @@
 ---
 author: Nicolas Arduin
 download: true
-exportFilename: intriduction-accessibilite-numerique
+exportFilename: introduction-accessibilite-numerique
 lineNumbers: true
 remoteAssets: true
 htmlAttrs:
@@ -45,6 +45,13 @@ layout: bullets
 
 <Toc maxDepth="1"></Toc>
 
+<style>
+	:deep(li) {
+		font-size: var(--size--1);
+		margin-block-start: var(--space-3xs);
+	}
+</style>
+
 ---
 layout: content
 ---
@@ -59,13 +66,13 @@ Tim Berners-Lee, Directeur du <abbr title="World Wide Web Consortium">W3C</abbr>
 
 > “&nbsp;L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.&nbsp;”
 
-Access 42
+Access42
 
 </div>
 
 <div v-click>
 
-> <span lang="en">The W3C vision is that the Web and related technologies are accessible so that all people with disabilities around the globe can participate equally in the digital world.</span>
+> La vision du W3C est que le Web et les technologies connexes soient accessibles afin que toutes les personnes handicapées du monde entier puissent participer au monde numérique sur un pied d'égalité.
 
 <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>
 
@@ -77,15 +84,15 @@ layout: content
 
 # Législation
 
-**Obligation actuelle :**
+**Obligation actuelle&nbsp;:**
 
-- les personnes morales de droit public
-- les personnes morales délégataires d’une mission de service public
-- les entreprises privées dont le chiffre d’affaires est supérieur à 250 millions d’euros
+- les personnes morales de droit public&nbsp;;
+- les personnes morales délégataires d’une mission de service public&nbsp;;
+- les entreprises privées dont le chiffre d’affaires est supérieur à 250 millions d’euros.
 
 <div v-click>
 
-**À partir de Juin 2025 :**
+**À partir de Juin 2025&nbsp;:**
 
 > Les entreprises employant moins de dix personnes qui fournissent des services et dont le chiffre d'affaires annuel n'excède pas deux millions d'euros.
 
@@ -93,7 +100,7 @@ layout: content
 
 > Tous les sites et plateformes de commerce électronique doivent être accessibles pour les nouveaux services à partir de 2025 et pour l’existant à partir de 2030.
 
-Plus de détails dans [cet article d'Access 42](https://access42.net/transposition-directive-europeenne-ue-2019-882-accessibilite-produits-services/)
+Plus de détails dans [cet article d'Access42](https://access42.net/transposition-directive-europeenne-ue-2019-882-accessibilite-produits-services/)
 
 </div>
 
@@ -133,7 +140,7 @@ hideInToc: true
 ---
 layout: auto-grid
 columns: 2
-rows: 250px
+rows: 220px
 ---
 
 # Exemples de <span class="highlight">technologies d'assistance</span>
@@ -151,7 +158,7 @@ layout: content
 
 # &#8203;1. Éléments <span class="highlight">HTML sémantiques</span>
 
-````md magic-move {lines: false}
+````md magic-move {lines: true}
 ```html
 <body>
   <div class="header">
@@ -172,7 +179,7 @@ layout: content
 </body>
 ```
 
-```html
+```html{*|2,10|3,9|4-8|11,17|13,16|18,20|*}
 <body>
   <header>
     <nav>
@@ -450,11 +457,12 @@ ratio: 1fr 1fr
 
 ---
 layout: quote
+hideInToc: true
 ---
 
 ::quote::
 
-# <span class="highlight">Rien n'est accessible</span> à tout le monde. Par conséquent, <span class="highlight">tout ce que vous ajoutez</span> à votre interface ne peut que la rendre <span class="highlight">moins accessible.</span> La simplicité <span class="highlight">(sobriété)</span> est le seule remède.
+# <span class="highlight">Rien n'est accessible</span> à tout le monde. Par conséquent, <span class="highlight">tout ce que vous ajoutez</span> à votre interface ne peut que la rendre <span class="highlight">moins accessible.</span> La simplicité <span class="highlight">(sobriété)</span> est le seul remède.
 
 ::default::
 
diff --git a/styles/base.css b/styles/base.css
index bc0d2fc..effaf1c 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -38,6 +38,16 @@ body {
   color: var(--color-dark-blue);
 }
 
+@media print {
+  body {
+    text-wrap: initial;
+  }
+  :is(h1, h2, h3, h4, .h2, .h3, .h4) {
+    max-inline-size: initial;
+    text-wrap: initial;
+  }
+}
+
 h2,
 .h2 {
   font-size: var(--size-3);