Contenu Base HTML

src/articles/index.md

+# Note de développement
+
+## Intégration web
+
+ - [Présentation des technologies du web](integration-web/presentation-html5.html)
+ - [Première page web](integration-web/premiere-page-web.html)
+ - [Modèle de boîte](integration-web/modele-de-boite.html)
+ - [Mise en page avec les **Flexbox**](integration-web/css3-flexbox.html)
+
+## UI
+
+
+## Développement PHP

src/articles/integration-web/css3-flexbox.md

+# Comprendre les FLEXBOX
+
+Les **flexbox** sont un dispositif de mise en page introduit avec le *CSS3* pour faciliter l'organisation des contenus. Ils remplacent avantageusement les mécanismes basés sur `float` utilisés en **CSS2**.
+
+## préambule
+
+Voice le code de base que nous allons faire évoluer tout au long de l'article :
+
+```html
+<!-- Code CSS -->
+<div class="conteneur">
+  <div class="element orange">A</div>
+  <div class="element jaune">B</div>
+  <div class="element cyan">C</div>
+  <div class="element rouge">D</div>
+  <div class="element vert">E</div>
+</div>
+```
+
+```css
+/**** MISE en PAGE ****/
+.conteneur {
+  /* Y'aura du code ici... */
+}
+
+.element {
+  /* ... et là */
+}
+
+/**** MISE en FORME ****/
+/* Cette partie sert uniquement à gérer l'apparence afin
+de rendre le résultat plus 'visuel'  */
+.conteneur {
+  background: purple;
+  padding: 1em;
+}
+
+.elem {
+  font-size: 2em;  
+}
+
+.orange { background: orange; }
+.jaune { background: yellow; }
+.cyan { background: cyan; }
+.rouge { background: red; }
+.vert { background: green; }
+```
+
+Ce qui donne :
+![Rendu de base](../../images/css3-flexbox-rendu-001.png)
+
+## Les bases
+
+### flex et inline-flex
+
+Le modèle de boîte doit s'activer **sur l'élément conteneur** (celui qui contient les éléments à mettre en page), en renseignant la valeur `display` avec les valeurs  `flex` ou `inline-flex` .
+
+```css
+/**** MISE en PAGE ****/
+.conteneur {
+  display: flex;
+}
+```
+
+![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-002.png)
+
+La valeur `inline-flex` ajoute un compotement **inline** au conteneur : 
+
+```css
+/**** MISE en PAGE ****/
+.conteneur {
+  display: inline-flex;
+}
+```
+
+![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-003.png)
+
+L'activation des *flexbox* se déclenche en utilisant les valeurs :
+
+* `flex` : le conteneur se comporte comme un **block**
+* `inline-flex` : le conteneur se comporte comme un élément **inline**
+
+### Gérer la direction avec `flex-direction`
+
+La propriété `flex-direction` permet de fixer le comportement général des éléments dans le conteneur. par défaut, les éléments s'affichent en ligne (valeur `row`).
+
+```css
+/**** MISE en PAGE ****/
+.conteneur {
+  display: inline-flex;
+  flex-direction: row;
+}
+```
+Les valeurs disponibles sont : 
+ * `row` *(par défaut)* Le conteneur se comporte comme une ligne d'éléments alignés à gauche dans le sens de la lecture,
+ * `row-reverse` Les éléments sont alignés à droite et sont inversés
+ * `column` Le conteneur se comporte comme une colonne, les éléments sont affichés de haut en bas
+ * `column-reverse` Idem, mais les éléments sont inversés
+
+A noter que la valeur `column-reverse` justify les éléments en bas du conteneur. Vous pouvez le vérifier en appliquant arbitrairement une hauteur à ce dernier : `height: 250px`
+
+```css
+/**** MISE en PAGE ****/
+.conteneur {
+  display: flex;
+  flex-direction: column-reverse;
+  height: 250px;
+}
+```
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-004.png)
+
+### Réorganiser les éléments avec `order`
+
+La propriété `order` permet de modifier l'ordre d'affichage d'un élément spécifique. Par défaut, cette valeur est fixée à 0, mais elle peut être modifié sur chaque éléments pour réorganiser l'enchainement des éléments dans le conteneur.
+
+```css
+.conteneur {
+  display: flex;
+}
+.rouge {
+    order: -1;
+}
+```
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-005.png)
+
+Vous pouvez ainsi complètement modifier la disposition des éléments dans le conteneur.
+
+### Emballage des éléments avec `flex-wrap`
+
+Dans notre exemple, les éléments ont assez de place pour tenir dans le conteneur car ils comportent peu de contenu. Mais il faut garder à l'esprit que la règle **le contenu l'emporte** s'applique également aux flexbox : 
+
+Ajouter un peu de contenu dans les éléments HTML : 
+
+```html
+<div class="conteneur">
+  <div class="element orange">ORANGE</div>
+  <div class="element jaune">JAUNE</div>
+  <div class="element cyan">CYAN</div>
+  <div class="element rouge">ROUGE</div>
+  <div class="element vert">VERT</div>
+</div>
+```
+
+Puis réduisez la largeur de la fenêtre en largeur, vous verrez le contenu disparaître vers la droite : 
+
+![Sans flex-wrap, le contenu dépasse sur la droite](../../images/css3-flexbox-rendu-006.png)
+
+La propriétés `flex-wrap` (*nowrap*, `wrap`, `wrap-reverse`) va forcer la *flexbox* à adapter l'embalage.
+
+La valeur `wrap` va autoriser la flexbox à ajouter des lignes (ou des colonnes) pour garantir l'affichage du contenu : 
+
+```css
+.conteneur {
+  display: flex;
+  flex-wrap: wrap;
+}
+```
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-007.png)
+
+La valeur wrap-reverse inverse la disposition des lignes.
+
+A noter que `flex-wrap` ne semble pas donner de résultat si `flex-direction` est réglé sur `column`. Mais il a bien un effet, pour l'observer, ajouter une hauteur au conteneur : 
+
+```css
+.conteneur {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  height: 7em;
+}
+```
+
+## Gérer la taille des éléments
+
+La taille des éléments d'un flexbox s'ajuste avec 3 propriétés : 
+
+* `flex-grow` : Agrandissement
+* `flex-shrink` : Contraction
+* `flex-basis` : Taille optimale
+* `flex` : Forme compacte de ces 3 propriétés
+
+### Élargir les éléments avec `flex-grow`
+
+La propriété `flex-grow` permet, au sein d'un item,  de définir la façon dont la taille de l'élément peut être élargi. Par défaut, `flex-grow` est fixé à 0, donc les éléments ne s'élargissent, leurs taille maximum correspond à leur taille initiale.
+
+En mettant la valeur 1 à tout les éléments, la *flexbox* va recalculer la largeur des éléments en équilibrant leur occupation (tous à la même taille) pour occuper toute la largeur disponible dans le conteneur : 
+
+```css
+.conteneur {
+  display: flex;
+}
+
+.element {
+  flex-grow: 1;
+}
+```
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-008.png)
+
+En jouant sur la largeur de la fenêtre, vous verrez la largeur des éléments s'adapter en fonction de l'espace disponible. Vous pouvez constater que la largeur est identique pour chaques éléments, peut importe son contenu.
+
+Vous pouvez ensuite jouer avec la valeur de `flex-grow` (qui doit être un entier strictement positif) pour répartir la distribution de l'espace disponible différement en fonction de l'élément : 
+
+```css
+.conteneur {
+  display: flex;
+}
+
+.element {
+  flex-grow: 1;
+}
+.orange {
+	/* orange sera 3 fois plus grand que les autres */
+    flex-grow: 3;
+}
+.vert {
+    /* Vert n'est pas autorisé à grandir */
+    flex-grow: 0;
+}
+```
+
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-009.png)
+
+Pour observer le résultat avec un direction en colonne avec `flex-direction:column`, pensez à ajouter une hauteur au conteneur : 
+
+```css
+.conteneur {
+  display: flex;
+  flex-direction: column;
+  height: 350px;
+}
+
+.element {
+  flex-grow: 1;
+}
+
+.orange {
+  flex-grow: 3;
+}
+
+.vert {
+  flex-grow: 0;
+}
+```
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-010.png)
+
+### Taille initale avec flex-basis
+
+Par défaut, la taille des éléments est établie en fonction du contenu. la propriété `flex-basis` permet de définir la taille initiale d'un élément avant que l'espace disponible soit redistribué entre les éléments.
+
+Par exemple, nous pouvons indiquer comme largeur optimale 200px, et interdire le bloc orange de grandir en fixant `flex-grow` à 0 : 
+
+```css
+.conteneur {
+  display: flex;
+}
+
+.element {
+  flex-grow: 1;
+}
+.orange {
+    flex-grow: 0;
+    /* Taille initiale de 200 */
+    flex-basis: 200px;
+}
+```
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-011.png)
+
+En jouant sur la largeur de la fenêtre, vous constaterez que la zone orange peut rétrécir, mais ne dépasse pas les 200 pixels en largeur lorsque l'on élargi la fenêtre.
+
+### Contraction avec `flex-shrink`
+
+La propriétés `flex-shrink`permet quand à elle de configurer le rétrécissement des éléments (C'est la même mécanique de `flex-grow`, mais ).
+
+```css
+.conteneur {
+  display: flex;
+}
+.element {
+  flex-grow: 1;
+}
+/* Orange ne peut pas rétécir ou s'agrandir. 
+	Sa taille est de 200px */
+.orange {
+	flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: 200px;
+}
+```
+
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-012.png)
+
+### Forme compacte avec `flex`
+
+TODO
+
+## Alignement et positionnement des éléments
+
+### Justification et alignement
+
+#### `Alignement dans l'axe principal : justify-content`
+
+La propriété `justify-content` permet de définir la façon ton les éléments vont s'aligner le long de l'axe principal (Axe horizontal). 
+
+Petit récap des valeurs possibles : 
+
+![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-013.png)
+
+##### flex-start
+
+Les éléments sont alignés au début de la *flexbox* ; à gauche ou en haut selon la valeur de `flex-direction`. C'est le réglage par défaut.
+
+```css
+.conteneur {
+  display: flex;
+  justify-content: flex-start;
+}
+```
+
+##### flex-end
+
+Les éléments sont alignés à la fin de la *flexbox* ; à droite ou en bas selon la valeur de `flex-direction`
+
+```css
+.conteneur {
+  display: flex;
+  justify-content: flex-end;
+}
+```
+##### center
+
+Les éléments sont alignés à la fin de la *flexbox* ; à droite ou en bas selon la valeur de `flex-direction`
+
+```css
+.conteneur {
+  display: flex;
+  justify-content: center;
+}
+```
\ No newline at end of file

