From 84546f020141ee31782cc6e3166b263aef44301b Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Fri, 13 Sep 2024 18:52:25 +0200
Subject: [PATCH 1/6] rename fiche to modal

---
 frontend/src/html/index.html     | 2 +-
 frontend/src/scripts/UI/modal.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 36db215..94dae5f 100644
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -62,7 +62,7 @@
 
   <footer id="footer" ref="footer"></footer>
 
-  <dialog id="fiche" style="display:flex;flex-direction: row;">
+  <dialog id="modal" style="display:flex;flex-direction: row;">
     <section style="width:100%;height:100%">
       <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;">
         <div style="float:left"><div class="modal_header">This is a modal header</div></div>
diff --git a/frontend/src/scripts/UI/modal.js b/frontend/src/scripts/UI/modal.js
index 606d079..dadfa8f 100644
--- a/frontend/src/scripts/UI/modal.js
+++ b/frontend/src/scripts/UI/modal.js
@@ -2,7 +2,7 @@ class Modal {
     // TODO : industrialiser en créant une classe 
 }
 
-const modalDialog = document.getElementById('fiche');
+const modalDialog = document.getElementById('modal');
 
 var modal_hooks = [];
 
-- 
2.26.2


From aea068a3d960a32dec452a846566f21b0ae11c61 Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Fri, 13 Sep 2024 19:14:31 +0200
Subject: [PATCH 2/6] commit 20240913

---
 frontend/src/html/index.html        |  91 +---------
 frontend/src/scripts/UI/CSS.js      |  33 ++++
 frontend/src/scripts/UI/datagrid.js |   8 +-
 frontend/src/scripts/default.js     | 267 +---------------------------
 frontend/src/tools/cscripts.sh      |   5 +-
 5 files changed, 46 insertions(+), 358 deletions(-)
 create mode 100644 frontend/src/scripts/UI/CSS.js

diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 94dae5f..ccf7bc7 100644
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -137,94 +137,6 @@
   <template id="synthesis_body_accueil">
   </template>
 
-  <template id="synthesis_body_taches">
-      <div class="statrow" style="margin-top: 5px">
-        <div class="statbox1" onclick="changeModeAffichage('taches','Tasks')">Tasks</div>
-        <div class="statbox1" onclick="changeModeAffichage('releases','Realeases')">Realeases</div>
-        <div class="statbox1" onclick="changeModeAffichage('feries','Hollidays')">Hollidays</div>
-        <div class="statbox1" onclick="changeModeAffichage('rdv','Rendez-Vous')">RdV</div>
-        <div class="statbox1" onclick="changeModeAffichage('items','Items')">Items</div>
-      </div>
-      <br>
-      <!--
-      <select onchange="changeModeAffichageEvent(event)">
-        <option value="taches" selected>Tasks</option>
-        <option value="releases">Releases</option>
-        <option value="feries">Hollidays</option>
-        <option value="rdv">Rendez-Vous</option>
-        <option value="items">Items</option>
-      </select>
-      -->
-      <select onchange="changeAffichageNiveauxEvent(event)">
-        <option value="9999" selected>Tous les niveaux</option>
-        <option value="1">1 niveau</option>
-        <option value="2">2 niveaux</option>
-        <option value="3">3 niveaux</option>
-        <option value="4">4 niveaux</option>
-        <option value="5">5 niveaux</option>
-        <option value="6">6 niveaux</option>
-        <option value="7">7 niveaux</option>
-        <option value="8">8 niveaux</option>
-        <option value="9">9 niveaux</option>
-        <option value="10">10 niveaux</option>
-      </select>
-      <select onchange="changeFiltreClient(event)">
-        <option value="ALL">Tous les clients</option>
-        <option value="TME">TME</option>
-
-        <option value="REL">Realeases</option>
-        <option value="FER">Fériés</option>
-        <option value="RDV">Rendez-vous</option>
-
-        <option value="CGI">CGI</option>
-        <option value="CD56">CD56</option>
-        <option value="CD44">CD44</option>
-        <option value="CD49">CD49</option>
-        <option value="CD61">CD61</option>
-        <option value="CD33">CD33</option>
-        <option value="CD58">CD58</option>
-        <option value="CD18">CD18</option>
-        <option value="CTM">CTM</option>
-        <option value="CNFPT">CNFPT</option>
-        <option value="CRNA">CRNA</option>
-        <option value="CRNA">TME</option>
-
-      </select>
-      <select onchange="changeAffichageItemsTermine(event)">
-        <option value="oui">Afficher les items terminés</option>
-        <option value="non">Masquer les items terminés</option>
-      </select>
-  </template>
-
-  <template id="synthesis_body_calendrier">
-    <select onchange="changeModeAffichageEvent(event)">
-      <option value="calendar_intervenants" selected>Calendrier Intervenants</option>
-      <option value="calendar_clients">Calendrier Clients</option>
-    </select><br>
-    <select onchange="changeCalendarEvent(event)">
-      <option value="1" selected>Cette semaine</option>
-      <option value="2">Cette année</option>
-    </select><br>
-  </template>
-
-  <template id="synthesis_body_planning">
-    <select onchange="changeAffichageItemsTermine(event)">
-      <option value="non">Masquer les items terminés</option>
-      <option value="oui">Afficher les items terminés</option>
-    </select>
-  </template>
-
-  <template id="synthesis_body_project">
-    <select onchange="changeAffichageItemsTermine(event)">
-      <option value="non">Masquer les items terminés</option>
-      <option value="oui" selected>Afficher les items terminés</option>
-    </select>
-    <select onchange="changeAffichageItemsPrestations(event)">
-      <option value="non">Tous les items</option>
-      <option value="oui" selected>Uniquement les prestations</option>
-    </select>
-  </template>
-
   <template id="footer_accueil">
     <h2>Gestion de Projet</h2>
     <p>
@@ -237,8 +149,7 @@
         <br>
         <br>Loi de Parkinson : le travail s'étale de façon à occuper tout le temps disponible pour son achèvement.
         <br>Loi de Hofstadter: il est presque impossible de prévoir le temps qui sera nécessaire à l'accomplissement
-        d'une
-        tâche complexe.
+        d'une tâche complexe.
         <br>Principe de Pareto : 20% des efforts produisent 80% des effets.
         <br>
         <br>Loi de Conway : un produit est le reflet de l'organisation qui l'a conçu.
diff --git a/frontend/src/scripts/UI/CSS.js b/frontend/src/scripts/UI/CSS.js
new file mode 100644
index 0000000..afd9359
--- /dev/null
+++ b/frontend/src/scripts/UI/CSS.js
@@ -0,0 +1,33 @@
+  // Get the CSS root element
+  const rootCSS = document.querySelector(':root');
+
+  // Create a function for getting a variable value
+  function CSSgetSombre() {
+    let rs = getComputedStyle(rootCSS);
+    alert("The value of --couleur-sombre is: " + rs.getPropertyValue('--couleur-sombre'));
+  }
+
+  function CSSsetSombre(vr, vg, vb) {
+    // Couleur
+    rootCSS.style.setProperty('--r-sombre', vr);
+    rootCSS.style.setProperty('--g-sombre', vg);
+    rootCSS.style.setProperty('--b-sombre', vb);
+    // Logo
+    // let logo = document.querySelector('header>#logo>svg');
+    // if (logo) logo.style.fill = 'rgb(' + vr + ',' + vg + ',' + vb + ')';
+  }
+  function CSSsetClair(vr, vg, vb) {
+    // Couleur
+    rootCSS.style.setProperty('--r-clair', vr);
+    rootCSS.style.setProperty('--g-clair', vg);
+    rootCSS.style.setProperty('--b-clair', vb);
+  }
+
+  function CSSswitchCouleurTexte() {
+    let rs = getComputedStyle(rootCSS);
+    let actuel = rs.getPropertyValue('--couleur-texte');
+    if (actuel == 'black')
+      rootCSS.style.setProperty('--couleur-texte', 'var(--couleur-sombre)');
+    else
+      rootCSS.style.setProperty('--couleur-texte', 'black');
+  }
diff --git a/frontend/src/scripts/UI/datagrid.js b/frontend/src/scripts/UI/datagrid.js
index d4ab6e6..efed85a 100644
--- a/frontend/src/scripts/UI/datagrid.js
+++ b/frontend/src/scripts/UI/datagrid.js
@@ -1,5 +1,5 @@
 // ---------------------------------------------------------------------------------------
