/* ============================================================
   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 */
  --lexs-t-chapo: 1.5rem;                         /* LE BARREAU MANQUANT */
  --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` est la seule exception : c'est une nappe
   de mise en page qui ne porte plus de photographie. */
.wp-block-group[class*="sb-s-"][class*="-nappe"],
.wp-block-group.sb-s-accueil-secret{
  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),
.sb-s-accueil-secret > :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,
.sb-s-accueil-secret::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),
.wp-block-group.sb-s-accueil-secret > :not(figure){
  position:relative;
}

/* Au téléphone le texte passe en bas : le dégradé bascule. */
@media (max-width:760px){
  .wp-block-group[class*="sb-s-"][class*="-nappe"],
  .wp-block-group.sb-s-accueil-secret{
    grid-template-columns:100%;
    align-content:end;
    min-height:min(88vh,40rem);
  }
  [class*="sb-s-"][class*="-nappe"]::before,
  .sb-s-accueil-secret::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-sec-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-pro-chapo,.sb-c-mar-chapo,.sb-c-ang-chapo,
.sb-c-evo-chapo,.sb-c-nor-chapo,.sb-c-niv-chapo,
.sb-c-per-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}
.sb-c-cab-marche{color:var(--lexs-doux)}

/* 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-souv-obligation,
.wp-block-group.sb-s-souv-limites,
.wp-block-group.sb-s-solution-tracabilite,
.wp-block-group.sb-s-solution-limites,
.wp-block-group.sb-s-solution-cabinet,
.wp-block-group.sb-s-legal,
.wp-block-group.sb-s-apropos-origine,
.wp-block-group.sb-s-apropos-position,
.wp-block-group.sb-s-apropos-apres{
  display:grid;
  grid-template-columns:min(68ch,100%) 1fr;
}
.sb-s-souv-obligation > *,
.sb-s-souv-limites > *,
.sb-s-solution-tracabilite > *,
.sb-s-solution-limites > *,
.sb-s-solution-cabinet > *,
.sb-s-legal > *,
.sb-s-apropos-origine > *,
.sb-s-apropos-position > *,
.sb-s-apropos-apres > *{grid-column:1}

/* ============================================================
   LES SECTIONS DE TEXTE
   ============================================================ */
.wp-block-group.sb-s-accueil-promesse,
.wp-block-group.sb-s-accueil-pourquoi,
.wp-block-group.sb-s-solution-angles,
.wp-block-group.sb-s-accueil-cabinets,
.wp-block-group.sb-s-accueil-appel,
.wp-block-group.sb-s-souv-obligation,
.wp-block-group.sb-s-souv-engagements,
.wp-block-group.sb-s-souv-limites,
.wp-block-group.sb-s-souv-appel,
.wp-block-group.sb-s-solution-marche,
.wp-block-group.sb-s-solution-tracabilite,
.wp-block-group.sb-s-solution-limites,
.wp-block-group.sb-s-solution-cabinet,
.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-origine,
.wp-block-group.sb-s-apropos-position,
.wp-block-group.sb-s-apropos-apres,
.wp-block-group.sb-s-apropos-appel,
.wp-block-group.sb-s-accueil-evolution,
.wp-block-group.sb-s-solution-normes,
.wp-block-group.sb-s-contact-niveaux{
  padding:var(--lexs-section) var(--lexs-marge);
  max-width:78rem;
  margin-inline:auto;
}
.wp-block-group.sb-s-souv-limites,
.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-accueil-promesse > h2::before,
.sb-s-accueil-cabinets > h2::before,
.sb-s-accueil-pourquoi > h2::before,
.sb-s-solution-angles > h2::before,
.sb-s-accueil-appel > h2::before,
.sb-s-solution-marche > h2::before,
.sb-s-solution-tracabilite > h2::before,
.sb-s-solution-limites > h2::before,
.sb-s-solution-cabinet > h2::before,
.sb-s-solution-appel > h2::before,
.sb-s-souv-obligation > h2::before,
.sb-s-souv-engagements > h2::before,
.sb-s-souv-limites > h2::before,
.sb-s-souv-appel > h2::before,
.sb-s-contact-formulaire > h2::before,
.sb-s-apropos-personnes > h2::before,
.sb-s-apropos-origine > h2::before,
.sb-s-apropos-position > h2::before,
.sb-s-apropos-apres > h2::before,
.sb-s-apropos-appel > h2::before,
.sb-s-accueil-evolution > h2::before,
.sb-s-solution-normes > h2::before,
.sb-s-contact-niveaux > 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-accueil-promesse,
.sb-s-accueil-pourquoi,
.sb-s-solution-angles,
.sb-s-solution-marche,
.sb-s-souv-engagements{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-accueil-promesse [class*="sb-c-"][class*="-nom"],
.sb-s-solution-marche [class*="sb-c-"][class*="-nom"],
.sb-s-solution-angles [class*="sb-c-"][class*="-nom"],
.sb-s-souv-engagements [class*="sb-c-"][class*="-nom"]{
  counter-increment:lexs-temps;
}
.sb-s-accueil-promesse [class*="sb-c-"][class*="-nom"]::before,
.sb-s-solution-marche [class*="sb-c-"][class*="-nom"]::before,
.sb-s-solution-angles [class*="sb-c-"][class*="-nom"]::before,
.sb-s-souv-engagements [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-promesse,
  .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-promesse > :not(h2):not(.sb-c-pro-chapo),
  .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);
  }
  .sb-s-accueil-promesse > .wp-block-heading:not([class*="-nom"]){
    grid-column:1/-1; grid-row:1;
  }
  .sb-s-accueil-promesse > .sb-c-pro-chapo{grid-column:1/-1; grid-row:2}
  .sb-c-pro-1-nom{grid-column:1; grid-row:3}
  .sb-c-pro-1-texte{grid-column:1; grid-row:4}
  .sb-c-pro-2-nom{grid-column:2; grid-row:3}
  .sb-c-pro-2-texte{grid-column:2; grid-row:4}
  .sb-c-pro-3-nom{grid-column:3; grid-row:3}
  .sb-c-pro-3-texte{grid-column:3; grid-row:4}

  .sb-s-souv-engagements > .wp-block-heading:not([class*="-nom"]){
    grid-column:1/-1; grid-row:1;
  }
  .sb-c-eng-4-nom{grid-column:4; grid-row:2}
  .sb-c-eng-4-texte{grid-column:4; grid-row:3}
  .sb-c-eng-1-nom{grid-column:1; grid-row:2}
  .sb-c-eng-1-texte{grid-column:1; grid-row:3}
  .sb-c-eng-2-nom{grid-column:2; grid-row:2}
  .sb-c-eng-2-texte{grid-column:2; grid-row:3}
  .sb-c-eng-3-nom{grid-column:3; grid-row:2}
  .sb-c-eng-3-texte{grid-column:3; grid-row:3}

  .sb-s-solution-marche > .wp-block-heading:not([class*="-nom"]){
    grid-column:1/-1; grid-row:1;
  }
  .sb-c-mar-4-nom{grid-column:4; grid-row:3}
  .sb-c-mar-4-texte{grid-column:4; grid-row:4}
  .sb-s-solution-marche > .sb-c-mar-chapo{grid-column:1/-1; grid-row:2}
  .sb-c-mar-1-nom{grid-column:1; grid-row:3}
  .sb-c-mar-1-texte{grid-column:1; grid-row:4}
  .sb-c-mar-2-nom{grid-column:2; grid-row:3}
  .sb-c-mar-2-texte{grid-column:2; grid-row:4}
  .sb-c-mar-3-nom{grid-column:3; grid-row:3}
  .sb-c-mar-3-texte{grid-column:3; grid-row:4}

  /* 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. */
  .wp-block-group.sb-s-solution-angles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0 clamp(2rem,4vw,4rem);
    align-items:start;
  }
  .sb-s-solution-angles > .wp-block-heading:not([class*="-nom"]){
    grid-column:1/-1; grid-row:1;
  }
  .sb-s-solution-angles > .sb-c-ang-chapo{grid-column:1/-1; grid-row:2}
  .sb-c-ang-1-nom{grid-column:1; grid-row:3}
  .sb-c-ang-1-texte{grid-column:1; grid-row:4}
  .sb-c-ang-2-nom{grid-column:2; grid-row:3}
  .sb-c-ang-2-texte{grid-column:2; grid-row:4}
  .sb-c-ang-3-nom{grid-column:3; grid-row:3}
  .sb-c-ang-3-texte{grid-column:3; grid-row:4}

  /* 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. */
  .wp-block-group.sb-s-accueil-pourquoi{
    display:grid;
    grid-template-columns:14rem 1fr;
    column-gap:clamp(2rem,4vw,4rem);
    row-gap:0;
    align-items:baseline;
  }
  .sb-s-accueil-pourquoi > .wp-block-heading:not([class*="-nom"]){
    grid-column:1/-1;
  }
  .sb-c-pq-1-nom{grid-column:1; grid-row:2}
  .sb-c-pq-1-texte{grid-column:2; grid-row:2}
  .sb-c-pq-2-nom{grid-column:1; grid-row:3}
  .sb-c-pq-2-texte{grid-column:2; grid-row:3}
  .sb-c-pq-3-nom{grid-column:1; grid-row:4}
  .sb-c-pq-3-texte{grid-column:2; grid-row:4}

  /* ──────────────────────────────────────────────────────────────
     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}
  .sb-c-evo-1-nom{grid-column:1; grid-row:3}
  .sb-c-evo-1-texte{grid-column:1; grid-row:4}
  .sb-c-evo-2-nom{grid-column:2; grid-row:3}
  .sb-c-evo-2-texte{grid-column:2; grid-row:4}
  .sb-c-evo-3-nom{grid-column:3; grid-row:3}
  .sb-c-evo-3-texte{grid-column:3; grid-row:4}

  /* 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. */
  .sb-s-solution-normes > .lexs-figure-echelons{
    grid-column:1/3; grid-row:3;
    align-self:center;
  }
  .sb-c-nor-1-nom{grid-column:3/-1; grid-row:3; align-self:start}
  .sb-c-nor-2-nom{grid-column:3/-1; grid-row:3; align-self:start; margin-top:3.2em}
  .sb-c-nor-3-nom{grid-column:3/-1; grid-row:3; align-self:start; margin-top:6.4em}
  .sb-c-nor-4-nom{grid-column:3/-1; grid-row:3; align-self:start; margin-top:9.6em}
  /* L'EMBOÎTEMENT SE LIT DANS LE RETRAIT. Chaque échelon rentre d'un
     cran sous le précédent, comme les quatre cadres du dessin à
     gauche. Le retrait est la seule chose qui dise l'inclusion sans
     l'écrire. */
  .sb-c-nor-2-nom{padding-left:1.4rem}
  .sb-c-nor-3-nom{padding-left:2.8rem}
  .sb-c-nor-4-nom{padding-left:4.2rem}
  .sb-s-solution-normes > .sb-c-nor-branche{
    grid-column:1/-1; grid-row:4;
    max-width:68ch;
    margin-top:2.5rem;
    padding-top:1.5rem;
    border-top:1px solid var(--lexs-filet);
  }

  /* Les deux niveaux de démonstration : un choix, donc deux colonnes. */
  .wp-block-group.sb-s-contact-niveaux{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 clamp(2rem,4vw,4rem);
    align-items:start;
  }
  .sb-s-contact-niveaux > .wp-block-heading:not([class*="-nom"]){
    grid-column:1/-1; grid-row:1;
  }
  .sb-s-contact-niveaux > .sb-c-niv-chapo{grid-column:1/-1; grid-row:2}
  .sb-c-niv-1-nom{grid-column:1; grid-row:3}
  .sb-c-niv-1-texte{grid-column:1; grid-row:4}
  .sb-c-niv-2-nom{grid-column:2; grid-row:3}
  .sb-c-niv-2-texte{grid-column:2; grid-row:4}
  .sb-s-contact-niveaux > .sb-c-niv-demande{
    grid-column:1/-1; grid-row:5;
    max-width:68ch;
    margin-top:2.5rem;
    color:var(--lexs-doux);
  }

  /* Les personnes : deux colonnes, le portrait au-dessus du nom. */
  .wp-block-group.sb-s-apropos-personnes{
    display:grid;
    grid-template-columns:repeat(2,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;
  }
  .sb-s-apropos-personnes > .sb-c-per-chapo{grid-column:1/-1; grid-row:2}
  .sb-c-per-1-portrait{grid-column:1; grid-row:3}
  .sb-c-per-1-nom{grid-column:1; grid-row:4}
  .sb-c-per-1-role{grid-column:1; grid-row:5}
  .sb-c-per-1-texte{grid-column:1; grid-row:6}
  .sb-c-per-2-portrait{grid-column:2; grid-row:3}
  .sb-c-per-2-nom{grid-column:2; grid-row:4}
  .sb-c-per-2-role{grid-column:2; grid-row:5}
  .sb-c-per-2-texte{grid-column:2; grid-row:6}
  .sb-s-apropos-personnes > .sb-c-per-maison{
    grid-column:1/-1; grid-row:7;
    max-width:68ch;
    margin-top:2.5rem;
    padding-top:1.5rem;
    border-top:1px solid var(--lexs-filet);
    color:var(--lexs-doux);
  }
}

/* ============================================================
   LES PORTRAITS, ET POURQUOI ILS NE SONT PAS RONDS.

   Le rond est la forme du profil de réseau social. Ici le registre
   est celui du dossier : un portrait se cadre au carré, comme une
   pièce versée. Le filet reprend celui des cartes, et le bloc garde
   sa place dans le flux même si le fichier manque.
   ============================================================ */
.wp-block-group .sb-c-per-1-portrait,
.wp-block-group .sb-c-per-2-portrait{
  margin:0 0 1.5rem;
  max-width:17rem;
}
.sb-c-per-1-portrait img,
.sb-c-per-2-portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid var(--lexs-filet);
}
/* Le rôle sous le nom. La casse et l'interlettrage portent la
   hiérarchie, jamais l'opacité : elle ferait tomber le contraste
   sans que rien ne se voie. */
.sb-c-per-1-role,
.sb-c-per-2-role{
  font-size:.8125rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lexs-accent);
  margin:0 0 1.2em;
}
/* 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-accueil-promesse [class*="sb-c-"][class*="-nom"]::after,
.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{
  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.
   ============================================================ */
.wp-block-group.sb-s-contact-formulaire{max-width:44rem}
.sb-c-frm-reassurance{
  font-size:.9375rem;
  color:var(--lexs-doux);
  padding-top:1.2em;
  border-top:1px solid var(--lexs-filet);
}
.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;
}
.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 `<li>` 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. */
.lexs-entete .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
  display:flex;
  align-items:center;
  min-height:44px;
}
/* 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 rythme visuel ne bouge donc pas, et
   c'est la zone cliquable qui grandit, ce qui est exactement la demande.
   Posé à toutes les largeurs : un lien de pied confortable au doigt ne
   gêne personne à la souris, et une règle sous `pointer:coarse` ne se
   mesurerait sur aucun banc. */
.lexs-pied-menu a{
  display:flex;
  align-items:center;
  min-height:2.75rem;
  min-width:2.75rem;
  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}
.lexs-pied-tel{margin:0}
.lexs-pied-tel a{color:var(--lexs-texte);text-decoration:none}

/* 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}

/* L'emplacement du logotype. Le nom est « Lex Sovereign » depuis
   l'arbitrage de Yan du 04.11.2026, mais le dessin, lui, n'existe
   pas encore, et le monogramme J-H est caduc depuis que les deux
   patronymes ont quitté le site. La place reste réservée, le
   fichier n'existe pas. */
.lexs-logotype{min-height:2.25rem;display:flex;align-items:center}

/* ============================================================
   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-obl-p1,.sb-c-obl-p2,.sb-c-obl-p3,
.sb-c-lim-p1,.sb-c-lim-p2,.sb-c-lim-p3,
.sb-c-slim-p1,.sb-c-slim-p2,.sb-c-slim-p3,
.sb-c-tra-p1,.sb-c-tra-p2,.sb-c-tra-p3,
.sb-c-cab-texte,.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-ori-p1,
.sb-c-pos-p1,.sb-c-pos-p2,.sb-c-pos-p3,
.sb-c-apres-p1,.sb-c-apres-p2,
.sb-c-aap-texte,
.sb-c-nor-branche,
.sb-c-niv-demande,
.sb-c-per-maison,
.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. */
.sb-c-pq-1-nom,.sb-c-pq-2-nom,.sb-c-pq-3-nom{
  padding-top:1.6em;
  border-top:1px solid var(--lexs-filet);
  margin-bottom:.5em;
  color:var(--lexs-texte);
}
.sb-c-pq-1-texte,.sb-c-pq-2-texte,.sb-c-pq-3-texte{
  padding-top:1.6em;
  padding-bottom:1.6em;
  margin:0;
}
@media (min-width:60rem){
  .sb-c-pq-1-texte,.sb-c-pq-2-texte,.sb-c-pq-3-texte{
    border-top:1px solid var(--lexs-filet);
  }
}


/* ============================================================
   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. */
.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. Le vide à droite du
   cadre EST l'argument — ne pas le combler. */
.sb-s-accueil-secret .lexs-figure-cabinet{
  max-width:30rem;
  margin:2.6rem 0 2.2rem;
}
/* LA FIGURE DES ÉCHELONS, sur la solution. Quatre cadres emboîtés,
   un par échelon de droit, dans l'ordre où ils s'appliquent. */
.lexs-figure-echelons{max-width:22rem}

/* SOUS 60 REM les grilles se referment et la figure des échelons
   passe au-dessus des quatre noms, qui reprennent le fil normal :
   le retrait progressif ne tient pas dans une colonne unique. */
@media (max-width:59.999rem){
  .lexs-figure-echelons{max-width:18rem; margin:0 0 2rem}
  .sb-c-nor-2-nom,
  .sb-c-nor-3-nom,
  .sb-c-nor-4-nom{padding-left:0; margin-top:0}
  .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. */
.wp-block-group.sb-s-accueil-pourquoi,
.wp-block-group.sb-s-accueil-cabinets{
  border-top:1px solid var(--lexs-filet);
}

/* 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;
  }
}