From fc646429679de5156f9d67a707ec66c75458c5cc Mon Sep 17 00:00:00 2001
From: Archicratia <area.technik@proton.me>
Date: Tue, 19 May 2026 11:28:27 +0200
Subject: [PATCH] polish(entry): refine genesis reveal responsive layout

---
 .../commencer/document-de-presentation.mdx    |  22 +-
 src/styles/global.css                         | 291 +++++++++++++++++-
 2 files changed, 300 insertions(+), 13 deletions(-)

diff --git a/src/content/commencer/document-de-presentation.mdx b/src/content/commencer/document-de-presentation.mdx
index b9ee1f8..a85ca61 100644
--- a/src/content/commencer/document-de-presentation.mdx
+++ b/src/content/commencer/document-de-presentation.mdx
@@ -35,7 +35,7 @@ Cette reconstruction n'attribue donc pas rétroactivement aux auteurs anciens ou
 
   <div class="editorial-reveal__body" aria-hidden="true">
 
-<h3 class="commencer-reveal-heading">L'entrée du problème : les mots politiques et leur excès de charge</h3>
+<h2 class="commencer-reveal-heading">L'entrée du problème : les mots politiques et leur excès de charge</h2>
 
 Certains mots politiques semblent aller de soi parce qu'ils ont fini par porter plus d'histoire que de précision. République, démocratie, souveraineté, État de droit, technocratie, bureaucratie : chacun paraît désigner une forme reconnaissable du pouvoir. Pourtant, dès qu'on les approche de près, ces mots se dédoublent. Ils décrivent, ils jugent, ils légitiment, ils disqualifient. Ils nomment une forme institutionnelle et transportent déjà une interprétation du monde.
 
@@ -45,7 +45,7 @@ Une question demeure ouverte : qu'est-ce qui fait tenir un ordre commun ? Non ce
 
 Avant d'appeler un mot nouveau, cette faille oblige à reprendre l'histoire des mots disponibles, non comme une succession de doctrines, mais comme une série d'efforts pour nommer ce qui fait tenir, se défaire ou se transformer les mondes politiques.
 
-<h3 class="commencer-reveal-heading">Platon : la cité comme problème de tenue</h3>
+<h2 class="commencer-reveal-heading">Platon : la cité comme problème de tenue</h2>
 
 Avant la grande classification aristotélicienne des régimes, Platon déplace déjà la question politique vers une interrogation plus profonde : à quelles conditions une cité peut-elle être dite juste ? Dans La République, la question ne porte pas d'abord sur le rangement des formes de gouvernement dans un tableau. Elle porte sur l'agencement qui rend possible une certaine justice de la cité. La justice y renvoie à l'ordre des fonctions, des désirs, des savoirs et des formations, selon une analogie entre la cité et l'âme (République, livres II-IV).
 
@@ -59,7 +59,7 @@ L'archicratie hérite de la première intuition tout en refusant cette clôture.
 
 Platon devient ainsi un ancêtre problématique de la question archicratique : il voit que la cité tient par des conditions plus profondes que ses formes visibles, mais il ne donne pas encore à ceux que ces conditions affectent une scène suffisante de reprise. Il ouvre un problème que l'archicratie reformule autrement : comment penser la tenue d'un monde commun sans la confier à un savoir de surplomb, sans la réduire à une procédure formelle, et sans abandonner ses conditions à leur propre dérive ?
 
-<h3 class="commencer-reveal-heading">Aristote et Polybe : classer les régimes, penser leurs équilibres</h3>
+<h2 class="commencer-reveal-heading">Aristote et Polybe : classer les régimes, penser leurs équilibres</h2>
 
 Avec Aristote, la pensée politique reçoit l'une de ses grandes grammaires classificatoires. Dans La Politique, les constitutions sont distinguées selon le nombre de gouvernants et selon la finalité de leur action : le bien commun ou l'intérêt propre des gouvernants (Politique, livre III). Monarchie, aristocratie et politeia forment les régimes droits ; tyrannie, oligarchie et démocratie, dans le sens dégradé du terme chez Aristote, en forment les déviations.
 