-// ---- Fonctions pour charger des lignes identiques dans le tableau
+// ---- Fonction pour charger des lignes identiques dans le tableau
 // ---------------------------------------------------------------------------------------
 function datagridLignesIdentiques(nblignes, valeur) {
   let element = document.querySelector('#datagrid');
@@ -30,14 +30,14 @@ function datagridLignesIdentiques(nblignes, valeur) {
   element.innerHTML = contenu;
 }
 // ---------------------------------------------------------------------------------------
-// ---- Fonctions pour charger des lignes vides
+// ---- Fonction pour charger des lignes vides
 // ---------------------------------------------------------------------------------------
 function datagridEmptyLines(nblignes) {
   return datagridLignesIdentiques(nblignes,'&nbsp;');
 }
 
 // ---------------------------------------------------------------------------------------
-// ---- Fonctions utilitaires
+// ---- Fonction utilitaires
 // ---------------------------------------------------------------------------------------
 function datagridLoading() {
   let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500
@@ -45,7 +45,7 @@ function datagridLoading() {
 }
 
 // ---------------------------------------------------------------------------------------
-// ---- Fonctions pour charger des données au hasard dans le datagrid
+// ---- Fonction pour charger des données au hasard dans le datagrid
 // ---------------------------------------------------------------------------------------
 
 var nbCols = 5;
diff --git a/frontend/src/scripts/default.js b/frontend/src/scripts/default.js
index b3eb4c3..0792179 100644
--- a/frontend/src/scripts/default.js
+++ b/frontend/src/scripts/default.js
@@ -159,100 +159,9 @@
 
   function initDatagrid()
   {
-    let type = getContexteValeur('type');
-    switch(type){
-      case 'TODO':
-        initDatagridTodos();    
-        break;
-      default:
-        initDatagridItems();    
-        break;
-    }
+    datagridLoading();
   }
 
-  function changeModeAffichage(valeur, texte)
-  {
-    let type='TODO';
-
-    switch(valeur){
-      case 'absences':
-      case 'releases':
-      case 'rdv':
-      case 'feries':
-      case 'taches':
-        type='TACHE';
-        break;
-    }
-
-    setContexteValeur('mode_affichage', valeur);
-
-    setContexteValeur('type_courant', type);
-    setFiltreValeur('type',type);
-
-    setFilAriane(['Home', 'List', texte]);
-
-    return afficherItems();
-
-  }
-
-  function changeModeAffichageEvent(e)
-  {
-    return changeModeAffichage(e.target.value, e.target.options[e.target.selectedIndex].text);
-  }
-
-  function changeAffichageItemsTermine(e)
-  {
-    setContexteValeur('termine', e.target.value);
-
-    setFiltreValeur('status',e.target.value);
-
-    afficherItems();
-  }
-
-  function changeAffichageItemsPrestations(e)
-  {
-    setContexteValeur('prestation', e.target.value);
-
-    afficherItems();
-  }
- 
-  function changeFiltreClient(e)
-  {
-    let valeur = e.target.value;
-    if (valeur == 'ALL') valeur='';
-    setContexteValeur('client', valeur);
-
-    setFiltreValeur('client', valeur);
-
-    afficherItems();
-  }
-
-  function changeAffichageNiveauxEvent(e)
-  {
-    setContexteValeur('level', e.target.value);
-
-    setFiltreValeur('level', e.target.value);
-
-    afficherItems();
-  }
-
-  function changeCalendarEvent(e)
-  {
-    let valeur = todayStringDate;
-    switch(parseInt(e.target.value)) {
-      case 2 :
-        valeur = todayStringDate.substring(0,4)+'0101';
-        break;
-    }
-    setContexteValeur('debut',valeur);
-    setFiltreValeur('debut', valeur);
-    afficherItems();
-  }
-
-  function updateValue(e) {
-    if (e.target.value != '') editerItem(-1, e.target.value);
-    e.target.value = '';
-  }
 
   function afficher_synthese(mode) {
     let synthesis_body = document.querySelector('#synthesis_body');
@@ -317,181 +226,15 @@
   }
 
   function activeMode(mode) {
-    setContexteValeur('type_courant', 'TODO');
-    setContexteValeur('items_type', 'items');
-
-    switch (mode) {
-      case 'Tree':		    
-      case 'TreeList' :
-      case 'List':
-        mode='Tasks';
-      case 'Tasks':
-      case 'Releases':
-      case 'Hollidays':
-      case 'Rendez-Vous':
-      case 'Items':
-        setContexteValeur('mode_feuille', false);
-        setContexteValeur('type_courant', 'TACHE');
-
-        setContexteValeur('mode_affichage', modeToAffichage(mode));
-
-        afficher_synthese('taches');
-        afficher_footer('taches');
-
-        setFilAriane(['Home', 'TreeList', mode]);
-
-        initDatagridItems();
-      break;
-
-      case 'Project':
-        setContexteValeur('mode_feuille', false);
-        setContexteValeur('termine', true);
-        setContexteValeur('prestation', true);
-        setContexteValeur('type_courant', 'PRESTATION');
-
-        setContexteValeur('mode_affichage', modeToAffichage(mode));
-
-        afficher_synthese('project');
-        afficher_footer('taches');
-
-        setFilAriane(['Home', 'Project']);
-
-        initDatagridItems();
-      break;
-
-      case 'Plan':
-      case 'Planning':
-        
-        setFilAriane([mode]);
-
-        setContexteValeur('type_courant', 'TODO');
-        setContexteValeur('mode_feuille', true);
-        setContexteValeur('mode_affichage', 'planning');
-        setContexteValeur('termine', 'non');
-
-        afficher_synthese('planning');
-        afficher_footer('planning');
-
-        initDatagridItems();
-      break;
-
-      case 'Calendar':
-        setFilAriane(['Todo', mode]);
-
-        setContexteValeur('mode_feuille', true);
-        setContexteValeur('mode_affichage', 'calendar_intervenants');
-        setContexteValeur('debut', todayStringDate);
-
-        afficher_synthese('calendrier');
-        afficher_footer('calendrier');
-
-        initDatagridItems();
-      break;
-
-      case 'Administration':
-        setFilAriane(['Todo', mode]);
-        initAdministration();
-      break;
-
-      case 'Status':
-        setFilAriane(['Todo', 'Administration', mode]);
-        initDatagridStatus();
-      break;
-
-      case 'Clients':
-        setFilAriane(['Todo', 'Administration', mode]);
-        initDatagridClients();
-      break;
-
-      case 'Collaborateurs':
-        setFilAriane(['Todo', 'Administration', mode]);
-        initDatagridCollaborateurs();
-      break;
-
-      default:
-      case 'Home':
-        mode='Todo';
-      case 'Todo':
-        setFilAriane(['Home', mode]);
-
-        setDefaultContext();
-
-        setContexteValeur('type', 'TODO');
-        setContexteValeur('items_type', 'todos');
-        setContexteValeur('mode_affichage', 'todos');
-        setContexteValeur('mode_feuille', true);
-        setContexteValeur('parent', '1');
-
-        afficher_synthese('accueil');
-        afficher_footer('accueil');
-
-        initDatagridItems();
-      break;
-    }
-  }
-
-  function initAdministration() {
-    let element = document.querySelector('#synthesis_middle');
-    contenu = '<div style="padding:0px 10px;display: flex;flex-wrap: nowrap;justify-content: space-between;">';
-    contenu += '<a onclick="activeMenu(this)">Status</a>';
-    contenu += '<a onclick="activeMenu(this)">Clients</a>';
-    contenu += '<a onclick="activeMenu(this)">Collaborateurs</a>';
-    contenu += '</div>';
-    element.innerHTML = contenu;
-
-  }
-
-  function setDefaultContext()
-  {
-    // Contexte de départ
-    setContexteValeur('level', '9999');
-    setContexteValeur('parent', '1');
-    setContexteValeur('parent_level','0');
-    setContexteValeur('client', '');
-    setContexteValeur('termine', 'oui');
+    setFilAriane(['Home', mode]);
+    initDatagrid();
   }
 
   // UI
   setLogoVisiblity(false);
 
   // Contexte de départ
-  setContexteValeur('intervenant', 'Anonymous');
-
-  init_filtres(['type','client','debut','fin','level'])
+  setContexteValeur('user', 'Anonymous');
 
   // GO !
-  activeMode('Todo');
-
-  // Get the CSS root element
-  const rootCSS = document.querySelector(':root');
-
-  // Create a function for getting a variable value
-  function CSSgetSombre() {
-    let rs = getComputedStyle(rootCSS);
-    alert("The value of --couleur-sombre is: " + rs.getPropertyValue('--couleur-sombre'));
-  }
-
-  function CSSsetSombre(vr, vg, vb) {
-    // Couleur
-    rootCSS.style.setProperty('--r-sombre', vr);
-    rootCSS.style.setProperty('--g-sombre', vg);
-    rootCSS.style.setProperty('--b-sombre', vb);
-    // Logo
-    // let logo = document.querySelector('header>#logo>svg');
-    // if (logo) logo.style.fill = 'rgb(' + vr + ',' + vg + ',' + vb + ')';
-  }
-  function CSSsetClair(vr, vg, vb) {
-    // Couleur
-    rootCSS.style.setProperty('--r-clair', vr);
-    rootCSS.style.setProperty('--g-clair', vg);
-    rootCSS.style.setProperty('--b-clair', vb);
-  }
-
-  function CSSswitchCouleurTexte() {
-    let rs = getComputedStyle(rootCSS);
-    let actuel = rs.getPropertyValue('--couleur-texte');
-    if (actuel == 'black')
-      rootCSS.style.setProperty('--couleur-texte', 'var(--couleur-sombre)');
-    else
-      rootCSS.style.setProperty('--couleur-texte', 'black');
-  }
+  activeMode('Menu1');
diff --git a/frontend/src/tools/cscripts.sh b/frontend/src/tools/cscripts.sh
index 7507aa9..6cdc63d 100755
--- a/frontend/src/tools/cscripts.sh
+++ b/frontend/src/tools/cscripts.sh
@@ -5,8 +5,9 @@ export src=scripts
 
 sources=""
 sources="$sources tools/delai tools/logs tools/dates tools/postData"
-sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis"
-sources="$sources UI/modal UI/settings UI/datagrid UI/pomodoro"
+# Commenter les Observer
+# sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis"
+sources="$sources UI/CSS UI/modal UI/settings UI/datagrid UI/pomodoro"
 sources="$sources UI/calendrier UI/planning"
 sources="$sources filtres contexte parametres ariane"
 sources="$sources api/entities api/status api/clients api/collaborateurs"
-- 
2.26.2


From c02bc6fc479fd3db5a474649e1f5c487e75f1b10 Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Sat, 14 Sep 2024 18:03:24 +0200
Subject: [PATCH 3/6] commit 20240914

---
 frontend/src/html/index.html                  | 161 ++++++++----------
 .../scripts/UI/IntersectionObserver/footer.js |   4 +-
 .../scripts/UI/IntersectionObserver/header.js |   8 +-
 .../UI/IntersectionObserver/synthesis.js      |   4 +-
 frontend/src/scripts/UI/datagrid.js           |   3 +-
 frontend/src/scripts/UI/modal.js              |   4 +-
 frontend/src/scripts/default.js               |  64 +++----
 frontend/src/scripts/tools/logs.js            |  23 ++-
 frontend/src/tools/cscripts.sh                |   2 +-
 9 files changed, 123 insertions(+), 150 deletions(-)

diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index ccf7bc7..736a8e3 100644
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -3,26 +3,14 @@
 
 <head>
   <meta charset="utf-8">
-  <link
-    rel="preload"
-    as="font"
-    type="font/woff2"
-    href="./fonts/Fonte-Texte.woff2"
-    crossorigin
-  />
-  <link
-    rel="preload"
-    as="font"
-    type="font/woff2"
-    href="./fonts/Fonte-Titre.woff2"
-    crossorigin
-  />
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
   <title>template TOPISTO</title>
   <meta name="description" content="Suivi activité">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <link rel="stylesheet" type="text/css" href="styles/app.css?TIMESTAMP">
-  
+
 </head>
 
 <body>
@@ -38,15 +26,16 @@
   <nav>
     <section id="ariane">
       <div id="fil"></div>
-      <div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
+      <div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log
+            In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
     </section>
     <section id="bandeau">
       <div id="menu">
         <a onclick="activeMenu(this)">Menu1</a>
         <a onclick="activeMenu(this)">Menu2</a>
-        <a onclick="activeMenu(this)">Menu3</a>        
+        <a onclick="activeMenu(this)">Menu3</a>
       </div>
-      <svg viewBox="0 0 920 920" id="settings" class="js-open-modal-trigger" data-modal-info="type=settings" >
+      <svg viewBox="0 0 920 920" id="settings" class="js-open-modal-trigger" data-modal-info="type=settings">
         <use href="#topisto"></use>
       </svg>
     </section>
@@ -65,7 +54,9 @@
   <dialog id="modal" style="display:flex;flex-direction: row;">
     <section style="width:100%;height:100%">
       <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;">
-        <div style="float:left"><div class="modal_header">This is a modal header</div></div>
+        <div style="float:left">
+          <div class="modal_header">This is a modal header</div>
+        </div>
         <div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
         <div style="clear:both"></div>
       </div>
@@ -84,39 +75,24 @@
       <div style="clear:both"></div>
     </div>
     <div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;"></div>
-    <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span class="modal_footer">This is a modal footer</span></div>
+    <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span
+        class="modal_footer">This is a modal footer</span></div>
   </dialog>
 
-  <template id="filtre_level">
-    <select onchange="changeAffichageNiveauxEvent(event)">
-      <option value="9999" selected>Tous les niveaux</option>
-      <option value="1">1 niveau</option>
-      <option value="2">2 niveaux</option>
-      <option value="3">3 niveaux</option>
-      <option value="4">4 niveaux</option>
-      <option value="5">5 niveaux</option>
-      <option value="6">6 niveaux</option>
-      <option value="7">7 niveaux</option>
-      <option value="8">8 niveaux</option>
-      <option value="9">9 niveaux</option>
-      <option value="10">10 niveaux</option>
-    </select>
-  </template>
-
   <template id="settings_header">
     <section style="display: flex">
       <svg viewBox="0 0 920 920" onclick="settingsSetModeInfo()">
-          <use href="#topisto"></use>
+        <use href="#topisto"></use>
       </svg>
       <svg viewBox="0 0 550 550" onclick="settingsSetModeLogin()">
         <use href="#user"></use>
-      </svg>  
+      </svg>
       <svg viewBox="0 0 1024 1024" onclick="settingsSetModeFilter()">
         <use href="#filter"></use>
-      </svg>  
+      </svg>
       <svg viewBox="0 0 1024 1024" onclick="settingsSetModeSetup()">
         <use href="#setup"></use>
-      </svg>  
+      </svg>
     </section>
   </template>
 
@@ -127,18 +103,25 @@
         <h3>Fournir un template générique pour les applis HTML</h3>
         <p>Version 0.1</p>
         <p><small>
-          contributeurs:<br>
-          Albert Seandhils<br>
-        </small></p>
+            contributeurs:<br>
+            Albert Seandhils<br>
+          </small></p>
       </div>
     </section>
   </template>
 
-  <template id="synthesis_body_accueil">
+  <template id="synthesis_body_Home">
+    <div class="statrow">
+      <div class="statbox2">Indicateur 1<br>110</div>
+      <div class="statbox1">Indicateur 2<br>45</div>
+      <div class="statbox1">Indicateur 3<br>0</div>
+      <div class="statbox1">Indicateur 4<br>0</div>
+      <div class="statbox2">Indicateur 5<br>26</div>
+    </div>
   </template>
 
-  <template id="footer_accueil">
-    <h2>Gestion de Projet</h2>
+  <template id="footer_Home">
+    <h2>Modèle de page HTML pour visulaisation de données</h2>
     <p>
       <small>
         Un projet est un ensemble d'efforts fournis de manière limitée dans le temps afin de produire un résultat
@@ -163,47 +146,47 @@
         NB : En Tchèque, SMETI c'est la poussière (littéralement : "ce qui peut être balayé")
       </i>
     </p>
-      <h2>Explications</h2>
-      <p>
-        L'objectif de cette page est de présenter des données sous forme de tableau.<br>
-        La page permet en outre :
-      <ul>
-        <li>De rappeler l'identité visuelle : logo, bannière</li>
-        <li>De naviguer dans l'application</li>
-        <li>D'accéder à une synthèse et à une explication des données</li>
-      </ul>
-      </p>
-      <p>
-        Le header est une bannière qui fait 30% du viewport.
-        Elle contient une image de background alignée à gauche et un texte aligné à droite.
-      </p>
-      <p>
-        Lorsque le header sort de la partie visible de la page :
-      <ul>
-        <li>La barre de navigation devient "collée" au haut de page.</li>
-        <li>Le pied de tableau devient "collé" en bas de page</li>
-        <li>le logo apparaît à gauche de la barre de navigation.</li>
-      </ul>
-      </p>
-      <p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
-        toute
-        la page.</p>
-      <p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
-        similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
-        voluptatum nesciunt eligendi. Eos harum rerum vitae.
-      </p>
-      <h2>Focus sur la gestion des thèmes</h2>
-      <p>
-        Voici comment s'opère la gestion des couleurs.<br>
-        Dans le default.css, la section CSS root contient des variables CSS.<br>
-        On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
-        Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
-        <br>
-        Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
-      <ul>
-        <li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
-        <li>- Soit par calul de dégradé</li>
-      </ul>
+    <h2>Explications</h2>
+    <p>
+      L'objectif de cette page est de présenter des données sous forme de tableau.<br>
+      La page permet en outre :
+    <ul>
+      <li>De rappeler l'identité visuelle : logo, bannière</li>
+      <li>De naviguer dans l'application</li>
+      <li>D'accéder à une synthèse et à une explication des données</li>
+    </ul>
+    </p>
+    <p>
+      Le header est une bannière qui fait 30% du viewport.
+      Elle contient une image de background alignée à gauche et un texte aligné à droite.
+    </p>
+    <p>
+      Lorsque le header sort de la partie visible de la page :
+    <ul>
+      <li>La barre de navigation devient "collée" au haut de page.</li>
+      <li>Le pied de tableau devient "collé" en bas de page</li>
+      <li>le logo apparaît à gauche de la barre de navigation.</li>
+    </ul>
+    </p>
+    <p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
+      toute
+      la page.</p>
+    <p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
+      similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
+      voluptatum nesciunt eligendi. Eos harum rerum vitae.
+    </p>
+    <h2>Focus sur la gestion des thèmes</h2>
+    <p>
+      Voici comment s'opère la gestion des couleurs.<br>
+      Dans le default.css, la section CSS root contient des variables CSS.<br>
+      On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
+      Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
       <br>
-      Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".  
-  </template>
+      Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
+    <ul>
+      <li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
+      <li>- Soit par calul de dégradé</li>
+    </ul>
+    <br>
+    Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".
+  </template>
\ No newline at end of file
diff --git a/frontend/src/scripts/UI/IntersectionObserver/footer.js b/frontend/src/scripts/UI/IntersectionObserver/footer.js
index 87f2330..df6e1d9 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/footer.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/footer.js
@@ -3,10 +3,10 @@ const handleFooterIntersection = function (entries) {
   // Loop through all the observed elements
   entries.forEach(entry => {      // Check if the element is intersecting the viewport
       if (entry.isIntersecting) {
-        console.log("The footer is visible in the viewport");
+        msgConsole('IntersectionObserver','The footer is visible in the viewport');
         if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry);
       } else {
-        console.log("The footer is invisible in the viewport");
+        msgConsole('IntersectionObserver','The footer is invisible in the viewport');
         if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry);
       }
   });
diff --git a/frontend/src/scripts/UI/IntersectionObserver/header.js b/frontend/src/scripts/UI/IntersectionObserver/header.js
index 2e2ee73..5d56544 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/header.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/header.js
@@ -1,7 +1,13 @@
 // Create a function that will handle any intersection between some elements and the viewport.
 const handleHeaderIntersection = function (entries) {
   entries.forEach(entry => {
-    if (typeof headerIsVisible === 'function') headerIsNowVisible(entry.isIntersecting);
+    if (entry.isIntersecting) {
+      msgConsole('IntersectionObserver','The header is visible in the viewport');
+      if (typeof headerIsNowVisible === 'function') headerIsNowVisible(entry);
+    } else {
+      msgConsole('IntersectionObserver','The header is invisible in the viewport');
+      if (typeof headerIsNowInvisible === 'function') headerIsNowInvisible(entry);
+    }
   });
 }
 
diff --git a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
index a09c47b..a44d6de 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
@@ -3,10 +3,10 @@ const handleSynthesisIntersection = function (entries) {
   entries.forEach(entry => {
     // Check if the element is intersecting the viewport
     if (entry.isIntersecting) {
-      myLog("The synthesis is visible in the viewport");
+      msgConsole('IntersectionObserver',"The synthesis is visible in the viewport");
       if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
     } else {
-      myLog("The synthesis is invisible in the viewport");
+      msgConsole('IntersectionObserver',"The synthesis is invisible in the viewport");
       if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
     }
   });
diff --git a/frontend/src/scripts/UI/datagrid.js b/frontend/src/scripts/UI/datagrid.js
index efed85a..47d35cb 100644
--- a/frontend/src/scripts/UI/datagrid.js
+++ b/frontend/src/scripts/UI/datagrid.js
@@ -144,4 +144,5 @@ datagrid_hooks['random'] = function(){
   let element = document.querySelector('#datagrid');
   let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500
   setDatagridRandomValues(element, nbCols, nblignes)
-};
\ No newline at end of file
+};
+
diff --git a/frontend/src/scripts/UI/modal.js b/frontend/src/scripts/UI/modal.js
index dadfa8f..df61edb 100644
--- a/frontend/src/scripts/UI/modal.js
+++ b/frontend/src/scripts/UI/modal.js
@@ -138,7 +138,7 @@ function modalSetFooter(valeur)
  */
 function open_modal_hook(parametre)
 {
-    console.log("open_modal_hook pour "+parametre);
+    myLog("open_modal_hook pour "+parametre);
     let hook = null;
     let paramSplit = parametre.split(':');
     paramSplit.forEach(element => {
@@ -147,7 +147,7 @@ function open_modal_hook(parametre)
             hook = modal_hooks[elemSplit[1]];
         }
     });
-    if ((hook===null)||(hook===undefined)) hook = modal_hooks['ITEM'];
+    if ((hook===null)||(hook===undefined)) hook = modal_hooks['random'];
     return hook(parametre);
 }
 
diff --git a/frontend/src/scripts/default.js b/frontend/src/scripts/default.js
index 0792179..c318d49 100644
--- a/frontend/src/scripts/default.js
+++ b/frontend/src/scripts/default.js
@@ -130,12 +130,15 @@
     window.scrollTo(0, element.offsetHeight + 1);
   }
 
