details styles

maquette-tests/assets/css/03_layout.css

@@ -2,7 +2,7 @@
 
   @page {
     size: 165mm 240mm;
-    margin-top: 22mm;
+    margin-top: 95px;
     margin-bottom: 18mm;
     bleed: 6mm;
     marks: crop;

maquette-tests/assets/css/chapter-header.css

@@ -18,8 +18,8 @@
   font-weight: normal;
   /* margin-top: calc(var(--baseline)*2);*/
   position: relative;
-  top: calc(var(--baseline)*0.25); 
-  margin-bottom: calc(var(--baseline)*3 + 11px); 
+  top: calc(var(--baseline)*-0.25 - 2px); 
+  margin-bottom: calc(var(--baseline)*3 + 13px); 
   padding-right: calc(var(--unit)*2);
   position: relative;
   padding-left: 15px;
@@ -122,7 +122,7 @@
 }
 
 .chapter-header .title-after {
-  bottom: calc(var(--baseline)*-1.5);
+  bottom: calc(var(--baseline)*-1.5 + 1px);
 }
 
 
@@ -130,18 +130,14 @@
   position: absolute;
   left: calc(var(--pagedjs-margin-left)*-1);
   padding-left: 19px;
-    top: -36px;
+  top: -47px;
 }
 
 .hgroup-after{
   position: absolute;
-  bottom: calc(var(--baseline)*-5 + 4px);
+  bottom: calc(var(--baseline)*-5 - 1px);
   right: calc(var(--pagedjs-margin-right)*-1);
-
   text-align: right;
-  /* left: calc(var(--pagedjs-margin-left)*-1);
-  padding-left: 19px;
-    top: -36px; */
 }
 
 
@@ -151,17 +147,19 @@
 /* SPECIFIC ----------------------------------------------- */
 
 #charlie-aubry .hgroup{
-  top: calc(var(--baseline)*0.5);
+   top: calc(var(--baseline)*-0.25 - 2px); 
+  top: -2px;
 }
 #charlie-aubry .chapter-header .title-before{
-      top: calc(var(--baseline) * -1.5);
-
+    /* top: calc(var(--baseline)*-1.25); */
+     top: calc(var(--baseline)*-1.5);
 }
 
 #charlie-aubry .chapter-header .title-after {
+  /* bottom: calc(var(--baseline)*-5 - 1px); */
     bottom: calc(var(--baseline) * -1.75 + 1px);
 }
 
 #charlie-aubry .hgroup-after{
-  bottom: calc(var(--baseline)*-12 - 4px);
+  bottom: calc(var(--baseline)*-11 - 10px);
 }

maquette-tests/assets/css/entretiens.css

@@ -1,19 +1,22 @@
 .description {
-    /* margin-bottom: calc(var(--baseline)*1); */
     padding-left: calc(var(--unit)*0.75);
     padding-right: calc(var(--unit)*0.75);
     position: relative;
+    top: -4px;
+
 
 }
 
-.description-after {
-    margin-top: -2px;
-    margin-bottom: calc(var(--baseline)*1);
-}
 
 .description-before {
-    margin-bottom: 2px;
+    position: relative;
+    top: -6px;
 }