@@ -73,7 +73,7 @@ Polybe accentue ce déplacement avec l'analyse de la constitution mixte romaine
 
 De cette tradition antique demeurent deux acquis majeurs. Elle rend pensables les formes du pouvoir. Elle montre aussi que ces formes ne tiennent jamais par leur nom. Elles dépendent de compositions, d'équilibres, de limites, de distributions effectives. Mais un reste demeure : les classifications disent qui gouverne, comment le régime se nomme, selon quelle finalité il prétend agir. Elles disent encore trop peu comment les conditions concrètes d'un monde commun sont produites, maintenues, éprouvées et reprises.
 
-<h3 class="commencer-reveal-heading">La modernité : souveraineté, loi, République</h3>
+<h2 class="commencer-reveal-heading">La modernité : souveraineté, loi, République</h2>
 
 Avec la modernité, l'interrogation change de centre de gravité. Le problème n'est plus principalement celui de la forme du régime, mais celui de la fondation légitime de l'ordre. Qui autorise le pouvoir ? D'où vient la loi ? Comment l'obéissance peut-elle être justifiée ? Comment limiter l'arbitraire ?
 
@@ -95,7 +95,7 @@ Foucault permet d'aller plus loin, en particulier lorsqu'il montre que les disco
 
 La modernité a donc produit des catégories puissantes pour penser la validité de l'ordre politique. Mais elle n'a pas résolu le problème qui nous occupe. Un ordre peut être fondé dans la loi, inscrit dans des institutions, reconnu par des procédures, et devenir pourtant difficilement praticable dans les conditions concrètes où les existences rencontrent ses effets.
 
-<h3 class="commencer-reveal-heading">-archie, -cratie : la crise des noms politiques</h3>
+<h2 class="commencer-reveal-heading">-archie, -cratie : la crise des noms politiques</h2>
 
 L'examen doit alors se déplacer vers les mots qui organisent la nomination des régimes.
 
@@ -113,7 +113,7 @@ La distinction entre -archie et -cratie ne résout donc pas la crise classificat
 
 Les idéologies modernes rendent ce manque plus visible encore.
 
-<h3 class="commencer-reveal-heading">Les idéologies devant l'épreuve des conditions</h3>
+<h2 class="commencer-reveal-heading">Les idéologies devant l'épreuve des conditions</h2>
 
 Libéralisme, socialisme, conservatisme, anarchisme travaillent les catégories disponibles. Ils les déplacent, les recomposent, les chargent d'attentes nouvelles. Le libéralisme peut s'accommoder de formes institutionnelles diverses lorsque certaines libertés sont garanties. Le socialisme peut emprunter des voies étatiques, autogestionnaires ou coopératives. L'anarchisme ne vise pas l'absence d'ordre ; dans ses traditions les plus exigeantes, il cherche des formes d'association sans capture hiérarchique.
 
@@ -125,7 +125,7 @@ Un principe peut être généreux et manquer ses médiations. Une norme peut êt
 
 L'analyse doit alors quitter les formes déclarées du pouvoir pour examiner les conditions qui les rendent habitables. À ce point, la question quitte le terrain doctrinal pour devenir archicratique : aucune promesse politique ne vaut pleinement tant que ses conditions d'exercice demeurent hors de prise.
 
-<h3 class="commencer-reveal-heading">Le politique à l'épreuve de ses conditions</h3>
+<h2 class="commencer-reveal-heading">Le politique à l'épreuve de ses conditions</h2>
 
 Les pratiques, les métiers, les dispositifs et les infrastructures ne sont pas des arrière-plans. C'est par eux qu'un ordre politique s'inscrit dans la réalité.
 
@@ -143,7 +143,7 @@ Aucun de ces termes ne suffit à nommer le plan où les principes, les opératio
 
 C'est ce plan qu'il faut nommer.
 
-<h3 class="commencer-reveal-heading">Le plan qui manquait aux catégories héritées</h3>
+<h2 class="commencer-reveal-heading">Le plan qui manquait aux catégories héritées</h2>
 
 Le terme archicratie naît de cette nécessité, mais il ne nomme pas un régime supplémentaire. Il ne désigne ni le gouvernement d'un groupe particulier, ni une forme institutionnelle constituée, ni une idéologie concurrente. Il nomme l'exigence selon laquelle les conditions du commun doivent pouvoir être fondées, suivies, éprouvées et reprises.
 