-  function headerIsVisible(flagVisible) {
-    setLogoVisiblity(!flagVisible);
-    if (!flagVisible) gotoTop();
+  function headerIsNowVisible(header) {
+    setLogoVisiblity(false);
   }
 
-  function synthesisTopIsNowVisible(entry) {
+  function headerIsNowInvisible(header) {
+    setLogoVisiblity(true);
+  }
+
+  function synthesisIsNowVisible(entry) {
 
     setDatagridHeadSticky(false);
     setDataGridFootSticky(false);
@@ -159,11 +162,13 @@
 
   function initDatagrid()
   {
+    let fonctionAffichageDataGrid = datagrid_hooks['random'];
     datagridLoading();
+    fonctionAffichageDataGrid();
   }
 
 
-  function afficher_synthese(mode) {
+  function initSynthese(mode) {
     let synthesis_body = document.querySelector('#synthesis_body');
     if (synthesis_body) {
       synthesis_body.innerHTML='';
@@ -175,7 +180,7 @@
     }
   }
 
-  function afficher_footer(mode) {
+  function initFooter(mode) {
     let footer_body = document.querySelector('footer');
     if (footer_body) {
       footer_body.innerHTML='';
@@ -188,46 +193,15 @@
   }
 
   function activeMenu(element) {
-    datagridEmptyLines(50);
-
-    activeMode(element.innerText);
-
-    gotoTop();
+      activeMode(element.innerText);
   }
-
-  function modeToAffichage(mode)
-  {
-    let retour='taches';
-    switch (mode) {
-      case 'Releases':
-        retour='releases';
-      break;
-      case 'Hollidays':
-        retour='feries';
-      break;
-      case 'Rendez-Vous':
-        retour='rdv';
-      break;
-      case 'Rendez-Vous':
-        retour='rdv';
-      break;
-      case 'Items':
-        retour='items';
-      break;
-      case 'Project':
-        retour='prestations';
-      break;
-      default:
-      case 'Tasks':
-        retour='taches';
-      break;
-    }
-    return retour;
-  }
-
+  
   function activeMode(mode) {
-    setFilAriane(['Home', mode]);
-    initDatagrid();
+    setFilAriane(['Home']);
+    if (mode != 'Home') setFilAriane(['Home', mode]);
+    initDatagrid(mode);
+    initSynthese(mode);
+    initFooter(mode);
   }
 
   // UI
@@ -237,4 +211,4 @@
   setContexteValeur('user', 'Anonymous');
 
   // GO !
-  activeMode('Menu1');
+  activeMode('Home');
diff --git a/frontend/src/scripts/tools/logs.js b/frontend/src/scripts/tools/logs.js
index 240a197..1997e4c 100644
--- a/frontend/src/scripts/tools/logs.js
+++ b/frontend/src/scripts/tools/logs.js
@@ -1,10 +1,19 @@
-var useLog=false;
-var useError=true;
+const msgLevel = ['log','error','alert'];
+
+function msgConsole(level, message) {
+  if (msgLevel.includes(level)) {
+    if ((level == 'error')||(level == 'alert')) console.error(message);
+    else console.log(message);
+  }
+}
 function myLog(message) {
-  if (useLog)
-    console.log(message);
+  msgConsole('log',message);
 }
 function myError(message) {
-  if (useError)
-    console.error(message);
-}
\ No newline at end of file
+  msgConsole('error',message);
+}
+function myAlert(message) {
+  msgConsole('alert',message);
+}
+
+
diff --git a/frontend/src/tools/cscripts.sh b/frontend/src/tools/cscripts.sh
index 6cdc63d..3bc2939 100755
--- a/frontend/src/tools/cscripts.sh
+++ b/frontend/src/tools/cscripts.sh
@@ -6,7 +6,7 @@ export src=scripts
 sources=""
 sources="$sources tools/delai tools/logs tools/dates tools/postData"
 # Commenter les Observer
-# sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis"
+sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis"
 sources="$sources UI/CSS UI/modal UI/settings UI/datagrid UI/pomodoro"
 sources="$sources UI/calendrier UI/planning"
 sources="$sources filtres contexte parametres ariane"
-- 
2.26.2


From 87c98514deb442acab79d7076b07bd37e9cf9137 Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Fri, 3 Jan 2025 08:36:29 +0100
Subject: [PATCH 4/6] 20250102

---
 frontend/src/html/index.html      | 97 +++++++++----------------------
 frontend/src/scripts/default.js   |  4 +-
 frontend/src/styles/synthesis.css |  1 +
 3 files changed, 29 insertions(+), 73 deletions(-)

diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 736a8e3..878db50 100644
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -2,13 +2,14 @@
 <html lang="fr">
 
 <head>
-  <meta charset="utf-8">
-  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
-  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
   <title>template TOPISTO</title>
+
   <meta name="description" content="Suivi activité">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta charset="utf-8">
 
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
   <link rel="stylesheet" type="text/css" href="styles/app.css?TIMESTAMP">
 
 </head>
@@ -26,8 +27,11 @@
   <nav>
     <section id="ariane">
       <div id="fil"></div>
-      <div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log
-            In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
+      <div id="aide">
+        <a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log In</span></a>
+        &nbsp;
+        <a alt="aide" onclick="gotoHelp()">?</a>
+      </div>
     </section>
     <section id="bandeau">
       <div id="menu">
@@ -114,79 +118,32 @@
     <div class="statrow">
       <div class="statbox2">Indicateur 1<br>110</div>
       <div class="statbox1">Indicateur 2<br>45</div>
-      <div class="statbox1">Indicateur 3<br>0</div>
+      <div class="statbox1">Indicateur 3<br>27</div>
       <div class="statbox1">Indicateur 4<br>0</div>
       <div class="statbox2">Indicateur 5<br>26</div>
     </div>
+    <div class="statrow">
+      <div class="statbox2">Indicateur 6<br>67</div>
+      <div class="statbox1">Indicateur 7<br>89</div>
+      <div class="statbox1">Indicateur 8<br>345</div>
+      <div class="statbox1">Indicateur 9<br>56</div>
+    </div>    
   </template>
 
   <template id="footer_Home">
-    <h2>Modèle de page HTML pour visulaisation de données</h2>
-    <p>
-      <small>
-        Un projet est un ensemble d'efforts fournis de manière limitée dans le temps afin de produire un résultat
-        unique.
-        <br>La gestion de projet met en oeuvre un ensemble de techniques et de compétences pour garantir le succès
-        d'un
-        projet.
-        <br>
-        <br>Loi de Parkinson : le travail s'étale de façon à occuper tout le temps disponible pour son achèvement.
-        <br>Loi de Hofstadter: il est presque impossible de prévoir le temps qui sera nécessaire à l'accomplissement
-        d'une tâche complexe.
-        <br>Principe de Pareto : 20% des efforts produisent 80% des effets.
-        <br>
-        <br>Loi de Conway : un produit est le reflet de l'organisation qui l'a conçu.
-        <br>On ne peut améliorer que ce que l'on mesure : résultats, performances,...
-        <br>
-        <br>La tranquillité ce n'est pas l'inaction.
-      </small>
-    </p>
-    <p>
-      <i>
-        NB : En Tchèque, SMETI c'est la poussière (littéralement : "ce qui peut être balayé")
-      </i>
-    </p>
-    <h2>Explications</h2>
-    <p>
-      L'objectif de cette page est de présenter des données sous forme de tableau.<br>
-      La page permet en outre :
-    <ul>
-      <li>De rappeler l'identité visuelle : logo, bannière</li>
-      <li>De naviguer dans l'application</li>
-      <li>D'accéder à une synthèse et à une explication des données</li>
-    </ul>
-    </p>
-    <p>
-      Le header est une bannière qui fait 30% du viewport.
-      Elle contient une image de background alignée à gauche et un texte aligné à droite.
-    </p>
-    <p>
-      Lorsque le header sort de la partie visible de la page :
+    <h2>Modèle de page HTML pour visualisation de données</h2>
+    <p>La page est composée comme suit :</p>
     <ul>
-      <li>La barre de navigation devient "collée" au haut de page.</li>
-      <li>Le pied de tableau devient "collé" en bas de page</li>
-      <li>le logo apparaît à gauche de la barre de navigation.</li>
+      <li>Un header avec le titre et un logo</li>
+      <li>Un bandeau de navigation</li>
+      <li>Une zone pour la synthèse des informations</li>
+      <li>Un tableau d'affichage des données</li>
+      <li>Un footer avec le texte explicatif</li>
     </ul>
-    </p>
-    <p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
-      toute
-      la page.</p>
-    <p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
-      similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
-      voluptatum nesciunt eligendi. Eos harum rerum vitae.
-    </p>
-    <h2>Focus sur la gestion des thèmes</h2>
-    <p>
-      Voici comment s'opère la gestion des couleurs.<br>
-      Dans le default.css, la section CSS root contient des variables CSS.<br>
-      On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
-      Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
-      <br>
-      Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
+    <p>Les règles de comportement de la page:</p>
     <ul>
-      <li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
-      <li>- Soit par calul de dégradé</li>
+      <li>Le bandeau de navigation est "sticky" en haut de page.</li>
+      <li>L'entête du tableau de données est "sticky" sous le bandeau de navigation.</li>
+      <li>Lorsque la zone de synthèse n'est plus visible, le pied de tableau est "sticky" en bas de page.</li>
     </ul>
-    <br>
-    Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".
   </template>
\ No newline at end of file
diff --git a/frontend/src/scripts/default.js b/frontend/src/scripts/default.js
index c318d49..763bf8f 100644
--- a/frontend/src/scripts/default.js
+++ b/frontend/src/scripts/default.js
@@ -1,6 +1,4 @@
-  window.addEventListener('load', function() { 
-    window.scrollTo(0,0);
-  }, false);
+  window.addEventListener('load', function() { window.scrollTo(0,0); }, false);
 
   /*
    * Personnalisation
diff --git a/frontend/src/styles/synthesis.css b/frontend/src/styles/synthesis.css
index 7d982c7..75bc038 100644
--- a/frontend/src/styles/synthesis.css
+++ b/frontend/src/styles/synthesis.css
@@ -24,6 +24,7 @@
 .statrow {
   display:flex; 
   width: 100%;
+  margin-bottom: 4px;
 }
 
 .statrow>div:hover {
-- 
2.26.2


From d3ac06439b86058622b302d83c94583f56007129 Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Fri, 3 Jan 2025 20:16:20 +0100
Subject: [PATCH 5/6] Ajout dossier exemple

---
 exemple/fonts/Fonte-Texte.woff2 | Bin 0 -> 16448 bytes
 exemple/fonts/Fonte-Titre.woff2 | Bin 0 -> 5592 bytes
 exemple/index.html              | 715 ++++++++++++++++++++++++++++++++
 exemple/scripts/app.js          |  51 +++
 exemple/scripts/env.js          |   5 +
 exemple/styles/app.css          | 325 +++++++++++++++
 6 files changed, 1096 insertions(+)
 create mode 100644 exemple/fonts/Fonte-Texte.woff2
 create mode 100644 exemple/fonts/Fonte-Titre.woff2
 create mode 100644 exemple/index.html
 create mode 100644 exemple/scripts/app.js
 create mode 100644 exemple/scripts/env.js
 create mode 100644 exemple/styles/app.css

diff --git a/exemple/fonts/Fonte-Texte.woff2 b/exemple/fonts/Fonte-Texte.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..2afabe233a1134e11559c3c9ecd0dca2e047eac5
GIT binary patch
literal 16448
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

literal 0
HcmV?d00001

diff --git a/exemple/fonts/Fonte-Titre.woff2 b/exemple/fonts/Fonte-Titre.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..89d60abf33776f4338b2c583f68ef768596b4bb0
GIT binary patch
literal 5592
zcmV;}6({O<Pew8T0RR9102SB(5dZ)H04W>*02O}#0RR9100000000000000000000
z0000Q92<rv98d;e05k|{37QrW2nwhmqZ9!)0we=`3qSw_AO$)HAPj*R8!074M`+kM
z@G#gNh4}xFz>Oi;Kg_CtI*DOzQEbN}AS`Xiwm?)Piqpz9z8^;|44$r7!*LuedTRBj
zcVkaUF`^FTP#jH)v6FCCaPA^h@S72m%)-a#Pv1MUD=_erJ|T$g06zzau*5PaHCJ4D
z4|Up|Bs+Ep9Y6;QPD-p2!y~ty#-9p2{fJX;7PO=#2Pe*pdeLmMuhO*8LL1p6K;p!l
zGa+XR?2DiL^uM^R^g{X_6C1!&>OKQS38ZF~4SVDO9XO;<3E#0cD1R#I6t%kQ$>HZ!
zgq*R~O5*ps0lf9kJheHk)$8)nOFpSHJL7%Gh<__hcSjC(7D3!QXs36GI_qg;(%WWw
zXiB<{!T<lcD*NtF(u8uB%C&4E7f9~PRWA9d)XDq5QrJ*1RMmskbIv3~Kx!o_;wDhb
zq-IsSIewS5SS1|mCSlmM=f-unqM8Kw*D+B0pCSYTc4t!rbn;-Y@x)lf1SX>H58BRj
zmg4O@dq$x9ghNmEpqmKu#suj2Bail=3=NL4P3uK(6uvoQsdF0F@RR@i%>VLfvKDH!
z_Rtl2NKfc1{Wj(K-s&TKoUia>e#g4K4o2=Jh_xZzP>6AQk?j>Qk6q603+LcwRNB)8
z@&m+x7}X8NNf>EN+uof!Yb~b}v2rX+zCgG(IchEbTD0J<yihEJCX*##aFbyJD(<Ls
zZ2<4Z9pIx`d@vBM51^n^7<);KVcgOc4Go2i5*OfTjgWFEWpK(8$~uVg1d$X2x=>F*
zXoJRJl(Scyrq5DibpU<|Jb*ay=nh62oJWYq8mv}tu40E$J}?2*IpR`-1rrXr3N%{K
z*rPMvqD3d8wgVUv(-YGUXvs!}Y7ae(q!)leH@w{P35=Gp(g>##37nexgjs$-5o`bg
zsnm6GANAKPEE-+Ix?3@)ETOE&F!Y$QLZ(L{E`}W&t}}2J%3}{b^n^3I1#EfXl4JXO
z=^^R`ok#(EotuEx+pG=>^opW4@p!oSh$kI+_8EM_&u}<BwV-gWj+l&Y2k>`m2w-x#
z!yE!<uC?!sOh$x?!zmeU$)!)44*kKmEc$+XCuzi$on#vo&K;5c>Du>__;Mf77NCWm
zRzTFZC~iX#;66=E<n2G$xqgdy`zcXcCjFe(QbwO3(*Kuejb;m-JMV#KKy^F-ljaye
z5Q*ymfh>hzJFw)_kme1YEGCE{d8pXl=j7G9GI7el)vv&xT_GyhRX&^40hNA9dUy>s
zMdVaYn0|$1E#*9`NYA;cBHc>=L6lSZ0?20OKxd}FRa%(^C}biq>6e0_I|;!?L>ry=
z2F3t`diAob!ZgZ7f=)UR@=XB}KNV=x<KK)*iTqx$tGQ)?CA%r_xPH%)nm2*pCeS(W
zJP7vORRB6|23QCdiN0>Ua}~hG9x`2nGcY1F13C!Ws6iM17)@Eux5T3@^Lf0UPQswu
zB%Q?DKKvx_Pe)R(sEAIX$zYOYQq)YAA<IEItm}!C;ejeZg_ImyITeG3EO8;=pc^tu
zpT42Nu(24Dck1o7513HNLSQ8u2h0GY2u6LgcJi8yhN%HJFl`*LK(Iz-M)}8RR@4l$
zW+@A&sm&oB$%?lJsj~UluBtk|^oMV2uGmd)_m5fUKZc{H9Tj%<(6=NzfLX-i%%>WW
zSdAx`wgGc0P}!=+Z)2Fma(-&L*z~GQd`vnKB2I8GVZ*31Oy&RwVCzsgoVNlU>KIgD
zFd*}J0XT4?vJegu78_-P!AA5J5~E}=`)%7lNjv0YS@^TBIL=)8iUpjgaM%P~sQ8xL
zf{;g0QUoKf5XdJ)@(UdWghW9hFU>$hKPF;)dyrIG@V!Q^4dnILyUp*r=hr9ApBHrq
zC+Ko6A`F8F45BcI!9ayU90my(Bw>((K^kVL0McbD6-G0*C?oCY5t~(v6r}4PMgxV8
z!e$@~k(m%#)qX=K#X}cTE&!DC4&!5vY_ke{JV|%WM_m-0Lz5UPhCG7ICDe;3*eQd~
z{z1E{koyIX9VX9oqZaeAf6q%Pq>~xu0-*jQ3Y4L}&;`n+E1)hEH?;zlQ0|(vG6QUc
z$m?=`X=mC?nmccxjYB!}@!8vfN&q>mHo^oZk|QH)vnrYu=}IN*UaI<}Rab@CC|nX2
z=8ZY|b^1w8PoKJ<BspEOIF}AfDn%XeEOnY;T9PWyXYsF&5s2ocLbYGIQ)hcORi4WZ
zIP7ipDgsM%+HW{T(kVnT*U&|?Y?LlpL6v!UYC(Dg#U)tclolL~lHJ*IA9KDvsp?R$
z0R2L;ENHiZ*4N~bMEt2qyOO|EZMW->7v$;SF16CBcaZjL1c8ODD2?M@f5FH3J7{Km
zWGS28sk*yMfOoO?4I^>AO)y-mhe{hrJIrj=wBz<HNoQ@<_^2V=v*FQuZs+8D_#qE^
z#*LuT*$g*<Dpw-6OtDKWmC_NIwrC=1&O<IektA|>xk@J<Y$*N-Z9$cmBm%kXpJJA}
z(h)gJJ+adb=aZ!08%%0l3aus-+}5z~ey>~CnSK36d-Ax(a|4vKe+FtOZQh@bHJzxy
zb(XSO=>ioQbx#GkiApQeqGrL$^&pG0bXSpH3_z0$eS)dK2?+y&)u0%H7(x)k2x0`G
zV-!ELG+sPb7);~MNSH8KP2L5IDZye|u$U37X3avy98}Ch#R60<iXjzCNX0Tzv4T{u
zLW4Kf;Ei>7V*}pUgg3U}jcs^i2Y&r7Ds(v1dktCY-{w9V)Ir?c6}W$h1t>;G78=JE
z(#arn72}!N#dEW(Uo71lUV1lrWg)$`kl#G@J-ju0cxU$T-t6Inx1^62(kBb~v(@+U
z#q8s&*~d4tkMG`+eppDS7H)Bde|c%)=hZ1<gY*Tx*!l5QTni~6^h=ZC(KLyMjqE-X
z;^$C&=Fd2kRSK5^o(#WG9_-2T!MZq|ul}wM(V&Qhfi-HI30D=c6$Lb@l5uJiRAMOR
zvTQm^htQ<m?HF9RGZgQnK%xjGI1J<1dh}upk=d)y1PRV9Y0DWQ6sB$$AA~g6F*neU
zK#2$OH#m<SQfs(E@aEJC=gkxp!j{k5VKsfUL<-qdlM+Q5BN@?6ksC@;)Q*Da(u_?C
z7<=PzVL4BOU_U!H1s4cDW0730)am-ykmCKRHe{^-)>_jRVIviw&EhjNDNIn#gWn+*
z$+V|l7pXgZNRt>8VH=}x2@XJjO)kt`JBZ;sKxlSIJBiJ?gOBUy|JxX_Z9EN&;|1_g
z@p7&Xz)w#)I$7%kP`{+(L(T(3)Q9P&P@C6vQjXMe5FZSKK4|RL73sr<QKzli^el*w
zGF>}irVUE8uR?FqA(i6sP7HVH_)@A*bs^b0aF5_YNM_|e#y@*{b<X2QQ@7JoRo1dx
z0o~T%Y}<VpnO!8t>SH)VLLO0@cLbC`z$yBugMg~(T_fQ~C~|t3z=3hCqf^uS4@Ge2
zgs|;=CpCV9x^ey)<>?)eX;gD)hqU=amMdUIqwS$M@`O_vR+Q{$(6&2h$6_5ue0Irr
z?n|$`-)42%B6b6TWa08v2nMqhy})#eHj|m3$9a*d`0-;?ve_kf{W5`nv{d8wHSJ8X
z*_oqlW2$|gIOIwn{%hdX9CMFOGJfVr*pB5?%k<_7%4zP6%LVI1<qWU~f-zNXqY-Uu
zo@vYLlj06vDitKMG;H65-pp`gPNHccQYcQWO;i(Q^u}<3;1Lb{ep1M4MoJ@s&kPTb
zTZC(i@EEE3LBG%$>P)tL-|12xlG#L^3w56fEbP=ADUyP~gneRW<h4Ugh9W3J@B!s;
zE*xe;^;m;Yh?t{;2M!HO^SVaHyUaRX(d1=f^ujA0U*hFQQr>`ZqeGI!O7TZL(=SEA
zGwSh9qJCzg)gIOEKqi|%?#39FwvEyQ6|1|3&$;q^|M;*^tQ$hX9$6(JaS0#ci7@W1
zQF12O@4%u6D|hV}mcktTBpL>nmEM8(?w?sO%N)sE`d_cyJ3l>l&16+ty;!61gqqt=
z{^gU@PWr}gx`b|)9l6(;b}Z<SWeVeh3BjTz?ND&`t1qARcN*`^$`aa+l;Sxpf`$*t
z`m9G@;@oG3EOn|T$ZYs6^ZKH0=9ZEPq>Neq;1g3i&G(UKJ$~2p51KEdz16)%++Vk<
z3~GFVgax83%je<PgtGQNtrLLJXFdg_IVWFG600iU8J4v+lGTOr+}qnv+GvW<xBQ~l
z3PItP?oI?bqF{ZLA94^{2_(C5DLZS*Zu$4=;B5YMWUwbPm+6FVeo1l2Y@JTbVKeAZ
z%N31aMnQo4hKSmKN2w8NjGC8v)*m-|wNWYv@U-F3#!YTLUaIKxI1VyTtUA$(=x+Y#
z!dS+IrG3E@AM8BwL+*}~NXe8vj`HB{-Q+Ntz!%QIcktsPh-&FP%}pPwsH_LAyCvX{
z{zrQ{Axx)9{`9uK;p{AfgUzZ^b~!fv4@|Caloy$<i9`AWX8$FODfQ$|=y#K=DqL#(
z61)=_hSBcN9;>SZf17PGhxE=qv4ADy<6{>|5x4dX(AzBqJ;aXO(=+=Efp=q=nkEuE
z#2UJDj{KQ3FTe-tI>mix&&p+&VW(nwbB`f+Q-kz0nYf%@r}oaFnO$b%ax#I>;G@ef
z{5>Xa2|a94RZ*j^v;5D?0pqLl2-?X#NOnBZfZX#jyQ$t+Y@MR%R3F1^pGhpD^U!2@
z*U6hNX;Sm!eL2gg$1d=#w>*mVNT~1cH4oG$KT7nL-lOU2{L!P1Jt(fij~7?rV@Tt|
z2`B4*WnHOmkpsB04IaZ2`26McmU91kQZYl1T~G949dNT_bAwFD3#X@wKNQ<vv+fwz
z1^R@3Ml*6>VV7*j(0|MYV2>;Ss)B~z^<(=_-MsDg$1gogz6dS=372eHoVZRSutvpU
zaaiK>OWxwzbRAslQ(82corYEa;t{G2_r0HTZk_U2X7>zo37bR4!yi3#QVkD;B<`@Z
z>YUSEd8gm|LObM!gNqP%8nb&BnZU-tw#w9lVCWHHOytWD@guz)cgor4w*ww1<j8zl
zcVh8EC|>KR*BQB{NitMWq+HHibdS~6b!6w+FO`CR!?J7sr4V3um)o1^J_}&o*CN`E
zOIZi$lJK-ntKL&=Tt>|kGuX)JlPgy#?9bJ}PGga2z!huC%#uxkQGTE?E+7(s<ClW>
z)jER!XaB~xJ}SMc-1~Z)$!dA5?#xRKe0-v<rRf?7zmfi7BY(joXWS)kdK3<GK>qUn
zye!2Iy|zotqSMH5aB~~sjogFxC{4;xhU-a=GQ}0y{Mq@K>)(x6@1K!8(t)%NZ|(Z_
zxe>A$k-fY35+duADDS@C(&FR0^~I*BCE`DE^lrTk0?z1o6r#U;wf?DJCg+tmw^fZ9
zvX%eZf*cfNPc&1RVog9U9_jweqTI0j?W)3+Z)r{<$ME4}<y}Y|XmWLb)DK(Igp!l8
z6}j=Wn6URU&k0%ekJfg<HBb}SIs|uvLlq|-=0sh&VaiDT-+mmMCQdDq&tR+68ae>F
zDE_p~k6&gMu&zU-7II%av4JDM0=AaV`Ymmc2MR&aKBN(DKSPpq%5FV6M$M7aHxyn8
z93$QHikF28sgn@h_0Z3Z)8SLaZNhqy-;7RR7v8kl)%}iYNHe8Myv}a0`=RaNV;|K(
zTgeUQ%Od0<x(G9^+$`=xof4-6b*5poR}>M&MJ>W=8yde3PkrQ#*{{_7?38NeHFjOS
z_mRQ633LzdUSUfVUvo^!DMkWG;|04a{)05)Dk!_D=Q?w|P3i`nuxt4OJ_1ZdyKFs^
zC#Iic_8a_$P`nimqd_!uwJ-$PpR}g*3i<@`R9|V*WBny2FWCk^bfoA1WZBs|OTDQs
z%@8p}^!^|G-;HdXD7?&gQY5ui&?pRuYLiYXZ^>W(qGt*{_e>RYh-~AII7n;ZHs8JW
zE8=L^OT<bT2MLY8)q!IA9qU`~F)4k{`H#&(Ls`wy==vnH12rsP4ubYY;y@5Xi?hj?
zhn6byc(zm_4pYm<ZW3e#Uxbml0BKAMpr64_by|Kh!AjM6Je5g%Xs`q^<3Q0m__D_P
zvpK%HX>=_Vl+DIlSy^pXGCx7Jz56^n3N<b2<Nd@n5SN2C+?)@FzkJsnjUAgt`6|E3
z+C9`T!QoJsb|TZ@_C}l6?1uVzGvZE%0CCIKg=b)byEZhiA_NXzPcx3&Awb}8iOoEi
z-z8J%tJY}15Wmk28H1y+RGD{e6!q4HyxV?vD5x+vuKU8&VDwuGD(dEa=8XJ&DlP*9
z47ild<9?lxnpMfFBLSjHX@*K75(#Hj2eo6o&+On}?Ly|k`N^mfGwo23>C}8&6g6gN
zI@m(&DykVw)c6-=QF(m3sZXCS)-kyk<Y0x1qSP}}MkU`L;2)xlQ9)syCkwt(_{hs3
z4|Y~VxD5D_eE}cHEa9O@d{V>86{ST5`HDv<Rp)hIXaf^mKTgyarW};oxX+e!F5yNK
znXOLb7iBB*8(S(~6>wllqaMXx26m_O64gKmwITIifltf(JUEHsrqnn^S~?YE4ik&%
z&;FMllGa6ww7m2lO4R3dGS%n{jo09cTxL;agH%eg0>!eFRLI}5vzBaJ&!P$0l-g%$
z&jVN-Nv_uV|JN`#0CrukkF~O^*i`eIcExpdUEH<^;S*Sm$dQIA$KjnjdN98)$|Y2_
z)NK)BQevI12zG4kK2l^OyL{)Vh6dxBb3toQU1ajkZc{4$h6I1Tr&n2^J|7kTY&e-$
z-Z*wDMO^`l=~*I+CZQ#j&YZOu`@V;GAdxsUj)wq86EBi#fYiJ%_KrMrK6xMZB^8@c
z8Z+<OCu(uhC^HYQaG4xb62Z+Pl?^DbqpMu+TlpOEx!5(3^;x>x%2Y$OP$oxk#ys4_
z`vF0K;f9{<)_KeNf6C$T3&0PLXPW@{aV#49A3Gw)Ckp2RWekAeANARI1Az)R0C_Cb
zNqh==HT|x9N_vQt-i2vz%G#T#znH7{kohLP@}xp*l(djeAD>dSDC$op>HPHD#3X$H
z(@U6j9K(9N>s_$UIdgP>`bj*!dKt--9Ok{vBM{%`X%sk*0%kfZxE|o9Z~y@VW+DN_
zHbggkglFz%D~ECtM{^{naXNbp$9@E7asr2P8iB{et#{z}9_bQwQ+|Q}4H)Z`OVDk7
zJr^L%{jlkqs?<|<dA+Dm98(-k-uk{w1k>hZxD7a)N2Y9lHICQpK5@ZMCmM8wNQR!I
mOTgGIEssn{aeijLO-OxZcg}qW)0M;<Up2Df>%tL5wr>aHim9>y

literal 0
HcmV?d00001

diff --git a/exemple/index.html b/exemple/index.html
new file mode 100644
index 0000000..4e73bb6
--- /dev/null
+++ b/exemple/index.html
@@ -0,0 +1,715 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <title>template TOPISTO - exemple</title>
+
+  <meta name="description" content="Suivi activité">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta charset="utf-8">
+
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
+  <link rel="stylesheet" type="text/css" href="styles/app.css?fb5caadf64f2601932414c4f86ead337">
+
+</head>
+
+<body>
+  <header id="entete">
+    <div id="marque">TEMPLATE</div>
+    <div id="logo">
+      <svg viewBox="0 0 920 920">
+        <use href="#topisto"></use>
+      </svg>
+    </div>
+  </header>
+
+  <nav>
+    <section id="ariane">
+      <div id="left">
+          <span><a>Home</a> > <a>Menu</a> > <a>Menu1</a></span>
+      </div>
+      <div id="right">
+        <a id="login">Log In</a>
+        &nbsp;
+        <a href="#help">?</a>
+      </div>
+    </section>
+    <section id="bandeau">
+      <div id="menu">
+        <a onclick="activeMenu(this)">Menu1</a>
+        <a onclick="activeMenu(this)">Menu2</a>
+        <a onclick="activeMenu(this)">Menu3</a>
+      </div>
+      <div id="logo">
+        <svg viewBox="0 0 920 920" class="js-open-modal-trigger" data-modal-info="type=settings">
+          <use href="#topisto"></use>
+        </svg>
+      </div>
+    </section>
+  </nav>
+
+  <section id="synthesis">
+    <div class="statrow">
+      <div class="statbox2">Indicateur 1<br>110</div>
+      <div class="statbox1">Indicateur 2<br>45</div>
+      <div class="statbox1">Indicateur 3<br>27</div>
+      <div class="statbox1">Indicateur 4<br>0</div>
+      <div class="statbox2">Indicateur 5<br>26</div>
+    </div>
+    <div class="statrow">
+      <div class="statbox2">Indicateur 6<br>67</div>
+      <div class="statbox1">Indicateur 7<br>89</div>
+      <div class="statbox1">Indicateur 8<br>345</div>
+      <div class="statbox1">Indicateur 9<br>56</div>
+    </div>
+  </section>
+
+  <section id="datatable">
+    <table> 
+      <thead>
+        <tr>
+          <th class="cellid">ID</th>
+          <th>COL0</th>
+          <th class="cellbox2">COL1</th>
+          <th class="cellbox2">COL2</th>
+          <th class="cellnumber">VAL1</th>
+          <th class="cellnumber">VAL2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="cellid">1</td>
+          <td> VALUE 0 0</td>
+          <td class="cellbox2"> VALUE 0 1</td>
+          <td class="cellbox2"> VALUE 0 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr>
+          <td class="cellid">1</td>
+          <td> VALUE 0 0</td>
+          <td class="cellbox2"> VALUE 0 1</td>
+          <td class="cellbox2"> VALUE 0 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr>
+          <td class="cellid">1</td>
+          <td> VALUE 0 0</td>
+          <td class="cellbox2"> VALUE 0 1</td>
+          <td class="cellbox2"> VALUE 0 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>        
+        <tr>
+          <td class="cellid">1</td>
+          <td> VALUE 0 0</td>
+          <td class="cellbox2"> VALUE 0 1</td>
+          <td class="cellbox2"> VALUE 0 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr>
+          <td class="cellid">1</td>
+          <td> VALUE 0 0</td>
+          <td class="cellbox2"> VALUE 0 1</td>
+          <td class="cellbox2"> VALUE 0 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr>
+          <td class="cellid">1</td>
+          <td> VALUE 0 0</td>
+          <td class="cellbox2"> VALUE 0 1</td>
+          <td class="cellbox2"> VALUE 0 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+        <tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
+          <td class="cellid">2</td>
+          <td> VALUE 1 0</td>
+          <td class="cellbox2"> VALUE 1 1</td>
+          <td class="cellbox2"> VALUE 1 2</td>
+          <td class="cellnumber"> 10</td>
+          <td class="cellnumber"> 100</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th colspan="2">2 lignes</th>
+          <th class="cellbox2">&nbsp;</th>
+          <th class="cellbox2">&nbsp;</th>
+          <th class="cellnumber">20</th>
+          <th class="cellnumber">200</th>
+        </tr>
+      </tfoot>
+    </table>
+  </section>
+
+  <footer>
+    <h2 id="help">Modèle de page HTML pour visualisation de données</h2>
+    <p>La page est composée comme suit :</p>
+    <ul>
+      <li>Un header avec le titre et un logo</li>
+      <li>Un bandeau de navigation avec un fil d'ariane, un lien de login et un menu</li>
+      <li>Une zone pour la synthèse des informations</li>
+      <li>Un tableau d'affichage des données</li>
+      <li>Un footer avec le texte explicatif</li>
+    </ul>
+    <p>Les règles de comportement de la page :</p>
+    <ul>
+      <li>Le bandeau de navigation est "sticky" en haut de page.</li>
+      <li>Le dernier élément du fil d'ariane est en gras car c'est l'élément courant.</li>
+      <li>Lorsqu'on est connecté, le lien de login est remplacé par le nom de l'utilisateur.</li>
+      <li>La zone de synthèse est composée de lignes de "boîtes".</li>
+      <li>L'entête du tableau de données est "sticky" sous le bandeau de navigation.</li>
+      <li>Lorsque la zone de synthèse n'est plus visible, le pied de tableau est "sticky" en bas de page.</li>
+    </ul>
+    <span style="width: 100%; text-align: center;"><a href="#entete">Retour </a></span>
+  </footer>
+
+  <dialog id="modal" style="display:flex;flex-direction: row;">
+    <section style="width:100%;height:100%">
+      <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;">
+        <div style="float:left">
+          <div class="modal_header">This is a modal header</div>
+        </div>
+        <div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
+        <div style="clear:both"></div>
+      </div>
+      <div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;">
+      </div>
+      <footer style="overflow-y: hidden;overflow-x: hidden;height: 10%; vertical-align: bottom;">
+        <span class="modal_footer">This is a modal footer</span>
+      </footer>
+    </section>
+  </dialog>
+
+  <dialog id="popup">
+    <div style="overflow-y: hidden;overflow-x: hidden;height: 10%">
+      <div style="float:left"><span class="modal_header">This is a modal header</span></div>
+      <div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
+      <div style="clear:both"></div>
+    </div>
+    <div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;"></div>
+    <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span
+        class="modal_footer">This is a modal footer</span></div>
+  </dialog>
+
+  <div style="display:none">
+    <svg version="1.0" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <symbol id="user" viewBox="0 0 550 550">
+          <g transform="translate(30 40) scale(0.95 0.95)">
+            <path d="M256,0c-74.439,0-135,60.561-135,135s60.561,135,135,135s135-60.561,135-135S330.439,0,256,0z"/>
+            <path d="M423.966,358.195C387.006,320.667,338.009,300,286,300h-60c-52.008,0-101.006,20.667-137.966,58.195
+              C51.255,395.539,31,444.833,31,497c0,8.284,6.716,15,15,15h420c8.284,0,15-6.716,15-15
+              C481,444.833,460.745,395.539,423.966,358.195z"/>
+          </g>        
+        </symbol>
+        <symbol id="filter" viewBox="0 0 1024 1024">
+          <g>
+            <path d="M859.02 234.524l0.808-0.756 0.749-0.813c27.047-29.356 33.876-70.34 17.823-106.957-15.942-36.366-50.416-58.957-89.968-58.957H163.604c-38.83 0-73.043 22.012-89.29 57.444-16.361 35.683-10.632 76.301 14.949 106.004l0.97 1.126 280.311 266.85 2.032 312.074c0.107 16.502 13.517 29.805 29.995 29.805l0.2-0.001c16.568-0.107 29.912-13.626 29.804-30.194l-2.198-337.564-296.478-282.241c-9.526-11.758-11.426-26.933-5.044-40.851 6.446-14.059 19.437-22.452 34.75-22.452h624.828c15.6 0 28.69 8.616 35.017 23.047 6.31 14.391 3.924 29.831-6.354 41.497l-304.13 284.832 1.302 458.63c0.047 16.54 13.469 29.916 29.998 29.915h0.087c16.568-0.047 29.962-13.517 29.915-30.085L573.04 502.36l285.98-267.836z" fill="" /><path d="M657.265 595.287c0 16.498 13.499 29.997 29.997 29.997h243.897c16.498 0 29.997-13.498 29.997-29.997 0-16.498-13.499-29.997-29.997-29.997H687.262c-16.498 0-29.997 13.499-29.997 29.997z m273.894 138.882H687.262c-16.498 0-29.997 13.499-29.997 29.997s13.499 29.997 29.997 29.997h243.897c16.498 0 29.997-13.499 29.997-29.997 0-16.498-13.499-29.997-29.997-29.997z m0 168.878H687.262c-16.498 0-29.997 13.499-29.997 29.997s13.499 29.997 29.997 29.997h243.897c16.498 0 29.997-13.499 29.997-29.997 0-16.498-13.499-29.997-29.997-29.997z" />
+          </g>
+        </symbol>
+        <symbol id="setup" viewBox="0 0 1024 1024">
+          <g>
+            <path d="M509.946 338.983c-95.925 0-173.983 78.034-173.983 173.935 0 95.913 78.057 173.947 173.983 173.947 27.333 0 53.132-6.515 76.17-17.797l-0.024-0.057c6.245-3.17 10.527-9.63 10.527-17.104 0-10.598-8.59-19.237-19.214-19.237-2.493 0-4.867 0.49-7.051 1.357l-0.102-0.225c-18.196 9.088-38.614 14.352-60.306 14.352-74.588 0-135.249-60.663-135.249-135.238 0-74.564 60.66-135.201 135.249-135.201s135.296 60.637 135.296 135.2c0 13.314-2.03 26.166-5.617 38.32l0.345 0.135c-0.365 1.48-0.58 3.02-0.58 4.61 0 10.598 8.59 19.19 19.212 19.19 7.32 0 13.676-4.081 16.919-10.09l0.334 0.13c0.33-1.05 0.653-2.105 0.964-3.163 0.153-0.455 0.28-0.92 0.398-1.39a173.233 173.233 0 0 0 6.711-47.74c0-95.9-78.032-173.934-173.982-173.934z m411.693 77.904h-66.23c-3.423-12.534-7.65-25.138-12.889-38.31l-3.87-9.3c-5.098-11.824-10.952-23.46-17.327-34.673l46.808-46.806c4.814-4.817 7.48-11.213 7.48-18.01 0-6.798-2.665-13.195-7.48-18.01l-96.987-96.965c-9.656-9.654-26.438-9.654-36.044 0l-46.806 46.806c-11.375-6.467-23.369-12.438-36.775-18.246l-8.686-3.54a366.101 366.101 0 0 0-36.82-12.298v-66.182c0-14.043-11.425-25.468-25.493-25.468H443.384c-14.069 0-25.492 11.448-25.492 25.468v66.186c-12.51 3.445-24.856 7.553-36.775 12.298l-10.764 4.46a354.674 354.674 0 0 0-34.697 17.325l-46.828-46.806c-9.63-9.63-26.39-9.63-36.043 0L155.82 251.78a25.282 25.282 0 0 0-7.482 18.01c0 6.798 2.643 13.17 7.482 18.01l46.806 46.807c-6.467 11.376-12.462 23.462-18.41 37.199l-3.423 8.286c-4.744 11.944-8.827 24.263-12.25 36.797h-66.232c-14.044 0-25.47 11.449-25.47 25.469v137.137c0 14.02 11.426 25.444 25.47 25.444h66.232c3.447 12.58 7.694 25.209 12.958 38.522l3.8 9.11a356.298 356.298 0 0 0 17.325 34.627l-46.782 46.817c-9.937 9.914-9.937 26.107 0 36.02L252.807 867c9.63 9.582 26.39 9.63 36.02 0l46.828-46.83a355.428 355.428 0 0 0 34.557 17.325l7.93 3.305 3.02 1.226a349.604 349.604 0 0 0 36.776 12.227v66.184c0 14.069 11.423 25.493 25.492 25.493h137.136c14.07 0 25.493-11.472 25.493-25.493v-66.184c12.558-3.446 25.137-7.648 38.238-12.84l9.348-3.87a354.975 354.975 0 0 0 34.697-17.374l46.83 46.83c9.607 9.582 26.388 9.63 36.018 0l97.011-96.963c9.915-9.914 9.915-26.107 0-36.02l-46.83-46.818c6.42-11.26 12.371-23.202 18.082-36.42l1.51-3.589 2.22-5.476a360.913 360.913 0 0 0 12.273-36.775h66.233c14.044 0 25.468-11.401 25.468-25.444V442.356c-0.048-14.02-11.472-25.47-25.518-25.47zM906.605 564.41h-83.061l-4.626 19.685c-3.471 14.635-8.048 29.057-13.973 43.997l-1.415 3.54-2.031 4.793c-5.949 13.738-12.911 27.096-20.725 39.701l-10.62 17.207 58.702 58.714-75.698 75.673-58.678-58.679-17.232 10.575c-12.936 7.978-26.154 14.823-41.59 21.574l-7.741 3.115a317.74 317.74 0 0 1-42.793 13.502l-19.664 4.672v82.896H458.42V822.48l-19.662-4.672c-14.918-3.588-29.315-8.167-45.319-14.494l-7.13-2.973c-13.595-5.901-26.907-12.887-39.676-20.724l-17.208-10.575-58.678 58.679-75.697-75.673 58.678-58.714-10.598-17.207c-7.907-12.77-14.87-26.223-21.315-41.07l-3.35-8.285a309.225 309.225 0 0 1-13.432-42.723l-4.696-19.638h-82.966V457.39h82.966l4.696-19.637c3.517-14.823 8.167-29.433 14.186-44.588l3.234-7.765c5.878-13.596 12.841-26.955 20.7-39.725l10.621-17.207-58.678-58.656 75.697-75.672 58.655 58.654 17.231-10.598c12.747-7.86 26.154-14.8 40.999-21.22l8.452-3.47c13.594-5.404 27.945-9.936 42.627-13.453l19.685-4.626v-82.991h107.066v82.991l19.683 4.626c14.731 3.494 28.94 8.002 44.613 14.186l7.743 3.258c13.76 5.947 27.143 12.91 39.747 20.7l17.207 10.599 58.655-58.655 75.72 75.672-58.678 58.656 10.573 17.183c7.883 12.817 14.87 26.294 21.363 41.26l3.373 8.167a320.605 320.605 0 0 1 13.456 42.628l4.626 19.684h83.014V564.41z" />
+          </g>
+        </symbol>
+        <symbol id="topisto" viewBox="0 0 920 920">
+          <g transform="translate(0,920) scale(0.100000,-0.100000)" stroke="none">
+            <path d="M319 9096 c-90 -32 -173 -111 -206 -194 -17 -45 -18 -209 -21 -4267
+            -2 -3005 0 -4238 8 -4284 20 -118 78 -198 175 -243 l50 -23 4265 -3 4265 -2
+            61 20 c82 28 136 76 176 158 l33 67 3 4255 c2 4621 6 4310 -51 4387 -41 56
+            -116 110 -176 127 -52 15 -439 16 -4302 16 -3444 -1 -4251 -3 -4280 -14z
+            m8488 -147 c66 -13 124 -55 160 -116 l28 -48 0 -4205 c0 -3952 -1 -4207 -17
+            -4236 -23 -41 -71 -82 -133 -110 l-50 -24 -4146 0 c-2773 0 -4164 3 -4200 10
+            -75 14 -144 63 -177 125 l-27 50 -3 4160 c-1 2929 1 4175 8 4212 6 28 21 67
+            33 85 30 43 95 88 149 102 60 15 8299 10 8375 -5z"/>
+            <path d="M6205 8623 c-324 -38 -610 -144 -869 -321 -65 -45 -135 -85 -154 -88
+            -56 -11 -174 25 -217 66 -34 31 -29 62 10 73 63 19 80 32 83 64 3 27 -1 33
+            -20 37 -166 34 -352 -16 -448 -120 -66 -72 -80 -110 -80 -221 0 -127 15 -179
+            84 -292 69 -115 79 -150 66 -222 -13 -68 -81 -210 -151 -314 -30 -45 -63 -98
+            -74 -120 -32 -64 -184 -208 -256 -244 -34 -17 -67 -31 -73 -31 -6 0 -31 28
+            -55 61 -24 33 -54 65 -67 70 -13 4 -24 14 -24 20 0 6 -19 41 -43 78 -35 52
+            -135 271 -187 407 -13 34 -67 91 -113 117 -61 36 -88 69 -150 182 -31 56 -70
+            112 -89 127 -40 33 -106 45 -166 29 l-42 -12 0 -48 c0 -32 6 -56 19 -72 17
+            -22 61 -103 61 -112 0 -3 -21 -8 -47 -12 -102 -15 -203 -48 -304 -98 l-105
+            -53 12 36 c7 20 18 73 24 119 9 68 9 86 -2 92 -42 27 -106 -11 -163 -96 -57
+            -85 -75 -148 -86 -310 -19 -267 -62 -437 -147 -582 -103 -176 -122 -221 -122
+            -287 0 -69 27 -138 59 -156 12 -6 44 -14 71 -17 l50 -6 0 -54 c0 -63 -10 -86
+            -53 -122 -17 -14 -62 -53 -100 -87 -38 -34 -94 -76 -124 -94 l-54 -33 -44 21
+            c-34 16 -63 47 -134 143 -50 66 -91 125 -91 130 0 5 -23 34 -51 65 -132 145
+            -194 290 -239 560 -29 172 -30 408 -1 539 25 117 30 129 88 201 78 96 97 145
+            89 232 -4 53 -15 92 -41 147 -60 125 -120 148 -331 125 -129 -15 -161 -29
+            -243 -114 -37 -38 -45 -52 -49 -94 l-4 -49 47 -19 48 -18 -7 -88 c-5 -71 -18
+            -124 -65 -266 -33 -97 -71 -222 -85 -277 -35 -139 -94 -456 -100 -540 -5 -60
+            -13 -391 -30 -1270 -3 -163 12 -477 29 -580 3 -16 16 -106 30 -200 32 -211 56
+            -315 96 -413 91 -225 92 -229 96 -442 2 -107 6 -205 8 -217 9 -38 33 -27 45
+            20 6 23 25 84 42 135 l31 92 43 0 c24 0 46 -6 51 -12 25 -40 65 -182 70 -249
+            9 -121 -18 -224 -125 -469 -78 -178 -90 -217 -113 -338 -25 -142 -23 -196 9
+            -200 14 -2 24 3 28 15 50 142 66 172 94 181 33 12 32 13 49 -82 19 -103 13
+            -175 -24 -317 -42 -165 -51 -246 -35 -322 6 -31 14 -57 17 -57 3 0 26 18 50
+            41 37 34 49 40 81 37 l37 -3 32 -100 c37 -114 83 -308 83 -352 l0 -30 -117 35
+            c-106 31 -130 35 -233 34 -135 0 -204 -18 -308 -80 -37 -21 -89 -50 -117 -63
+            -47 -23 -50 -26 -53 -66 -3 -42 -2 -43 27 -43 16 0 67 16 113 36 131 56 174
+            65 238 48 71 -18 124 -18 140 1 15 19 17 17 -45 40 -61 22 -74 32 -50 41 52
+            20 392 -88 403 -128 2 -9 16 -18 31 -20 25 -3 26 -5 26 -73 l0 -70 -215 -6
+            c-188 -4 -222 -8 -274 -27 -52 -19 -79 -22 -228 -22 l-168 0 0 -35 c0 -31 3
+            -35 38 -44 20 -5 77 -9 127 -10 121 -1 141 -6 154 -42 6 -16 16 -43 22 -59 24
+            -64 138 -130 226 -130 65 -1 171 -32 267 -80 98 -49 104 -51 211 -57 181 -10
+            341 32 409 107 29 32 76 131 76 160 0 22 55 8 108 -28 89 -60 146 -96 154 -97
+            3 0 10 -3 14 -8 4 -4 16 -7 26 -7 10 0 18 -4 18 -9 0 -5 38 -15 84 -21 86 -13
+            176 -11 461 11 177 13 555 23 890 24 l260 0 -4 -161 c-3 -127 0 -172 13 -217
+            22 -75 69 -135 136 -170 52 -27 60 -29 145 -24 50 3 110 12 135 21 33 13 85
+            18 198 19 113 1 155 5 161 15 14 22 140 49 207 44 46 -3 76 1 117 16 34 13 94
+            24 156 28 56 4 101 11 101 16 0 5 13 7 30 3 37 -8 86 25 122 82 19 32 23 51
+            23 123 0 74 -3 88 -22 107 -44 44 -87 263 -56 294 7 7 36 -18 98 -88 49 -54
+            95 -102 102 -106 7 -4 13 -14 13 -21 0 -22 102 -85 157 -96 35 -8 69 -8 110
+            -1 32 5 87 13 123 16 100 10 138 33 202 123 91 127 124 177 137 210 9 21 20
+            32 33 32 11 0 22 8 25 19 3 11 13 21 22 24 9 2 26 26 36 53 10 27 25 54 32 59
+            18 14 22 136 5 191 -18 63 -63 117 -149 180 -43 31 -112 86 -154 120 -93 77
+            -144 103 -278 143 -57 17 -105 31 -107 31 -2 0 -4 10 -4 22 0 29 -101 162
+            -152 198 -34 25 -51 30 -99 30 -58 0 -221 -44 -227 -61 -2 -5 -11 -9 -19 -9
+            -14 0 -15 11 -9 81 8 92 22 134 59 167 20 19 31 22 60 17 38 -7 67 -32 71 -61
+            2 -12 57 -49 162 -107 87 -49 191 -111 229 -140 349 -256 830 -573 1036 -683
+            256 -137 585 -292 816 -385 124 -50 251 -48 288 4 9 13 15 43 15 75 0 68 -26
+            108 -76 118 -25 4 -38 14 -45 30 -5 14 -26 48 -48 77 -108 144 -359 617 -451
+            848 -93 233 -191 618 -234 919 -92 637 5 1104 326 1588 51 76 100 153 110 170
+            21 39 57 62 105 69 31 4 44 0 75 -25 24 -18 56 -32 85 -37 67 -10 77 5 68 115
+            -14 189 -58 296 -229 550 -189 280 -235 341 -550 730 -98 120 -118 169 -128
+            310 -8 111 -14 155 -59 400 -17 96 -20 142 -16 280 5 184 28 296 86 424 46
+            102 162 258 276 372 138 137 164 147 372 149 144 0 154 2 175 23 19 18 23 35
+            26 95 2 46 -2 81 -10 97 -16 29 -122 102 -154 106 -25 2 -102 51 -149 94 -16
+            15 -40 30 -53 33 -20 5 -22 2 -16 -16 21 -68 65 -111 166 -163 57 -29 118 -81
+            118 -100 0 -11 -16 -14 -67 -14 -171 -1 -381 -90 -414 -177 -5 -13 -17 -23
+            -28 -23 -40 0 -236 -261 -318 -425 -90 -177 -143 -373 -143 -526 0 -97 42
+            -369 71 -454 11 -33 23 -91 26 -130 l6 -70 -139 135 c-214 208 -508 473 -629
+            566 -68 52 -315 219 -415 279 -52 32 -189 109 -305 173 -115 63 -250 137 -298
+            166 -85 49 -88 52 -83 80 10 47 32 63 181 136 384 186 664 276 1025 326 94 14
+            193 18 400 19 298 0 371 -9 551 -70 89 -31 120 -31 170 -3 28 15 39 28 39 45
+            0 20 -5 23 -39 23 -22 0 -113 18 -203 40 -243 60 -329 72 -523 72 -195 0 -498
+            -24 -665 -52 -208 -34 -484 -126 -679 -224 -47 -24 -176 -95 -286 -158 -175
+            -100 -202 -119 -219 -152 -18 -37 -18 -37 3 -60 12 -13 68 -43 124 -66 169
+            -72 291 -136 527 -278 399 -240 670 -432 914 -645 43 -38 89 -73 102 -79 13
+            -6 24 -19 24 -28 0 -20 84 -102 153 -149 26 -18 71 -61 100 -95 293 -351 324
+            -386 348 -386 10 0 19 -11 22 -27 6 -32 72 -113 92 -113 7 0 18 -12 24 -27 16
+            -37 77 -103 96 -103 8 0 15 -8 15 -17 0 -27 63 -113 83 -113 10 0 17 -8 17
+            -19 0 -10 32 -63 72 -117 39 -54 101 -144 136 -199 36 -55 75 -111 88 -125 15
+            -16 30 -56 43 -115 11 -49 25 -105 30 -122 l10 -33 -98 0 c-90 0 -100 -2 -144
+            -29 -89 -57 -164 -153 -286 -368 -155 -273 -253 -571 -276 -837 -8 -95 10
+            -483 31 -651 18 -141 112 -571 154 -700 16 -49 38 -126 50 -169 11 -44 28 -85
+            37 -91 9 -7 14 -19 10 -28 -4 -11 1 -20 12 -26 12 -7 21 -27 25 -60 4 -29 12
+            -51 21 -55 8 -3 15 -17 15 -30 0 -15 8 -30 20 -36 11 -6 20 -21 20 -34 0 -13
+            7 -26 15 -30 8 -3 18 -24 21 -46 4 -25 14 -45 25 -51 12 -6 19 -21 19 -38 0
+            -16 7 -31 15 -35 8 -3 15 -17 15 -31 0 -14 7 -28 15 -31 8 -4 15 -17 15 -30 0
+            -12 9 -29 20 -37 11 -8 23 -28 26 -45 4 -18 14 -34 25 -37 11 -4 21 -20 25
+            -41 3 -19 15 -39 25 -45 11 -5 19 -17 19 -26 0 -10 24 -56 53 -103 30 -47 68
+            -109 85 -138 l32 -52 -45 0 c-59 0 -109 21 -470 200 -481 239 -684 364 -1515
+            935 -177 121 -331 225 -343 232 -32 18 -47 43 -47 78 0 34 36 130 71 189 l22
+            37 41 -39 c23 -21 68 -61 101 -88 33 -27 88 -74 122 -105 34 -31 92 -78 130
+            -105 279 -195 424 -304 467 -353 11 -11 30 -21 43 -21 12 0 23 -6 23 -12 0
+            -21 206 -168 235 -168 8 0 15 -8 15 -18 0 -13 44 -39 163 -99 225 -112 318
+            -138 331 -91 4 17 -3 32 -28 58 -31 32 -118 146 -481 625 -148 195 -299 416
+            -435 635 -57 91 -153 242 -215 335 -111 168 -153 242 -250 443 -53 112 -89
+            152 -136 152 -24 0 -29 -4 -25 -17 3 -10 8 -40 12 -68 9 -61 45 -142 73 -161
+            13 -10 21 -26 21 -44 0 -18 9 -38 24 -52 13 -13 29 -41 36 -63 7 -22 21 -46
+            32 -53 10 -7 18 -22 18 -33 0 -11 7 -34 17 -52 29 -56 196 -302 214 -315 10
+            -6 20 -26 24 -42 4 -17 15 -35 25 -40 10 -5 21 -23 25 -40 4 -17 15 -35 25
+            -40 11 -6 22 -26 26 -45 4 -21 13 -37 25 -40 13 -4 19 -16 19 -34 0 -27 113
+            -205 169 -266 15 -16 65 -86 111 -155 46 -69 107 -153 136 -188 30 -35 68 -88
+            86 -118 20 -33 42 -57 56 -60 12 -4 22 -13 22 -22 0 -9 10 -26 22 -39 16 -18
+            18 -23 6 -23 -20 0 -289 179 -403 269 -49 39 -178 137 -285 218 -174 132 -411
+            325 -527 430 -67 61 -77 90 -79 233 -1 83 -9 163 -24 240 -21 107 -22 128 -14
+            305 5 105 9 240 9 300 l0 110 180 6 c99 3 196 10 215 14 70 15 135 57 205 132
+            39 42 114 119 167 172 103 102 138 158 159 259 9 44 6 84 -16 250 -35 252 -52
+            299 -170 477 -51 77 -107 169 -125 205 -18 36 -45 83 -61 106 -15 22 -31 54
+            -35 70 -4 18 -45 66 -108 128 -152 148 -223 197 -444 311 -101 52 -158 101
+            -262 230 -79 97 -185 181 -306 243 -202 105 -233 123 -319 192 -109 87 -132
+            100 -185 100 -39 0 -40 -1 -40 -32 0 -18 11 -51 25 -73 13 -22 25 -45 25 -50
+            0 -11 -72 -29 -160 -40 -44 -6 -164 -35 -365 -90 -72 -19 -134 -28 -221 -32
+            l-121 -6 -7 43 c-4 24 -3 46 1 50 4 4 53 41 108 83 136 103 226 184 330 297
+            148 161 275 375 306 512 l12 58 38 -6 c21 -4 50 -3 65 0 48 12 252 225 301
+            313 7 12 15 41 18 65 3 24 8 55 10 71 4 24 2 27 -24 27 -25 0 -31 -6 -42 -37
+            -24 -76 -62 -138 -128 -207 -38 -40 -73 -82 -80 -94 -6 -12 -18 -22 -25 -22
+            -7 0 -38 -18 -69 -40 -30 -22 -57 -40 -60 -40 -2 0 -7 20 -9 45 -4 29 -26 82
+            -66 154 -70 126 -82 163 -82 246 1 133 36 192 145 241 64 28 83 31 65 10 -9
+            -12 -8 -22 5 -50 21 -43 34 -54 120 -101 177 -97 171 -94 212 -83 52 14 91 35
+            208 113 243 160 449 245 780 320 113 26 206 62 220 85 6 10 -90 12 -160 3z
+            m-4607 -589 c43 -30 79 -90 74 -123 -2 -17 -8 -31 -12 -31 -4 0 -11 -12 -14
+            -26 -4 -14 -21 -56 -37 -94 -26 -57 -36 -70 -60 -75 -15 -4 -36 -2 -47 4 -10
+            5 -47 17 -83 25 -59 14 -65 14 -77 -1 -21 -29 38 -57 126 -62 l74 -3 -8 -52
+            c-4 -28 -8 -72 -8 -98 -1 -25 -4 -50 -8 -54 -12 -12 -10 -444 2 -444 6 0 10
+            -31 10 -74 0 -157 50 -353 120 -469 22 -36 40 -71 40 -76 0 -6 4 -11 10 -11 5
+            0 22 -25 37 -56 15 -30 50 -79 77 -108 52 -54 215 -279 223 -306 11 -40 -16
+            -71 -91 -105 -41 -18 -82 -32 -93 -29 -24 6 -144 -53 -208 -101 -48 -37 -95
+            -49 -124 -31 -5 4 -20 39 -33 78 -16 51 -29 74 -46 81 -16 7 -26 7 -34 -1 -15
+            -15 -47 -275 -35 -283 13 -9 -30 -201 -48 -214 -7 -6 -23 -42 -35 -80 -28 -88
+            -38 -300 -20 -413 16 -101 38 -172 52 -169 19 3 52 -121 52 -198 1 -78 -25
+            -162 -75 -247 -16 -26 -28 -54 -26 -60 2 -10 -55 -46 -75 -48 -13 0 -84 152
+            -101 215 -8 33 -18 87 -22 120 -3 33 -15 119 -25 190 -56 377 -75 696 -66
+            1080 6 250 28 659 41 765 3 25 10 112 14 195 6 92 13 151 20 153 6 2 11 26 11
+            52 0 45 54 333 67 352 2 5 16 57 29 116 28 127 92 342 107 360 5 7 12 55 15
+            106 l5 94 -32 17 c-26 13 -32 21 -29 43 3 30 65 70 148 96 64 21 189 20 218 0z
+            m1770 -217 c21 -22 52 -86 52 -107 0 -5 -13 -10 -29 -10 -31 0 -42 19 -57 103
+            -7 43 3 47 34 14z m14 -183 c20 -4 45 -14 55 -23 10 -9 49 -29 86 -45 65 -27
+            68 -31 62 -55 -3 -14 -9 -53 -12 -87 -6 -69 4 -94 61 -162 29 -36 47 -72 82
+            -172 3 -8 7 -51 9 -95 8 -141 27 -300 38 -313 15 -19 23 -192 9 -201 -6 -4
+            -21 -63 -33 -131 -12 -69 -28 -132 -35 -140 -7 -9 -23 -37 -34 -63 -14 -32
+            -27 -47 -40 -47 -10 0 -22 -5 -26 -11 -3 -6 -47 -38 -97 -70 -50 -33 -108 -77
+            -129 -97 -21 -20 -43 -37 -50 -37 -7 0 -47 -17 -88 -37 -188 -90 -363 -82
+            -466 23 -21 21 -46 39 -55 39 -10 0 -19 11 -22 28 -3 15 -22 72 -42 127 -55
+            151 -77 391 -54 591 7 60 15 172 18 249 4 88 9 132 14 118 4 -12 24 -36 44
+            -54 36 -31 38 -32 114 -26 96 6 166 35 175 71 9 36 -6 50 -94 87 -64 27 -90
+            32 -155 32 -65 1 -76 3 -72 16 17 55 24 133 18 214 -5 87 -4 97 22 155 15 34
+            31 62 35 62 7 0 30 -89 30 -116 0 -8 -11 -19 -25 -24 -14 -5 -25 -14 -25 -19
+            0 -4 -3 -23 -6 -40 -7 -31 -5 -30 52 29 96 101 237 171 414 209 100 21 161 25
+            222 15z m588 -714 c0 -13 9 -22 25 -26 14 -3 25 -13 25 -23 0 -9 3 -26 6 -38
+            5 -19 1 -23 -30 -29 -30 -5 -44 -1 -77 21 -52 34 -69 76 -69 167 l1 73 59 -63
+            c33 -34 60 -71 60 -82z m-1526 -276 c13 -5 16 -24 16 -100 0 -101 -5 -109 -48
+            -78 -19 13 -22 24 -22 77 0 40 6 70 16 85 17 25 16 24 38 16z m2556 -40 c63
+            -3 120 -10 125 -14 6 -4 41 -17 78 -28 79 -24 337 -168 337 -188 0 -8 10 -18
+            23 -23 25 -10 49 -41 81 -105 43 -86 191 -197 322 -244 27 -9 63 -27 78 -40
+            16 -12 37 -22 47 -22 10 0 26 -11 35 -25 9 -13 33 -32 54 -41 21 -10 41 -25
+            43 -36 3 -10 14 -18 25 -18 21 0 60 -44 115 -126 16 -23 39 -52 52 -64 14 -13
+            25 -31 25 -41 0 -9 7 -19 15 -23 8 -3 15 -16 15 -29 0 -14 7 -30 15 -37 20
+            -17 19 -40 -2 -40 -10 0 -45 7 -78 14 -218 50 -489 11 -787 -114 -76 -31 -78
+            -33 -78 -67 l0 -36 69 7 c38 4 118 23 176 41 217 70 384 88 557 62 l96 -15 54
+            -53 c30 -30 70 -63 91 -74 25 -13 37 -26 37 -41 0 -13 8 -24 20 -27 12 -3 20
+            -14 20 -25 0 -12 4 -23 9 -27 17 -10 68 -157 97 -275 36 -151 37 -238 5 -305
+            -28 -55 -305 -346 -355 -372 -68 -35 -321 -56 -406 -34 -19 6 -54 15 -77 21
+            -31 8 -43 16 -43 29 0 13 -16 25 -49 40 -104 44 -119 21 -56 -87 25 -43 51
+            -106 60 -142 19 -83 19 -220 0 -346 -19 -123 -19 -215 -1 -279 7 -28 21 -77
+            30 -110 9 -33 19 -103 23 -155 11 -189 -33 -361 -170 -660 -110 -241 -141
+            -436 -103 -654 21 -118 20 -198 -4 -306 -38 -171 -34 -207 38 -360 27 -58 57
+            -136 66 -175 31 -129 48 -174 67 -180 19 -6 27 -25 10 -25 -6 0 -6 -13 0 -32
+            5 -18 7 -54 3 -80 -9 -74 -60 -101 -214 -114 -47 -3 -111 -16 -145 -29 -97
+            -37 -310 -78 -395 -77 -113 2 -150 10 -150 33 0 31 42 66 88 74 23 4 44 11 48
+            16 3 5 24 9 48 9 38 0 44 3 58 34 16 33 16 34 -15 64 -45 43 -74 52 -131 40
+            -50 -10 -116 -4 -116 12 0 10 -74 52 -100 57 -8 2 -48 6 -88 9 -86 7 -108 -3
+            -148 -71 -23 -40 -25 -49 -14 -74 11 -27 15 -28 94 -34 45 -3 112 -11 149 -18
+            73 -14 71 -11 80 -95 l5 -40 -47 -13 c-25 -7 -61 -19 -79 -27 -38 -16 -111
+            -18 -163 -4 -70 20 -125 110 -136 223 -7 80 3 157 21 157 9 0 16 19 20 53 8
+            60 30 86 157 185 90 70 140 127 175 197 27 55 29 70 31 180 1 66 12 188 25
+            270 29 191 32 413 5 462 -9 18 -29 69 -43 115 -14 46 -66 169 -115 273 -48
+            105 -96 219 -105 255 -23 88 -22 289 1 385 38 160 44 294 30 678 -7 183 -6
+            212 9 252 22 58 74 102 181 153 75 37 85 45 85 68 l0 27 -69 -7 c-144 -13
+            -241 -70 -287 -171 -22 -47 -24 -62 -24 -230 1 -99 5 -225 10 -280 16 -175
+            -20 -450 -70 -531 -19 -29 -23 -31 -54 -24 -18 4 -38 10 -43 13 -6 4 -13 50
+            -16 104 -7 127 -26 183 -91 282 -29 45 -59 102 -65 129 -21 80 -46 137 -61
+            137 -8 0 -21 -18 -29 -40 -20 -61 -2 -150 48 -236 64 -111 81 -167 81 -267 0
+            -48 -4 -93 -9 -100 -5 -9 -25 -12 -61 -10 l-52 3 -18 70 c-27 106 -95 269
+            -114 273 -9 2 -16 13 -16 28 0 17 -6 24 -19 24 -18 0 -38 53 -71 190 -6 25
+            -18 63 -28 85 l-17 39 -6 -29 c-23 -106 -4 -202 71 -365 57 -124 82 -196 95
+            -277 7 -43 6 -43 -23 -43 -17 0 -41 4 -54 9 -36 13 -39 24 -155 436 -15 56
+            -18 212 -4 265 30 116 42 155 51 164 5 5 10 20 10 33 0 12 11 51 24 85 14 35
+            34 95 46 133 12 39 34 97 50 130 15 33 31 76 35 95 9 45 53 115 102 162 41 39
+            210 146 314 198 35 18 111 52 169 75 58 24 182 77 275 118 94 41 224 98 290
+            127 203 89 235 107 235 134 0 21 -6 24 -61 30 -88 10 -104 19 -191 102 -90 86
+            -196 158 -316 215 -90 42 -118 44 -108 6 3 -12 6 -30 6 -40 0 -10 11 -22 25
+            -27 14 -5 25 -16 25 -24 0 -19 85 -77 212 -145 54 -29 101 -57 104 -63 3 -5 3
+            -29 0 -52 -7 -43 -7 -44 -97 -85 -82 -39 -139 -63 -364 -156 -350 -144 -549
+            -278 -660 -445 -55 -84 -89 -164 -136 -325 -20 -72 -56 -180 -79 -240 -81
+            -213 -92 -260 -86 -360 3 -53 15 -124 30 -172 14 -46 39 -144 56 -220 17 -75
+            42 -162 56 -193 22 -50 32 -60 72 -78 67 -29 129 -34 240 -18 53 8 156 18 227
+            21 l131 7 13 -76 c20 -121 58 -239 122 -382 53 -119 149 -357 149 -370 0 -10
+            -95 8 -200 37 -272 74 -324 84 -520 94 -144 8 -236 -2 -425 -46 -200 -46 -213
+            -49 -248 -49 -17 0 -85 18 -150 40 -114 39 -123 40 -247 40 -72 0 -130 -2
+            -130 -4 0 -24 24 -39 98 -62 48 -14 138 -46 201 -71 161 -63 208 -65 381 -20
+            196 52 277 61 469 54 173 -6 355 -32 476 -67 126 -37 195 -50 259 -50 74 0 72
+            3 82 -120 6 -75 -27 -341 -45 -364 -17 -22 -41 -147 -40 -208 2 -153 -90 -306
+            -226 -375 -42 -22 -20 -20 -650 -53 -102 -6 -181 -14 -183 -20 -2 -6 -73 -10
+            -185 -9 -111 0 -174 4 -162 9 32 14 -81 11 -250 -5 -218 -21 -250 -20 -347 16
+            -46 17 -92 38 -103 48 -11 10 -36 26 -55 35 -32 15 -140 108 -140 121 0 3 -22
+            44 -49 93 -69 121 -92 207 -98 367 l-5 130 55 163 c79 233 137 320 247 370 46
+            22 76 27 195 33 103 5 163 14 225 32 254 75 515 133 707 158 141 18 287 8 418
+            -30 109 -31 293 -66 302 -57 3 2 -6 19 -18 36 -65 87 -392 180 -637 180 -85 0
+            -118 12 -136 50 -65 132 -94 192 -140 300 -30 69 -53 126 -51 128 2 2 42 12
+            89 22 105 23 142 42 150 76 4 14 4 29 1 32 -3 3 -72 1 -153 -6 -178 -14 -231
+            -6 -279 40 -39 38 -48 60 -34 86 11 21 20 24 240 77 80 19 155 42 167 50 25
+            16 35 66 18 89 -10 15 -15 14 -56 -4 -72 -31 -256 -72 -334 -73 -61 -1 -80 3
+            -137 31 -37 18 -67 37 -67 42 0 5 44 23 98 40 123 41 281 115 358 168 108 74
+            221 210 246 295 17 60 13 272 -6 348 -17 63 -50 129 -66 129 -17 0 -28 -75
+            -34 -225 -8 -213 -40 -308 -135 -401 -86 -84 -199 -143 -358 -185 -60 -16
+            -121 -22 -261 -26 l-183 -5 -15 -30 -15 -29 53 -23 c29 -13 64 -26 78 -29 44
+            -11 117 -64 152 -111 18 -25 40 -45 49 -46 9 0 23 -17 31 -39 26 -65 148 -240
+            184 -262 19 -11 34 -27 34 -35 0 -8 7 -14 15 -14 8 0 15 -6 15 -14 0 -8 7 -16
+            16 -18 8 -2 27 -30 41 -63 125 -297 142 -360 107 -403 -19 -22 -163 -67 -175
+            -54 -3 4 -14 45 -23 92 -10 47 -44 158 -76 247 -78 214 -144 325 -270 453
+            -132 134 -218 195 -308 222 -65 20 -72 25 -67 43 8 23 27 105 54 225 27 117
+            45 349 38 478 -4 86 -12 128 -41 216 -20 60 -46 124 -57 143 -22 35 -73 68
+            -89 58 -19 -12 -10 -112 15 -182 47 -130 57 -197 57 -383 1 -157 -2 -187 -26
+            -290 -35 -147 -92 -280 -170 -400 -96 -144 -102 -163 -68 -192 39 -34 50 -30
+            88 34 44 71 51 66 60 -43 7 -89 48 -245 112 -429 46 -133 47 -137 47 -260 -1
+            -153 -14 -189 -90 -236 -87 -55 -113 -82 -135 -142 -12 -31 -25 -61 -30 -67
+            -13 -16 -102 -312 -122 -410 -27 -124 -17 -191 58 -424 13 -40 36 -90 51 -110
+            22 -28 28 -46 27 -85 0 -31 -6 -53 -16 -60 -8 -6 -23 -27 -33 -46 -20 -40
+            -106 -127 -138 -139 -12 -5 -64 -14 -115 -21 -123 -16 -213 3 -257 55 -16 19
+            -105 67 -105 57 0 -6 -20 -4 -47 3 -27 7 -68 18 -93 24 -25 7 -65 16 -89 21
+            -45 10 -135 69 -145 96 -21 55 13 75 139 82 76 3 108 0 196 -23 90 -23 112
+            -25 146 -16 118 32 143 141 77 338 -20 60 -43 119 -52 133 -9 14 -19 43 -23
+            65 -5 22 -19 74 -32 115 -13 41 -32 115 -41 164 -9 49 -25 105 -35 125 -25 49
+            -67 247 -75 351 -4 46 -11 87 -15 90 -5 3 -11 55 -15 115 -4 61 -12 112 -17
+            113 -13 5 -12 459 1 467 6 3 10 18 10 33 0 48 39 215 51 223 9 5 10 35 6 106
+            -6 101 -24 168 -71 260 -24 49 -26 62 -26 185 0 174 23 356 62 493 27 96 40
+            197 26 210 -2 3 -29 -2 -59 -9 -30 -8 -57 -12 -61 -8 -4 4 -16 52 -27 107 -62
+            314 -23 495 152 712 38 47 61 62 232 149 l190 97 85 -6 c47 -3 121 -15 165
+            -27 121 -33 247 -41 410 -25 77 7 266 18 420 25 317 12 382 17 390 31 4 5 26
+            9 51 9 59 0 134 44 199 117 133 148 127 143 189 143 31 0 69 6 84 14 15 8 73
+            64 129 124 56 60 140 137 186 171 100 73 155 142 132 161 -13 10 -28 8 -83
+            -12 -96 -36 -143 -68 -203 -140 -49 -60 -125 -137 -198 -203 l-34 -30 6 65
+            c29 282 57 321 235 325 99 2 236 30 226 46 -3 5 9 9 27 9 17 0 64 12 103 26
+            39 14 100 32 136 41 66 16 213 32 240 27 8 -2 67 -6 130 -10z m-2450 -572 c12
+            -67 41 -123 80 -155 19 -16 30 -35 30 -51 0 -22 -5 -26 -30 -26 -16 0 -55 -7
+            -87 -15 -85 -22 -177 -19 -278 10 -48 14 -96 30 -107 36 -19 10 -19 11 -1 31
+            21 23 51 40 73 42 20 1 149 77 147 86 -3 11 106 97 128 102 28 6 33 -1 45 -60z
+            m35 -2594 c78 -39 165 -110 211 -171 20 -26 49 -54 64 -62 53 -27 142 -165
+            155 -240 4 -21 13 -44 20 -50 7 -5 36 -77 64 -158 40 -117 51 -162 51 -211 0
+            -70 -9 -87 -60 -106 -19 -8 -51 -24 -70 -36 -60 -38 -134 -51 -280 -50 l-135
+            1 -6 165 c-6 159 -16 227 -37 253 -15 19 -69 203 -88 302 -9 50 -22 93 -27 96
+            -12 8 1 266 15 292 12 24 41 18 123 -25z m3422 -1362 c50 -11 67 -20 95 -51
+            44 -50 57 -75 58 -107 0 -18 5 -28 15 -28 8 0 15 -7 15 -15 0 -15 22 -22 150
+            -51 89 -19 200 -69 200 -89 0 -20 116 -131 152 -146 15 -6 28 -19 28 -28 0
+            -10 15 -25 35 -34 21 -10 35 -24 35 -34 0 -10 9 -24 21 -31 11 -7 18 -19 16
+            -26 -3 -7 -1 -34 4 -61 14 -73 -3 -120 -67 -187 -30 -31 -57 -52 -60 -46 -3 5
+            -26 -20 -50 -57 -25 -36 -42 -70 -38 -76 3 -6 -3 -13 -14 -16 -11 -2 -37 -30
+            -58 -60 -41 -60 -83 -85 -162 -98 -23 -4 -40 -10 -37 -15 8 -13 -118 -21 -158
+            -9 -38 10 -135 87 -231 184 -40 39 -51 58 -52 84 -2 42 -34 74 -98 98 -69 26
+            -90 57 -94 146 -2 43 3 99 12 140 9 38 16 98 16 135 0 75 -25 298 -40 352 -8
+            30 -7 38 16 61 34 35 117 71 147 64 12 -3 34 -2 47 4 32 12 25 13 97 -3z"/>
+            <path d="M1406 7258 c-10 -57 -29 -150 -42 -208 -26 -115 -67 -350 -114 -650
+            -55 -349 -62 -839 -14 -1000 21 -73 31 -81 47 -39 10 24 16 109 21 299 3 146
+            11 319 16 385 26 313 32 372 39 405 l7 35 7 -41 c4 -24 14 -44 23 -48 10 -4
+            14 -12 10 -22 -4 -9 0 -21 9 -28 8 -6 19 -33 24 -60 5 -27 16 -53 25 -58 9 -5
+            16 -20 16 -34 0 -13 7 -27 15 -30 8 -4 15 -15 15 -25 0 -34 31 -98 51 -104 10
+            -4 19 -15 19 -26 0 -26 47 -119 64 -125 8 -3 21 -25 30 -48 9 -24 25 -51 35
+            -60 17 -16 21 -16 59 -1 l41 17 -104 208 c-121 246 -153 327 -188 475 -39 165
+            -48 262 -56 585 -5 252 -8 295 -21 298 -12 2 -19 -20 -34 -100z"/>
+            <path d="M3394 7241 c-58 -14 -259 -122 -291 -156 -18 -19 -33 -39 -33 -45 0
+            -17 44 -22 204 -18 126 2 159 6 166 18 15 24 30 80 37 143 5 48 3 57 -10 57
+            -8 0 -21 2 -29 4 -7 2 -27 1 -44 -3z"/>
+            <path d="M3015 6740 c-17 -4 -45 -14 -62 -24 -26 -13 -33 -23 -33 -46 0 -30 1
+            -30 55 -30 84 0 124 28 125 86 0 15 -46 22 -85 14z"/>
+            <path d="M3200 6440 c-81 -21 -326 -138 -353 -168 -9 -10 -18 -29 -19 -43 -5
+            -41 53 -38 173 11 142 57 222 73 339 64 88 -6 96 -5 114 15 15 16 17 29 12 65
+            -4 24 -14 50 -22 57 -26 22 -161 21 -244 -1z"/>
+            <path d="M4287 5975 c-16 -8 -70 -49 -120 -92 -106 -88 -190 -145 -297 -198
+            -41 -20 -77 -39 -79 -41 -2 -2 0 -15 3 -30 7 -26 9 -27 62 -21 84 9 182 64
+            339 190 134 109 194 172 178 188 -17 17 -59 19 -86 4z"/>
+            <path d="M2166 5461 c-3 -5 -3 -22 0 -39 6 -29 10 -31 148 -68 l141 -39 222 0
+            c220 0 222 0 247 24 14 14 26 27 26 31 0 21 -70 33 -235 41 -99 4 -216 15
+            -260 23 -44 8 -104 20 -134 26 -66 12 -148 13 -155 1z"/>
+            <path d="M2960 3874 c-68 -31 -92 -62 -98 -127 l-5 -50 60 5 c61 6 173 49 194
+            74 6 7 15 30 19 51 7 29 5 42 -7 55 -24 27 -96 23 -163 -8z"/>
+            <path d="M4665 3583 c18 -133 77 -259 134 -284 18 -8 31 -21 31 -31 0 -11 8
+            -18 20 -18 16 0 20 -7 20 -33 0 -73 89 -273 127 -288 38 -14 43 -11 43 24 0
+            97 -73 281 -145 367 -55 65 -78 105 -114 196 -28 69 -37 83 -67 97 -52 25 -56
+            23 -49 -30z"/>
+            <path d="M5580 3422 c-7 -15 -16 -85 -20 -157 -8 -146 -20 -189 -87 -314 -40
+            -75 -43 -85 -30 -99 14 -13 20 -11 55 16 79 63 135 170 167 325 18 81 18 110
+            5 175 -9 41 -16 51 -44 65 -33 15 -34 15 -46 -11z"/>
+            <path d="M2065 2688 c-49 -103 -119 -223 -204 -353 -36 -55 -75 -120 -86 -145
+            -11 -25 -22 -47 -26 -50 -3 -3 -14 -38 -24 -78 -26 -109 -18 -348 14 -414 13
+            -27 27 -48 31 -48 8 0 22 38 34 92 3 15 11 81 16 147 12 150 51 276 120 391
+            66 109 130 194 140 183 4 -4 31 -61 59 -125 29 -64 59 -119 67 -122 44 -17 57
+            74 28 206 -8 40 -26 142 -39 226 -13 84 -27 157 -30 162 -3 6 -19 10 -34 10
+            -24 0 -31 -9 -66 -82z"/>
+            <path d="M2387 1383 c22 -84 59 -153 83 -153 13 0 20 -7 20 -19 0 -10 9 -21
+            20 -24 11 -3 20 -12 20 -20 0 -15 89 -81 156 -115 105 -53 297 -75 424 -48 50
+            10 81 23 92 37 10 11 33 25 52 30 40 11 70 64 45 80 -25 15 -55 10 -125 -23
+            -155 -73 -372 -38 -561 90 -88 60 -157 126 -184 176 -14 26 -31 46 -41 46 -15
+            0 -15 -5 -1 -57z"/>
+            <path d="M4830 895 c-11 -14 -10 -98 2 -110 2 -3 19 -8 36 -11 l32 -6 0 61 c0
+            57 -2 62 -26 71 -32 12 -29 13 -44 -5z"/>
+            <path d="M5695 701 c-3 -6 -24 -20 -45 -31 -34 -18 -56 -20 -167 -18 -135 3
+            -149 0 -213 -51 -21 -17 -22 -21 -10 -37 14 -15 31 -16 193 -11 240 9 297 32
+            297 123 0 13 -4 24 -9 24 -5 0 -16 3 -24 6 -8 3 -18 0 -22 -5z"/>
+            <path d="M6324 1379 c2 -8 7 -26 10 -41 4 -18 13 -28 25 -28 13 0 20 -10 25
+            -30 3 -18 12 -30 21 -30 8 0 15 -9 15 -20 0 -13 7 -20 20 -20 11 0 20 -6 20
+            -14 0 -8 15 -24 34 -35 19 -12 36 -28 39 -35 3 -8 14 -13 24 -11 10 2 35 7 56
+            10 31 5 37 10 37 29 0 20 -8 26 -51 36 -38 9 -53 18 -59 36 -5 13 -14 24 -19
+            24 -6 0 -28 27 -51 59 -47 71 -46 69 -104 77 -37 5 -46 4 -42 -7z"/>
+            <path d="M6266 1145 c-12 -33 -5 -66 19 -87 14 -12 25 -31 25 -43 0 -44 85
+            -95 159 -95 34 0 42 5 60 34 24 38 26 46 10 46 -6 0 -42 9 -80 21 -54 16 -69
+            25 -69 40 0 26 -59 87 -91 94 -19 5 -28 2 -33 -10z"/>
+            <path d="M6120 1020 c-12 -23 -10 -28 34 -84 36 -45 73 -66 116 -66 27 0 30 3
+            30 33 0 25 -9 42 -38 70 -21 20 -46 37 -55 37 -9 0 -17 7 -17 15 0 24 -57 19
+            -70 -5z"/>
+            <path d="M5190 7540 c-24 -6 -25 -10 -24 -71 1 -82 51 -286 76 -309 10 -9 16
+            -24 13 -32 -4 -9 0 -18 9 -21 9 -4 12 -14 9 -26 -3 -13 -1 -21 7 -21 8 0 10
+            -8 6 -24 -4 -16 -1 -26 8 -29 8 -3 17 -21 21 -39 8 -39 40 -145 62 -204 8 -23
+            25 -47 37 -53 12 -7 27 -26 33 -42 9 -23 17 -29 42 -29 24 0 31 4 31 20 0 22
+            -43 156 -104 325 -42 118 -139 435 -134 440 7 7 224 -90 373 -165 337 -172
+            819 -494 1189 -795 72 -58 136 -105 143 -105 7 0 13 -9 13 -19 0 -12 44 -59
+            118 -124 64 -58 157 -150 206 -206 53 -61 96 -101 107 -101 12 0 19 -7 19 -20
+            0 -13 7 -20 20 -20 12 0 20 -7 20 -16 0 -14 101 -149 236 -314 52 -63 182
+            -268 225 -352 27 -54 32 -58 65 -58 l35 0 -6 48 c-15 107 -163 340 -431 672
+            -90 112 -544 570 -654 661 -135 111 -250 196 -402 299 -90 61 -226 155 -303
+            210 -196 139 -357 233 -606 354 -305 148 -397 181 -459 166z"/>
+            <path d="M4877 7345 c-50 -38 -109 -119 -202 -280 -65 -112 -129 -206 -188
+            -278 -43 -52 -40 -67 13 -67 52 0 87 38 245 261 87 123 160 226 162 229 3 3
+            15 -8 27 -23 23 -29 74 -67 89 -67 4 0 15 16 23 35 12 30 12 40 -2 82 -21 63
+            -38 95 -60 114 -37 33 -58 31 -107 -6z"/>
+            <path d="M6415 4012 c-21 -21 27 -214 59 -238 9 -6 14 -18 10 -28 -4 -10 0
+            -18 10 -22 9 -4 16 -18 16 -34 0 -16 7 -30 15 -34 8 -3 15 -16 15 -29 0 -14 7
+            -30 15 -37 8 -7 15 -21 15 -32 0 -32 41 -122 66 -143 13 -12 24 -31 24 -43 0
+            -13 7 -25 15 -28 8 -4 15 -16 15 -29 0 -28 46 -111 65 -119 9 -3 15 -18 15
+            -35 0 -16 6 -31 15 -35 8 -3 15 -12 15 -21 0 -8 4 -15 9 -15 5 0 12 -13 16
+            -29 3 -15 17 -38 30 -50 14 -11 25 -32 25 -46 0 -14 8 -29 20 -35 11 -6 20
+            -18 20 -26 0 -25 50 -103 69 -109 10 -3 23 -22 30 -43 6 -20 38 -75 71 -122
+            32 -47 92 -135 133 -195 41 -61 81 -116 90 -124 10 -7 17 -17 17 -22 0 -4 51
+            -78 113 -163 61 -85 146 -204 187 -263 65 -93 82 -111 127 -133 28 -14 52 -29
+            52 -35 1 -14 64 -115 72 -115 17 0 16 47 -2 95 -16 44 -167 273 -246 375 -44
+            56 -346 497 -459 670 -282 430 -424 701 -554 1055 -55 150 -83 209 -102 221
+            -16 10 -96 22 -103 16z"/>
+          </g>
+        </symbol>
+      </defs>
+    </svg>
+  </div>
+
+</body>
+
+<script src="scripts/app.js"></script>
+
+<script src="scripts/env.js"></script>
+
+</html> 
\ No newline at end of file
diff --git a/exemple/scripts/app.js b/exemple/scripts/app.js
new file mode 100644
index 0000000..70c2b4a
--- /dev/null
+++ b/exemple/scripts/app.js
@@ -0,0 +1,51 @@
+// Get the CSS root element
+const rootCSS = document.querySelector(':root');
+
+// Create a function for getting a variable value
+function CSSgetSombre() {
+  let rs = getComputedStyle(rootCSS);
+  alert("The value of --couleur-sombre is: " + rs.getPropertyValue('--couleur-sombre'));
+}
+
+function CSSsetSombre(vr, vg, vb) {
+  // Couleur
+  rootCSS.style.setProperty('--r-sombre', vr);
+  rootCSS.style.setProperty('--g-sombre', vg);
+   rootCSS.style.setProperty('--b-sombre', vb);
+  // Logo
+  // let logo = document.querySelector('header>#logo>svg');
+  // if (logo) logo.style.fill = 'rgb(' + vr + ',' + vg + ',' + vb + ')';
+}
+
+function CSSsetClair(vr, vg, vb) {
+  // Couleur
+  rootCSS.style.setProperty('--r-clair', vr);
+  rootCSS.style.setProperty('--g-clair', vg);
+  rootCSS.style.setProperty('--b-clair', vb);
+}
+
+function CSSswitchCouleurTexte() {
+  let rs = getComputedStyle(rootCSS);
+  let actuel = rs.getPropertyValue('--couleur-texte');
+  if (actuel == 'black')
+    rootCSS.style.setProperty('--couleur-texte', 'var(--couleur-sombre)');
+  else
+    rootCSS.style.setProperty('--couleur-texte', 'black');
+}
+
+function CSSsetTheme(valeur) 
+{
+    switch(valeur){
+        case 'blue':
+            CSSsetClair(245,245,240);
+            CSSsetSombre(0,0,245);
+        break;
+        case 'red':
+            CSSsetClair(245,245,240);
+            CSSsetSombre(245,0,0);
+        break;
+        default:
+            CSSsetClair(245,245,240);
+            CSSsetSombre(0,0,0);
+    }
+}
diff --git a/exemple/scripts/env.js b/exemple/scripts/env.js
new file mode 100644
index 0000000..2a269f5
--- /dev/null
+++ b/exemple/scripts/env.js
@@ -0,0 +1,5 @@
+/*
+ * Personnaliser les environnements pour distinguer PROD, TEST, etc.
+ */
+
+CSSsetTheme('red');
diff --git a/exemple/styles/app.css b/exemple/styles/app.css
new file mode 100644
index 0000000..489ef0b
--- /dev/null
+++ b/exemple/styles/app.css
@@ -0,0 +1,325 @@
+:root {
+
+  --dark-mode: 1;
+
+  --r-sombre: 0;
+  --g-sombre: 0;
+  --b-sombre: 0;
+
+  --r-clair: 245;
+  --g-clair: 245;
+  --b-clair: 240;
+
+  --rgb-sombre: var(--r-sombre), var(--g-sombre), var(--b-sombre);
+  --rgb-clair: var(--r-clair), var(--g-clair), var(--b-clair);
+
+  --couleur-texte: black;
+  --couleur-sombre: rgb(var(--rgb-sombre));
+  --couleur-clair: rgb(var(--rgb-clair));
+
+  --nuance-sombre-alpha-01: rgba(var(--rgb-sombre), 0.1);
+  --nuance-sombre-alpha-02: rgba(var(--rgb-sombre), 0.2);
+  --nuance-sombre-alpha-03: rgba(var(--rgb-sombre), 0.3);
+  --nuance-sombre-alpha-04: rgba(var(--rgb-sombre), 0.4);
+  --nuance-sombre-alpha-05: rgba(var(--rgb-sombre), 0.5);
+  --nuance-sombre-alpha-06: rgba(var(--rgb-sombre), 0.6);
+  --nuance-sombre-alpha-07: rgba(var(--rgb-sombre), 0.7);
+  --nuance-sombre-alpha-08: rgba(var(--rgb-sombre), 0.8);
+  --nuance-sombre-alpha-09: rgba(var(--rgb-sombre), 0.9);
+
+  --r-delta-sombre: calc(255 - var(--r-sombre));
+  --g-delta-sombre: calc(255 - var(--g-sombre));
+  --b-delta-sombre: calc(255 - var(--b-sombre));
+ 
+  --nuance-sombre-01: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.9)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.9)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.9))); 
+  --nuance-sombre-02: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.8)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.8)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.8)));
+  --nuance-sombre-03: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.7)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.7)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.7)));
+  --nuance-sombre-04: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.6)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.6)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.6)));
+  --nuance-sombre-05: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.5)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.5)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.5)));
+  --nuance-sombre-06: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.4)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.4)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.4)));
+  --nuance-sombre-07: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.3)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.3)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.3)));
+  --nuance-sombre-08: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.2)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.2)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.2)));
+  --nuance-sombre-09: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.1)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.1)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.1)));
+
+}
+
+@font-face {
+	font-family: 'Fonte-Texte';
+	font-display: fallback;
+	/* Penser à bien héberger la font sur le même domaine que mon site */
+	src: url(../fonts/Fonte-Texte.woff2) format('woff2');
+	/* Réutiliser ici exactement la même liste unicode que ci-dessus */
+	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
+		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
+		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
+		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
+}
+
+@font-face {
+	font-family: 'Fonte-Titre';
+	font-display: fallback;
+	/* Penser à bien héberger la font sur le même domaine que mon site */
+	src: url(../fonts/Fonte-Titre.woff2) format('woff2');
+	/* Réutiliser ici exactement la même liste unicode que ci-dessus */
+	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
+		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
+		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
+		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-family: Fonte-Texte, monospace;
+  max-width: 1100px;
+  padding-left: 2%;
+  padding-right: 3%;
+  margin: 0 auto;
+  background: var(--couleur-clair);
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  height:100%;
+}
+
+h1 {
+  margin-left: 5px;
+}
+
+h2 {
+  margin-left: 10px;
+}
+
+p {
+  margin-left: 10px;
+}
+
+ul {
+  margin-left: 15px;
+}
+
+/*
+ *
+ * Le style du header
+ *
+ */
+header {
+  height: 15vh;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  align-items: center;
+}
+header>#marque {
+  font-family: Fonte-Titre, sans-serif;
+  font-size: 12.5vh;
+  text-shadow: 0.5vw 0.5vw var(--nuance-sombre-02);
+
+  vertical-align: middle;
+  text-align: left;
+}
+header>#logo {
+  vertical-align: middle;
+  text-align: right;
+}
+header>#logo>svg {
+  height: 10vh;
+  fill: var(--couleur-texte);
+  box-shadow: 0.3vw 0.3vw var(--nuance-sombre-02);
+  cursor: pointer;
+}
+header>#logo>svg:hover {
+  box-shadow: 0.3vw 0.3vw var(--couleur-sombre);
+}
+
+/*
+ *
+ * Le style de la zone de navigation
+ *
+ */
+nav {
+  position: sticky;
+  left: 0px;
+  top: 0px;
+  z-index: 20;
+  overflow: auto;
+
+  justify-content: space-between;
+  align-items: center;
+
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color:var(--couleur-texte);
+  background: var(--couleur-clair);
+}
+
+/*
+ * Fil d'Ariane
+ */
+nav>#ariane {
+  align-items: center;
+  height: 25px;
+}
+
+nav>#ariane>#left {
+  float: left;
+  padding-left: 5px;
+}
+nav>#ariane>#left::after {
+  clear: both;
+}
+nav>#ariane>#left>span>a {
+  text-decoration: underline;
+  cursor: pointer;
+}
+nav>#ariane>#left>span>a:hover {
+  text-decoration: none;
+  color: var(--nuance-sombre-06);
+}
+nav>#ariane>#left>span>a:last-child {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+nav>#ariane>#right {
+  float: right;
+  text-align: right;
+  font-weight: bold;
+  padding-right: 5px;
+}
+nav>#ariane>#right>a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+nav>#ariane>#right>a:hover {
+  text-decoration: none;
+  color: var(--nuance-sombre-06);
+}
+
+/*
+ * Bandeau
+ */
+ nav>#bandeau {
+  align-items: center;
+  height: 50px;
+  background-color: var(--nuance-sombre-01);
+}
+
+nav>#bandeau>#menu>a {
+  float: left;
+  margin-left: 10px;
+  margin-top: 10px;
+
+  font-size: 1.125rem;
+  font-weight: normal;
+
+  cursor: pointer;
+  text-decoration: underline;
+}
+nav>#bandeau>#menu>a:hover {
+  color: var(--nuance-sombre-06);
+  text-decoration: none;
+}
+
+nav>#bandeau>#logo {
+  float: right;
+  padding-top: 5px;
+  padding-right: 10px;
+}
+nav>#bandeau>#logo>svg {
+  width: 40px;
+  height: 40px;
+
+  fill: var(--couleur-texte);
+  box-shadow: 0.2vw 0.2vw var(--nuance-sombre-02);
+
+  cursor: pointer;
+}
+nav>#bandeau>#logo>svg:hover {
+  box-shadow: 0.2vw 0.2vw var(--couleur-sombre);
+}
+nav>#bandeau>#logo::after {
+  clear: both;
+}
+
+#synthesis>.statrow {
+  display:flex; 
+  width: 100%;
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+#synthesis>.statrow>div:hover {
+  font-weight: bold;
+}
+
+#synthesis>.statrow>.statbox1 {
+  flex:1; 
+  border: 1px solid black;
+  text-align: center; 
+  cursor: pointer;
+}
+
+#synthesis>.statrow>.statbox2 {
+  flex:1; 
+  border: 1px solid black;
+  text-align: center; 
+  cursor: pointer;
+}
+
+@media (max-width: 900px) {
+  #synthesis>.statrow>.statbox2 {
+    display:none; 
+  }  
+}
+
+#datatable {
+  width: 100%;
+}
+
+#datatable>table {
+  border-spacing: 0;
+  min-width:100%;
+  color: var(--couleur-texte);
+  text-align: left;
+  vertical-align: middle;
+}
+
+#datatable>table>*>tr>th {
+  background: var(--couleur-texte);
+  color: var(--nuance-sombre-02);
+  border-color: var(--couleur-clair);
+}
+
+#datatable>table>tbody>tr:nth-child(odd)>td {
+  background: var(--nuance-sombre-01);
+}
+
+#datatable>table>tbody>tr:nth-child(even)>td {
+  background: var(--nuance-sombre-03);
+}
+
+#datatable>table>tbody>tr:hover>td {
+  background-color: var(--nuance-sombre-07);
+  color: var(--nuance-sombre-02);
+}
+
+.cellnumber {
+  text-align: right;
+  padding-right: 5px;
+}
+.cellid {
+  text-align:center;
+}
+
+@media (max-width: 900px) {
+  .cellbox2 {
+    display:none; 
+  }  
+}
+
+#footer {
+  min-height: 100vh;
+}
-- 
2.26.2