src/articles/integration-web/modele-de-boite.md

+# CSS : Le modèle de boîte
+
+Une des clefs pour maîtriser la mise en page avec CSS, c'est de bien comprendre le **modèle de boîte**.
+
+##

src/articles/integration-web/position.md

+# Positionnement CSS

src/articles/integration-web/premiere-page-web.md

+# Débuter en HTML (Votre première page web)
+
+## Page web, document HTML
+
+Le code HTML s'écrit dans des **fichiers HTML** ; Les fichiers HTML sont de simples fichiers texte.
+
+N'importe quel éditeur de texte suffit pour éditer du HTML.
+
+Par convention, on utilise l'extention `*.html` (ou `*.htm` pour les puristes).
+
+Pour tester le résultat, il suffit de l'ouvrir dans un navigateur.
+
+## Editeur
+
+Pour faire du HTML, il faut un éditeur de texte, pour débuter voici quelques éditeurs très performants :
+
+ - **Sublim Text** (Presque payant) Un des plus populaire chez les développeurs web
+ - **Notepad++** Très utilisé sous Windows
+ - **Bracket** Très pratique pour débuter (coloration du code, aperçu en directe) http://brackets.io/
+ - **Atom** Un éditeur léger et efficace https://atom.io/
+
+## Premier contenu
+
+Créez un fichier `index.html` dans l'éditeur avec ce contenu :
+
+```
+Bonjour Monde !
+```
+
+Utilisez le menu Fichier/ouvrir du navigateur pour afficher le fichier :
+
+![Résulat](../../images/html-bonjour-monde.png)
+
+<div class="info">Même rudimentaire, nous avons une page web</div>
+
+
+## HTML
+
+Le **code source** HTML permet de structurer les informations avec des **balises**.
+
+Les balises sont **toujours entourées de chevrons**
+
+Dans 99% des cas, un nom de balise est écrit en minuscule et ne contient pas de caractères accentués, ni espaces.
+
+![Résulat](../../images/balise.svg)
+
+
+## Types de balises
+
+On distingues différentes formes de balises :
+
+ - Les balises ouvrantes, ex: `<h1>`, `<p>`,
+ - Les balises fermantes, ex: `</h1>`, `</p>`,
+ - Les balises orphelines (ou auto-fermantes)ex: `<br />`,
+
+## Balises ouvrantes et fermantes
+
+Les balises **ouvrantes** et **fermantes** permettent de délimiter du contenu. C'est le cas le plus répandu :
+
+```html
+<h1>Ce contenu sera un titre</h1>
+<p>
+    Ce contenu sera un paragraphe,
+    avec
+    <strong>
+        ce texte en gras
+    </strong>
+</p>
+```
+
+![Résultat](../../images/balises-ouvrantes-fermantes.svg)
+
+
+## Balises auto-fermantes
+
+Certaines balises ne délimitent aucune information, elles sont utilisées pour indiquer la présence d'un contenu spécifique (présence d'une image par exemple).
+
+Plutôt que de les ouvrir et de le refermer, sans qu'elles ne délimitent aucun contenu ex :`<balise></balise>`, on utilise une syntaxe raccourci : `<balise />`
+
+```html
+<!-- Liseré horizontal -->
+<hr />
+
+Texte avec un retour chariot<br />
+Ce texte est à la ligne
+```
+
+![Balises autofermantes](../../images/balise-auto-fermante.svg)
+
+## Récapitulatif
+
+![Récapitulatif](../../images/balise-recap.svg)
+
+
+
+## Imbrication
+
+Nous venons de voir que les balises sont utilisées pour **délimiter du contenu**, dans les exemples précédents, le contenu été uniquement du contenu texte, mais généralement, le contenu est souvent un aggrégat de texte contenant lui-même des balises, pouvant à son tour contenir des balises. (à la manière de poupées russes). Ce formalisme est appelé **l'imbrication**.
+
+```html
+<body>
+  <h1>Bonjour monde !</h1>
+  <p>
+    Ceci est ma première page<br/>
+    elle contient du
+    <strong>HTML</strong> !
+  </p>
+</body>
+```
+
+L'imbrication respecte la règle : **Première ouverte, dernière fermée**. Less balises qui *se croisent* ou qui ne sont pas refermée peuvent provoquer des erreurs d'interprétation.
+
+## Arbre DOM
+
+De part sa nature, l'imbrication peut être représenté sous la forme d'un arbre, on parle de l'arbre DOM (Document Object Model).
+
+![L'arbre DOM](../../images/html-imbrication.png)
+
+## Commentaires
+
+Un code source HTML peut devenir rapidement dense et atteindre plusieurs centaines de ligne(on écrit beaucoup de code).
+
+Les **commentaires** sont très utilisés pour permettre aux intégrateurs d'annoter le code source sans que ce commentaire apparaisse dans le rendu final.
+
+Un commentaire débute par la séquence `<!--` et se termine avec `-->`
+
+```html
+<body>
+  <!-- Titre de la page -->
+  <header>
+    <h1>Bonjour monde !</h1>
+  </header>
+
+  <!-- Menu principale -->
+  <nav>
+    <a href="#">Accueil</a>
+    <a href="gallery.html">Galerie</a>
+  </nav>
+
+  <!-- Contenu -->
+  <p>Contenu de la page</p>
+
+  <!-- Pied de page -->
+  <footer>
+    Credit © Unicaen.fr
+  </footer>
+</body>
+```
+
+L'utilisation des commentaires est également pratique pour désactiver certaines parties du code.
+
+```html
+<body>
+  <!-- Titre de la page -->
+  <header>
+    <h1>Bonjour monde !</h1>
+  </header>
+
+  <!-- Menu principale (désactivé) -->
+  <!--
+  <nav>
+    <a href="#">Accueil</a>
+    <a href="gallery.html">Galerie</a>
+  </nav>
+  -->
+
+  <!-- Contenu -->
+  <p>Contenu de la page</p>
+
+  <!-- Pied de page -->
+  <footer>
+    Credit © Unicaen.fr
+  </footer>
+</body>
+```
+
+
+## Validation
+
+Vous pouvez tester la validité d'un code HTML en utilisant le [Validateur W3C](http://validator.w3.org/)
+
+![Validateur W3C](../../images/validator.jpg)

src/articles/integration-web/presentation-html5.md

+# Technologies du web
+
+La création de contenu pour le web est l'aggrégat d'un **ensemble de technologies** que l'usage profane regroupe généralement sous le terme **technologies HTML/Web**.
+
+## HTML
+
+Le HTML est une technologie utilisée pour :
+
+ - Créer des documents web (pages HTML)
+ - Structurer les interfaces web (Webapp)
+
+Le HTML est un langage :
+
+ - Description de contenu par **balise**
+ - Conçu pour être facile à utiliser/partager
+ - **Sémantique** (Il sert à structurer une informations - pas à la mise en forme)
+
+<div class="info">
+HTML n'est généralement pas considéré comme un **langage de programmation**. Il est en effet purement descriptif et ne propose aucun mécanisme logique.
+</div>
+
+
+## Petite histoire
+
+### 1990
+
+**Tim Berners** pose les bases du web :
+
+ - Premier navigateur,
+ - le protocole HTTP (pour l'accès aux document HTML),
+ - et le langage HTML
+
+Le terme de **World Wide Web** est déjà consacré.
+
+![Tim Berners Lee](../../images/berners.jpg)
+
+
+### 1993
+
+Le **Web** s'étend à la communauté scientifique et se popularise grâce à **NCSA Mosaic**, un navigateur capable d'afficher... des images.
+
+![Le navigateur NCSA Mosaic](../../images/ncsa-mosaic.jpg)
+
+### 1994-1996
+
+**Netscape navigator** popularise le web hors des universités en permettant de réaliser les premiers sites *visuels*.
+
+ - Fondation du **W3C** (World Wide Web Consortium)
+ - Apparition d'**Internet Explorer**
+ - 1995/96 : Spécification de HTML 2.0 est publiée.
+
+Cette période voit également s'affronter les éditeurs de navigateur Netscape et Explorer dans ce qu'on appelle **Le guerre des navigateurs**. Ces derniers n'hesitant pas à prendre de grandes liberté quand au rendu et aux fonctionnalités HTML/CSS
+
+![Le navigateur NCSA Mosaic](../../images/disquette-netscape-navigator.jpg)
+
+
+### 1997/2000 : Normalisation
+
+**HTML 3.2** Syntètise les améliorations apportées par netscape et Internet explorer, en vu de normaliser les usages des 2 navigateurs.
+
+**HTML 4** sort dans la foulée. Arrivée en force des **style CSS** et des scripts (Javascript). Le W3C arrive à imposer ce standard
+
+La production de contenu Web se professionnalise
+
+![W3C](../../images/w3c.png)
+
+
+### 2000/2008 : Web 2.0
+
+Le **XHTML** s'impose dans l'usage professionnel, il est la version **strict** de HTML 4. Il scèle une bonne fois pour toute la sacro-sainte séparation du contenu (XHTML) et de la forme (CSS).
+
+La production de site web se professionnalise, les métiers d'**intégrateur web** / **Webdesigner** sont reconnus comme des disciplines hautement technique et plus seulement comme des activités complémentaires à des domaines plus générale (Designers / Informaticiens).
+
+### Maintenant
+
+**XHTML 2**, une nouvelle norme développée depuis plusieurs années a été définitivement abandonné ; rejetée par la communauté avant même d'être publié.
+
+Le **HTML5** et le **CSS3**, encore en brouillon, sont déjà largement adoptés par les principaux navigateurs (Firefox, Chrome, Edge). Imposant définitivement l'aire du **Web Sémantique**.
+
+![Web sémantique](../../images/semantic.svg)
+
+
+## Le World Wide Web
+
+La transmission et l'accès aux contenus du web est déterminé par 3 choses :
+
+ - Le **navigateur web**
+ - Le protocole HTTP/S
+ - Le langage HTML
+
+### Le navigateur
+
+![Répartition des navigateurs en Décembre 2013 - source : http://gs.statcounter.com/](../../images/navigateurs.png)
+
+### Le protocole HTTP
+
+![Le protocole HTTP](../../images/http.png)

src/cours/integrations-web-1.md

+ # Intégration web
+
+  - Introduction : Les technologies du web
+
+  - HTML5
+    * Création de page web
+    * Syntaxe et règle
+    * Structurer l'information
+    * Gestion de site : Lien, images et contenu externe
+
+  - CSS3
+   * Intégration CSS
+   * Syntaxe, sélecteurs et régles
+   * Mise en forme du texte
+   * Mise en page 1 : Le modèle de boîtes
+   * Mise en forme des boites (bases)   
+   * Mise en forme et habillage des boites avancés
+   * Mise en page (Flexbox)
+   * Mise en page avancé (Positionnement libre)
+   * Mise en page avancé (Le responsive design)

src/images/balise-auto-fermante.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="395.92764"
+   height="592.76556"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="balise-auto-fermante.svg">
+  <defs
+     id="defs4">
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow1Lstart"
+       style="overflow:visible">
+      <path
+         id="path3974"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+         transform="scale(0.8) translate(12.5,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-0"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-1"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-1"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-6"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-4"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-3"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="274.40829"
+     inkscape:cy="322.64716"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1366"
+     inkscape:window-height="726"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-3.4647569,-459.55082)">
+    <rect
+       style="color:#000000;fill:#bcd35f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4878"
+       width="366.68539"
+       height="185.86807"
+       x="18.617044"
+       y="491.68683" />
+    <g
+       id="g3259"
+       transform="translate(-22.223356,-1.0101525)">
+      <rect
+         transform="matrix(0.98299389,-0.18363825,0.18363825,0.98299389,0,0)"
+         y="540.02924"
+         x="-76.478012"
+         height="102.02541"
+         width="70.710678"
+         id="rect4778"
+         style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <text
+         transform="scale(0.67732583,1.4763943)"
+         sodipodi:linespacing="125%"
+         id="text2987"
+         y="425.87204"
+         x="63.571552"
+         style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+         xml:space="preserve"><tspan
+           y="425.87204"
+           x="63.571552"
+           id="tspan2989"
+           sodipodi:role="line">&lt;</tspan></text>
+    </g>
+    <g
+       id="g3264"
+       transform="translate(-20.203051,-2.0203051)">
+      <rect
+         y="543.59039"
+         x="93.36834"
+         height="81.822357"
+         width="216.17264"
+         id="rect4822"
+         style="color:#000000;fill:#99ff55;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text2991"
+         y="608.24017"
+         x="98.41909"
+         style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+         xml:space="preserve"><tspan
+           y="608.24017"
+           x="98.41909"
+           id="tspan2993"
+           sodipodi:role="line">balise</tspan></text>
+    </g>
+    <g
+       id="g3253"
+       transform="translate(21.213204,-1.0101525)">
+      <rect
+         transform="matrix(0.99379275,0.11124734,-0.11124734,0.99379275,0,0)"
+         y="496.2417"
+         x="361.77499"
+         height="102.02541"
+         width="70.710678"
+         id="rect4778-6"
+         style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <text
+         transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"
+         sodipodi:linespacing="125%"
+         id="text2987-9"
+         y="-358.10562"
+         x="-564.633"
+         style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+         xml:space="preserve"><tspan
+           y="-358.10562"
+           x="-564.633"
+           id="tspan2989-8"
+           sodipodi:role="line">&lt;<tspan
+   id="tspan3011"
+   style="font-weight:bold;-inkscape-font-specification:Sans Bold" /></tspan></text>
+    </g>
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.96337235px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#Arrow1Lstart);marker-mid:none;marker-end:none"
+       d="m 312.01818,533.4579 c 1.50895,-17.12861 10.72367,-50.47155 -44.01858,-57.54263"
+       id="path3020-2-4"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#bcd35f;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="22.65765"
+       y="482.59546"
+       id="text4880"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4882"
+         x="22.65765"
+         y="482.59546">Balise auto-fermante</tspan></text>
+    <rect
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3087"
+       width="319.28571"
+       height="197.14285"
+       x="44.893326"
+       y="-970.17352"
+       transform="scale(1,-1)" />
+    <rect
+       style="color:#000000;fill:#ff6600;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4999"
+       width="38.385799"
+       height="94.954346"
+       x="290.34808"
+       y="535.11829" />
+    <text
+       xml:space="preserve"
+       style="font-size:73.93717957px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="346.46625"
+       y="529.00372"
+       id="text2987-3-7"
+       sodipodi:linespacing="125%"
+       transform="scale(0.86559965,1.1552685)"><tspan
+         sodipodi:role="line"
+         id="tspan2989-9-5"
+         x="346.46625"
+         y="529.00372">/</tspan></text>
+  </g>
+</svg>

src/images/balise-recap.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="800"
+   height="592.76556"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="balise-recap.svg">
+  <defs
+     id="defs4">
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart"
+       style="overflow:visible">
+      <path
+         id="path3974"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-0"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-1"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-1"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-6"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-4"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-3"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="502.31722"
+     inkscape:cy="313.56713"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1366"
+     inkscape:window-height="726"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-3.4647569,-459.55082)">
+    <rect
+       style="color:#000000;fill:#99ff55;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4822-4"
+       width="389.91888"
+       height="362.64478"
+       x="9.0206032"
+       y="542.21094" />
+    <text
+       xml:space="preserve"
+       style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="18.83005"
+       y="433.13693"
+       id="text2987"
+       sodipodi:linespacing="125%"
+       transform="scale(0.67732583,1.4763943)"><tspan
+         sodipodi:role="line"
+         id="tspan2989"
+         x="18.83005"
+         y="433.13693">&lt;</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="68.11451"
+       y="618.96606"
+       id="text2991"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan2993"
+         x="68.11451"
+         y="618.96606">balise</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="-520.5509"
+       y="-366.17444"
+       id="text2987-9"
+       sodipodi:linespacing="125%"
+       transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan2989-8"
+         x="-520.5509"
+         y="-366.17444">&lt;</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="12.418597"
+       y="615.83002"
+       id="text2987-3"
+       sodipodi:linespacing="125%"
+       transform="scale(0.67732583,1.4763943)"><tspan
+         sodipodi:role="line"
+         id="tspan2989-9"
+         x="12.418597"
+         y="615.83002">&lt;</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="89.832771"
+       y="887.68304"
+       id="text2991-6"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan2993-4"
+         x="89.832771"
+         y="887.68304">balise</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="-566.63"
+       y="-546.12115"
+       id="text2987-9-3"
+       sodipodi:linespacing="125%"
+       transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan2989-8-0"
+         x="-566.63"
+         y="-546.12115">&lt;</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:73.93717957px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="74.555862"
+       y="770.8576"
+       id="text2987-3-7"
+       sodipodi:linespacing="125%"
+       transform="scale(0.86559965,1.1552685)"><tspan
+         sodipodi:role="line"
+         id="tspan2989-9-5"
+         x="74.555862"
+         y="770.8576">/</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:36px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="17.606895"
+       y="495.72232"
+       id="text3050"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan3052"
+         x="17.606895"
+         y="495.72232">Cas N°1 : </tspan></text>
+    <g
+       id="g3345"
+       transform="translate(-55.55839,-6.467017)">
+      <rect
+         y="649.2655"
+         x="129.73383"
+         height="169.70563"
+         width="306.07623"
+         id="rect3334"
+         style="color:#000000;fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text3054"
+         y="714.92542"
+         x="151.95718"
+         style="font-size:48px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Sans"
+         xml:space="preserve"><tspan
+           y="714.92542"
+           x="151.95718"
+           id="tspan3056"
+           sodipodi:role="line">Délimite </tspan><tspan
+           id="tspan3058"
+           y="774.92542"
+           x="151.95718"
+           sodipodi:role="line">un contenu</tspan></text>
+    </g>
+    <rect
+       style="color:#000000;fill:#ffb380;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4822-4-1"
+       width="341.43155"
+       height="340.42142"
+       x="437.83035"
+       y="558.95581" />
+    <g
+       id="g3453"
+       transform="translate(0,140)">
+      <text
+         transform="scale(0.67732583,1.4763943)"
+         sodipodi:linespacing="125%"
+         id="text2987-3-8"
+         y="413.29153"
+         x="645.51086"
+         style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+         xml:space="preserve"><tspan
+           y="413.29153"
+           x="645.51086"
+           id="tspan2989-9-8"
+           sodipodi:role="line">&lt;</tspan></text>
+      <text
+         sodipodi:linespacing="125%"
+         id="text2991-6-2"
+         y="588.65631"
+         x="488.64255"
+         style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+         xml:space="preserve"><tspan
+           y="588.65631"
+           x="488.64255"
+           id="tspan2993-4-3"
+           sodipodi:role="line">balise</tspan></text>
+      <text
+         transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"
+         sodipodi:linespacing="125%"
+         id="text2987-9-3-7"
+         y="-332.28516"
+         x="-1181.8176"
+         style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+         xml:space="preserve"><tspan
+           y="-332.28516"
+           x="-1181.8176"
+           id="tspan2989-8-0-6"
+           sodipodi:role="line">&lt;</tspan></text>
+      <text
+         transform="scale(0.86559965,1.1552685)"
+         sodipodi:linespacing="125%"
+         id="text2987-3-7-6"
+         y="512.02014"
+         x="812.55273"
+         style="font-size:73.93717957px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+         xml:space="preserve"><tspan
+           y="512.02014"
+           x="812.55273"
+           id="tspan2989-9-5-3"
+           sodipodi:role="line">/</tspan></text>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-size:36px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="583.91425"
+       y="502.88895"
+       id="text3050-9"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan3052-7"
+         x="583.91425"
+         y="502.88895">Cas N°2 : </tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="21.25927"
+       y="519.05139"
+       id="text3050-97"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan3052-4"
+         x="21.25927"
+         y="519.05139">Balise ouvrante/fermante </tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="534.35449"
+       y="525.62579"
+       id="text3050-97-3"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan3052-4-0"
+         x="534.35449"
+         y="525.62579">Balise auto-fermante </tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:32px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="32.759178"
+       y="945.24023"
+       id="text3505"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan3507"
+         x="32.759178"
+         y="945.24023">! tous autre cas est une <tspan
+   style="font-size:32px;font-weight:bold;fill:#d40000;-inkscape-font-specification:Sans Bold"
+   id="tspan3509">erreur de syntaxe</tspan></tspan></text>
+  </g>
+</svg>

src/images/balises-ouvrantes-fermantes.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="395.92764"
+   height="592.76556"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="balises-ouvrantes-fermantes.svg">
+  <defs
+     id="defs4">
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow1Lstart"
+       style="overflow:visible">
+      <path
+         id="path3974"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+         transform="scale(0.8) translate(12.5,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-0"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-1"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-1"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-6"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lstart-4"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3974-3"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(0.8,0,0,0.8,10,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="117.4491"
+     inkscape:cy="326.69911"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1366"
+     inkscape:window-height="726"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-3.4647569,-459.55082)">
+    <rect
+       style="color:#000000;fill:#bcd35f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4878"
+       width="366.68539"
+       height="206.07112"
+       x="18.617044"
+       y="491.68683" />
+    <rect
+       style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4778"
+       width="70.710678"
+       height="102.02541"
+       x="-76.110733"
+       y="538.06323"
+       transform="matrix(0.98299389,-0.18363825,0.18363825,0.98299389,0,0)" />
+    <text
+       xml:space="preserve"
+       style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="63.571552"
+       y="424.5174"
+       id="text2987"
+       sodipodi:linespacing="125%"
+       transform="scale(0.67732583,1.4763943)"><tspan
+         sodipodi:role="line"
+         id="tspan2989"
+         x="63.571552"
+         y="424.5174">&lt;</tspan></text>
+    <rect
+       style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4778-6"
+       width="70.710678"
+       height="102.02541"
+       x="361.55249"
+       y="494.25409"
+       transform="matrix(0.99379275,0.11124734,-0.11124734,0.99379275,0,0)" />
+    <rect
+       style="color:#000000;fill:#99ff55;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4822"
+       width="216.17264"
+       height="81.822357"
+       x="93.36834"
+       y="541.59039" />
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="98.41909"
+       y="606.24017"
+       id="text2991"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan2993"
+         x="98.41909"
+         y="606.24017">balise</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="-564.51654"
+       y="-356.75201"
+       id="text2987-9"
+       sodipodi:linespacing="125%"
+       transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan2989-8"
+         x="-564.51654"
+         y="-356.75201">&lt;</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#bcd35f;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="22.65765"
+       y="482.59546"
+       id="text4880"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4882"
+         x="22.65765"
+         y="482.59546">Balise ouvrante</tspan></text>
+    <rect
+       style="color:#000000;fill:#bcd35f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4878-1"
+       width="366.68539"
+       height="206.07112"
+       x="19.12212"
+       y="738.18048" />
+    <g
+       id="g4994"
+       transform="translate(1.0101525,11.111678)">
+      <rect
+         transform="matrix(0.98299389,-0.18363825,0.18363825,0.98299389,0,0)"
+         y="774.44708"
+         x="-140.10304"
+         height="83.338806"
+         width="57.759563"
+         id="rect4778-9"
+         style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <text
+         transform="scale(0.67732583,1.4763943)"
+         sodipodi:linespacing="125%"
+         id="text2987-3"
+         y="586.68445"
+         x="13.909976"
+         style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+         xml:space="preserve"><tspan
+           y="586.68445"
+           x="13.909976"
+           id="tspan2989-9"
+           sodipodi:role="line">&lt;</tspan></text>
+    </g>
+    <rect
+       style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4778-6-8"
+       width="70.710678"
+       height="102.02541"
+       x="399.17786"
+       y="735.02606"
+       transform="matrix(0.99379275,0.11124734,-0.11124734,0.99379275,0,0)" />
+    <rect
+       style="color:#000000;fill:#ff6600;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4999"
+       width="38.385799"
+       height="94.954346"
+       x="67.10437"
+       y="781.59546" />
+    <rect
+       style="color:#000000;fill:#99ff55;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4822-4"
+       width="216.17264"
+       height="81.822357"
+       x="107.00538"
+       y="786.06378" />
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="103.97491"
+       y="848.69324"
+       id="text2991-6"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan2993-4"
+         x="103.97491"
+         y="848.69324">balise</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="-594.34052"
+       y="-521.24426"
+       id="text2987-9-3"
+       sodipodi:linespacing="125%"
+       transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan2989-8-0"
+         x="-594.34052"
+         y="-521.24426">&lt;</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#bcd35f;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="23.162708"
+       y="729.08911"
+       id="text4880-3"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4882-8"
+         x="23.162708"
+         y="729.08911">Balise fermante</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:73.93717956999999785px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="88.559814"
+       y="742.35425"
+       id="text2987-3-7"
+       sodipodi:linespacing="125%"
+       transform="scale(0.86559965,1.1552685)"><tspan
+         sodipodi:role="line"
+         id="tspan2989-9-5"
+         x="88.559814"
+         y="742.35425">/</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="29.728725"
+       y="916.95593"
+       id="text5001"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan5003"
+         x="29.728725"
+         y="916.95593">La présence du <tspan
+   style="font-size:16px;font-weight:bold"
+   id="tspan5007">/ </tspan>avant le nom de la balise </tspan><tspan
+         sodipodi:role="line"
+         x="29.728725"
+         y="936.95593"
+         id="tspan5005">indique qu'il s'agit d'une <tspan
+   style="font-size:16px;font-weight:bold"
+   id="tspan5009">balise fermante</tspan></tspan></text>
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#Arrow1Lstart-4)"
+       d="m 92.934034,407.90765 c 42.426406,3.03046 59.598996,32.32488 59.598996,32.32488"
+       id="path5011"
+       inkscape:connector-curvature="0"
+       transform="translate(3.4647569,459.55082)" />
+  </g>
+</svg>

