diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 2448cfa5b..bf8ebd2af 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -1,24 +1,24 @@
-# Bubbling and capturing
+# Bubbling et capture
 
-Let's start with an example.
+Commençons par un exemple.
 
-This handler is assigned to `<div>`, but also runs if you click any nested tag like `<em>` or `<code>`:
+Ce gestionnaire d'événement est assigné au `<div>`, mais s'exécute également si on clique sur l'un des sous-éléments comme `<em>` ou `<code>`:
 
 ```html autorun height=60
 <div onclick="alert('The handler!')">
-  <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em>
+  <em>Si on clique sur l'<code>EM</code>, le gestionnaire du <code>DIV</code> s'exécute.</em>
 </div>
 ```
 
-Isn't it a bit strange? Why does the handler on `<div>` run if the actual click was on `<em>`?
+Ce n'est pas un peu étrange ? Pourquoi le gestionnaire du `<div>` s'exécute alors qu'on a cliqué sur l'`<em>`?
 
-## Bubbling
+## Bubbling (ou "bouillonement")
 
-The bubbling principle is simple.
+Le principe du 'bubbling' est simple.
 
-**When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.**
+**Quand un événement se produit sur un élément, il exécute d'abord les gestionnaires ('handlers') sur cet élément, puis sur son parent, puis remonte toute la chaîne d'ancêtres.**
 
-Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of them:
+Disons qu'on a 3 éléments imbriqués `FORM > DIV > P` qui ont chacun un gestionnaire associé:
 
 ```html run autorun
 <style>
@@ -35,125 +35,125 @@ Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of t
 </form>
 ```
 
-A click on the inner `<p>` first runs `onclick`:
-1. On that `<p>`.
-2. Then on the outer `<div>`.
-3. Then on the outer `<form>`.
-4. And so on upwards till the `document` object.
+Un clic sur le `<p>` interne exécute `onclick`:
+1. Sur ce `<p>`.
+2. Puis sur le `<div>`.
+3. Puis sur le `<form>` externe.
+4. Et continue jusqu'à atteindre l'objet `document`.
 
 ![](event-order-bubbling.svg)
 
-So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
+Si on clique donc sur `<p>`, on verra 3 alertes: `p` -> `div` -> `form`.
 
-The process is called "bubbling", because events "bubble" from the inner element up through parents like a bubble in the water.
+Ce fonctionnement s'appelle 'bubbling' (ou "bouillonnement"), car les événements remontent petit à petit, comme des bulles dans l'eau.
 
-```warn header="*Almost* all events bubble."
-The key word in this phrase is "almost".
+```warn header="*Presque* tous les événements 'bubble'."
+Le mot-clé étant "presque".
 
-For instance, a `focus` event does not bubble. There are other examples too, we'll meet them. But still it's an exception, rather than a rule, most events do bubble.
+Par exemple, un événement `focus` ne bubble pas. Il y a d'autres exemples également, nous y viendrons. Cela reste cependant une exception, pas la norme, la majorité des événements 'bubble'.
 ```
 
 ## event.target
 
-A handler on a parent element can always get the details about where it actually happened.
+Le gestionnaire d'événement sur un parent peut toujours récupérer les détails de la source initiale de l'événement, l'élément où l'événement s'est produit en premier.
 
-**The most deeply nested element that caused the event is called a *target* element, accessible as `event.target`.**
+**L'élement le plus imbriqué ayant causé l'événement s'appelle l'élément *cible*, accessible en tant que `event.target`.**
 
-Note the differences from `this` (=`event.currentTarget`):
+Notez la différence avec `this` (=`event.currentTarget`):
 
-- `event.target` -- is the "target" element that initiated the event, it doesn't change through the bubbling process.
-- `this` -- is the "current" element, the one that has a currently running handler on it.
+- `event.target` -- C'est l'élément "cible" qui a initié l'événement, il ne change pas au cours du 'bubbling' sur les parents.
+- `this` -- C'est l'élément "actuel", celui qui a actuellement un gestionnaire en cours d'exécution.
 
-For instance, if we have a single handler `form.onclick`, then it can "catch" all clicks inside the form. No matter where the click happened, it bubbles up to `<form>` and runs the handler.
+Par exemple, si on a un seul gestionnaire `form.onclick`, il peut "attraper" n'importe quel clic à l'intérieur du formulaire. Peu importe sur quel sous-élément le clic a eu lieu dans le formulaire, il va 'bubble' jusqu'au `<form>` et exécuter son gestionnaire.
 
-In `form.onclick` handler:
+Dans un gestionnaire `form.onclick` :
 
-- `this` (=`event.currentTarget`) is the `<form>` element, because the handler runs on it.
-- `event.target` is the actual element inside the form that was clicked.
+- `this` (=`event.currentTarget`) est l'élément `<form>`, car le gestionnaire s'exécute dessus.
+- `event.target` est le 'vrai' élément à l'intérieur du formulaire qui a été cliqué.
 
-Check it out:
+Démonstration:
 
 [codetabs height=220 src="bubble-target"]
 
-It's possible that `event.target` could equal `this` -- it happens when the click is made directly on the `<form>` element.
+Il est possible que `event.target` ait la même valeur que `this` -- ça se produit si le clic est fait directement sur l'élément `<form>`.
 
-## Stopping bubbling
+## Stopper le bubbling
 
-A bubbling event goes from the target element straight up. Normally it goes upwards till `<html>`, and then to `document` object, and some events even reach `window`, calling all handlers on the path.
+Un événement 'bubbling' remonte de l'élément cible en ligne droite vers le haut. Normalement, il remonte jusqu'à `<html>`, puis à l'objet `document`, et certains événements atteignent même `window`, en déclenchant tous les gestionnaires sur leur chemin.
 
-But any handler may decide that the event has been fully processed and stop the bubbling.
+Mais chaque gestionnaire peut décider que l'événement a été traité complètement, et interrompre le 'bubbling'.
 
-The method for it is `event.stopPropagation()`.
+On peut pour ça appeler `event.stopPropagation()`.
 
-For instance, here `body.onclick` doesn't work if you click on `<button>`:
+Ici par exemple, `body.onclick` ne fonctionne pas si on clique sur le `<button>`:
 
 ```html run autorun height=60