From c225f209235769332a8a67dd1020f3375a8cacd8 Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Mon, 2 Jun 2025 13:40:19 +0200
Subject: [PATCH 6/6] 20250602

---
 frontend/src/html/index.html                  |   1 -
 .../UI/IntersectionObserver/synthesis.js      |   4 +-
 frontend/src/scripts/default.js               | 106 +++++++++---------
 frontend/src/styles/datagrid.css              |   4 +
 frontend/src/styles/synthesis.css             |   5 +-
 5 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 878db50..f19238e 100644
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -48,7 +48,6 @@
   <section id="synthesis">
     <div id="synthesis_top">&nbsp;</div>
     <div id="synthesis_body"></div>
-    <div id="synthesis_bottom">&nbsp;</div>
   </section>
 
   <section id="datagrid"></section>
diff --git a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
index a44d6de..44c6581 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
@@ -4,10 +4,10 @@ const handleSynthesisIntersection = function (entries) {
     // Check if the element is intersecting the viewport
     if (entry.isIntersecting) {
       msgConsole('IntersectionObserver',"The synthesis is visible in the viewport");
-      if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
+      if (typeof synthesisIsNowVisible === 'function') synthesisIsNowVisible(entry);
     } else {
       msgConsole('IntersectionObserver',"The synthesis is invisible in the viewport");
-      if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
+      if (typeof synthesisIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
     }
   });
 }