@@ -167,7 +167,7 @@ L'autarchicration désigne la dérive plus avancée : le moment où une régulat
 
 Cette distinction verrouille le contresens majeur. L'archicratie n'est pas le nom de l'opacité contemporaine. Elle est ce qui permet de diagnostiquer cette opacité comme perte de relation entre fondement, opération et épreuve.
 
-<h3 class="commencer-reveal-heading">Le seuil archicratique</h3>
+<h2 class="commencer-reveal-heading">Le seuil archicratique</h2>
 
 Le vocabulaire disponible ne manque pas de nuances ; il manque son objet. Les régulations contemporaines ne se laissent plus saisir comme de pures formes de régime, comme des appareils bureaucratiques, comme des idéologies appliquées ou comme des décisions souveraines prolongées dans l'exécution. Elles agissent par chaînes, par formats, par seuils, par infrastructures, par critères d'accès, par dépendances matérielles et cognitives.
 
@@ -177,7 +177,7 @@ Une même procédure peut être une formalité pour les uns et une traversée po
 
 L'archicratie désigne l'exigence de rendre comparables, suivables et reprenables les conditions par lesquelles un monde devient effectivement habitable, ou inhabitable, pour des existences concrètes.
 
-<h3 class="commencer-reveal-heading">La portée inaugurale du terme</h3>
+<h2 class="commencer-reveal-heading">La portée inaugurale du terme</h2>
 
 Nommer l'archicratie, ce n'est pas recouvrir le réel d'une couche supplémentaire d'abstraction. C'est isoler un plan que les vocabulaires disponibles laissaient dispersé.
 
@@ -195,7 +195,7 @@ L'archicratie commence là où une question devient inévitable :
 
 Quel monde nos régulations construisent-elles, pour qui, par quelles médiations, et avec quelles possibilités de reprise ?
 
-<h3 class="commencer-reveal-heading">Repères bibliographiques primaires et conceptuels</h3>
+<h2 class="commencer-reveal-heading">Repères bibliographiques primaires et conceptuels</h2>
 
 Platon, La République, en particulier livres II-IV pour la construction de la cité juste et livres VIII-IX pour la succession des régimes.
 
diff --git a/src/styles/global.css b/src/styles/global.css
index e1d6fa4..ba88115 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1420,16 +1420,24 @@ html{ scroll-behavior: smooth; }
     margin-right: var(--commencer-content-inset);
   }
 
+  .landing-home .commencer-genese > .landing-kicker{
+    margin-bottom: 0;
+  }
+
   .landing-home .commencer-genese > h2{
     max-width: min(34ch, var(--commencer-text-measure));
+    margin-top: 28px;
+    margin-bottom: 18px;
     font-size: clamp(1.55rem, 2.45vw, 2.1rem);
     line-height: 1.08;
     letter-spacing: -0.032em;
   }
 
