/* ========================================================================== 04 - Gabarit des pages internes Lot 4. Cible (maquette SubPageLayout.tsx) : [fil d'Ariane] T | Titre de la page <- h1 texte, aligné à gauche i | ____ <- filet violet court, 64px t | r | Résumé d'introduction. ■ <- carré violet 8x8 e | [contenu] Aucune grande image en tête. Aucun titre posé sur une photo. ========================================================================== */ /* --- Conteneur injecté par le thème enfant -------------------------------- */ .lm-page-head { max-width: var(--lm-container); margin: 0 auto; padding-inline: 1rem; } /* Première section de contenu : sans marge haute (24/09/2026, « l'espace doit être un peu plus petit entre le titre et le texte »). Elementor lui donnait, page par page, 20 à 40px en plus des 24px du bloc de tête. Désignée côté serveur, voir lm_first_content_section_id() dans inc/corps-texte.php. */ body:not(.home) main .elementor .elementor-element.elementor-top-section.lm-first-section { margin-top: 0; } /* --- Largeur de la zone de contenu ------------------------------------------ Demande du 24/09/2026, « réduire un peu la largeur de la zone de contenu » : 1140px -> 1040px, dans --lm-container. Le fil d'Ariane, le titre, « Poursuivre la lecture » et le pied de page lisent déjà ce token. Les sections Elementor, elles, prennent la largeur du kit, `.elementor-section.elementor-section-boxed > .elementor-container` à 1140px, spécificité (0,3,0) : `main` en plus suffit, sans !important. Une section réglée à une autre largeur dans Elementor (0,4,0) garde la sienne. L'accueil a sa propre mise en page : il n'est pas concerné. */ body:not(.home) main .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--lm-container); } /* --- Images du contenu -------------------------------------------------------- Demande du 24/09/2026, « réduire un peu la taille des images », sur les couvertures de /ressources/oeuvres-de-louis-massignon/. Relevé : 305 widgets image sur le site, aucun avec une largeur réglée, 291 dans une colonne latérale de 25% ou moins (couvertures, portraits, visuels d'articles). L'image prenait toute sa colonne ; elle en prend 90%, centrée comme le règle le widget. La réduction du conteneur ci-dessus s'y ajoute, MESURÉ en 1440px : une couverture passait de 161px à 145px par le seul conteneur, elle arrive à 131px. À 85% elle tombait à 123px, -24%, plus que le « un peu » demandé. 80% depuis le même jour, « réduire encore un peu la taille des miniatures » : la couverture fait environ 116px. Seul le widget image est visé : les photos légendées et les vignettes de mosaïque sont des widgets Image Hover Effects, calés sur la grille. */ body:not(.home) main .elementor-widget-image img { max-width: 80%; } /* Style repris des titres de l'ancien site, demande du 24/09/2026 : lavande, graisse fine, 40px. Sur la production c'est un widget texte réglé à la main (FUTURA LM, 40px, graisse 100, interligne 1.3em, #4054B2 à 60%) ; il est ici porté par le H1 injecté, que les 315 pages et articles utilisent tous. Graisse 350 : le 300 d'abord posé a paru un peu maigre (retour du même jour). La police est une variable chargée en plage, voir lm_enqueue_font(). Double classe (0,2,0) : le kit Elementor impose `.elementor-kit-6 h1` (0,1,1) en gras et en couleur de texte. */ .lm-page-head .lm-page-title { text-align: left; font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: var(--lm-title-weight); line-height: 1.3; letter-spacing: 0; color: var(--lm-title-color); margin: 0 0 .25rem; } /* --- Marqueur 5 : libellé vertical de marge -------------------------------- Valeurs MESURÉES sur la maquette le 10/09/2026, en 1536px de large : texte titre de la page courante, 16px, italique, #7058D0 position x=160, soit à gauche du conteneur de contenu qui commence à x=216 filet 1px rgba(112, 88, 208, .3) à x=172, courant sur toute la hauteur du contenu, le libellé étant centré verticalement dessus Correction apportée par la fiche 13 à la fiche 02 : le filet est VIOLET à 30% d'opacité, pas gris. Le bloc est positionné en absolu par rapport au conteneur de contenu plutôt qu'en `fixed` : c'est ce qui permet au filet de courir exactement sur la hauteur du contenu, comme dans la maquette, au lieu de rester collé à l'écran au défilement. Les décalages sont exprimés en fonction de la largeur du conteneur, et non en pixels absolus : ils suivent donc la largeur d'écran. 56px pour le libellé et 44px pour le filet reproduisent les x=160 et x=172 de la maquette. writing-mode + rotate(180deg) donne le même rendu qu'une rotation à -90 degrés, tout en gardant un texte sélectionnable et un flux correct. */ /* ANCRAGE. Le 10/09 la règle portait sur #content : insuffisant, l’ancêtre positionné retenu par le navigateur restait div#container.wpbf-page, qui part du sommet de la page. Le filet traversait donc l’en-tête. On ancre sur
, qui délimite exactement la zone de contenu et dont le libellé est le premier enfant : top/bottom à 0 donnent alors la hauteur du contenu, ni plus ni moins. */ main#main, main.lm-main, .wpbf-main, .wpbf-container.wpbf-container-center { position: relative; } .lm-vlabel { position: absolute; /* Le positionnement absolu se cale sur la boîte de padding de
, pas sur sa boîte de contenu : sans ce décalage, le filet démarre 20px au-dessus du fil d’Ariane. La valeur reprend le padding vertical de
. Elle ne dépend pas de la largeur d’écran, contrairement au placement horizontal, qui lui est calculé. */ top: 1.25rem; bottom: 1.25rem; /* Calculé depuis --lm-container, jamais une valeur en dur. Le conteneur faisant la largeur de
, le résultat vaut -56px : le libellé se place à 56px à gauche du contenu, quelle que soit la largeur d’écran. */ left: calc((100% - var(--lm-container)) / 2 - 56px); display: flex; align-items: center; /* libellé centré verticalement sur le filet */ gap: 8px; pointer-events: none; user-select: none; z-index: 1; } .lm-vlabel span { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--lm-primary); font-style: italic; font-size: 16px; letter-spacing: .02em; white-space: nowrap; max-height: 100%; overflow: hidden; } /* Le filet, qui court sur toute la hauteur du contenu. */ .lm-vlabel::after { content: ""; align-self: stretch; width: 1px; background: rgba(112, 88, 208, .3); } /* Seuil d'affichage. La fiche 13 demande un masquage en dessous de 1024px. Le libellé vit dans la marge gauche, hors du conteneur : il faut donc que cette marge existe. Conteneur 1040px + 2 x 56px de marge = 1152px. En dessous, le libellé viendrait sur le texte, ce qui contredit le critère « jamais superposé au contenu ». Le seuil est donc calculé, pas choisi. Une requête média ne lit pas les variables : À RECALCULER si --lm-container change (1251px tant que le conteneur faisait 1140px). ÉCART ASSUMÉ par rapport au 1024px de la fiche, à signaler au client. */ @media (max-width: 1151px) { .lm-vlabel { display: none; } } /* --- Balise main injectée (optionnelle, voir LM_WRAP_MAIN) ---------------- */ .lm-main { display: block; } /* --- Suppression des grandes images de tête ------------------------------- Le client veut arriver directement sur le contenu : « il faudrait arriver directement sur la liste, sinon ça crée une confusion ». Liste à établir à l'inventaire, page par page. CHAQUE LIGNE DOIT ÊTRE COMMENTÉE avec le nom de la page : une règle non commentée est ingérable dans six mois. Ne pas masquer une image porteuse de sens éditorial (photo de Louis Massignon en tête de la biographie) sans en parler à Philippe. Forme attendue, à compléter après l'inventaire : .page-id-487 .elementor-element-XXXXXXX, Figures, bandeau de tête .page-id-0000 .elementor-element-YYYYYYY { nom de la page display: none; } -------------------------------------------------------------------------- */ /* ========================================================================== P2 - Neutralisation des résidus de l'ancien site Retour d'intégration du 10/09/2026. Trois éléments de l'ancien gabarit passent par-dessus le nouveau. Ils vivent dans le contenu Elementor des pages : on les traite en CSS, jamais en rouvrant une centaine de pages. SÉLECTEURS RELEVÉS SUR LE DOM RÉEL le 10/09, et ils ne sont pas ceux que la fiche 13 proposait : - le libellé pivoté n'est PAS un

mais un conteneur Elementor portant la classe CSS `page_title` (vérifié sur l'accueil, élément 69578dd7, et sur /biographie/figures/, élément 16f10803). Un sélecteur sur `p` ne l'aurait pas attrapé ; - le filet noir n'est pas posé en style inline mais par le CSS généré d'Elementor : `[style*="border-left"]` ne matche rien. ========================================================================== */ /* --- 1. Libellé vertical pivoté de l'ancien site -------------------------- Il fait doublon avec .lm-vlabel (P4) et il apparaît même sur l'accueil, ce que le client a explicitement écarté. */ .elementor-element.page_title { display: none !important; /* le widget impose son affichage */ } /* --- 2. Carré bleu en image ------------------------------------------------ Remplacé par le carré violet du design system. L'image est masquée, et le carré est rendu en CSS à la fin du dernier paragraphe du bloc qui la contenait : `:has()` évite d'avoir à cibler l'identifiant de chaque page. */ img[src*="carre_bleu_texte_fin"] { display: none !important; } .elementor-widget-text-editor:has(img[src*="carre_bleu_texte_fin"]) p:last-of-type::after { content: ""; display: inline-block; width: var(--lm-square); height: var(--lm-square); margin-left: .4em; background: var(--lm-primary); vertical-align: middle; } /* --- 3. Filet vertical du bloc de texte ------------------------------------ La maquette le donne en violet 1.6px, pas en gris : correction apportée par la fiche 13 à la fiche 02. On ne redéfinit QUE la couleur et l'épaisseur, jamais `border-left-style`. Conséquence voulue : la règle est sans effet là où aucun filet n'existe (style `none`), et recolore partout où l'ancien site en avait posé un. Cela évite d'avoir à lister les identifiants d'éléments page par page. */ /* CORRECTION du 11/09. La règle portait sur TOUS les conteneurs de widgets et sur tous les blocs de texte : elle recolorait donc en violet le moindre filet gauche hérité de l'ancien site, y compris ceux des colonnes de mosaïque. Sur l'accueil elle en peignait deux au lieu d'un, le conteneur et le widget, d'où le double trait ; sur les pages de figures elle faisait apparaître un filet violet à gauche de chaque colonne de photos. Le filet violet n'a de sens QUE sur un bloc de texte. `:has()` le garantit : seuls les conteneurs qui portent directement un widget de texte sont concernés, et jamais le widget lui-même, ce qui supprime le doublon. */ /* DÉCISION CLIENT du 11/09/2026 au soir, elle ANNULE ce qui précède : « ne pas afficher le liseret à gauche du texte sur toutes les pages ». Le filet n'est donc plus recoloré, il est SUPPRIMÉ. Relevé sur le DOM de /courbe-de-vie/le-militaire-et-le-diplomate-2/ : il est posé sur le conteneur du widget, en 0.8px NOIR, hérité de l'ancien site. La portée change aussi. L'ancienne règle était préfixée par `#content`, qui n'existe pas sur les 28 pages en modèle elementor_header_footer : le filet y restait donc noir, jamais violet. On cible désormais le contenu Elementor, en-tête et pied de page exclus, donc les deux modèles. Seule la largeur est remise à zéro, jamais `border-left-style` : les cartes et les vignettes, qui portent leur propre bordure, ne sont pas concernées, et le padding de 10px reste en place, donc le texte ne bouge pas. */ /* ÉLARGISSEMENT du 11/09 au soir, second retour du client sur /ressources/ : « problème de titre trop proche et liseret à gauche ». La règle ne visait que les blocs de texte. Or l'ancien site pose le même filet noir sur des colonnes qui portent des mosaïques : relevé sur /ressources/, 1px noir sur le conteneur de la première vignette, haut de 365px, qui doublait le filet du libellé de marge. Le filet est donc retiré de TOUS les conteneurs de widgets du contenu. Seule la largeur passe à zéro : les cadres des vignettes (.eihe-box) et des cartes (.lm-tile), qui portent leur propre bordure, ne sont pas concernés - vérifié sur /ressources/, les six cadres sont intacts. */ .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-wrap.elementor-element-populated, .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-text-editor { /* Le filet à DROITE aussi, ajouté le 11/09 au soir. Relevé sur /idees-debats/idees-forces/conversion-et-visitation/ : l'ancien site le pose ici sur le bord droit de la colonne de gauche, en 1px #231D30 sur 451px de haut. C'est le même trait, vu de l'autre côté. */ border-left-width: 0; border-right-width: 0; } /* Le padding n'est volontairement PAS redéfini globalement ici : l'appliquer à tous les conteneurs de widgets décalerait la mise en page de tout le site. L'ancien site pose déjà son propre retrait là où le filet existe. */ /* ========================================================================== P3 - Alignement, respiration et largeur du contenu hérité Retour client du 11/09/2026, relevé sur /biographie/courbe-de-vie/ et /biographie/courbe-de-vie/jeunesse-et-vie-familiale/ : « manque d'espace avec le titre et problème de largeur ». Trois défauts distincts, MESURÉS sur le DOM réel en 1440px de large, pas supposés. Ils viennent tous du contenu Elementor hérité, pas du gabarit : on les traite donc en CSS, jamais en rouvrant une centaine de pages. ========================================================================== */ /* --- 1. Respiration sous le bloc de tête ----------------------------------- MESURE : 14px entre le filet violet du H1 et la première ligne du résumé (4px de marge du H1 + 10px de padding du widget Elementor). La maquette (SubPageLayout.tsx) donne : titre, 12px, filet, 24px, résumé. Les 12px du haut sont déjà posés par .lm-title-rule::after ; ce sont les 24px du bas qui manquaient. La marge est portée par le conteneur, pas par le H1 : elle s'applique donc quel que soit le premier bloc de la page. Elle fusionne avec la marge basse du H1 (fusion des marges : le parent n'a ni padding ni bordure en bas), le résultat vaut bien 24px et non 28px. */ .lm-page-head { margin-bottom: 1.5rem; } /* --- 2. Alignement horizontal du titre sur le contenu ---------------------- MESURE : le H1 démarrait à 16px du bord du conteneur (padding-inline: 1rem), le contenu Elementor à 10px (padding par défaut d'une colonne peuplée). 5px d'écart, visibles sur un titre de 36px. On s'aligne sur la valeur d'Elementor, qui est celle de la majorité des blocs du site. Les colonnes réglées à 0 ou 5px de padding restent décalées d'autant : aucune règle CSS ne peut aligner 151 pages montées à la main, on se cale sur le cas le plus fréquent. RÉVISION DU 12/09. Le 1rem était conservé en dessous de 768px, au motif que 10px de marge latérale seraient trop justes sur un téléphone. Mesuré depuis sur un article en 390px : le titre démarrait à x=36 et le texte à x=30, un écart de 6px bien visible sur une colonne étroite. Le motif ne tenait pas : le conteneur de contenu pose déjà 20px de chaque côté, les 10px s'y ajoutent, et le texte est donc à 30px du bord, pas à 10. La même valeur partout, donc, et les trois lignes — fil d'Ariane, titre, texte — s'alignent à toutes les largeurs. */ .lm-breadcrumb, .lm-page-head { padding-inline: 10px; } /* --- 3. Colonnes vides de marge de l'ancien site --------------------------- MESURE : sur /courbe-de-vie/jeunesse-et-vie-familiale/, le résumé vit dans une rangée de trois colonnes dont la première (137px) et la dernière (138px) sont VIDES. Le texte démarrait donc à x=290 quand le titre démarrait à x=158 : 132px de décalage, et une colonne de texte d'autant plus étroite. Ces colonnes vides servaient à ménager la place du libellé pivoté de l'ancien site (classe `page_title`, masqué en P2). Le nôtre vit dans la marge, hors du conteneur : elles ne servent plus à rien et ne font que désaligner le contenu. Une colonne sans widget ne rend rien : la masquer ne peut pas faire disparaître de contenu. La colonne peuplée reprend alors sa place à gauche, alignée sur le titre. PORTÉE. Trois garde-fous : - `body:not(.home)` : l'accueil a été validé le 10/09 avec ses colonnes de marge, et le critère de recette du lot 4 interdit toute régression dessus. VÉRIFIÉ : sans cette exclusion, 11 colonnes disparaissaient et le texte d'accueil se décalait vers la gauche ; - en-tête et pied de page exclus : ils sont montés dans Elementor et leur équilibre ne dépend pas de nous. Sur les 28 pages en modèle elementor_header_footer, le