diff --git a/frontend/src/scripts/default.js b/frontend/src/scripts/default.js
index 763bf8f..c78df31 100644
--- a/frontend/src/scripts/default.js
+++ b/frontend/src/scripts/default.js
@@ -1,7 +1,7 @@
   window.addEventListener('load', function() { window.scrollTo(0,0); }, false);
 
   /*
-   * Personnalisation
+   * Personnalisation HEADER visibility
    * Que se passe-t-il lorsque la bannière est invisible ?
    */
   function setLogoVisiblity(visibilityFlag) {
@@ -11,31 +11,24 @@
     element.style.visibility = value;
   }
 
-  function setNavbarStickOnTop(topFlag) {
-    let element = document.querySelector("#nav");
-    if (topFlag) element.style.setProperty('top', '0px');
-    else element.style.removeProperty('top');
+  function setSynthesisTopHeight(hauteur) {
+    let element = document.querySelector("#synthesis_top");
+    element.style.height = hauteur+'px';
   }
 
-  function setDataGridFootSticky(stickyFlag) {
-    let element = null;
-    if (stickyFlag) {
-      //
-      // Mettre le tfoot sticky au bottom
-      //
-      element = document.querySelector("#datagrid>table>tfoot");
-      element.style.setProperty('position', 'sticky');
-      element.style.setProperty('bottom', '0px');
-      element.style.setProperty('z-index', '30');
-    } else {
-      element = document.querySelector("#datagrid>table>tfoot");
-      element.style.setProperty('position', 'relative');
-      element.style.setProperty('z-index', '10');
-    }
+  function headerIsNowVisible(header) {
+    setLogoVisiblity(false);
+    setSynthesisTopHeight(6);
+  }
+
+  function headerIsNowInvisible(header) {
+    setLogoVisiblity(true);
+    setSynthesisTopHeight(80);
+    scrollToElement('#synthesis_top');
   }
 
   /*
-   * Personnalisation
+   * Personnalisation SYNTHESIS visibility
    * Que se passe-t-il lorsque la synthèse est invisible ?
    */
   function setDatagridFirstColSticky(stickyFlag) {
@@ -92,6 +85,46 @@
     }
   }
 
+  function setDataGridFootSticky(stickyFlag) {
+    let element = document.querySelector("#datagrid>table>tfoot");;
+    if (stickyFlag) {
+      //
+      // Mettre le tfoot sticky au bottom
+      //
+      element.style.setProperty('position', 'sticky');
+      element.style.setProperty('bottom', '0px');
+      element.style.setProperty('z-index', '30');
+
+      setDataGridHeadSticky(stickyFlag);
+
+    } else {
+      element.style.setProperty('position', 'relative');
+      element.style.setProperty('z-index', '10');
+    }
+  }
+  function synthesisIsNowVisible(entry) {
+
+    setDatagridHeadSticky(false);
+    setDataGridFootSticky(false);
+    /*
+    setDatagridFirstColSticky(true);
+    */
+
+    myLog('Trigger synthesis is visible');
+  }
+
+  function synthesisIsNowInvisible(entry) {
+
+    setDatagridHeadSticky(true);
+    setDataGridFootSticky(true);
+    /*
+    setDatagridFirstColSticky(true);
+    */
+
+    myLog('Trigger synthesis is invisible');
+  }
+
+
   function smoothJump(hash) {
     location.replace("#" + hash);
   }
@@ -128,36 +161,6 @@
     window.scrollTo(0, element.offsetHeight + 1);
   }
 
