From b6f9f76f8bd28925098f405b9781c8816186d011 Mon Sep 17 00:00:00 2001 From: Archicratia Date: Wed, 6 May 2026 10:24:02 +0200 Subject: [PATCH] Stabilize commencer editorial reveal spacing --- src/styles/global.css | 225 ++++++++++++++++++++++++++++++------------ 1 file changed, 160 insertions(+), 65 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index 1203a60..bb65f5d 100644 --- a/src/styles/global.css +++ b/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 - La suite commence par un paragraphe : continuité directe. - ========================================================= */ - - .commencer-genese .editorial-reveal.is-open > .editorial-reveal__body > p:first-child{ - margin-top: -6px !important; - } - + Seuil révélé — Commencer + La suite commence par un paragraphe : continuité directe. + ========================================================= */ + + /* + 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 - Pages d’accueil, essai-thèse, cas pratique, manifeste, commencer - ========================================================= */ + Landing pages — retrait éditorial interne + 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 .landing-section__head, + .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-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{ - width: 100%; + /* Corps ouvert : même colonne, même largeur, aucune marge autonome. */ + .commencer-genese .editorial-reveal__body{ + max-width: var(--commencer-text-measure); + margin-left: 0; + margin-right: 0; } -} \ No newline at end of file + + /* 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; + } + } \ No newline at end of file