projet: améliore le modèle et l'exemple

- Complète la documentation pour mieux expliquer la structure du projet et l'utilisation des commandes pour générer le document PDF final. - Améliore la syntaxe markdown de la documentation. - Documente l'utilisation du modèle dans son propre projet. Fixes #2. - Documente la manière de rédiger un document en utilisant la syntaxe markdown et certaines particularités qui sont données en exemple dans le fichier `example.md`. Fixes #1 (au moins en partie). - Structure, ordonne et documente le fichier des règles de style afin d'en améliorer la lecture et la compréhension. Une partie de la documentation sur l'utilisation de ce modèle se retrouve dans ce fichier. Fixes #1 (dans une autre partie). - Implémente des améliorations de style réalisée avec le projet BibLaTeX et Zotero, notamment la numérotation de la table des matières et sur l'affichage du numéro de page de chaque section. - Configure les polices utilisées. Fixes #3. - Mets à jour la base de donnée bibliographique (`references.bib`). - Mets en forme les tableaux. - Améliore le rendu des blocs de code préformatés. - Supprime le soulignement des appels de note. Fixes #4. - Ajoute du contenu à l'exemple afin de mieux montrer le résultat obtenu. Fixes #1 (également). - Ignore le dossier `release/` qui contient des fichiers propres à la publication de version. Co-Authored-by: iGor milhit <igor@milhit.ch>
projet: met en place le projet et l'exemple
2024-04-25 13:51:12 +02:00 · 2023-04-24 15:18:18 +02:00
13 changed files with 2202 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+example.html
+example.pdf
+test.*
+release/
--- a/README.md
+++ b/README.md
@ -1,3 +1,131 @@
-# bunige-pagedjs-template
+---
+title: Un modèle pagedjs pour la BUNIGE
+date: 2023-04-21T11:19:03+02:00
+id: 20230421111912
+tags: [modèle, pagedjs, PDF, BUNIGE]
+---