src/images/chemins-relatifs-01.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="275.31299"
+   height="368.16553"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="chemins-relatifs-03.svg"
+   inkscape:export-filename="/home/jacksay/Web/Jacksay/jacksay/web/images/illustrations/chemins-relatifs-01.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4">
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lend"
+       style="overflow:visible">
+      <path
+         id="path4062"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(-0.8,0,0,-0.8,-10,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lend-0"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4062-5"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(-0.8,0,0,-0.8,-10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lend-2"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4062-4"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(-0.8,0,0,-0.8,-10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lend-3"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4062-6"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(-0.8,0,0,-0.8,-10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lend-9"
+       style="overflow:visible">
+      <path
+         id="path4062-7"
+         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+         transform="matrix(-0.8,0,0,-0.8,-10,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="197.32067"
+     inkscape:cy="172.96961"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="726"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1"
+     fit-margin-top="10"
+     fit-margin-left="10"
+     fit-margin-right="10"
+     fit-margin-bottom="10" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-15.25,-620.59338)">
+    <rect
+       style="color:#000000;fill:#eef4d7;fill-opacity:1;fill-rule:nonzero;stroke:#dde9af;stroke-width:1.75820291;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3033"
+       width="246.71902"
+       height="209.34335"
+       x="26.143068"
+       y="651.21075" />
+    <g
+       id="g3035"
+       transform="translate(0,160)">
+      <image
+         width="32"
+         height="32"
+         xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAA8RJREFU
+WIXtl81rnFUUxn/n3HdmUhOoU7UtpeQLVASh0kTBlRRUlIjUvSiCC6Vx5T/gyk0WIlTalQtFoX5A
+lXZp46J+YD80atPWGDszTtLGTJLJTJJmZu57r4t3MplJJomRKdn0Wb+c5znPee659xXvPTsJ3VH2
+uwIAAYJLx4+cNtgB7xzQLBOCqBISnOkbHH4JsK0SEAC7DHbg0BsfgrXgZQOZhpETr70A7AKKrRTQ
+5p0DaylffRePqTLWIyTR9Qq2tMzl958siDQRuQlEDSHB2b7B4aOscS+osTmL1zhIDOoJPOBDXClH
+37FP12vbkt1DEGPkxKsDNHEvWCWyoAHIqqaoAIBSyX0L0+eaEGxC7j1CSPyht4nyRdvGAigjoiDa
+pKqCmJWqDcyisokGHzXmF6p1138a1Iq5CqjZQMB6iEYnY2mmwOaRCDHZK4gI77z8SO+z/fs644Em
++gfPfQ/4Ogcsohp1u4UAUUGNkro8xmzmJs2P7kprHuE3xCgvPpH8QaggKBePHznbPzh8tC4DYeQA
+CiI0NVZAEMQo6UvXoVKif/AjcHZTEY3wEIsxcvL1AWDX6gh8BcQgYhBjIluFdW6ICKmfruFtSOeh
+bsrXh9h4ga2Fw7R3wZ7nyRfLF4B43QhCVA1qYqQujpK7MYE0Lars6dxH12M9OOdBTTVfWwjwgLdo
+Ry+58QtcyS5+DYSNGQgM85M57PIij7/5HrhwjQMCKHbyFM5H00X/63XiwIPec5DC36c49sHvnwHL
+QU27D1ETMDc5TbL7UXxlCTt1moZQroxETDUn24Egif2E5ZDZ7Ng00T4orzqg0SLKZ6Y4cPhpWJ4A
+jVfP/1qq7a7DKkXbXnLjPzOanvsYKAEuqGoD8dyeXyDRESex+wB24Q/ExGnNjR3lQxMPUMyeZ+iL
+8U+AZajfhBqS+ytLsvthEIe4QrSa/2e3jXBILImzFQqTN0qjmeI/RA5UBYiAQPFWjt6n+qE8E21E
+adV7xaGJJLPpq2SmF88QdR/WBIgIfimPLZVpu38/fmkKaVn3RHViHeQz5/nuWv5Lqt3XBCDCws1J
+dh/sAu/x3K7a3wp4JGgHF1KcSDH0+diPVOdfEyCqzKTS3NfzILCIBq3sHoi1M5/5k1v50jfAInWP
+ktoI8qkM3c8NQKkAQXvryAFiHcxn0vyaWviKqPva2hRg7y8nnxlXfIezFhc9HFoKEcGhhb63hg8D
+WeoyIMC9QA+QpKW+N8ADeSANzAG1LgWIAe1A/A6Rr6BMNP/KHebZHuTuz+lOC/gX/29g6TEI7HMA
+AAAASUVORK5CYII=
+"
+         id="image2993"
+         x="45.619324"
+         y="663.61591" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text3029"
+         y="685.67682"
+         x="80.812202"
+         style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+         xml:space="preserve"><tspan
+           y="685.67682"
+           x="80.812202"
+           id="tspan3031"
+           sodipodi:role="line"
+           style="font-weight:normal;-inkscape-font-specification:Sans">cours</tspan></text>
+    </g>
+    <g
+       id="g3164"
+       transform="translate(-369.71583,-51.51778)">
+      <image
+         width="32"
+         height="32"
+         xlink:href="data:image/png;base64,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
+"
+         id="image3004"
+         x="412.30466"
+         y="720.18445" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text3029-8"
+         y="742.24536"
+         x="447.61737"
+         style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+         xml:space="preserve"><tspan
+           y="742.24536"
+           x="447.61737"
+           id="tspan3031-0"
+           sodipodi:role="line"
+           style="font-weight:bold;-inkscape-font-specification:Sans Bold">index.html</tspan></text>
+    </g>
+    <g
+       id="g3164-2"
+       transform="translate(-369.17467,-13.335048)">
+      <image
+         width="32"
+         height="32"
+         xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAABsVJREFU WIWtl19sVMcVxn9nZu7dtb3+B27XCXWBlBSalkBd0mAToGoiJVKKGpQULKXqA21VVU2iUCVBoo2i 9CENUhWlqQpVH5r2oRUyKmCiVkmliFClIZi04JoGGjAxfxzAGHt3WXvXu3dn+rB3vTbsGqrkSCPN zL33nG++c+abueKcA0BETE9Pz14RedBay8cxEcFa27N+/fpHgKDSO6W4OOdKg/p9+/a5T8ouXbrk uru7dwO6GgDnHGbaXLS08n8eOYoohSA3vWqHw1nLV768nJ07d9LV1cWaNWvWd3d3v7lhw4b7qjGh pjNX6ni+j+95+P7/0TwPz/eLTpUikUgSj8dZvXr12t27d58FvBsBmDKtFFrris0YjWc0vlduntF4 xqBV0Z2IEK2t4cqVUVpbW+ns7Lxlz549g5VAVAdwTTNKETGaOs/QGPFpjkaYE43QHI3QFI0Q8w1R E6bbOaK+T6w+NsXEqlWrbu3p6Rm6FoSpEB9lDEqpqZwoAU8pajzF9sNJfnU4weWkBVEgwi0Nhkfv rGNLRyMAty9aRHd3NyKCcw5rLV1dXQCfAuqAxKwAjFKokE4FeFooWFj56mlU/fts/9EbLIoPkshE GEgdZ+BiLX8+sJV9f+ig94eNLG9vZ3l7+3V+w93m35gBXQbgKSHmK1b89jhN8c/yp0fbaIzOpW/o WwylYHQySSyynsceeoLut7awcsfDHPpeG6lcnsA6XBj4tvnzK4WqVgMarTSe1tR4hh3vjZDSMX75 0CJyuWYuZ/vJqv3UNz3N/NZlZPNx+s5s4xsd2wii/+A3/0pT50fwjYenDZ6uuM5ZGDAaJYJWEPE1 L797gXVrVlCrYDhbi6/HiMQ2k56YIJU/z/nRbzNw6UFyhTT3rtjOK/s7eLxjDnlxFCzYkurdLAMm ZEArg68NFxI5WhrruTAO56/6jOWSXA0GGMsV0LrA4lufROmA/wz9lM+0nGQokSdiPLQyaKUxqqIY VmdAa4WIoJWgjQYUlydgaNwxnBFqW/7GpE1TE0mTz0H/2R3gMggFLia/ikjA1VwBoxWIK+v+zTJQ KkKlFCgFTrPsc9+h92LAYBKGxlaiNWiB86MbGRq7j3whT8Fm+Wv/XpBJGmMeEvpQumKY2VJQpE6L BjRtcyL8/dhGRiYmGZvI0Hf2WZSDDz56HN+7SNQ7QirbwHg+ykRmnIXNPqDQosMUVC/C6gxohWgB ge/f3cr+w3Em8jky+QwfjS7h9wdGSGTmMpr+PI/c3c5j93psuqeZsZEk371rHiCIlilfNwWglKuS /CpRBA6efWAR8/wcJwbOkJrMM5FPk8rAwVNbaKw7iiiwAnvffobFDY6n1s6n4EBJWcqn+78xA8ag tEa0xokCC0c2d9AUpOg/8V+GEylSk1kyuRSv979I78kOfvLqX0iPbKTvyXb8iMGKQrRGaY0yN6kD KhR/X2tgGloRxGiOPr2W3707yAtvnubkaAYRIbAeF5tfYkvnPJ75elvxUHcWo6dvPZnhvyqAOr/4 hqjqOdu0cgGbVi6o+jx0gFQIVvJfFcCLvTF2jR/nRN+58KATcDOVTKQ4r0qD0JxzWAfTmSvdqJxz LF7WxuljsdkBnElqGqSRU5MjRIxGK6HgHNm8JbDFAM65UKYFJaCU4GvBOcgXHNY5tCqOPSMYKX4T 100MJodnB6AFCtZybts93PZ8L75R5PKWD5/vILCWWr+c17dPJ/lgOEPHwkbu//W/AcfrT9xJc61h 6QvvcWVbJwueO4TxFTiHJw5PXb8LrilPRxBYRIRJEYxW5AoO3wgtW3uxDtI/76Bh60E8rXjjB3fw hXgNkZqimy+21jKSDsiE1AdagaeRMC2VrrgzADgI8wgphLyDbJhnv658k4rU+SgFc+p8Dp5L883l LQC8dmKMdUuaCUKmrK9xfvWDqAIDxes1QPq5u2bMS9SbEg0V9RCBubWGlw8N0/WlFubWan524ALr ljRDxIQADAVPIwLOVj6QrgNQoqnupX6iRpgMHOkfLwXfTNW38zUINEY0O09d5ZUH2rAOdg1c5Y8w BSAtgnVglEzdjmYFIAheqNv1NYaoEbwglGdT1gbllS+sWefoG8kykJikJlqkO95QTFd689Kpbx7e da4iAJn2b/jpO55669LSztvJBwU8JcVd4SBvHSashcDN7AvlulFS7ucLjoJziAhGCTW+pv+dk7z/ i6/FgeFS3JlSjE0fe+dkzIaOS+ZcWXOu7VczR7meBEEpQWHTszHQBCwEmqm8Yz6uOWAM+BBITMWd BsCj+NPgV3HwSVgOGAfypbj/A36z2UKOZldrAAAAAElFTkSuQmCC "
+         id="image3004-2"
+         x="412.30466"
+         y="720.18445" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text3029-8-4"
+         y="742.24536"
+         x="447.61737"
+         style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+         xml:space="preserve"><tspan
+           y="742.24536"
+           x="447.61737"
+           id="tspan3031-0-5"
+           sodipodi:role="line"
+           style="font-weight:normal;-inkscape-font-specification:Sans"><tspan
+             style="font-weight:bold;-inkscape-font-specification:Sans Bold"
+             id="tspan4676">annexes.html</tspan></tspan></text>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-size:14px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#89a02c;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="20.203051"
+       y="640.21997"
+       id="text4632"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4634"
+         x="20.203051"
+         y="640.21997">Même niveau dans l'arborescence</tspan></text>
+    <g
+       id="g3164-2-5"
+       transform="translate(-369.17467,26.664949)">
+      <image
+         width="32"
+         height="32"
+         xlink:href="data:image/png;base64,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 "
+         id="image3004-2-3"
+         x="412.30466"
+         y="720.18445" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text3029-8-4-7"
+         y="742.24536"
+         x="447.61737"
+         style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+         xml:space="preserve"><tspan
+           y="742.24536"
+           x="447.61737"
+           id="tspan3031-0-5-2"
+           sodipodi:role="line"
+           style="font-weight:normal;-inkscape-font-specification:Sans"><tspan
+             style="font-weight:bold;-inkscape-font-specification:Sans Bold"
+             id="tspan4676-4">glossaire.html</tspan></tspan></text>
+    </g>
+    <g
+       id="g3199"
+       transform="translate(-346.07502,-109.06011)">
+      <image
+         width="32"
+         height="32"
+         xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAA/FJREFU WIXFl89rnEUYxz/PM++7mzUpTYKHVqwh0GMRCrVXIcdqxEsPnopiPfkPqD14UPDmUfBie6kieGjB eDEHBSHgIdSI0oIQDbaBxPxottl99913Hg8zm91sdpMt2ZIHhn2Z2Xme73yf7zwzI2bGSVrS+hCR 9OpnP6w1mv504f0zC+hUSdS+/+7D198EmknH2GjW9Ke//ugKjQIwQIYYOforOXjr07nXgAqw0wmg VHjPc8DCv5AK6BABeIPcYOYliAyPdAOgJYeywq3fVkkVQLAuKgSLSxrccg/XXj7TGUegQwOdljhI FKZfOEMBNIEijjkgsfA7EEHxT389XCVxPWL1BKBgCKogHq7be0zyKwAbvMJX8uUemCPjS2gtv93W owsSATMBhXfy60zmS5CPQz7OZL7E2413MQdOg9PDmpO4IAt+n4IBUAcTjQWQyY71lpj0C+gYON+x AqGdky6JqPZnoCeAlvpTB+RFyINEFZgH70k1TNZWcAV79AFk9+DcHOIAH4ciA712Ve8UxAllhS29 DPku5Hlsu2zpZUpKAKGQJmAPb+C37+KzFezvN0hoizk5hIEDXZ6QWzBGBO6cvcmWuwD1NaivseUu cOfsTUYkAEgTSFNobHxDYRUKXyGvPUAaD0hdG4RFv901trcGJAAoK+QCd6duUUT6nIVtqBY0og42 lz8nL0YQBDDMl6iv32by/MdYM1BvDChCIebKwgrFQ2rtIiXEbaUh+MriVRrVRdSNBX0gYI7Hq7fJ qn9w7uK3qA/+VA7Wjr4MGBEA7eD7gAo4Bzv//YwrPY/6iDrK3/uUbP0nSrFiPRUDzsUJUSE9T2wJ OS2o4PM6kkREAEWBNesYlRC0pQF3kIEDImwhNZTU0b/FbXhp5j6uPE0t22Zqfpep+V1q2TauPM2l mftoFKuhe8z2ZaB1AqsCMkopDcWm351FBMppmVev/IgbhXvzUwDMXluheAK+Gea66E9bKe0HYK8z gbHlF/lz4iL+EAAIQfmqaGWEvBbc/b40i6/VwQf1qcLY8iJJsnkwVi+/TkD0FI2sDKYcJK4HFQiN xyGjWhPIShG5gHhET+EGPgsEECXLmhHAAJYXyI3zAGTVBhQdoMWD6OCHUciTp/akhogOdvfodxgJ mHkM3/P+0BdAllfZ3H4UABzTzDxZXj0aQEts3uCL9zeGfictYjXsFHVPBgCasaoOE4EcpYG9q5OA H2ZwAGlXvU4g+wAk2s738TPf3zrj7ANQSqjOfjI3Vnjfv/gcw0TCy8jqW78Q94m03oYiMg5MAxMM N/vd1gTWgX+AnU4AKTAKlJ5hcAgrrwM1oImZcZIvZDnp5/n/bot0vZjNRyQAAAAASUVORK5CYII= "
+         id="image3026"
+         x="389.0712"
+         y="894.9408" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text3029-8-1"
+         y="917.00177"
+         x="425.89844"
+         style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+         xml:space="preserve"><tspan
+           y="917.00177"
+           x="425.89844"
+           id="tspan3031-0-8"
+           sodipodi:role="line"
+           style="font-weight:bold;-inkscape-font-specification:Sans Bold">logo.jpg</tspan></text>
+    </g>
+  </g>
+</svg>