-<body onclick="alert(`the bubbling doesn't reach here`)">
+<body onclick="alert(`le bubbling n'atteint pas cet élément`)">
   <button onclick="event.stopPropagation()">Click me</button>
 </body>
 ```
 
 ```smart header="event.stopImmediatePropagation()"
-If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute.
+Si un élément a plusieurs gestionnaires pour un même événement, et que l'un d'entre eux stoppe le 'bubbling', les autres gestionnaires s'exécutent quand même.
 
-In other words, `event.stopPropagation()` stops the move upwards, but on the current element all other handlers will run.
+En d'autres termes, `event.stopPropagation()` bloque seulement la remontée vers les parents, mais tous les gestionnaires s'exécuteront sur l'élément actuel.
 
-To stop the bubbling and prevent handlers on the current element from running, there's a method `event.stopImmediatePropagation()`. After it no other handlers execute.
+Pour stopper le 'bubbling' et empêcher les gestionnaires sur l'élément actuel de s'exécuter, il existe une méthode `event.stopImmediatePropagation()`. Après l'avoir appelée, aucun autre gestionnaire ne s'exécutera.
 ```
 
-```warn header="Don't stop bubbling without a need!"
-Bubbling is convenient. Don't stop it without a real need: obvious and architecturally well thought out.
+```warn header="Ne stoppez pas le 'bubbling' si ce n'est pas nécessaire!"
+Le 'bubbling' est utile, ne le stoppez pas sans en avoir le besoin technique ou architectural.
 
-Sometimes `event.stopPropagation()` creates hidden pitfalls that later may become problems.
+Parfois, même `event.stopPropagation()` crée des pièges cachés qui deviennent des problèmes plus tard.
 
-For instance:
+Par exemple:
 
-1. We create a nested menu. Each submenu handles clicks on its elements and calls `stopPropagation` so that the outer menu won't trigger.
-2. Later we decide to catch clicks on the whole window, to track users' behavior (where people click). Some analytic systems do that. Usually the code uses `document.addEventListener('click'…)` to catch all clicks.
-3. Our analytic won't work over the area where clicks are stopped by `stopPropagation`. Sadly, we've got a "dead zone".
+1. On crée un menu principal contenant des sous-menus. Chaque sous-menu gère les clics de ses sous-éléments et appelle la méthode `stopPropagation` pour ne pas propager l'événement au menu principal.
+2. Plus tard, on décide de traquer tous les clics sur la fenêtre, pour suivre le comportement des utilisateurs (où ils cliquent). Certains systèmes de récolte de données analytiques font exactement ça. Ils utilisent souvent `document.addEventListener('click'…)` pour récupérer tous les clics.
+3. Nos données analytiques seront manquantes pour la zone de la fenêtre où les clics sont stoppés par `stopPropagation`. Malheureusement, on vient de créer une "zone morte".
 
-There's usually no real need to prevent the bubbling. A task that seemingly requires that may be solved by other means. One of them is to use custom events, we'll cover them later. Also we can write our data into the `event` object in one handler and read it in another one, so we can pass to handlers on parents information about the processing below.
+Il n'y a généralement pas besoin de bloquer le 'bubbling'. Un problème qui semble nécessiter un tel blocage peut très souvent être résolu par d'autres moyens. L'un d'entre eux est l'utilisation d'événements personnalisés, que nous verrons plus tard. On peut aussi écrire des données dans l'objet `event` depuis un gestionnaire, et les lire depuis un autre gestionnaire; on peut ainsi transmettre des données relatives à l'élément cible aux gestionnaires des éléments parents.
 ```
 
 