-Un modèle et une mise en forme pour produire un PDF suivant la charte de la Bibliothèque de l'Université de Genève.
+# [Un modèle *pagedjs* pour la BUNIGE][1]
+
+## Licence
+
+Ce projet est sous [licence MIT][2].
+
+## Description
+
+Ce projet est un modèle et une mise en forme pour produire un PDF suivant la
+charte de la [Bibliothèque de l'Université de Genève][3].
+
+Il a pour objectif d'être ajouté rapidement à un projet utilisant [paged.js][4]
+pour générer des PDF à partir d'un contenu en markdown.
+
+## Usage
+
+Une solution est de télécharger les fichiers et répertoires suivants à la
+racine de votre propre projet :
+
+- `static/`.
+- `style.css`.
+- `template.html`.
+- `interface.css`.
+- `heg-iso-690.csl`.
+
+Vous pouvez faire ces téléchargement à la main, ou télécharger le fichier
+`.zip` de la [publication de version][7].
+
+Une autre méthode est de cloner le projet et de rédiger votre document au sein
+de celui-ci.
+
+## Structure du répertoire
+
+À la racine du répertoire se trouve les fichiers nécessaires au modèle :
+
+- Le modèle lui-même : `template.html`.
+- La feuille de style qui rend possible l'interface web pour la
+  prévisualisation du document au format HTML : `interface.css` (fichier
+  faisant partie du projet [paged.js][4] : [interface.css][6]).
+- Le fichier de style bibliographique qui fait partie à part entière du modèle,
+  car il est la norme utilisée par la charte : `heg-iso-690.csl`. Il est
+  extrait du répertoire des styles `.csl` :
+  [haute-ecole-de-gestion-de-geneve-iso-690.csl][5].
+
+Dans le dossier `example` se trouvent les sources pour pouvoir donner un
+exemple :
+
+- Le document markdown lui-même : `example.md`.
+- Une liste de références bibliographiques au format BibLaTeX :
+  `references.bib`.
+
+## Prérequis
+
+- `pandoc`.
+- `pagedjc-cli` (`npm install -g puppeteer pagedjs pagedjs-cli`).
+
+## Génération du PDF d'exemple
+
+Lancer les commandes depuis le répertoire `./example`.
+
+Pour générer le fichier HTML a visualiser dans le navigateur :
+
+```bash
+pandoc --citeproc \
+       --template=../template.html --css=../style.css \
+       --toc --toc-depth=2 \
+       --to=html --output=example.html example.md
+```
+
+- `--citeproc` assure que les références bibliographiques soient traitées.
+- `--template=` et `--css=` définissent le modèle et les règles de style à
+  utiliser.
+- `--toc` et `toc-depth=2` génèrent la table des matière en se limitant au 2e
+  niveau.
+
+Puis lancer un serveur web à la racine du projet (par exemple avec `python -m
+http.server`), et ouvrir le fichier HTML généré avec Chromium (ou Chrome) pour
+pouvoir l'imprimer au format PDF.
+
+Pour générer directement le PDF, en utilisant `pagedjs` au moyen de `pandoc` :
+
+```bash
+pandoc --citeproc \
+       --to=pdf --pdf-engine=pagedjs-cli \
+       --css=../style.css \
+       --toc --toc-depth=2 \
+       --output=example.pdf example.md
+```
+
+- `--pdf-engine=` impose `pagedjs` pour la conversion en PDF.
+- Ici le `template` ne doit pas être utilisé, mais la feuille de style doit
+  l'être.
+
+Pour générer le PDF en utilisant directement `pagedjs` :
+
+```bash
+pandoc --citeproc \
+       --to=html --toc --toc-depth=2 \
+       --template=../template.html --css=../style.css \
+       --output example.html example.md \
+       && pagedjs-cli example.html --style ../style.css --output example.pdf
+```
+
+**Attention !** Chacune de ces méthodes produit des différences. À vous de les
+observer et de choisir laquelle vous convient le mieux.
+
+## Rédaction du document
+
+Pour la rédaction du document, il est utile de se référer à la documentation de
+la syntaxe markdown, mais aussi à la documentation de `pandoc`. Quelques points
+sont données en exemples dans le fichier `example/example.md`, comme par
+exemple [La police][8] ou [Les titres][9]. 
+
+<!-- références -->
+
+[1]: ./
+[2]: ./LICENSE
+[3]: https://www.unige.ch/biblio/fr/ "Site officiel de la Bibliothèque de l'Université de Genève"
+[4]: https://pagedjs.org/
+[5]: https://raw.githubusercontent.com/citation-style-language/styles/blob/master/haute-ecole-de-gestion-de-geneve-iso-690.csl
+[6]: https://gitlab.coko.foundation/pagedjs/interface-polyfill/-/raw/master/interface.css
+[7]: https://git.milhit.ch/igor/bunige-pagedjs-template/releases/latest
+[8]: ./example/example.md#police
+[9]: ./example/example.md#titres
--- a/example/example.md
+++ b/example/example.md
@ -0,0 +1,200 @@
+---
+title: Un modèle pour la BUNIGE 
+date: Printemps 2023
+creation_date: 2023-04-21T11:30:49+02:00
+id: 20230421113057
+author:
+- Igor Milhit^[Uni CMU]
+- Jane Doe^[Uni MAIL]
+logo:
+- ./static/pagedjs-logo.svg
+- ./static/markdown-logo.svg
+lang: fr
+tags: [example, markdown, pagedjs]
+bibliography: ./references.bib
+csl: ../heg-iso-690.csl
+link-citations: true
+nocite: |
+  @*
+toc-title: Table des matières
+---
+
+## Objectifs
+
+Au terme de cet atelier, vous serez en mesure de :
+
+- Générer un fichier PDF en utilisant le modèle.
+- Convertir les sources en markdown en HTML afin de l'afficher dans un
+  navigateur web.
+- Modifier les règles de styles pour adapter le modèle.
+
+&nbsp;
+
+:::{#licence}
+![Logo de la licence CC BY-SA 4.0](../static/by-sa.svg) \
+[CC BY-SA 4.0][cc-by-sa] --- [Sources][sources]
+:::
+
+[cc-by-sa]: https://creativecommons.org/licenses/by-sa/4.0/deed.fr "Texte de la licence en français"
+[sources]: https://git.milhit.ch/igor/bunige-pagedjs-template
+
+## Principes généraux {#first-section}
+
+L'idée de base est de rédiger le contenu du document dans un fichier markdown.
+Puis d'obtenir un fichier PDF mis en forme selon les modèles utilisé par la
+bibliothèque de l'UNIGE pour ses formations.
+
+Pour y parvenir, plusieurs méthode sont possibles. Par exemple, le document que
+vous lisez est rédigé dans le fichier `example.md`, situé dans le dossier
+`/example/example.md` du projet [*bunige-pagedjs-template*][1]. Ce fichier
+« source » est converti par `pandoc` au format HTML. Puis, ce fichier est à son
+tour converti en PDF au moyen de `pagedjs`.
+
+Il est parfaitement possible de convertir directement le fichier markdown en
+PDF au moyen de `pandoc`. Mais cela suppose avoir une distribution LaTeX
+installée. De plus, pour obtenir un document correspondant à la charte de
+l'UNIGE, cela demande d'être en mesure de modifier les modèles LaTeX utilisé
+par `pandoc`. La section suivante tente d'expliquer en quoi `Paged.js` facilite
+cette mise en forme.
+
+### Paged.js
+
+> Paged.js is a free and open source JavaScript library that paginates content
+> in the browser to create PDF output from any HTML content. This means you can
+> design works for print (eg. books) using HTML and CSS! [@paged.jsPagedJs]
+
+Concrètement, cela permet d'afficher un document HTML dans le navigateur, mais
+découpé en page comme le serait un document imprimé, par exemple un livre.
+
+![Pagination d'un document dans le navigateur à l'aide de Paged.js](./static/pagedjs-in-browser.png)
+
+Comme il s'agit d'un simple document HTML, il peut être mis en forme au moyen
+d'une feuille de style CSS, comme pour n'importe quelle page web. Selon ses
+compétences, on peut préférer mettre en forme un PDF de cette manière,
+notamment grâce à l'inspecteur du navigateur, permettant de tester directement
+des modifications.
+
+Pour obtenir un document proche des modèles utilisés par la bibliothèque pour
+ses documents de formation, les règles ont été placées dans le fichier
+`style.css` à la racine du projet.
+
+Écrire le fichier HTML directement permet une grande souplesse. Mais la
+rédaction d'un texte au format HTML n'est pas spécialement pratique. Pour cela,
+le format markdown semble préférable. Il suffit de comparer les extraits
+suivants, d'abord en markdown, puis en HTML :
+
+```markdown
+### Paged.js
+
+> Paged.js is a free and open source JavaScript library that paginates
+> content in the browser to create PDF output from any HTML content.
+> This means you can design works for print (eg. books) using HTML and
+> CSS! [@paged.jsPagedJs]
+
+Concrètement, cela permet d'afficher un document HTML dans le
+navigateur, mais découpé en page comme le serait un document
+imprimé, par exemple un livre.
+
+![Document paginé dans le navigateur](./static/pagedjs-in-browser.png)
+```
+
+```html
+<h3 id="paged.js">Paged.js</h3>
+<blockquote>
+<p>Paged.js is a free and open source JavaScript library that paginates
+content in the browser to create PDF output from any HTML content. This
+means you can design works for print (eg. books) using HTML and CSS!
+<span class="citation" data-cites="paged.jsPagedJs">
+(<a href="#ref-paged.jsPagedJs"
+    role="doc-biblioref">Paged.js [sans date]</a>)
+</span></p>
+</blockquote>
+<p>Concrètement, cela permet d’afficher un document HTML dans le
+navigateur, mais découpé en page comme le serait un document imprimé,
+par exemple un livre.</p>
+<figure>
+  <img src="./static/pagedjs-in-browser.png"
+  alt="Pagination d’un document dans le navigateur à l’aide de Paged.js" />
+  <figcaption aria-hidden="true">
+    Document paginé dans le navigateur
+  </figcaption>
+</figure>
+```
+
+## Police
+
+Pour que la police *TheSans* puisse s'appliquer correctement, elle doit être
+installée sur votre système d'exploitation. Malheureusement, elle n'est pas
+publiée avec une licence libre, ce qui en réduit l'usage. Les polices de
+remplacement sont dans l'ordre *Open Sans*, *Arial*, *Helvetica*, ou la police
+*sans-serif* par défaut de votre système ou de votre navigateur.
+
+La police peut être facilement configurable au moyen du sélecteur `body` dans
+le fichier `style.css` (règle déjà existante, dans la section *Définitions
+globales*).
+
+## Titres
+
+Il y a une particularité avec les titres, qui découlent de l'usage de
+`pandoc`. La première et qu'il est possible de définir l'attribut `id=` des
+titres avec la syntaxe suivante :
+
+```markdown
+## Titre {#identifiant}
+```
+
+Le *template* en fait usage pour obtenir l'identifiant `first-section` pour le
+premier titre du contenu, celui qui vient immédiatement après les [objectifs].
+Ainsi, un sélecteur unique est disponible pour appliquer un saut de page à ce
+titre, quel que soit son texte. Une logique similaire est appliquée au titre de
+la bibliographie (`bibliography`).
+
+## Citation
+
+> Tout d’abord un bon éditeur est un éditeur avec coloration syntaxique. Avec
+> cela, les éléments importants de la syntaxe Markdown, ainsi que les titres,
+> les mots en italique, etc., apparaissent en évidence. Ensuite, un bon éditeur
+> de texte est presque entièrement configurable : il vous sera très bénéfique
+> de configurer selon vos goûts le thème de la coloration syntaxique et de
+> l’interface, ainsi que la police. Cela vous assurera surtout un confort
+> d’écriture. [@masuttiRedigerManipulerDocuments2019]
+
+## Tableaux
+
+Voici un exemple de table avec une légende et une numérotation automatique des
+tableaux, comme c'est le cas pour les images (figures).
+
+| ID  | Nom     | Prénom | Adresse          |
+|:---:| ------- | ------ | ---------------- |
+| 1   | Dupont  | Jean   | Ch. de la Lune 1 |
+| 2   | Dupond  | Pierre | Ch. de la Lune 2 |
+| 3   | Schmidt | Mark   | Mondweg 3        |
+
+Table: Exemple de tableau.
+
+L'exemple suivant est directement copié-collé depuis la [documentation
+officielle][2] de `pandoc`. Il montre que `pandoc` permet des extensions de la
+syntaxe markdown.
+
+-------------------------------------------------------------
+ Centered   Default           Right Left
+  Header    Aligned         Aligned Aligned
+----------- ------- --------------- -------------------------
+   First    row                12.0 Example of a row that
+                                    spans multiple lines.
+
+  Second    row                 5.0 Here's another one. Note
+                                    the blank line between
+                                    rows.
+-------------------------------------------------------------
+
+Table: Here's the caption. It, too, may span
+multiple lines.
+
+
+## Bibliographie {#bibliography}
+
+<!-- références -->
+
+[1]: https://git.milhit.ch/igor/bunige-pagedjs-template
+[2]: https://pandoc.org/MANUAL#extension-multiline_tables
--- a/example/references.bib
+++ b/example/references.bib
@ -0,0 +1,387 @@
+@article{bunchIndirectReferenceIntervals2022,
+  title = {Indirect Reference Intervals Using an {{R}} Pipeline.},
+  author = {Bunch, Dustin R.},
+  date = {2022-04},
+  journaltitle = {Journal of mass spectrometry and advances in the clinical lab},
+  shortjournal = {J Mass Spectrom Adv Clin Lab},
+  volume = {24},
+  eprint = {35252947},
+  eprinttype = {pmid},
+  pages = {22--30},
+  location = {Netherlands},
+  issn = {2667-145X 2667-1468},
+  doi = {10.1016/j.jmsacl.2022.02.004},
+  abstract = {BACKGROUND: Indirect reference intervals require robust statistical approaches to separate the pathological and healthy values. This can be achieved with a data  pipeline created in R, a freely available statistical programming language.  METHODS: A data pipeline was created to ingest, partition, normalize, remove  outliers, and identify reference intervals for testosterone (Testo; n ~=~7,207)  and aspartate aminotransferase (AST; n ~=~5,882) using data sets from NHANES.  RESULTS: The estimates for AST and Testo determined by this pipeline approximated  current RIs. Care should be taken when using this pipeline as there are  limitations that depend on the pathology of the analyte and the data set being  used for RI estimation. CONCLUSIONS: R can be used to create a robust statistical  reference interval pipeline.},
+  langid = {english},
+  pmcid = {PMC8889237},
+  keywords = {ANOVA Analysis of variance,AST aspartate aminotransferase,CLSI Clinical Laboratory Standards Institute,cmu,EHR electronic health record,IFCC International Federation of Clinical Chemistry and Laboratory Medicine,LC-MS/MS Liquid chromatography tandem mass spectrometry,LIS Laboratory informatics system,markdown,Mixtools,non lu,pubmed,R markdown,R markdown tutorial,Reference interval,RI reference interval,SDI Standard deviation index,SDR Standard deviation ratio,Testo Testosterone,TukeyHSD Tukey multiple pairwise-comparisons,z5 Critical z-score},
+  file = {/home/igor/Zotero/storage/YYP9JQTY/Bunch_2022_Indirect reference intervals using an R pipeline.pdf}
+}
+
+@article{chapmanExpectedPosterioriScoring2022,
+  title = {Expected a Posteriori Scoring in {{PROMIS}}(®).},
+  author = {Chapman, Robert},
+  date = {2022-06-03},
+  journaltitle = {Journal of patient-reported outcomes},
+  shortjournal = {J Patient Rep Outcomes},
+  volume = {6},
+  number = {1},
+  eprint = {35657454},
+  eprinttype = {pmid},
+  pages = {59},
+  location = {Germany},
+  issn = {2509-8020},
+  doi = {10.1186/s41687-022-00464-9},
+  abstract = {BACKGROUND: The Patient-Reported Outcome Measurement Information System(®) (PROMIS(®)) was developed to reliably measure health-related quality of life  using the patient's voice. To achieve these aims, PROMIS utilized Item Response  Theory methods in its development, validation and implementation. PROMIS measures  are typically scored using a specific method to calculate scores, called Expected  A Posteriori estimation. BODY: Expected A Posteriori scoring methods are  flexible, produce accurate scores and can be efficiently calculated by  statistical software. This work seeks to make Expected A Posteriori scoring  methods transparent and accessible to a larger audience through description,  graphical demonstration and examples. Further applications and practical  considerations of Expected A Posteriori scoring are presented and discussed. All  materials used in this paper are made available through the R Markdown  reproducibility framework and are intended to be reviewed and reused. Commented  statistical code for the calculation of Expected A Posteriori scores is included.  CONCLUSION: This work seeks to provide the reader with a summary and  visualization of the operation of Expected A Posteriori scoring, as implemented  in PROMIS. As PROMIS is increasingly adopted and implemented, this work will  provide a basis for making psychometric methods more accessible to the PROMIS  user base.},
+  langid = {english},
+  pmcid = {PMC9166925},
+  keywords = {cmu,markdown,non lu,pubmed,R markdown},
+  file = {/home/igor/Zotero/storage/7R2KLGBS/Chapman_2022_Expected a posteriori scoring in PROMIS(®).pdf}
+}
+
+@online{commonmarkCommonMark,
+  title = {{{CommonMark}}},
+  author = {CommonMark},
+  url = {https://commonmark.org/},
+  urldate = {2023-04-25},
+  langid = {english},
+  organization = {CommonMark},
+  keywords = {cmu,non lu},
+  file = {/home/igor/Zotero/storage/ESNTHT9H/commonmark.org.html}
+}
+
+@article{considineToolEncourageMinimum2019,
+  title = {A {{Tool}} to {{Encourage Minimum Reporting Guideline Uptake}} for {{Data Analysis}} in {{Metabolomics}}.},
+  author = {Considine, Elizabeth C. and Salek, Reza M.},
+  date = {2019-03-05},
+  journaltitle = {Metabolites},
+  shortjournal = {Metabolites},
+  volume = {9},
+  number = {3},
+  eprint = {30841575},
+  eprinttype = {pmid},
+  location = {Switzerland},
+  issn = {2218-1989},
+  doi = {10.3390/metabo9030043},
+  abstract = {Despite the proposal of minimum reporting guidelines for metabolomics over a decade ago, reporting on the data analysis step in metabolomics studies has been  shown to be unclear and incomplete. Major omissions and a lack of logical flow  render the data analysis' sections in metabolomics studies impossible to follow,  and therefore replicate or even imitate. Here, we propose possible reasons why  the original reporting guidelines have had poor adherence and present an approach  to improve their uptake. We present in this paper an R markdown reporting  template file that guides the production of text and generates workflow diagrams  based on user input. This R Markdown template contains, as an example in this  instance, a set of minimum information requirements specifically for the data  pre-treatment and data analysis section of biomarker discovery metabolomics  studies, (gleaned directly from the original proposed guidelines by Goodacre at  al). These minimum requirements are presented in the format of a questionnaire  checklist in an R markdown template file. The R Markdown reporting template  proposed here can be presented as a starting point to encourage the data analysis  section of a metabolomics manuscript to have a more logical presentation and to  contain enough information to be understandable and reusable. The idea is that  these guidelines would be open to user feedback, modification and updating by the  metabolomics community via GitHub.},
+  langid = {english},
+  pmcid = {PMC6468746},
+  keywords = {cmu,data analysis,markdown,minimum guidelines,non lu,pubmed,R markdown,reporting,reproducibility},
+  file = {/home/igor/Zotero/storage/RSRUDDYS/Considine_Salek_2019_A Tool to Encourage Minimum Reporting Guideline Uptake for Data Analysis in.pdf}
+}
+
+@article{daasDynamicPublicationMedia2022,
+  title = {Dynamic Publication Media with the {{COPASI R Connector}} ({{CoRC}}).},
+  author = {Daas, Johanna C. J. and Förster, Jonas D. and Pahle, Jürgen},
+  date = {2022-06},
+  journaltitle = {Mathematical biosciences},
+  shortjournal = {Math Biosci},
+  volume = {348},
+  eprint = {35452633},
+  eprinttype = {pmid},
+  pages = {108822},
+  location = {United States},
+  issn = {1879-3134 0025-5564},
+  doi = {10.1016/j.mbs.2022.108822},
+  abstract = {In this article we show how dynamic publication media and the COPASI R Connector (CoRC) can be combined in a natural and synergistic way to communicate  (biochemical) models. Dynamic publication media are becoming a popular tool for  authors to effectively compose and publish their work. They are built from  templates and the final documents are created dynamically. In addition, they can  also be interactive. Working with dynamic publication media is made easy with the  programming environment R via its integration with tools such as R Markdown,  Jupyter and Shiny. Additionally, the COmplex PAthway SImulator COPASI  (http://www.copasi.org), a widely used biochemical modelling toolkit, is  available in R through the use of the COPASI R Connector (CoRC,  https://jpahle.github.io/CoRC). Models are a common tool in the mathematical  biosciences, in particular kinetic models of biochemical networks in  (computational) systems biology. We focus on three application areas of dynamic  publication media and CoRC: Documentation (reproducible workflows), Teaching  (creating self-paced lessons) and Science Communication (immersive and engaging  presentation). To illustrate these, we created six dynamic document examples in  the form of R Markdown and Jupyter notebooks, hosted on the platforms GitHub,  shinyapps.io, Google Colaboratory. Having code and output in one place, creating  documents in template-form and the option of interactivity make the combination  of dynamic documents and CoRC a versatile tool. All our example documents are  freely available at https://jpahle.github.io/DynamiCoRC under the Creative  Commons BY 4.0 licence.},
+  langid = {english},
+  keywords = {*Software,*Systems Biology,cmu,COPASI,CoRC,Dynamic publication media,Jupyter,Kinetics,markdown,non lu,pubmed,R markdown,Systems biology},
+  file = {/home/igor/Zotero/storage/WJ5FCFZY/Daas et al_2022_Dynamic publication media with the COPASI R Connector (CoRC).pdf}
+}
+
+@unpublished{deletrazModeTexteMarkdown2022,
+  type = {Atelier},
+  title = {En mode texte\,: Markdown, Stylo, Pandoc, Notebook…},
+  author = {Deletraz, Gaëlle and Rabaud, Julien},
+  date = {2022},
+  url = {https://markdown-somate2022.netlify.app},
+  urldate = {2023-04-17},
+  eventtitle = {So-Mate 2022},
+  langid = {fre},
+  venue = {Pau},
+  keywords = {cmu,markdown,non lu,pandoc,Publication scientifique}
+}
+
+@online{eyssetteUtiliserMarkdownPour2023,
+  type = {Mastodon post},
+  title = {Utiliser le Markdown pour tout faire.Le diaporama (fait en markdown bien sûr !) qui m'a servi de support lors de mon atelier pour la Journée…},
+  author = {Eyssette, Cédric (@eyssette@scholar.social)},
+  date = {2023-04-07},
+  url = {https://scholar.social/@eyssette/110158455766516456},
+  urldate = {2023-04-17},
+  abstract = {Utiliser le Markdown pour tout faire.Le diaporama (fait en markdown bien sûr !) qui m'a servi de support lors de mon atelier pour la Journée du Libre Éducatif 2023.https://eyssette.forge.aeif.fr/marp-slides/slides/2022-2023/utiliser-le-markdown-pour-tout-faire\#Markdown\#JDLE\#JDLE2023\#TeamEduc\#MastoProf},
+  langid = {french},
+  organization = {Mastodon},
+  keywords = {cmu,fediverse,markdown,mastodon,non lu},
+  file = {/home/igor/Zotero/storage/7FYFNED6/110158455766516456.html}
+}
+
+@unpublished{eyssetteUtiliserMarkdownPour2023a,
+  title = {Utiliser le markdown pour tout faire},
+  author = {Eyssette, Cédric},
+  date = {2023},
+  url = {https://eyssette.forge.aeif.fr/marp-slides/slides/2022-2023/utiliser-le-markdown-pour-tout-faire},
+  urldate = {2023-04-17},
+  langid = {fre},
+  keywords = {cmu,non lu},
+  file = {/home/igor/Zotero/storage/I7CTE3X5/utiliser-le-markdown-pour-tout-faire.html}
+}
+
+@online{fressinaudGuideMarkdown2022,
+  type = {Site d'une application web},
+  title = {Guide Markdown},
+  author = {Fressinaud, Marien},
+  date = {2022-07-11},
+  url = {https://flus.fr/carnet/markdown.html},
+  urldate = {2023-04-17},
+  abstract = {Un guide simple pour apprendre Markdown.},
+  langid = {fre},
+  organization = {flus},
+  keywords = {cmu,documentation,markdown,non lu},
+  file = {/home/igor/Zotero/storage/96VGWVYV/markdown.html}
+}
+
+@article{graysonMarkdownDynamicInterface2022,
+  title = {R {{Markdown}} as a Dynamic Interface for Teaching: {{Modules}} from Math and Biology Classrooms.},
+  author = {Grayson, Kristine L. and Hilliker, Angela K. and Wares, Joanna R.},
+  date = {2022-07},
+  journaltitle = {Mathematical biosciences},
+  shortjournal = {Math Biosci},
+  volume = {349},
+  eprint = {35623397},
+  eprinttype = {pmid},
+  pages = {108844},
+  location = {United States},
+  issn = {1879-3134 0025-5564},
+  doi = {10.1016/j.mbs.2022.108844},
+  abstract = {Advancing technologies, including interactive tools, are changing classroom pedagogy across academia. Here, we discuss the R Markdown interface, which allows  for the creation of partial or complete interactive classroom modules for courses  using the R programming language. R Markdown files mix sections of R code with  formatted text, including LaTeX, which are rendered together to form complete  reports and documents. These features allow instructors to create classroom  modules that guide students through concepts, while providing areas for coding  and text response by students. Students can also learn to create their own  reports for more independent assignments. After presenting the features and uses  of R Markdown to enhance teaching and learning, we present examples of materials  from two courses. In a Computational Modeling course for math students, we used R  Markdown to guide students through exploring mathematical models to understand  the principle of herd immunity. In a Data Visualization and Communication course  for biology students, we used R Markdown for teaching the fundamentals of R  programming and graphing, and for students to learn to create reproducible data  investigations. Through these examples, we demonstrate the benefits of R Markdown  as a dynamic teaching and learning tool.},
+  langid = {english},
+  pmcid = {PMC9487201},
+  keywords = {*Learning,*Students,Biology/education,cmu,Data visualization,Herd immunity,Humans,markdown,non lu,Pedagogy,pubmed,R markdown,Teaching programming},
+  file = {/home/igor/Zotero/storage/JQGHBHB5/Grayson et al_2022_R Markdown as a dynamic interface for teaching.pdf}
+}
+
+@online{gruberMarkdown2004,
+  type = {Site personnel},
+  title = {Markdown},
+  author = {Gruber, John},
+  date = {2004-12-17},
+  url = {https://daringfireball.net/projects/markdown/},
+  urldate = {2023-04-17},
+  langid = {english},
+  organization = {Daring Fireball},
+  keywords = {cmu,documentation,markdown,non lu},
+  file = {/home/igor/Zotero/storage/J7WP5B3D/markdown.html}
+}
+
+@article{hershbergJBrowseRInterfaceJBrowse2021,
+  title = {{{JBrowseR}}: An {{R}} Interface to the {{JBrowse}} 2 Genome Browser.},
+  author = {Hershberg, Elliot A. and Stevens, Garrett and Diesh, Colin and Xie, Peter and De Jesus Martinez, Teresa and Buels, Robert and Stein, Lincoln and Holmes, Ian},
+  date = {2021-11-05},
+  journaltitle = {Bioinformatics (Oxford, England)},
+  shortjournal = {Bioinformatics},
+  volume = {37},
+  number = {21},
+  eprint = {34196689},
+  eprinttype = {pmid},
+  pages = {3914--3915},
+  location = {England},
+  issn = {1367-4811 1367-4803},
+  doi = {10.1093/bioinformatics/btab459},
+  abstract = {MOTIVATION: Genome browsers are an essential tool in genome analysis. Modern genome browsers enable complex and interactive visualization of a wide variety of  genomic data modalities. While such browsers are very powerful, they can be  challenging to configure and program for bioinformaticians lacking expertise in  web development. RESULTS: We have developed an R package that provides an  interface to the JBrowse 2 genome browser. The package can be used to configure  and customize the browser entirely with R code. The browser can be deployed from  the R console, or embedded in Shiny applications or R Markdown documents.  AVAILABILITY AND IMPLEMENTATION: JBrowseR is available for download from CRAN,  and the source code is openly available from the Github repository at  https://github.com/GMOD/JBrowseR/.},
+  langid = {english},
+  pmcid = {PMC8570803},
+  keywords = {*Genome,*Genomics,cmu,markdown,non lu,pubmed,R markdown,Software},
+  file = {/home/igor/Zotero/storage/LYEIF748/Hershberg et al_2021_JBrowseR.pdf}
+}
+
+@article{jaglaSCHNAPPsSingleCell2021,
+  title = {{{SCHNAPPs}} - {{Single Cell sHiNy APPlication}}(s).},
+  author = {Jagla, Bernd and Libri, Valentina and Chica, Claudia and Rouilly, Vincent and Mella, Sebastien and Puceat, Michel and Hasan, Milena},
+  date = {2021-12},
+  journaltitle = {Journal of immunological methods},
+  shortjournal = {J Immunol Methods},
+  volume = {499},
+  eprint = {34742775},
+  eprinttype = {pmid},
+  pages = {113176},
+  location = {Netherlands},
+  issn = {1872-7905 0022-1759},
+  doi = {10.1016/j.jim.2021.113176},
+  abstract = {Single-cell RNA-sequencing (scRNAseq) experiments are becoming a standard tool for bench-scientists to explore the cellular diversity present in all tissues.  Data produced by scRNAseq is technically complex and requires analytical  workflows that are an active field of bioinformatics research, whereas a wealth  of biological background knowledge is needed to guide the investigation. Thus,  there is an increasing need to develop applications geared towards  bench-scientists to help them abstract the technical challenges of the analysis  so that they can focus on the science at play. It is also expected that such  applications should support closer collaboration between bioinformaticians and  bench-scientists by providing reproducible science tools. We present SCHNAPPs, a  Graphical User Interface (GUI), designed to enable bench-scientists to  autonomously explore and interpret scRNAseq data and associated annotations. The  R/Shiny-based application allows following different steps of scRNAseq analysis  workflows from Seurat or Scran packages: performing quality control on cells and  genes, normalizing the expression matrix, integrating different samples,  dimension reduction, clustering, and differential gene expression analysis.  Visualization tools for exploring each step of the process include violin plots,  2D projections, Box-plots, alluvial plots, and histograms. An R-markdown report  can be generated that tracks modifications and selected visualizations. The  modular design of the tool allows it to easily integrate new visualizations and  analyses by bioinformaticians. We illustrate the main features of the tool by  applying it to the characterization of T cells in a scRNAseq and Cellular  Indexing of Transcriptomes and Epitopes by Sequencing (CITE-Seq) experiment of  two healthy individuals.},
+  langid = {english},
+  keywords = {*Sequence Analysis RNA,*Single-Cell Analysis,*Software,CITE-Seq,cmu,Humans,Leukocytes Mononuclear/*cytology/immunology,markdown,multi-omics data analysis,non lu,pubmed,R markdown,scRNA-seq,Shiny application},
+  file = {/home/igor/Zotero/storage/PEARJ76P/Jagla et al_2021_SCHNAPPs - Single Cell sHiNy APPlication(s).pdf}
+}
+
+@article{kariyawasamDashboardstyleInteractivePlots2021,
+  title = {Dashboard-Style Interactive Plots for {{RNA-seq}} Analysis Are {{R Markdown}} Ready with {{Glimma}} 2.0.},
+  author = {Kariyawasam, Hasaru and Su, Shian and Voogd, Oliver and Ritchie, Matthew E. and Law, Charity W.},
+  date = {2021-12},
+  journaltitle = {NAR genomics and bioinformatics},
+  shortjournal = {NAR Genom Bioinform},
+  volume = {3},
+  number = {4},
+  eprint = {34988439},
+  eprinttype = {pmid},
+  pages = {lqab116},
+  location = {England},
+  issn = {2631-9268},
+  doi = {10.1093/nargab/lqab116},
+  abstract = {Glimma 1.0 introduced intuitive, point-and-click interactive graphics for differential gene expression analysis. Here, we present a major update to Glimma  that brings improved interactivity and reproducibility using high-level  visualization frameworks for R and JavaScript. Glimma 2.0 plots are now readily  embeddable in R Markdown, thus allowing users to create reproducible reports  containing interactive graphics. The revamped multidimensional scaling plot  features dashboard-style controls allowing the user to dynamically change the  colour, shape and size of sample points according to different experimental  conditions. Interactivity was enhanced in the MA-style plot for comparing  differences to average expression, which now supports selecting multiple genes,  export options to PNG, SVG or CSV formats and includes a new volcano plot  function. Feature-rich and user-friendly, Glimma makes exploring data for gene  expression analysis more accessible and intuitive and is available on  Bioconductor and GitHub.},
+  langid = {english},
+  pmcid = {PMC8693569},
+  keywords = {cmu,markdown,non lu,pubmed,R markdown},
+  file = {/home/igor/Zotero/storage/ZQD2WXNN/Kariyawasam et al_2021_Dashboard-style interactive plots for RNA-seq analysis are R Markdown ready.pdf}
+}
+
+@online{masuttiRedigerManipulerDocuments2019,
+  title = {Rédiger et manipuler des documents avec Markdown},
+  author = {Masutti, Christophe},
+  date = {2019-05-08},
+  url = {https://golb.statium.link/post/20190528rediger-et-manipuler-des-documents-markdown/},
+  urldate = {2024-03-19},
+  langid = {fre},
+  organization = {Statium : blog},
+  keywords = {cmu,markdown,non lu,pandoc,publication numérique,Publication scientifique}
+}
+
+@article{ovadiaMarkdownLibrariansAcademics2014a,
+  title = {Markdown for {{Librarians}} and {{Academics}}},
+  author = {Ovadia, Steven},
+  date = {2014-04-03},
+  journaltitle = {Behavioral \& Social Sciences Librarian},
+  shortjournal = {Behavioral \& Social Sciences Librarian},
+  volume = {33},
+  number = {2},
+  pages = {120--124},
+  issn = {0163-9269, 1544-4546},
+  doi = {10.1080/01639269.2014.904696},
+  url = {http://www.tandfonline.com/doi/abs/10.1080/01639269.2014.904696},
+  urldate = {2023-05-02},
+  langid = {english},
+  keywords = {cmu,markdown,non lu,Publication scientifique},
+  file = {/home/igor/Zotero/storage/25MP4P3N/Ovadia_2014_Markdown for Librarians and Academics.pdf}
+}
+
+@online{paged.jsPagedJs,
+  title = {About {{Paged}}.Js?},
+  author = {Paged.js},
+  url = {https://pagedjs.org/about/},
+  urldate = {2024-03-08},
+  langid = {english},
+  organization = {Paged.js},
+  keywords = {édition numérique,non lu,publication numérique}
+}
+
+@online{pandocWritingThesisThinking2023,
+  type = {Mastodon post},
+  title = {Writing a \#thesis? {{Thinking}} about Doing It in \#{{Markdown}}? {{No}} Problem, {{Tom Pollard}} Has You Covered.{{https://github.com/tompollard/phd\_thesis\_ma…}}},
+  shorttitle = {Writing a \#thesis?},
+  author = {{pandoc}, (@pandoc@fosstodon.org)},
+  date = {2023-04-12},
+  url = {https://fosstodon.org/@pandoc/110184589069297715},
+  urldate = {2023-04-17},
+  abstract = {Writing a \#thesis? Thinking about doing it in \#Markdown? No problem, Tom Pollard has you covered.https://github.com/tompollard/phd\_thesis\_markdown},
+  langid = {english},
+  organization = {Mastodon},
+  keywords = {cmu,fediverse,markdown,mastodon,non lu,pandoc,Publication scientifique},
+  file = {/home/igor/Zotero/storage/T354LYSW/110184589069297715.html}
+}
+
+@article{perretFormatTexte2022,
+  title = {Format texte},
+  author = {Perret, Arthur},
+  date = {2022-12-11},
+  journaltitle = {Arthur Perret},
+  url = {https://www.arthurperret.fr/cours/format-texte.html},
+  urldate = {2023-04-18},
+  abstract = {Cette page explique ce qu’est le format texte et donne des arguments en faveur de son utilisation. Elle ouvre vers d’autres ressources pour explorer l’écosystème du format texte.},
+  langid = {fre},
+  keywords = {cmu,markdown,non lu,plain text},
+  note = {\begin{quotation}
+
+\par
+[C]’est un fichier qui ne contient des caractères. (Perret, 2022)
+\par
+\end{quotation}},
+  file = {/home/igor/Zotero/storage/3IM8K4DU/format-texte.html}
+}
+
+@article{perretMarkdown2022,
+  title = {Markdown},
+  author = {Perret, Arthur},
+  date = {2022-12-11},
+  journaltitle = {Arthur Perret},
+  publisher = {arthurperret.fr/},
+  url = {https://www.arthurperret.fr/cours/markdown.html},
+  urldate = {2023-04-17},
+  abstract = {Cette page explique ce qu’est Markdown, le plus populaire des langages de balisage léger, et renvoie vers un tutoriel interactif en français.},
+  langid = {french},
+  keywords = {cmu,documentation,markdown,non lu},
+  file = {/home/igor/Zotero/storage/HZNSDQ7S/markdown.html}
+}
+
+@online{perretMarkdownTraitementTexte2022,
+  title = {Markdown et traitement de texte~: une méthode pour collaborer},
+  shorttitle = {Markdown et traitement de texte},
+  author = {Perret, Arthur},
+  date = {2022-10-25},
+  url = {https://www.arthurperret.fr/blog/2022-10-25-markdown-traitement-de-texte-methode-pour-collaborer.html},
+  urldate = {2024-04-23},
+  langid = {fre},
+  organization = {arthurperret.fr},
+  keywords = {non lu},
+  file = {/home/igor/Zotero/storage/TQEHEIHA/2022-10-25-markdown-traitement-de-texte-methode-pour-collaborer.html}
+}
+
+@software{pollardTemplateWritingPhD2023,
+  title = {Template for Writing a {{PhD}} Thesis in {{Markdown}}},
+  author = {Pollard, Tom},
+  date = {2023-04-17T04:40:26Z},
+  origdate = {2015-02-10T10:32:25Z},
+  url = {https://github.com/tompollard/phd_thesis_markdown},
+  urldate = {2023-04-17},
+  abstract = {Template for writing a PhD thesis in Markdown},
+  keywords = {cmu,markdown,non lu,pandoc,Publication scientifique,thesis-template}
+}
+
+@article{schneiderFacilitatingOpenScience2022,
+  title = {Facilitating Open Science Practices for Research Syntheses: {{PreregRS}} Guides Preregistration.},
+  author = {Schneider, Jürgen and Backfisch, Iris and Lachner, Andreas},
+  date = {2022-03},
+  journaltitle = {Research synthesis methods},
+  shortjournal = {Res Synth Methods},
+  volume = {13},
+  number = {2},
+  eprint = {34921744},
+  eprinttype = {pmid},
+  pages = {284--289},
+  location = {England},
+  issn = {1759-2887 1759-2879},
+  doi = {10.1002/jrsm.1540},
+  abstract = {Researchers increasingly engage in adopting open science practices in the field of research syntheses, such as preregistration. Preregistration is a central open  science practice in empirical research to enhance transparency in the research  process and it gains steady adoption in the context of conducting research  synthesis. From an interdisciplinary perspective, frameworks and particularly  templates are lacking which support researchers preparing a preregistration. To  this end, we introduce preregRS, a template to guide researchers across  disciplines through the process of preregistering research syntheses. We utilized  an R Markdown template file to provide a framework that structures the process of  preparing a preregistration. Researchers can write up the preregistration using  the template file similar to filling out a form, with the template providing  additional hints and further information for the decisions along the framework.  We integrated the R Markdown template in an R package for easy installation and  use, but also provide a browser-based option for users granting low-barrier  access. PreregRS constitutes a first step to facilitate and support  preregistration with research syntheses for all disciplines. It further adds to  establishing open science practices in conducting research syntheses.},
+  langid = {english},
+  keywords = {*Surveys and Questionnaires,cmu,Empirical Research,markdown,non lu,open science,preregistration,pubmed,R markdown,R package}
+}
+
+@article{yuVeridicalDataScience2020,
+  title = {Veridical Data Science.},
+  author = {Yu, Bin and Kumbier, Karl},
+  date = {2020-02-25},
+  journaltitle = {Proceedings of the National Academy of Sciences of the United States of America},
+  shortjournal = {Proc Natl Acad Sci U S A},
+  volume = {117},
+  number = {8},
+  eprint = {32054788},
+  eprinttype = {pmid},
+  pages = {3920--3929},
+  location = {United States},
+  issn = {1091-6490 0027-8424},
+  doi = {10.1073/pnas.1901326117},
+  abstract = {Building and expanding on principles of statistics, machine learning, and scientific inquiry, we propose the predictability, computability, and stability  (PCS) framework for veridical data science. Our framework, composed of both a  workflow and documentation, aims to provide responsible, reliable, reproducible,  and transparent results across the data science life cycle. The PCS workflow uses  predictability as a reality check and considers the importance of computation in  data collection/storage and algorithm design. It augments predictability and  computability with an overarching stability principle. Stability expands on  statistical uncertainty considerations to assess how human judgment calls impact  data results through data and model/algorithm perturbations. As part of the PCS  workflow, we develop PCS inference procedures, namely PCS perturbation intervals  and PCS hypothesis testing, to investigate the stability of data results relative  to problem formulation, data cleaning, modeling decisions, and interpretations.  We illustrate PCS inference through neuroscience and genomics projects of our own  and others. Moreover, we demonstrate its favorable performance over existing  methods in terms of receiver operating characteristic (ROC) curves in  high-dimensional, sparse linear model simulations, including a wide range of  misspecified models. Finally, we propose PCS documentation based on R Markdown or  Jupyter Notebook, with publicly available, reproducible codes and narratives to  back up human choices made throughout an analysis. The PCS workflow and  documentation are demonstrated in a genomics case study available on Zenodo.},
+  langid = {english},
+  pmcid = {PMC7049126},
+  keywords = {cmu,computation,data science,markdown,non lu,prediction,pubmed,R markdown,stability},
+  file = {/home/igor/Zotero/storage/GWVCYDA6/Yu_Kumbier_2020_Veridical data science.pdf}
+}
--- a/example/static/markdown-logo.svg
+++ b/example/static/markdown-logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="208" height="128" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#000" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>
--- a/example/static/pagedjs-in-browser.png
+++ b/example/static/pagedjs-in-browser.png
--- a/example/static/pagedjs-logo.svg
+++ b/example/static/pagedjs-logo.svg
@ -0,0 +1,12 @@
+<svg width="278" height="60" viewBox="0 0 278 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 56.5V59.9H22.6L41.3 44.9C45.7 41.4 48.4 37.9 48.4 32.1V5.70001V0.5H0V56.5ZM5.2 5.89999H28.7C39.2 5.89999 43.9 12.3 43.9 21.5C43.9 37.5 34.1 41.3 18.5 38.8V54.5H5.2V5.89999V5.89999Z" fill="black"/>
+<path d="M134.1 37.7C134.1 39 133.6 40.4 132.5 40.4C131.4 40.4 130.9 39.3 130.9 35.8V28.7C130.9 21.4 129.4 15.2 118.8 15.2C112.3 15.2 105.4 17.4 105.4 23.6C105.4 28.3 112.3 29.7 115.3 26.2C114.3 24.9 113.6 23.2 113.6 21.7C113.6 18.8 115.8 18.2 118 18.2C120.4 18.2 121.9 19.6 121.9 26.8V28.1L117.8 29.2C109.9 31.4 104.9 34.1 104.9 38.3C104.9 42.2 107.1 44.3 112 44.3C116.6 44.3 120.7 41.9 123 36.6H123.5C124.4 41.6 125.9 44.3 130.3 44.3C133.4 44.3 136.9 42.8 136.4 37.6H134.1V37.7ZM116.3 39.5C114.6 39.5 113.7 38.6 113.7 37.4C113.7 34.2 116 32.7 121.9 30.9C122 34.9 119.4 39.5 116.3 39.5Z" fill="black"/>
+<path d="M89.8 15.3C86.2 15.3 80.2 16.5 79.2 24.4H78.3V15.3L65.9 18.2V20.6H71.9V49.6V51.6L66.5 52V54.4H71.9H83.3H86.7V52L80.5 51.5V49.7V40.6V40.3C81.8 42.2 84.5 44.5 89.2 44.5C94.3 44.5 101.5 40.1 101.5 30.3C101.5 21.1 96.4 15.3 89.8 15.3ZM87.4 40.5C84.6 40.5 82.1 39 80.9 34.8V25.9C81 24.6 82.4 20.5 85.9 20.5C90.3 20.5 92.9 25.6 92.9 31C92.8 35.7 90.9 40.5 87.4 40.5Z" fill="black"/>
+<path d="M242.4 18.9H248.2V50.9C248.2 54.3 243.9 51.3 243.1 47.8H242C240.7 51.3 241.8 54.7 245.1 54.7C248.3 54.7 252.5 53 252.5 45.8L252.6 15.2L242.4 16.6V18.9V18.9Z" fill="black"/>
+<path d="M236.4 36.8C234 36.8 232.7 38.1 232.7 40.5C232.7 42.9 234 44.2 236.4 44.2C238.8 44.2 240.1 42.9 240.1 40.5C240.1 38.1 238.7 36.8 236.4 36.8Z" fill="black"/>
+<path d="M160.8 40.4C155.9 39.3 148.5 39.3 144.9 38.8L146.1 36.4C147.5 36.8 149.2 37 151.1 37C159.7 37 164.4 32.1 164.4 25.7C164.4 21.3 161.4 17.7 156.6 16.1L156.8 15.5C158.7 15.9 160.7 16.2 162.2 16.2C164.5 16.2 166.2 15.4 166.2 12.8C166.2 11 164.9 8.70001 162.9 6.60001C159.6 10.2 156.7 13.9 152.2 15.3C152 15.2 151.8 15.2 151.6 15.2C143 15.2 138.6 20 138.6 26.5C138.6 30.5 140.4 33.9 144.3 35.7L138.8 40.3C139.2 41.1 140.5 43.2 145.3 44.7V45.4C140.9 46 138.3 47.3 138.3 49.1C138.3 52.9 145.3 54.8 150.6 54.8C159.7 54.8 167.2 52.5 167.5 46.9C167.5 43.3 165.9 41.5 160.8 40.4ZM150.8 18.2C154.1 18.2 155.6 20.6 155.6 25.6C155.6 31.3 154.5 34.1 151.6 34.1C148.2 34.1 146.8 31.2 146.8 25.7C146.9 20.4 148 18.2 150.8 18.2ZM155.9 50.7C149.7 50.7 145.4 49.2 145.4 47.5C145.4 46.9 146 46.2 147.2 45.3L148.1 45.5C157.5 47.3 162.9 46.8 162.9 48.5C163 49.9 160.4 50.7 155.9 50.7Z" fill="black"/>
+<path d="M264 24.5C261.7 23.1 260.7 21.9 260.7 20.5C260.7 18.9 261.8 17.2 264.7 17.2C269 17.2 272.8 20.8 275.3 26.1H276.4V17.7C273.4 16.1 270 15.3 266.9 15.3C261.6 15.3 257.1 17.7 257.1 22.6C257.1 26.5 260.2 29.3 263.3 31C269.1 34.2 274.3 35.4 274.3 38.8C274.3 41.1 272.1 42.4 269.6 42.4C264.4 42.4 260.7 39.7 258.7 32.2H257.6V41.6C260.3 43.4 264.1 44.4 267.7 44.4C273.1 44.4 277.9 42.2 277.9 36.7C278 30.2 270.4 28.4 264 24.5Z" fill="black"/>
+<path d="M250.7 4.79999C248.7 4.79999 247.8 5.90001 247.8 7.70001C247.8 9.60001 248.8 10.6 250.7 10.6C252.5 10.6 253.6 9.60001 253.6 7.70001C253.6 5.80001 252.5 4.79999 250.7 4.79999Z" fill="black"/>
+<path d="M191.1 32.1C191.2 32.5 191.2 32.8 191.2 33.2C191.2 37.1 188.4 39.3 184.4 39.3C180.5 39.3 177.7 36.5 176.7 30.8L193.9 26.5C193.7 18.8 189.2 15.2 181 15.2C174.8 15.2 168 19.7 168 29.6C168 37.1 172.9 44.2 181.9 44.2C189.9 44.2 194.2 38.9 194.2 33C194.2 32.5 194.1 32 194.1 31.5L191.1 32.1ZM176.4 26.3C176.4 21.1 178.6 18.3 181.7 18.3C184.6 18.3 185.5 21.5 185.5 23.9C185.5 25.4 183.6 25.7 180.4 26.8L176.4 28.1C176.4 27.4 176.4 26.8 176.4 26.3Z" fill="black"/>
+<path d="M212 7.70001L218.2 8.20001V18.8C216.7 16.7 214.2 15.2 209.8 15.2C204.7 15.2 197.5 19.6 197.5 29.4C197.5 38.5 202.6 44.3 209.2 44.3C212.8 44.3 218.8 43.1 219.8 35.2H220.8L222.7 43.5H226.7V3.79999L211.9 5.29999V7.70001H212ZM218.2 33.7C218.1 34.9 217.1 39.1 212.3 39.1C208.3 39.1 206.3 34.2 206.3 28.6C206.3 23.9 208.2 19.1 211.7 19.1C214.5 19.1 217 20.6 218.2 24.8V33.7Z" fill="black"/>
+</svg>
--- a/heg-iso-690.csl
+++ b/heg-iso-690.csl
@ -0,0 +1,562 @@
+<?xml version="1.0" encoding="utf-8"?>
+<style xmlns="http://purl.org/net/xbiblio/csl" class="in-text" version="1.0" demote-non-dropping-particle="never">
+  <info>
+    <title>Haute école de gestion de Genève - ISO 690</title>
+    <title-short>HEG Genève - ISO 690</title-short>
+    <id>http://www.zotero.org/styles/haute-ecole-de-gestion-de-geneve-iso-690</id>
+    <link href="http://www.zotero.org/styles/haute-ecole-de-gestion-de-geneve-iso-690" rel="self"/>
+    <link href="http://www.zotero.org/styles/iso690-author-date-en" rel="template"/>
+    <link href="https://www.hesge.ch/heg/campus/infotheque/citations-et-references-bibliographiques" rel="documentation"/>
+    <author>
+      <name>Melissa Paez</name>
+      <email>paez.melissa@gmail.com</email>
+    </author>
+    <author>
+      <name>Raphael Grolimund</name>
+      <email>grolimur@protonmail.ch</email>
+    </author>
+    <category citation-format="author-date"/>
+    <category field="generic-base"/>
+    <updated>2022-03-21T10:00:00+00:00</updated>
+    <rights license="http://creativecommons.org/licenses/by-sa/3.0/">This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 License</rights>
+  </info>
+  <locale xml:lang="fr-FR">
+    <terms>
+      <term name="no date">[sans date]</term>
+      <term name="in">in</term>
+      <term name="online">[en&#160;ligne]</term>
+      <term name="accessed">consulté&#160;le</term>
+      <term name="retrieved">disponible</term>
+      <term name="from">à l'adresse</term>
+      <term name="translator" form="short">trad.</term>
+      <term name="editor" form="short">éd.</term>
+    </terms>
+  </locale>
+  <locale xml:lang="en-US">
+    <terms>
+      <term name="online">Online</term>
+    </terms>
+  </locale>
+  <macro name="editor">
+    <names variable="editor">
+      <name and="text" name-as-sort-order="all" sort-separator=", " delimiter=", " delimiter-precedes-last="never">
+        <name-part name="family" text-case="uppercase"/>
+      </name>
+      <label prefix=" (" form="short" suffix=".)"/>
+    </names>
+  </macro>
+  <macro name="translator">
+    <names variable="translator">
+      <name and="text" name-as-sort-order="all" sort-separator=", " delimiter=", " delimiter-precedes-last="never">
+        <name-part name="family" text-case="uppercase"/>
+      </name>
+      <label prefix=" (" form="short" suffix=".)"/>
+    </names>
+  </macro>
+  <macro name="responsability">
+    <names variable="author">
+      <name and="text" name-as-sort-order="all" sort-separator=", " delimiter=", " delimiter-precedes-last="never">
+        <name-part name="family" text-case="uppercase"/>
+      </name>
+      <substitute>
+        <text macro="editor"/>
+        <text macro="translator"/>
+        <text macro="title"/>
+      </substitute>
+    </names>
+    <choose>
+      <if variable="author editor translator" match="any">
+        <text macro="year-date" prefix=", "/>
+      </if>
+    </choose>
+  </macro>
+  <macro name="author-citation">
+    <names variable="author">
+      <name form="short"/>
+      <substitute>
+        <names variable="editor"/>
+        <names variable="translator"/>
+        <text variable="title" font-style="italic"/>
+      </substitute>
+    </names>
+  </macro>
+  <macro name="container-author">
+    <names variable="container-author">
+      <name and="text" name-as-sort-order="all" sort-separator=", " delimiter=", " delimiter-precedes-last="never">
+        <name-part name="family" text-case="uppercase"/>
+      </name>
+    </names>
+  </macro>
+  <macro name="container-responsability">
+    <choose>
+      <if variable="container-author">
+        <text macro="container-author"/>
+      </if>
+      <else-if variable="editor">
+        <text macro="editor"/>
+      </else-if>
+      <else>
+        <text macro="translator"/>
+      </else>
+    </choose>
+  </macro>
+  <macro name="year-date">
+    <choose>
+      <if variable="issued">
+        <date variable="issued">
+          <date-part name="year" form="long"/>
+        </date>
+      </if>
+      <else>
+        <text term="no date"/>
+      </else>
+    </choose>
+  </macro>
+  <macro name="title">
+    <choose>
+      <if type="book thesis map motion_picture song manuscript" match="any">
+        <choose>
+          <if variable="author editor translator" match="any">
+            <text variable="title" font-style="italic" suffix="."/>
+          </if>
+          <else>
+            <text variable="title" font-style="italic" suffix=", "/>
+            <text macro="year-date" suffix=". "/>
+          </else>
+        </choose>
+      </if>
+      <else-if type="paper-conference speech chapter article-journal article-magazine article-newspaper entry entry-dictionary entry-encyclopedia post-weblog post webpage broadcast" match="any">
+        <choose>
+          <if variable="author editor translator" match="any">
+            <text variable="title" suffix=". "/>
+          </if>
+          <else>
+            <text variable="title" suffix=", "/>
+            <text macro="year-date" suffix=". "/>
+          </else>
+        </choose>
+        <choose>
+          <if type="chapter paper-conference" match="any">
+            <text term="in" text-case="capitalize-first" suffix=": "/>
+          </if>
+        </choose>
+        <choose>
+          <if variable="container-author editor translator" match="any">
+            <text macro="container-responsability"/>
+            <choose>
+              <if variable="container-title event" match="any">
+                <text value=", "/>
+              </if>
+            </choose>
+          </if>
+        </choose>
+        <choose>
+          <if variable="container-title">
+            <text variable="container-title" font-style="italic" suffix="."/>
+          </if>
+          <else>
+            <text variable="event" font-style="italic" suffix="."/>
+          </else>
+        </choose>
+      </else-if>
+      <else-if type="report">
+        <choose>
+          <if variable="author editor translator" match="any">
+            <text variable="title" font-style="italic"/>
+          </if>
+          <else>
+            <text variable="number" suffix=": "/>
+            <text variable="title" font-style="italic" suffix=", "/>
+            <text macro="year-date" suffix=". "/>
+          </else>
+        </choose>
+      </else-if>
+      <else-if type="patent">
+        <choose>
+          <if variable="author editor translator" match="any">
+            <text variable="title"/>
+          </if>
+          <else>
+            <text variable="title" suffix=", "/>
+            <text macro="year-date" suffix=". "/>
+          </else>
+        </choose>
+      </else-if>
+      <else>
+        <choose>
+          <if variable="author editor translator" match="any">
+            <text variable="title" font-style="italic" suffix=". "/>
+          </if>
+          <else>
+            <text variable="title" font-style="italic" suffix=", "/>
+            <text macro="year-date" suffix=". "/>
+          </else>
+        </choose>
+      </else>
+    </choose>
+    <choose>
+      <if variable="URL">
+        <text term="online" prefix=" "/>
+      </if>
+    </choose>
+  </macro>
+  <macro name="number">
+    <text variable="number"/>
+  </macro>
+  <macro name="medium">
+    <text variable="medium" prefix=" [" suffix="]"/>
+  </macro>
+  <macro name="genre">
+    <choose>
+      <if type="map">
+        <choose>
+          <if variable="genre">
+            <text variable="genre" prefix="[" suffix="]"/>
+          </if>
+          <else>
+            <text value="map" prefix="[" suffix="]"/>
+          </else>
+        </choose>
+      </if>
+    </choose>
+  </macro>
+  <macro name="date">
+    <choose>
+      <if variable="issued">
+        <date variable="issued">
+          <date-part name="day" suffix=" "/>
+          <date-part name="month" suffix=" "/>
+          <date-part name="year"/>
+        </date>
+      </if>
+    </choose>
+  </macro>
+  <macro name="edition">
+    <text variable="edition" form="long"/>
+  </macro>
+  <macro name="publisher-group">
+    <group delimiter=": ">
+      <text variable="publisher-place"/>
+      <text variable="publisher"/>
+    </group>
+  </macro>
+  <macro name="issue">
+    <group delimiter=", ">
+      <text variable="volume" prefix="Vol.&#160;"/>
+      <choose>
+        <if variable="volume">
+          <text variable="issue" prefix="no.&#160;"/>
+          <text variable="page" prefix="pp.&#160;"/>
+        </if>
+        <else-if variable="issue">
+          <text variable="issue" prefix="No.&#160;"/>
+          <text variable="page" prefix="pp.&#160;"/>
+        </else-if>
+        <else>
+          <text variable="page" prefix="pp.&#160;"/>
+        </else>
+      </choose>
+    </group>
+  </macro>
+  <macro name="accessed">
+    <choose>
+      <if variable="URL">
+        <group prefix=" [" suffix="]">
+          <text term="accessed" text-case="capitalize-first"/>
+          <date variable="accessed">
+            <date-part name="day" prefix="&#160;"/>
+            <date-part name="month" prefix="&#160;"/>
+            <date-part name="year" prefix="&#160;"/>
+          </date>
+        </group>
+      </if>
+    </choose>
+  </macro>
+  <macro name="collection">
+    <group delimiter=", ">
+      <text variable="collection-title"/>
+      <text variable="collection-number"/>
+    </group>
+  </macro>
+  <macro name="page">
+    <choose>
+      <if type="book thesis manuscript" match="any">
+        <text variable="number-of-pages" suffix="&#160;p"/>
+      </if>
+      <else-if type="chapter paper-conference article-newspaper" match="any">
+        <text variable="page" prefix="pp.&#160;"/>
+      </else-if>
+      <else-if type="report patent" match="any">
+        <text variable="page" suffix="&#160;p"/>
+      </else-if>
+    </choose>
+  </macro>
+  <macro name="isbn">
+    <text variable="ISBN" prefix="ISBN&#160;"/>
+  </macro>
+  <macro name="doi">
+    <text variable="DOI" prefix="DOI&#160;"/>
+  </macro>
+  <macro name="url">
+    <choose>
+      <if variable="DOI" match="none">
+        <choose>
+          <if variable="URL">
+            <group>
+              <text term="retrieved" suffix=" " text-case="capitalize-first"/>
+              <text term="from" suffix=": "/>
+              <text variable="URL"/>
+            </group>
+          </if>
+        </choose>
+      </if>
+    </choose>
+  </macro>
+  <macro name="archive">
+    <group delimiter=":&#160;">
+      <text variable="archive"/>
+      <text macro="archive_location"/>
+    </group>
+  </macro>
+  <macro name="archive_location">
+    <choose>
+      <if variable="archive_location">
+        <text variable="archive_location"/>
+      </if>
+      <else>
+        <text variable="call-number"/>
+      </else>
+    </choose>
+  </macro>
+  <citation et-al-min="4" et-al-use-first="1" disambiguate-add-year-suffix="true" disambiguate-add-names="true" disambiguate-add-givenname="true" collapse="year" year-suffix-delimiter=", " after-collapse-delimiter="; ">
+    <layout prefix="(" suffix=")" delimiter="; ">
+      <group delimiter=", ">
+        <group delimiter=" ">
+          <text macro="author-citation"/>
+          <text macro="year-date"/>
+        </group>
+        <group>
+          <label variable="locator" suffix=".&#160;" form="short" strip-periods="true"/>
+          <text variable="locator"/>
+        </group>
+      </group>
+    </layout>
+  </citation>
+  <bibliography>
+    <sort>
+      <key macro="responsability"/>
+      <key macro="year-date"/>
+    </sort>
+    <layout>
+      <choose>
+        <if type="book map" match="any">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text variable="version" prefix="version " suffix=". "/>
+          <!-- used for software until type="software" is implemented -->
+          <text macro="genre" suffix=". "/>
+          <text macro="edition" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="collection" suffix=". "/>
+          <text macro="isbn" suffix=". "/>
+          <text macro="url"/>
+        </if>
+        <else-if type="article-journal article-magazine" match="any">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="edition" suffix=". "/>
+          <text macro="date" suffix=". "/>
+          <text macro="issue" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="doi" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="article-newspaper">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="edition" suffix=". "/>
+          <text macro="publisher-group" suffix=", "/>
+          <text macro="date" suffix=". "/>
+          <text macro="page" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="chapter entry entry-dictionary entry-encyclopedia" match="any">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="edition" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="page" suffix=". "/>
+          <text macro="collection" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="isbn" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="speech">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="genre" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="date" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="page" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="paper-conference">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="genre" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="date" suffix=". "/>
+          <text macro="page" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="collection" suffix=". "/>
+          <text macro="isbn" suffix=". "/>
+          <text macro="doi" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="thesis">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="genre" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="post-weblog post webpage" match="any">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="date" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="broadcast motion_picture song" match="any">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="medium" suffix=". "/>
+          <text macro="publisher-group" suffix=", "/>
+          <text macro="date" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="collection" suffix=". "/>
+          <text macro="isbn" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="report">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="genre" suffix=". "/>
+          <text macro="edition" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="collection" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="manuscript">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="genre" suffix=". "/>
+          <text macro="edition" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="collection" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="patent">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="number" suffix=". "/>
+          <text macro="date" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="collection" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else-if type="software">
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text variable="version" prefix="version " suffix=". "/>
+          <text macro="date" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="url"/>
+        </else-if>
+        <else>
+          <text macro="responsability" suffix=". "/>
+          <choose>
+            <if variable="author editor translator" match="any">
+              <text macro="title" suffix=". "/>
+            </if>
+          </choose>
+          <text macro="medium" suffix=". "/>
+          <text macro="genre" suffix=". "/>
+          <text macro="date" suffix=". "/>
+          <text macro="edition" suffix=". "/>
+          <text macro="publisher-group" suffix=". "/>
+          <text macro="number" suffix=". "/>
+          <text macro="accessed" suffix=". "/>
+          <text macro="collection" suffix=". "/>
+          <text macro="page" suffix=". "/>
+          <text macro="isbn" suffix=". "/>
+          <text macro="url"/>
+        </else>
+      </choose>
+      <text variable="note"/>
+      <group display="right-inline">
+        <text macro="archive"/>
+      </group>
+    </layout>
+  </bibliography>
+</style>
--- a/interface.css
+++ b/interface.css
@ -0,0 +1,180 @@
+/* CSS for Paged.js interface – v0.4 */
+
+/* Change the look */
+:root {
+    --color-background: whitesmoke;
+    --color-pageSheet: #cfcfcf;
+    --color-pageBox: violet;
+    --color-paper: white;
+    --color-marginBox: transparent;
+    --pagedjs-crop-color: black;
+    --pagedjs-crop-shadow: white;
+    --pagedjs-crop-stroke: 1px;
+}
+
+/* To define how the book look on the screen: */
+@media screen, pagedjs-ignore {
+    body {
+        background-color: var(--color-background);
+    }
+
+    .pagedjs_pages {
+        display: flex;
+        width: calc(var(--pagedjs-width) * 2);
+        flex: 0;
+        flex-wrap: wrap;
+        margin: 0 auto;
+    }
+
+    .pagedjs_page {
+        background-color: var(--color-paper);
+        box-shadow: 0 0 0 1px var(--color-pageSheet);
+        margin: 0;
+        flex-shrink: 0;
+        flex-grow: 0;
+        margin-top: 10mm;
+    }
+
+    .pagedjs_first_page {
+        margin-left: var(--pagedjs-width);
+    }
+
+    .pagedjs_page:last-of-type {
+        margin-bottom: 10mm;
+    }
+
+    .pagedjs_pagebox{
+        box-shadow: 0 0 0 1px var(--color-pageBox);
+    }
+
+    .pagedjs_left_page{
+        z-index: 20;
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
+        border-color: transparent;
+    }
+    
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: 0;
+    } 
+
+    .pagedjs_right_page{
+        z-index: 10;
+        position: relative;
+        left: calc(var(--pagedjs-bleed-left)*-1);
+    }
+
+    /* show the margin-box */
+
+    .pagedjs_margin-top-left-corner-holder,
+    .pagedjs_margin-top,
+    .pagedjs_margin-top-left,
+    .pagedjs_margin-top-center,
+    .pagedjs_margin-top-right,
+    .pagedjs_margin-top-right-corner-holder,
+    .pagedjs_margin-bottom-left-corner-holder,
+    .pagedjs_margin-bottom,
+    .pagedjs_margin-bottom-left,
+    .pagedjs_margin-bottom-center,
+    .pagedjs_margin-bottom-right,
+    .pagedjs_margin-bottom-right-corner-holder,
+    .pagedjs_margin-right,
+    .pagedjs_margin-right-top,
+    .pagedjs_margin-right-middle,
+    .pagedjs_margin-right-bottom,
+    .pagedjs_margin-left,
+    .pagedjs_margin-left-top,
+    .pagedjs_margin-left-middle,
+    .pagedjs_margin-left-bottom {
+        box-shadow: 0 0 0 1px inset var(--color-marginBox);
+    }
+
+    /* uncomment this part for recto/verso book : ------------------------------------ */
+
+    /*
+    .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    } 
+
+    .pagedjs_left_page{
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
+        border-color: var(--pagedjs-crop-color);
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: var(--pagedjs-cross-size)!important;
+    } 
+
+    .pagedjs_right_page{
+        left: 0; 
+    } 
+    */
+    
+    
+
+    /*--------------------------------------------------------------------------------------*/
+
+
+
+    /* uncomment this par to see the baseline : -------------------------------------------*/
+
+    
+    /* .pagedjs_pagebox {
+        --pagedjs-baseline: 22px;
+        --pagedjs-baseline-position: 5px;
+        --pagedjs-baseline-color: cyan;
+        background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
+        background-size: 100% var(--pagedjs-baseline);
+        background-repeat: repeat-y;
+        background-position-y: var(--pagedjs-baseline-position);
+    }  */
+   
+
+    /*--------------------------------------------------------------------------------------*/
+}
+
+
+
+
+
+/* Marks (to delete when merge in paged.js) */
+
+.pagedjs_marks-crop{
+    z-index: 999999999999;
+  
+}
+
+.pagedjs_bleed-top .pagedjs_marks-crop, 
+.pagedjs_bleed-bottom .pagedjs_marks-crop{
+    box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}  
+
+.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
+    box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}  
+
+.pagedjs_bleed-left .pagedjs_marks-crop,
+.pagedjs_bleed-right .pagedjs_marks-crop{
+    box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
+}
+
+.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
+    box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
+}
--- a/static/bibliotheque-logo.svg
+++ b/static/bibliotheque-logo.svg
--- a/static/by-sa.svg
+++ b/static/by-sa.svg
@ -0,0 +1,199 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="120"
+   height="42"
+   id="svg2759"
+   sodipodi:version="0.32"
+   inkscape:version="0.45+devel"
+   version="1.0"
+   sodipodi:docname="by-sa.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs2761" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#8b8b8b"
+     borderopacity="1"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="179"
+     inkscape:cy="89.569904"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     width="120px"
+     height="42px"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="1198"
+     inkscape:window-height="624"
+     inkscape:window-x="488"
+     inkscape:window-y="401" />
+  <metadata
+     id="metadata2764">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       transform="matrix(0.9937807,0,0,0.9936694,-177.69409,-74.436409)"
+       id="g287"
+       inkscape:export-filename="/mnt/hgfs/Bov/Documents/Work/2007/cc/identity/srr buttons/big/by-sa.png"
+       inkscape:export-xdpi="300.23013"
+       inkscape:export-ydpi="300.23013">
+	<path
+   id="path3817_2_"
+   nodetypes="ccccccc"
+   d="M 182.23532,75.39014 L 296.29928,75.59326 C 297.89303,75.59326 299.31686,75.35644 299.31686,78.77344 L 299.17721,116.34033 L 179.3569,116.34033 L 179.3569,78.63379 C 179.3569,76.94922 179.51999,75.39014 182.23532,75.39014 z"
+   style="fill:#aab2ab" />
+
+	<g
+   id="g5908_2_"
+   transform="matrix(0.872921,0,0,0.872921,50.12536,143.2144)">
+		
+			<path
+   id="path5906_2_"
+   cx="296.35416"
+   ry="22.939548"
+   cy="264.3577"
+   type="arc"
+   rx="22.939548"
+   d="M 187.20944,-55.6792 C 187.21502,-46.99896 180.18158,-39.95825 171.50134,-39.95212 C 162.82113,-39.94708 155.77929,-46.97998 155.77426,-55.66016 C 155.77426,-55.66687 155.77426,-55.67249 155.77426,-55.6792 C 155.76922,-64.36054 162.80209,-71.40125 171.48233,-71.40631 C 180.16367,-71.41193 187.20441,-64.37842 187.20944,-55.69824 C 187.20944,-55.69263 187.20944,-55.68591 187.20944,-55.6792 z"
+   style="fill:#ffffff" />
+
+		<g
+   id="g5706_2_"
+   transform="translate(-289.6157,99.0653)">
+			<path
+   id="path5708_2_"
+   d="M 473.88455,-167.54724 C 477.36996,-164.06128 479.11294,-159.79333 479.11294,-154.74451 C 479.11294,-149.69513 477.40014,-145.47303 473.9746,-142.07715 C 470.33929,-138.50055 466.04281,-136.71283 461.08513,-136.71283 C 456.18736,-136.71283 451.96526,-138.48544 448.42003,-142.03238 C 444.87419,-145.57819 443.10158,-149.81537 443.10158,-154.74451 C 443.10158,-159.6731 444.87419,-163.94049 448.42003,-167.54724 C 451.87523,-171.03375 456.09728,-172.77618 461.08513,-172.77618 C 466.13342,-172.77618 470.39914,-171.03375 473.88455,-167.54724 z M 450.76657,-165.20239 C 447.81982,-162.22601 446.34701,-158.7395 446.34701,-154.74005 C 446.34701,-150.7417 447.80529,-147.28485 450.72125,-144.36938 C 453.63778,-141.45288 457.10974,-139.99462 461.1383,-139.99462 C 465.16683,-139.99462 468.66848,-141.46743 471.64486,-144.41363 C 474.47076,-147.14947 475.88427,-150.59069 475.88427,-154.74005 C 475.88427,-158.85809 474.44781,-162.35297 471.57659,-165.22479 C 468.70595,-168.09546 465.22671,-169.53131 461.1383,-169.53131 C 457.04993,-169.53131 453.59192,-168.08813 450.76657,-165.20239 z M 458.52106,-156.49927 C 458.07074,-157.4809 457.39673,-157.9715 456.49781,-157.9715 C 454.90867,-157.9715 454.11439,-156.90198 454.11439,-154.763 C 454.11439,-152.62341 454.90867,-151.55389 456.49781,-151.55389 C 457.54719,-151.55389 458.29676,-152.07519 458.74647,-153.11901 L 460.94923,-151.94598 C 459.8993,-150.0805 458.32417,-149.14697 456.22374,-149.14697 C 454.60384,-149.14697 453.30611,-149.64367 452.33168,-150.63653 C 451.35561,-151.62994 450.86894,-152.99926 450.86894,-154.7445 C 450.86894,-156.46008 451.37123,-157.82159 452.37642,-158.83013 C 453.38161,-159.83806 454.63347,-160.34264 456.13423,-160.34264 C 458.35435,-160.34264 459.94407,-159.46776 460.90504,-157.71978 L 458.52106,-156.49927 z M 468.8844,-156.49927 C 468.43353,-157.4809 467.77292,-157.9715 466.90201,-157.9715 C 465.28095,-157.9715 464.46988,-156.90198 464.46988,-154.763 C 464.46988,-152.62341 465.28095,-151.55389 466.90201,-151.55389 C 467.95304,-151.55389 468.68918,-152.07519 469.10925,-153.11901 L 471.36126,-151.94598 C 470.31301,-150.0805 468.74007,-149.14697 466.64358,-149.14697 C 465.02587,-149.14697 463.73095,-149.64367 462.75711,-150.63653 C 461.78494,-151.62994 461.29773,-152.99926 461.29773,-154.7445 C 461.29773,-156.46008 461.79221,-157.82159 462.78061,-158.83013 C 463.76843,-159.83806 465.02588,-160.34264 466.55408,-160.34264 C 468.77027,-160.34264 470.35776,-159.46776 471.3154,-157.71978 L 468.8844,-156.49927 z" />
+
+		</g>
+
+	</g>
+
+	<path
+   d="M 297.29639,74.91064 L 181.06688,74.91064 C 179.8203,74.91064 178.80614,75.92529 178.80614,77.17187 L 178.80614,116.66748 C 178.80614,116.94922 179.03466,117.17822 179.31639,117.17822 L 299.04639,117.17822 C 299.32813,117.17822 299.55713,116.94922 299.55713,116.66748 L 299.55713,77.17188 C 299.55713,75.92529 298.54297,74.91064 297.29639,74.91064 z M 181.06688,75.93213 L 297.29639,75.93213 C 297.97998,75.93213 298.53565,76.48828 298.53565,77.17188 C 298.53565,77.17188 298.53565,93.09131 298.53565,104.59034 L 215.4619,104.59034 C 212.41698,110.09571 206.55077,113.83399 199.81835,113.83399 C 193.083,113.83399 187.21825,110.09913 184.1748,104.59034 L 179.82666,104.59034 C 179.82666,93.09132 179.82666,77.17188 179.82666,77.17188 C 179.82664,76.48828 180.38329,75.93213 181.06688,75.93213 z"
+   id="path294" />
+
+	<g
+   enable-background="new    "
+   id="g296">
+		<path
+   d="M 265.60986,112.8833 C 265.68994,113.03906 265.79736,113.16504 265.93115,113.26172 C 266.06494,113.35791 266.22119,113.42969 266.40088,113.47608 C 266.58154,113.52296 266.76807,113.54639 266.96045,113.54639 C 267.09033,113.54639 267.22998,113.53565 267.3794,113.51368 C 267.52784,113.4922 267.66749,113.44972 267.79835,113.3877 C 267.92823,113.32569 268.03761,113.23975 268.12355,113.13086 C 268.21144,113.02197 268.25441,112.88379 268.25441,112.71533 C 268.25441,112.53515 268.19679,112.38916 268.08156,112.27685 C 267.9673,112.16455 267.81594,112.07177 267.62941,111.99658 C 267.44386,111.92236 267.23195,111.85693 266.9966,111.80078 C 266.76027,111.74463 266.52101,111.68262 266.27883,111.61377 C 266.02981,111.55176 265.78762,111.47559 265.55129,111.38525 C 265.31594,111.29541 265.10402,111.17822 264.9175,111.03515 C 264.73098,110.89208 264.58059,110.71337 264.46535,110.49853 C 264.35109,110.28369 264.29347,110.02392 264.29347,109.71923 C 264.29347,109.37646 264.36671,109.07958 264.51222,108.82763 C 264.6587,108.57568 264.85011,108.36572 265.08644,108.19726 C 265.32179,108.02929 265.58937,107.90478 265.8882,107.82372 C 266.18605,107.74315 266.48488,107.70263 266.78273,107.70263 C 267.13136,107.70263 267.46535,107.74169 267.78566,107.81982 C 268.105,107.89746 268.39015,108.02392 268.6382,108.19824 C 268.88722,108.37256 269.08449,108.59521 269.23097,108.86621 C 269.37648,109.13721 269.44972,109.46582 269.44972,109.85156 L 268.02784,109.85156 C 268.01514,109.65234 267.97315,109.4873 267.90284,109.35693 C 267.83155,109.22607 267.73682,109.12353 267.61964,109.04834 C 267.50148,108.97412 267.36671,108.9209 267.21534,108.89014 C 267.063,108.85889 266.89796,108.84326 266.71827,108.84326 C 266.60108,108.84326 266.48292,108.85596 266.36573,108.88037 C 266.24757,108.90576 266.14112,108.94922 266.04542,109.01123 C 265.94874,109.07373 265.86964,109.15137 265.80812,109.24463 C 265.7466,109.33838 265.71535,109.45654 265.71535,109.59961 C 265.71535,109.73047 265.73976,109.83643 265.78957,109.91699 C 265.83937,109.99804 265.93801,110.07275 266.08352,110.14111 C 266.22903,110.20947 266.43118,110.27832 266.68899,110.34668 C 266.9468,110.41504 267.28372,110.50244 267.70071,110.60791 C 267.82473,110.63281 267.99661,110.67822 268.21731,110.74365 C 268.43801,110.80908 268.65676,110.91308 268.87454,111.05615 C 269.09231,111.1997 269.27981,111.39111 269.43899,111.63037 C 269.59719,111.87012 269.67629,112.17676 269.67629,112.55029 C 269.67629,112.85547 269.61672,113.13867 269.49856,113.3999 C 269.3804,113.66162 269.20461,113.8872 268.97122,114.07666 C 268.73782,114.26709 268.44876,114.41455 268.10403,114.52051 C 267.75833,114.62647 267.35794,114.6792 266.90481,114.6792 C 266.53762,114.6792 266.18118,114.63379 265.83547,114.54346 C 265.49074,114.45313 265.18508,114.31104 264.92043,114.11768 C 264.65676,113.92432 264.4468,113.67774 264.29055,113.37891 C 264.13528,113.07959 264.06106,112.7251 264.06692,112.31397 L 265.4888,112.31397 C 265.48877,112.53809 265.52881,112.72803 265.60986,112.8833 z"
+   id="path298"
+   style="fill:#ffffff" />
+
+		<path
+   d="M 273.8667,107.8667 L 276.35986,114.53076 L 274.8374,114.53076 L 274.33349,113.04638 L 271.84033,113.04638 L 271.31787,114.53076 L 269.84326,114.53076 L 272.36377,107.8667 L 273.8667,107.8667 z M 273.95068,111.95264 L 273.11084,109.50928 L 273.09229,109.50928 L 272.22315,111.95264 L 273.95068,111.95264 z"
+   id="path300"
+   style="fill:#ffffff" />
+
+	</g>
+
+	<g
+   enable-background="new    "
+   id="g302">
+		<path
+   d="M 239.17821,107.8667 C 239.49559,107.8667 239.78563,107.89502 240.04735,107.95068 C 240.30907,108.00683 240.53368,108.09863 240.72118,108.22607 C 240.9077,108.35351 241.05321,108.52295 241.15575,108.73437 C 241.25829,108.94579 241.31005,109.20703 241.31005,109.51806 C 241.31005,109.854 241.23388,110.13329 241.08056,110.35742 C 240.92822,110.58154 240.70165,110.76465 240.40283,110.90771 C 240.81494,111.02587 241.12256,111.23291 241.32568,111.5288 C 241.5288,111.82469 241.63037,112.18114 241.63037,112.59814 C 241.63037,112.93408 241.56494,113.22509 241.43408,113.47119 C 241.30322,113.7168 241.12646,113.91748 240.90576,114.07324 C 240.68408,114.229 240.43115,114.34424 240.14795,114.41845 C 239.86377,114.49365 239.57275,114.53075 239.27295,114.53075 L 236.03662,114.53075 L 236.03662,107.86669 L 239.17821,107.86669 L 239.17821,107.8667 z M 238.99071,110.56201 C 239.25243,110.56201 239.46727,110.5 239.63622,110.37597 C 239.80419,110.25146 239.88817,110.05029 239.88817,109.77099 C 239.88817,109.61572 239.85985,109.48828 239.80419,109.38915 C 239.74755,109.28954 239.67333,109.21239 239.57958,109.15624 C 239.48583,109.10058 239.37841,109.06151 239.25731,109.04003 C 239.13524,109.01806 239.00926,109.00732 238.8784,109.00732 L 237.50535,109.00732 L 237.50535,110.56201 L 238.99071,110.56201 z M 239.07664,113.39014 C 239.22019,113.39014 239.35691,113.37647 239.48777,113.34815 C 239.61863,113.32032 239.73484,113.27344 239.83445,113.2085 C 239.93406,113.14307 240.01316,113.0542 240.07273,112.94239 C 240.1323,112.83058 240.1616,112.68751 240.1616,112.51319 C 240.1616,112.17139 240.06492,111.92725 239.87156,111.78126 C 239.6782,111.63527 239.42234,111.56202 239.10496,111.56202 L 237.50535,111.56202 L 237.50535,113.39014 L 239.07664,113.39014 z"
+   id="path304"
+   style="fill:#ffffff" />
+
+		<path
+   d="M 241.88914,107.8667 L 243.53269,107.8667 L 245.09324,110.49854 L 246.64402,107.8667 L 248.27781,107.8667 L 245.80418,111.97315 L 245.80418,114.53077 L 244.33543,114.53077 L 244.33543,111.93604 L 241.88914,107.8667 z"
+   id="path306"
+   style="fill:#ffffff" />
+
+	</g>
+
+	<g
+   id="g6316_1_"
+   transform="matrix(0.624995,0,0,0.624995,391.2294,176.9332)">
+		
+			<path
+   id="path6318_1_"
+   cx="475.97119"
+   ry="29.209877"
+   cy="252.08646"
+   type="arc"
+   rx="29.209877"
+   d="M -175.0083,-139.1153 C -175.00204,-129.7035 -182.62555,-122.06751 -192.03812,-122.06049 C -201.44913,-122.05341 -209.08512,-129.67774 -209.09293,-139.09028 C -209.09293,-139.09809 -209.09293,-139.10749 -209.09293,-139.1153 C -209.09919,-148.52784 -201.47413,-156.1623 -192.06311,-156.17011 C -182.65054,-156.17713 -175.01456,-148.55207 -175.0083,-139.14026 C -175.0083,-139.13092 -175.0083,-139.1239 -175.0083,-139.1153 z"
+   style="fill:#ffffff" />
+
+		<g
+   id="g6320_1_"
+   transform="translate(-23.9521,-89.72962)">
+			<path
+   id="path6322_1_"
+   d="M -168.2204,-68.05536 C -173.39234,-68.05536 -177.76892,-66.25067 -181.35175,-62.64203 C -185.02836,-58.90759 -186.86588,-54.48883 -186.86588,-49.38568 C -186.86588,-44.28253 -185.02836,-39.89416 -181.35175,-36.22308 C -177.67673,-32.55114 -173.29859,-30.71521 -168.2204,-30.71521 C -163.07974,-30.71521 -158.62503,-32.56677 -154.85312,-36.26996 C -151.30307,-39.78558 -149.52652,-44.15827 -149.52652,-49.38568 C -149.52652,-54.6123 -151.33432,-59.03265 -154.94843,-62.64203 C -158.5625,-66.25067 -162.98599,-68.05536 -168.2204,-68.05536 z M -168.17352,-64.69519 C -163.936,-64.69519 -160.33752,-63.20221 -157.37655,-60.21466 C -154.38748,-57.25836 -152.89214,-53.64899 -152.89214,-49.38568 C -152.89214,-45.09186 -154.35466,-41.52856 -157.28438,-38.69653 C -160.36876,-35.64727 -163.99849,-34.12304 -168.17351,-34.12304 C -172.34856,-34.12304 -175.94701,-35.63244 -178.96892,-38.64965 C -181.9908,-41.66918 -183.50176,-45.24657 -183.50176,-49.38567 C -183.50176,-53.52398 -181.97518,-57.13414 -178.92205,-60.21465 C -175.9939,-63.20221 -172.41107,-64.69519 -168.17352,-64.69519 z" />
+
+			<path
+   id="path6324_1_"
+   d="M -176.49548,-52.02087 C -175.75171,-56.71856 -172.44387,-59.22949 -168.30008,-59.22949 C -162.33911,-59.22949 -158.70783,-54.90448 -158.70783,-49.1372 C -158.70783,-43.50982 -162.57194,-39.13793 -168.39383,-39.13793 C -172.39856,-39.13793 -175.98297,-41.60277 -176.63611,-46.43877 L -171.93292,-46.43877 C -171.7923,-43.92778 -170.1626,-43.04418 -167.83447,-43.04418 C -165.1813,-43.04418 -163.4563,-45.50908 -163.4563,-49.27709 C -163.4563,-53.22942 -164.94693,-55.32244 -167.74228,-55.32244 C -169.79074,-55.32244 -171.55948,-54.57787 -171.93292,-52.02087 L -170.56418,-52.02789 L -174.26734,-48.32629 L -177.96894,-52.02789 L -176.49548,-52.02087 z" />
+
+		</g>
+
+	</g>
+
+	<g
+   id="g313">
+		<circle
+   cx="242.56226"
+   cy="90.224609"
+   r="10.8064"
+   id="circle315"
+   sodipodi:cx="242.56226"
+   sodipodi:cy="90.224609"
+   sodipodi:rx="10.8064"
+   sodipodi:ry="10.8064"
+   style="fill:#ffffff" />
+
+		<g
+   id="g317">
+			<path
+   d="M 245.68994,87.09766 C 245.68994,86.68116 245.35205,86.34424 244.93603,86.34424 L 240.16357,86.34424 C 239.74755,86.34424 239.40966,86.68115 239.40966,87.09766 L 239.40966,91.87061 L 240.74071,91.87061 L 240.74071,97.52295 L 244.3579,97.52295 L 244.3579,91.87061 L 245.68993,91.87061 L 245.68993,87.09766 L 245.68994,87.09766 z"
+   id="path319" />
+
+			<circle
+   cx="242.5498"
+   cy="84.083008"
+   r="1.63232"
+   id="circle321"
+   sodipodi:cx="242.5498"
+   sodipodi:cy="84.083008"
+   sodipodi:rx="1.63232"
+   sodipodi:ry="1.63232" />
+
+		</g>
+
+		<path
+   clip-rule="evenodd"
+   d="M 242.53467,78.31836 C 239.30322,78.31836 236.56641,79.4458 234.32715,81.70215 C 232.0293,84.03516 230.88086,86.79736 230.88086,89.98633 C 230.88086,93.1753 232.0293,95.91846 234.32715,98.21338 C 236.625,100.50781 239.36133,101.65527 242.53467,101.65527 C 245.74756,101.65527 248.53272,100.49853 250.88819,98.18359 C 253.10889,95.98681 254.21827,93.2539 254.21827,89.98632 C 254.21827,86.71874 253.08936,83.95751 250.83057,81.70214 C 248.57178,79.4458 245.80615,78.31836 242.53467,78.31836 z M 242.56396,80.41797 C 245.2124,80.41797 247.46142,81.35156 249.31103,83.21875 C 251.18115,85.06592 252.11572,87.32227 252.11572,89.98633 C 252.11572,92.66992 251.20068,94.89746 249.36963,96.66699 C 247.4419,98.57275 245.17334,99.52539 242.56397,99.52539 C 239.9546,99.52539 237.70557,98.58252 235.81739,96.6958 C 233.92774,94.80957 232.98389,92.57324 232.98389,89.98633 C 232.98389,87.3999 233.93799,85.14404 235.84619,83.21875 C 237.67676,81.35156 239.9165,80.41797 242.56396,80.41797 z"
+   id="path323"
+   style="fill-rule:evenodd" />
+
+	</g>
+
+</g>
+  </g>
+</svg>
--- a/style.css
+++ b/style.css
@ -0,0 +1,231 @@
+@media print {
+
+    /* ************************** 
+     *   Définition des pages   *
+     * ************************ */
+
+    @page {
+        size: A4;
+        margin: 25mm; 
+        bleed: 6mm;
+        /* Numérotation de page au centre en bas
+         * de la page. Le compteur est définit 
+         * dans le selecteur body. */
+        @bottom-center {
+            content: counter(page);
+        }
+    }
+    @page:left {
+        margin-left: 25mm;
+        margin-right: 15mm;
+    }
+    @page:right {
+        margin-left: 15mm;
+        margin-right: 25mm;
+    }
+    @page:first {
+        /* Insertion en haut à droite du logo de la
+         * bibliothèque de l'UNIGE. */
+        @top-right {
+                content: "";
+                background-image: url("./static/bibliotheque-logo.svg");
+                background-position: right;
+                background-repeat: no-repeat;
+                background-size: 25%;
+        }
+        /* Place le bloc de la licence en bas à gauche
+         * de la première page. Voir le sélecteur
+         * #licence plus bas. */
+        @bottom-left{
+            content: element(licenceBlock);
+            font-size: small; 
+        }
+        @bottom-center {
+            content: none;
+        }
+        /* Insert la date en bas à droite de la 
+         * première page. Voir le sélecteur .date */
+        @bottom-right {
+            content: string(date);
+            font-size: small;
+        }
+    }
+
+    /* ************************** 
+     *   Définitions globales   *
+     * ************************ */
+
+    body {
+        font-family: "TheSansOsF", "Open Sans", Arial, Helvetica, sans-serif;
+        /* Définit les trois variables de compteur nécessaires */
+        counter-reset: figureNumber toc tableNumber;
+    }
+    /* Définit que string(date) contient la date indiquée dans le frontmatter
+     * de la source markdown */
+    .date {
+        string-set: date content(text);
+        display: none; /* Pour ne pas afficher la date sous le titre. */
+    }
+    /* Définit que running(licenceBlock) contient le block licence.
+     * Le bloc licence est décrit dans le fichier markdown source, au-dessous
+     * de la section des objectifs. Le CSS permet de le placer correctement */
+    #licence {
+        position: running(licenceBlock);
+    }
+
+    /* ***************** 
+     *   Page de titre *
+     * *************** */
+
+    .logo {
+        display: inline-flex;
+        justify-content: center;
+        width: 60%;
+        margin: 2em auto 1em auto;
+    }
+    .logo img {
+        max-width: 50%;
+        padding: .5em;
+    }
+
+    #title-block-header {
+        /* Concerne le bloc titre sur la page de titre */
+        text-align: center;
+        margin: 4em 0;
+    }
+
+    .authors {
+        display: flex;
+        justify-content: center;
+    }
+    .author {
+        margin: 0;
+        padding: 0 1em;
+    }
+
+    /* Les 4 règles suivantes mettent en forme la table des matières :*
+     * Suppression des liste à puce, numérotation des chapitres et affichage du
+     * numéro de page. */
+    #TOC ul {
+        list-style: none;
+        counter-reset: toc;
+        padding-left: 1.5em;
+    }
+    #TOC li {
+        counter-increment: toc;
+    }
+    #TOC li::before {
+        content: counter(toc) ". ";
+    }
+    #TOC a::after {
+        content: target-counter(attr(href url), page);
+        position: absolute;
+        right: 0;
+    }
+
+    /* *************************** 
+     *   Structure du document   *
+     * ************************* */
+
+    /* Ajouter ou supprimer les ID de titre pour un saut de page.
+     * Les IDs #first-section et #bibliography peuvent être ajoutés
+     * dans la source markdown. */
+    #first-section,
+    #bibliography,
+    .footnotes {
+        break-before: page;
+    }
+
+    /* ************* 
+     *   Contenu   *
+     * *********** */
+ 
+    h2 {
+        color: #d80669;
+        text-decoration: underline;
+    }
+
+    pre {
+        background-color: #f2f1f1;
+        border: 2px solid #d80669;
+        border-radius: .5em;
+        padding: .5em 1em;
+        /* Évite que les blocs de code ne soient séparés sur 2 pages */
+        break-inside: avoid;
+    }
+    pre > code {
+        border-radius: none;
+        padding: none;
+    }
+    code {
+        font-family:'Courier New', Courier, monospace;
+        font-size: 90%;
+        background-color: #f2f1f1;
+        padding: 2px;
+        border-radius: 5px;
+    }
+
+    .footnotes::before {
+        content: "Notes";
+        color: #d80669;
+        font-size: 120%;
+        font-weight: bold;
+    }
+    .footnote-ref {
+        text-decoration: none;
+    }
+
+    figure {
+        display: flex;
+        flex-direction: column;
+        border: 2px solid #d80669;
+        border-radius: .5em;
+        padding: .5em;
+        /* Évite que les figures ne soient séparés sur 2 pages */
+        break-inside: avoid;
+    }
+    figure img {
+        max-width: 85%;
+        margin: 0 auto;
+    }
+    figcaption {
+        text-align: center;
+        font-size: 90%;
+        counter-increment: figureNumber;
+        padding-top: .5em;
+    }
+    figcaption::before {
+        content: "Figure " counter(figureNumber) " : ";
+    }
+
+    blockquote {
+        font-style: italic;
+    }
+    blockquote em {
+        font-style: normal;
+    }
+
+    div.csl-entry {
+        padding: .5em;
+    }
+
+    table {
+        width: 90%;
+        margin: 1em auto;
+        border-collapse: collapse;
+    }
+
+    th, td {
+        padding: 5px;
+        border: 1px solid;
+    }
+    table > caption {
+        counter-increment: tableNumber;
+        caption-side: bottom;
+        font-size: small;
+        padding-top: .5em;
+    }
+    table > caption:before {
+        content: "Table " counter(tableNumber) " : ";
+    }
+}
--- a/template.html
+++ b/template.html
@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      lang="$lang$"
+      xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+$for(author-meta)$
+  <meta name="author" content="$author-meta$" />
+$endfor$
+$if(date-meta)$
+  <meta name="dcterms.date" content="$date-meta$" />
+$endif$
+$if(keywords)$
+  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
+$endif$
+$if(description-meta)$
+  <meta name="description" content="$description-meta$" />
+$endif$
+  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+  <style>
+    $styles.html()$
+  </style>
+$for(css)$
+  <link rel="stylesheet" href="$css$" />
+$endfor$
+  <link href="/interface.css" rel="stylesheet" type="text/css" />
+  <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
+$for(header-includes)$
+  $header-includes$
+$endfor$
+$if(math)$
+  $math$
+$endif$
+
+</head>
+<body>
+$for(include-before)$
+$include-before$
+$endfor$
+$if(title)$
+<header id="title-block-header">
+<h1 class="title">$title$</h1>
+$if(subtitle)$
+<p class="subtitle">$subtitle$</p>
+$endif$
+$if(author)$
+<div class="authors">
+$for(author)$
+<p class="author">$author$</p>
+$endfor$
+</div>
+$endif$
+$if(date)$
+<p class="date">$date$</p>
+$endif$
+$if(logo)$
+<div class="logo">
+$for(logo)$
+<img src="$logo$" />
+$endfor$
+</div>
+$endif$
+$if(abstract)$
+<div class="abstract">
+$abstract$
+</div>
+$endif$
+</header>
+$endif$
+$if(toc)$
+<nav id="$idprefix$TOC" role="doc-toc">
+$if(toc-title)$
+<h2 id="$idprefix$toc-title">$toc-title$</h2>
+$endif$
+$table-of-contents$
+</nav>
+$endif$
+$body$
+$for(include-after)$
+$include-after$
+$endfor$
+</body>
+</html>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="208" height="128" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#000" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>`