layout entretiens

maquette-tests/assets/css/entretiens.css

@@ -0,0 +1,97 @@
+
+.description{
+   /* margin-bottom: calc(var(--baseline)*1); */
+    padding-left: calc(var(--unit)*0.75);
+     padding-right: calc(var(--unit)*0.75);
+    position: relative;
+
+}
+
+.description-after{
+    margin-top: -2px;
+    margin-bottom: calc(var(--baseline)*1);
+}
+
+.description-before{
+    margin-bottom: 2px;
+    }
+
+.description-before,
+.description-after{
+   
+    font-size: var(--sign-size);
+     color: var(--sign-color);
+     letter-spacing: var(--sign-spacing);
+     font-family: var(--sign-family);
+     line-height: var(--sign-baseline);
+
+}
+
+.description::before, 
+.description::after{
+    content: "......";
+    font-size: var(--sign-size);
+     color: var(--sign-color);
+     letter-spacing: var(--sign-spacing);
+     font-family: var(--sign-family);
+     line-height: var(--sign-baseline);
+     word-break: break-all;
+     width: calc(var(--unit)*0.75 + 4px);
+     overflow-wrap: anywhere;
+          display: block;
+}
+
+.description::before{
+    position: absolute;
+    left: 0;
+    top: -3px;
+}
+
+.description::after{
+    position: absolute;
+    right: -13px;
+    top: -3px;
+}
+
+
+
+
+
+
+h6{
+     font-size: var(--sign-size);
+     color: var(--sign-color);
+     font-weight: normal;
+         /* margin-bottom: calc(var(--baseline)*1);
+             margin-top: calc(var(--baseline)*1); */
+             position: relative;
+             background-color: white;
+             display: inline;
+             position: relative;
+             z-index: 10;
+             top: calc(var(--baseline)*1);
+}
+
+h6::before{
+    content: "++";
+     font-size: var(--sign-size);
+     color: var(--sign-color);
+     letter-spacing: var(--sign-spacing);
+     font-family: var(--sign-family);
+     line-height: var(--sign-baseline);
+}
+
+
+.h6-before,
+.h6-after{
+     font-size: var(--sign-size);
+     color: var(--sign-color);
+     letter-spacing: var(--sign-spacing);
+     font-family: var(--sign-family);
+     line-height: var(--sign-baseline);
+}
+
+.h6-before{
+    position: absolute;
+    left: -40px;
+}

maquette-tests/assets/css/text.css

