Merge pull request 'layout-5' (#1) from layout-5 into main

Reviewed-on: #1
2026-03-04 09:53:14 +00:00 · 2026-03-04 09:53:14 +00:00 · 86c418dba9
commit 86c418dba9
parent 2b2d787054 72a6378c73
94 changed files with 2345 additions and 342 deletions
--- a/maquette-tests/assets/css/01_var.css
+++ b/maquette-tests/assets/css/01_var.css
@ -0,0 +1,42 @@
+:root{
+
+    --font: 'Routed Gothic', sans-serif;
+    --font: 'Wagram Slab', serif;
+    --font: 'Bilzig', serif;
+    /* --font: 'HAL Timezone', serif; */
+    --mono: 'Selectric Mono', monospace;
+    --mono: 'Ivory Mono', monospace;
+    --mono: 'Baskemo Sans', monospace;
+    --mono: 'HAL Timezone Mono', monospace;
+    --mono: 'Routed Gothic Wide', sans-serif;
+
+    --font-decor: 'Decor Round Random';
+
+    /* --mono: 'HAL Timezone Mono', monospace; */
+
+     --font-sans: 'Routed Gothic', serif;
+    /* --font-sans: 'Routed Gothic Wide', serif; */
+    /* --note: 'Wagram Slab', serif; */
+    --title: 'HNoailles Times Triplex', sans-serif;
+
+    --red: #9B0000;
+    --green:#009B00;
+    --green-light:#009b0025;
+    --blue:  #00009B;
+
+    --grey: #e4e4e4;
+    --border-grey: 2px solid var(--grey);
+
+
+    --indent: 7mm;
+
+    --font-size: 18px;
+    --baseline: 24px;
+
+    --fs-nav: 12px;
+
+    --unit: 20px;
+    --gap: 8px;
+
+
+}
--- a/maquette-tests/assets/css/02_body.css
+++ b/maquette-tests/assets/css/02_body.css
@ -0,0 +1,22 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    -o-font-smoothing: antialiased;
+    
+}
+a {
+    color: currentColor;
+}
+
+
+
+body {
+   
+    font-family: var(--font);
+    font-size: var(--font-size);
+    line-height: var(--baseline);
+
+}
--- a/maquette-tests/assets/css/03_layout.css
+++ b/maquette-tests/assets/css/03_layout.css
@ -0,0 +1,175 @@
+@media print {
+
+  @page {
+    size: 165mm 240mm;
+    margin-top: 16mm;
+    margin-bottom: 20mm;
+    bleed: 6mm;
+    marks: crop;
+
+  }
+
+  @page:left {
+    margin-left: 26mm;
+    margin-right: 18mm;
+
+     @top-left{
+          content: element(navDecor);
+    }
+
+
+      @bottom-center {
+      content: counter(page);
+      font-family: var(--mono);
+      font-size: 20px;
+      vertical-align: bottom;
+      padding-bottom: 8mm;
+
+    }
+
+  
+  }
+
+  @page:right {
+    margin-left: 18mm;
+    margin-right: 26mm;
+
+     @top-left{
+          content: element(nav);
+    }
+
+    @bottom-center {
+      content: counter(page);
+      font-family: var(--mono);
+      font-size: 20px;
+      vertical-align: bottom;
+      padding-bottom: 8mm;
+
+    }
+
+  
+  }
+
+
+
+  .chapter {
+    break-before: right;
+    page: chapter;
+  }
+
+
+  @page chapter:first {
+    @top-left {
+      content: none;
+    }
+
+  }
+
+   @page:blank {
+    @top-left {
+      content: none;
+    }
+     @bottom-center {
+      content: none;
+    }
+    
+
+  }
+}
+
+
+
+.chapter-header h2 {
+  string-set: title content(text);
+}
+
+.chapter-header .author {
+  string-set: author content(text);
+}
+
+.chapter-header .type {
+  string-set: type content(text);
+}
+
+
+.running-nav{
+  position: running(nav);
+   width: 100%;
+}
+
+.running-nav-decor{
+   position: running(navDecor);
+   width: 100%;
+}
+
+.running-nav-decor ul,
+.running-nav ul{
+  
+    display: flex;
+    gap: var(--gap);
+    list-style: none;
+
+}
+
+.running-nav-decor li, 
+.running-nav li{
+   font-family: var(--mono);
+  font-size: var(--fs-nav);
+  border: var(--border-grey);
+  font-size: var(--fs-nav);
+  line-height: 1;
+  padding: 4px 1ch;
+  min-height: var(--unit);
+  font-weight: normal;
+
+}
+
+.running-nav-decor ul li.nav-title,
+.running-nav ul li.nav-title{
+  flex-grow: 2;
+}
+
+.running-nav ul li.nav-author{
+  flex-shrink: 0;
+
+}
+
+.running-nav ul li.nav-title{
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+
+.running-nav ul li.nav-title{
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.running-nav ul li.nav-author{
+  flex: 0 0 auto; /* taille fixe */
+}
+
+
+
+.running-nav-decor ul li.nav-chevron{
+  padding: 0;
+  width: var(--unit);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* .pagedjs_left_page .pagedjs_pagebox{
+
+  background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
+
+} */
+
+/* .pagedjs_right_page .pagedjs_pagebox{
+
+  background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
+
+} */
--- a/maquette-tests/assets/css/base/_var.scss
+++ b/maquette-tests/assets/css/base/_var.scss
@ -1,18 +0,0 @@
-:root{
-
-    --font: 'Wagram Slab', serif;
-    // --font: 'HAL Timezone', serif;
-    --mono: 'Selectric Mono', monospace;
-    // --mono: 'HAL Timezone Mono', monospace;
-    --note: 'Routed Gothic', serif;
-
-    --red: #9B0000;
-    --green:#009B00;
-    --green-light:#009b0025;
-    --blue:  #00009B;
-
-    --red: black;
-    --green:black;
-    --blue:  black;
-
-}
--- a/maquette-tests/assets/css/chapter-header.css
+++ b/maquette-tests/assets/css/chapter-header.css
@ -0,0 +1,156 @@
+
+
+
+.chapter-nav ul{
+  display: flex;
+  font-family: var(--mono);
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-gap: var(--gap);
+  margin-bottom: var(--gap);
+}
+
+.chapter-nav ul li{
+  background-color: var(--grey);
+  font-size: var(--fs-nav);
+  line-height: 1;
+  padding: 4px 1ch;
+}
+.chapter-nav ul li.selected{
+  border: var(--border-grey);
+  background: none;
+}
+
+
+.chapter-header {
+  /* break-after: page; */
+  position: relative;
+}
+
+
+
+.chapter-header p {
+  text-indent: 0px !important;
+}
+
+
+.chapter-header .h2-pattern {
+  display: none;
+  /* font-size: 58px;
+  line-height: 0.8;
+
+  color: var(--blue);
+  margin-bottom: calc(var(--baseline)*1);
+  text-align: left;
+  font-weight: normal;
+
+  color: var(--color);
+  text-align: center;
+  font-family: var(--font-decor);
+
+  transform: scale(2);
+  z-index: 0;
+  position: absolute;
+  top: 0; */
+
+
+}
+
+
+
+.chapter-header .type {
+  font-family: var(--mono);
+  font-size: var(--fs-nav);
+  background-color: var(--grey);
+  font-size: var(--fs-nav);
+  line-height: 1;
+  padding: 4px 1ch;
+  height: var(--unit);
+  margin-left: calc(var(--unit) + var(--gap));
+
+}
+
+.chapter-header .type::before{
+  content: ">";
+  display: block;
+  width: var(--unit);
+  height:   var(--unit);
+  background-color: var(--grey);
+  position: absolute;
+  top: 0;
+  left: calc((var(--unit) + var(--gap))*-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+
+.chapter-header .hgroup{
+  margin-top: var(--gap);
+    border-left: var(--unit) solid var(--grey);
+     border-left: var(--unit) solid var(--grey);
+    padding-left:  var(--gap);
+
+
+     display: flex;
+     flex-direction: column;
+
+}
+
+.chapter-header h2 {
+  font-family: 'Routed Gothic Wide';
+  line-height: 1.2;
+  font-size: 36px;
+  font-weight: normal;
+  text-align: center;
+      padding-top: calc(var(--baseline)*1);
+          padding-bottom: calc(var(--baseline)*1);
+
+  
+}
+
+
+.chapter-header .author {
+
+   background-color: black;
+   color: white;
+
+  font-family: var(--mono);
+  font-size: var(--fs-nav);
+  text-align: center;
+ 
+  font-size: var(--fs-nav);
+  line-height: 1;
+  padding: 4px 1ch;
+   font-weight: normal;
+
+  height: var(--unit);
+   margin-bottom: 0;
+
+   /* display: inline-block;
+   margin-inline: auto;
+   margin-top: calc(var(--baseline)*1); */
+ 
+}
+
+.chapter-header  .bio{
+  display: none;
+}
+
+.chapter-header{
+   margin-bottom: calc(var(--baseline)*1);
+}
+
+.chapter-header:after{
+  /* content: "";
+  display: block;
+  margin-top: var(--gap);
+
+
+  border-top: 2px dashed var(--grey);
+
+  margin-bottom: calc(var(--baseline)*1); */
+
+}
--- a/maquette-tests/assets/css/item-decor.css
+++ b/maquette-tests/assets/css/item-decor.css
@ -0,0 +1,16 @@
+.item-decor{
+    font-family: var(--sans);
+    font-weight: 400;
+    font-size: 12px;
+    position: absolute;
+    
+ 
+}
+
+.pagedjs_left_page .item-decor{
+     left: -12mm;
+}
+
+.pagedjs_right_page .item-decor{
+     right: -12mm;
+}
--- a/maquette-tests/assets/css/modules/_chapter-header.scss
+++ b/maquette-tests/assets/css/modules/_chapter-header.scss
@ -1,60 +0,0 @@
-.chapter-header{
-    // break-after: page;
-    margin-bottom: calc(var(--baseline)*6);
-}
-
-.chapter-header h2 {
-  string-set: title content(text);
-}
-
-.chapter-header .author {
-  string-set: author content(text);
-}
-
-.chapter-header .type {
-  string-set: type content(text);
-}
-
-
-.chapter-header h2{
-    font-size: 38px;
-    line-height: 1;
-    font-family: var(--note);
-    color: var(--blue);
-    margin-bottom: calc(var(--baseline)*1);
-    text-align: center;
-    font-weight: normal;
-
-}
-
-
-.chapter-header .type{
-     margin-bottom: calc(var(--baseline)*1);
-}
-
-.chapter-header .type,
-.chapter-header .bio{
-     font-family: var(--mono);
-    //  text-align: right;
-     hyphens: none;
-     font-size: 9px;
-     line-height: 1.2;
-         left: 0px!important;
-          
-}
-
-.chapter-header .bio{
-margin-top: calc(var(--baseline)*1);
-     text-align: left;
-}
-
-.chapter-header .author{
-    left: 0px!important;
-    font-size: 38px;
-    line-height: 1;
-    font-family: var(--note);
-    font-weight: normal;
-    text-align: center;
-    // color: var(--green);
-}
-
--- a/maquette-tests/assets/css/notes.css
+++ b/maquette-tests/assets/css/notes.css
@ -0,0 +1,50 @@
+.following-note {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: 500;
+
+    display: block;
+    margin-top: calc(var(--baseline)*0.5);
+    margin-bottom: calc(var(--baseline)*0.5);
+
+
+}
+
+.container-following-note {
+    margin-left: 30%;
+}
+
+
+.wrapper__note-call {
+    break-inside: avoid;
+}
+
+
+.following-note_call,
+.following-note_marker {
+
+    &::before {
+        content: "{"
+    }
+
+    &::after {
+        content: "}"
+    }
+
+    font-family: var(--font-sans);
+    font-weight: 500;
+    font-size: 12px;
+}
+
+.following-note_call {
+    padding-left: 0.25ch;
+    position: relative;
+    top: -4px;
+}
+
+
+.following-note_marker {
+    position: absolute;
+    left: 0;
+}
--- a/maquette-tests/assets/css/style.css.map
+++ b/maquette-tests/assets/css/style.css.map
@ -1 +0,0 @@
-{"version":3,"sources":["base/_type.scss","base/_var.scss","style.css","base/_body.scss","base/_layout.scss","base/_type-specimen.scss","modules/_text.scss","modules/_notes.scss","modules/_chapter-header.scss","modules/_item-decor.scss"],"names":[],"mappings":"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","file":"style.css"}
--- a/maquette-tests/assets/css/text.css
+++ b/maquette-tests/assets/css/text.css
@ -0,0 +1,99 @@
+.chapter p{
+    text-align: justify;
+    hyphens: auto;
+    hyphenate-limit-chars: 8 3;
+    position: relative;
+    orphans: 2;
+    hyphens: 2;
+
+  
+}
+
+.container-following-note + p,
+p + p{
+    text-indent: 30%;
+    position: relative;
+ 
+}
+
+p::before{
+ /* content: ">";
+ position: absolute;
+ left: 0;
+ font-family: var(--mono);
+ font-weight: normal;
+ font-size: var(--fs-nav); */
+
+ /* display: block;
+ width: var(--unit);
+ height: var(--unit);
+ background-color: var(--grey);
+ top: 2px;
+ display: flex;
+ align-items: center; */
+ /* justify-content: center; */
+}
+
+
+
+
+
+h3, h4{
+    break-after: avoid;
+}
+h3, h4{
+  font-family: var(--mono);
+  font-size: var(--fs-nav);
+  background-color: var(--grey);
+  font-size: var(--fs-nav);
+  line-height: 1;
+  padding: 4px 1ch;
+  min-height: var(--unit);
+  margin-top: calc(var(--baseline)*1.5);
+   margin-bottom: calc(var(--baseline)*0.5);
+  font-weight: normal;
+}
+
+h4{
+    border: var(--border-grey);
+    background: none;
+}
+
+blockquote p{
+    /* font-family: var(--mono); */
+}
+
+blockquote{
+    padding-left: 3ch;
+    /* font-style: italic; */
+
+    margin-top: calc(var(--baseline)*0..5);
+    margin-bottom: calc(var(--baseline)*0.5);
+     
+       
+}
+
+blockquote::before{
+    content: "> > > > > > > > > >";
+    display: block;
+    width: 1ch;
+    position: absolute;
+    left: 0;
+    font-family: var(--mono);
+    font-size: var(--fs-nav);
+    font-style: normal;
+}
+
+
+
+
+.chapter > :first-child{
+    margin-top: 0px;
+}
+
+
+
+
+.pagedjs_area{
+    position: relative;
+}
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff2
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff2
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff2
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff2
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff2
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff2
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff2
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff2
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff2
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff2
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff2
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff2
--- a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/stylesheet.css
+++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/stylesheet.css
@ -0,0 +1,54 @@
+
+@font-face {
+    font-family: 'Adelphe Trouble Germinal';
+    src: url('Adelphe-Trouble-GerminalRegular.woff2') format('woff2'),
+        url('Adelphe-Trouble-GerminalRegular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Adelphe Trouble Germinal';
+    src: url('Adelphe-Trouble-GerminalItalic.woff2') format('woff2'),
+        url('Adelphe-Trouble-GerminalItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Adelphe Trouble Germinal';
+    src: url('Adelphe-Trouble-GerminalSemiBold.woff2') format('woff2'),
+        url('Adelphe-Trouble-GerminalSemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Adelphe Trouble Germinal';
+    src: url('Adelphe-Trouble-GerminalSemiBoldItalic.woff2') format('woff2'),
+        url('Adelphe-Trouble-GerminalSemiBoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Adelphe Trouble Germinal';
+    src: url('Adelphe-Trouble-GerminalBold.woff2') format('woff2'),
+        url('Adelphe-Trouble-GerminalBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Adelphe Trouble Germinal';
+    src: url('Adelphe-Trouble-GerminalBoldItalic.woff2') format('woff2'),
+        url('Adelphe-Trouble-GerminalBoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
--- a/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Italic.woff2
+++ b/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Italic.woff2
--- a/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Regular.woff2
+++ b/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Regular.woff2
--- a/maquette-tests/assets/fonts/BaskemoSans/stylesheet.css
+++ b/maquette-tests/assets/fonts/BaskemoSans/stylesheet.css
@ -0,0 +1,15 @@
+
+@font-face {
+    font-family: 'Baskemo Sans';
+    src: url('BaskemoSans-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'Baskemo Sans';
+    src: url('BaskemoSans-Italic.woff2') format('woff2');
+    font-weight: normal;
+    font-style: italic;
+}
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff2
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff2
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff2
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff2
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff2
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff2
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff2
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff2
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff2
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff2
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff2
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff2
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff2
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff2
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff
--- a/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff2
+++ b/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff2
--- a/maquette-tests/assets/fonts/Bilzig/stylesheet.css
+++ b/maquette-tests/assets/fonts/Bilzig/stylesheet.css
@ -0,0 +1,72 @@
+@font-face {
+    font-family: 'Bilzig';
+    src: url('Bilzig-Black.woff2') format('woff2'),
+        url('Bilzig-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Bilzig';
+    src: url('Bilzig-BlackItalic.woff2') format('woff2'),
+        url('Bilzig-BlackItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Bilzig';
+    src: url('Bilzig-Bold.woff2') format('woff2'),
+        url('Bilzig-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Bilzig';
+    src: url('Bilzig-Italic.woff2') format('woff2'),
+        url('Bilzig-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Bilzig';
+    src: url('Bilzig-BoldItalic.woff2') format('woff2'),
+        url('Bilzig-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Bilzig';
+    src: url('Bilzig-Medium.woff2') format('woff2'),
+        url('Bilzig-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Bilzig';
+    src: url('Bilzig-MediumItalic.woff2') format('woff2'),
+        url('Bilzig-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Bilzig';
+    src: url('Bilzig-Regular.woff2') format('woff2'),
+        url('Bilzig-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
--- a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff
+++ b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff
--- a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff2
+++ b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff2
--- a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff
+++ b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff
--- a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff2
+++ b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff2
--- a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff
+++ b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff
--- a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff2
+++ b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff2
--- a/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff
+++ b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff
--- a/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff2
+++ b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff2
--- a/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff
+++ b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff
--- a/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff2
+++ b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff2
--- a/maquette-tests/assets/fonts/DecorRound/stylesheet.css
+++ b/maquette-tests/assets/fonts/DecorRound/stylesheet.css
@ -0,0 +1,45 @@
+@font-face {
+    font-family: 'Decor Pixel Round';
+    src: url('DecorPixelRound-Bold.woff2') format('woff2'),
+        url('DecorPixelRound-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Decor Pixel Round';
+    src: url('DecorPixelRound-Regular.woff2') format('woff2'),
+        url('DecorPixelRound-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Decor Pixel Round';
+    src: url('DecorPixelRound-Medium.woff2') format('woff2'),
+        url('DecorPixelRound-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Decor Round Random';
+    src: url('DecorRoundRandom-Regular.woff2') format('woff2'),
+        url('DecorRoundRandom-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Decor Round Random Random';
+    src: url('DecorRoundRandomRandom-Regular.woff2') format('woff2'),
+        url('DecorRoundRandomRandom-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
--- a/maquette-tests/assets/fonts/Garabosse/Garabosse-Perle.ttf
+++ b/maquette-tests/assets/fonts/Garabosse/Garabosse-Perle.ttf
--- a/maquette-tests/assets/fonts/Garabosse/stylesheet.css
+++ b/maquette-tests/assets/fonts/Garabosse/stylesheet.css
@ -0,0 +1,8 @@
+
+@font-face {
+    font-family: 'Garabosse Perle';
+    src: url('Garabosse-Perle.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
--- a/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Bold.woff
+++ b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Bold.woff
--- a/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Book.woff
+++ b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Book.woff
--- a/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Light.woff
+++ b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Light.woff
--- a/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Regular.woff
+++ b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Regular.woff
--- a/maquette-tests/assets/fonts/Velvetyne/stylesheet.css
+++ b/maquette-tests/assets/fonts/Velvetyne/stylesheet.css
@ -0,0 +1,32 @@
+
+@font-face {
+    font-family: 'Velvetyne';
+    src: url('Velvelyne-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Velvetyne';
+    src: url('Velvelyne-Book.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Velvetyne';
+    src: url('Velvelyne-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Velvetyne';
+    src: url('Velvelyne-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
--- a/maquette-tests/assets/layout-4/Screenshot
+++ b/maquette-tests/assets/layout-4/Screenshot
--- a/maquette-tests/assets/layout-4/Screenshot
+++ b/maquette-tests/assets/layout-4/Screenshot
--- a/maquette-tests/assets/layout-4/base/_body.scss
+++ b/maquette-tests/assets/layout-4/base/_body.scss
@ -16,8 +16,7 @@ a {
 // }

 body {
-    --font-size: 12px;
-    --baseline: 17px;
+   
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: var(--baseline);
--- a/maquette-tests/assets/layout-4/base/_layout.scss
+++ b/maquette-tests/assets/layout-4/base/_layout.scss
@ -1,6 +1,18 @@
@mixin running(){
  font-family: var(--mono);
-  font-size: 10px;
+  font-size: 12px;
+  // vertical-align: bottom;
+  // padding-bottom: 5mm;
+}
+
+
+@mixin numPage(){
+  font-family: var(--sans);
+  font-size: 20px;
+  vertical-align: bottom;
+  padding-bottom: 5mm;
+  width: 10mm;
+
 }


@ -10,7 +22,7 @@
  
  @page {
    size: 165mm 240mm;
-    margin-top: 10mm;
+    margin-top: 16mm;
    margin-bottom: 20mm;
    bleed: 6mm;
    marks: crop;
@ -18,35 +30,36 @@
  }

  @page:left{
-    margin-left: 35mm;
-    margin-right: 30mm;
-     @bottom-left-corner{
+    margin-left: 18mm;
+    margin-right: 26mm;
+     @bottom-center{
      content: counter(page);
-      @include running();
+      @include numPage();
       
-       text-align: left;
-        padding-left: 10mm;
+   
    }
-     @bottom-left {
+     @top-left {
      content: string(author);
      @include running();
+      // text-align: left;
+      // padding-left: 3ch;
    }
-     @bottom-center {
+     @top-center {
    content: string(type);
    @include running();
  }
  }

  @page:right{
-    margin-left: 30mm;
-    margin-right: 35mm;
-     @bottom-right-corner{
+    margin-left: 26mm;
+    margin-right: 18mm;
+     @bottom-center{
      content: counter(page);
-      @include running();
+      @include numPage();
        text-align: right;
-        padding-right: 10mm;
+  
    }
-     @bottom-left {
+     @top-left {
      content: string(title);
      @include running();
    }
@ -58,6 +71,13 @@

  .chapter{
    break-before: right;
+    page: chapter;
+  }
+
+
+  @page chapter:first{
+    @top-left{ content: none; }
+
  }
 }

--- a/maquette-tests/assets/layout-4/base/_type-specimen.scss
+++ b/maquette-tests/assets/layout-4/base/_type-specimen.scss
--- a/maquette-tests/assets/layout-4/base/_type.scss
+++ b/maquette-tests/assets/layout-4/base/_type.scss
@ -13,7 +13,7 @@
 }

 [data-type="vollkorn"]{
-  font-family: "Literata", serif;
+  font-family: "Vollkorn", serif;
 }


@ -130,3 +130,9 @@
 }


+
+[data-type="baskemo-sans"]{
+  font-family: 'Baskemo Sans', serif;
+}
+
+
--- a/maquette-tests/assets/layout-4/base/_var.scss
+++ b/maquette-tests/assets/layout-4/base/_var.scss
@ -0,0 +1,27 @@
+:root{
+
+    --font: 'Routed Gothic', sans-serif;
+    --font: 'Wagram Slab', serif;
+    // --font: 'HAL Timezone', serif;
+    --mono: 'Selectric Mono', monospace;
+    --mono: 'Ivory Mono', monospace;
+    --mono: 'Baskemo Sans', monospace;
+
+    // --mono: 'HAL Timezone Mono', monospace;
+    --sans: 'Routed Gothic', serif;
+    // --note: 'Wagram Slab', serif;
+    --title: 'HNoailles Times Triplex', sans-serif;
+
+    --red: #9B0000;
+    --green:#009B00;
+    --green-light:#009b0025;
+    --blue:  #00009B;
+
+
+
+    --indent: 7mm;
+
+    --font-size: 12px;
+    --baseline: 18px;
+
+}
--- a/maquette-tests/assets/layout-4/modules/_chapter-header.scss
+++ b/maquette-tests/assets/layout-4/modules/_chapter-header.scss
@ -0,0 +1,89 @@
+.chapter-header{
+    // break-after: page;
+        margin-top: calc(var(--baseline)*2);
+    margin-bottom: calc(var(--baseline)*3);
+    --color: black;
+}
+
+.chapter-header h2 {
+  string-set: title content(text);
+}
+
+.chapter-header .author {
+  string-set: author content(text);
+}
+
+.chapter-header .type {
+  string-set: type content(text);
+}
+
+
+.chapter-header h2{
+    font-size: 46px;
+    line-height: 1.1;
+    font-family: var(--font);
+      font-family: var(--mono);
+    color: var(--blue);
+    margin-bottom: calc(var(--baseline)*1);
+    text-align: left;
+    font-weight: normal;
+
+    color: var(--color);
+    text-align: center;
+
+}
+
+
+.chapter-header .type{
+     margin-bottom: calc(var(--baseline)*1);
+     display: none;
+    //  text-align: center;
+}
+
+.chapter-header .type{
+
+}
+.chapter-header .bio{
+  margin-top: calc(var(--baseline)*3);
+     font-family: var(--sans);
+     hyphens: none;
+      line-height: 1.3;
+   font-size: 12px;
+    
+        //  left: 0px!important;
+        .name{
+          text-indent: 0;
+          text-align: left;
+          font-weight: normal;
+              color: var(--color);
+        }
+        
+        .description{
+          text-indent: -14mm;
+          padding-left: 14mm;
+          text-align: left;
+          font-weight:  normal;
+              color: var(--color);
+              hyphens: none;
+        }
+          
+}
+
+
+
+.chapter-header .author{
+    left: 0px!important;
+  font-size: 26px;
+    line-height: 0.9;
+    font-weight: normal;
+    line-height: 1;
+    font-family: var(--mono);
+    // font-weight: bold;
+    text-align: center;
+    text-indent: 0;
+    color: var(--color);
+      margin-top: calc(var(--baseline)*3);
+      text-decoration: underline 1px;
+      text-underline-offset: 2px;
+}
+
--- a/maquette-tests/assets/layout-4/modules/_footnotes.scss
+++ b/maquette-tests/assets/layout-4/modules/_footnotes.scss
@ -0,0 +1,82 @@
+.pagedjs_footnote{
+    font-family: var(--sans);
+    // font-size: 10px;
+    line-height: 1.3;
+   font-size: 12px;
+   font-weight: 200;
+   text-indent: -14mm;
+   padding-left: 14mm;
+   
+
+    
+
+}
+.pagedjs_floatnote_marker,
+.pagedjs_floatnote_call{
+
+}
+
+
+.pagedjs_floatnote_marker{
+   
+}
+
+.note-container{
+    grid-column: center;
+    grid-row: footer;
+    width: 100%;
+    height: calc(100% - 12mm);
+    // outline: 1px solid red;
+    columns: 2;
+    column-fill: auto;
+
+    padding-top: 20px;
+
+
+}
+
+
+.pagedjs_footnote_content{
+    // padding-top: var(--baseline);
+// columns: 2;
+
+}
+
+
+    // .pagedjs_footnote_inner_content{
+    //     columns: 2;
+    // }
+
+
+
+.pagedjs_footnotes::marker{
+    color: red;
+}
+
+
+
+.pagedjs_footnote[data-footnote-call]{
+
+        //   font-family: sans-serif;
+
+       font-size: 12px;
+     font-family: var(--sans);
+    text-indent: 0px;
+    // position: relative;
+    // top: -2px;
+    margin-left: 2px;
+    &::after{
+        font-variant-position: normal;
+        content: attr(data-counter-footnote-increment) "}"
+
+    }
+    &::before{
+        content: "{"
+    }
+}
+
+
+
+[data-footnote-marker]::marker {
+    content: "{" counter(footnote-marker) "} ";
+}
--- a/maquette-tests/assets/layout-4/modules/_item-decor.scss
+++ b/maquette-tests/assets/layout-4/modules/_item-decor.scss
@ -1,16 +1,17 @@

 .item-decor{
-    font-family: var(--font);
+    font-family: var(--sans);
    font-weight: 400;
    font-size: 12px;
    position: absolute;
-    color: var(--green);
+    
+ 
 }

 .pagedjs_left_page .item-decor{
-     left: -26mm;
+     left: -12mm;
 }

 .pagedjs_right_page .item-decor{
-     right: -26mm;
+     right: -12mm;
 }
--- a/maquette-tests/assets/layout-4/modules/_notes.scss
+++ b/maquette-tests/assets/layout-4/modules/_notes.scss
@ -1,6 +1,6 @@
 .inline-note{
+
    color: var(--green);
-    // break-inside: avoid;

    float: left;
    clear: both;
@ -28,11 +28,25 @@
 .pagedjs_floatnote_marker,
 .pagedjs_floatnote_call{
    color: var(--green);
+
    // font-weight: bold;
    padding-left: 0.25ch;
    line-height: 0;
    font-size: 9px;
-    // font-family: var(--font);
+    font-family: var(--mono);
+    position: relative;
+    top: -1px;
+    margin-left: 2px;
+
+
+    border: 0.5px solid currentColor;
+
+    width: 14px;
+    height: 14px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
 }


@ -43,3 +57,5 @@
    // display: block;
    text-align: left;
 }
+
+
--- a/maquette-tests/assets/layout-4/modules/_text.scss
+++ b/maquette-tests/assets/layout-4/modules/_text.scss
@ -4,8 +4,11 @@
    p{
    text-align: justify;
    hyphens: auto;
+    hyphenate-limit-chars: 8 3;
    position: relative;
-    color: var(--blue);
+    // color: var(--blue);
+
+    letter-spacing: 0.01rem;
 

    // &::before{
@ -20,19 +23,10 @@
 }

 p + p{
-    left: 14mm;
-    text-indent: 7mm;
-    // &::before{
-    //     left: -19mm;
-    // }
+    text-indent: var(--indent);
+   
 }

-p + p + p{
-  left: 7mm;
-//    &::before{
-//         left: -13mm;
-//     }
-}



@ -41,12 +35,17 @@ h3{
    margin-bottom: calc(var(--baseline)*0.5);
    text-align: center;
    font-weight: normal;
-    text-decoration: underline;
+    // text-decoration: underline;
    font-family: var(--mono);
    text-transform: uppercase;
     color: var(--blue);
      max-width: 18ch;
-      margin-inline: auto;
+    //   margin-inline: auto;
+      letter-spacing: 0.05rem;
+    color: black;
+      text-decoration: underline 1px;
+      text-underline-offset: 2px;
+      

    //     &::before{
    //     content: '';
@ -67,18 +66,21 @@ blockquote p{
 }

 blockquote{
-    position: relative;
-    left: 14mm;
-    p{
-    font-size: 16px;
-    line-height: calc(var(--baseline)*1.25);
-    font-weight: 300;
+    font-family: var(--mono);
+    // position: relative;
+    // left: 14mm;
+    // p{
+    // font-size: 16px;
+    // line-height: calc(var(--baseline)*1.25);
+    // font-weight: 300;
    

-    }
+    // }
+
+    padding-left: var(--indent);
   
-        // margin-top: calc(var(--baseline)*2);
-        // margin-bottom: calc(var(--baseline)*2);
+        margin-top: calc(var(--baseline)*1);
+        margin-bottom: calc(var(--baseline)*1);
 }


--- a/maquette-tests/assets/layout-4/style.css
+++ b/maquette-tests/assets/layout-4/style.css
@ -2,16 +2,20 @@
@import url("https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap");
 :root {
-  --font: "Wagram Slab", serif;
-  --mono: "Selectric Mono", monospace;
-  --note: "Routed Gothic", serif;
+  --font: 'Routed Gothic', sans-serif;
+  --font: 'Wagram Slab', serif;
+  --mono: 'Selectric Mono', monospace;
+  --mono: 'Ivory Mono', monospace;
+  --mono: 'Baskemo Sans', monospace;
+  --sans: 'Routed Gothic', serif;
+  --title: 'HNoailles Times Triplex', sans-serif;
  --red: #9B0000;
  --green:#009B00;
  --green-light:#009b0025;
  --blue: #00009B;
-  --red: black;
-  --green:black;
-  --blue: black;
+  --indent: 7mm;
+  --font-size: 12px;
+  --baseline: 18px;
 }

 * {
@ -28,8 +32,6 @@ a {
 }

 body {
-  --font-size: 12px;
-  --baseline: 17px;
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--baseline);
@ -38,46 +40,49 @@ body {
@media print {
  @page {
    size: 165mm 240mm;
-    margin-top: 10mm;
+    margin-top: 16mm;
    margin-bottom: 20mm;
    bleed: 6mm;
    marks: crop;
  }
  @page :left {
-    margin-left: 35mm;
-    margin-right: 30mm;
-    @bottom-left-corner {
+    margin-left: 18mm;
+    margin-right: 26mm;
+    @bottom-center {
      content: counter(page);
-      font-family: var(--mono);
-      font-size: 10px;
-      text-align: left;
-      padding-left: 10mm;
+      font-family: var(--sans);
+      font-size: 20px;
+      vertical-align: bottom;
+      padding-bottom: 5mm;
+      width: 10mm;
    }
-    @bottom-left {
+    @top-left {
      content: string(author);
      font-family: var(--mono);
-      font-size: 10px;
+      font-size: 12px;
    }
-    @bottom-center {
+    @top-center {
      content: string(type);
      font-family: var(--mono);
-      font-size: 10px;
+      font-size: 12px;
    }
  }
  @page :right {
-    margin-left: 30mm;
-    margin-right: 35mm;
-    @bottom-right-corner {
+    margin-left: 26mm;
+    margin-right: 18mm;
+    @bottom-center {
      content: counter(page);
-      font-family: var(--mono);
-      font-size: 10px;
+      font-family: var(--sans);
+      font-size: 20px;
+      vertical-align: bottom;
+      padding-bottom: 5mm;
+      width: 10mm;
      text-align: right;
-      padding-right: 10mm;
    }
-    @bottom-left {
+    @top-left {
      content: string(title);
      font-family: var(--mono);
-      font-size: 10px;
+      font-size: 12px;
    }
  }
  /*p{
@ -86,6 +91,12 @@ body {
  .chapter {
    -moz-column-break-before: right;
         break-before: right;
+    page: chapter;
+  }
+  @page chapter:first {
+    @top-left {
+      content: none;
+    }
  }
 }
 [data-type=ovo] {
@ -97,7 +108,7 @@ body {
 }

 [data-type=vollkorn] {
-  font-family: "Literata", serif;
+  font-family: "Vollkorn", serif;
 }

 [data-type=timezone] {
@ -213,6 +224,10 @@ body {
  font-weight: 200;
 }

+[data-type=baskemo-sans] {
+  font-family: "Baskemo Sans", serif;
+}
+
 #type-specimen {
  background-color: #cfcfcf;
 }
@ -235,8 +250,7 @@ body {
 }
 #type-specimen p:first-of-type {
  text-align: justify;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
  margin-bottom: 1em;
 }
 #type-specimen p {
@ -311,38 +325,34 @@ body {

 .chapter p {
  text-align: justify;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
+  hyphenate-limit-chars: 8 3;
  position: relative;
-  color: var(--blue);
+  letter-spacing: 0.01rem;
 }
 .chapter p + p {
-  left: 14mm;
-  text-indent: 7mm;
-}
-.chapter p + p + p {
-  left: 7mm;
+  text-indent: var(--indent);
 }
 .chapter h3 {
  margin-top: calc(var(--baseline) * 1.5);
  margin-bottom: calc(var(--baseline) * 0.5);
  text-align: center;
  font-weight: normal;
-  text-decoration: underline;
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--blue);
  max-width: 18ch;
-  margin-inline: auto;
+  letter-spacing: 0.05rem;
+  color: black;
+  -webkit-text-decoration: underline 1px;
+          text-decoration: underline 1px;
+  text-underline-offset: 2px;
 }
 .chapter blockquote {
-  position: relative;
-  left: 14mm;
-}
-.chapter blockquote p {
-  font-size: 16px;
-  line-height: calc(var(--baseline) * 1.25);
-  font-weight: 300;
+  font-family: var(--mono);
+  padding-left: var(--indent);
+  margin-top: calc(var(--baseline) * 1);
+  margin-bottom: calc(var(--baseline) * 1);
 }
 .chapter > :first-child {
  margin-top: 0px;
@ -352,41 +362,53 @@ body {
  position: relative;
 }

-.inline-note {
-  color: var(--green);
-  float: left;
-  clear: both;
-  width: 46mm;
-  text-align: left;
-  -webkit-hyphens: none;
-          hyphens: none;
-  margin-right: 1ch;
-  margin-right: -20mm;
-  position: relative;
-  left: -25mm;
-  text-align: right;
-  font-family: var(--note);
-  font-size: 9.5px;
-  line-height: 1.2;
-}
-.inline-note .body_note {
-  padding-top: 5px;
+.pagedjs_footnote {
+  font-family: var(--sans);
+  line-height: 1.3;
+  font-size: 12px;
+  font-weight: 200;
+  text-indent: -14mm;
+  padding-left: 14mm;
 }

-.pagedjs_floatnote_marker,
-.pagedjs_floatnote_call {
-  color: var(--green);
-  padding-left: 0.25ch;
-  line-height: 0;
-  font-size: 9px;
+.note-container {
+  grid-column: center;
+  grid-row: footer;
+  width: 100%;
+  height: calc(100% - 12mm);
+  -moz-columns: 2;
+       columns: 2;
+  -moz-column-fill: auto;
+       column-fill: auto;
+  padding-top: 20px;
 }

-.pagedjs_floatnote_marker {
-  text-align: left;
+.pagedjs_footnotes::marker {
+  color: red;
+}
+
+.pagedjs_footnote[data-footnote-call] {
+  font-size: 12px;
+  font-family: var(--sans);
+  text-indent: 0px;
+  margin-left: 2px;
+}
+.pagedjs_footnote[data-footnote-call]::after {
+  font-variant-position: normal;
+  content: attr(data-counter-footnote-increment) "}";
+}
+.pagedjs_footnote[data-footnote-call]::before {
+  content: "{";
+}
+
+[data-footnote-marker]::marker {
+  content: "{" counter(footnote-marker) "} ";
 }

 .chapter-header {
-  margin-bottom: calc(var(--baseline) * 6);
+  margin-top: calc(var(--baseline) * 2);
+  margin-bottom: calc(var(--baseline) * 3);
+  --color: black;
 }

 .chapter-header h2 {
@ -402,55 +424,72 @@ body {
 }

 .chapter-header h2 {
-  font-size: 38px;
-  line-height: 1;
-  font-family: var(--note);
+  font-size: 46px;
+  line-height: 1.1;
+  font-family: var(--font);
+  font-family: var(--mono);
  color: var(--blue);
  margin-bottom: calc(var(--baseline) * 1);
-  text-align: center;
+  text-align: left;
  font-weight: normal;
+  color: var(--color);
+  text-align: center;
 }

 .chapter-header .type {
  margin-bottom: calc(var(--baseline) * 1);
-}
-
-.chapter-header .type,
-.chapter-header .bio {
-  font-family: var(--mono);
-  -webkit-hyphens: none;
-          hyphens: none;
-  font-size: 9px;
-  line-height: 1.2;
-  left: 0px !important;
+  display: none;
 }

 .chapter-header .bio {
-  margin-top: calc(var(--baseline) * 1);
+  margin-top: calc(var(--baseline) * 3);
+  font-family: var(--sans);
+  hyphens: none;
+  line-height: 1.3;
+  font-size: 12px;
+}
+.chapter-header .bio .name {
+  text-indent: 0;
  text-align: left;
+  font-weight: normal;
+  color: var(--color);
+}
+.chapter-header .bio .description {
+  text-indent: -14mm;
+  padding-left: 14mm;
+  text-align: left;
+  font-weight: normal;
+  color: var(--color);
+  hyphens: none;
 }

 .chapter-header .author {
  left: 0px !important;
-  font-size: 38px;
-  line-height: 1;
-  font-family: var(--note);
+  font-size: 26px;
+  line-height: 0.9;
  font-weight: normal;
+  line-height: 1;
+  font-family: var(--mono);
  text-align: center;
+  text-indent: 0;
+  color: var(--color);
+  margin-top: calc(var(--baseline) * 3);
+  -webkit-text-decoration: underline 1px;
+          text-decoration: underline 1px;
+  text-underline-offset: 2px;
 }

 .item-decor {
-  font-family: var(--font);
+  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  position: absolute;
-  color: var(--green);
 }

 .pagedjs_left_page .item-decor {
-  left: -26mm;
+  left: -12mm;
 }

 .pagedjs_right_page .item-decor {
-  right: -26mm;
+  right: -12mm;
 }/*# sourceMappingURL=style.css.map */
--- a/maquette-tests/assets/layout-4/style.css.map
+++ b/maquette-tests/assets/layout-4/style.css.map
@ -0,0 +1 @@
+{"version":3,"sources":["base/_type.scss","base/_var.scss","style.css","base/_body.scss","base/_layout.scss","base/_type-specimen.scss","modules/_text.scss","modules/_footnotes.scss","modules/_chapter-header.scss","modules/_item-decor.scss"],"names":[],"mappings":"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","file":"style.css"}
--- a/maquette-tests/assets/layout-4/style.scss
+++ b/maquette-tests/assets/layout-4/style.scss
@ -6,6 +6,7 @@

@use "base/type-specimen";
@use "modules/text";
-@use "modules/notes";
+// @use "modules/notes";
+@use "modules/footnotes";
@use "modules/chapter-header";
@use "modules/item-decor";
--- a/maquette-tests/assets/type-specimen.css
+++ b/maquette-tests/assets/type-specimen.css
@ -0,0 +1,281 @@
+@import url('https://fonts.googleapis.com/css2?family=Ovo&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');
+
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    -o-font-smoothing: antialiased;
+    
+}
+a {
+    color: currentColor;
+}
+
+
+
+
+[data-type="ovo"]{
+  font-family: "Ovo", serif;
+
+}
+
+[data-type="literata"]{
+  font-family: "Literata", serif;
+
+}
+
+[data-type="vollkorn"]{
+  font-family: "Vollkorn", serif;
+}
+
+
+[data-type="timezone"]{
+  font-family: 'HAL Timezone', serif;
+}
+
+[data-type="timezone-mono"]{
+  font-family: 'HAL Timezone Mono', monospace;
+}
+
+
+[data-type="selectric"]{
+  font-family: 'Selectric', serif;
+}
+
+[data-type="selectric-mono"]{
+  font-family: 'Selectric Mono', monospace;
+}
+
+[data-type="es-face"]{
+  font-family: 'ESFace', serif;
+}
+
+[data-type="ivory"]{
+  font-family: 'Ivory', serif;
+}
+[data-type="ivory-mono"]{
+  font-family: 'Ivory Mono', serif;
+}
+[data-type="necto-mono"]{
+  font-family: 'NectoMono', monospace;
+}
+
+[data-type="old-round"]{
+  font-family: 'OldRound', serif;
+}
+
+[data-type="old-round-hover"]{
+  font-family: 'OldRound Hover', serif;
+}
+
+[data-type="satoshi"]{
+  font-family: 'Satoshi', sans-serif;
+}
+
+[data-type="redaction"]{
+   font-family: 'Redaction', monospace;
+}
+
+[data-type="h-noailles-futura-simplex"]{
+   font-family: 'HNoailles Futura Simplex', sans-serif;
+}
+
+[data-type="h-noailles-futura-duplex"]{
+   font-family: 'HNoailles Futura Duplex', sans-serif;
+}
+
+[data-type="h-noailles-futura-triplex"]{
+   font-family: 'HNoailles Futura Triplex', sans-serif;
+}
+
+[data-type="h-noailles-times-simplex"]{
+   font-family: 'HNoailles Times Simplex', serif;
+}
+
+[data-type="h-noailles-times-duplex"]{
+   font-family: 'HNoailles Times Duplex', serif;
+}
+
+[data-type="h-noailles-times-triplex"]{
+   font-family: 'HNoailles Times Triplex', serif;
+}
+
+[data-type="adelphe-floreal"]{
+   font-family: 'Adelphe Floreal', serif;
+}
+[data-type="Adelphe-fructidor"]{
+   font-family: 'Adelphe Fructidor', serif;
+}
+
+[data-type="wagram"]{
+   font-family: 'Wagram', serif;
+}
+[data-type="wagram-slab"]{
+   font-family: 'Wagram Slab', serif;
+}
+[data-type="wagram-mono-slab"]{
+   font-family: 'Wagram Mono Slab', monospace;
+}
+
+[data-type="routed-gothic-wide"]{
+  font-family: 'Routed Gothic Wide', sans-serif;
+}
+
+[data-type="routed-gothic"]{
+  font-family: 'Routed Gothic', sans-serif;
+}
+
+
+[data-type="routed-gothic-narrow"]{
+  font-family: 'Routed Gothic Narrow', sans-serif;
+}
+
+[data-type="cheltenham"]{
+  font-family: 'ITC Cheltenham', serif;
+}
+
+
+[data-type="cheltenham-light"]{
+  font-family: 'ITC Cheltenham', serif;
+  font-weight: 200;
+
+}
+
+
+
+[data-type="baskemo-sans"]{
+  font-family: 'Baskemo Sans', serif;
+}
+
+[data-type="Velvetyne"]{
+  font-family: 'Velvetyne';
+}
+
+[data-type="Garabosse Perle"]{
+  font-family: 'Garabosse Perle';
+}
+[data-type="Adelphe Trouble Germinal"]{
+  font-family: 'Adelphe Trouble Germinal';;
+}
+[data-type="Bilzig"]{
+  font-family: 'Bilzig';
+}
+
+
+#type-specimen{
+    background-color: #cfcfcf;
+ }
+    .type{
+        font-family: sans-serif;
+        grid-column: span 2;
+        font-weight: bold;
+    }
+
+    .specimen{
+
+        width: 1200px;
+        height: 680px;
+        border: 1px solid #999;
+        background-color: white;
+        margin: 30px;
+        padding: 30px;
+        overflow: hidden;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 30px;
+
+    }
+
+    p:first-of-type{
+        text-align: justify;
+        hyphens: auto;
+        margin-bottom: 1em;
+    }
+
+    p{
+    font-size: 16px;
+    }
+ 
+
+    .title{
+       
+        font-size: 32px;
+        line-height: 1.1;
+        max-width: 22ch;
+        margin-bottom: 30px;
+    }
+
+    .content{
+        line-height: 1.3;
+    }
+
+    .title-bold{
+        font-weight: bold;
+    }
+
+     .title-normal{
+        font-weight: normal;
+    }
+
+     .title-italic{
+        font-weight: normal;
+        font-style: italic;
+    }
+      .title-light{
+        font-weight: 300!important;
+        font-style: normal;
+    }
+
+    .title-uppercase{
+      font-weight: normal;
+      text-transform: uppercase;
+      letter-spacing: 0.01rem;
+  }
+
+
+
+[data-type="ovo"] .title {
+    font-weight: normal;
+    line-height: 1.1;
+}
+
+[data-type="selectric"] .title-bold,
+[data-type="selectric-mono"] .title-bold,
+[data-type="timezone"] .title-bold,
+[data-type="timezone-mono"] .title-bold {
+    font-weight: normal!important;
+}
+
+[data-type="selectric-mono"] .content p {
+    letter-spacing: -0.01rem;
+    white-space: 0.2ch;
+}
+
+[data-type="es-face"] .title-bold {
+    font-weight: normal!important;
+    font-style: italic;
+}
+
+[data-type="redaction"] .title-bold {
+    font-family: 'Redaction 50';
+    font-weight: normal!important;
+    font-style: italic;
+}
+
+[data-type="routed-gothic"] .title-bold,
+[data-type="routed-gothic-narrow"] .title-bold,
+[data-type="routed-gothic-wide"] .title-bold {
+    font-weight: normal!important;
+}
+
+[data-type="cheltenham-light"] .title,
+[data-type="cheltenham-light"] p {
+    font-weight: 200!important;
+}
+
--- a/maquette-tests/csspageweaver/manifest.json
+++ b/maquette-tests/csspageweaver/manifest.json
@ -8,24 +8,31 @@
                "reloadInPlace",
                "fullPage",
                "inlineNotes",
-                "sidenotes"],
+                "followingNotes"
+            ],
    "pluginsParameters":{
        "inlineNotes": {
            "input": ".footnote-ref",
            "containerNotes": "#footnotes",
-            "section": ".chapter"
+            "newClass": "inline-note"
        },
-        "sidenotes": {
+        "followingNotes": {
            "selector": ".inline-note",
            "reset": ".chapter"
        }

    },
    "css": [
-        "assets/css/style.css"
+        "assets/css/01_var.css",
+        "assets/css/02_body.css",
+        "assets/css/03_layout.css",
+        "assets/css/chapter-header.css",
+        "assets/css/item-decor.css",
+        "assets/css/notes.css",
+        "assets/css/text.css"
    ],
    "hook": [
-        "/js/items-decor.js"
+        
    ]
 }

--- a/maquette-tests/csspageweaver/plugins/followingNotes/.gitignore
+++ b/maquette-tests/csspageweaver/plugins/followingNotes/.gitignore
@ -0,0 +1 @@
+.DS_Store
--- a/maquette-tests/csspageweaver/plugins/followingNotes/config.json
+++ b/maquette-tests/csspageweaver/plugins/followingNotes/config.json
@ -0,0 +1,8 @@
+{
+	"name": "FollowingNotes",
+	"description": "Create followingNotes with call & markers",
+	"author": ["Julie Blanc"],
+	"licence": "MIT",
+	"version": "1.0",
+	"hook": "followingNotes.js"
+}
--- a/maquette-tests/csspageweaver/plugins/followingNotes/followingNotes.js
+++ b/maquette-tests/csspageweaver/plugins/followingNotes/followingNotes.js
@ -0,0 +1,220 @@
+/**
+ * @name FollowingNotes
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/followingNotes/ }
+ */
+
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+export default class followingNotes extends Handler {
+
+  constructor(chunker, polisher, caller) {
+    super(chunker, polisher, caller);
+    this.parameters = cssPageWeaver.features.followingNotes.parameters;
+    this.notesClass = this.parameters?.selector || ".inline-note";
+    this.newNotesClass = this.parameters?.newNotesClass || "following-note";
+    this.reset = this.parameters?.reset;
+    this.align = this.parameters?.align;
+    this.followingNoteOverflow = new Set();
+  }
+
+  beforeParsed(content) {
+
+    console.log("floatnotes");
+
+    let newNotesClass = this.newNotesClass;
+    resetCounter(content, this.reset, this.notesClass);
+    createCallandMarker(content, this.notesClass, newNotesClass);
+
+
+    let notes = content.querySelectorAll(this.notesClass);
+    notes.forEach(function (note) {
+      let paragraph = note.closest("p");
+      if (!paragraph) return;
+
+      let container = paragraph.nextElementSibling;
+      if (!container || !container.classList.contains("container-following-note")) {
+        container = document.createElement("div");
+        container.classList.add("container-following-note");
+        paragraph.after(container);
+      }
+
+      container.appendChild(note);
+    });
+
+
+  }
+
+
+
+}
+
+
+
+
+/// FUNCTIONS -----------------------------------------------------
+
+
+// RESET COUNTER
+
+function resetCounter(content, reset, notesClass){
+
+  if(reset && reset != ""){
+    const elements = content.querySelectorAll(reset + ", " + notesClass);
+    let resetEligible = false;
+    elements.forEach(element => {
+        if (element.matches(reset)) {
+            resetEligible = true;
+        } else if (resetEligible && element.matches(notesClass)) {
+            element.dataset.resetCounterFollowingNote = true;
+            resetEligible = false;
+        }
+    });
+  }
+
+}
+
+
+// CALL & MARKER
+function createCallandMarker(content, notesClass, newNotesClass){
+
+  let notes = content.querySelectorAll(notesClass);
+  let resetNum = 0;
+
+  notes.forEach(function (note, index) {
+
+      if (note.dataset.resetCounterFollowingNote === "true") {
+          resetNum = index;
+      }
+      let num = index + 1 - resetNum;
+
+      note.classList.add(newNotesClass);
+      note.dataset.counterNote = num;
+
+      // call
+      let ref_note = document.createElement('span');
+      ref_note.className = newNotesClass + "_call";
+      ref_note.dataset.counterNote = num;
+      ref_note.innerHTML = num;
+
+      // wrap preceding word + call in .wrapper__note-call
+      let wrapper = document.createElement('span');
+      wrapper.className = 'wrapper__note-call';
+
+      let prevSibling = note.previousSibling;
+      if (prevSibling && prevSibling.nodeType === Node.TEXT_NODE) {
+        let text = prevSibling.textContent;
+        let m = text.match(/^([\s\S]*\s)(\S+\s*)$/);
+        if (m) {
+          let before = m[1];
+          let extracted = m[2];
+
+          // Si le dernier mot extrait est uniquement », prendre aussi le mot d'avant
+          if (/^»\s*$/.test(extracted)) {
+            let m2 = before.trimEnd().match(/^([\s\S]*\s|)(\S+)$/);
+            if (m2) {
+              let spaceBetween = before.slice(m2[1].length + m2[2].length);
+              before = m2[1];
+              extracted = m2[2] + spaceBetween + extracted;
+            }
+          }
+
+          prevSibling.textContent = before;
+          wrapper.appendChild(document.createTextNode(extracted));
+        } else {
+          prevSibling.textContent = '';
+          wrapper.appendChild(document.createTextNode(text));
+        }
+      }
+
+      wrapper.appendChild(ref_note);
+      note.after(wrapper);
+
+      // marker + content note wrapped in body_note
+      let marker_note = document.createElement('span');
+      marker_note.className = newNotesClass + "_marker";
+      //marker_note.innerHTML = num + ". ";
+    marker_note.innerHTML = num;
+
+      let body_note = document.createElement('div');
+      body_note.className = 'body_note';
+      while (note.firstChild) {
+          body_note.appendChild(note.firstChild);
+      }
+      body_note.prepend(marker_note);
+      note.appendChild(body_note);
+
+  });
+
+  }
+
+
+
+
+// MARGINS
+
+function marginNoteTop(elem) {
+  let marginTop = parseInt(window.getComputedStyle(elem).marginTop, 10)
+  return marginTop;
+}
+
+function marginNoteBottom(elem) {
+  let marginBottom = parseInt(window.getComputedStyle(elem).marginBottom, 10)
+  return marginBottom;
+}
+
+function biggestMargin(a, b) {
+  let margin;
+  let marginBottom = marginNoteBottom(a);
+  let marginTop = marginNoteTop(b);
+  if (marginBottom > marginTop) {
+      margin = marginBottom;
+  } else {
+      margin = marginTop;
+  }
+  return margin;
+}
+
+
+
+function checkOverflownote(notesClass, pageElement, maxHeight, arrayOverflow, container) {
+  let notes = pageElement.querySelectorAll(notesClass);
+
+  let notesHeightAll = [];
+
+  for (let n = 0; n < notes.length; ++n) {
+
+      // Add height of the notes to array notesHeightAll
+      let noteHeight = notes[n].offsetHeight;
+      notesHeightAll.push(noteHeight);
+      // Add margins of the notes to array notesHeightAll
+      if (n >= 1) {
+          let margins = biggestMargin(notes[n - 1], notes[n]);
+          notesHeightAll.push(margins);
+      }
+  }
+
+  // If notes on page
+  if (notesHeightAll.length > 0) {
+
+      // Calculate if all notes fit on the page;
+      let reducer = (accumulator, currentValue) => accumulator + currentValue;
+      let allHeight = notesHeightAll.reduce(reducer);
+      let paddingTop = getComputedStyle(container).paddingTop;
+      let paddingContainer = parseInt(paddingTop);
+
+      let totalHeight = allHeight + paddingContainer;
+
+      if (totalHeight > maxHeight) {
+
+          let lastNote = notes[notes.length - 1];
+          arrayOverflow.add(lastNote);
+          lastNote.remove();
+
+          checkOverflownote(notesClass, pageElement, maxHeight, arrayOverflow, container);
+
+      }
+
+
+  }
+}
--- a/maquette-tests/csspageweaver/plugins/footnotesFix/.gitignore
+++ b/maquette-tests/csspageweaver/plugins/footnotesFix/.gitignore
@ -0,0 +1 @@
+.DS_Store
--- a/maquette-tests/csspageweaver/plugins/footnotesFix/README.md
+++ b/maquette-tests/csspageweaver/plugins/footnotesFix/README.md
@ -0,0 +1,95 @@
+# Plugin to fix footnotes reset issue
+
+This plugin fix the issue of footnote reset.
+
+You can use the current method to declare footnotes:
+
+```CSS
+@page {
+    @footnote {
+      float: bottom;
+    }
+  }
+  
+.pagedjs_footnote { 
+  float: footnote; 
+}
+```
+
+This style is also added to the default stylesheet `footnotes.css` of this plugin. You can delete it if you have already declared footnotes in your own stylesheet (don't forget to remove it from the `config.json` as well).
+
+
+## How to use the plugin
+
+Add this folder to `csspageweaver/plugins/`.
+
+Call the plugin in `csspageweaver/manifest.json`:
+
+```json
+	"plugins": [
+        "footnotesFix",
+        // other plugins ...
+	],
+```
+
+## Configuration
+
+In `manifest.json`, you can modify/add some parameters:
+
+```json
+    "plugins":{
+        "footnotesFix"
+    },
+    "pluginsParameters":{
+        "footnotesFix": {
+            "selector": ".footnote",
+            "reset": ".chapter"
+        }
+    },
+```
+
+All the parameters are optional.
+
+- `selector` → CSS selector for the note element (must be inline in the HTML), by default is `.footnote`
+- `reset` → CSS selector where you want reset note counter. If you want to reset on the page: `page`
+
+
+## Notes in HTML
+
+In your HTML, the note must be a `<span>` inserted in the text, like this:
+
+```HTML
+Donec tincidunt, odio vel vestibulum sollicitudin, nibh dolor tempor sapien, ac laoreet 
+sem felis ut purus.&#8239;<span class=".footnote">Vestibulum neque ex, ullamcorper sit 
+amet diam sed, pharetra laoreet sem.</span> Morbi cursus bibendum consectetur. Nullam vel 
+lacus congue nibh pulvinar maximus sit amet eu risus. Curabitur semper odio mauris, nec 
+imperdiet velit pharetra non. Aenean accumsan nulla ac ex iaculis interdum.
+```
+
+You can use the [inline_notes` plugin](https://gitlab.com/csspageweaver/plugins/inline_notes) to create these span elements from listed notes, which are more common in conversion tools like Pandoc.
+
+The inline_notes plugin should be called before the footnotes plugin in the `manifest.json`:
+
+
+```json
+	"plugins": [
+        "inline_notes",
+        "footnotes_fix",
+        // other plugins ...
+	],
+```
+
+## Styling call & footer
+
+It's possible to change the styles of call notes and marker notes directly in your stylesheet like in the following code:
+
+```CSS
+::footnote-call{
+    font-weight: bold;
+}
+
+::footnote-marker{
+    font-weight: bold;
+}
+```
+
--- a/maquette-tests/csspageweaver/plugins/footnotesFix/config.json
+++ b/maquette-tests/csspageweaver/plugins/footnotesFix/config.json
@ -0,0 +1,9 @@
+{
+	"name": "Footnotes",
+	"description": "Fix footnote reset",
+	"author": ["Julie Blanc"],
+	"licence": "MIT",
+	"version": "1.0",
+	"hook": "footnotes.js",
+	"stylesheet": "footnotes.css"
+}
--- a/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.css
+++ b/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.css
@ -0,0 +1,9 @@
+@page {
+    @footnote {
+      float: bottom;
+    }
+  }
+  
+.pagedjs_footnote { 
+  float: footnote; 
+}
--- a/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.js
+++ b/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.js
@ -0,0 +1,84 @@
+/**
+ * @name Footnotes
+ * @file Reset the way footnote are counted
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/footnotesFix/ }
+ */
+
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+export default class footnotes extends Handler {
+
+  constructor(chunker, polisher, caller) {
+    super(chunker, polisher, caller);
+    this.parameters = cssPageWeaver.features.footnotesFix.parameters;
+    this.reset = this.parameters?.reset ; 
+    this.counter = 0;
+    this.selector = this.parameters?.selector || ".footnote";
+  }
+
+  beforeParsed(content) {
+   
+
+    let notes = content.querySelectorAll(this.selector);
+    notes.forEach(function (note, index) {
+      note.classList.add("pagedjs_footnote");
+    });
+
+
+   
+    if(this.reset){
+      let elems = content.querySelectorAll(this.reset);        
+      elems.forEach(function (elem, index) {
+          var span = document.createElement('span');
+          span.classList.add("reset-fix-footnote");
+          span.style.position = "absolute";
+          elem.insertBefore(span, elem.firstChild);
+      });
+    }else{
+      console.log("[footnotesFix] no reset")
+    }
+   
+  }
+
+
+  afterPageLayout(pageElement, page, breakToken){
+
+    if(this.reset){
+
+      // reset on pages
+      if(this.reset === "page"){
+          this.counter = 0;  
+      }
+
+      // reset on specific element
+      let newchapter = pageElement.querySelector('.reset-fix-footnote');
+      if(newchapter){
+          this.counter = 0;        
+      }
+
+      let footnotes = pageElement.querySelectorAll(".pagedjs_footnote_content [data-note]");
+    
+      let callnotes = pageElement.querySelectorAll('a.pagedjs_footnote');
+      callnotes.forEach((call, index) => {
+
+          this.counter = this.counter + 1; // increment
+          let num = this.counter - 1;
+
+          // update data-counter for call
+          call.setAttribute('data-counter-footnote-increment', num);
+          call.style.counterReset = "footnote " + num;
+
+          // update data-counter for marker
+          let footnote = footnotes[index];
+          let dataCounter = num + 1;
+          footnote.setAttribute('data-counter-note', dataCounter);
+          footnote.style.counterReset = "footnote-marker " + num;
+
+      });
+    }
+  }
+
+
+
+}
--- a/maquette-tests/csspageweaver/plugins/inlineNotes/inlineNotes.js
+++ b/maquette-tests/csspageweaver/plugins/inlineNotes/inlineNotes.js
@ -11,7 +11,6 @@ export default class inlineNotes extends Handler {

  constructor(chunker, polisher, caller) {
    super(chunker, polisher, caller);
-    this.section = cssPageWeaver.features.inlineNotes.parameters?.section || false,
    this.input = cssPageWeaver.features.inlineNotes.parameters?.input || ".footnote-ref"; // ← CSS selector of the call element 
    this.containerNotes = cssPageWeaver.features.inlineNotes.parameters?.containerNotes || "#footnotes"; // ← CSS selector of the container of the footnote
    this.newClass = cssPageWeaver.features.inlineNotes.parameters?.newClass || "inline-note"; // ← Class of the span create for the note
@ -22,7 +21,6 @@ export default class inlineNotes extends Handler {
    inlineNotesHandler({
        content: content,
        input: this.input,
-        section: this.section,
        containerNotes: this.containerNotes,
        type: this.newClass
    });
@ -37,25 +35,13 @@ function inlineNotesHandler(params){
  let content = params.content;
  let input = params.input;
  let type = params.type;
-  let section = params.section;
-  let containerNotes = params.containerNotes;
+  
+  createNotes(content, input, type);

-  if (section) {
-    let sections = content.querySelectorAll(section);
-    sections.forEach(sectionEl => {
-      createNotes(sectionEl, input, type);
-      let noteContainer = sectionEl.querySelector(containerNotes);
-      if (noteContainer) {
-        noteContainer.remove();
-      }
-    });
-  } else {
-    createNotes(content, input, type);
-    let noteContainer = content.querySelector(containerNotes);
-    if (noteContainer) {
+   let noteContainer = content.querySelector(params.containerNotes);
+   if(noteContainer){
      noteContainer.remove();
-    }
-  }
+   }

 }

--- a/maquette-tests/csspageweaver/plugins/sidenotes/sidenotes.js
+++ b/maquette-tests/csspageweaver/plugins/sidenotes/sidenotes.js
@ -33,6 +33,27 @@ export default class sidenotes extends Handler {
    //   note.style.left = "0px";  
    // }); 

+    let notes = content.querySelectorAll(this.notesClass);
+    notes.forEach(function (note, index) {
+      note.style.position = "absolute";
+      note.style.top = "0px";
+      note.style.left = "0px";  
+    }); 
+
+  
+  }
+
+  afterPageLayout(pageElement, page, breakToken) {
+    let pageBox = pageElement.querySelector(".pagedjs_pagebox");
+    var div = document.createElement('div');
+    div.classList.add("note-container")
+    pageBox.appendChild(div)
+    let notes = pageElement.querySelectorAll(this.notesClass);
+    notes.forEach(function (note, index) {
+      // console.log(note);
+      div.appendChild(note);
+      note.style.position = "relative";
+    }); 
  
  }

--- a/maquette-tests/index.html
+++ b/maquette-tests/index.html
@ -5,14 +5,28 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon">
-    <title>CSS Page Weaver Example</title>
+    <title>D6cor</title>
    <script src="/csspageweaver/main.js" type="module"></script>
-    <link rel="stylesheet" type="text/css" href="/assets/fonts/WagramSlab/stylesheet.css">
-     <link rel="stylesheet" type="text/css" href="/assets/fonts/Timezone-HAL/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Timezone-HAL/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/Selectric/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/ESface/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Ivory/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/IvoryMono/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/NectoMono/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/OldRound-luuse/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Redaction/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Satoshi/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/HNoaillesFutura/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/HNoaillesTimes/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Adelphe/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Wagram/stylesheet.css">
+     <link rel="stylesheet" type="text/css" href="/assets/fonts/WagramSlab/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/WagramMonoSlab/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/RoutedGothic/stylesheet.css">
-
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/ITCCheltenham/style.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/BaskemoSans/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Bilzig/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/DecorRound/stylesheet.css">

 </head>

@ -24,16 +38,47 @@
    </section>


+
+      <div class="running-nav-decor">
+            <ul>
+            <li class="nav-chevron">></li>
+            <li class="nav-title">D6cor</li>
+            </ul>
+        </div>
+   
+
+
+
    <section class="chapter" id="olivain-porry">
+         <div class="chapter-nav">
+            <ul>
+                <li>D6cor</li>
+                <li class="selected">Essais</li>
+                <li>Portfolio</li>
+                <li>Entretiens</li>
+            </ul>
+        </div>
+
+        <div class="running-nav">
+            <ul>
+            <li class="nav-author">Olivain Porry</li>
+            <li class="nav-title">Un robot-poète ne&nbsp;nous fait toujours pas peu</li>
+            </ul>
+        </div>
        <div class="chapter-header">
-            
-            <h2>Un robot-poète ne nous fait toujours pas peur</h2>
-            <p class="type">Essai</p>
-            <p class="author">Olivain Porry</p>
-            <p class="bio">Olivain Porry est artiste, docteur en recherche-création (SACRe) du laboratoire EnsadLab
+                        <p class="type">Essai</p>
+                        <div class="hgroup">
+                            <h2><span>Un robot-poète ne&nbsp;nous fait toujours pas peur</span></h2>
+                            <p class="author">Olivain Porry</p>
+                        </div>
+          
+            <div class="bio">
+                <p class="name">Olivain Porry</p>
+                <p class="description">est artiste, docteur en recherche-création (SACRe) du laboratoire EnsadLab
                (université PSL) et diplômé d'un DNSEP de l'École des Beaux-Arts de Nantes. Son travail plastique se
                concentre sur l'émergence, dans une expérience esthétique, de modalités relationnelles entre public,
                dispositif artistique et environnement. </p>
+            </div>
        </div>

        <p>Entouré d’un cadre noir et brillant, posé sur une surface blanche et
@ -135,7 +180,7 @@
            avec eux et entretenir ces interactions. Sur des plateformes comme
            Medium et Quora, la quantité de contenus générés par des algorithmes
            d’intelligence artificielle a augmenté de manière significative ces
-            dernières années pour atteindre jusqu’à 40 % de ce qui y est posté<a href="#fn6" class="footnote-ref"
+            dernières années pour atteindre jusqu’à 40% de ce qui y est posté<a href="#fn6" class="footnote-ref"
                id="fnref6" role="doc-noteref"><sup>6</sup></a>. Un pourcentage qui serait
            équivalent à celui des productions générées par IA sur l’ensemble du
            réseau internet<a href="#fn7" class="footnote-ref" id="fnref7" role="doc-noteref"><sup>7</sup></a>.</p>
@ -251,6 +296,7 @@
            stratégie d’attaque au nom évocateur : la poésie antagoniste<a href="#fn18" class="footnote-ref"
                id="fnref18" role="doc-noteref"><sup>18</sup></a>.</p>
        <h3>Pour une poésie antagoniste</h3>
+
        <p>Dans un article publié en 2023, des chercheurs ont démontré qu’ils
            étaient parvenus à faire apparaître des données d’entraînement brutes
            utilisées par OpenAI en instruisant ChatGPT de répéter un même mot à
@ -304,6 +350,7 @@
            technologies de langage, mais s’affirment comme des espaces
            d’expérimentation critique, capables d’agir directement sur les régimes
            linguistiques et algorithmiques contemporains.</p>
+            
        <h3>Toujours pas peur</h3>
        <p>Pris dans des boucles de production automatisées et soumis à des
            logiques d’optimisation, de standardisation et de rendement, le langage
@ -507,11 +554,29 @@

    <section class="chapter" id="outdoor-computer-club">

+          <div class="running-nav">
+            <ul>
+            <li class="nav-author">Outdoor computer club</li>
+            <li class="nav-title">E l’aria diventa più respirabile per&nbsp;tutti</li>
+            </ul>
+        </div>
+
+         <div class="chapter-nav">
+            <ul>
+                <li>D6cor</li>
+                <li class="selected">Essais</li>
+                <li>Portfolio</li>
+                <li>Entretiens</li>
+            </ul>
+        </div>

        <div class="chapter-header">
-            <h2>E l’aria diventa più respirabile per tutti: Une télévision pirate pour le quartier</h2>
            <p class="type">Essai</p>
-            <p class="author">Outdoor computer club</p>
+            <div class="hgroup">
+
+                <h2><span>E l’aria diventa più respirabile per&nbsp;tutti: une&nbsp;télévision pirate pour le&nbsp;quartier</span></h2>
+                <p class="author">Outdoor computer club</p>
+            </div>
            <p class="bio">Le Outdoor Computer Club est un collectif qui explore des manières de démystifier et de se
                réapproprier collectivement les technologies de réseau et de l'information. Le OCC crée des espaces de
                bricolage et de réflexion collectifs ainsi que des interventions dans l’espace public.</p>
@ -656,7 +721,6 @@
            favorise les échanges de savoirs, les rencontres intergénérationnelles
            et la circulation des luttes entre différents secteurs sociaux.</p>

-        <hr>
        <p>Pour le gouvernement Chávez, soutenir les télévisions communales
            permet de s’appuyer sur des acteurs disposant d’une légitimité populaire
            forte, souvent supérieure à celle de la télévision d’État. Plutôt que
@ -688,7 +752,6 @@

        <p>C'est en riposte à ce monopole qu'un groupe d'activistes décide en
            2002 de créer un réseau national de télévision pirate. </p>
-        <hr>
        <p>A cette époque, la télévision numérique n'est pas encore démocratisée
            et la télévision satellite peu accessible, la plupart des foyers
            italiens reçoivent l'image sur leur poste via des ondes émises par des
@ -696,7 +759,6 @@
            des collines fassent obstacle à la diffusion du signal d'une chaîne de
            télévision et créent des zones grises où cette chaîne n'est pas
            recevable. On appelle ça un cône d'ombre.</p>
-        <hr>
        <p>C'est le cas à Bologne, au croisement de la via Rialto et de la via
            Orfeo, où l'équipe de<em> OrfeoTV</em> installe son studio de télévision
            au milieu d'un espace électromagnétique vacant : un cône d'ombre de la
@ -916,34 +978,8 @@
            <p>« What is Mini FM? » Consulté le 12 janvier 2026. <a
                    href="http://anarchy.k2.tku.ac.jp/radio/micro/what_is_minifm/index.html">http://anarchy.k2.tku.ac.jp/radio/micro/what_is_minifm/index.html</a>.
            </p>
-            <h2 id="images">Images : </h2>
-            <p><br />
-                Les images sont dans le dossier parent de ce document<br />
-                Il s’agit d’images issues de notre expérience de construction d’une
-                télévision pirate, elle n’ont pas de place particulière dans le récit
-                donc <strong>peuvent être disposées n’importe ou<br />
-                    <br />
-                </strong>les legendes de ces images : </p>
-            <p>Image de l’antenne : Antenne et émetteur sur un pylône en bois,
-                installé au dernier étage du bâtiment Voix Machine, à Fontenay S/ Bois.
-                2025</p>
-            <p>Image du spectateur : Réception de la première emission de OTVC. </p>
-            <p>Les deux autres images ne sont pas essentielles, elle peuvent être
-                ajoutées selon les besoins du ou de la graphiste.<br />
-                <br />
-                Zoom de l’antenne : Antenne « Loop », construite pour emettre sur la
-                fréquance 471.25 Mhz, la chaine 21.
-            </p>
-            <p>Zoom de l’emetteur : Emetteur constitué d’un modulateur et d’un
-                amplificateur achetés sur leboncoin.fr. Cables rca et coaxiaux. </p>
-            <h3 id="bio">Bio :</h3>
-            <p>Le Outdoor Computer Club est un collectif qui explore des manières de
-                démystifier et de se réapproprier collectivement les technologies de
-                réseau et de l'information. Le OCC crée des espaces de bricolage et de
-                réflexion collectifs ainsi que des interventions dans l’espace
-                public.</p>
+           
            <section id="footnotes" class="footnotes footnotes-end-of-document" role="doc-endnotes">
-                <hr />
                <ol>
                    <li id="fn1">
                            <p>Emanuelli, Massimo. « Orfeo Tv ». 2019</p>
@ -979,14 +1015,35 @@

            <section class="chapter" id="jean-noel-lafague">

-                      <div class="chapter-header">
-            <h2>Code créatif</h2>
-            <p class="author">Jean-Noël Lafargue</p>
-            <p class="bio">Le Outdoor Computer Club est un collectif qui explore des manières de démystifier et de se
-                réapproprier collectivement les technologies de réseau et de l'information. Le OCC crée des espaces de
-                bricolage et de réflexion collectifs ainsi que des interventions dans l’espace public.</p>
+                <div class="running-nav">
+            <ul>
+            <li class="nav-author">Jean-Noël Lafargue</li>
+            <li class="nav-title">Code créatif</li>
+            </ul>
        </div>

+         <div class="chapter-nav">
+            <ul>
+                <li>D6cor</li>
+                <li class="selected">Essais</li>
+                <li>Portfolio</li>
+                <li>Entretiens</li>
+            </ul>
+        </div>
+
+        <div class="chapter-header">
+            <p class="type">Essai</p>
+            <div class="hgroup">
+
+                <h2><span>Code créatif</span></h2>
+                <p class="author">Jean-Noël Lafargue</p>
+            </div>
+        
+        </div>
+
+
+
+
                <p>On peut distinguer deux types d’enseignements des pratiques
                    numériques dans le cadre des départements d’art ou de design en école
                    d’art ou à l’université.</p>
--- a/maquette-tests/js/items-decor.js
+++ b/maquette-tests/js/items-decor.js
@ -8,7 +8,6 @@ export default class myCustomHandler2 extends Handler {

  
    afterPageLayout(pageElement, page, breakToken) {
-      console.log(pageElement);
      let pageArea = pageElement.querySelector(".pagedjs_area");
      let pageAreaTop = pageArea.getBoundingClientRect().top;
      let items = pageElement.querySelectorAll("p, h3, h4, .inline-note");
--- a/maquette-tests/type.html
+++ b/maquette-tests/type.html
@ -4,11 +4,11 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
-    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
+    <link rel="stylesheet" type="text/css" href="assets/type-specimen.css">

    <link rel="stylesheet" type="text/css" href="/assets/fonts/Timezone-HAL/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/Selectric/stylesheet.css">
-        <link rel="stylesheet" type="text/css" href="/assets/fonts/ESface/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/ESface/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/Ivory/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/IvoryMono/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/NectoMono/stylesheet.css">
@ -23,13 +23,289 @@
    <link rel="stylesheet" type="text/css" href="/assets/fonts/WagramMonoSlab/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/RoutedGothic/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/ITCCheltenham/style.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/BaskemoSans/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Bilzig/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Adelphe-Trouble-Germinal/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Garabosse/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Velvetyne/stylesheet.css">



 </head>
 <body id="type-specimen">

+      <section class="specimen" data-type="Adelphe Trouble Germinal">

+        <p class="type">'Adelphe Trouble Germinal'</p>
+        <div class="col-left" >
+        <h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
+        <h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+
+        </div>
+
+        <div class="content">
+        <p>
+            En réponse à cet appel, des dizaines de télévisions de rue se
+            constituent dans tout le Pays : C'est le début du mouvement
+            <em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
+            chaînes de télévision pirate qui apparaissent sur le réseau
+            <em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
+            autogérés créés pour l'occasion mais aussi d'associations existantes ou
+            de groupes étudiants. Elles suivent chacune les principes du mouvement
+            mais leur situation géographique et sociale teinte les contenus
+            produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
+            reportages à propos des dynamiques sociales sur place. Dans la ville
+            balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
+            construit par un groupe de personnes handicapées et traite des questions
+            locales à travers leur prisme tandis qu'à Florence Gli Anelli
+            <em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
+            informe sur les politiques migratoires et les conditions de vie des sans
+            papiers. 
+        </p>
+
+        <p>
+            Au fil des années, la précarité financière et légale des
+            <em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
+            télévisions de quartier chercheront alors à régulariser leur activité,
+            sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
+            sur le paysage médiatique et la plupart des chaînes arrêteront leur
+            activité à l'aube des années 2010. Telestreet aura cependant participé à
+            la construction d'une approche participative de la télévision que l'on
+            retrouve aujourd'hui dans l'ADN de certains médias comme
+            <em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
+        </p>
+        </div>
+    </section>
+
+
+      <section class="specimen" data-type="Garabosse Perle">
+
+        <p class="type">Garabosse Perle</p>
+        <div class="col-left" >
+        <h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
+        <h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+
+        </div>
+
+        <div class="content">
+        <p>
+            En réponse à cet appel, des dizaines de télévisions de rue se
+            constituent dans tout le Pays : C'est le début du mouvement
+            <em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
+            chaînes de télévision pirate qui apparaissent sur le réseau
+            <em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
+            autogérés créés pour l'occasion mais aussi d'associations existantes ou
+            de groupes étudiants. Elles suivent chacune les principes du mouvement
+            mais leur situation géographique et sociale teinte les contenus
+            produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
+            reportages à propos des dynamiques sociales sur place. Dans la ville
+            balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
+            construit par un groupe de personnes handicapées et traite des questions
+            locales à travers leur prisme tandis qu'à Florence Gli Anelli
+            <em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
+            informe sur les politiques migratoires et les conditions de vie des sans
+            papiers. 
+        </p>
+
+        <p>
+            Au fil des années, la précarité financière et légale des
+            <em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
+            télévisions de quartier chercheront alors à régulariser leur activité,
+            sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
+            sur le paysage médiatique et la plupart des chaînes arrêteront leur
+            activité à l'aube des années 2010. Telestreet aura cependant participé à
+            la construction d'une approche participative de la télévision que l'on
+            retrouve aujourd'hui dans l'ADN de certains médias comme
+            <em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
+        </p>
+        </div>
+    </section>
+
+
+      <section class="specimen" data-type="Velvetyne">
+
+        <p class="type">Velvetyne</p>
+        <div class="col-left" >
+        <h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
+        <h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+
+        </div>
+
+        <div class="content">
+        <p>
+            En réponse à cet appel, des dizaines de télévisions de rue se
+            constituent dans tout le Pays : C'est le début du mouvement
+            <em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
+            chaînes de télévision pirate qui apparaissent sur le réseau
+            <em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
+            autogérés créés pour l'occasion mais aussi d'associations existantes ou
+            de groupes étudiants. Elles suivent chacune les principes du mouvement
+            mais leur situation géographique et sociale teinte les contenus
+            produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
+            reportages à propos des dynamiques sociales sur place. Dans la ville
+            balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
+            construit par un groupe de personnes handicapées et traite des questions
+            locales à travers leur prisme tandis qu'à Florence Gli Anelli
+            <em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
+            informe sur les politiques migratoires et les conditions de vie des sans
+            papiers. 
+        </p>
+
+        <p>
+            Au fil des années, la précarité financière et légale des
+            <em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
+            télévisions de quartier chercheront alors à régulariser leur activité,
+            sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
+            sur le paysage médiatique et la plupart des chaînes arrêteront leur
+            activité à l'aube des années 2010. Telestreet aura cependant participé à
+            la construction d'une approche participative de la télévision que l'on
+            retrouve aujourd'hui dans l'ADN de certains médias comme
+            <em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
+        </p>
+        </div>
+    </section>
+
+      <section class="specimen" data-type="bilzig">
+
+        <p class="type">Bilzig</p>
+        <div class="col-left" >
+        <h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
+        <h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+
+        </div>
+
+        <div class="content">
+        <p>
+            En réponse à cet appel, des dizaines de télévisions de rue se
+            constituent dans tout le Pays : C'est le début du mouvement
+            <em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
+            chaînes de télévision pirate qui apparaissent sur le réseau
+            <em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
+            autogérés créés pour l'occasion mais aussi d'associations existantes ou
+            de groupes étudiants. Elles suivent chacune les principes du mouvement
+            mais leur situation géographique et sociale teinte les contenus
+            produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
+            reportages à propos des dynamiques sociales sur place. Dans la ville
+            balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
+            construit par un groupe de personnes handicapées et traite des questions
+            locales à travers leur prisme tandis qu'à Florence Gli Anelli
+            <em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
+            informe sur les politiques migratoires et les conditions de vie des sans
+            papiers. 
+        </p>
+
+        <p>
+            Au fil des années, la précarité financière et légale des
+            <em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
+            télévisions de quartier chercheront alors à régulariser leur activité,
+            sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
+            sur le paysage médiatique et la plupart des chaînes arrêteront leur
+            activité à l'aube des années 2010. Telestreet aura cependant participé à
+            la construction d'une approche participative de la télévision que l'on
+            retrouve aujourd'hui dans l'ADN de certains médias comme
+            <em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
+        </p>
+        </div>
+    </section>
+
+
+       <section class="specimen" data-type="wagram-slab">
+
+        <p class="type">Wagram Slab (super variable)</p>
+        <div class="col-left" >
+        <h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
+        <h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        </div>
+
+        <div class="content">
+        <p>
+            En réponse à cet appel, des dizaines de télévisions de rue se
+            constituent dans tout le Pays : C'est le début du mouvement
+            <em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
+            chaînes de télévision pirate qui apparaissent sur le réseau
+            <em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
+            autogérés créés pour l'occasion mais aussi d'associations existantes ou
+            de groupes étudiants. Elles suivent chacune les principes du mouvement
+            mais leur situation géographique et sociale teinte les contenus
+            produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
+            reportages à propos des dynamiques sociales sur place. Dans la ville
+            balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
+            construit par un groupe de personnes handicapées et traite des questions
+            locales à travers leur prisme tandis qu'à Florence Gli Anelli
+            <em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
+            informe sur les politiques migratoires et les conditions de vie des sans
+            papiers. 
+        </p>
+
+        <p>
+            Au fil des années, la précarité financière et légale des
+            <em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
+            télévisions de quartier chercheront alors à régulariser leur activité,
+            sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
+            sur le paysage médiatique et la plupart des chaînes arrêteront leur
+            activité à l'aube des années 2010. Telestreet aura cependant participé à
+            la construction d'une approche participative de la télévision que l'on
+            retrouve aujourd'hui dans l'ADN de certains médias comme
+            <em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
+        </p>
+        </div>
+    </section>
+    
+
+     <section class="specimen" data-type="baskemo-sans">
+
+        <p class="type">Baskemo Sans</p>
+        <div class="col-left" >
+        <h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
+        <h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+        <h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
+
+        </div>
+
+        <div class="content">
+        <p>
+            En réponse à cet appel, des dizaines de télévisions de rue se
+            constituent dans tout le Pays : C'est le début du mouvement
+            <em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
+            chaînes de télévision pirate qui apparaissent sur le réseau
+            <em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
+            autogérés créés pour l'occasion mais aussi d'associations existantes ou
+            de groupes étudiants. Elles suivent chacune les principes du mouvement
+            mais leur situation géographique et sociale teinte les contenus
+            produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
+            reportages à propos des dynamiques sociales sur place. Dans la ville
+            balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
+            construit par un groupe de personnes handicapées et traite des questions
+            locales à travers leur prisme tandis qu'à Florence Gli Anelli
+            <em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
+            informe sur les politiques migratoires et les conditions de vie des sans
+            papiers. 
+        </p>
+
+        <p>
+            Au fil des années, la précarité financière et légale des
+            <em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
+            télévisions de quartier chercheront alors à régulariser leur activité,
+            sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
+            sur le paysage médiatique et la plupart des chaînes arrêteront leur
+            activité à l'aube des années 2010. Telestreet aura cependant participé à
+            la construction d'une approche participative de la télévision que l'on
+            retrouve aujourd'hui dans l'ADN de certains médias comme
+            <em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
+        </p>
+        </div>
+    </section>
+    
    <section class="specimen" data-type="cheltenham">

        <p class="type">ITC Cheltenham</p>
@ -255,48 +531,7 @@
    </section>


-    <section class="specimen" data-type="wagram-slab">

-        <p class="type">Wagram Slab (super variable)</p>
-        <div class="col-left" >
-        <h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
-        <h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
-        <h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
-        </div>
-
-        <div class="content">
-        <p>
-            En réponse à cet appel, des dizaines de télévisions de rue se
-            constituent dans tout le Pays : C'est le début du mouvement
-            <em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
-            chaînes de télévision pirate qui apparaissent sur le réseau
-            <em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
-            autogérés créés pour l'occasion mais aussi d'associations existantes ou
-            de groupes étudiants. Elles suivent chacune les principes du mouvement
-            mais leur situation géographique et sociale teinte les contenus
-            produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
-            reportages à propos des dynamiques sociales sur place. Dans la ville
-            balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
-            construit par un groupe de personnes handicapées et traite des questions
-            locales à travers leur prisme tandis qu'à Florence Gli Anelli
-            <em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
-            informe sur les politiques migratoires et les conditions de vie des sans
-            papiers. 
-        </p>
-
-        <p>
-            Au fil des années, la précarité financière et légale des
-            <em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
-            télévisions de quartier chercheront alors à régulariser leur activité,
-            sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
-            sur le paysage médiatique et la plupart des chaînes arrêteront leur
-            activité à l'aube des années 2010. Telestreet aura cependant participé à
-            la construction d'une approche participative de la télévision que l'on
-            retrouve aujourd'hui dans l'ADN de certains médias comme
-            <em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
-        </p>
-        </div>
-    </section>

    <section class="specimen" data-type="wagram-mono-slab">

--- a/pdf-print/WagramSlab_11-5:16.pdf
+++ b/pdf-print/WagramSlab_11-5:16.pdf
--- a/pdf-print/WagramSlab_11:18.pdf
+++ b/pdf-print/WagramSlab_11:18.pdf
--- a/pdf-print/WagramSlab_12:17.pdf
+++ b/pdf-print/WagramSlab_12:17.pdf
				`@ -1 +0,0 @@`
				{"version":3,"sources":["base/_type.scss","base/_var.scss","style.css","base/_body.scss","base/_layout.scss","base/_type-specimen.scss","modules/_text.scss","modules/_notes.scss","modules/_chapter-header.scss","modules/_item-decor.scss"],"names":[],"mappings":"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","file":"style.css"}
				`@ -0,0 +1 @@`
				{"version":3,"sources":["base/_type.scss","base/_var.scss","style.css","base/_body.scss","base/_layout.scss","base/_type-specimen.scss","modules/_text.scss","modules/_footnotes.scss","modules/_chapter-header.scss","modules/_item-decor.scss"],"names":[],"mappings":"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","file":"style.css"}