+.description-after {
+    margin-top: -5px;
+    margin-bottom: calc(var(--baseline)*1 - 3px);
+}
+
 
 .description-before,
 .description-after {

maquette-tests/assets/css/subtitles.css

@@ -97,12 +97,26 @@ h3, h4{
 
 
 
+
+
+
 /* if page top */
 
-.subtitle-top-page {
+.pagedjs_right_page .subtitle-top-page h3 {
     margin-top: 0px; 
 } 
 
-.subtitle-top-page [data-count="2"]{
+.pagedjs_right_page .subtitle-top-page [data-count="2"]{
     color: transparent
 }
+
+
+
+.pagedjs_left_page .subtitle-top-page h3 {
+    margin-top: 5px; 
+} 
+
+.pagedjs_left_page .subtitle-top-page .decor-h3_big [data-count="1"],
+.pagedjs_left_page .subtitle-top-page .decor-h3_big [data-count="2"]{
+    color: transparent!important
+}

maquette-tests/index.html

@@ -106,7 +106,7 @@
             Ducrocq, tandis que Boris Vian, lui, s’en amusait. Dans une
             correspondance restée célèbre sous le titre « Un robot-poète ne nous
             fait pas peur »<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>, il
-            écrivait : « Mirandolez, <br>éclaboussez ce robot poète de vos connaissances en cybernétique,
+            écrivait : « Mirandolez, éclaboussez ce <br>robot poète de vos connaissances en cybernétique,
             expliquez-lui comment il marche et vous l’aurez tout humble à votre
             merci. »</p>
         <p>Aujourd’hui, notre rapport aux mots prend une forme nouvelle,
@@ -139,8 +139,8 @@
             qu’est COCO<a href="#fn5" class="footnote-ref" id="fnref5" role="doc-noteref"><sup>5</sup></a>. Utilisé
             massivement parce
             qu’accessible gratuitement et facilement dès 2014, COCO contient des
-            textes en anglais qui <br>décrivent des images. Ces légendes commencent,
-            dans la très grande majorité des cas, par les articles indéfinis « A »
+            textes en anglais qui décrivent des images. Ces légendes commencent,
+            dans la très grande majorité des <br><br>cas, par les articles indéfinis « A »
             et « An » : <em>An apple on a table, a brown teddy bear with a blue bib
                 on that says baby</em>. La surreprésentation de ces articles indéfinis
             en début de phrase a mené BLIP à produire, au cours de son entraînement,
@@ -170,7 +170,7 @@
             sociolinguistique. Les LLM animent aujourd’hui de très nombreux
             programmes informatiques, des <em>bots,</em> qui lisent et écrivent sur
             internet avec des objectifs allant de l’exploration de données (<em>data
-                mining</em>) à la diffusion de propagande politique. De X à Instagram en
+                mining</em>) à la diffusion <br>de propagande politique. De X à Instagram en
             passant par Reddit, les réseaux sociaux pullulent de ces <em>bots</em>
             qui produisent textes, images et sons pour nous encourager à interagir
             avec eux et entretenir ces interactions. Sur des plateformes comme
@@ -206,7 +206,7 @@
             constituent des matrices lexicales que les locuteurs s’approprient : une
             adoption généralement inconsciente d’un vocabulaire, de lexiques et de
             structures syntaxiques, provoquée par l’usage répété des LLM dans
-            l’exercice d’écriture. Dans ce contexte, le langage apparaît comme une
+            l’exercice <br>d’écriture. Dans ce contexte, le langage apparaît comme une
             matière poreuse, traversée par des flux de textes générés
             automatiquement à travers des logiques systématiques et probabilistes
             décorrélées des dimensions socio-culturelles des langues.
@@ -298,7 +298,9 @@
             garde-fous des grands modèles de langage à travers l’invention d’une
             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>
+
+
+        <h3 class="subtitle-top-page">Pour une poesie 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
@@ -806,7 +808,7 @@
                 réseaux… On se rend compte que tout entre en jeu, la condition sociale{}
                 aussi. Ce sont des autoroutes à vitesses très différentes. [...]</p>
                 <p>Quand je réponds à un appel à candidature, je ne suis pas payé pour
-                le faire, et la réponse est négative la plupart du temps. Passer trois
+                le faire, et la réponse est négative la plupart du <br>temps. Passer trois
                 jours dessus, c’est lourd. Donc là-dessus, l’IA m’aide. [...] On passe de
                 quatre jours à deux heures. Et ça me permet de me recentrer sur ma
                 pratique.</p>
@@ -875,7 +877,8 @@
                 partout, parce que tout est intrinsèquement lié. On ne peut pas parler
                 d’un sujet sans être “tout azimut”, sans croiser des dimensions
                 techniques, politiques, sociales.</p>
-                <h6>Charlie</h6>Ouais. Le plus dur, aujourd’hui, c’est cette dichotomie entre
+                <h6>Charlie</h6>
+                <p>Ouais. Le plus dur, aujourd’hui, c’est cette dichotomie entre
                 le régime capitaliste, la démocratisation du confort, et puis la
                 saturation qu’on est en train de vivre. On voit même des mots comme
                 “écoterroristes” entrer dans le langage courant… Alors qu’en parallèle,

maquette-tests/js/decor-subtitles.js

@@ -94,7 +94,8 @@ export default class itemsDecor extends Handler {
           secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
         }
         const container = document.createElement("div");
-        container.className = "h3_container";
+        container.className = "h3_container " + subtitle.className;
+        subtitle.className = "";
         subtitle.parentNode.insertBefore(container, subtitle);
         container.appendChild(firstDecor);
         container.appendChild(secondDecor);
@@ -128,7 +129,8 @@ export default class itemsDecor extends Handler {
       pageElement.querySelectorAll("h4").forEach(subtitle => {
         this.processTitle(subtitle, symbol, false, isLeft);
         const container = document.createElement("div");
-        container.className = "h4_container";
+        container.className = "h4_container " + subtitle.className;
+        subtitle.className = "";
         subtitle.parentNode.insertBefore(container, subtitle);
         container.appendChild(subtitle);
       });