@@ -69,52 +69,3 @@ p::before {
 
 
 
-
-.description{
-   /* margin-bottom: calc(var(--baseline)*1); */
-    padding-left: calc(var(--unit)*0.75);
-     padding-right: calc(var(--unit)*0.75);
-    position: relative;
-
-}
-
-.description-after{
-    margin-bottom: calc(var(--unit)*1);
-}
-
-.description-before,
-.description-after{
-   
-    font-size: var(--sign-size);
-     color: var(--sign-color);
-     letter-spacing: var(--sign-spacing);
-     font-family: var(--sign-family);
-     line-height: var(--sign-baseline);
-
-}
-
-.description::before, 
-.description::after{
-    content: "......";
-    font-size: var(--sign-size);
-     color: var(--sign-color);
-     letter-spacing: var(--sign-spacing);
-     font-family: var(--sign-family);
-     line-height: var(--sign-baseline);
-     word-break: break-all;
-     width: calc(var(--unit)*0.75 + 4px);
-     overflow-wrap: anywhere;
-          display: block;
-}
-
-.description::before{
-    position: absolute;
-    left: 0;
-    top: -3px;
-}
-
-.description::after{
-    position: absolute;
-    right: 0;
-    top: -3px;
-}

maquette-tests/csspageweaver/manifest.json

@@ -31,7 +31,8 @@
         "assets/css/notes.css",
         "assets/css/text.css",
         "assets/css/subtitles.css",
-        "assets/css/running-page.css"
+        "assets/css/running-page.css",
+        "assets/css/entretiens.css"
     ],
     "hook": [
         "/js/decor-subtitles.js",

maquette-tests/index.html

@@ -94,6 +94,11 @@
         <p>Mauris tincidunt eleifend eleifend. Nunc in elit venenatis, gravida elit ac, commodo dui. Nulla tempus augue lorem, ut dignissim elit gravida vel. Phasellus dui nulla, lacinia et accumsan a, condimentum sed nisl. Aenean tincidunt vitae eros vel sollicitudin. Suspendisse potenti. Vestibulum eget orci in urna maximus tempus. Suspendisse rhoncus imperdiet nunc, vitae ultricies metus ornare quis. Etiam quis auctor erat.</p>
 
 
+        <div class="h6-before">
+            <div data-count="1">+</div>
+            <div data-count="1">++</div>
+            <div data-count="1">+</div>
+        </div>
                 <h6>Martin</h6>
                 <p>Bonjour Charlie, merci d’avoir accepté cet entretien pour
                 la revue Décor numéro 6. Avant de commencer, j’aimerais revenir
@@ -139,7 +144,7 @@
                 d’exposition, mais que ce soit pas utopique : quelque chose de réel,
                 fonctionnel, et aussi fonctionnel juridiquement. À l’époque, on s’est
                 entouré d’une avocate juriste dans le numérique : avec elle, on a trouvé
-                le périmètre d’action, ce qu’on avait le droit de faire. Les lois
+                le périmètre d’action, ce qu’on avait le droit de <br>faire. Les lois
                 changeaient tous les six mois : à un instant T ça marchait, et ça ne
                 marche plus maintenant.</p>
                 <p>Je me suis entouré d’un docteur en intelligence artificielle qui
@@ -149,15 +154,13 @@
                 l’idée de montrer la consommation, montrer ce que ça génère : des bips
                 informatiques, des ordis qui travaillent, les câbles… On parle du cloud
                 comme si c’était dématérialisé, mais en fait ça arrive vraiment à un
-                endroit, un endroit qui récupère tout ça.</p>
+                endroit, un endroit qui récupère tout ça.[...]</p>
-                <p>[..]</p>
                 <p>En fonction du visage de certains, ça bloquait pendant 30 secondes,
                 et les écrans allaient chercher de la publicité, des choses attractives,
                 pour ces personnes-là, à partir de choses terribles : l’IA qu’on a
                 entraînée essayait de trouver des catégories sociales. C’est un peu ce
                 que fait Facebook : essayer de faire un profil psychologique et social
-                avec quelques photos.</p>
+                avec quelques photos.[...]</p>
-                <p>[..]</p>
                 <p>Pour entraîner l’IA, qu’on a fabriquée de A à Z, on l’a déposée aussi
                 à l’organisme INPI ou je ne sais plus, pour avoir les droits, parce
                 qu’on l’a fait de zéro. Jean-Charles Risch est spécialisé en machine
@@ -180,10 +183,10 @@
                 <h6>Charlie</h6>
                 <p>Je crois que c’est un moyen de comprendre, déjà, pour moi.</p>
                 <p>Jean-Charles, lui, était docteur, il comprenait les enjeux. Mais moi
-                je ne comprenais pas bien. J’avais besoin de le faire avec lui pour
+                je ne comprenais pas bien. J’avais besoin de le faire <br>avec lui pour
                 comprendre l’architecture, et aussi les enjeux : distinguer ce qui est
                 de l’ordre du mythe, du Terminator. D’ailleurs c’est pour ça qu’on l’a
-                nommé <strong>P3 450</strong> : c’est le nom de série des cartes qui
+                nommé <em>P3 450</em> : c’est le nom de série des cartes qui
                 pilotent la quarantaine d’ordis. Et ça faisait référence à au T1000 de
                 Terminator ou bien au film THX 1138…</p>
                 <p>Le titre joue sur le mythe du dépassement de l’humain, mais en le
@@ -195,8 +198,7 @@
                 clair. On a utilisé des datasets, des banques d’images : pour entraîner
                 une IA, il faut des centaines de milliers d’images. On a eu des
                 librairies open source énormes, des centaines de gigas, pour
-                différencier identité de genre, etc.</p>
+                différencier identité de genre, etc.[...]</p>
-                <p>[..]</p>
                 <h6>Martin</h6>
                 <p>Donc lorsque tu commences à travailler avec Jean-Charles
                 Risch, tu comprends comment cela fonctionne, mais tu n’as pas encore la
@@ -208,14 +210,12 @@
                 quatre jours d’installation. Avec beaucoup de schémas, on a fait tourner
                 les machines dans un petit espace, et ça a créé une première version
                 monolithique, à l’échelle de la pièce où on a fait tourner les
-                machines.</p>
+                machines. [...]</p>
-                <p>[..]<br />
+                <p>
-                <br />
                 Quand on entend les ordis réfléchir, le bruit des disques durs… On a
                 envie que ça se matérialise. On s’imagine à l’échelle d’internet : un
-                data center avec des centaines de milliers de serveurs.</p>
+                data center avec des centaines de milliers de serveurs. [...]</p>
-                <p>[..]<br />
+                <p>
-                <br />
                 Mais cela s’est formalisé tard, au moment du montage. Et j’avais envie
                 de ramener quelque chose d’humain, pas juste une baie informatique :
                 raconter des histoires dedans, mettre des objets du quotidien, etc. Mais
@@ -225,7 +225,7 @@
                 <p>Tu parlais des biais, ça me fait penser au chatbot de
                 Microsoft (Tay), qui est devenu raciste en moins de 48h. Est-ce qu’à un
                 moment, en voyant évoluer l’IA, vous avez eu peur que ça prenne une
-                mauvaise tournure ?<br />
+                mauvaise tournure ?</p><p>
                 Avez-vous choisi de la contraindre, ou au contraire de prendre le risque
                 de laisser apparaître ces dérives, parce que cela fait aussi partie de
                 la réalité de ces algorithmes ?</em></p>
@@ -234,9 +234,9 @@
                 que cela puisse exister dans la vraie vie, il fallait que le spectateur
                 rentre sans signer une décharge. Il y avait donc des éléments
                 rhétoriques : on parlait “d’analyse de pixels” plutôt que de
-                portraits.</p>
+                portraits. [...]</p>
-                <p>[..]</p>
+                <p>
-                <p>Après, on n’a pas énormément contraint le système. Là où cela a
+                Après, on n’a pas énormément contraint le système. Là où cela a
                 vraiment été limité, c’est sur l’identification des personnes. C’était
                 interdit par la juriste et par le musée. Car lorsqu’on associe un visage
                 humain et qu’on lui dit “trouve une identité”, ça sortait des dingueries
@@ -250,8 +250,7 @@
                 âgée est associée à documentaire animalier ou discours politique ; un
                 enfant lui vers Nike, Haribo, etc et via l’API YouTube, on recherche par
                 tags. Puis on lui a dit : tu as ça comme base, auto-alimente toi et
-                génère des nouveaux tags en fonction de la réaction des gens.</p>
+                génère des nouveaux tags en fonction de la réaction des gens. [...]</p>
-                <p>[..]</p>
                 <p>Mais le spectateur ne voyait pas forcément cette ingénierie
                 derrière.</p>
                 <h6>Martin</h6>
@@ -269,8 +268,8 @@
                 l’IA voyait : parfois un focus sur un visage, âge, genre, etc.</p>
                 <p>Mais c’était assez déceptif : je pensais que les gens seraient en
                 colère, qu’ils casseraient tout. En fait, ils étaient plutôt contents.
-                Cela faisait attraction.</p>
+                Cela faisait attraction. [...]</p>
-                <p>[..]</p>
+
                 <h6>Martin</h6>
                 <p>Aujourd’hui, en 2026, l’IA est partout dans les
                 conversations.<br />
@@ -290,26 +289,24 @@
                 de toi. En fait, l'IA, sur certains attraits, te pousse à consommer.
                 T’as l’impression que ça vient de toi, mais pas du tout. Peut-être qu’il
                 aurait fallu pousser encore plus loin, aller vers une forme de
-                sponsoring assumé. Il y avait déjà YouTube. </p>
+                sponsoring assumé. Il y avait déjà YouTube. [...]</p>
-                <p>[..]</p>
                 <h6>Martin</h6>
                 <p>Quel est ton point de vue sur les outils numériques, et
                 plus spécifiquement sur l’IA, dans le champ de l’art ?<br />
                 Pour les créateurs, cela ouvre des possibilités presque infinies, mais
                 cela soulève aussi des questions politiques, parfois polémiques.<br />
-                Comment toi, tu te situes par rapport à cela ?</em></p>
+                Comment toi, tu te situes par rapport à cela ?</p>
                 <h6>Charlie</h6>
                 <p>C’est compliqué. Réponse en deux voies.</p>
                 <p>La première voie, c’est que si tu m’avais posé la question avant que
                 je sois professionnel à 100 %, j’aurais probablement répondu autrement.
                 Aujourd’hui, j’ai parfois l’impression d’être davantage le chef d’une
                 PME qu’un artiste plasticien : il y a la compta, l’auto-branding, les
-                réseaux… On se rend compte que tout entre en jeu, la condition sociale
+                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>
+                aussi. Ce sont des autoroutes à vitesses très différentes. [...]</p>
-                <p>[..]</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
-                jours dessus, c’est lourd. Donc là-dessus, l’IA m’aide. [..] On passe de
+                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>
                 <p>C’est pareil pour la démocratisation des savoirs : ça démultiplie ma
@@ -319,9 +316,8 @@
                 monde de l’art, il y a déjà ce côté performatif permanent, les gros
                 studios, les assistants… Je n’ai pas envie d’entrer là-dedans. Si l’IA
                 me sert, c’est pour dégager du temps et continuer à avoir les mains dans
-                les outils.</p>
+                les outils. [...]</p>
-                <p>[..]</p>
+                <p>a seconde voie, ce serait d’être totalement réticent. On est pris
-                <p>La seconde voie, ce serait d’être totalement réticent. On est pris
                 dans un paradoxe capitaliste : j’ai des Nike, un iPhone, je sais ce que
                 ça implique en termes de ressources. C’est extrêmement difficile de
                 sortir du flux. Je ne cherche pas une forme de pureté, j’essaie plutôt
@@ -370,18 +366,15 @@
                 dispositifs anti-détection ? On peut déjà imaginer des choses comme ça.
                 Tout est interdépendant. on traite les sujets un par un, mais en réalité
                 tout se répond. Il faudrait des approches globales, à l’échelle
-                internationale sur le plan écologique et technologique.</p>
+                internationale sur le plan écologique et technologique. [...]</p>
-                <p>[..]</p>
                 <h6>Martin</h6>
                 <p>Peut-être une dernière chose pour conclure. On est partis
                 un peu dans tous les sens, mais c’est aussi ce que génère ton travail :
                 quand on est artiste aujourd’hui, on est obligé d’aller chercher
                 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.</em></p>
+                techniques, politiques, sociales.</p>
-                <p><strong><br />
+                <h6>Charlie</h6>Ouais. Le plus dur, aujourd’hui, c’est cette dichotomie entre
-                CHARLIE :<br />
-                </strong>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,
@@ -405,13 +398,10 @@
                 permettre de réchauffer les océans et ceux qui en subissent les
                 conséquences. À un moment, il faudra arrêter ou rééquilibrer les choses.
                 Sinon, on sera inondés. On fera des radeaux…</p>
-                <p><strong>MARTIN :<br />
+                <h6>Martin</h6>
-                </strong>Merci beaucoup Charlie.</p>
+                <p>Merci beaucoup Charlie.</p>
                 <h6>Charlie</h6>
                 <p>Merci à toi.</p>
-                <p><br />
-                </p>
-
      
     </section>