web

2021-12-16 10:16:20 +01:00
parent 03b4346d8b
commit 15f68bdbc5
12 changed files with 253 additions and 0 deletions
--- a/sequences/web/INTRODUCTION.md
+++ b/sequences/web/INTRODUCTION.md
@@ -0,0 +1,130 @@
+# Découverte du Web
+
+
+
+## ***Activité n°1 :  Le navigateur***
+
+Le "World Wide Web", plus communément appelé "Web" a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique *Sir Timothy John Berners-Lee* et le Belge *Robert Cailliau* au début des années 90. 
+
+À cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information Tim Berners-Lee met au point le système hypertexte. 
+
+Le système hypertexte permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés. 
+
+Ces mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en bleu. Ces hyperliens sont plutôt connus aujourd'hui sous le simple terme de "liens".
+
+![premier_site](assets/premier_site.png)
+
+Cette première page web est toujours consultable [ici]( http://info.cern.ch/hypertext/WWW/TheProject.html).
+
+Tim Berners-Lee développe le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), il l'appelle simplement "***WorldWideWeb***". Il faudra attendre 1993 et l'arrivée du navigateur web "NCSA Mosaic" pour que le web commence à devenir populaire en dehors du petit monde de la recherche.
+
+***Exercice*** 
+
+Donnez les noms des navigateurs auquels appartiennent les logos ci dessous :
+
+
+
+| Logo                                                   | Nom  |
+| ------------------------------------------------------ | ---- |
+| ![chrome.svg](assets/chrome.svg)                       |      |
+| ![chromium.png](assets/chromium.svg)                   |      |
+| ![edge.svg](assets/edge.svg)                           |      |
+| ![firefox.svg](assets/firefox.svg)                     |      |
+| ![safari.svg](assets/safari.svg)                       |      |
+| ![opera.svg](assets/opera.svg)                         |      |
+| ![internet_explorer.svg](assets/internet_explorer.svg) |      |
+
+------
+
+## ***Activité n°2 : Surfer sur le Web***
+
+Techniquement le web se base sur trois choses : le protocole *HTTP* (HyperText Transfert Protocol), les *URL* (Uniform Resource Locator) et le langage de description *HTML* (HyperText Markup Language). Nous aurons, très prochainement l'occasion de revenir sur ces trois éléments.
+
+Une chose très importante à bien avoir à l'esprit : beaucoup de personnes confondent "web" et "internet". Même si le "web" "s'appuie" sur internet, les deux choses n'ont rien à voir puisqu'"internet" est un "réseau de réseaux" s'appuyant sur le protocole IP (voir le module Internet) alors que, comme nous venons de le voir, le web est la combinaison de trois technologies : HTTP, URL et HTML. D'ailleurs on trouve autre chose que le "web" sur internet, par exemple, les emails avec le protocole SMTP (Simple Mail Transfert Protocol) et les transferts de fichiers avec le protocole FTP (File Transfert Protocol).
+
+## Comment ?
+
+Les navigateurs interprètent des **codes** (HTML et CSS) afin d’afficher des pages Web. Il s’agit de langages de description (et non pas de programmation) qui permettent de créer des sites web.
+Les langages **HTML** et **CSS** sont à la base du fonctionnement de tous les sites Web.
+
+Le langage HTML (HyperText Markup Language, langage de balisage hypertexte) a été inventé par Tim Bernes-Lee en 1991.
+
+Son rôle est de gérer et d’organiser le contenu de la page web (titres, textes, images, etc.). Il répond à une norme très précise.
+
+Le langage CSS (Cascade Style Sheets, feuilles de style en cascade) est venu compléter le langage HTML en 1996. Son rôle est de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte, etc.).
+
+Autrement dit, le contenu est écrit dans le fichier HTML et la mise en forme est écrite dans le fichier CSS.
+
+Vous pouvez examiner le code html du site du lycée :
+
+https://www.lyc-thierry-maulnier.ac-nice.fr -> clic droit sur la page -> afficher code source 
+
+![afficher_source](assets/afficher_source.png)
+
+
+
+Vous aurez donc ce genre de page :
+
+![source](assets/source.png)
+
+Alors qu'en fait ce que votre navigateur affiche reste :
+
+![site_lycee](assets/site_lycee.png)
+
+
+
+***Exercice***
+
+Nous allons utiliser le logiciel *Notepad ++* afin d'ouvrir le ficher index.html
+
+Repérez les différents éléments qui forment la structure de base d’une page HTML
+
+·   Le doctype <!DOCTYPE html> : il s’agit de la toute première ligne du document. C’est elle qui indique qu’il s’agit bien d’une page web HTML et qu’elle est écrite en HTML5.
+
+·   La balise <html> : il s’agit de la balise principale du code. Elle définit un conteneur qui englobe tout le contenu de la page web. Cette balise est fermée à l’aide de la balise </ html> située à la dernière ligne du code.
+
+La balise <head> : il s’agit d’une balise définissant le conteneur d’en-tête de la page. Ce conteneur donne des informations générales sur la page comme son titre (donné par la balise <title>), son encodage (donné par la balise <meta charset=... /> et utile pour la gestion de certains caractères), etc. 
+
+·   Celles-ci ne sont pas affichées sur la page, mais sont extrêmement importantes puisqu’elles sont nécessaires au navigateur pour une bonne interprétation du code.
+
+·   La balise <body> : il s’agit d’une balise définissant le conteneur du corps de la page. Ce conteneur contient tous les éléments qui seront affichés sur la page.
+
+***Le conteneur d’en-tête***
+
+·   Indiquez les lignes correspondantes au conteneur d’en-tête du fichier.
+
+·   Précisez le titre de la page. Indiquez où il apparaît lorsque la page est exécutée par le navigateur. Modifiez ce titre.
+
+·   Indiquez l’encodage du fichier. Expliquer ce qui se passe sur la page web si vous supprimez la ligne indiquant l’encodage.
+
+***Le corps de la page web***
+
+·   Indiquez les lignes correspondantes au corps de la page web.
+
+·   Modifiez <h1>Web</h1> en <h2>Web</h2>. Indiquez ce que vous observez sur la page web.
+
+·   Dites comment mettre des mots en gras. Mettez en gras les mots HTML et CSS.
+
+·   Précisez quelle est la balise qui permet d’insérer une image.
+
+·   Indiquez à quoi peut servir la balise <span>.
+
+***Liaison CSS***
+
+·   Repérez quelle est la ligne de code qui permet de lier le fichier index.html à sa feuille de style.
+
+·   Indiquez ce qui se passe sur la page web si on supprime cette ligne.
+
+***Fichier CSS***
+
+·   Ouvrez le fichier style.css à l’aide de Notepad++. Précisez comment il est structuré.
+
+·   Modifiez le style CSS pour que les balises <h1> soient écrites en bleu.
+
+·    Indiquez à quoi correspondent les attributs width et height de la balise img. Expliquez comment les modifier pour que l’image soit un rectangle de taille 200 x100 pixels.
+
+Les paragraphes sont créés avec les balises <p>.
+
+·    Essayez de modifier la couleur des paragraphes à l'aide du fichier CSS.
+
+·    Indiquez comment modifier les fichiers index.html et style.css pour que les mots HTML et CSS soient écrits en bleu et en italique, mais sans modifier le reste du document.
--- a/sequences/web/assets/afficher_source.png
+++ b/sequences/web/assets/afficher_source.png
--- a/sequences/web/assets/chrome.svg
+++ b/sequences/web/assets/chrome.svg
--- a/sequences/web/assets/chromium.svg
+++ b/sequences/web/assets/chromium.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82px" height="82px" viewBox="0 0 82 82" version="1.1">
+<defs>
+<radialGradient id="radial0" gradientUnits="userSpaceOnUse" cx="-118.77966" cy="121.49152" fx="-118.77966" fy="121.49152" r="25.491526" gradientTransform="matrix(0.0326546,-1.471405,1.467434,0.0341433,-133.045004,-136.255078)">
+<stop offset="0" style="stop-color:rgb(100%,100%,100%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(0%,0%,0%);stop-opacity:0;"/>
+</radialGradient>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="162.07127" y1="85.239708" x2="220.76114" y2="78.875748" gradientTransform="matrix(0.320312,0,0,0.320312,1.086408,2.37628)">
+<stop offset="0" style="stop-color:rgb(69.803922%,80.392157%,91.372549%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(76.862745%,85.882353%,93.333333%);stop-opacity:1;"/>
+</linearGradient>
+<radialGradient id="radial1" gradientUnits="userSpaceOnUse" cx="-123.5" cy="-11.570732" fx="-123.5" fy="-11.570732" r="95.627118" gradientTransform="matrix(-0.0024232,0.178579,-0.330389,-0.00447888,36.272082,33.060094)">
+<stop offset="0" style="stop-color:rgb(39.607843%,55.294118%,71.372549%);stop-opacity:1;"/>
+<stop offset="0.767779" style="stop-color:rgb(32.156863%,49.803922%,67.058824%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(25.098039%,44.313725%,62.745098%);stop-opacity:1;"/>
+</radialGradient>
+<radialGradient id="radial2" gradientUnits="userSpaceOnUse" cx="-94.87291" cy="165.27281" fx="-94.87291" fy="165.27281" r="60.481357" gradientTransform="matrix(0.260394,0.544467,-0.689283,0.329653,180.782725,37.950353)">
+<stop offset="0" style="stop-color:rgb(81.568627%,88.627451%,94.509804%);stop-opacity:1;"/>
+<stop offset="0.855809" style="stop-color:rgb(79.215686%,87.058824%,94.117647%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(58.431373%,74.509804%,89.019608%);stop-opacity:1;"/>
+</radialGradient>
+<radialGradient id="radial3" gradientUnits="userSpaceOnUse" cx="-383.2746" cy="217.91029" fx="-383.2746" fy="217.91029" r="59.401995" gradientTransform="matrix(-0.411972,-0.0275351,0.0366876,-0.548912,-136.139161,150.387036)">
+<stop offset="0" style="stop-color:rgb(58.823529%,81.568627%,88.235294%);stop-opacity:1;"/>
+<stop offset="0.678194" style="stop-color:rgb(53.72549%,71.764706%,88.235294%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(41.176471%,61.568627%,82.745098%);stop-opacity:1;"/>
+</radialGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="-397.81323" y1="149.18764" x2="-397.55933" y2="51.355946" gradientTransform="matrix(1,0,0,1,-0.000000000000113687,0)">
+<stop offset="0" style="stop-color:rgb(23.137255%,47.45098%,73.72549%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(58.039216%,72.156863%,87.843137%);stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="-382.04123" y1="37.280548" x2="-381.39438" y2="165.56691" gradientTransform="matrix(1,0,0,1,-0.000000000000113687,0)">
+<stop offset="0" style="stop-color:rgb(84.313725%,87.058824%,94.117647%);stop-opacity:1;"/>
+<stop offset="0.5" style="stop-color:rgb(100%,100%,100%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(83.529412%,87.058824%,94.117647%);stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial0);" d="M 80.390625 44.332031 C 80.390625 65.96875 63.277344 83.507812 42.171875 83.507812 C 21.0625 83.507812 3.949219 65.96875 3.949219 44.332031 C 3.949219 22.695312 21.0625 5.15625 42.171875 5.15625 C 63.277344 5.15625 80.390625 22.695312 80.390625 44.332031 Z M 80.390625 44.332031 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 74.367188 28.226562 C 74.367188 33.246094 68.027344 39.414062 59.683594 39.414062 C 51.339844 39.414062 40.488281 34.265625 40.488281 29.242188 C 40.488281 24.222656 47.253906 20.152344 55.597656 20.152344 C 61.972656 20.152344 70.449219 26.011719 73.683594 26.671875 C 73.9375 27.21875 74.121094 27.609375 74.367188 28.226562 Z M 74.367188 28.226562 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(18.039216%,36.078431%,56.862745%);fill-opacity:1;" d="M 12.433594 21.132812 C 16.402344 18.054688 23.746094 20.734375 28.863281 27.324219 C 33.980469 33.917969 34.53125 43.679688 30.566406 46.761719 C 26.601562 49.839844 19.617188 45.066406 14.5 38.472656 C 10.59375 33.4375 13.203125 25.277344 11.742188 22.320312 C 11.9375 21.960938 12.183594 21.53125 12.433594 21.132812 Z M 12.433594 21.132812 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial1);" d="M 73.6875 26.667969 C 71.441406 26.660156 54.125 26.761719 39.199219 26.691406 C 33.636719 28.328125 29.042969 30.9375 26.648438 36.03125 C 24.9375 34.574219 13.597656 22.507812 12.425781 21.152344 C 22.480469 7.8125 36.296875 6.5625 38.984375 6.5625 C 41.671875 6.5625 61.613281 3.796875 73.6875 26.667969 Z M 73.6875 26.667969 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(41.176471%,61.568627%,82.745098%);fill-opacity:1;" d="M 37.515625 78.144531 C 33.511719 75.117188 32.847656 66.3125 37.882812 59.660156 C 42.917969 53.003906 51.027344 48.464844 55.03125 51.496094 C 59.035156 54.523438 57.417969 63.976562 52.382812 70.632812 C 48.535156 75.714844 41.011719 76.039062 38.535156 78.222656 C 38.136719 78.207031 37.910156 78.203125 37.515625 78.144531 Z M 37.515625 78.144531 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial2);" d="M 38.535156 78.21875 C 39.683594 76.292969 47.777344 61.277344 55.414062 48.449219 C 56.824219 42.824219 57.125 37.675781 53.953125 33.027344 C 56.074219 32.292969 72.605469 28.550781 74.367188 28.226562 C 80.761719 43.660156 74.832031 56.203125 73.46875 58.519531 C 72.105469 60.832031 64.371094 79.421875 38.535156 78.21875 Z M 38.535156 78.21875 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial3);" d="M 11.753906 22.308594 C 12.867188 24.257812 21.59375 39.214844 28.980469 52.183594 C 33.175781 56.1875 37.847656 58.425781 43.457031 57.960938 C 43.046875 60.167969 38.128906 76.457031 37.542969 78.148438 C 20.964844 76.09375 12.984375 64.742188 11.644531 62.414062 C 10.300781 60.085938 -2.042969 44.183594 11.753906 22.308594 Z M 11.753906 22.308594 "/>
+<path style="fill-rule:nonzero;fill:url(#linear1);stroke-width:10.070136;stroke-linecap:butt;stroke-linejoin:miter;stroke:url(#linear2);stroke-miterlimit:4;" d="M -338.446836 101.423871 C -338.446836 134.072361 -364.905584 160.546233 -397.564861 160.546233 C -430.208361 160.546233 -456.682886 134.072361 -456.682886 101.423871 C -456.682886 68.775381 -430.208361 42.301509 -397.564861 42.301509 C -364.905584 42.301509 -338.446836 68.775381 -338.446836 101.423871 Z M -338.446836 101.423871 " transform="matrix(0.247585,0,0,0.248624,139.626291,17.064875)"/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 52.386719 34.878906 C 58.320312 40.359375 57.519531 44.347656 55.609375 48.972656 C 54.613281 41.847656 54.859375 38.585938 52.386719 34.878906 Z M 52.386719 34.878906 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 32.488281 55.617188 C 25.234375 50.984375 22.9375 40.972656 29.664062 35.441406 C 26.1875 41.777344 27.667969 45.820312 32.488281 55.617188 Z M 32.488281 55.617188 "/>
+</g>
+</svg>
--- a/sequences/web/assets/edge.svg
+++ b/sequences/web/assets/edge.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82px" height="82px" viewBox="0 0 82 82" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="63.33" y1="84.03" x2="241.67" y2="84.03" gradientTransform="matrix(0.320312,0,0,-0.320312,-1.483047,83.627187)">
+<stop offset="0" style="stop-color:rgb(4.705882%,34.901961%,64.313725%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(6.666667%,29.019608%,54.509804%);stop-opacity:1;"/>
+</linearGradient>
+<filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
+  <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+</filter>
+<mask id="mask0">
+  <g filter="url(#alpha)">
+<rect x="0" y="0" width="82" height="82" style="fill:rgb(0%,0%,0%);fill-opacity:0.34902;stroke:none;"/>
+  </g>
+</mask>
+<radialGradient id="radial0" gradientUnits="userSpaceOnUse" cx="161.83" cy="68.91" fx="161.83" fy="68.91" r="95.38" gradientTransform="matrix(0.320312,0,0,-0.304297,-1.483047,78.130625)">
+<stop offset="0.72" style="stop-color:rgb(0%,0%,0%);stop-opacity:0;"/>
+<stop offset="0.95" style="stop-color:rgb(0%,0%,0%);stop-opacity:0.529412;"/>
+<stop offset="1" style="stop-color:rgb(0%,0%,0%);stop-opacity:1;"/>
+</radialGradient>
+<clipPath id="clip1">
+  <rect x="0" y="0" width="82" height="82"/>
+</clipPath>
+<g id="surface5" clip-path="url(#clip1)">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial0);" d="M 74.007812 61.03125 C 72.914062 61.605469 71.789062 62.109375 70.632812 62.539062 C 66.953125 63.917969 63.058594 64.617188 59.132812 64.609375 C 43.976562 64.609375 30.773438 54.183594 30.773438 40.804688 C 30.8125 37.152344 32.824219 33.804688 36.035156 32.058594 C 22.324219 32.632812 18.800781 46.917969 18.800781 55.289062 C 18.800781 78.953125 40.613281 81.351562 45.3125 81.351562 C 47.84375 81.351562 51.667969 80.617188 53.960938 79.890625 L 54.378906 79.75 C 63.203125 76.699219 70.730469 70.734375 75.710938 62.839844 C 76.027344 62.34375 75.964844 61.699219 75.5625 61.273438 C 75.160156 60.847656 74.519531 60.746094 74.007812 61.03125 Z M 74.007812 61.03125 "/>
+</g>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="157.35" y1="161.39" x2="45.96" y2="40.06" gradientTransform="matrix(0.320312,0,0,-0.320312,-1.483047,83.627187)">
+<stop offset="0" style="stop-color:rgb(10.588235%,61.568627%,88.627451%);stop-opacity:1;"/>
+<stop offset="0.16" style="stop-color:rgb(8.235294%,58.431373%,87.45098%);stop-opacity:1;"/>
+<stop offset="0.67" style="stop-color:rgb(2.352941%,50.196078%,84.313725%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(0%,47.058824%,83.137255%);stop-opacity:1;"/>
+</linearGradient>
+<mask id="mask1">
+  <g filter="url(#alpha)">
+<rect x="0" y="0" width="82" height="82" style="fill:rgb(0%,0%,0%);fill-opacity:0.411765;stroke:none;"/>
+  </g>
+</mask>
+<radialGradient id="radial1" gradientUnits="userSpaceOnUse" cx="-340.29" cy="62.99" fx="-340.29" fy="62.99" r="143.24" gradientTransform="matrix(0.0480469,-0.317109,-0.25625,-0.0384375,55.096953,-41.743125)">
+<stop offset="0.76" style="stop-color:rgb(0%,0%,0%);stop-opacity:0;"/>
+<stop offset="0.95" style="stop-color:rgb(0%,0%,0%);stop-opacity:0.501961;"/>
+<stop offset="1" style="stop-color:rgb(0%,0%,0%);stop-opacity:1;"/>
+</radialGradient>
+<clipPath id="clip2">
+  <rect x="0" y="0" width="82" height="82"/>
+</clipPath>
+<g id="surface8" clip-path="url(#clip2)">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial1);" d="M 33.859375 77.328125 C 31.003906 75.554688 28.527344 73.234375 26.578125 70.496094 C 22.074219 64.328125 20.53125 56.488281 22.355469 49.074219 C 24.179688 41.660156 29.1875 35.429688 36.035156 32.058594 C 37.035156 31.585938 38.742188 30.734375 41.011719 30.777344 C 44.257812 30.800781 47.300781 32.339844 49.242188 34.941406 C 50.535156 36.667969 51.25 38.757812 51.277344 40.917969 C 51.277344 40.847656 59.113281 15.417969 25.652344 15.417969 C 11.59375 15.417969 0.0273438 28.765625 0.0273438 40.472656 C -0.0273438 46.664062 1.296875 52.792969 3.90625 58.410156 C 12.734375 77.242188 34.265625 86.484375 54 79.90625 C 47.242188 82.035156 39.894531 81.097656 33.890625 77.34375 Z M 33.859375 77.328125 "/>
+</g>
+<radialGradient id="radial2" gradientUnits="userSpaceOnUse" cx="113.37" cy="570.21" fx="113.37" fy="570.21" r="202.43" gradientTransform="matrix(-0.0128125,0.320313,0.682266,0.025625,-379.304453,-35.750078)">
+<stop offset="0" style="stop-color:rgb(20.784314%,75.686275%,94.509804%);stop-opacity:1;"/>
+<stop offset="0.11" style="stop-color:rgb(20.392157%,75.686275%,92.941176%);stop-opacity:1;"/>
+<stop offset="0.23" style="stop-color:rgb(18.431373%,76.078431%,87.45098%);stop-opacity:1;"/>
+<stop offset="0.31" style="stop-color:rgb(16.862745%,76.470588%,82.352941%);stop-opacity:1;"/>
+<stop offset="0.67" style="stop-color:rgb(21.176471%,78.039216%,32.156863%);stop-opacity:1;"/>
+</radialGradient>
+<radialGradient id="radial3" gradientUnits="userSpaceOnUse" cx="376.52" cy="567.97" fx="376.52" fy="567.97" r="97.34" gradientTransform="matrix(0.0896875,0.3075,0.249844,-0.0736719,-98.781172,-49.142344)">
+<stop offset="0" style="stop-color:rgb(40%,92.156863%,43.137255%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(40%,92.156863%,43.137255%);stop-opacity:0;"/>
+</radialGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 74.007812 61.03125 C 72.914062 61.605469 71.789062 62.109375 70.632812 62.539062 C 66.953125 63.917969 63.058594 64.617188 59.132812 64.609375 C 43.976562 64.609375 30.773438 54.183594 30.773438 40.804688 C 30.8125 37.152344 32.824219 33.804688 36.035156 32.058594 C 22.324219 32.632812 18.800781 46.917969 18.800781 55.289062 C 18.800781 78.953125 40.613281 81.351562 45.3125 81.351562 C 47.84375 81.351562 51.667969 80.617188 53.960938 79.890625 L 54.378906 79.75 C 63.203125 76.699219 70.730469 70.734375 75.710938 62.839844 C 76.027344 62.34375 75.964844 61.699219 75.5625 61.273438 C 75.160156 60.847656 74.519531 60.746094 74.007812 61.03125 Z M 74.007812 61.03125 "/>
+<use xlink:href="#surface5" mask="url(#mask0)"/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 33.859375 77.328125 C 31.003906 75.554688 28.527344 73.234375 26.578125 70.496094 C 22.074219 64.328125 20.53125 56.488281 22.355469 49.074219 C 24.179688 41.660156 29.1875 35.429688 36.035156 32.058594 C 37.035156 31.585938 38.742188 30.734375 41.011719 30.777344 C 44.257812 30.800781 47.300781 32.339844 49.242188 34.941406 C 50.535156 36.667969 51.25 38.757812 51.277344 40.917969 C 51.277344 40.847656 59.113281 15.417969 25.652344 15.417969 C 11.59375 15.417969 0.0273438 28.765625 0.0273438 40.472656 C -0.0273438 46.664062 1.296875 52.792969 3.90625 58.410156 C 12.734375 77.242188 34.265625 86.484375 54 79.90625 C 47.242188 82.035156 39.894531 81.097656 33.890625 77.34375 Z M 33.859375 77.328125 "/>
+<use xlink:href="#surface8" mask="url(#mask1)"/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial2);" d="M 48.785156 47.683594 C 48.527344 48.019531 47.730469 48.484375 47.730469 49.496094 C 47.730469 50.332031 48.273438 51.132812 49.242188 51.808594 C 53.847656 55.011719 62.53125 54.589844 62.554688 54.589844 C 65.96875 54.582031 69.316406 53.660156 72.25 51.917969 C 78.273438 48.398438 81.984375 41.953125 81.996094 34.976562 C 82.078125 27.800781 79.433594 23.027344 78.363281 20.914062 C 71.578125 7.636719 56.925781 0 40.992188 0 C 18.574219 -0.00390625 0.308594 18.003906 -0.0078125 40.421875 C 0.148438 28.71875 11.78125 19.265625 25.617188 19.265625 C 26.738281 19.265625 33.132812 19.375 39.070312 22.492188 C 44.304688 25.242188 47.046875 28.558594 48.953125 31.847656 C 50.933594 35.265625 51.285156 39.585938 51.285156 41.304688 C 51.285156 43.023438 50.40625 45.574219 48.785156 47.683594 Z M 48.785156 47.683594 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial3);" d="M 48.785156 47.683594 C 48.527344 48.019531 47.730469 48.484375 47.730469 49.496094 C 47.730469 50.332031 48.273438 51.132812 49.242188 51.808594 C 53.847656 55.011719 62.53125 54.589844 62.554688 54.589844 C 65.96875 54.582031 69.316406 53.660156 72.25 51.917969 C 78.273438 48.398438 81.984375 41.953125 81.996094 34.976562 C 82.078125 27.800781 79.433594 23.027344 78.363281 20.914062 C 71.578125 7.636719 56.925781 0 40.992188 0 C 18.574219 -0.00390625 0.308594 18.003906 -0.0078125 40.421875 C 0.148438 28.71875 11.78125 19.265625 25.617188 19.265625 C 26.738281 19.265625 33.132812 19.375 39.070312 22.492188 C 44.304688 25.242188 47.046875 28.558594 48.953125 31.847656 C 50.933594 35.265625 51.285156 39.585938 51.285156 41.304688 C 51.285156 43.023438 50.40625 45.574219 48.785156 47.683594 Z M 48.785156 47.683594 "/>
+</g>
+</svg>
--- a/sequences/web/assets/firefox.svg
+++ b/sequences/web/assets/firefox.svg
--- a/sequences/web/assets/internet_explorer.svg
+++ b/sequences/web/assets/internet_explorer.svg
@@ -0,0 +1 @@
+<svg width="82" height="81" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="0" y="0" width="82" height="81"/></clipPath></defs><g clip-path="url(#clip0)"><path d="M80.5291 41.9193C80.5291 35.6682 78.9112 29.7848 76.1166 24.6368 88.2511-2.57399 63.2466 1.47085 61.7758 1.47085 56.6278 2.50045 51.4798 4.15516 47.0673 6.25112 30.1525 6.04888 15.4439 15.0762 10.6637 33.8296 19.4888 23.9013 25.7399 19.8565 29.417 18.3857 28.6448 19.0843 27.8726 19.8197 27.1004 20.5552 21.217 26.4386 16.4368 32.322 12.3919 38.5731 9.26637 44.0888 5.77309 48.8691 3.93453 55.1202-5.99372 91.1561 25.2619 76.0798 29.6744 73.5058 34.4547 75.8592 39.6027 77.1462 45.4861 77.1462 60.93 77.1462 74.1677 67.2179 78.948 53.6126L60.1946 53.6126C51.3695 67.5856 30.4099 61.3345 29.6744 46.2583L80.4188 46.2583C80.61 44.7507 80.713 43.243 80.713 41.8457ZM73.9103 6.98655C76.9623 9.04574 79.426 12.1345 75.1973 23.1659 71.1525 16.5471 65.2691 11.3991 57.9148 8.82511 61.1874 7.24395 69.3139 4.04484 74.0942 6.98655ZM8.82511 73.5426C6.32466 71.0054 5.88341 64.7175 11.3991 53.3184 14.157 61.4081 19.8565 68.0269 26.8431 72.0717 23.2762 74.0206 13.9731 78.3229 8.82511 73.2852ZM29.417 36.7713C29.7002 28.6816 36.7713 22.0628 45.5964 22.0628 54.4215 22.0628 61.4081 28.6816 61.7758 36.7713L29.7848 36.7713Z" fill="#1EBBEE" fill-rule="nonzero" fill-opacity="1" transform="scale(1 1.00585)"/></g></svg>
--- a/sequences/web/assets/opera.svg
+++ b/sequences/web/assets/opera.svg
@@ -0,0 +1 @@
+<svg width="81" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="0" y="0" width="81" height="80"/></clipPath><image width="68" height="80" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABQCAYAAACgVNM/AAAAAXNSR0IArs4c6QAAAHhlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAESgAwAEAAAAAQAAAFAAAAAAhzRKXAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAA/RJREFUeAHtmv9r00AYxputTp1Dh7pN7fwylKE4wZ9ERNCJCIIgiKB/ooIIwkAQUQQREQRBRRyTitrprMoUnbq1ifcmvePSJuld7r3kziSQXdpe3vd5P/fctUnmVHLevNoRD0OC03juoMTBCCITAwtAUk4VOChUk8TBZ1lAiNMgC0crkDxBdAMSBaMFiEkgZMGgAjEZhCgYNCBZwhC1P4WQpK07ljKQpGRUEEbbLVwlZrdmPrYSkO7AKiLjzuXFxvVJ+z6vn+ZJDYQPllZQ0nlUYFIfrM9oLZAzFRAaAEsQHydLEHxeOPYmZ05LA9EFI08QPBgpIP87DAAjDKQIMISBFAWGEJAiwQAgA/An682UBTSq7sQ1RIc7TIYBgGKBFBEGAMllykBiU7dIhxTVHTBImTjE9HWDd2sPEB3u4BOaftwDBFuwTe6A2kNAiu6OHiBFd0cISOmOwA6hKYPtEBvjaQNi22JKB69KD1CeONNgFre+Q1ykJ/AWc2DSfYd4yPYYXMT51wSmMsODzpRBJpJhAdipAodgR7U4nrZvGVuZVNfIwxnPtVU+vu5qpUWeWEXeFcFPZkPEKuFBrvDKRZUOVrmoUhKdtgQSCaScMQxLuYYwFMFBMGVKhzAsPpDyZwjjUSFTpkW+dssfIhSJT2J54hDqpBldemUt4c4agsqDwrayDdaQkgcbvOCOGXkJCyvW3hw7aC3iYMqU1zJhh4w3XzsuGVPMnWWw7MB3CGj2Spf4Q8fumGG6A2I1tk1buY4wILWv845LXIK5WzZbfLlsysArGNmib8whAALTHRCrvvWAdYhDQKa+LTjw0Apzt81xISC+SwgNF3FfGN1vlUsiL8LmNRQxvfwmMpdpDgotqlRcG+ZMQbfYUXu5ZQqdyuHv9dh8pvDvWUOoMMyFlcZ6sRkfMtWL1cYCmflRJ9c3uAssxDN962vhZyP70Ks4+vNt37x5gYt1CBXUJj+wsPenI3vRIVO9qq3QSD3ZtEdLAcd+vRPKr1qkzPnCgh4P64FyfMUsKMJAgPKj4d1anHJi5b2UDpkRl+0rLeThxkktUED4yd8fpPXIFtyvfyoBDzbog3LqTz5QoCZyk302FRCgfG99TZtTIP6Zv43U2uB8mY3WAjmVkt4d2qUVChR1dnVRSWMSGF4/zYOS7M7QTu1gzq1+1KaVj42SBEbh9jr9UPjRPr8mBihJV1QMNCBU7Fx1h3a30Fwq7YXWp8jaI99USQTn3hqcMBbKxfZSYs2JH6qCuTkwbgyYS+5noVqFOqmCgfNvOGO5wLnsNaVqlOqMAQZiXNcM54okBL6uXIDwAuD4WmX7/e73ZF5frXyZlemf1PcftR6x2LfilV8AAAAASUVORK5CYII=" preserveAspectRatio="none" id="img1"></image><image width="55" height="72" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAABICAYAAABSr21SAAAAAXNSR0IArs4c6QAAAHhlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAADegAwAEAAAAAQAAAEgAAAAA4IoD6AAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAA89JREFUaAXtWEFr1EAUTtItXUrLLpRCoZce9tabp55EqYfFFkEURERE9Ies/0MRERFBEaUVKQX35MVLD5566aFUCqXQ0qW0tjTmpbwwmUwyM9k3m+fSgTDZyXvf+755b2aS9bwhbj6ltpee98MW77nn3bT1MbXvS9wr3w9NA5nYPQvDvvjIMUqBvQ4CUlEyKfj99OKiFDcRywrgTa3mXJRIDu6fnJ9bcRT9jRzfjo4OXJRI8vHZmRFP0QfutU7vxsYqFYaEH52earmiLfa5Du/r9YyohycnufYAqPLBQBS9Lr4cQ0n2w/h4StiD42OlnQyGv2V/HKfobbhkSH+cmEiE3e/1Ms9tCIpYNn46W1NeKfKfJidjYfeOjlLjumC654irs7N5bsIxEfG50YiF3T08TMZsgulsEV9nZ/NcxzUAsC/NZmfE9z2dsU1g2RawIQbl9bXZTJaQHA9+x+KCIPDuHBw4yZgYFGL4USzKS8SX750LkgPC729TU4UzrvIpGru9v6/UoRwsAqJ49n16mlQccGrv7WW0xGVJQdgGA4gE0fqjvFTxM2pVRq7G1mdmSDN4a3c3pafmirgJLmxkLltKqctAedjd2VnS7N3Y2Uk0VZo5EOwye27rIi9dwvj17W3SzUWAvjzExYEq7iF7VNfPubmkzCsvS5hMOBJctMrLEkQtbG1Fb2R02cOJYiEOyPhR9qiuX61WXJosyhLEjTg489hk7trmJnlpsskclib0VM3NNlWS3e/5+WQbLwmRuIW+/4JV5iiPBJil4RUX7b6sxJHumNzEwTlH1aAs2RwFIKq1sUF6HLAqSxBI9QnEbkOJxRGVZnQU8NpQQBzZpsJN3J+FBbpDPJooVmuOar1BBbBbc2QlCeqixipzpOcctzU31O+WlGXZ6HY7Q1uWrNZcb3GR7BiIdxNOGwrleuMnjvAPovraWvx5wWLN/W23yUuSzZpzUZJ8xBGWZLC6mnzxVl6W4dKSk5KEzLH6EgdClC1JISWoKRZ11nyhJIHDVeZMM2Fj5zprlWWOWljepA58zbkQJq81FBuvuXB5uYMD/1ufJwx0xOL8lZWOixmVJ2oQMcSYqd3SZXAX2EVZA5GpNScS0DmKM1R0L2IW2dk+M+GXEgcBRDImAEWkRKwiO9tnprwy4iCQTMoUDEnK/jhO0dtwUYpDEiqSeeAqW8Sh6vNi5+EXigOnQZDOIyeO2woDX604MKpaYBlhxuLAENqgRZYVdcnWMHNojL1rkf2KQp5GZYnGqp5SKJUo5Nm3OASC3vYdFV77RP+re4sZ+AcU19+VizrQFgAAAABJRU5ErkJggg==" preserveAspectRatio="none" id="img2"></image></defs><g clip-path="url(#clip0)"><use width="100%" height="100%" xlink:href="#img1" fill="none" opacity="1"></use><use width="100%" height="100%" xlink:href="#img2" fill="none" opacity="1" transform="translate(26 4)"></use></g></svg>
--- a/sequences/web/assets/premier_site.png
+++ b/sequences/web/assets/premier_site.png
--- a/sequences/web/assets/safari.svg
+++ b/sequences/web/assets/safari.svg
--- a/sequences/web/assets/site_lycee.png
+++ b/sequences/web/assets/site_lycee.png
--- a/sequences/web/assets/source.png
+++ b/sequences/web/assets/source.png
				`@@ -0,0 +1 @@`
				<svg width="82" height="81" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="0" y="0" width="82" height="81"/></clipPath></defs><g clip-path="url(#clip0)"><path d="M80.5291 41.9193C80.5291 35.6682 78.9112 29.7848 76.1166 24.6368 88.2511-2.57399 63.2466 1.47085 61.7758 1.47085 56.6278 2.50045 51.4798 4.15516 47.0673 6.25112 30.1525 6.04888 15.4439 15.0762 10.6637 33.8296 19.4888 23.9013 25.7399 19.8565 29.417 18.3857 28.6448 19.0843 27.8726 19.8197 27.1004 20.5552 21.217 26.4386 16.4368 32.322 12.3919 38.5731 9.26637 44.0888 5.77309 48.8691 3.93453 55.1202-5.99372 91.1561 25.2619 76.0798 29.6744 73.5058 34.4547 75.8592 39.6027 77.1462 45.4861 77.1462 60.93 77.1462 74.1677 67.2179 78.948 53.6126L60.1946 53.6126C51.3695 67.5856 30.4099 61.3345 29.6744 46.2583L80.4188 46.2583C80.61 44.7507 80.713 43.243 80.713 41.8457ZM73.9103 6.98655C76.9623 9.04574 79.426 12.1345 75.1973 23.1659 71.1525 16.5471 65.2691 11.3991 57.9148 8.82511 61.1874 7.24395 69.3139 4.04484 74.0942 6.98655ZM8.82511 73.5426C6.32466 71.0054 5.88341 64.7175 11.3991 53.3184 14.157 61.4081 19.8565 68.0269 26.8431 72.0717 23.2762 74.0206 13.9731 78.3229 8.82511 73.2852ZM29.417 36.7713C29.7002 28.6816 36.7713 22.0628 45.5964 22.0628 54.4215 22.0628 61.4081 28.6816 61.7758 36.7713L29.7848 36.7713Z" fill="#1EBBEE" fill-rule="nonzero" fill-opacity="1" transform="scale(1 1.00585)"/></g></svg>
				`@@ -0,0 +1 @@`
				<svg width="81" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="0" y="0" width="81" height="80"/></clipPath><image width="68" height="80" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABQCAYAAACgVNM/AAAAAXNSR0IArs4c6QAAAHhlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAESgAwAEAAAAAQAAAFAAAAAAhzRKXAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAA/RJREFUeAHtmv9r00AYxputTp1Dh7pN7fwylKE4wZ9ERNCJCIIgiKB/ooIIwkAQUQQREQRBRRyTitrprMoUnbq1ifcmvePSJuld7r3kziSQXdpe3vd5P/fctUnmVHLevNoRD0OC03juoMTBCCITAwtAUk4VOChUk8TBZ1lAiNMgC0crkDxBdAMSBaMFiEkgZMGgAjEZhCgYNCBZwhC1P4WQpK07ljKQpGRUEEbbLVwlZrdmPrYSkO7AKiLjzuXFxvVJ+z6vn+ZJDYQPllZQ0nlUYFIfrM9oLZAzFRAaAEsQHydLEHxeOPYmZ05LA9EFI08QPBgpIP87DAAjDKQIMISBFAWGEJAiwQAgA/An682UBTSq7sQ1RIc7TIYBgGKBFBEGAMllykBiU7dIhxTVHTBImTjE9HWDd2sPEB3u4BOaftwDBFuwTe6A2kNAiu6OHiBFd0cISOmOwA6hKYPtEBvjaQNi22JKB69KD1CeONNgFre+Q1ykJ/AWc2DSfYd4yPYYXMT51wSmMsODzpRBJpJhAdipAodgR7U4nrZvGVuZVNfIwxnPtVU+vu5qpUWeWEXeFcFPZkPEKuFBrvDKRZUOVrmoUhKdtgQSCaScMQxLuYYwFMFBMGVKhzAsPpDyZwjjUSFTpkW+dssfIhSJT2J54hDqpBldemUt4c4agsqDwrayDdaQkgcbvOCOGXkJCyvW3hw7aC3iYMqU1zJhh4w3XzsuGVPMnWWw7MB3CGj2Spf4Q8fumGG6A2I1tk1buY4wILWv845LXIK5WzZbfLlsysArGNmib8whAALTHRCrvvWAdYhDQKa+LTjw0Apzt81xISC+SwgNF3FfGN1vlUsiL8LmNRQxvfwmMpdpDgotqlRcG+ZMQbfYUXu5ZQqdyuHv9dh8pvDvWUOoMMyFlcZ6sRkfMtWL1cYCmflRJ9c3uAssxDN962vhZyP70Ks4+vNt37x5gYt1CBXUJj+wsPenI3vRIVO9qq3QSD3ZtEdLAcd+vRPKr1qkzPnCgh4P64FyfMUsKMJAgPKj4d1anHJi5b2UDpkRl+0rLeThxkktUED4yd8fpPXIFtyvfyoBDzbog3LqTz5QoCZyk302FRCgfG99TZtTIP6Zv43U2uB8mY3WAjmVkt4d2qUVChR1dnVRSWMSGF4/zYOS7M7QTu1gzq1+1KaVj42SBEbh9jr9UPjRPr8mBihJV1QMNCBU7Fx1h3a30Fwq7YXWp8jaI99USQTn3hqcMBbKxfZSYs2JH6qCuTkwbgyYS+5noVqFOqmCgfNvOGO5wLnsNaVqlOqMAQZiXNcM54okBL6uXIDwAuD4WmX7/e73ZF5frXyZlemf1PcftR6x2LfilV8AAAAASUVORK5CYII=" preserveAspectRatio="none" id="img1"></image><image width="55" height="72" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAABICAYAAABSr21SAAAAAXNSR0IArs4c6QAAAHhlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAADegAwAEAAAAAQAAAEgAAAAA4IoD6AAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAA89JREFUaAXtWEFr1EAUTtItXUrLLpRCoZce9tabp55EqYfFFkEURERE9Ies/0MRERFBEaUVKQX35MVLD5566aFUCqXQ0qW0tjTmpbwwmUwyM9k3m+fSgTDZyXvf+755b2aS9bwhbj6ltpee98MW77nn3bT1MbXvS9wr3w9NA5nYPQvDvvjIMUqBvQ4CUlEyKfj99OKiFDcRywrgTa3mXJRIDu6fnJ9bcRT9jRzfjo4OXJRI8vHZmRFP0QfutU7vxsYqFYaEH52earmiLfa5Du/r9YyohycnufYAqPLBQBS9Lr4cQ0n2w/h4StiD42OlnQyGv2V/HKfobbhkSH+cmEiE3e/1Ms9tCIpYNn46W1NeKfKfJidjYfeOjlLjumC654irs7N5bsIxEfG50YiF3T08TMZsgulsEV9nZ/NcxzUAsC/NZmfE9z2dsU1g2RawIQbl9bXZTJaQHA9+x+KCIPDuHBw4yZgYFGL4USzKS8SX750LkgPC729TU4UzrvIpGru9v6/UoRwsAqJ49n16mlQccGrv7WW0xGVJQdgGA4gE0fqjvFTxM2pVRq7G1mdmSDN4a3c3pafmirgJLmxkLltKqctAedjd2VnS7N3Y2Uk0VZo5EOwye27rIi9dwvj17W3SzUWAvjzExYEq7iF7VNfPubmkzCsvS5hMOBJctMrLEkQtbG1Fb2R02cOJYiEOyPhR9qiuX61WXJosyhLEjTg489hk7trmJnlpsskclib0VM3NNlWS3e/5+WQbLwmRuIW+/4JV5iiPBJil4RUX7b6sxJHumNzEwTlH1aAs2RwFIKq1sUF6HLAqSxBI9QnEbkOJxRGVZnQU8NpQQBzZpsJN3J+FBbpDPJooVmuOar1BBbBbc2QlCeqixipzpOcctzU31O+WlGXZ6HY7Q1uWrNZcb3GR7BiIdxNOGwrleuMnjvAPovraWvx5wWLN/W23yUuSzZpzUZJ8xBGWZLC6mnzxVl6W4dKSk5KEzLH6EgdClC1JISWoKRZ11nyhJIHDVeZMM2Fj5zprlWWOWljepA58zbkQJq81FBuvuXB5uYMD/1ufJwx0xOL8lZWOixmVJ2oQMcSYqd3SZXAX2EVZA5GpNScS0DmKM1R0L2IW2dk+M+GXEgcBRDImAEWkRKwiO9tnprwy4iCQTMoUDEnK/jhO0dtwUYpDEiqSeeAqW8Sh6vNi5+EXigOnQZDOIyeO2woDX604MKpaYBlhxuLAENqgRZYVdcnWMHNojL1rkf2KQp5GZYnGqp5SKJUo5Nm3OASC3vYdFV77RP+re4sZ+AcU19+VizrQFgAAAABJRU5ErkJggg==" preserveAspectRatio="none" id="img2"></image></defs><g clip-path="url(#clip0)"><use width="100%" height="100%" xlink:href="#img1" fill="none" opacity="1"></use><use width="100%" height="100%" xlink:href="#img2" fill="none" opacity="1" transform="translate(26 4)"></use></g></svg>