Merge pull request 'Stabilize commencer editorial reveal spacing' (#355) from fix/commencer-reveal-css-stabilization into main

Reviewed-on: #355

src/styles/global.css

@@ -117,7 +117,6 @@ header{
     opacity 120ms var(--ease-out);
 }
 
-/* ===== SiteNav : lien actif ===== */
 /* ===== SiteNav : lien actif ===== */
 .site-nav a[aria-current="page"],
 .site-nav a.is-active,
@@ -1233,16 +1232,19 @@ html{ scroll-behavior: smooth; }
   }
   
   /* =========================================================
-     Seuil révélé — Commencer
+   Seuil révélé — Commencer
-     La suite commence par un paragraphe : continuité directe.
+   La suite commence par un paragraphe : continuité directe.
-     ========================================================= */
+   ========================================================= */
-  
+
-  .commencer-genese .editorial-reveal.is-open > .editorial-reveal__body > p:first-child{
+  /*
-    margin-top: -6px !important;
+    Important :
-  }
+    Les règles spécifiques à .commencer-genese sont centralisées plus bas
-  
+    dans le bloc "COMMENCER — stabilisation définitive".
+    On ne met ici aucune marge négative, pour éviter les contradictions
+    de cascade entre état fermé, état ouvert, mobile et desktop.
+  */
+
   /* Titres internes de la genèse */
-  
   .commencer-reveal-heading{
     max-width: 42ch;
     margin: 34px 0 14px;
@@ -1254,62 +1256,58 @@ html{ scroll-behavior: smooth; }
     font-weight: 850;
     letter-spacing: -0.024em;
   }
-  
+
   .commencer-reveal-heading:first-of-type{
     margin-top: clamp(28px, 3vw, 38px);
   }
-  
+
   /* =========================================================
-     Mobile
+    Mobile — Manifeste + reveal générique
-     ========================================================= */
+    ========================================================= */
-  
+
   @media (max-width: 760px){
     .manifeste-article .manifest-body{
       width: 100%;
       max-width: none;
       margin-top: 22px;
     }
-  
+
     .manifeste-article .manifest-body p{
       font-size: 1rem;
       line-height: 1.62;
     }
-  
+
     .manifeste-article .manifest-section-title{
       max-width: none;
       margin-top: 36px;
       padding-top: 22px;
     }
-  
+
     .manifeste-article .manifest-subsection-title{
       max-width: none;
       margin-top: 26px;
     }
-  
+
     .editorial-reveal{
       max-width: 100%;
       margin-top: 14px;
     }
-  
+
     .editorial-reveal.is-open{
       margin-top: 0;
     }
-  
+
     .editorial-reveal__button{
       max-width: 100%;
       padding: 10px 15px;
       border-radius: 16px;
       white-space: normal;
     }
-  
+
     .manifeste-article .editorial-reveal__body > .manifest-section-title:first-child{
       margin-top: 10px !important;
     }
-  
+
-    .commencer-genese .editorial-reveal__body > p:first-child{
-      margin-top: -10px !important;
-    }
-  
     .commencer-reveal-heading{
       max-width: none;
       margin-top: 28px;
@@ -1317,51 +1315,148 @@ html{ scroll-behavior: smooth; }
   }
 
   /* =========================================================
-   Landing pages — retrait éditorial interne
+    Landing pages — retrait éditorial interne
-   Pages d’accueil, essai-thèse, cas pratique, manifeste, commencer
+    Pages d’accueil, essai-thèse, cas pratique, manifeste, commencer
-   ========================================================= */
+    ========================================================= */
 
-.landing-home{
-  --landing-inner-inset: clamp(14px, 2vw, 28px);
-}
-
-/* Notes au lecteur : on conserve le kicker comme repère,
-   mais on décale légèrement le titre et le texte. */
-.landing-home .edition-note > h2,
-.landing-home .edition-note > p:not(.landing-kicker){
-  margin-left: var(--landing-inner-inset);
-}
-
-/* On évite que le retrait ne pousse les lignes trop loin à droite. */
-.landing-home .edition-note > p:not(.landing-kicker){
-  max-width: min(78ch, calc(100% - var(--landing-inner-inset)));
-}
-
-/* Sections d’index : même axe éditorial que les notes. */
-.landing-home .landing-section__head{
-  margin-left: var(--landing-inner-inset);
-}
-
-/* La grille suit le même retrait pour que le titre et les cartes respirent ensemble. */
-.landing-home .landing-grid{
-  margin-left: var(--landing-inner-inset);
-  width: calc(100% - var(--landing-inner-inset));
-}
-
-/* Mobile : on supprime le retrait pour préserver la largeur utile. */
-@media (max-width: 760px){
   .landing-home{
-    --landing-inner-inset: 0px;
+    --landing-inner-inset: clamp(14px, 2vw, 28px);
   }
 
+  /* Notes au lecteur : on conserve le kicker comme repère,
+    mais on décale légèrement le titre et le texte. */
   .landing-home .edition-note > h2,
-  .landing-home .edition-note > p:not(.landing-kicker),
+  .landing-home .edition-note > p:not(.landing-kicker){
-  .landing-home .landing-section__head,
+    margin-left: var(--landing-inner-inset);
+  }
+
+  /* On évite que le retrait ne pousse les lignes trop loin à droite. */
+  .landing-home .edition-note > p:not(.landing-kicker){
+    max-width: min(78ch, calc(100% - var(--landing-inner-inset)));
+  }
+
+  /* Sections d’index : même axe éditorial que les notes. */
+  .landing-home .landing-section__head{
+    margin-left: var(--landing-inner-inset);
+  }
+
+  /* La grille suit le même retrait pour que le titre et les cartes respirent ensemble. */
   .landing-home .landing-grid{
+    margin-left: var(--landing-inner-inset);
+    width: calc(100% - var(--landing-inner-inset));
+  }
+
+  /* Mobile : on supprime le retrait pour préserver la largeur utile. */
+  @media (max-width: 760px){
+    .landing-home{
+      --landing-inner-inset: 0px;
+    }
+
+    .landing-home .edition-note > h2,
+    .landing-home .edition-note > p:not(.landing-kicker),
+    .landing-home .landing-section__head,
+    .landing-home .landing-grid{
+      margin-left: 0;
+    }
+
+    .landing-home .landing-grid{
+      width: 100%;
+    }
+  }
+
+  /* =========================================================
+    COMMENCER — stabilisation définitive de la colonne révélée
+    ========================================================= */
+
+  /*
+    Objectif :
+    - même colonne optique avant et après ouverture ;
+    - aucun saut horizontal ;
+    - aucun correctif par marge négative ;
+    - une seule source de vérité pour .commencer-genese.
+  */
+
+  .commencer-genese{
+    --commencer-content-inset: clamp(18px, 2.2vw, 28px);
+    --commencer-text-measure: 78ch;
+  }
+
+  /* Colonne interne stable de la carte "Genèse conceptuelle". */
+  .commencer-genese > .landing-kicker,
+  .commencer-genese > h2,
+  .commencer-genese > p,
+  .commencer-genese > .editorial-reveal{
+    margin-left: var(--commencer-content-inset);
+    margin-right: var(--commencer-content-inset);
+  }
+
+  /* Paragraphes visibles avant ouverture. */
+  .commencer-genese > p{
+    max-width: var(--commencer-text-measure);
+  }
+
+  /* Le reveal hérite de la même colonne, sans créer une colonne autonome. */
+  .commencer-genese > .editorial-reveal{
+    max-width: var(--commencer-text-measure);
+  }
+
+  /* Bouton fermé : aucune marge interne parasite. */
+  .commencer-genese .editorial-reveal__button{
     margin-left: 0;
   }
 
-  .landing-home .landing-grid{
+  /* Corps ouvert : même colonne, même largeur, aucune marge autonome. */
-    width: 100%;
+  .commencer-genese .editorial-reveal__body{
+    max-width: var(--commencer-text-measure);
+    margin-left: 0;
+    margin-right: 0;
   }
-}
+
+  /* Paragraphes révélés : rythme identique, sans saut à l’ouverture. */
+  .commencer-genese .editorial-reveal__body > p{
+    max-width: var(--commencer-text-measure);
+    margin: 0 0 20px;
+    line-height: 1.62;
+    opacity: .93;
+    text-wrap: pretty;
+  }
+
+  /* Premier paragraphe révélé : continuité immédiate après disparition du bouton. */
+  .commencer-genese .editorial-reveal.is-open > .editorial-reveal__body > p:first-child{
+    margin-top: 0 !important;
+  }
+
+  /* Dernier paragraphe révélé : pas de marge basse fantôme. */
+  .commencer-genese .editorial-reveal__body > p:last-child{
+    margin-bottom: 0;
+  }
+
+  /* Titres internes révélés : même colonne, hiérarchie préservée. */
+  .commencer-genese .commencer-reveal-heading{
+    max-width: min(42ch, var(--commencer-text-measure));
+  }
+
+  /* Mobile : pas de retrait, largeur utile maximale. */
+  @media (max-width: 760px){
+    .commencer-genese{
+      --commencer-content-inset: 0px;
+      --commencer-text-measure: 100%;
+    }
+
+    .commencer-genese > .landing-kicker,
+    .commencer-genese > h2,
+    .commencer-genese > p,
+    .commencer-genese > .editorial-reveal{
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .commencer-genese .editorial-reveal__body > p{
+      margin-bottom: 18px;
+      line-height: 1.52;
+    }
+
+    .commencer-genese .editorial-reveal.is-open > .editorial-reveal__body > p:first-child{
+      margin-top: 0 !important;
+    }
+  }