-  function headerIsNowVisible(header) {
-    setLogoVisiblity(false);
-  }
-
-  function headerIsNowInvisible(header) {
-    setLogoVisiblity(true);
-  }
-
-  function synthesisIsNowVisible(entry) {
-
-    setDatagridHeadSticky(false);
-    setDataGridFootSticky(false);
-    /*
-    setDatagridFirstColSticky(true);
-    */
-
-    myLog('Trigger synthesis is visible');
-  }
-
-  function synthesisTopIsNowInvisible(entry) {
-
-    setDatagridHeadSticky(true);
-    setDataGridFootSticky(true);
-    /*
-    setDatagridFirstColSticky(true);
-    */
-
-    myLog('Trigger synthesis is invisible');
-  }
-
   function initDatagrid()
   {
     let fonctionAffichageDataGrid = datagrid_hooks['random'];
@@ -191,6 +194,7 @@
   }
 
   function activeMenu(element) {
+      scrollToElement('#synthesis_top');
       activeMode(element.innerText);
   }
   
diff --git a/frontend/src/styles/datagrid.css b/frontend/src/styles/datagrid.css
index 8583317..647211e 100644
--- a/frontend/src/styles/datagrid.css
+++ b/frontend/src/styles/datagrid.css
@@ -9,6 +9,10 @@
   color: var(--couleur-texte);
 }
 
+#atagrid>table>thead {
+  z-index: 30;
+}
+
 #datagrid>table>*>tr>th {
   background: var(--couleur-texte);
   color: var(--nuance-sombre-02);
diff --git a/frontend/src/styles/synthesis.css b/frontend/src/styles/synthesis.css
index 75bc038..a9fac3f 100644
--- a/frontend/src/styles/synthesis.css
+++ b/frontend/src/styles/synthesis.css
@@ -1,6 +1,5 @@
 #synthesis {
   position: sticky;
-  left: 0px;
   color: var(--couleur-texte);
   background-color: var(--couleur-clair);
 }
@@ -8,7 +7,6 @@
 #synthesis_body {
   min-height: 100px;
   position: sticky;
-  left: 0px;
   z-index: 10;
   overflow: auto;
 }
@@ -24,7 +22,8 @@
 .statrow {
   display:flex; 
   width: 100%;
-  margin-bottom: 4px;
+  margin-top: 2px;
+  margin-bottom: 2px;
 }
 
 .statrow>div:hover {
-- 
2.26.2