/* ============================================================ lexsov — l'habillage, direction « La nappe » Arbitrée par Yan le 30.10.2026. POURQUOI CE FICHIER EXISTE, et pas seulement `theme.json`. `theme.json` porte ce qui est déclaratif : couleurs, familles, échelles. Il ne sait pas dire « le voile couvre la section » ni « le texte tient la moitié gauche de la photographie ». Or la compilation APLATIT les sections en blocs natifs sans mise en page — c'est voulu, le client doit pouvoir éditer sans casser — donc le dessin se refait ici, en visant les classes que le compilateur pose : `sb-s-` pour les sections, `sb-c-` pour les champs. DEUX CONSÉQUENCES DE CET APLATISSEMENT, à connaître avant de lire la suite : 1. l'enveloppe `.lexs-texte-nappe` du prototype a DISPARU. Les textes sont enfants directs de la section ; c'est donc la section qui les borne. 2. bouton plein et bouton fantôme compilent vers le MÊME bloc natif. La distinction se rétablit ici, par la classe du conteneur — `sb-c-sec-lien` est le fantôme. RÈGLE ABSOLUE : aucune couleur en dur. Les couleurs viennent des presets de `theme.json`, qui fait vérité. ============================================================ */ :root{ /* Les tokens de dessin, adossés aux presets de theme.json pour qu'une couleur n'ait qu'UNE source. */ --lexs-fond: var(--wp--preset--color--base); --lexs-surface: var(--wp--preset--color--surface); --lexs-texte: var(--wp--preset--color--contrast); --lexs-doux: var(--wp--preset--color--doux); --lexs-filet: var(--wp--preset--color--filet); --lexs-accent: var(--wp--preset--color--accent); --lexs-sur-accent:var(--wp--preset--color--base); /* LE VOILE — le composant critique de cette direction. Les composantes sont écrites parce que `rgba()` ne sait pas décomposer un hexadécimal : c'est --wp--preset--color--base (#0A1D29) en r,g,b. Si la palette bouge, cette ligne bouge avec elle. Chaque opacité est le minimum MESURÉ sur le 97e centile de luminance de la moitié gauche des six photographies, pour que le texte y tienne AA. Un voile réglé à l'œil se trompe toujours dans le même sens : trop léger, parce qu'on juge sur son propre écran. */ --lexs-voile-couleur: 10, 29, 41; /* 0.60 « couvrait les six images, avec marge » — mesuré sur les FICHIERS, ce que l'autre commentaire de cette feuille identifie justement comme l'erreur à ne pas commettre. Sur les pixels servis, le chapô de l'accueil tombait à 4.15 à 768 px. Il rend à exactement 24.0 px, donc il ne passait le seuil de 4.5 qu'en invoquant l'exemption « grand texte » pile à sa frontière, et en Spectral 300 — plus maigre que la graisse sur laquelle cette exemption est fondée. 0.66 le fait passer sans exemption. */ --lexs-voile-aa: 0.66; --lexs-voile-aaa: 0.75; /* si le texte descend sous 16 px */ --lexs-voile-fuite: 0.20; /* le bord libre — AUCUN texte ici */ /* L'ÉCHELLE À SEPT BARREAUX. Mesurée au banc par la session branding : à 84 px le titre ne tenait que 15 signes par ligne, et j'ai réécrit la copie deux fois pour compenser une décision de gabarit. Le corps descend, le plafond devient 46 signes. */ --lexs-t-nappe: clamp(2.4rem, 5.6vw, 4.5rem); /* 72 px */ --lexs-t-sec: clamp(1.9rem, 4.4vw, 3.5rem); /* 56 px */ /* LE BARREAU MANQUANT — ET LE SEUL QUI NE BOUGEAIT PAS. Corrigé le 05.11.2026, Yan sur son téléphone : « texte un peu gros pour le corps en mobile ». Mesuré : le corps va de 14,5 px à 390 à 20 px à 1440, le titre de 38 à 72 — et le chapô restait à 24 partout. Il valait donc 1,66 fois le corps au téléphone contre 1,20 au bureau. Ce n'était pas le chapô qui était trop gros : c'est qu'il refusait de descendre avec les autres. Le rapport est désormais tenu autour de 1,25 à toutes les largeurs. */ --lexs-t-chapo: clamp(1.175rem, .85rem + 1.1vw, 1.5rem); --lexs-t-bloc: 1.35rem; --lexs-t-corps: 1.0625rem; --lexs-t-petit: .9375rem; --lexs-t-sur: .8125rem; --lexs-amorce-l: 2.5rem; --lexs-amorce-e: 2px; --lexs-marge: clamp(1.25rem, 5vw, 6rem); --lexs-section: clamp(2.75rem, 5vw, 4.75rem); /* doublé entre deux sections */ /* LE LAITON ASSOMBRI, pour tout fond clair. Il vivait à l'intérieur de `.lexs-clair` et n'était donc pas atteignable ailleurs — or le panneau du menu au téléphone est peint en blanc par WordPress, et c'est un autre endroit qui en a besoin. Mesuré sur blanc : 6.04, contre 2.24 au laiton plein. */ --lexs-accent-clair: #7A5E33; } /* La variante claire attend la prose longue — mentions légales, politique de confidentialité, conditions. Ce n'est PAS un jumeau du site : les pages de vitrine restent dans la nappe. L'accent y est assombri parce que le laiton sur gris clair ne donne que 2.0. Le bloc est posé, la bascule reste à brancher le jour où le texte juridique existe (il demande une raison sociale, qui n'existe pas encore). */ .lexs-clair{ --lexs-fond: #EDF0F3; --lexs-surface: #FFFFFF; --lexs-texte: #0A1D29; --lexs-doux: #4E5E6C; --lexs-filet: #D5DDE4; --lexs-accent: var(--lexs-accent-clair); --lexs-sur-accent:#EDF0F3; background:var(--lexs-fond); color:var(--lexs-texte); color-scheme:light; } /* ============================================================ NEUTRALISER LA MISE EN PAGE CONTRAINTE DE WORDPRESS Le compilateur pose `layout:{"type":"constrained"}` sur CHAQUE section — ce n'est pas réglable depuis le prototype. WordPress en déduit : .is-layout-constrained > :where(:not(.alignleft)…) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; } Donc tout enfant de section est plafonné à `contentSize` ET centré. On ne BAT pas un `!important` — et la règle `important` du standard ne tolère que `[hidden]`. On le DÉSAMORCE : un enfant en `width:100%` ne laisse aucun espace libre, et des marges `auto` qui n'ont rien à distribuer valent zéro. La mesure du texte se pose ensuite par une COLONNE DE GRILLE, jamais par un `max-width` sur l'enfant — qui rouvrirait l'espace libre et le recentrerait aussitôt. ============================================================ */ [class*="sb-s-"] > *{ max-width:none; width:100%; margin-left:0; margin-right:0; } /* ============================================================ LA SECTION-NAPPE ============================================================ */ /* LA LISTE DES NAPPES NE S'ÉCRIT PLUS À LA MAIN, pour la même raison que l'image juste en dessous : elle avait déjà oublié `solution-nappe` dans la règle `position:relative` plus bas, et la page « À propos » du 31.10.2026 aurait été la cinquième à ajouter. Toute section dont le nom finit par `-nappe` en est une. `sb-s-accueil-secret` EN EST SORTIE le 04.11.2026. Elle y était entrée comme « nappe de mise en page sans photographie », et une nappe sans photographie n'est plus une nappe : c'est une colonne de 34 rem collée à gauche avec la moitié droite vide. Relevé par Yan sur la page servie : « c'est à gauche, faut le remettre plus au centre, il y a vraiment un bug ». Le vide n'était un argument que tant qu'une image l'occupait. */ .wp-block-group[class*="sb-s-"][class*="-nappe"]{ position:relative; isolation:isolate; /* LE FOND SOUS L'IMAGE. Ce n'est pas décoratif : si la photographie ne charge pas — et elle est choisie en administration, donc elle peut manquer — le texte tomberait sinon sur le fond de la page et deviendrait invisible. */ background:var(--lexs-fond); color:var(--lexs-texte); /* Colonne de texte + bord libre. La mesure vit dans la PISTE, en `rem` : un `ch` se résout sur la taille de chaque élément, et le titre à 84 px réclamait alors 1428 px de large. */ display:grid; grid-template-columns:min(34rem,100%) 1fr; align-content:center; min-height:min(82vh,46rem); padding:calc(var(--lexs-section) * 1.6) var(--lexs-marge); overflow:hidden; } [class*="sb-s-"][class*="-nappe"] > :not(figure){grid-column:1} /* La photographie passe en fond de section. Le compilateur la rend en `figure.wp-block-image` : c'est la figure qu'on déplace, pas l'image seule. */ .wp-block-group .sb-c-nappe-image, .wp-block-group .sb-c-sec-image, .wp-block-group .sb-c-snap-image, .wp-block-group .sb-c-sonp-image, .wp-block-group .sb-c-cnap-image, .wp-block-group .sb-c-anap-image{ /* AUCUNE position de grille ici, et c'est le point délicat : un élément absolu dont la position de grille est définie se cale sur SA PISTE — donc à l'intérieur du rembourrage. Sans elle, il se cale sur la boîte de rembourrage de la section, et couvre enfin toute la nappe. */ position:absolute; inset:0; width:auto; max-width:none; margin:0; z-index:-2; } /* LA CIBLE NE SE LISTE PLUS À LA MAIN. Elle l'était, et « sonp » y manquait : sur « Notre solution » l'image gardait `object-fit:fill` et sa largeur NATURELLE de 1500 px. Le défaut était invisible à 1440 px — `max-width:100%` la ramenait pile à la largeur de la fenêtre — et ne se voyait qu'au-delà de 1500. Une liste qu'il faut penser à compléter finit toujours par ne pas l'être. */ [class*="sb-s-"] > figure[class*="-image"] img{ width:100%; height:100%; object-fit:cover; /* LE CADRAGE SE DÉCLARE. Sans `object-position`, le recadrage est centré par défaut et ce qui passe derrière le texte devient le hasard du cadre : c'est la cause des deux surtitres tombés à 3.70 et 3.39 alors que le voile était mesuré. Le voile se remesure sur le recadrage SERVI, jamais sur le fichier. */ object-position:center; display:block; } /* Le dégradé laisse le bord droit à --lexs-voile-fuite : c'est ce qui empêche la page de ressembler à une image assombrie. SON PLATEAU SE MESURE EN LONGUEUR, PAS EN POURCENTAGE. Il valait 42 %, et 42 % de 1440 px tombent juste après la colonne de texte : le chiffre avait été relevé à cette largeur-là, puis figé. À 768 px la même colonne occupe 71 % de la nappe, donc sa moitié droite tombait dans la fuite du voile. Mesuré le 31.10.2026 sur les pixels servis : le titre de l'accueil à 2.96 et son chapô à 2.80, le surtitre de contact à 4.18. La colonne fait `min(34rem,100%)` après la marge. Le plateau s'arrête donc là, et il suit la colonne à toutes les largeurs au lieu de la croiser à une seule. */ [class*="sb-s-"][class*="-nappe"]::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(var(--lexs-voile-couleur),var(--lexs-voile-aa)) 0, rgba(var(--lexs-voile-couleur),var(--lexs-voile-aa)) calc(var(--lexs-marge) + 34rem), rgba(var(--lexs-voile-couleur),var(--lexs-voile-fuite)) 100%); } /* Le texte tient la moitié gauche et ne touche JAMAIS le bord libre. Deux classes dans le sélecteur : la mise en page contrainte de WordPress borne les enfants à `contentSize` et les centre, il faut la battre à spécificité égale. */ /* `solution-nappe` était absente de cette liste-ci alors qu'elle figurait dans les quatre autres. Sans effet visible, parce que le voile et l'image sont en z-index négatif — mais c'est la preuve que la liste ne se tient pas. */ .wp-block-group[class*="sb-s-"][class*="-nappe"] > :not(figure){ position:relative; } /* Au téléphone la colonne devient pleine largeur, et le dégradé bascule. LE TEXTE NE PASSE PLUS EN BAS — corrigé le 05.11.2026. Il y était posé par `align-content:end`, et c'est ce qui rendait la nappe INCOHÉRENTE d'une page à l'autre : mesuré à 390 px, le bloc de texte avait 139 px de photographie au-dessus de lui sur l'accueil, 268 sur la souveraineté et 391 sur le contact, pour 70 px en dessous à chaque fois. Trois pages, trois cadrages, parce que le haut dépendait de la longueur du texte et le bas jamais. Au bureau la même nappe était déjà centrée — 115 px au-dessus, 116 en dessous — et personne ne s'en plaignait. Le téléphone reprend donc la règle du bureau : le bloc est centré, et la photographie respire également des deux côtés quelle que soit la page. LE VOILE N'A PAS BESOIN DE BOUGER : il est à pleine force dès 6 % de la hauteur, donc il couvre déjà toute la zone où le texte peut désormais se trouver. Vérifié au banc de contraste après coup, pas supposé. */ @media (max-width:760px){ .wp-block-group[class*="sb-s-"][class*="-nappe"]{ grid-template-columns:100%; align-content:center; min-height:min(88vh,40rem); } [class*="sb-s-"][class*="-nappe"]::before{ /* LE VOILE DU TÉLÉPHONE COUVRAIT TOUT SAUF LE TEXTE. Mesuré le 31.10.2026 sur les pixels servis à 390 px : le titre de l'accueil tombait à 1.91 pour un seuil de 3, son surtitre à 4.21 pour 4.5, et le surtitre de « Notre solution » à 2.65. La cause n'est pas la photographie, c'est l'ordre des arrêts. Le texte occupe de 10 % à 89 % de la hauteur de la nappe selon la page, et le voile n'atteignait sa pleine force qu'à 72 % : l'accueil posait donc son titre entier dans `--lexs-voile-fuite`, dont le commentaire de la règle de bureau dit pourtant « AUCUN texte ici ». Le dégradé était juste, sa mesure jamais faite à cette largeur. Le voile passe donc à pleine force dès 6 %, au-dessus du texte le plus haut. Le bord libre reste au bureau, où il a un sens : au téléphone la nappe n'a pas de bord libre, elle a du texte du haut en bas. */ background:linear-gradient(180deg, rgba(var(--lexs-voile-couleur),var(--lexs-voile-fuite)) 0%, rgba(var(--lexs-voile-couleur),var(--lexs-voile-aa)) 6%, rgba(var(--lexs-voile-couleur),var(--lexs-voile-aa)) 100%); } } /* ============================================================ LES TITRES ET LA PROSE ============================================================ */ .sb-c-nappe-titre, .sb-c-snap-titre, .sb-c-sonp-titre, .sb-c-cnap-titre, .sb-c-anap-titre{ font-size:var(--lexs-t-nappe); letter-spacing:-.015em; margin:0 0 .5em; } .sb-c-sec-titre{ font-size:var(--lexs-t-sec); letter-spacing:-.01em; margin:0 0 .6em; } /* Les surtitres : l'opacité est VOLONTAIREMENT absente. Un `opacity` sur un texte coloré fait retomber son contraste sous le seuil sans que rien ne se voie — c'est la couleur qui porte la nuance, pas la transparence. */ /* LE SURTITRE D'UNE NAPPE PREND LA COULEUR PLEINE, pas la douce. Mesuré au rendu le 30.10.2026 : sur `--lexs-doux`, les surtitres de souveraineté et de contact tombaient à 3.70 et 3.39 pour un seuil de 4.5. Le voile n'était pas en cause — les opacités ont été mesurées sur les FICHIERS d'origine, or `object-fit:cover` recadre la photographie en plein cadre : ce qui passe derrière le texte n'est plus ce qui avait été mesuré. La hiérarchie est portée par la casse et l'interlettrage, qui suffisent. Hors nappe, le surtitre garde la couleur douce — il y est sur un fond plat, donc mesurable d'avance. */ .sb-c-nappe-surtitre, .sb-c-snap-surtitre, .sb-c-sonp-surtitre, .sb-c-cnap-surtitre, .sb-c-anap-surtitre{ font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lexs-texte); margin:0 0 1.4em; } .sb-c-mar-chapo, .sb-c-evo-chapo,.sb-c-nor-chapo{color:var(--lexs-doux);margin-bottom:2em} /* Les chapeaux de nappe passaient à 4.97 et 5.16 — au-dessus du seuil, mais de peu, et sur une photographie qu'un client remplacera un jour sans remesurer. Couleur pleine ici aussi. */ /* LE CHAPÔ EST L'ÉTAGE MANQUANT. Entre un titre Spectral à 72 px et un corps Inter à 17 px, il n'y avait rien — c'est ce saut brutal qui faisait « sombre générique » plutôt que premium. Le chapô passe en Spectral 300 à 24 px, et le troisième timbre n'est PAS une troisième famille : c'est le chiffre. */ .sb-c-nappe-chapo, .sb-c-snap-chapo, .sb-c-sonp-chapo, .sb-c-cnap-chapo, .sb-c-anap-chapo{ font-family:var(--lexs-titre); font-weight:var(--lexs-titre-graisse); font-size:var(--lexs-t-chapo); line-height:1.45; color:var(--lexs-texte); margin-bottom:1.6em; } .sb-c-sec-texte{margin-bottom:2em} /* LE PLAFOND DE MESURE ne borne QUE la prose qui court. Posé sur une classe partagée, il briderait chapeaux, légendes et descriptions courtes, et ça ne se voit jamais en relecture. */ .wp-block-group.sb-s-solution-limites, .wp-block-group.sb-s-legal{ display:grid; grid-template-columns:min(68ch,100%) 1fr; } .sb-s-solution-limites > *, .sb-s-legal > *{grid-column:1} /* ============================================================ LES SECTIONS DE TEXTE ============================================================ */ .wp-block-group.sb-s-accueil-appel, .wp-block-group.sb-s-souv-serveur, .wp-block-group.sb-s-apropos-approche, .wp-block-group.sb-s-contact-deroulement, .wp-block-group.sb-s-souv-engagements, .wp-block-group.sb-s-souv-appel, .wp-block-group.sb-s-solution-marche, .wp-block-group.sb-s-solution-limites, .wp-block-group.sb-s-solution-appel, .wp-block-group.sb-s-contact-formulaire, .wp-block-group.sb-s-legal, .wp-block-group.sb-s-apropos-personnes, .wp-block-group.sb-s-apropos-appel, .wp-block-group.sb-s-accueil-evolution, .wp-block-group.sb-s-solution-normes{ padding:var(--lexs-section) var(--lexs-marge); max-width:78rem; margin-inline:auto; } .wp-block-group.sb-s-solution-limites{border-top:1px solid var(--lexs-filet)} /* ============================================================ LA GRAMMAIRE D'ARDOISE — ce qui tient SANS photographie. Une seule image par page : les trois quarts de chaque page sont du fond plat, et le fond plat n'avait aucune grammaire. Tout passe par des pseudo-éléments : le compilateur produit le balisage depuis le prototype, et le thème ne peut rien y ajouter. Un filet et un chiffre se posent donc en CSS, ou pas du tout. ============================================================ */ /* L'AMORCE : le seul aplat d'accent autorisé hors du bouton de clôture. Deux centimètres de laiton au-dessus de chaque titre de section — c'est peu, et c'est ce qui dit que la page est tenue. */ .sb-s-souv-serveur > h2::before, .sb-s-apropos-approche > h2::before, .sb-s-contact-deroulement > h2::before, .sb-s-accueil-appel > h2::before, .sb-s-solution-marche > h2::before, .sb-s-solution-limites > h2::before, .sb-s-solution-appel > h2::before, .sb-s-souv-engagements > h2::before, .sb-s-souv-appel > h2::before, .sb-s-contact-formulaire > h2::before, .sb-s-apropos-personnes > h2::before, .sb-s-apropos-appel > h2::before, .sb-s-accueil-evolution > h2::before, .sb-s-solution-normes > h2::before{ content:""; display:block; width:var(--lexs-amorce-l); height:var(--lexs-amorce-e); background:var(--lexs-accent); margin:0 0 1.4rem; } /* LE CHIFFRE : le troisième timbre n'est pas une troisième famille. Spectral n'embarque pas de chiffres anciens — vérifié au rendu par la session branding, `lining` et `oldstyle` rendent les mêmes pixels — donc on n'en demande pas. */ .sb-s-solution-marche, .sb-s-souv-engagements, .sb-s-contact-deroulement{counter-reset:lexs-temps} /* LA LISTE DES CARTES NE S'ÉCRIT PLUS À LA MAIN. Elle l'était trois fois, et le 02.11.2026 deux séquences sont passées de trois cartes à quatre : la numérotation se serait arrêtée à la troisième sans que rien ne le signale. Le nom d'une carte finit toujours par `-nom` ; on le cible par là, dans la SECTION qui numérote. Les sections qui ne numérotent pas, elles, ne sont pas listées, et c'est ce qui les distingue. */ .sb-s-solution-marche [class*="sb-c-"][class*="-nom"], .sb-s-souv-engagements [class*="sb-c-"][class*="-nom"], .sb-s-contact-deroulement [class*="sb-c-"][class*="-nom"]{ counter-increment:lexs-temps; } .sb-s-solution-marche [class*="sb-c-"][class*="-nom"]::before, .sb-s-souv-engagements [class*="sb-c-"][class*="-nom"]::before, .sb-s-contact-deroulement [class*="sb-c-"][class*="-nom"]::before{ content:counter(lexs-temps,decimal-leading-zero); display:block; font-family:var(--lexs-titre); font-weight:var(--lexs-titre-graisse); font-size:var(--lexs-t-bloc); color:var(--lexs-doux); letter-spacing:.04em; margin-bottom:.45rem; } /* Les trois temps, et les trois engagements : des CHAMPS, pas une liste — le contenu est fixe, et une liste n'en restituerait que le premier exemplaire. */ /* TROIS COLONNES, ET UN PLACEMENT EXPLICITE. Le compilateur aplatit la section : titre, chapeau, puis trois paires titre+texte, tous enfants directs. Laissés au placement automatique, ils se rangent dans l'ordre du FLUX — le texte du premier engagement tombe alors sous le titre du deuxième, et la section ment. Chaque paire est donc posée à sa colonne ET à sa ligne. Mesuré au rendu le 30.10.2026. */ @media (min-width:60rem){ /* UN SCHÉMA, PAS TROIS COLONNES DE TEXTE. L'écart entre pistes passe à zéro pour que les filets de tête se touchent et ne fassent plus qu'UNE ligne continue — la séquence se parcourt du regard au lieu de se lire. L'air revient par un rembourrage interne, qui lui ne coupe pas le filet. */ .wp-block-group.sb-s-accueil-evolution{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; align-items:start; } /* QUATRE COLONNES depuis le 02.11.2026 : les temps de la solution sont passés de trois à quatre avec la Confrontation, et les engagements de souveraineté de trois à quatre avec la séparation physique. La couverture normative en a quatre par construction, un échelon de droit par colonne. */ .wp-block-group.sb-s-solution-marche, .wp-block-group.sb-s-solution-normes, .wp-block-group.sb-s-souv-engagements{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:start; } /* `box-sizing` EST OBLIGATOIRE ICI. La règle globale pose `width:100%` sur tout enfant de section ; sans boîte de bordure, le rembourrage s'AJOUTE à la largeur et la colonne déborde sa piste de la valeur exacte du rembourrage — les textes se touchaient alors au lieu de s'écarter. Mesuré au navigateur : 411 px de boîte dans une piste de 368. */ .sb-s-accueil-evolution > :not(h2):not(.sb-c-evo-chapo), .sb-s-solution-marche > :not(h2):not(.sb-c-mar-chapo), .sb-s-solution-normes > :not(h2):not(.sb-c-nor-chapo):not(.sb-c-nor-branche):not(svg), .sb-s-souv-engagements > :not(h2){ box-sizing:border-box; padding-right:clamp(1.5rem,3vw,3rem); } /* DEUX TEMPS, DONC DEUX COLONNES — pas quatre. La section ne numérote que ce qu'elle contient, et étendre la grille à quatre pistes laisserait deux colonnes vides sous un filet qui, lui, traverserait toute la largeur. */ .wp-block-group.sb-s-contact-deroulement{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; align-items:start; } .sb-s-contact-deroulement > :not(h2){ box-sizing:border-box; padding-right:clamp(1.5rem,3vw,3rem); } .sb-s-contact-deroulement > h2{grid-column:1/-1; grid-row:1} .sb-c-der-1-nom{grid-column:1; grid-row:2} .sb-c-der-1-texte{grid-column:1; grid-row:3} .sb-c-der-2-nom{grid-column:2; grid-row:2} .sb-c-der-2-texte{grid-column:2; grid-row:3} .sb-s-souv-engagements > .wp-block-heading:not([class*="-nom"]){ grid-column:1/-1; grid-row:1; } .i-eng-1{grid-column:1; grid-row:2} .sb-c-eng-1-nom{grid-column:1; grid-row:3} .sb-c-eng-1-texte{grid-column:1; grid-row:4} .i-eng-2{grid-column:2; grid-row:2} .sb-c-eng-2-nom{grid-column:2; grid-row:3} .sb-c-eng-2-texte{grid-column:2; grid-row:4} .i-eng-3{grid-column:3; grid-row:2} .sb-c-eng-3-nom{grid-column:3; grid-row:3} .sb-c-eng-3-texte{grid-column:3; grid-row:4} .i-eng-4{grid-column:4; grid-row:2} .sb-c-eng-4-nom{grid-column:4; grid-row:3} .sb-c-eng-4-texte{grid-column:4; grid-row:4} .sb-s-solution-marche > .wp-block-heading:not([class*="-nom"]){ grid-column:1/-1; grid-row:1; } .sb-s-solution-marche > .sb-c-mar-chapo{grid-column:1/-1; grid-row:2} .i-mar-1{grid-column:1; grid-row:3} .sb-c-mar-1-nom{grid-column:1; grid-row:4} .sb-c-mar-1-texte{grid-column:1; grid-row:5} .i-mar-2{grid-column:2; grid-row:3} .sb-c-mar-2-nom{grid-column:2; grid-row:4} .sb-c-mar-2-texte{grid-column:2; grid-row:5} .i-mar-3{grid-column:3; grid-row:3} .sb-c-mar-3-nom{grid-column:3; grid-row:4} .sb-c-mar-3-texte{grid-column:3; grid-row:5} .i-mar-4{grid-column:4; grid-row:3} .sb-c-mar-4-nom{grid-column:4; grid-row:4} .sb-c-mar-4-texte{grid-column:4; grid-row:5} /* DEUX colonnes ici, pas trois : il y a deux cas d'usage, et un tiers vide se lirait comme un oubli. */ /* TROIS COLONNES depuis le 03.11.2026 : la traçabilité, dont la section entière a été déposée, revient ici en troisième carte. Le placement est explicite, donc il ne se devine pas — et c'est la troisième fois sur ce site qu'une carte ajoutée sans son placement tombe en bas de la grille. */ /* LE RAIL — et c'est la raison d'être de ce bloc-ci. « Ce qu'il fait » est une SÉQUENCE : trois colonnes numérotées, dans l'ordre. « Pourquoi nous » est une LISTE DE RAISONS : rien n'y vient avant ni après. Leur donner la même forme, numéros compris, faisait lire deux fois le même gabarit à la suite — et un gabarit répété se voit avant le contenu. Ici donc : deux x, le titre à gauche, la raison à droite, sans numéro. Le rail se referme sous 60 rem. */ /* ────────────────────────────────────────────────────────────── LES SECTIONS VENUES DE LA PRÉSENTATION DU 01.11.2026. Trois grammaires déjà connues de cette feuille, reprises telles quelles : trois colonnes pour une liste de raisons, quatre pour une séquence ou une hiérarchie, deux pour un choix. ────────────────────────────────────────────────────────────── */ /* L'évolution des pratiques : trois raisons, comme « Nos partis pris ». Aucun numéro, parce que ce n'est pas une séquence. */ .sb-s-accueil-evolution > .wp-block-heading:not([class*="-nom"]){ grid-column:1/-1; grid-row:1; } .sb-s-accueil-evolution > .sb-c-evo-chapo{grid-column:1/-1; grid-row:2} .i-evo-1{grid-column:1; grid-row:3} .sb-c-evo-1-nom{grid-column:1; grid-row:4} .sb-c-evo-1-texte{grid-column:1; grid-row:5} .i-evo-2{grid-column:2; grid-row:3} .sb-c-evo-2-nom{grid-column:2; grid-row:4} .sb-c-evo-2-texte{grid-column:2; grid-row:5} .i-evo-3{grid-column:3; grid-row:3} .sb-c-evo-3-nom{grid-column:3; grid-row:4} .sb-c-evo-3-texte{grid-column:3; grid-row:5} /* La couverture normative : un échelon de droit par colonne, dans l'ordre où ils s'emboîtent. La phrase des corpus de branche court sous les quatre, parce qu'elle les traverse tous. */ .sb-s-solution-normes > .wp-block-heading:not([class*="-nom"]){ grid-column:1/-1; grid-row:1; } .sb-s-solution-normes > .sb-c-nor-chapo{grid-column:1/-1; grid-row:2} /* LES QUATRE GLOSES SONT PARTIES le 03.11.2026, et leurs règles avec elles : une règle sans cible est un manquement que le préflight relève, et c'est ainsi qu'on laisse derrière soi du gabarit pour une copie qui n'existe plus. */ /* UN ÉCHELON PAR COLONNE, SA GLOSE DESSOUS. Le dessin emboîté et le retrait progressif sont partis ensemble le 04.11.2026 — « cette espèce de truc en pyramide, visuellement c'est vraiment pas beau ». Les quatre échelons reprennent la grammaire des autres séquences du site, et leur glose revient de la diapositive 8 : un nom d'échelon seul n'apprend rien à un avocat. */ .i-nor-1{grid-column:1; grid-row:3} .sb-c-nor-1-nom{grid-column:1; grid-row:4} .sb-c-nor-1-texte{grid-column:1; grid-row:5} .i-nor-2{grid-column:2; grid-row:3} .sb-c-nor-2-nom{grid-column:2; grid-row:4} .sb-c-nor-2-texte{grid-column:2; grid-row:5} .i-nor-3{grid-column:3; grid-row:3} .sb-c-nor-3-nom{grid-column:3; grid-row:4} .sb-c-nor-3-texte{grid-column:3; grid-row:5} .i-nor-4{grid-column:4; grid-row:3} .sb-c-nor-4-nom{grid-column:4; grid-row:4} .sb-c-nor-4-texte{grid-column:4; grid-row:5} /* LA PHRASE DES CORPUS DE BRANCHE EST PASSÉE EN RANGÉE 5 le 04.11.2026. Elle était restée en 4 quand les gloses des échelons y sont arrivées : les deux occupaient la même rangée et se superposaient, texte sur texte. Aucune porte ne l'a vu — ni le débordement, ni le contraste, ni le standard ne mesurent une superposition. Seule la capture l'a montrée. */ .i-nor-branche{grid-column:1/-1; grid-row:6; margin-top:2.5rem} .sb-s-solution-normes > .sb-c-nor-branche{ grid-column:1/-1; grid-row:7; max-width:68ch; } /* Les deux niveaux de démonstration : un choix, donc deux colonnes. */ /* Les compétences : trois colonnes, l'icône au-dessus du nom. Elles étaient deux jusqu'au 05.11.2026 — « Analyse métier » est la troisième. */ .wp-block-group.sb-s-apropos-personnes{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(2rem,4vw,4rem); align-items:start; } .sb-s-apropos-personnes > .wp-block-heading:not([class*="-nom"]){ grid-column:1/-1; grid-row:1; } .i-per-1{grid-column:1; grid-row:2} .sb-c-per-1-nom{grid-column:1; grid-row:3} .sb-c-per-1-texte{grid-column:1; grid-row:4} .i-per-2{grid-column:2; grid-row:2} .sb-c-per-2-nom{grid-column:2; grid-row:3} .sb-c-per-2-texte{grid-column:2; grid-row:4} .i-per-3{grid-column:3; grid-row:2} .sb-c-per-3-nom{grid-column:3; grid-row:3} .sb-c-per-3-texte{grid-column:3; grid-row:4} } /* LES PORTRAITS ET LES RÔLES SONT PARTIS avec les patronymes, le 03.11.2026, et leurs règles avec eux le 04 : une règle sans cible est du gabarit qui attend une copie qui n'existe plus. La page « À propos » nomme deux métiers, pas deux personnes. */ /* Cette liste-ci portait DEUX FOIS les trois mêmes sélecteurs de `pro`, résidu d'une recopie. Structurelle, elle couvre aussi les trois sections ajoutées le 02.11.2026. */ [class*="sb-s-"] [class*="sb-c-"][class*="-nom"]{ position:relative; padding-top:1.5em; border-top:1px solid var(--lexs-filet); margin-bottom:.5em; } /* L'ARRÊT SUR LA LIGNE. Un point de laiton posé sur le filet à chaque étape : c'est ce qui fait lire une séquence plutôt que trois colonnes qui se ressemblent. */ /* La liste des arrêts était écrite à la main, et elle s'est arrêtée à trois le jour où les séquences sont passées à quatre : le rail portait trois points pour quatre temps. Structurelle, et scopée aux sections qui numérotent. */ .sb-s-solution-marche [class*="sb-c-"][class*="-nom"]::after, .sb-s-souv-engagements [class*="sb-c-"][class*="-nom"]::after{ content:""; position:absolute; top:-4px; left:0; width:8px; height:8px; border-radius:50%; background:var(--lexs-accent); } /* ============================================================ GRAMMAIRE INTERACTIVE — trois catégories, jamais quatre. L'accent ne peint QUE ce qui se clique. ============================================================ */ .wp-block-button__link{ border:1px solid var(--lexs-accent); padding:.78em 1.5em; letter-spacing:.02em; text-decoration:none; } /* LE BOUTON FANTÔME. Le compilateur l'a aplati vers le même bloc natif que le bouton plein ; c'est la classe du conteneur qui rétablit la distinction. */ .sb-c-sec-lien .wp-block-button__link, .sb-c-frm-tel .wp-block-button__link{ background:transparent; color:var(--lexs-accent); } /* L'ACCENT NE SE REMPLIT QU'UNE FOIS PAR PAGE, ET JAMAIS SUR UNE NAPPE. L'aplat de laiton sur photographie est l'élément qui coûtait le plus cher au premium — l'accueil en portait deux. Sur une nappe le bouton est cerné à la couleur du texte ; l'aplat reste à la section de clôture, sur fond plat. */ .sb-c-nappe-cta .wp-block-button__link, .sb-c-sonp-cta .wp-block-button__link, .sb-c-snap-cta .wp-block-button__link, .sb-c-cnap-cta .wp-block-button__link{ background:transparent; color:var(--lexs-texte); border:1px solid var(--lexs-texte); } .sb-c-nappe-cta .wp-block-button__link:focus-visible, .sb-c-sonp-cta .wp-block-button__link:focus-visible{ outline:2px solid var(--lexs-texte); outline-offset:3px; } .wp-block-button__link:focus-visible, a:focus-visible{ outline:2px solid var(--lexs-accent); outline-offset:3px; } /* ============================================================ LE FORMULAIRE — rendu par Fluent Forms, habillé ici. ============================================================ */ /* LE CADRE LÉGAL. Le texte à gauche, la figure du cabinet à droite : la figure occupe la place que le vide tenait, et la section retrouve la mesure des autres. Sous 60 rem la figure repasse sous le texte. */ .wp-block-group.sb-s-accueil-secret{ padding:var(--lexs-section) var(--lexs-marge); max-width:78rem; margin-inline:auto; } /* LA RÈGLE VISAIT UN `div` QUI N'EXISTE QUE DANS LE PROTOTYPE. Le compilateur rend les enfants à plat dans le contenu WordPress, donc `> div` n'y attrapait que l'enveloppe des boutons : la figure retombait sous le texte, centrée, et la colonne de droite restait vide — exactement le défaut qu'on venait de corriger. Le prototype a perdu son `div` le 04.11.2026 pour que les deux arbres se ressemblent, et la grille se pose désormais sur la section. */ @media (min-width:60rem){ .wp-block-group.sb-s-accueil-secret{ display:grid; grid-template-columns:minmax(0,34rem) minmax(0,1fr); column-gap:clamp(2rem,5vw,5rem); align-items:center; } .sb-s-accueil-secret > :not(.lexs-figure){grid-column:1} .sb-s-accueil-secret > .lexs-figure-cabinet{ grid-column:2; grid-row:1/-1; justify-self:center; align-self:center; margin:0; } } /* LES COORDONNÉES À LA PLACE DU FORMULAIRE, arbitrage de Yan du 05.11.2026 : « enlève le formulaire pour le moment », le courriel et le numéro devant, l'adresse dessous. LES DEUX LIENS SONT LA CIBLE PRINCIPALE DE LA PAGE, donc ils se voient et ils se cliquent : taille du chapô, pas celle du corps. L'adresse postale ne sert pas à prendre contact — elle dit à qui on parle — donc elle passe derrière, en petit et en encre douce. LE PLANCHER TACTILE NE SE POSE QUE SOUS 900 px, comme pour le numéro du pied : à la souris, un lien de 29 px de haut se clique très bien, et l'élargir au-delà reproduirait le pas que Yan a fait resserrer. */ .sb-s-contact-formulaire > .sb-c-frm-courriel{margin-top:1.75rem} .sb-s-contact-formulaire > .sb-c-frm-tel{margin-top:.75rem} /* L'ADRESSE EST EN QUATRE PARAGRAPHES, et quatre paragraphes ont quatre marges : sans cette remise à zéro, l'adresse s'étale sur quatre blocs au lieu de se lire comme un bloc. Le premier garde l'air qui la sépare des boutons. */ .sb-s-contact-formulaire > [class*="sb-c-frm-adresse-"]{ margin:0; max-width:68ch; font-size:var(--lexs-t-petit); line-height:1.55; color:var(--lexs-doux); } .sb-s-contact-formulaire > .sb-c-frm-adresse-1{margin-top:2.5rem} /* ⚠️ BORNER UN ENFANT DE SECTION LE SORT DE L'AXE DE GAUCHE, et aucune règle écrite ici ne le dit. `.is-layout-constrained > *` de WordPress pose `margin-left:auto; margin-right:auto` : dès qu'un enfant porte une largeur maximale, il se centre. Mesuré le 04.11.2026 à 1600 px sur les trois sections concernées — le chapô du formulaire commençait à 426 et le formulaire à 448 quand leur titre commence à 256, soit 170 et 192 px de décalage sur la page de conversion. La phrase des corpus de branche et celle qui clôt les engagements avaient le même décalage. C'EST LE PIÈGE DU BORNAGE PRÉCÉDENT. Le formulaire prenait la mesure entière de la page ; on l'a borné à 44 rem, et il est devenu centré au lieu de redevenir aligné. Une correction qui change la largeur sans reprendre la marge déplace le défaut, elle ne le retire pas. Ces sections alignent tout à gauche : on reprend donc la marge, et la règle vit hors de toute requête de média, puisque la mise en page contrainte, elle, s'applique à toutes les largeurs. */ .sb-s-solution-normes > .sb-c-nor-branche, .sb-s-contact-formulaire > [class*="sb-c-frm-adresse-"]{ /* `!important`, ET IL N'Y A PAS D'AUTRE MOYEN. WordPress émet sa mise en page contrainte en `margin-left:auto !important; margin-right:auto !important` : une règle plus spécifique ne suffit pas, et la première version de ce correctif n'a rien déplacé. C'est ce qui l'a montré : `justify-self` est passé, `margin-inline` non — deux déclarations du même bloc, dont une seule gagnait. Les seules autres sorties sont les classes d'alignement que WordPress exempte (`alignfull`, `alignleft`), et elles emportent la largeur maximale avec elles. */ margin-inline:0 !important; justify-self:start; } .sb-s-contact-formulaire input[type="text"], .sb-s-contact-formulaire input[type="email"], .sb-s-contact-formulaire input[type="tel"], .sb-s-contact-formulaire textarea, .sb-s-contact-formulaire select{ background:var(--lexs-surface); color:var(--lexs-texte); border:1px solid var(--lexs-filet); border-radius:0; padding:.7em .9em; font-family:inherit; font-size:1rem; width:100%; } .sb-s-contact-formulaire input:focus-visible, .sb-s-contact-formulaire textarea:focus-visible, .sb-s-contact-formulaire select:focus-visible{ outline:2px solid var(--lexs-accent); outline-offset:2px; } /* FLUENT FORMS APPORTE SES PROPRES COULEURS — un bouton bleu et un astérisque rouge qui n'appartiennent à aucun token de la marque. On les ramène sur la palette : l'accent ne peint que ce qui se clique, et le laiton sur ardoise sombre donne 7.68. */ .sb-s-contact-formulaire .ff-btn-submit, .sb-s-contact-formulaire .ff-btn.ff-btn-submit{ background:var(--lexs-accent); color:var(--lexs-sur-accent); border:1px solid var(--lexs-accent); border-radius:0; font-family:var(--lexs-corps); font-weight:600; letter-spacing:.02em; padding:.78em 1.5em; } .sb-s-contact-formulaire .ff-btn-submit:hover{ background:transparent; color:var(--lexs-accent); } .sb-s-contact-formulaire .ff-el-is-required .ff-el-input--label label:after, .sb-s-contact-formulaire .ff-el-input--label.ff-el-is-required label:after{ color:var(--lexs-accent); } .sb-s-contact-formulaire .ff-el-input--label label{ color:var(--lexs-texte); font-size:.9375rem; } .sb-s-contact-formulaire .ff-el-form-control::placeholder{color:var(--lexs-doux)} /* ============================================================ EN-TÊTE ET PIED ============================================================ */ /* L'ÉCART DE 24 px QUI RESSEMBLAIT À UNE BORDURE. WordPress pose une marge entre les blocs de premier niveau : une bande du fond de page s'intercalait entre l'en-tête et la photographie, et se lisait comme un filet raté. */ .wp-site-blocks > *{margin-block-start:0} /* L'EN-TÊTE RESTE. Sur un site dont chaque page est une nappe plein cadre, un en-tête qui part au défilement laisse le visiteur sans retour ni repère. Il est donc collant — et opaque, parce qu'un en-tête translucide sur photographie fait passer le texte du menu sous le seuil de contraste à chaque défilement, sans que rien ne le signale. */ /* LE COLLANT VA SUR L'ÉLÉMENT `header`, PAS SUR LE GROUPE INTÉRIEUR. Un élément collant ne se déplace que dans les limites de son PARENT : posé sur le groupe, il restait prisonnier d'un en-tête haut de 77 px et ne tenait rien. Mesuré le 30.10.2026. */ .wp-site-blocks > header{ position:sticky; top:0; z-index:10; } .lexs-entete{ background:var(--lexs-fond); padding:1rem var(--lexs-marge); border-bottom:1px solid var(--lexs-filet); } .lexs-entete .wp-block-site-title a{ font-family:var(--wp--preset--font-family--titre); font-size:1.35rem; color:var(--lexs-texte); text-decoration:none; } /* LA MARQUE DU BANDEAU EST LE LIEN DE RETOUR À L'ACCUEIL, donc une cible, et elle mesurait 138 × 33 px. Mesuré le 04.11.2026 à 390 px. Comme pour le numéro, le plancher ne se pose que sous 900 px. */ @media (max-width:900px){ .lexs-entete .wp-block-site-title a{ display:inline-flex; align-items:center; min-height:2.75rem; } } .lexs-entete .wp-block-navigation{gap:clamp(1rem,2.5vw,2.25rem)} .lexs-entete .wp-block-navigation a{ color:var(--lexs-texte); text-decoration:none; font-size:.9375rem; letter-spacing:.02em; } .lexs-entete .wp-block-navigation a:hover{color:var(--lexs-accent)} /* LA PAGE COURANTE SE VOIT, ET PAS SEULEMENT À LA COULEUR. Le survol prend déjà le laiton : si l'état courant ne prenait que lui aussi, les deux seraient indiscernables dès que la souris passe, et un daltonien ne verrait jamais ni l'un ni l'autre. Le filet est donc le signe, la couleur n'est que le renfort. C'est l'amorce de laiton de la grammaire d'ardoise, posée sous le lien au lieu d'au-dessus d'un titre, et à la largeur du mot plutôt qu'à la sienne. Jamais d'aplat : l'accent ne se remplit qu'une fois par page, à la section de clôture. `aria-current` et non une classe, parce que c'est l'attribut que WordPress poserait s'il savait le faire sur un lien `custom` — et c'est celui qu'un lecteur d'écran annonce. La classe `lexs-page-courante` que le filtre pose sur le `
  • ` reste disponible, elle n'est pas le crochet du dessin. */ .lexs-entete .wp-block-navigation a[aria-current="page"]{ color:var(--lexs-accent); position:relative; } .lexs-entete .wp-block-navigation a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-.5em; height:var(--lexs-amorce-e); background:var(--lexs-accent); } /* ============================================================ LE TEXTE LÉGAL DU BANDEAU DE CONSENTEMENT. Demandé plus petit par Yan le 31.10.2026. Mesuré avant : le paragraphe rendait 16 px en graisse 400, son titre 17 px en graisse 300. Le texte légal était donc PLUS LOURD que son propre titre, pour un point d'écart : la hiérarchie était inversée, et c'est ce qui le faisait lire comme un mur. À 390 px le bandeau occupait 39 % de l'écran, dont 168 px pour ce seul paragraphe. EN `em`, ET SURTOUT PAS SUR LA RACINE DU BANDEAU. Le module fixe `.sbwp-cnst` à 16 px et son commentaire dit pourquoi : « sous 16, Safari iOS zoome de force la page à la prise de focus dans un champ ». Le bandeau porte des champs, dans son panneau de préférences. On réduit donc le PARAGRAPHE, qui n'en contient aucun, et l'unité `em` le tient accroché aux 16 px du bandeau plutôt qu'à une racine de document qu'une autre marque pourrait changer. Deux classes dans le sélecteur : la feuille du module est injectée dans le document, et une règle de spécificité égale perdrait selon l'ordre d'insertion, qui n'est pas garanti. ============================================================ */ .sbwp-cnst p.sbwp-cnst-texte{ font-size:.875em; line-height:1.55; } /* ============================================================ LE PANNEAU DU MENU AU TÉLÉPHONE. C'était du WordPress brut, et c'est la SEULE navigation d'un visiteur sur téléphone. Mesuré le 31.10.2026 : fond `rgb(255,255,255)` sur un site en `#0A1D29`, texte `rgb(0,0,0)`, rembourrage à zéro, les cinq liens à `x=0` contre le bord de l'écran et le bouton de fermeture contre le bord droit. Le laiton de la page courante y tombait à 2.24, comme le survol. LES COULEURS SE DÉCLARENT AU BLOC, dans `parts/header.html`, par `overlayBackgroundColor` et `overlayTextColor` : WordPress les pose par une feuille en ligne qu'une règle d'ici devrait battre à la spécificité, et les attributs prennent des fentes de la palette, donc rien n'est recopié. Le panneau est maintenant en ardoise, le laiton y reprend sa valeur pleine, et il n'y a plus de variante assombrie à prévoir ici. Reste au thème ce que le bloc ne sait pas dire : les marges et la taille des cibles. ============================================================ */ .lexs-entete .wp-block-navigation__responsive-container.is-menu-open{ padding:var(--lexs-marge); } /* 44 px est le plancher tactile, et un lien de menu en est loin : il rend 25 px de haut, la hauteur de sa ligne. On grandit la ZONE, pas le texte — la hiérarchie typographique du menu ne change pas. SAUF DANS LE PANNEAU PLEIN ÉCRAN, et c'est le correctif du 05.11.2026. Yan, sur son téléphone : « trop d'interligne », et « là aussi peut-être un peu petit ». Les deux à la fois, et ce n'est pas contradictoire : mesuré à 390 px, les cinq liens faisaient 15 px de texte pour un pas de 60 px — un caractère de menu de bureau espacé comme une liste de lecture. Dans un panneau qui occupe tout l'écran pour cinq entrées, le texte doit porter et l'air entre les lignes n'a plus rien à séparer : le plancher de 44 px s'en charge déjà. L'ÉCART NE TOMBE PAS À ZÉRO. À 2 px les zones tactiles se touchent, et un pouce qui vise « Souveraineté » attrape « À propos ». On garde un demi-pas lisible, et le pas total passe de 60 à ~50 px. */ .lexs-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ display:flex; align-items:center; min-height:44px; font-size:1.25rem; letter-spacing:0; } .lexs-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ gap:.35rem; } /* LE BOUTON D'OUVERTURE NE REÇOIT PAS DE `display`, et c'est la seule chose délicate de ce bloc. Il en a reçu un, le temps de centrer son icône, et il est alors apparu SUR LE BUREAU à côté du menu complet : WordPress le masque au-dessus de 600 px par une règle de spécificité ÉGALE à celle d'ici, que la feuille du thème battait au seul titre d'être chargée après. Seule sa taille se déclare donc. Le bouton de fermeture, lui, n'existe que dans le panneau ouvert. */ .lexs-entete .wp-block-navigation__responsive-container-open{ min-width:44px; min-height:44px; } .lexs-entete .wp-block-navigation__responsive-container-close{ min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; } /* AUCUNE COMPENSATION DE MARGE ICI. Elle y était, et elle ramenait le bouton à 10 px du bord quand le logotype est à 20 : un bord libre qui n'est pas le même à gauche et à droite se voit, et une cible de 44 px a besoin de sa place. L'en-tête passe de 69 à 77 px, ce qui est le prix exact du plancher tactile. */ /* Les liens du panneau sont empilés et plus hauts : le filet de la page courante se recale sous la ligne, pas sous le bloc. */ .lexs-entete .wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"]::after{bottom:.25em} /* ============================================================ LE PIED — au motif de la maison : des colonnes de liens, une ligne de copie, et les pages légales à part. ============================================================ */ .lexs-pied > *{max-width:none;width:100%;margin-left:0;margin-right:0} .lexs-pied{ padding:calc(var(--lexs-marge) * 1.4) var(--lexs-marge); border-top:1px solid var(--lexs-filet); background:var(--lexs-surface); color:var(--lexs-doux); font-size:.9375rem; } .lexs-pied-colonnes{ align-items:flex-start; gap:clamp(2rem,5vw,5rem); padding-bottom:2.5rem; } .lexs-pied-marque{max-width:26rem} .lexs-pied .wp-block-site-title{ font-family:var(--wp--preset--font-family--titre); font-size:1.35rem; color:var(--lexs-texte); margin-bottom:.5rem; } .lexs-pied-phrase{color:var(--lexs-doux);margin:0} .lexs-pied-titre{ color:var(--lexs-texte); letter-spacing:.14em; font-size:.75rem; margin:0 0 .9rem; } .lexs-pied-menu{ flex-direction:column; align-items:flex-start; gap:0; } /* LA CIBLE TACTILE DU PIED. Mesurée le 04.11.2026 à 375 px : les neuf entrées du pied faisaient 25 px de haut, sous le plancher de 44 px, et ce sont les seuls liens toujours visibles au téléphone — l'en-tête, lui, est replié dans son menu. LE REMPLISSAGE REMPLACE L'ESPACEMENT, il ne s'y ajoute pas : `gap` est passé à zéro juste au-dessus. LE PLANCHER NE VAUT PLUS À TOUTES LES LARGEURS, et la version du matin se trompait en écrivant que le rythme visuel ne bougeait pas. Il bouge : une entrée de pied mesure 25 px de texte, le plancher la porte à 44, et les cinq entrées de la colonne « Explorer » prenaient 58 px de pas sur un écran de bureau. Relevé par Yan le 04.11.2026 : « beaucoup trop de place ». Le plancher reste donc là où le doigt vise, jusqu'à 900 px — ce que le banc mesure à 320, 375 et 768 px — et le pas se resserre à la souris. */ .lexs-pied-menu a{ display:flex; align-items:center; padding-block:.25rem; } @media (max-width:900px){ .lexs-pied-menu a{ /* ⚠️ `box-sizing` EST EN `content-box` ICI, ET SANS CETTE LIGNE LE PLANCHER DÉPASSE SA CIBLE. `min-height` s'applique alors à la boîte de CONTENU : les 9,6 px de `padding-block` s'ajoutent aux 44, et l'entrée rend 53,6 px. Mesuré le 05.11.2026 à 390 px — neuf entrées à 54 px de pas au lieu de 44, soit 90 px de pied en trop, et Yan : « interligne pas bon ». LE DÉFAUT NE SE VOIT PAS DANS LA RÈGLE : elle dit 2.75rem et on lit 44. Il ne se voit qu'en demandant au navigateur la hauteur rendue. Partout où cette feuille pose un plancher tactile sur un élément qui porte aussi du remplissage, la même vérification est due. */ box-sizing:border-box; /* 2.25rem, ET PLUS 2.75. Yan, le 05.11.2026 au soir, capture à l'appui : « interligne toujours trop grand entre lignes menu ». Mesuré à 390 px avant correction : neuf entrées de 44,0 px, écart nul entre elles, pour un texte de 15 px dans une ligne de 24,75 px — 19 px de vide autour de chaque libellé, et c'est le PLANCHER LUI-MÊME qui faisait l'interligne, pas un espacement oublié. CE QU'ON PERD EST NOMMÉ : 44 px est le critère 2.5.5 de WCAG, qui est de niveau AAA. Le critère AA est le 2.5.8, à 24 px. À 36 px le pied reste à une fois et demie le plancher AA et tombe sous le AAA. C'est un arbitrage de Yan sur un site qu'il relit au téléphone, pas un oubli — et il s'écrit ici pour que personne ne le « corrige » à l'aveugle en relevant un banc. */ min-height:2.25rem; min-width:2.25rem; padding-block:.3rem; } } /* LES CHAMPS DU FORMULAIRE font 41 px de haut, mesuré le 04.11.2026 à 320 et 375 px : trois pixels sous le plancher de 44. C'est le seul point de conversion du site, donc les trois pixels se posent. CIBLÉ SUR LES CHAMPS DE SAISIE ET RIEN D'AUTRE. Un plancher tactile passé à la cantonade sur `.ff-el-form-control` atteindrait les cases à cocher et les boutons radio, que le navigateur dessine à partir de leur boîte : ils deviendraient des ovales. Le défaut a déjà été payé une fois dans la maison, sur une modale. */ .sb-s-contact-formulaire input.ff-el-form-control:not([type="checkbox"]):not([type="radio"]), .sb-s-contact-formulaire select.ff-el-form-control, .sb-s-contact-formulaire textarea.ff-el-form-control{ min-height:2.75rem; } .lexs-pied-colonne{min-width:11rem} .lexs-pied-marque{max-width:24rem} /* PAS D'APPEL DANS LE PIED. Les pages de vitrine finissent toutes par une section de clôture qui en porte un : le pied le répétait immédiatement en dessous, et deux appels qui se touchent s'annulent. Le pied mène au contact par « Nous écrire », qui est une entrée de navigation et non un second appel. */ .lexs-pied-bas{align-items:center} /* Les pages juridiques sont de la prose qui court : elles prennent la mesure, et rien d'autre. */ .wp-block-group.sb-s-cgu, .wp-block-group.sb-s-confidentialite{ padding:var(--lexs-section) var(--lexs-marge); max-width:78rem; margin-inline:auto; display:grid; grid-template-columns:min(68ch,100%) 1fr; } .sb-s-cgu > *, .sb-s-confidentialite > *{grid-column:1} .lexs-pied a{color:var(--lexs-doux);text-decoration:none} .lexs-pied a:hover{color:var(--lexs-accent)} .lexs-pied-bas{ border-top:1px solid var(--lexs-filet); padding-top:1.5rem; align-items:center; gap:1rem; } .lexs-pied-copie{margin:0} /* LE CRÉDIT PHOTOGRAPHIQUE SE TAIT AU REPOS, ET SE MONTRE QUAND ON LE VISE. Première version : encre des titres et soulignement permanent. Mesuré en ligne à 390 px, c'est ce qui l'a condamnée — le lien rendait rgb(240,234,217) quand la ligne qui le porte rend rgb(169,188,201). Il était donc PLUS CLAIR que son propre texte, et souligné par-dessus : un crédit discret qui criait plus fort que « © 2026 ». Yan : « même couleur que le texte normal, pas souligné ». MAIS CLIQUABLE, et c'est la deuxième moitié de sa demande. Un lien qui ne se distingue par rien au repos doit se distinguer au survol et au clavier, sinon il n'est plus un lien, juste du texte qui réagit. D'où le soulignement au survol et l'anneau au focus — `color:inherit` fait le reste : l'encre suit celle de la ligne, quoi qu'elle devienne. PAS DE PLANCHER TACTILE ICI, et c'est une décision, pas un oubli. Le critère 2.5.8 de WCAG exempte explicitement un lien en ligne dans un bloc de texte — et lui en poser un remettrait dans le pied les pixels que Yan a fait retirer deux fois le 05.11.2026. */ .lexs-pied-copie a{ color:inherit; text-decoration:none; } .lexs-pied-copie a:hover, .lexs-pied-copie a:focus-visible{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; } .lexs-pied-copie a:focus-visible{ outline:2px solid var(--lexs-accent); outline-offset:3px; } /* LE LOGOTYPE — la place était réservée depuis le 04.11.2026, le dessin est arrivé le 05. Le sceau : un carré, et un losange de laiton au centre. Le carré est le cabinet, le losange est ce qu'il garde. LE SVG EST EN LIGNE DANS `parts/header.html`, ET C'EST POUR ÇA. Un fichier `` ne peut ni hériter de `currentColor`, ni changer de laiton quand le thème passe au clair — `assets/icone/logotype.svg` existe pour les usages hors page (images de partage), avec ses couleurs figées. Ici, le dessin suit l'encre du texte comme le ferait une lettre. LE TRAIT NE SUIT PAS LA TAILLE. `vector-effect:non-scaling-stroke` le maintient à 1,25 px quelle que soit la hauteur rendue : sans lui, un sceau de 36 px porte un trait de 1,8 et paraît gras à côté du nom en Spectral 300. */ .lexs-logotype{min-height:2.25rem;display:flex;align-items:center;gap:.62rem} .lexs-sceau{ width:1.62rem; height:1.62rem; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.25; vector-effect:non-scaling-stroke; } .lexs-sceau-coeur{stroke:var(--lexs-accent)} /* ============================================================ LE MOUVEMENT — ce que Harvey fait, et qu'on ne copie pas. Leur vocabulaire, relevé au navigateur : 0.15 à 0.4 s, opacité et `transform`, courbes douces. Aucun effet spectaculaire. C'est le bon registre pour un site qui vend la sobriété à des avocats, et c'est tout ce qu'on en reprend. LA CLASSE `lexs-anime` EST POSÉE PAR LE SCRIPT, jamais écrite dans le HTML : si le script ne tourne pas — Safari ancien, erreur, script bloqué — rien n'est masqué et la page reste entière. Un effet d'entrée qui cache le contenu quand il échoue est un défaut, pas un effet. ============================================================ */ .lexs-anime main [class*="sb-s-"] > *, .lexs-anime .lexs-pied-colonnes > *{ opacity:0; transform:translateY(12px); transition:opacity .5s cubic-bezier(0,.7,.3,1) var(--lexs-retard,0ms), transform .5s cubic-bezier(0,.7,.3,1) var(--lexs-retard,0ms); } .lexs-anime main [class*="sb-s-"] > .lexs-vu, .lexs-anime .lexs-pied-colonnes > .lexs-vu{ opacity:1; transform:none; } /* La photographie de nappe ne bouge pas : elle est le fond, et un fond qui entre en scène attire l'œil là où il n'y a rien à lire. */ .lexs-anime main [class*="sb-s-"] > figure{ opacity:1; transform:none; transition:none; } /* Les éléments qui se cliquent répondent — c'est la seule animation qui serve à quelque chose. */ .wp-block-button__link, .lexs-entete .wp-block-navigation a, .lexs-pied a{ transition:color .3s cubic-bezier(.3,.3,.3,1), background-color .3s cubic-bezier(.3,.3,.3,1), border-color .3s cubic-bezier(.3,.3,.3,1); } .wp-block-button__link:hover{transform:translateY(-1px)} .wp-block-button__link{transition:color .3s cubic-bezier(.3,.3,.3,1), background-color .3s cubic-bezier(.3,.3,.3,1), border-color .3s cubic-bezier(.3,.3,.3,1), transform .15s cubic-bezier(.4,0,.2,1)} /* L'ÉCHAPPATOIRE. Le script s'abstient déjà de poser la classe, mais la feuille doit tenir seule — une préférence peut changer après le chargement. Pas de `!important` : la règle `important` du standard ne tolère que `[hidden]`, et une déclaration plus tardive à spécificité égale suffit. */ @media (prefers-reduced-motion: reduce){ .lexs-anime main [class*="sb-s-"] > *, .lexs-anime .lexs-pied-colonnes > *{ opacity:1; transform:none; transition:none; } .wp-block-button__link, .lexs-entete .wp-block-navigation a, .lexs-pied a{transition:none} .wp-block-button__link:hover{transform:none} } /* ============================================================ LE KEN BURNS — demandé par Yan le 30.10.2026. Un seul passage, 24 s, et il s'arrête : une boucle attire l'œil en continu vers un fond qui n'a rien à lire, et sur un site qui vend la sobriété à des avocats c'est le contraire du but. Le mouvement part d'un cadre plus serré et s'ouvre — on entre dans l'image, on n'en est pas chassé. L'échelle reste SOUS le seuil où le recadrage déplacerait ce qui passe derrière le texte : les contrastes ont été mesurés sur le cadrage d'arrivée, et 1.08 au départ ne découvre aucune zone plus claire du côté gauche. LA COURBE EST LINÉAIRE, ET C'EST LE RÉGLAGE QUI COMPTE. Yan l'a trouvé trop rapide le 31.10.2026 ; la mesure a donné la raison, et ce n'était pas la durée. L'ancienne courbe `cubic-bezier(.2,.6,.2,1)` mettait la MOITIÉ du déplacement dans les 3,8 premières secondes sur 24 : le bord filait à 7,5 px/s au départ pour finir à 0,10 px/s — un rapport de 78 entre le début et la fin. À 1440 px et 60 cm de l'écran, 7,5 px/s font 0,17°/s, soit précisément le seuil où l'œil détecte un mouvement de grande surface. On VOYAIT donc l'image bouger, puis s'arrêter. En linéaire sur 36 s, le bord dérive à 1,6 px/s constants, soit 0,036°/s : un quart du seuil. Le mouvement ne se voit plus, il se constate — on s'aperçoit que le cadre a changé sans avoir vu changer. C'est ce que le Ken Burns doit faire, et un fond qui n'a rien à lire n'a aucune raison d'appeler l'œil. ============================================================ */ @keyframes lexs-kenburns{ from{transform:scale(1.08)} to{transform:scale(1)} } [class*="sb-s-"] > figure[class*="-image"] img{ animation:lexs-kenburns 36s linear both; transform-origin:center center; } /* L'ÉCHAPPATOIRE VIENT APRÈS LA DÉCLARATION QU'ELLE ANNULE. Placée plus haut dans la feuille, elle perdait à spécificité égale contre la règle du Ken Burns — le navigateur annonçait encore `lexs-kenburns` sous mouvement réduit. Mesuré. */ @media (prefers-reduced-motion: reduce){ [class*="sb-s-"] > figure[class*="-image"] img{ animation:none; transform:none; } } /* ============================================================ LA PROSE SE JUSTIFIE, ET ELLE SE COUPE. Justifier sans césure creuse des rivières de blanc — d'autant plus que les colonnes du schéma font 368 px, où une ligne ne tient que six ou sept mots. `hyphens` s'appuie sur le `lang` du document, que WordPress pose en `fr-FR` : la césure est donc française, pas anglaise. CE QUI NE SE JUSTIFIE PAS : les titres, les surtitres et les chapôs. Un titre justifié se disloque sur deux lignes, et un chapô court n'a pas assez de matière pour répartir le blanc. ============================================================ */ /* LA PROSE DE CARTE NE SE JUSTIFIE PAS, depuis le 02.11.2026. Mesuré au navigateur : une piste de carte fait 276 px à 1440, soit VINGT ET UN SIGNES par ligne. La justification y creuse des rivières à chaque ligne, et elle empire à mesure que les colonnes se multiplient : les séquences sont passées de trois cartes à quatre le même jour. La justification demande une mesure, et une carte n'en a pas. Elle reste à la prose qui court, bornée à 68ch plus bas dans cette liste. */ .sb-c-slim-p1, .sb-c-tra-p1,.sb-c-tra-p2,.sb-c-tra-p3,.sb-c-cab2-p1,.sb-c-cab2-p2, .sb-c-sec-texte,.sb-c-app-texte,.sb-c-soap-texte,.sb-c-sap-texte, .sb-c-corps, .sb-c-per-p1,.sb-c-per-p2, .sb-c-aap-texte, .sb-c-nor-branche, .lexs-pied-phrase{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; } [hidden]{display:none !important} /* Le rail de « pourquoi nous » : un filet par raison, et rien d'autre. Pas de point, pas de numéro — ils appartiennent à la séquence. */ @media (min-width:60rem){ } /* ============================================================ LES FIGURES — ce que le dessin dit et que la phrase répète. Yan, le 03.11.2026 : « la page d'accueil, il y a beaucoup de nonchalance de texte, il faudrait que ça respire ». LE RELEVÉ QUI A ORIENTÉ LA RÉPONSE. L'accueil pesait 477 mots, ce qui est la norme du métier pour une page d'accueil. Mais SIX de ses SEPT sections ne portaient aucun visuel : c'est la succession de blocs de prose qui étouffe, pas la quantité de mots. On ajoute donc du dessin, on ne coupe pas du texte. AUCUN TEXTE DANS UN SVG. Un libellé dessiné est un texte que le client ne pourra jamais corriger, et `bin/site relever` le signale à juste titre comme figé. Les figures ne portent donc que des traits ; les noms restent des champs, à côté. AUCUN CHIFFRE NON PLUS. Les deux graphiques de la présentation du 01.11 — les barres de temps et la carte de positionnement — ne peuvent pas venir ici : « rien, le site reste sans chiffre », arbitrage de Yan du 02.11.2026. ============================================================ */ .lexs-figure{ display:block; width:100%; height:auto; fill:none; stroke:var(--lexs-filet); stroke-width:1.25; stroke-linecap:square; stroke-linejoin:miter; color:var(--lexs-accent); } /* Le remplissage des boîtes se fait à la couleur de FOND, pas en transparence : les cadres s'emboîtent, et sans aplat le trait du cadre extérieur traverserait celui du cadre intérieur. */ /* ============================================================ LES ICÔNES DE CARTE, posées le 04.11.2026. « Ça, c'est pas du design : trop de texte, il manque des illustrations, des icônes comme il y a dans la présentation. » Dix-sept icônes, une par carte, dans la grammaire des deux figures déjà posées : des rectangles et des lignes au filet pour la structure, UN SEUL `path` à l'accent pour le geste qui compte. LA BOÎTE FAIT TOUTE LA COLONNE, le dessin fait deux rem. C'est ce qui permet au filet de tête de passer de la carte à l'icône sans devenir un trait de 32 px : le `preserveAspectRatio` en `xMinYMid` cale le dessin à gauche de sa boîte, au lieu de le centrer. LE NUMÉRO DE SÉQUENCE DISPARAÎT là où une icône ouvre la carte. Un filet, un point de laiton, un numéro ET une icône, c'est quatre signes pour dire « ceci est une carte ». */ /* LA HAUTEUR SE COMPTE EN BORDER-BOX, et c'est le piège qui a mangé les dix-sept icônes du premier essai. La feuille pose `box-sizing:border-box` sur tous les enfants de ces grilles, dans une requête de média placée PLUS BAS : elle l'emportait sur le `content-box` écrit ici. La boîte faisait donc 2 rem EN TOUT, dont 1,5 em de rembourrage et un filet, et il restait sept pixels au dessin. Mesuré au navigateur : le cercle de la loupe rendait 1 px. La hauteur inclut désormais ce qu'elle doit contenir, et ne dépend plus de qui gagne sur `box-sizing`. LE TRAIT DE STRUCTURE PASSE AU `doux`. À 32 px, le filet d'un dessin de 300 px ne se voit plus : c'est la même encre, mais trois fois moins de trait à l'écran. */ .lexs-icone{ width:100%; height:calc(2.5rem + 1.5em + 1px); padding-top:1.5em; border-top:1px solid var(--lexs-filet); margin:0 0 .9rem; stroke:var(--lexs-doux); stroke-width:1.5; } /* LÀ OÙ L'ICÔNE SUIT LE TITRE DE SECTION, son filet venait se coller sous lui : deux traits à six pixels l'un de l'autre. Les sections qui ont un chapô n'ont pas ce défaut, le chapô porte déjà sa marge. */ .sb-s-souv-engagements .lexs-icone, .sb-s-apropos-personnes .lexs-icone{margin-top:2.6rem} /* LE DÉROULEMENT N'A PAS D'ICÔNE, DONC SON FILET EST SUR LE NOM. Les autres séquences du site séparent leurs temps par le filet que porte `.lexs-icone` ; celle-ci n'a pas de dessin, et le filet ne doit pas disparaître pour autant : c'est lui qui dit où un temps finit. Au bureau les deux filets se touchent et ne font plus qu'une ligne, exactement comme pour les quatre temps de « Notre solution ». */ .sb-s-contact-deroulement [class*="sb-c-"][class*="-nom"]{ border-top:1px solid var(--lexs-filet); padding-top:1.5rem; margin-top:2.2rem; } /* ============================================================ LE TÉLÉPHONE RESPIRE MOINS QUE LE BUREAU — correctif du 05.11.2026. Yan, sur son iPhone : « trop d'interligne ». L'AIR DES CARTES EST CALCULÉ POUR DES CARTES CÔTE À CÔTE. Au bureau les trois colonnes se lisent d'un regard et l'air les sépare ; empilées sur un téléphone, les mêmes valeurs deviennent du défilement. Mesuré à 390 px : l'icône pèse 85 px de haut, avec 24 px avant le nom et 24 px avant le texte — soit 133 px d'habillage pour 22 px de titre. La section « évolution » fait 941 px de haut quand l'écran en montre 844 : trois cartes courtes ne tiennent pas sur un écran. ON NE TOUCHE NI À LA TAILLE DU TEXTE, NI AU FILET. Le filet du haut de l'icône est ce qui sépare une carte de la suivante — il reste. Ce qui diminue, c'est l'air, et lui seul. ============================================================ */ @media (max-width:900px){ .sb-s-accueil-evolution .lexs-icone, .sb-s-solution-marche .lexs-icone, .sb-s-solution-normes .lexs-icone, .sb-s-souv-engagements .lexs-icone, .sb-s-apropos-personnes .lexs-icone{ height:calc(1.6rem + .85em + 1px); padding-top:.85em; margin-bottom:.3rem; } /* LÀ OÙ L'ICÔNE SUIT DIRECTEMENT LE TITRE DE SECTION, elle gardait 2.6 rem pour écarter deux filets. Le besoin existe toujours, la dose non. */ .sb-s-souv-engagements .lexs-icone, .sb-s-apropos-personnes .lexs-icone{margin-top:1.5rem} .sb-s-contact-deroulement [class*="sb-c-"][class*="-nom"]{ padding-top:.9rem; margin-top:1.4rem; } .sb-s-accueil-evolution [class*="sb-c-"][class*="-nom"], .sb-s-solution-marche [class*="sb-c-"][class*="-nom"], .sb-s-solution-normes [class*="sb-c-"][class*="-nom"], .sb-s-souv-engagements [class*="sb-c-"][class*="-nom"], .sb-s-apropos-personnes [class*="sb-c-"][class*="-nom"]{ margin-top:.55rem; margin-bottom:.1rem; } .sb-s-accueil-evolution [class*="sb-c-"][class*="-texte"], .sb-s-solution-marche [class*="sb-c-"][class*="-texte"], .sb-s-solution-normes [class*="sb-c-"][class*="-texte"], .sb-s-souv-engagements [class*="sb-c-"][class*="-texte"], .sb-s-apropos-personnes [class*="sb-c-"][class*="-texte"]{ margin-top:.3rem; } } .sb-s-accueil-evolution [class*="sb-c-"][class*="-nom"], .sb-s-solution-marche [class*="sb-c-"][class*="-nom"], .sb-s-solution-normes [class*="sb-c-"][class*="-nom"], .sb-s-souv-engagements [class*="sb-c-"][class*="-nom"], .sb-s-apropos-personnes [class*="sb-c-"][class*="-nom"]{ border-top:0; padding-top:0; } .sb-s-solution-marche [class*="sb-c-"][class*="-nom"]::before, .sb-s-souv-engagements [class*="sb-c-"][class*="-nom"]::before, .sb-s-solution-marche [class*="sb-c-"][class*="-nom"]::after, .sb-s-souv-engagements [class*="sb-c-"][class*="-nom"]::after{ content:none; } .lexs-figure .lexs-figure-fond{fill:var(--lexs-surface)} .lexs-figure .lexs-figure-mur{stroke:currentColor; stroke-width:2} .lexs-figure path{stroke:currentColor; stroke-width:1.5} /* LA FIGURE DU CABINET, sur l'accueil. Un mur fermé, la pièce et l'analyse à l'intérieur, et rien dehors. Elle tient la colonne de droite de sa section depuis le 04.11.2026 : c'est elle qui occupe la place, et non plus le vide. */ .sb-s-accueil-secret .lexs-figure-cabinet{ max-width:30rem; margin:2.6rem 0 2.2rem; } /* SOUS 60 REM les grilles se referment : la figure du cabinet repasse sous le texte et prend la largeur disponible. */ @media (max-width:59.999rem){ .sb-s-accueil-secret .lexs-figure-cabinet{max-width:100%} } /* L'AIR ENTRE LES SECTIONS DE PROSE. Le reproche de nonchalance portait sur l'accueil, où quatre sections de texte se suivent. Un filet les sépare désormais, comme il sépare déjà les limites de la souveraineté : c'est la grammaire de la maison, pas une nouveauté pour cette page. */ /* LA GRAMMAIRE DE CARTE NE VAUT PAS POUR UNE LISTE EMBOÎTÉE. Chaque nom de carte porte un filet au-dessus et un rembourrage. Empilés dans une seule cellule de grille, ces filets se sont mis à BARRER le texte du nom précédent : « Fédéral » rendait rayé. Vu à la capture, pas au raisonnement. ET CETTE ANNULATION EST ICI, EN FIN DE FEUILLE, PAS AU MILIEU. Posée dans le bloc de la grille, elle perdait à SPÉCIFICITÉ ÉGALE contre `[class*="sb-s-"] [class*="sb-c-"][class*="-nom"]`, qui vient après elle dans la feuille — le filet barrait encore après la correction. C'est le même piège que l'échappatoire du Ken Burns, que cette feuille documente trente lignes plus haut : une annulation se place APRÈS ce qu'elle annule. */ @media (min-width:60rem){ .sb-s-solution-normes [class*="sb-c-"][class*="-nom"]{ border-top:0; padding-top:0; } }