-  /* Paragraphes visibles avant ouverture. */
+  /* Paragraphes visibles avant ouverture : même rythme que le manifeste. */
   .landing-home .commencer-genese > p{
     max-width: var(--commencer-text-measure);
+    margin-top: 0;
+    margin-bottom: 20px;
     font-size: 1rem;
     line-height: 1.68;
     opacity: .93;
@@ -1515,4 +1523,283 @@ html{ scroll-behavior: smooth; }
     .commencer-genese .editorial-reveal.is-open > .editorial-reveal__body > p:first-child{
       margin-top: 0 !important;
     }
-  }
\ No newline at end of file
+  }
+/* =========================================================
+   COMMENCER — harmonisation finale avec Manifeste
+   Les sections révélées de la genèse appartiennent au même
+   régime éditorial que le titre initial "Note méthodologique".
+   ========================================================= */
+
+.landing-home .commencer-genese{
+  --commencer-heading-measure: 34ch;
+  --commencer-text-measure: 82ch;
+}
+
+/* Même colonne réelle avant et après ouverture. */
+.landing-home .commencer-genese > .landing-kicker,
+.landing-home .commencer-genese > h2,
+.landing-home .commencer-genese > p,
+.landing-home .commencer-genese > .editorial-reveal{
+  margin-left: var(--commencer-content-inset);
+  margin-right: var(--commencer-content-inset);
+}
+
+/* Le reveal ne crée plus une colonne secondaire. */
+.landing-home .commencer-genese > .editorial-reveal,
+.landing-home .commencer-genese .editorial-reveal__body{
+  width: min(100%, var(--commencer-text-measure));
+  max-width: var(--commencer-text-measure);
+}
+
+/* Même régime de titre pour "Note méthodologique" et les sections révélées. */
+.landing-home .commencer-genese > h2,
+.landing-home .commencer-genese .commencer-reveal-heading{
+  max-width: min(var(--commencer-heading-measure), var(--commencer-text-measure));
+  color: #f5f7fb;
+  font-size: clamp(1.55rem, 2.45vw, 2.1rem);
+  line-height: 1.08;
+  font-weight: 850;
+  letter-spacing: -0.032em;
+}
+
+/* Titre initial : même assise que le premier titre du Manifeste. */
+.landing-home .commencer-genese > h2{
+  margin-top: 28px;
+  margin-bottom: 18px;
+  padding-top: 0;
+  border-top: 0;
+}
+
+/* Sections révélées : même logique que les sections du Manifeste. */
+.landing-home .commencer-genese .commencer-reveal-heading{
+  margin: clamp(42px, 4.5vw, 62px) 0 18px;
+  padding-top: 26px;
+  border-top: 1px solid rgba(0,217,255,0.22);
+}
+
+/* Première section révélée : continuité immédiate après ouverture. */
+.landing-home .commencer-genese .commencer-reveal-heading:first-of-type{
+  margin-top: clamp(6px, 1vw, 12px) !important;
+  padding-top: 0 !important;
+  border-top: 0 !important;
+}
+
+/* Même largeur et même rythme de paragraphes avant et après ouverture. */
+.landing-home .commencer-genese > p,
+.landing-home .commencer-genese .editorial-reveal__body > p{
+  width: 100%;
+  max-width: var(--commencer-text-measure);
+  margin: 0 0 20px;
+  font-size: 1rem;
+  line-height: 1.68;
+  opacity: .93;
+  text-wrap: pretty;
+}
+
+/* Mobile : aucune marge parasite. */
+@media (max-width: 760px){
+  .landing-home .commencer-genese > .landing-kicker,
+  .landing-home .commencer-genese > h2,
+  .landing-home .commencer-genese > p,
+  .landing-home .commencer-genese > .editorial-reveal{
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .landing-home .commencer-genese > .editorial-reveal,
+  .landing-home .commencer-genese .editorial-reveal__body{
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .landing-home .commencer-genese > h2,
+  .landing-home .commencer-genese .commencer-reveal-heading{
+    max-width: none;
+  }
+}
+
+/* =========================================================
+   COMMENCER — correctifs finaux listes mobiles + tablette portrait
+   ========================================================= */
+
+/* Les listes issues de Pandoc doivent rester dans la même colonne de prose. */
+.landing-home .commencer-genese .editorial-reveal__body ul,
+.landing-home .commencer-genese .editorial-reveal__body ol{
+  width: 100%;
+  max-width: var(--commencer-text-measure);
+  margin: 0 0 20px;
+  padding-left: 1.25rem;
+}
+
+.landing-home .commencer-genese .editorial-reveal__body li{
+  margin: 0 0 12px;
+  padding-left: .15rem;
+  line-height: 1.68;
+  opacity: .93;
+}
+
+.landing-home .commencer-genese .editorial-reveal__body li > p{
+  display: inline;
+  width: auto;
+  max-width: none;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+  opacity: inherit;
+}
+
+/* Tablette portrait : colonne révélée plus tenue, plus proche de l’assiette Manifeste. */
+@media (min-width: 761px) and (max-width: 920px) and (orientation: portrait){
+  .landing-home .commencer-genese{
+    --commencer-text-measure: 72ch;
+  }
+
+  .landing-home .commencer-genese > .editorial-reveal,
+  .landing-home .commencer-genese .editorial-reveal__body,
+  .landing-home .commencer-genese .editorial-reveal__body > p,
+  .landing-home .commencer-genese .editorial-reveal__body ul,
+  .landing-home .commencer-genese .editorial-reveal__body ol{
+    max-width: var(--commencer-text-measure);
+  }
+}
+
+/* Mobile : éviter tout étranglement des listes dans le reveal. */
+@media (max-width: 760px){
+  .landing-home .commencer-genese .editorial-reveal__body ul,
+  .landing-home .commencer-genese .editorial-reveal__body ol{
+    max-width: 100%;
+    padding-left: 1.15rem;
+  }
+
+  .landing-home .commencer-genese .editorial-reveal__body li{
+    margin-bottom: 14px;
+    line-height: 1.56;
+  }
+}
+
+/* =========================================================
+   COMMENCER — correction définitive des listes Pandoc sur mobile
+   Les <li><p> issus du DOCX ne doivent jamais se réduire
+   en colonne étroite dans le reveal.
+   ========================================================= */
+
+@media (max-width: 760px){
+  .landing-home .commencer-genese .editorial-reveal__body ul,
+  .landing-home .commencer-genese .editorial-reveal__body ol{
+    display: block;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 0 20px !important;
+    padding-left: 0 !important;
+    list-style: none;
+  }
+
+  .landing-home .commencer-genese .editorial-reveal__body li{
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0 0 14px !important;
+    padding-left: 1.25rem !important;
+    line-height: 1.56;
+    opacity: .93;
+  }
+
+  .landing-home .commencer-genese .editorial-reveal__body li::before{
+    content: "•";
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: rgba(245,247,251,.92);
+    font-weight: 850;
+  }
+
+  .landing-home .commencer-genese .editorial-reveal__body li > p{
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 1rem !important;
+    line-height: 1.56 !important;
+    opacity: inherit !important;
+    text-wrap: pretty;
+  }
+}
+
+/* =========================================================
+   COMMENCER — mobile paysage / écran bas
+   Continuité de colonne : aucun retrait ni resserrement parasite.
+   ========================================================= */
+
+@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+  .landing-home .commencer-genese{
+    --commencer-content-inset: 0px;
+    --commencer-text-measure: 100%;
+    --commencer-heading-measure: 34ch;
+  }
+
+  .landing-home .commencer-genese > .landing-kicker,
+  .landing-home .commencer-genese > h2,
+  .landing-home .commencer-genese > p,
+  .landing-home .commencer-genese > .editorial-reveal{
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  .landing-home .commencer-genese > .editorial-reveal,
+  .landing-home .commencer-genese .editorial-reveal__body,
+  .landing-home .commencer-genese .editorial-reveal__body > p,
+  .landing-home .commencer-genese .editorial-reveal__body ul,
+  .landing-home .commencer-genese .editorial-reveal__body ol{
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .landing-home .commencer-genese > h2,
+  .landing-home .commencer-genese .commencer-reveal-heading{
+    max-width: min(var(--commencer-heading-measure), 100%);
+  }
+
+  .landing-home .commencer-genese .editorial-reveal__body ul,
+  .landing-home .commencer-genese .editorial-reveal__body ol{
+    display: block;
+    margin: 0 0 20px !important;
+    padding-left: 0 !important;
+    list-style: none;
+  }
+
+  .landing-home .commencer-genese .editorial-reveal__body li{
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0 0 14px !important;
+    padding-left: 1.25rem !important;
+    line-height: 1.56;
+    opacity: .93;
+  }
+
+  .landing-home .commencer-genese .editorial-reveal__body li::before{
+    content: "•";
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: rgba(245,247,251,.92);
+    font-weight: 850;
+  }
+
+  .landing-home .commencer-genese .editorial-reveal__body li > p{
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 1rem !important;
+    line-height: 1.56 !important;
+    opacity: inherit !important;
+    text-wrap: pretty;
+  }
+}