-## Capturing
+## Capture
 
-There's another phase of event processing called "capturing". It is rarely used in real code, but sometimes can be useful.
+Il y a une autre phase de traitement des événements appelée "capture". Elle est rarement utilisée en pratique, mais peut être utile.
 
-The standard [DOM Events](https://www.w3.org/TR/DOM-Level-3-Events/) describes 3 phases of event propagation:
+Le standard [Evénements du DOM](https://www.w3.org/TR/DOM-Level-3-Events/) décrit les 3 phases de la propagation d'événement:
 
-1. Capturing phase -- the event goes down to the element.
-2. Target phase -- the event reached the target element.
-3. Bubbling phase -- the event bubbles up from the element.
+1. Phase de capture -- l'événement descend sur l'élément.
+2. Phase de ciblage -- l'événement a atteint l'élément cible.
+3. Phase de 'bubbling' -- l'événement remonte depuis l'élément.
 
-Here's the picture, taken from the specification, of the capturing `(1)`, target `(2)` and bubbling `(3)` phases for a click event on a `<td>` inside a table:
+Voici le schéma de la spécification des phases de capture `(1)`, ciblage `(2)` et 'bubbling' `(3)` pour un événement de clic sur un `<td>` dans une `<table>`:
 
 ![](eventflow.svg)
 
-That is: for a click on `<td>` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.
+Pour un clic sur le `<td>`, l'événement descend d'abord toute la chaîne d'ancêtres jusqu'à l'élément (phase de capture), puis se 'fixe' à la cible et se déclenche ici (phase de ciblage), et enfin remonte (phase de 'bubbling'), en appelant tous les gestionnaires sur son chemin.
 
-Until now, we only talked about bubbling, because the capturing phase is rarely used.
+Jusqu'à maintenant, on n'a parlé que que la phase de 'bubbling', car la phase de capture est rarement utilisée.
 
-In fact, the capturing phase was invisible for us, because handlers added using `on<event>`-property or using HTML attributes or using two-argument `addEventListener(event, handler)` don't know anything about capturing, they only run on the 2nd and 3rd phases.
+En réalité, la phase de capture nous était 'invisible', car les gestionnaires ajoutés via les propriétés `on<event>` ou utilisant les attributs HTML ou utilisant les 2 arguments de `addEventListener(event, handler)` ne savent rien de la phase de capture, ils ne s'exécutent que pendant la 2ème et 3ème phase.
 
-To catch an event on the capturing phase, we need to set the handler `capture` option to `true`:
+Pour détecter l'événement pendant la phase de capture, on peut mettre l'option `capture` à `true` dans le gestionnaire:
 
 ```js
 elem.addEventListener(..., {capture: true})
 
-// or, just "true" is an alias to {capture: true}
+// On peut aussi juste envoyer "true", qui est un alias de {capture: true}
 elem.addEventListener(..., true)
 ```
 
-There are two possible values of the `capture` option:
+L'option `capture` a 2 valeurs possibles:
 
-- If it's `false` (default), then the handler is set on the bubbling phase.
-- If it's `true`, then the handler is set on the capturing phase.
+- Si `false` (par défaut), le gestionnaire est défini sur la phase de 'bubbling'.
+- Si `true`, le gestionnaire est défini sur la phase de capture.
 
 
-Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.
+Notez que même si il y a 3 phases, la 2ème phase ("phase de ciblage": l'événement atteint l'élément) n'est pas géré séparément: les gestionnaires de phases de capture et de 'bubbling' se déclenchent tous les deux pendant cette phase.
 
-Let's see both capturing and bubbling in action:
+Voyons les phases de capture et de 'bubbling' en action:
 
 ```html run autorun height=140 edit
 <style>
@@ -171,63 +171,61 @@ Let's see both capturing and bubbling in action:
 
 <script>
   for(let elem of document.querySelectorAll('*')) {
-    elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
+    elem.addEventListener("click", e => alert(`Capture: ${elem.tagName}`), true);
     elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
   }
 </script>
 ```
 
-The code sets click handlers on *every* element in the document to see which ones are working.
+Ce code ajoute un gestionnaire pour les événements "clic" sur *tous* les éléments du document pour voir lesquels fonctionnent.
 
-If you click on `<p>`, then the sequence is:
+Si on clique sur `<p>`, la séquence est:
 
-1. `HTML` -> `BODY` -> `FORM` -> `DIV -> P` (capturing phase, the first listener):
-2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
+1. `HTML` -> `BODY` -> `FORM` -> `DIV` -> `P` (phase de capture):
+2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (phase de 'bubbling').
 
-Please note, the `P` shows up twice, because we've set two listeners: capturing and bubbling. The target triggers at the end of the first and at the beginning of the second phase.
+Notez que le `P` apparait 2 fois, car on écoute 2 événements: la capture et le 'bubbling'. Le `<p>` cible se déclenche à la fin de la première phase, et au début de la deuxième.
 
-There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.
+Il y a une propriété `event.eventPhase` qui nous donne le numéro de la phase où l'événement s'est produit. Mais celle-ci est rarement utilisée, car on connait déjà implictement la phase grâce au gestionnaire.
 
-```smart header="To remove the handler, `removeEventListener` needs the same phase"
-If we `addEventListener(..., true)`, then we should mention the same phase in `removeEventListener(..., true)` to correctly remove the handler.
+```smart header="Pour supprimer le gestionnaire, `removeEventListener` a besoin de la même phase"
+Si on appelle `addEventListener(..., true)`, on doit rementionner la même phase dans `removeEventListener(..., true)` pour supprimer correctement le gestionnaire.
 ```
 
-````smart header="Listeners on the same element and same phase run in their set order"
-If we have multiple event handlers on the same phase, assigned to the same element with `addEventListener`, they run in the same order as they are created:
+````smart header="Les gestionnaires sur le même élément et la même phase s'exécutent dans un ordre prédéfini"
+Si on a plusieurs gestionnaires d'événements sur la même phase, assignés au même élément avec `addEventListener`, ils s'exécuteront dans l'ordre où ils ont été créés:
 
 ```js
-elem.addEventListener("click", e => alert(1)); // guaranteed to trigger first
+elem.addEventListener("click", e => alert(1)); // Se déclenchera toujours en premier
 elem.addEventListener("click", e => alert(2));
 ```
 ````
 
-```smart header="The `event.stopPropagation()` during the capturing also prevents the bubbling"
-The `event.stopPropagation()` method and its sibling `event.stopImmediatePropagation()` can also be called on the capturing phase. Then not only the futher capturing is stopped, but the bubbling as well.
-
-In other words, normally the event goes first down ("capturing") and then up ("bubbling"). But if `event.stopPropagation()` is called during the capturing phase, then the event travel stops, no bubbling will occur.
+```smart header="Appeler `event.stopPropagation()` pendant la capture empêche aussi le 'bubbling'"
+La méthode `event.stopPropagation()` et sa méthode soeur `event.stopImmediatePropagation()` peuvent aussi être appelées pendant la phase de capture. Si c'est le cas, la capture s'arrête, et le 'bubbling' n'a jamais lieu.
 ```
 
 
-## Summary
+## Résumé
 
-When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
+Quand un événement se produit, l'élément le plus bas dans la hiérarchie est désigné comme "l'élément cible" (`event.target`).
 
-- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(..., true)` on the way (`true` is a shorthand for `{capture: true}`).
-- Then handlers are called on the target element itself.
-- Then the event bubbles up from `event.target` to the root, calling handlers assigned using `on<event>`, HTML attributes and `addEventListener` without the 3rd argument or with the 3rd argument `false/{capture:false}`.
+- Puis l'événement descend depuis la racine du document jusqu'à `event.target`, en appelant tous les gestionnaires ajoutés via `addEventListener(..., true)` sur sa route (`true` étant un raccourci pour `{capture: true}`).
+- Puis les gestionnaires sont appelés sur l'élément cible lui-même.
+- Puis l'événement remonte (ou 'bubble') depuis `event.target` jusqu'à la racine, en appelant les gestionnaires assignés via `on<événement>`, un attribut HTML, ou `addEventListener` avec ou sans le troisième argument `false/{capture:false}`.
 
-Each handler can access `event` object properties:
+Chaque gestionnaire peut accéder aux propriétés de l'objet `event`:
 
-- `event.target` -- the deepest element that originated the event.
-- `event.currentTarget` (=`this`) -- the current element that handles the event (the one that has the handler on it)
-- `event.eventPhase` -- the current phase (capturing=1, target=2, bubbling=3).
+- `event.target` -- l'élément le plus profond du DOM d'où vient l'événement.
+- `event.currentTarget` (=`this`) -- l'élément qui est actuellement en train de gérer l'événement
+- `event.eventPhase` -- la phase actuelle (capture=1, ciblage=2, bubbling=3).
 
-Any event handler can stop the event by calling `event.stopPropagation()`, but that's not recommended, because we can't really be sure we won't need it above, maybe for completely different things.
+N'importe quel gestionnaire peut stopper l'événement en appelant `event.stopPropagation()`, mais ce n'est pas recommandé, car on ne peut pas être sûr qu'on ne va pas en avoir besoin plus haut dans le DOM, peut-être pour quelque chose de complètement différent.
 
-The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logical explanation for that.
+La phase de capture est très rarement utilisée; on gère plutôt les événéments pendant le 'bubbling'. Et il y a une explication logique à ça.
 
-In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.
+Dans le monde réel, quand un accident se produit, les autorités locales réagissent en premier. Elles connaissent mieux les lieux où l'accident s'est produit. Puis elles font appel à une plus haute autorité.
 
-The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular `<td>` may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last one.
+C'est la même chose pour les gestionnaires d'événements. Le code qui définit le gestionnaire sur un élément spécifique est celui connait le mieux l'élément et ce qu'il fait. Un gestionnaire ajouté sur un `<td>` particulier peut être spécifiquement adapté pour ce `<td>` là; il le connait très bien, et devrait donc avoir sa chance en premier avant tous les autres. Son parent immédiat connait aussi le contexte, mais un peu moins, et ainsi de suite jusqu'à l'élément racine qui s'exécutera en dernier.
 
-Bubbling and capturing lay the foundation for "event delegation" -- an extremely powerful event handling pattern that we study in the next chapter.
+Le 'bubbling' et la capture sont les fondations de la "délégation d'événements" -- un modèle de gestion d'événement extrêmement puissant que nous verrons dans le prochain chapitre.
diff --git a/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html
index 8313ec29f..bf96ef8b6 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html
+++ b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/index.html
@@ -7,7 +7,7 @@
 </head>
 
 <body>
-  A click shows both <code>event.target</code> and <code>this</code> to compare:
+  Un clic affiche les valeurs de <code>event.target</code> et de <code>this</code> pour les comparer:
 
   <form id="form">FORM
     <div>DIV
diff --git a/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/script.js b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/script.js
index b1353712f..d34a95031 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/script.js
+++ b/2-ui/2-events/02-bubbling-and-capturing/bubble-target.view/script.js
@@ -2,7 +2,7 @@
 form.onclick = function(event) {
   event.target.style.backgroundColor = 'yellow';
 
-  // chrome needs some time to paint yellow
+  // Le navigateur a besoin d'un peu de temps pour peindre en jaune
   setTimeout(() => {
     alert("target = " + event.target.tagName + ", this=" + this.tagName);
     event.target.style.backgroundColor = ''
diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
index b62d99089..62a37e38e 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
+++ b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="event-order-bubbling.svg"><path id="Rectangle-210" fill="#DBAF88" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#91C2A3" stroke-width="18" d="M173.634 81l16.09 51H43.276l16.09-51h114.267z"/><path id="Rectangle-208" stroke="#EFA39F" stroke-width="18" d="M39.986 29h153.028l22.71 72H17.276l22.71-72z"/><path id="Fill-46" fill="#166388" d="M121.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM117 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L121.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="1" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="event-order-bubbling.svg"><path id="Rectangle-210" fill="#DBAF88" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#91C2A3" stroke-width="18" d="M173.634 81l16.09 51H43.276l16.09-51h114.267z"/><path id="Rectangle-208" stroke="#EFA39F" stroke-width="18" d="M39.986 29h153.028l22.71 72H17.276l22.71-72z"/><path id="Fill-46" fill="#166388" d="M121.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM117 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L121.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="1" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="227" y="183">Elément</tspan> <tspan x="201.306" y="200">le plus imbriqué</tspan></text><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg>
\ No newline at end of file
diff --git a/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg b/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg
index 566064cd6..35e9230d7 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg
+++ b/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="641" height="633" viewBox="0 0 641 633"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventflow" transform="translate(22 28)"><g id="nodes"><g id="Group" transform="translate(224.685)"><path id="Rectangle-path" fill="#D1CFCD" stroke="#181717" d="M0 0h134.427v34.567H0z"/><text id="Window" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="39.368" y="21.913">Window</tspan></text></g><g id="Group" transform="translate(234.287 60.493)"><path id="Rectangle-path" fill="#D1CFCD" stroke="#181717" d="M0 0h115.223v34.567H0z"/><text id="Document" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="22.084" y="21.913">Document</tspan></text></g><g id="html-node" transform="translate(243.889 120.985)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;html&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;html&gt;</tspan></text></g><g id="body-node" transform="translate(243.889 181.478)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;body&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;body&gt;</tspan></text></g><g id="table-node" transform="translate(243.889 241.97)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;table&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;table&gt;</tspan></text></g><g id="tbody-node" transform="translate(243.889 302.463)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tbody&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="19.204" y="21.913">&lt;tbody&gt;</tspan></text></g><g id="tr_1-node" transform="translate(80.656 380.239)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tr&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="35.527" y="21.913">&lt;tr&gt;</tspan></text></g><g id="tr_2-node" transform="translate(426.325 380.239)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tr&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;tr&gt;</tspan></text></g><g id="tr_1_td_1-node" transform="translate(13.443 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="31.686" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_1_td_1_text-node" transform="translate(0 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Shady-Grove" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="19.204" y="34.604">Shady Grove</tspan></text></g><g id="tr_1_td_2-node" transform="translate(147.87 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_1_td_2_text-node" transform="translate(134.427 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Aeolian" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="36.967" y="34.604">Aeolian</tspan></text></g><g id="tr_2_td_1-node" transform="translate(359.111 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#FFF" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#C06334" fill-rule="nonzero" font-family="PTMono-Regular, PT Mono" font-size="15.555" font-weight="normal"><tspan x="27.846" y="22.37">&lt;td&gt;</tspan></text></g><g id="tr_2_td_1_text-node" transform="translate(345.669 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><g id="Group" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal" transform="translate(12.482 14.555)"><text id="Over-the-River,"><tspan x=".48" y="14">Over the River,</tspan></text><text id="Charlie"><tspan x="25.925" y="31.284">Charlie</tspan></text></g></g><g id="tr_2_td_2-node" transform="translate(493.538 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_2_td_2_text-node" transform="translate(480.096 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Dorian" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="39.848" y="34.604">Dorian</tspan></text></g></g><g id="edges" stroke="#7E7C7B" stroke-width="2" transform="translate(61.452 34.567)"><path id="window-document" fill="#7E7C7B" d="M230.446 0v19.876"/><path id="document-html" fill="#7E7C7B" d="M230.446 60.493v19.876"/><path id="html-body" fill="#7E7C7B" d="M230.446 120.985v19.876"/><path id="body-table" fill="#7E7C7B" d="M230.446 181.478v19.876"/><path id="table-tbody" fill="#7E7C7B" d="M230.446 241.97v19.876"/><path id="tbody-tr_1" d="M230.446 302.463c0 11.522-16.003 17.283-48.01 17.283H86.417c-12.802 0-19.204 6.626-19.204 19.876"/><path id="tbody-tr_2" d="M230.446 302.463c0 11.522 22.404 17.283 67.213 17.283h96.02c12.802 0 19.203 6.626 19.203 19.876"/><path id="tr_1-tr_2_td_1" d="M67.213 380.239c0 11.522-6.4 17.283-19.203 17.283H19.204C6.4 397.522 0 404.148 0 417.4"/><path id="tr_1-tr_2_td_2" d="M67.213 380.239c0 11.522 6.402 17.283 19.204 17.283h28.806c12.802 0 19.204 6.626 19.204 19.877"/><path id="tr_2-tr_2_td_1" d="M412.882 380.239c0 11.522-6.401 17.283-19.204 17.283h-28.805c-12.803 0-19.204 6.626-19.204 19.877"/><path id="tr_2-tr_2_td_2" d="M412.882 380.239c0 11.522 12.803 17.283 38.408 17.283h9.602c12.802 0 19.204 6.626 19.204 19.877"/><path id="tr_1_td_1-text" fill="#7E7C7B" d="M0 458.015v19.876"/><path id="tr_1_td_2-text" fill="#7E7C7B" d="M134.427 458.015v19.876"/><path id="tr_2_td_1-text" fill="#7E7C7B" d="M345.669 458.015v19.876"/><path id="tr_2_td_2-text" fill="#7E7C7B" d="M482.016 458.015v19.876"/></g><g id="event-flow" transform="translate(103.7 15.443)"><g id="target_phase" transform="translate(186.757 442.572)"><text id="Target" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x=".48" y="34.148">Target</tspan></text><text id="Phase" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="0" y="51.431">Phase</tspan></text><text id="(2)" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="15.363" y="68.715">(2)</tspan></text><rect id="Rectangle-path" width="96.019" height="34.567" x="68.654" y="0" stroke="#C06334" stroke-width="4" rx="5"/></g><g id="capture_phase"><text id="Capture" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="0" y="165.615">Capture</tspan></text><text id="Phase" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="7.201" y="182.899">Phase</tspan></text><text id="(1)" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="22.564" y="200.182">(1)</tspan></text><path id="capture_phase_arrow" stroke="#D35155" stroke-width="3" d="M116.183.112c-38.408-2.593-38.408 40.616 2.88 49.258"/><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(92.178 59.74)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 120.233)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 180.725)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 241.218)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><path id="capture_phase_arrow2" stroke="#D35155" stroke-width="3" d="M125.785 302.575c-38.408-2.593-38.408 82.097 175.715 69.134"/><path id="capture_phase_arrow3" stroke="#D35155" stroke-width="3" d="M301.5 384.672c-94.099-2.593-94.099 51.85-62.412 64.813"/></g><g id="bubble_phase" transform="translate(250.61 12.21)"><text id="Bubbling" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="72.975" y="239.822">Bubbling</tspan></text><text id="Phase" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="83.057" y="257.106">Phase</tspan></text><text id="(3)" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="98.42" y="274.39">(3)</tspan></text><path id="bubble_phase_arrow3" stroke="#478964" stroke-width="3" d="M112.342 437.275c132.507-56.172 132.507-67.406 67.214-64.814"/><path id="bubble_phase_arrow2" stroke="#478964" stroke-width="3" d="M182.436 358.634c38.408-8.641 38.408-50.986-180.516-59.628"/><path id="bubble_phase_arrow" stroke="#478964" stroke-width="3" d="M0 287.772c38.408-2.593 38.408-37.16 0-45.802"/><g id="bubble_phase_arrow-link" stroke="#478964" stroke-width="3" transform="translate(0 181.478)"><path id="bubble_phase_arrow" d="M0 45.801C38.408 43.21 38.408 8.641 0 0"/></g><g id="bubble_phase_arrow-link" stroke="#478964" stroke-width="3" transform="translate(0 120.985)"><path id="bubble_phase_arrow" d="M0 45.801C38.408 43.21 38.408 8.641 0 0"/></g><path id="bubble_phase_arrow4" stroke="#478964" stroke-width="3" d="M0 106.294c48.01-2.593 48.01-37.16 9.602-45.801"/><path id="bubble_phase_arrow" stroke="#478964" stroke-width="3" d="M9.602 45.801C57.612 43.21 57.612 8.641 19.204 0"/></g></g></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="641" height="633" viewBox="0 0 641 633"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventflow" transform="translate(22 28)"><g id="nodes"><g id="Group" transform="translate(224.685)"><path id="Rectangle-path" fill="#D1CFCD" stroke="#181717" d="M0 0h134.427v34.567H0z"/><text id="Window" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="39.368" y="21.913">Window</tspan></text></g><g id="Group" transform="translate(234.287 60.493)"><path id="Rectangle-path" fill="#D1CFCD" stroke="#181717" d="M0 0h115.223v34.567H0z"/><text id="Document" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="22.084" y="21.913">Document</tspan></text></g><g id="html-node" transform="translate(243.889 120.985)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;html&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;html&gt;</tspan></text></g><g id="body-node" transform="translate(243.889 181.478)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;body&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;body&gt;</tspan></text></g><g id="table-node" transform="translate(243.889 241.97)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;table&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="23.045" y="21.913">&lt;table&gt;</tspan></text></g><g id="tbody-node" transform="translate(243.889 302.463)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tbody&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="19.204" y="21.913">&lt;tbody&gt;</tspan></text></g><g id="tr_1-node" transform="translate(80.656 380.239)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tr&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="35.527" y="21.913">&lt;tr&gt;</tspan></text></g><g id="tr_2-node" transform="translate(426.325 380.239)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;tr&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;tr&gt;</tspan></text></g><g id="tr_1_td_1-node" transform="translate(13.443 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="31.686" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_1_td_1_text-node" transform="translate(0 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Shady-Grove" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="19.204" y="34.604">Shady Grove</tspan></text></g><g id="tr_1_td_2-node" transform="translate(147.87 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_1_td_2_text-node" transform="translate(134.427 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Aeolian" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="36.967" y="34.604">Aeolian</tspan></text></g><g id="tr_2_td_1-node" transform="translate(359.111 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#FFF" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#C06334" fill-rule="nonzero" font-family="PTMono-Regular, PT Mono" font-size="15.555" font-weight="normal"><tspan x="27.846" y="22.37">&lt;td&gt;</tspan></text></g><g id="tr_2_td_1_text-node" transform="translate(345.669 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><g id="Group" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal" transform="translate(12.482 14.555)"><text id="Over-the-River,"><tspan x=".48" y="14">Over the River,</tspan></text><text id="Charlie"><tspan x="25.925" y="31.284">Charlie</tspan></text></g></g><g id="tr_2_td_2-node" transform="translate(493.538 458.015)"><rect id="Rectangle-path" width="96.019" height="34.567" x="0" y="0" fill="#C9DCEA" stroke="#181717" rx="5"/><text id="&lt;td&gt;" fill="#181717" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="15.555" font-weight="normal"><tspan x="33.607" y="21.913">&lt;td&gt;</tspan></text></g><g id="tr_2_td_2_text-node" transform="translate(480.096 518.507)"><ellipse id="Oval" cx="61.452" cy="30.246" fill="#1C85B5" stroke="#181717" rx="61.452" ry="30.246"/><text id="Dorian" fill="#FFF" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="12.963" font-weight="normal"><tspan x="39.848" y="34.604">Dorian</tspan></text></g></g><g id="edges" stroke="#7E7C7B" stroke-width="2" transform="translate(61.452 34.567)"><path id="window-document" fill="#7E7C7B" d="M230.446 0v19.876"/><path id="document-html" fill="#7E7C7B" d="M230.446 60.493v19.876"/><path id="html-body" fill="#7E7C7B" d="M230.446 120.985v19.876"/><path id="body-table" fill="#7E7C7B" d="M230.446 181.478v19.876"/><path id="table-tbody" fill="#7E7C7B" d="M230.446 241.97v19.876"/><path id="tbody-tr_1" d="M230.446 302.463c0 11.522-16.003 17.283-48.01 17.283H86.417c-12.802 0-19.204 6.626-19.204 19.876"/><path id="tbody-tr_2" d="M230.446 302.463c0 11.522 22.404 17.283 67.213 17.283h96.02c12.802 0 19.203 6.626 19.203 19.876"/><path id="tr_1-tr_2_td_1" d="M67.213 380.239c0 11.522-6.4 17.283-19.203 17.283H19.204C6.4 397.522 0 404.148 0 417.4"/><path id="tr_1-tr_2_td_2" d="M67.213 380.239c0 11.522 6.402 17.283 19.204 17.283h28.806c12.802 0 19.204 6.626 19.204 19.877"/><path id="tr_2-tr_2_td_1" d="M412.882 380.239c0 11.522-6.401 17.283-19.204 17.283h-28.805c-12.803 0-19.204 6.626-19.204 19.877"/><path id="tr_2-tr_2_td_2" d="M412.882 380.239c0 11.522 12.803 17.283 38.408 17.283h9.602c12.802 0 19.204 6.626 19.204 19.877"/><path id="tr_1_td_1-text" fill="#7E7C7B" d="M0 458.015v19.876"/><path id="tr_1_td_2-text" fill="#7E7C7B" d="M134.427 458.015v19.876"/><path id="tr_2_td_1-text" fill="#7E7C7B" d="M345.669 458.015v19.876"/><path id="tr_2_td_2-text" fill="#7E7C7B" d="M482.016 458.015v19.876"/></g><g id="event-flow" transform="translate(103.7 15.443)"><g id="target_phase" transform="translate(186.757 442.572)"><text id="Target" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="-5.48" y="34.148">Phase de</tspan></text><text id="Phase" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="0" y="50.431">ciblage</tspan></text><text id="(2)" fill="#C06334" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="15.363" y="68.715">(2)</tspan></text><rect id="Rectangle-path" width="96.019" height="34.567" x="68.654" y="0" stroke="#C06334" stroke-width="4" rx="5"/></g><g id="capture_phase"><text id="Capture" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="0" y="163.615">Phase de</tspan></text><text id="Phase" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="7.201" y="182.899">capture</tspan></text><text id="(1)" fill="#D35155" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="22.564" y="202.182">(1)</tspan></text><path id="capture_phase_arrow" stroke="#D35155" stroke-width="3" d="M116.183.112c-38.408-2.593-38.408 40.616 2.88 49.258"/><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(92.178 59.74)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 120.233)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 180.725)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><g id="capture_phase_arrow-link" stroke="#D35155" stroke-width="3" transform="translate(96.98 241.218)"><path id="capture_phase_arrow" d="M28.806.864c-38.408-2.592-38.408 40.617 2.88 49.258"/></g><path id="capture_phase_arrow2" stroke="#D35155" stroke-width="3" d="M125.785 302.575c-38.408-2.593-38.408 82.097 175.715 69.134"/><path id="capture_phase_arrow3" stroke="#D35155" stroke-width="3" d="M301.5 384.672c-94.099-2.593-94.099 51.85-62.412 64.813"/></g><g id="bubble_phase" transform="translate(250.61 12.21)"><text id="Bubbling" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="72.975" y="239.822">Phase de</tspan></text><text id="Phase" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="69.057" y="257.106">'bubbling'</tspan></text><text id="(3)" fill="#478964" fill-rule="nonzero" font-family="OpenSans-Regular, Open Sans" font-size="17.284" font-weight="normal"><tspan x="95.42" y="275.39">(3)</tspan></text><path id="bubble_phase_arrow3" stroke="#478964" stroke-width="3" d="M112.342 437.275c132.507-56.172 132.507-67.406 67.214-64.814"/><path id="bubble_phase_arrow2" stroke="#478964" stroke-width="3" d="M182.436 358.634c38.408-8.641 38.408-50.986-180.516-59.628"/><path id="bubble_phase_arrow" stroke="#478964" stroke-width="3" d="M0 287.772c38.408-2.593 38.408-37.16 0-45.802"/><g id="bubble_phase_arrow-link" stroke="#478964" stroke-width="3" transform="translate(0 181.478)"><path id="bubble_phase_arrow" d="M0 45.801C38.408 43.21 38.408 8.641 0 0"/></g><g id="bubble_phase_arrow-link" stroke="#478964" stroke-width="3" transform="translate(0 120.985)"><path id="bubble_phase_arrow" d="M0 45.801C38.408 43.21 38.408 8.641 0 0"/></g><path id="bubble_phase_arrow4" stroke="#478964" stroke-width="3" d="M0 106.294c48.01-2.593 48.01-37.16 9.602-45.801"/><path id="bubble_phase_arrow" stroke="#478964" stroke-width="3" d="M9.602 45.801C57.612 43.21 57.612 8.641 19.204 0"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/2-ui/2-events/index.md b/2-ui/2-events/index.md
index f4996083c..3814932c1 100644
--- a/2-ui/2-events/index.md
+++ b/2-ui/2-events/index.md
@@ -1,3 +1,3 @@
-# Introduction to Events
+# Introduction aux Evénements
 
-An introduction to browser events, event properties and handling patterns.
+Une introduction aux événements du navigateurs, leurs propriétés et leurs modèles de gestion.