/* Brand Studio — la feuille du site.
 *
 * ELLE EST ÉCRITE CONTRE LES CLASSES QUE LE COMPILATEUR POSE : `sb-s-<section>`
 * sur la section, `sb-c-<champ>` sur chaque champ, `sb-l-<liste>` sur une liste.
 * Le prototype porte les mêmes classes, écrites à la main. C'est ce qui permet
 * au dessin de ne PAS se refaire côté WordPress : la même feuille tient les deux
 * côtés. Sur dianaxp8, où le prototype visait ses propres classes, le thème a
 * dû redessiner 669 lignes contre 287 dans le prototype.
 *
 * COROLLAIRE : aucune imbrication porteuse. La compilation aplatit les champs en
 * blocs frères ; chaque section est donc une grille, et chaque champ s'y place
 * par sa classe. Ce qui ressemble à une carte est trois champs qui partagent le
 * même fond.
 *
 * UNE RÈGLE D'ÉCRITURE, APPRISE QUATRE FOIS. Toute règle qui vise UN champ doit
 * porter la SECTION et la BALISE — `.sb-s-x h3.sb-c-y` — et non la classe seule.
 * Les règles de plaque, de logo et de carte visent `section balise[class*=…]`,
 * qui bat une classe isolée : une règle par champ écrite `.sb-c-y{}` est donc
 * inerte, et rien ne le signale. Ça a coûté, dans l'ordre : les marges entre
 * cartes, les numéros des cinq temps, le chevron du dernier temps, et la taille
 * des logos de collaboration.
 *
 * Les valeurs viennent de la marque mère (`tools/converter-yan/brands/yhb/
 * tokens.css` et la charte YHB du 17.07.2026), avec leurs contrastes mesurés.
 * Rien n'est choisi ici.
 */

/* ── POLICES ─────────────────────────────────────────────────────────────────
   Auto-hébergées, licences OFL à côté des fichiers. Manrope est variable : un
   seul fichier par sous-ensemble couvre les graisses 200 à 500. */
@font-face{font-family:'Forum';src:url('../assets/fonts/forum-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Forum';src:url('../assets/fonts/forum-400-latin-ext.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('../assets/fonts/manrope-var-latin.woff2') format('woff2');
  font-weight:200 500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('../assets/fonts/manrope-var-latin-ext.woff2') format('woff2');
  font-weight:200 500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── TOKENS ────────────────────────────────────────────────────────────────── */
:root{
  /* Encre et papier : la dualité de la maison, mais dans une autre lumière.
     La maison mère est violette et magenta ; le studio est BLEU FROID, et sa
     seule chaleur est une braise rouge-orange. Aucun blanc pur, aucun noir pur.
     Tous les rapports ci-dessous sont mesurés, pas estimés. */
  --encre:#0B1220; --encre-profonde:#05080F; --encre-plaque:#131C2E;
  --ivoire:#F2F6FB;        /* 17,25:1 sur --encre */
  --ivoire-doux:#A9B8CC;   /*  9,29:1 */
  --ivoire-sourd:#7E8FA6;  /*  5,68:1 */
  --papier:#EDF1F6; --papier-doux:#E2E8F0; --papier-surface:#F7F9FC;
  --texte:#070C15;         /* 17,26:1 sur --papier */
  --texte-doux:#4A5566;    /*  6,65:1 */
  --texte-sourd:#6E7A8C;   /*  3,84:1 — décor, jamais du texte utile */

  /* La braise est le SIGNE : 5,74:1 sur l'encre, et l'encre profonde posée
     dessus donne 6,14:1 — c'est ce qui autorise un bouton plein, à fort
     contraste, au lieu d'un dégradé pâle. Le rouge a été rabattu d'un cran le
     16.09.2026 : à pleine saturation il tirait l'œil hors du texte. */
  --braise:#F0603A;
  /* LE HAUT DE LA BRAISE. Le bouton n'est plus un dégradé écrit en dur : il va
     de la braise à CETTE couleur-ci, et c'est elle qui donne le caractère —
     de l'or pour un ciel chaud, un rose pour un plasma, un vert d'eau pour une
     aurore. Le panneau de réglage la donne à régler, et le bouton suit. */
  --braise-haute:#FFC15E;
  /* L'ACCENT DE DÉCOR. Il part de la braise et dérive lentement — voir
     `js/site.js`. Il ne porte JAMAIS de texte : c'est ce qui l'autorise à
     bouger sans qu'on ait à remesurer un contraste. */
  --accent-decor:#F0603A;
  --accent-encre:var(--braise-haute);
  --accent-papier:color-mix(in srgb,var(--braise) 62%,#000);
  --bleu:#1B4FD8;           /* ivoire dessus : 6,13:1 */
  --bleu-froid:#5B8CFF;     /* 5,92:1 sur --encre */
  --bleu-profond:#102B63;
  --amorce:#1B4FD8;
  --fond-bouton:linear-gradient(118deg,var(--braise) 0%,
                                color-mix(in srgb,var(--braise) 45%,var(--braise-haute)) 58%,
                                var(--braise-haute) 100%);
  --encre-bouton:#05080F;
  --lueur:0 14px 40px -18px var(--braise);

  /* LE CIEL. Ces trois couleurs ne servent pas au CSS : elles sont lues par
     `js/site.js` et poussées dans le nuanceur. Changer la palette change donc
     aussi le fond animé, au lieu de le laisser à son ancienne teinte. */
  --ciel-fond:#070A14; --ciel-nebuleuse:#12306B; --ciel-eclat:#F0603A;

  --filet-encre:rgba(242,246,251,.13); --filet-encre-fort:rgba(242,246,251,.26);
  --filet-papier:rgba(7,12,21,.12); --filet-papier-fort:rgba(7,12,21,.22);

  --forum:'Forum',Georgia,'Times New Roman',serif;
  --manrope:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px; --r:14px;
  --pile:32px;   /* l'espace entre deux cartes empilées, partout le même (26 → 32 le 18.09.2026, audit) */
  /* LE RYTHME VERTICAL DES TÊTES DE SECTION, MESURÉ PUIS UNIFIÉ.
     Relevé le 16.09.2026 sur les cinq pages : l'écart sous un titre allait de
     0 à 52 px selon la section, et l'écart entre le surtitre et le titre de 14
     à 48. Deux mesures, deux tokens, et plus aucune valeur écrite à la main :
     le surtitre est une étiquette COLLÉE à son titre, le titre respire avant
     ce qu'il annonce. */
  --saut-sur:20px;
  --saut-titre:clamp(40px,3.6vw,48px);
  --gouttiere:max(20px,calc((100% - var(--maxw))/2));
  /* LE HÉROS : UNE HAUTEUR, ET UN APPUI EN HAUT. Yan, le 17.09.2026 : « ne pas
     centrer verticalement ; toujours un padding identique en haut, moins de
     marge, et 70 % de la hauteur de fenêtre ».

     `svh` ET NON `vh` : sur un téléphone, `vh` compte la barre du navigateur
     comme si elle n'existait pas, et le héros dépasse d'autant. `svh` prend la
     fenêtre la PLUS PETITE, celle qu'on a barre visible — donc 70 % veut dire
     70 % de ce qu'on voit vraiment.

     Le bas est plus généreux que le haut, et ce n'est pas un déséquilibre : la
     section suivante remonte de vingt-deux pixels et passe par-dessus le coin
     du héros. Sans cette réserve, elle mord le texte — c'est ce que Yan a vu en
     faisant défiler. */
  --heros-hauteur:70svh;
  --heros-haut:clamp(64px,8vw,104px);
  --heros-bas:clamp(112px,13vw,172px);
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--encre);color:var(--ivoire);
     font-family:var(--manrope);font-weight:300;font-size:1.02rem;line-height:1.6;
     -webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-encre);outline-offset:3px;border-radius:4px}

/* Chaque section est une grille et pose sa propre gouttière.
   `max-width:none` neutralise la mise en page contrainte que WordPress applique
   aux enfants d'un groupe : sans ça, la grille se replierait sur 650 px. */
/* `margin-block: 0` N'EST PAS UNE COQUETTERIE. WordPress pose
   `margin-block: 24px 0` sur les enfants d'un groupe : les sections se
   retrouvaient séparées de 24 px, et comme l'ouverture est `sticky` au fond de
   la pile, LE CIEL SE VOYAIT PAR CES FENTES — une bande sombre entre deux
   sections claires, sur toutes les pages. Mesuré le 16.09.2026 : six espaces
   de 24 px sur l'accueil. Le défaut n'existait que côté WordPress, le prototype
   n'ayant pas cette marge : c'est exactement l'écart que cette feuille unique
   doit rattraper. Les sections se touchent, et seule celle qui chevauche
   l'ouverture garde sa marge négative. */
[class*="sb-s-"]{display:grid;padding-inline:var(--gouttiere);
                 padding-block:clamp(80px,9vw,120px);position:relative;
                 justify-content:start;margin-block:0}
/* Trois neutralisations, et chacune répond à un geste de WordPress :
   `max-width` et `margin-inline` défont la mise en page « contrainte », qui
   replierait la grille sur la taille de contenu du thème ; `justify-self` rend
   à chaque champ la largeur de sa colonne, faute de quoi un titre se réduit à
   la largeur de son mot (mesuré à 94 px côté WordPress contre 381 px dans le
   prototype, le 16.09.2026). */
/* LA BANDE NOIRE SOUS L'EN-TÊTE. WordPress pose `margin-block: 24px 0` sur les
   enfants d'un groupe, `main` compris : le fond du corps se voyait dans la fente,
   entre l'en-tête collant et la première section. Mesuré le 16.09.2026 :
   en-tête jusqu'à 73 px, `main` à partir de 97. Même cause que les fentes entre
   sections, un étage plus haut. */
main{margin-block:0}
/* LA MÊME FENTE, UN ÉTAGE PLUS BAS : ENTRE LA PAGE ET LE PIED.
   `wp-site-blocks` est un groupe en flux, et WordPress pose `margin-block: 24px 0`
   sur chacun de ses enfants — l'élément `<footer class="wp-block-template-part">`
   compris. Vingt-quatre pixels de fond de corps se voyaient donc sous la
   dernière section, sur les huit pages. Mesuré le 16.09.2026 : bas de section
   à 2597, haut du pied à 2621. Même cause que les fentes entre sections et que
   la bande sous l'en-tête, même correction. */
.wp-site-blocks>*{margin-block:0}
[class*="sb-s-"]>*{max-width:none;margin-block:0;margin-inline:0 auto;justify-self:start;width:100%}
[class*="-cta"],[class*="-cta"] a,[class*="-lien"],[class*="-lien"] a{width:auto}

/* LA MESURE DE LECTURE SE DONNE PAR UN REMPLISSAGE, PAS PAR `max-width`.
   WordPress borne les enfants d'un groupe contraint avec des marges
   automatiques marquées prioritaires. Un champ à `max-width` se retrouve donc
   centré dans sa piste côté WordPress et collé à gauche dans le prototype
   (mesuré le 16.09.2026 : x=186 px contre x=130). Répondre par une autre marque
   de priorité est interdit par le standard, à raison.
   Le champ prend donc TOUTE sa piste, et c'est un remplissage à droite qui lui
   rend sa mesure : il n'y a plus de place libre à distribuer, donc plus rien à
   centrer. La séance dianaxp8 du 09.09.2026 avait déjà trouvé ce geste. */
.mesure,[class*="-chapo"],[class*="-texte"],[class*="-chute"]{
  padding-inline-end:max(0px,calc(100% - var(--mesure,62ch)))}

/* Rôles typographiques, communs à toutes les sections. */
[class*="-surtitre"]{font-family:var(--mono);font-weight:500;font-size:.72rem;
                     letter-spacing:.18em;text-transform:uppercase;color:var(--ivoire-doux)}
h2[class*="sb-c-"]{font-family:var(--forum);font-weight:400;line-height:1.04;
                   letter-spacing:-.01em;font-size:clamp(2.2rem,4.6vw,3.6rem);text-wrap:balance}
[class*="-chapo"],[class*="-texte"]{color:var(--ivoire-doux);text-wrap:pretty}

/* LE BOUTON, ET L'EMBALLAGE QUE WORDPRESS AJOUTE AUTOUR.
   Le prototype porte une ancre : `a.sb-c-heros-cta`. La compilation en fait un
   `wp:buttons`, donc un conteneur `div.sb-c-heros-cta` autour d'une ancre. Une
   règle qui vise les deux d'un coup habille AUSSI le conteneur, et le bouton
   part sur toute la largeur — vu à l'écran le 16.09.2026.
   D'où deux règles : l'ancre reçoit la pastille, le conteneur ne reçoit rien. */
a[class*="-cta"],[class*="-cta"] a,a[class*="-lien"],[class*="-lien"] a{
  display:inline-flex;align-items:center;gap:10px;justify-self:start;width:auto;
  padding:14px 26px;border-radius:999px;text-decoration:none;
  font-family:var(--manrope);font-weight:500;font-size:1rem;
  background:var(--fond-bouton);color:var(--ivoire);box-shadow:var(--lueur)}
/* Le conteneur prend TOUTE la largeur, et c'est le flex qui aligne la pastille.
   Un conteneur à sa taille se retrouvait centré (mesuré x=546 px dans une page
   de 1280), parce qu'il restait de la place libre autour de lui et que
   WordPress la distribue. Sans place libre, il n'y a plus rien à distribuer :
   c'est le même geste que pour la mesure de lecture. */
div[class*="-cta"],div[class*="-lien"]{
  display:flex;justify-content:flex-start;justify-self:start;width:100%;padding:0;
  background:none;box-shadow:none;border:0}
a[class*="-cta"]:hover,[class*="-cta"] a:hover,a[class*="-lien"]:hover,[class*="-lien"] a:hover{transform:translateY(-2px)}
a[class*="-lien"],[class*="-lien"] a{background:transparent;border:1px solid var(--filet-encre-fort);
  box-shadow:none;font-weight:400}
[class*="-reassurance"]{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
                        text-transform:uppercase;color:var(--ivoire-sourd)}

/* ── LE FONDU, l'effet signature ──────────────────────────────────────────────
   Au repos tout est NET : l'animation part d'un flou et y revient jamais. Une
   page sans JavaScript, ou qui refuse l'animation, reste lisible. */
@keyframes mise-au-point{
  from{filter:blur(10px);opacity:.55;transform:translateY(10px)}
  to{filter:blur(0);opacity:1;transform:none}}
/* L'OUVERTURE DE PAGE. La mise au point de l'objectif, appliquée au texte :
   il arrive flou et se pose, champ après champ. Elle est LENTE — 1,5 s, et
   140 ms entre deux champs — parce qu'elle raconte le concept du studio ; une
   entrée rapide n'est plus qu'un clignotement. Elle n'est posée que par
   `js/site.js` : sans JavaScript, la page est nette d'emblée. */
@keyframes ouverture{
  from{filter:blur(16px);opacity:0;transform:translateY(20px)}
  60%{filter:blur(2px);opacity:1}
  to{filter:blur(0);opacity:1;transform:none}}
.sb-ouvre>*:not(.ciel){animation:ouverture 1.5s var(--ease) both;
  animation-delay:calc(var(--i,0) * 140ms)}
/* ── L'ARRIVÉE SUR LA PAGE ───────────────────────────────────────────────────
   LA PAGE ENTIÈRE SE LÈVE, PUIS LE HÉROS SE POSE. Il manquait le premier des
   deux : le texte arrivait en décalé sur un fond déjà là, donc la page
   « apparaissait d'un coup » avant de s'animer. Un voile d'encre couvre tout au
   chargement et se retire en 700 ms — rien ne bouge, rien ne saute, la page se
   révèle. C'est la mise au point appliquée à l'entrée, pas une transition de
   plus.

   LE VOILE EST POSÉ PAR LE JAVASCRIPT, jamais par la feuille seule : sans
   JavaScript, il resterait à l'écran et cacherait le site. Écrit ici, il n'est
   qu'un décor de plus. */
.sb-leve{position:fixed;inset:0;z-index:95;pointer-events:none;
  background:var(--encre-profonde);opacity:1;
  transition:opacity .7s var(--ease)}
.sb-leve-parti{opacity:0}
/* Un libellé qui n'existe que pour les lecteurs d'écran. */
.sb-invisible{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── 1 · MISE AU POINT (le héros) ────────────────────────────────────────── */
.sb-s-accueil-miseaupoint{
  background:radial-gradient(120% 90% at 78% 28%,rgba(27,79,216,.42),transparent 60%),
             radial-gradient(60% 60% at 15% 92%,rgba(255,75,31,.14),transparent 70%),
             var(--encre-profonde);
  overflow:hidden;align-content:start;gap:24px;
  min-block-size:var(--heros-hauteur);
  padding-block:var(--heros-haut) var(--heros-bas)}
/* LE TRAIT QUI COUPAIT LE HÉROS EN DEUX, MESURÉ LE 16.09.2026.
   Un `<canvas>` est un élément REMPLACÉ : sa bitmap est peinte dans la BOÎTE DE
   CONTENU, pas dans la boîte de bordure. Or la règle de mesure de lecture donne
   à chaque enfant du héros un `padding-inline-end` énorme — c'est elle qui rend
   sa mesure au texte. Le canvas la recevait comme les autres : sa boîte de
   contenu tombait à 58ch, le ciel se peignait dans les 560 px de gauche, et le
   dégradé CSS de la section se voyait à droite. Une arête franche, verticale,
   en travers de l'ouverture — que `getBoundingClientRect()` ne montre pas,
   puisqu'il rend la boîte de BORDURE, elle intacte à 1385 px.
   Le décor n'a pas de mesure de lecture : il remet donc son remplissage à zéro. */
[class*="sb-s-"] .ciel{padding:0;margin:0}
.sb-s-accueil-miseaupoint .ciel{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sb-s-accueil-miseaupoint>*{position:relative;z-index:1;
  padding-inline-end:max(0px,calc(100% - 58ch))}
/* LE HÉROS DE L'ACCUEIL RESTE LE PLUS GRAND, MAIS D'UN CRAN, PAS D'UN MONDE.
   Mesuré avant de toucher : à 1400 px il faisait 115 px contre 80 aux autres
   pages, soit +44 % — ce n'est plus une hiérarchie, c'est un autre système, et
   Yan l'a vu ainsi. L'écart tombe entre +9 et +18 % selon la largeur : assez
   pour que l'accueil domine, assez peu pour qu'on reconnaisse la même main. */
.sb-c-heros-titre{font-family:var(--forum);font-weight:400;
  font-size:clamp(2.9rem,7vw,5.9rem);line-height:.96;letter-spacing:-.02em;
  padding-inline-end:max(0px,calc(100% - 14ch));text-wrap:balance}
.sb-c-heros-chapo{font-size:1.28rem;line-height:1.5;color:var(--ivoire-doux)}
/* Le rythme du héros, commun aux cinq pages. */
.sb-s-accueil-miseaupoint,[class*="-ouverture"]{gap:0}
.sb-s-accueil-miseaupoint>[class*="-surtitre"],[class*="-ouverture"]>[class*="-surtitre"]{
  margin-block:0 var(--saut-sur)}
.sb-s-accueil-miseaupoint>h1,[class*="-ouverture"]>h1{margin-block:0 26px}
.sb-s-accueil-miseaupoint>[class*="-chapo"],[class*="-ouverture"]>[class*="-chapo"]{
  margin-block:0 34px}
.sb-s-accueil-miseaupoint>.sb-duo,[class*="-ouverture"]>.sb-duo,
.sb-s-accueil-miseaupoint>a[class*="-cta"],[class*="-ouverture"]>a[class*="-cta"]{
  margin-block:0 20px}

/* ── 2 · MANIFESTE ───────────────────────────────────────────────────────── */
.sb-s-accueil-manifeste{background:var(--encre);gap:6px;justify-items:start}
.sb-c-manifeste-1,.sb-c-manifeste-2,.sb-c-manifeste-3{
  font-family:var(--manrope);font-weight:200;letter-spacing:-.04em;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.08;color:var(--ivoire)}
.sb-c-manifeste-3{color:var(--accent-encre)}
.sb-c-manifeste-chute{margin-top:26px;--mesure:22ch}
.sb-c-manifeste-texte{margin-top:16px;--mesure:62ch;font-size:1.1rem}

/* ── 3 · LA PLANCHE CONTACT ──────────────────────────────────────────────────
   Trois colonnes, six vues. Chaque vue est faite de TROIS champs frères qui
   partagent le même fond : c'est ce qui la fait lire comme une carte, sans
   conteneur que la compilation perdrait. */
.sb-s-accueil-planche{background:var(--encre);
  grid-template-columns:repeat(3,1fr);column-gap:18px;row-gap:0;
  align-content:start}
.sb-c-planche-surtitre{grid-column:1/-1;grid-row:1}
.sb-c-planche-titre{grid-column:1/-1;grid-row:2;margin-block:var(--saut-sur) var(--saut-titre)}
.sb-c-planche-chapo{grid-column:1/-1;grid-row:3;--mesure:60ch;
  margin-block:16px clamp(34px,5vw,56px);font-size:1.1rem}

/* La plaque commune aux trois champs d'une vue. */
.sb-s-accueil-planche h3[class*="sb-c-metier-"],
.sb-s-accueil-planche p[class*="sb-c-metier-"],
.sb-s-accueil-methode h3[class*="sb-c-temps-"],
.sb-s-accueil-methode p[class*="sb-c-temps-"]{margin-block:0}
.sb-s-accueil-planche h3[class*="sb-c-metier-"],
.sb-s-accueil-planche p[class*="sb-c-metier-"]{
  background:var(--encre-plaque);border-inline:1px solid var(--filet-encre);
  padding-inline:16px}
.sb-s-accueil-planche h3[class*="sb-c-metier-"]{
  font-family:var(--manrope);font-weight:500;font-size:1.45rem;letter-spacing:-.01em;
  padding-top:14px;border-top:1px solid var(--filet-encre);border-radius:6px 6px 0 0;
  position:relative}
.sb-s-accueil-planche p[class*="-focale"]{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ivoire-doux);
  padding-block:10px;font-variant-numeric:tabular-nums}
.sb-s-accueil-planche p[class*="sb-c-metier-"][class*="-texte"]{
  font-size:.95rem;padding-bottom:22px;border-bottom:1px solid var(--filet-encre);
  border-radius:0 0 6px 6px;color:var(--ivoire-doux)}

/* L'illustration de la vue : une image de DÉCOR, donc du CSS. Elle est posée
   sur le titre du métier, qui ouvre la plaque. */
.sb-s-accueil-planche h3[class*="sb-c-metier-"]::before{
  content:"";display:block;aspect-ratio:4/3;max-width:100%;margin-bottom:14px;
  border-radius:3px;background:var(--encre-profonde) center/cover no-repeat}
/* Le crayon magenta : il entoure la vue au survol, comme sur une planche. */
.sb-s-accueil-planche h3[class*="sb-c-metier-"]::after{
  content:"";position:absolute;inset:8px 4px auto;aspect-ratio:1.42;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M50 3C78 2 97 15 96 35c-1 21-20 32-47 32C22 67 4 55 5 35 6 16 24 4 55 3' fill='none' stroke='%23FF4B1F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity:0;transform:scale(.94) rotate(-1.5deg);pointer-events:none}
.sb-s-accueil-planche h3[class*="sb-c-metier-"]:hover::after,
.sb-s-accueil-planche h3[class*="sb-c-metier-"]:focus-within::after{opacity:1;transform:scale(1) rotate(0)}

/* Vue 01 · Texte : la citation et son filet. */
/* Vue 02 · Éditorial : la double page et son folio. */
/* Vue 03 · Design graphique : la grille, le monogramme, les traits de coupe. */
/* Vue 04 · Photographie : le diaphragme. */
/* Vue 05 · Vidéo : le cadre 9:16 et la ligne de temps. */
/* Vue 06 · Site : la fenêtre et son premier écran. */

/* Placement : trois vues par rang, chaque vue sur trois rangs. */

/* ── 4 · LA MÉTHODE, de l'encre au papier ────────────────────────────────── */
.sb-s-accueil-methode{
  background:linear-gradient(180deg,var(--encre) 0%,var(--encre) 16%,#1E2A3E 44%,#B4BECB 76%,var(--papier) 100%);
  grid-template-columns:repeat(5,1fr);column-gap:30px;row-gap:0;align-content:start}
.sb-c-methode-surtitre{grid-column:1/-1;grid-row:1}
.sb-c-methode-titre{grid-column:1/-1;grid-row:2;margin-block:var(--saut-sur) var(--saut-titre)}
.sb-s-accueil-methode h3[class*="sb-c-temps-"]{
  grid-row:3;font-family:var(--forum);font-weight:400;font-size:1.7rem;line-height:1;
  padding:22px 18px 10px;border-radius:var(--r) var(--r) 0 0;
  border:1px solid var(--filet-encre-fort);border-bottom:0;background:rgba(11,18,32,.72)}
.sb-s-accueil-methode p[class*="sb-c-temps-"]{
  grid-row:4;font-size:.92rem;padding:0 18px 24px;border-radius:0 0 var(--r) var(--r);
  border:1px solid var(--filet-encre-fort);border-top:0;background:rgba(11,18,32,.72)}
/* Les deux derniers temps ont déjà basculé dans le réel : fond papier.
   La règle vise la section ET la balise, pour passer devant celle qui pose la
   plaque d'encre. Aucun `!important` : le standard de la maison l'interdit. */
.sb-s-accueil-methode h3.sb-c-temps-4-nom,
.sb-s-accueil-methode p.sb-c-temps-4-texte,
.sb-s-accueil-methode h3.sb-c-temps-5-nom,
.sb-s-accueil-methode p.sb-c-temps-5-texte{
  background:rgba(247,249,252,.92);color:var(--texte);
  border-color:var(--filet-papier-fort)}
.sb-c-temps-1-nom,.sb-c-temps-1-texte{grid-column:1}
.sb-c-temps-2-nom,.sb-c-temps-2-texte{grid-column:2}
.sb-c-temps-3-nom,.sb-c-temps-3-texte{grid-column:3}
.sb-c-temps-4-nom,.sb-c-temps-4-texte{grid-column:4}
.sb-c-temps-5-nom,.sb-c-temps-5-texte{grid-column:5}

/* ── 5 · LES CARNETS ─────────────────────────────────────────────────────── */
.sb-s-accueil-carnets{background:var(--papier);color:var(--texte);gap:0}
.sb-s-accueil-carnets [class*="-surtitre"]{color:var(--texte-doux)}
.sb-s-accueil-carnets [class*="-chapo"]{color:var(--texte-doux);--mesure:60ch;
  margin-block:16px clamp(30px,4vw,48px);font-size:1.1rem}
.sb-c-carnets-titre{margin-top:14px}
/* Trois carnets, neuf champs frères : même principe que la planche contact.
   Chaque carnet est fait de trois champs qui partagent la même plaque. */
.sb-s-accueil-carnets{grid-template-columns:repeat(3,1fr);column-gap:18px;row-gap:0}
.sb-s-accueil-carnets>[class*="-surtitre"],
.sb-c-carnets-titre,.sb-c-carnets-chapo{grid-column:1/-1}
.sb-s-accueil-carnets h3[class*="sb-c-carnet-"],
.sb-s-accueil-carnets p[class*="sb-c-carnet-"]{
  margin-block:0;background:var(--papier-surface);
  border-inline:1px solid var(--filet-papier);padding-inline:22px}
.sb-s-accueil-carnets h3[class*="sb-c-carnet-"]{padding-top:22px;
  border-top:1px solid var(--filet-papier);border-radius:var(--r) var(--r) 0 0}
.sb-s-accueil-carnets p[class*="-texte"]{padding-bottom:26px;
  border-bottom:1px solid var(--filet-papier);border-radius:0 0 var(--r) var(--r)}
.sb-c-carnet-1-nom,.sb-c-carnet-1-metiers,.sb-c-carnet-1-texte{grid-column:1}
.sb-c-carnet-2-nom,.sb-c-carnet-2-metiers,.sb-c-carnet-2-texte{grid-column:2}
.sb-c-carnet-3-nom,.sb-c-carnet-3-metiers,.sb-c-carnet-3-texte{grid-column:3}
.sb-c-carnet-1-nom,.sb-c-carnet-2-nom,.sb-c-carnet-3-nom{grid-row:4}
.sb-c-carnet-1-metiers,.sb-c-carnet-2-metiers,.sb-c-carnet-3-metiers{grid-row:5}
.sb-c-carnet-1-texte,.sb-c-carnet-2-texte,.sb-c-carnet-3-texte{grid-row:6}
.sb-s-accueil-carnets h3[class*="sb-c-carnet-"]{font-family:var(--forum);font-weight:400;font-size:1.6rem;line-height:1}
.sb-s-accueil-carnets p[class*="-metiers"]{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-papier)}
.sb-s-accueil-carnets p[class*="sb-c-carnet-"][class*="-texte"]{color:var(--texte-doux);font-size:.95rem}

/* ── 6 · SOUS LE MÊME CIEL ───────────────────────────────────────────────── */
.sb-s-accueil-ciel{background:var(--encre);gap:16px;justify-items:start}
.sb-c-ciel-texte{--mesure:62ch;font-size:1.1rem}
.sb-c-ciel-titre{--mesure:16ch;padding-inline-end:max(0px,calc(100% - 16ch))}

/* ── 7 · PREMIER ÉCHANGE ─────────────────────────────────────────────────── */
.sb-s-accueil-echange{background:var(--papier);color:var(--texte);gap:0;justify-items:start}
.sb-c-echange-titre{--mesure:20ch;padding-inline-end:max(0px,calc(100% - 20ch))}
.sb-c-echange-texte{color:var(--texte-doux);font-size:1.15rem;--mesure:56ch}
.sb-c-echange-reassurance{color:var(--texte-doux)}

/* ── LARGEURS ────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .sb-s-accueil-planche{grid-template-columns:repeat(2,1fr)}
  .sb-c-metier-1-nom,
  .sb-c-metier-1-focale,
  .sb-c-metier-1-texte{grid-column:1}
  .sb-c-metier-2-nom,
  .sb-c-metier-2-focale,
  .sb-c-metier-2-texte{grid-column:2}
  .sb-c-metier-3-nom,
  .sb-c-metier-3-focale,
  .sb-c-metier-3-texte{grid-column:1}
  .sb-c-metier-4-nom,
  .sb-c-metier-4-focale,
  .sb-c-metier-4-texte{grid-column:2}
  .sb-c-metier-5-nom,
  .sb-c-metier-5-focale,
  .sb-c-metier-5-texte{grid-column:1}
  .sb-c-metier-6-nom,
  .sb-c-metier-6-focale,
  .sb-c-metier-6-texte{grid-column:2}
  .sb-c-metier-3-nom{grid-row:7}
  .sb-c-metier-3-focale{grid-row:8}
  .sb-c-metier-3-texte{grid-row:9}
  .sb-c-metier-5-nom{grid-row:10}
  .sb-c-metier-5-focale{grid-row:11}
  .sb-c-metier-5-texte{grid-row:12}
  .sb-c-metier-6-nom{grid-row:10}
  .sb-c-metier-6-focale{grid-row:11}
  .sb-c-metier-6-texte{grid-row:12}
  .sb-s-accueil-methode{grid-template-columns:repeat(2,1fr)}
  .sb-c-temps-1-nom,
  .sb-c-temps-1-texte,
  .sb-c-temps-3-nom,
  .sb-c-temps-3-texte,
  .sb-c-temps-5-nom,
  .sb-c-temps-5-texte{grid-column:1}
  .sb-c-temps-2-nom,
  .sb-c-temps-2-texte,
  .sb-c-temps-4-nom,
  .sb-c-temps-4-texte{grid-column:2}
  .sb-c-temps-1-nom,
  .sb-c-temps-2-nom{grid-row:3}
  .sb-c-temps-1-texte,
  .sb-c-temps-2-texte{grid-row:4}
  .sb-c-temps-3-nom,
  .sb-c-temps-4-nom{grid-row:5}
  .sb-c-temps-3-texte,
  .sb-c-temps-4-texte{grid-row:6}
  .sb-c-temps-5-nom{grid-row:7}
  .sb-c-temps-5-texte{grid-row:8}
  .sb-s-accueil-carnets{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .sb-s-accueil-planche{grid-template-columns:1fr}
  .sb-s-accueil-planche h3[class*="sb-c-metier-"],
  .sb-s-accueil-planche p[class*="sb-c-metier-"]{grid-column:1}
  .sb-c-metier-1-nom{grid-row:4}
  .sb-c-metier-1-focale{grid-row:5}
  .sb-c-metier-1-texte{grid-row:6}
  .sb-c-metier-2-nom{grid-row:7}
  .sb-c-metier-2-focale{grid-row:8}
  .sb-c-metier-2-texte{grid-row:9}
  .sb-c-metier-3-nom{grid-row:10}
  .sb-c-metier-3-focale{grid-row:11}
  .sb-c-metier-3-texte{grid-row:12}
  .sb-c-metier-4-nom{grid-row:13}
  .sb-c-metier-4-focale{grid-row:14}
  .sb-c-metier-4-texte{grid-row:15}
  .sb-c-metier-5-nom{grid-row:16}
  .sb-c-metier-5-focale{grid-row:17}
  .sb-c-metier-5-texte{grid-row:18}
  .sb-c-metier-6-nom{grid-row:19}
  .sb-c-metier-6-focale{grid-row:20}
  .sb-c-metier-6-texte{grid-row:21}
  .sb-s-accueil-methode{grid-template-columns:1fr}
  .sb-s-accueil-methode h3[class*="sb-c-temps-"],
  .sb-s-accueil-methode p[class*="sb-c-temps-"]{grid-column:1}
  .sb-c-temps-1-nom{grid-row:3}
  .sb-c-temps-1-texte{grid-row:4}
  .sb-c-temps-2-nom{grid-row:5}
  .sb-c-temps-2-texte{grid-row:6}
  .sb-c-temps-3-nom{grid-row:7}
  .sb-c-temps-3-texte{grid-row:8}
  .sb-c-temps-4-nom{grid-row:9}
  .sb-c-temps-4-texte{grid-row:10}
  .sb-c-temps-5-nom{grid-row:11}
  .sb-c-temps-5-texte{grid-row:12}
  .sb-s-accueil-carnets{grid-template-columns:1fr}
}

/* ── LE MOUVEMENT, ET RIEN QUE LUI ───────────────────────────────────────────
   La charte de la maison interdit déjà le curseur personnalisé, l'écran de
   chargement et le défilement détourné. Reste le réglage du système.
   IL EST HONORÉ PAR OMISSION, PAS PAR ANNULATION : le mouvement ne se déclare
   qu'en `no-preference`, donc il n'y a rien à défaire ensuite. Annuler les
   animations dans un bloc `reduce` demanderait la marque de priorité que le
   standard refuse sur un site neuf, et il a raison : ce qui gagne contre tout
   gagne aussi contre le correctif de demain. */
@media (prefers-reduced-motion:no-preference){
  .net-in{animation:mise-au-point 1.15s var(--ease) both}
  [class*="-cta"],[class*="-cta"] a,[class*="-lien"],[class*="-lien"] a{
    transition:transform .25s var(--ease)}
  .sb-s-accueil-planche h3[class*="sb-c-metier-"],
  .sb-s-accueil-planche p[class*="sb-c-metier-"]{transition:background .35s var(--ease)}
  .sb-s-accueil-planche h3[class*="sb-c-metier-"]::before{transition:filter .5s var(--ease)}
  .sb-s-accueil-planche h3[class*="sb-c-metier-"]::after{
    transition:opacity .4s var(--ease),transform .5s var(--ease)}
}

/* ════════════════════════════════════════════════════════════════════════════
   LES PAGES INTÉRIEURES
   Même grammaire que l'accueil : une section est une grille, un champ s'y place
   par sa classe, et ce qui ressemble à une carte est plusieurs champs frères qui
   partagent une plaque. Les règles ci-dessous n'ajoutent aucune couleur ni
   aucune police : elles réemploient celles de l'accueil.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Ouvertures de page ──────────────────────────────────────────────────── */
.sb-s-expertise-ouverture{
  background:radial-gradient(95% 75% at 18% 22%,rgba(91,140,255,.26),transparent 66%),
             radial-gradient(70% 60% at 88% 78%,rgba(27,79,216,.16),transparent 72%),var(--encre-profonde);
  gap:0;align-content:start;min-block-size:var(--heros-hauteur);
  padding-block:var(--heros-haut) var(--heros-bas)}
.sb-s-expertise-ouverture h1,.sb-s-realisations-ouverture h1,.sb-s-contact-ouverture h1{
  font-family:var(--forum);font-weight:400;line-height:1.02;letter-spacing:-.015em;
  font-size:clamp(2.6rem,6.4vw,5rem);
  padding-inline-end:max(0px,calc(100% - 17ch));text-wrap:balance}
/* 🔴 L'ÉQUILIBRAGE CHOISISSAIT L'AUTRE COUPURE, ET LA MESURE N'Y POUVAIT RIEN.
   `text-wrap:balance` cherche à égaliser les lignes : sur « Créer une marque est
   un art » il rendait « Créer une / marque est un art », parce qu'en PIXELS de
   Forum ce partage est plus équilibré que celui qu'on veut. Aucune mesure en
   `ch` ne le fait changer d'avis — elle borne la largeur, il choisit dedans.

   Le titre revient donc au retour à la ligne ORDINAIRE, qui remplit la ligne
   puis passe à la suivante : à 17ch, « Créer une marque » tient et « est » ne
   tient plus. La coupure tombe là où Yan l'a écrite.

   ⚠️ LE RETOUR À LA LIGNE DANS LE TEXTE NE MARCHE PAS : essayé le 17.09.2026,
   la chaîne normalise les blancs et le rend en espace. La coupure d'un titre se
   décide donc dans la feuille, jamais dans le champ. */
/* 🔴 UNE LIGNE SE MESURE EN EM, PAS EN CARACTÈRES — et c'est ce que j'ai cru
   deux fois. « Créer une marque » compte seize caractères, mais n'occupe que
   13,92 ch dans Forum ; « Créer une marque est » en occupe 16,62. À la mesure de
   17ch, la seconde TENAIT, et la coupure tombait avant « un art ».

   Mesuré dans le fichier de police lui-même, avec les avances de chaque glyphe :
   la valeur doit se placer ENTRE 13,92 et 16,62. 15ch laisse passer « Créer une
   marque » et refuse « est ».

   `text-wrap:normal` est nécessaire en plus : `balance` ignore la mesure et
   choisit le partage le plus équilibré EN PIXELS, ici « Créer une / marque est
   un art ». Aucune largeur ne le fait changer d'avis.

   ⚠️ Et le retour à la ligne écrit dans le champ ne marche pas : la chaîne
   normalise les blancs. La coupure d'un titre se décide donc ici, et sa valeur
   se mesure — elle ne se devine pas. */
.sb-s-expertise-ouverture h1{
  /* 🔴 `text-wrap:normal` N'EXISTE PAS, et c'est ce qui a coûté quatre allers.
     Les valeurs sont `wrap`, `nowrap`, `balance`, `pretty`, `stable`. Une valeur
     invalide fait JETER la déclaration en silence : `balance`, hérité de la
     règle partagée, continuait de choisir « Créer une / marque est un art ».
     Le contrôle HTML/CSS ne l'a pas vue non plus — il lit la structure, pas le
     vocabulaire des propriétés.

     Avec `wrap`, le retour à la ligne redevient ordinaire et la mesure décide.
     15ch se place entre les deux largeurs mesurées dans la police elle-même :
     « Créer une marque » occupe 13,92 ch, « Créer une marque est » 16,62.

     ⚠️ DEUX AUTRES ROUTES SONT FERMÉES, essayées et mesurées le 17.09.2026 : un
     retour à la ligne écrit dans le champ, et des espaces insécables. La chaîne
     normalise TOUS les blancs. La coupure d'un titre se décide ici. */
  text-wrap:wrap;
  padding-inline-end:max(0px,calc(100% - 15ch))}
.sb-s-expertise-ouverture [class*="-chapo"],
.sb-s-realisations-ouverture [class*="-chapo"],
.sb-s-contact-ouverture [class*="-chapo"]{font-size:1.28rem;line-height:1.5;--mesure:58ch}

/* LES QUATRE PORTES SONT DANS LE HÉROS, et la section qui les portait a disparu.
   Yan, le 17.09.2026 : « au lieu de mettre Nous écrire et Prendre rendez-vous
   en haut, tu montes les quatre boutons dans le hero ». Le visiteur choisit son
   canal sans faire défiler, et le titre qui les annonçait — « Quatre façons de
   nous joindre » — part avec : il énumérait.

   ILS TIENNENT SUR UNE RANGÉE QUI SE REPLIE, pas sur une grille : quatre
   libellés de longueurs très différentes dans quatre colonnes égales laissent
   trois trous. `flex-wrap` les serre à leur contenu et les passe à la ligne
   quand la place manque. */
.sb-s-contact-ouverture{grid-template-columns:minmax(0,1fr)}
.sb-s-contact-ouverture>[class*="-cta"],
.sb-s-contact-ouverture>[class*="-lien"]{grid-column:1}
.sb-s-contact-ouverture .sb-duo{flex-wrap:wrap;gap:12px 14px}

/* ── Les six métiers, en détail · deux colonnes ──────────────────────────── */
.sb-s-expertise-metiers{background:var(--encre);
  grid-template-columns:repeat(2,1fr);column-gap:24px;row-gap:0;align-content:start}
.sb-c-metiers-surtitre{grid-column:1/-1;grid-row:1}
.sb-c-metiers-titre{grid-column:1/-1;grid-row:2;margin-block:var(--saut-sur) 0}
.sb-c-metiers-chapo{grid-column:1/-1;grid-row:3;--mesure:60ch;
  margin-block:14px var(--saut-titre);font-size:1.1rem}
.sb-s-expertise-metiers h3{margin-block:0;font-family:var(--manrope);font-weight:500;
  font-size:1.5rem;letter-spacing:-.01em;padding:26px 22px 4px;scroll-margin-top:90px;
  border:1px solid var(--filet-encre);border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  background:var(--encre-plaque)}
.sb-s-expertise-metiers p[class*="-texte"]{margin-block:0;padding:0 22px 14px;
  border-inline:1px solid var(--filet-encre);background:var(--encre-plaque)}
/* ── Les cinq temps développés · du rêve au réel, comme sur l'accueil ───── */
.sb-s-expertise-temps{
  background:linear-gradient(180deg,var(--encre) 0%,var(--encre) 18%,#1E2A3E 46%,#B4BECB 78%,var(--papier) 100%);
  grid-template-columns:repeat(5,1fr);column-gap:30px;row-gap:0;align-content:start}
.sb-c-temps-surtitre{grid-column:1/-1;grid-row:1}
.sb-c-temps-titre{grid-column:1/-1;grid-row:2;margin-block:var(--saut-sur) var(--saut-titre)}
.sb-s-expertise-temps h3{grid-row:3;margin-block:0;font-family:var(--forum);font-weight:400;
  font-size:1.6rem;line-height:1;padding:22px 18px 10px;
  border:1px solid var(--filet-encre-fort);border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  background:rgba(11,18,32,.72)}
.sb-s-expertise-temps h3+p{grid-row:4;margin-block:0;font-size:.92rem;padding:0 18px 24px;
  border:1px solid var(--filet-encre-fort);border-top:0;border-radius:0 0 var(--r) var(--r);
  background:rgba(11,18,32,.72)}
.sb-c-t1-nom,.sb-c-t1-texte{grid-column:1}.sb-c-t2-nom,.sb-c-t2-texte{grid-column:2}
.sb-c-t3-nom,.sb-c-t3-texte{grid-column:3}.sb-c-t4-nom,.sb-c-t4-texte{grid-column:4}
.sb-c-t5-nom,.sb-c-t5-texte{grid-column:5}
.sb-s-expertise-temps h3.sb-c-t4-nom,.sb-s-expertise-temps p.sb-c-t4-texte,
.sb-s-expertise-temps h3.sb-c-t5-nom,.sb-s-expertise-temps p.sb-c-t5-texte{
  background:rgba(247,249,252,.92);color:var(--texte);border-color:var(--filet-papier-fort)}

.sb-s-realisations-ouverture,.sb-s-contact-ouverture{
  background:radial-gradient(120% 90% at 80% 20%,rgba(27,79,216,.34),transparent 62%),var(--encre-profonde)}

/* ── Avec qui · une liste sobre ──────────────────────────────────────────── */
.sb-s-expertise-avec{background:var(--encre);gap:0}
.sb-c-avec-titre{margin-block:var(--saut-sur) 0}
.sb-c-avec-chapo{margin-block:14px var(--saut-titre);--mesure:60ch;font-size:1.1rem}
.sb-c-avec-1,.sb-c-avec-2,.sb-c-avec-3,.sb-c-avec-4{
  padding-block:14px;border-top:1px solid var(--filet-encre);color:var(--ivoire)}

/* ── Qui tient le studio, et les bandeaux de fin ────────────────────────── */
.sb-s-expertise-studio{background:var(--encre-profonde);gap:16px}
.sb-c-studio-texte{--mesure:62ch;font-size:1.1rem}
.sb-s-expertise-echange,.sb-s-realisations-echange{background:var(--papier);color:var(--texte);gap:0}
[class*="-echange"]>h2{margin-block:0 26px}
[class*="-echange"]>[class*="-texte"]{margin-block:0 30px}
[class*="-echange"]>.sb-duo,[class*="-echange"]>a[class*="-cta"],
[class*="-echange"]>div[class*="-cta"]{margin-block:0 20px}
.sb-s-expertise-echange [class*="-texte"],.sb-s-realisations-echange [class*="-texte"]{
  color:var(--texte-doux);font-size:1.15rem;--mesure:56ch}
.sb-s-expertise-echange h2,.sb-s-realisations-echange h2{padding-inline-end:max(0px,calc(100% - 20ch))}
.sb-s-expertise-echange [class*="-reassurance"],.sb-s-realisations-echange [class*="-reassurance"]{color:var(--texte-doux)}

/* ── Les carnets de la page Réalisations · deux colonnes, une vignette ──── */
/* ÉBAUCHE DU 18.09.2026, demandée par Yan : « refaire la page Réalisations ».
   Chaque carnet ouvre sur la page d'accueil du site qu'il raconte : une page
   de réalisations se regarde avant de se lire. Deux colonnes plutôt que trois,
   pour que la vignette ait la taille d'un écran qu'on reconnaît ; une seule
   sous 760 px. Les cinq champs d'un carnet restent frères (même grammaire que
   la planche de l'accueil) : la carte est une illusion de bordures. */
.sb-s-realisations-carnets{background:var(--encre);
  grid-template-columns:repeat(2,1fr);column-gap:clamp(18px,3vw,36px);row-gap:0;align-content:start}
.sb-c-carnets-h{grid-column:1/-1;grid-row:1;margin-block:0 var(--saut-titre)}
/* La vignette : l'image du prototype, ou la figure du bloc d'image WordPress. */
.sb-s-realisations-carnets img[class*="-image"],
.sb-s-realisations-carnets figure[class*="-image"]{margin:0;display:block;width:100%;
  border:1px solid var(--filet-encre);border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  overflow:hidden;background:var(--encre-plaque)}
.sb-s-realisations-carnets img[class*="-image"],
.sb-s-realisations-carnets figure[class*="-image"] img{display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;object-position:top center}
.sb-s-realisations-carnets figure[class*="-image"] img{border:0;border-radius:0}
.sb-s-realisations-carnets h3{margin-block:0;font-family:var(--forum);font-weight:400;
  font-size:clamp(1.6rem,2.4vw,2rem);line-height:1;padding:24px 24px 6px;background:var(--encre-plaque);
  border-inline:1px solid var(--filet-encre)}
.sb-s-realisations-carnets p[class*="-metiers"]{margin-block:0;padding:10px 24px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-encre);background:var(--encre-plaque);border-inline:1px solid var(--filet-encre)}
/* Les démarches sont justifiées, à longueur égale (356 signes, calée par Yan
   le 18.09.2026 sur celle de Mental Sofa) : six blocs de même masse, qui
   alignent leurs liens d'une carte à l'autre. La césure évite les lézardes que
   la justification creuse dans une colonne étroite. */
.sb-s-realisations-carnets p[class*="-texte"]{margin-block:0;padding:0 24px 18px;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  font-size:.98rem;background:var(--encre-plaque);border-inline:1px solid var(--filet-encre)}
.sb-s-realisations-carnets div[class*="-lien"],
.sb-s-realisations-carnets a[class*="-lien"]{margin-block:0;padding:0 24px 26px;justify-self:stretch;
  background:var(--encre-plaque);border:1px solid var(--filet-encre);border-top:0;
  border-radius:0 0 var(--r) var(--r)}
.sb-s-realisations-carnets a[class*="-lien"],
.sb-s-realisations-carnets [class*="-lien"] a{background:transparent;border:0;box-shadow:none;
  padding:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--accent-encre);text-decoration:underline;text-underline-offset:4px}
/* Dans le prototype, le lien EST le dernier champ : il reprend la plaque que
   la règle précédente lui a retirée, et s'étend sur toute sa colonne. */
.sb-s-realisations-carnets a[class*="-lien"]{display:block;width:100%;box-sizing:border-box;padding:0 24px 26px;
  background:var(--encre-plaque);border:1px solid var(--filet-encre);border-top:0;
  border-radius:0 0 var(--r) var(--r)}
.sb-c-c1-image,.sb-c-c1-nom,.sb-c-c1-metiers,.sb-c-c1-texte,.sb-c-c1-lien{grid-column:1}
.sb-c-c1-image{grid-row:2}.sb-c-c1-nom{grid-row:3}.sb-c-c1-metiers{grid-row:4}.sb-c-c1-texte{grid-row:5}.sb-c-c1-lien{grid-row:6}
.sb-c-c2-image,.sb-c-c2-nom,.sb-c-c2-metiers,.sb-c-c2-texte,.sb-c-c2-lien{grid-column:2}
.sb-c-c2-image{grid-row:2}.sb-c-c2-nom{grid-row:3}.sb-c-c2-metiers{grid-row:4}.sb-c-c2-texte{grid-row:5}.sb-c-c2-lien{grid-row:6}
.sb-c-c3-image,.sb-c-c3-nom,.sb-c-c3-metiers,.sb-c-c3-texte,.sb-c-c3-lien{grid-column:1}
.sb-c-c3-image{grid-row:7}.sb-c-c3-nom{grid-row:8}.sb-c-c3-metiers{grid-row:9}.sb-c-c3-texte{grid-row:10}.sb-c-c3-lien{grid-row:11}
.sb-c-c4-image,.sb-c-c4-nom,.sb-c-c4-metiers,.sb-c-c4-texte,.sb-c-c4-lien{grid-column:2}
.sb-c-c4-image{grid-row:7}.sb-c-c4-nom{grid-row:8}.sb-c-c4-metiers{grid-row:9}.sb-c-c4-texte{grid-row:10}.sb-c-c4-lien{grid-row:11}
.sb-c-c5-image,.sb-c-c5-nom,.sb-c-c5-metiers,.sb-c-c5-texte,.sb-c-c5-lien{grid-column:1}
.sb-c-c5-image{grid-row:12}.sb-c-c5-nom{grid-row:13}.sb-c-c5-metiers{grid-row:14}.sb-c-c5-texte{grid-row:15}.sb-c-c5-lien{grid-row:16}
.sb-c-c6-image,.sb-c-c6-nom,.sb-c-c6-metiers,.sb-c-c6-texte,.sb-c-c6-lien{grid-column:2}
.sb-c-c6-image{grid-row:12}.sb-c-c6-nom{grid-row:13}.sb-c-c6-metiers{grid-row:14}.sb-c-c6-texte{grid-row:15}.sb-c-c6-lien{grid-row:16}
.sb-c-c7-image,.sb-c-c7-nom,.sb-c-c7-metiers,.sb-c-c7-texte,.sb-c-c7-lien{grid-column:1}
.sb-c-c7-image{grid-row:17}.sb-c-c7-nom{grid-row:18}.sb-c-c7-metiers{grid-row:19}.sb-c-c7-texte{grid-row:20}.sb-c-c7-lien{grid-row:21}
.sb-c-c8-image,.sb-c-c8-nom,.sb-c-c8-metiers,.sb-c-c8-texte,.sb-c-c8-lien{grid-column:2}
.sb-c-c8-image{grid-row:17}.sb-c-c8-nom{grid-row:18}.sb-c-c8-metiers{grid-row:19}.sb-c-c8-texte{grid-row:20}.sb-c-c8-lien{grid-row:21}
@media (max-width:760px){
  .sb-s-realisations-carnets{grid-template-columns:1fr}
  .sb-s-realisations-carnets [class*="sb-c-c"]{grid-column:1}
  .sb-c-c1-image{grid-row:2}.sb-c-c1-nom{grid-row:3}.sb-c-c1-metiers{grid-row:4}.sb-c-c1-texte{grid-row:5}.sb-c-c1-lien{grid-row:6}
  .sb-c-c2-image{grid-row:7}.sb-c-c2-nom{grid-row:8}.sb-c-c2-metiers{grid-row:9}.sb-c-c2-texte{grid-row:10}.sb-c-c2-lien{grid-row:11}
  .sb-c-c3-image{grid-row:12}.sb-c-c3-nom{grid-row:13}.sb-c-c3-metiers{grid-row:14}.sb-c-c3-texte{grid-row:15}.sb-c-c3-lien{grid-row:16}
  .sb-c-c4-image{grid-row:17}.sb-c-c4-nom{grid-row:18}.sb-c-c4-metiers{grid-row:19}.sb-c-c4-texte{grid-row:20}.sb-c-c4-lien{grid-row:21}
  .sb-c-c5-image{grid-row:22}.sb-c-c5-nom{grid-row:23}.sb-c-c5-metiers{grid-row:24}.sb-c-c5-texte{grid-row:25}.sb-c-c5-lien{grid-row:26}
  .sb-c-c6-image{grid-row:27}.sb-c-c6-nom{grid-row:28}.sb-c-c6-metiers{grid-row:29}.sb-c-c6-texte{grid-row:30}.sb-c-c6-lien{grid-row:31}
  .sb-c-c7-image{grid-row:32}.sb-c-c7-nom{grid-row:33}.sb-c-c7-metiers{grid-row:34}.sb-c-c7-texte{grid-row:35}.sb-c-c7-lien{grid-row:36}
  .sb-c-c8-image{grid-row:37}.sb-c-c8-nom{grid-row:38}.sb-c-c8-metiers{grid-row:39}.sb-c-c8-texte{grid-row:40}.sb-c-c8-lien{grid-row:41}
}
/* « ET BIEN PLUS ENCORE » EST LA SEPTIÈME CARTE, PAS UN BANDEAU. Seul sur une
   bande d'encre sous la grille, il se lisait comme un pied de section, et Yan
   ne l'a pas vu (18.09.2026 : « il est pas assez visible, c'est juste en
   bandeau noir en bas »). Il prend donc la grammaire des carnets, une plaque
   en deux champs frères, dans le prolongement de la grille et sur toute sa
   largeur. Le filet est en pointillé d'accent : une place réservée aux marques
   à venir, à côté de celles qui sont faites. */
.sb-s-realisations-suite{background:var(--encre-ardoise);gap:0;padding-top:0;grid-template-columns:1fr}
.sb-s-realisations-suite>*{max-width:none}
/* La grille des carnets rend sa marge basse à la carte qui la prolonge. */
.sb-s-realisations-carnets{padding-bottom:clamp(18px,2.4vw,28px)}
.sb-s-realisations-suite h2.sb-c-suite-titre{margin:0;
  padding:clamp(30px,4vw,48px) clamp(24px,4vw,48px) 12px;
  font-size:clamp(2rem,4.2vw,3.2rem);color:var(--ivoire);
  background:var(--encre-plaque);border:1px dashed var(--accent-encre);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0}
/* DEUX PHRASES, DEUX LIGNES (Yan, 18.09.2026 : « le retour à la ligne se fait
   après le point »). Le compilateur ramène `<br>` et les sauts de ligne à une
   espace : chaque phrase est donc son propre champ. Le premier porte les côtés
   de la plaque, le second les côtés et le bas. La mesure passe de 62 à 82
   signes : la première phrase (78 signes) tient sur une ligne dès que la
   largeur le permet (Yan, le même jour). */
.sb-s-realisations-suite p.sb-c-suite-texte,
.sb-s-realisations-suite p.sb-c-suite-fin{margin:0;
  padding:0 max(clamp(24px,4vw,48px),calc(100% - 82ch)) 0 clamp(24px,4vw,48px);
  font-size:1.12rem;color:var(--ivoire-doux);
  background:var(--encre-plaque);border:1px dashed var(--accent-encre);border-block:0}
.sb-s-realisations-suite p.sb-c-suite-fin{
  padding-bottom:clamp(30px,4vw,48px);border-bottom:1px dashed var(--accent-encre);
  border-radius:0 0 var(--r) var(--r)}

/* ── Contact · écrire directement ───────────────────────────────────────── */
.sb-s-contact-ecrire{background:var(--encre);gap:0}
.sb-s-contact-ecrire>[class*="-surtitre"]{margin-block:0 var(--saut-sur)}
.sb-s-contact-ecrire>h2{margin-block:0 var(--saut-titre)}
/* L'ADRESSE APPELLE LA CARTE. La page « Plan d'accès » la porte, et rien n'y
   menait depuis Contact — relevé par Yan le 17.09.2026. Le lien vient après
   l'adresse, où l'on se demande justement comment venir. */
.sb-s-contact-ecrire>[class*="-lien"]{margin-block:22px 0}
.sb-c-ecrire-lieu{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--ivoire-sourd)}
.sb-s-contact-ecrire a[class*="-whatsapp"],.sb-s-contact-ecrire [class*="-whatsapp"] a{
  background:transparent;border:1px solid var(--filet-encre-fort);box-shadow:none;font-weight:400}

/* ── Les pages légales · une colonne, faite pour être lue ─────────────────
   LE SÉLECTEUR PORTE UNE SOUS-CHAÎNE, PAS UNE CLASSE EXACTE, ET C'EST UNE
   CORRECTION. Le compilateur nomme la section d'après son PATTERN —
   `sb-s-legal-cgu`, `sb-s-legal-cookies`, `sb-s-legal-mentions-legales` — là où
   le prototype écrit `sb-s-legal`. La règle exacte ne matchait donc AUCUNE des
   quatre pages côté servi : leurs sous-titres sortaient à 57,6 px, la taille
   d'un titre de section. Le prototype, lui, était juste — le défaut n'existait
   que d'un seul côté, et c'est exactement l'écart que cette feuille unique doit
   rattraper. Vu par Yan le 16.09.2026, mesuré dans la foulée. */
/* ── LE HÉROS D'UNE PAGE LÉGALE ────────────────────────────────────────────
   Centré, court, sur l'encre : c'est le gabarit de la maison. Il porte la
   classe `-ouverture`, donc il reçoit le ciel et le voile de lisibilité des
   autres ouvertures sans une ligne de plus — mais il annule leur alignement à
   gauche, qui est le seul point où les deux diffèrent. */
[class*="sb-s-legal-ouverture"]{justify-items:center;text-align:center;
  /* LA COLONNE DOIT REMPLIR, SANS QUOI CENTRER NE CENTRE RIEN. Les sections
     sont `justify-content:start` et leur colonne se dimensionne sur le plus
     large des champs : le texte se centrait donc dans une colonne de 480 px
     collée à gauche, ce qui se voit comme un texte mal aligné et non comme un
     centrage raté. Une colonne qui prend toute la largeur, et le centrage
     redevient ce qu'on croyait avoir écrit. */
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(72px,10vw,132px) clamp(64px,8vw,104px)}
[class*="sb-s-legal-ouverture"]>*{padding-inline-end:0;justify-self:center}
[class*="sb-s-legal-ouverture"] h1{font-family:var(--forum);font-weight:400;
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.015em;
  padding-inline-end:0;text-wrap:balance}
[class*="sb-s-legal-ouverture"]>[class*="-surtitre"]{margin-block:0 var(--saut-sur)}

/* ── LE CORPS D'UNE PAGE LÉGALE · une colonne, faite pour être lue ──────── */
[class*="sb-s-legal"]:not([class*="-ouverture"]){background:var(--papier);color:var(--texte);gap:0;
  padding-block:clamp(70px,9vw,120px);
  /* La colonne de lecture est CENTRÉE dans la page, comme chez la maison :
     un texte de loi sur toute la largeur ne se lit pas. */
  grid-template-columns:minmax(0,820px);justify-content:center}
[class*="sb-s-legal"]:not([class*="-ouverture"]) h1{font-family:var(--forum);font-weight:400;
  font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.05;margin-bottom:8px}
[class*="sb-s-legal"]:not([class*="-ouverture"]) h2{font-family:var(--manrope);font-weight:500;font-size:1.3rem;
  letter-spacing:-.01em;margin-block:32px 10px;padding-top:22px;
  border-top:1px solid var(--filet-papier)}
[class*="sb-s-legal"]:not([class*="-ouverture"]) h3{font-family:var(--manrope);font-weight:500;font-size:1.05rem;
  margin-block:20px 6px}
[class*="sb-s-legal"]:not([class*="-ouverture"]) p{color:var(--texte-doux);margin-block:0 12px;
  padding-inline-end:0}
/* LA DATE SE VISE PAR SA POSITION, PAS PAR SON NOM.
   `p[class*="-p1"]` attrapait AUSSI `-p10`, `-p11`, `-p12`… : sur les mentions
   légales, quatre articles entiers passaient en chasse fixe et en capitales,
   illisibles. Vu par Yan le 17.09.2026. La date est le PREMIER paragraphe du
   corps, et cette position-là ne peut pas mentir — elle ne dépend pas du nombre
   de clauses qui suivent. */
[class*="sb-s-legal"]:not([class*="-ouverture"]) > p:first-of-type{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texte-sourd);margin-block:0 22px}

/* ── Largeurs · les pages intérieures ───────────────────────────────────── */
@media (max-width:980px){
  .sb-s-offres-formules{grid-template-columns:1fr}
  .sb-s-expertise-metiers{grid-template-columns:1fr}
  .sb-s-expertise-metiers h3[class*="sb-c-"],
  .sb-s-expertise-metiers p[class*="sb-c-"]{grid-column:1}
  .sb-s-expertise-metiers h3.sb-c-m2-nom{grid-row:8}
  .sb-c-m2-focale{grid-row:9}
  .sb-s-expertise-metiers p.sb-c-m2-texte{grid-row:10}
  .sb-c-m2-livrables{grid-row:11}
  .sb-s-expertise-metiers h3.sb-c-m3-nom{grid-row:12}
  .sb-c-m3-focale{grid-row:13}
  .sb-s-expertise-metiers p.sb-c-m3-texte{grid-row:14}
  .sb-c-m3-livrables{grid-row:15}
  .sb-s-expertise-metiers h3.sb-c-m4-nom{grid-row:16}
  .sb-c-m4-focale{grid-row:17}
  .sb-s-expertise-metiers p.sb-c-m4-texte{grid-row:18}
  .sb-c-m4-livrables{grid-row:19}
  .sb-s-expertise-metiers h3.sb-c-m5-nom{grid-row:20}
  .sb-c-m5-focale{grid-row:21}
  .sb-s-expertise-metiers p.sb-c-m5-texte{grid-row:22}
  .sb-c-m5-livrables{grid-row:23}
  .sb-s-expertise-metiers h3.sb-c-m6-nom{grid-row:24}
  .sb-c-m6-focale{grid-row:25}
  .sb-s-expertise-metiers p.sb-c-m6-texte{grid-row:26}
  .sb-c-m6-livrables{grid-row:27}
  .sb-s-expertise-temps{grid-template-columns:1fr 1fr}
  .sb-s-expertise-temps h3.sb-c-t1-nom,
  .sb-s-expertise-temps p.sb-c-t1-texte,
  .sb-s-expertise-temps h3.sb-c-t3-nom,
  .sb-s-expertise-temps p.sb-c-t3-texte,
  .sb-s-expertise-temps h3.sb-c-t5-nom,
  .sb-s-expertise-temps p.sb-c-t5-texte{grid-column:1}
  .sb-s-expertise-temps h3.sb-c-t2-nom,
  .sb-s-expertise-temps p.sb-c-t2-texte,
  .sb-s-expertise-temps h3.sb-c-t4-nom,
  .sb-s-expertise-temps p.sb-c-t4-texte{grid-column:2}
  .sb-s-expertise-temps h3.sb-c-t3-nom,
  .sb-s-expertise-temps h3.sb-c-t4-nom{grid-row:5}
  .sb-s-expertise-temps p.sb-c-t3-texte,
  .sb-s-expertise-temps p.sb-c-t4-texte{grid-row:6}
  .sb-s-expertise-temps h3.sb-c-t5-nom{grid-row:7}
  .sb-s-expertise-temps p.sb-c-t5-texte{grid-row:8}
}

/* ── L'ESPACE ENTRE LES CARTES, EN UN SEUL ENDROIT ───────────────────────────
   Une carte est faite de champs frères qui partagent une plaque ; ce qui la
   sépare de la suivante est donc la marge basse de son DERNIER champ. Posée là,
   et avec la même prise que la règle qui dessine la plaque : un `margin-top` sur
   le premier champ se faisait battre en spécificité et restait inerte, sans que
   rien ne le signale. Mesuré le 16.09.2026 : zéro pixel entre les six cartes de
   la page expertise, alors que la feuille en demandait vingt-quatre. */
.sb-s-expertise-metiers p[class*="-livrables"],
.sb-s-accueil-planche p[class*="sb-c-metier-"][class*="-texte"],
.sb-s-realisations-carnets a[class*="-lien"],
.sb-s-realisations-carnets div[class*="-lien"],
.sb-s-studio-collaborations a[class*="-lien"],
.sb-s-studio-collaborations div[class*="-lien"],
.sb-s-accueil-carnets p[class*="sb-c-carnet-"][class*="-metiers"],
.sb-s-offres-formules p[class*="-inclus"],
.sb-s-expertise-temps h3+p,.sb-s-accueil-methode p[class*="sb-c-temps-"]{
  margin-block:0 var(--pile)}
/* LA MARGE DE PILE N'EXISTE QUE QUAND LES CARTES SONT EMPILÉES.
   Côte à côte, elle rabote la plaque de 26 px — et seulement celles qui ont
   une carte après elles, d'où des bas de plaque à deux hauteurs différentes.
   Mesuré le 16.09.2026 sur « La mise au point » : 2914 contre 2940. */
.sb-s-expertise-temps h3+p,.sb-s-accueil-methode p[class*="sb-c-temps-"],
.sb-s-offres-formules p[class*="-inclus"]{margin-block:0}

/* ── L'EN-TÊTE ET LE PIED ────────────────────────────────────────────────────
   Ils ne se compilent pas : ce sont les parties du thème, dessinées une fois.
   Le prototype ne les porte pas non plus — un en-tête recopié dans sept pages
   diverge dès la première correction. Les règles vivent ici pour que le thème
   et le prototype gardent une seule feuille. */
/* LA BARRE TIENT TOUTE LA LARGEUR DE LA FENÊTRE, et pas la colonne de
   contenu : le monogramme touche le bord gauche, le bouton touche le bord
   droit. Avec la gouttière du contenu, le bouton s'arrêtait à 1180 px et
   flottait au milieu de l'espace libre sur un grand écran. */
/* PAS DE `backdrop-filter` ICI, ET C'EST UNE RÈGLE, PAS UN GOÛT. Un élément
   qui porte un filtre d'arrière-plan devient le bloc conteneur de ses
   descendants en `position: fixed` : le tiroir de menu de WordPress, qui se veut
   plein écran, se retrouvait enfermé dans la barre — 390 × 57 px, mesuré, avec
   ses liens dehors et invisibles. La barre étant opaque, le flou ne se voyait
   de toute façon pas. */
/* 🔴 LE COLLAGE APPARTIENT AU PARENT, PAS À LA BARRE.
   `position:sticky` ne fait sortir un élément de la boîte de SON PARENT :
   `.sb-entete` vit dans le `<header>` que WordPress pose autour de la part de
   gabarit, et ce `<header>` ne fait que la hauteur de la barre. Elle se
   décollait donc au premier pixel de défilement, alors que la règle avait l'air
   juste. Relevé par Yan le 17.09.2026.

   C'est le `<header>` qui colle, et la barre garde son fond et son filet.
   Le prototype n'a pas ce conteneur : la règle vise les deux formes. */
header.wp-block-template-part,
body>header{position:sticky;top:0;z-index:30}
.sb-entete{background:var(--encre-profonde);position:sticky;top:0;z-index:30;
  padding:14px clamp(16px,2.4vw,30px);border-bottom:1px solid var(--filet-encre)}
/* Le bouton de l'en-tête N'EST PAS un bouton de page. La règle qui donne toute
   la largeur aux conteneurs de bouton — celle qui empêche WordPress de les
   recentrer dans le corps de la page — l'étirait à 877 px, et le bouton
   flottait donc au milieu de la barre. Mesuré le 16.09.2026. Ici, le conteneur
   reprend la taille de son libellé et se colle à droite. */
/* Le sélecteur porte la barre ET la balise, pour passer devant
   `div[class*="-cta"]`, qui est plus spécifique qu'une classe seule et donnait
   au conteneur 1540 px de large, débordant la fenêtre de 633 px. Mesuré. */
.sb-entete div[class*="-cta"]{width:auto;justify-content:flex-end;
  margin-inline-start:26px;flex:none}
/* Une seule ligne tant qu'elle tient : le bouton passait sous le nom du site,
   parce que la barre acceptait le retour à la ligne dès le premier manque de
   place. Sous 720 px, le retour redevient le bon comportement. */
.sb-entete-barre{align-items:center;gap:14px 26px;flex-wrap:nowrap}
/* LE MENU EST DU TEXTE SUR LA BARRE, PAS UNE BOÎTE POSÉE DESSUS.
   Le bloc portait `backgroundColor` — le seul remède connu au tiroir blanc du
   téléphone — et peignait donc aussi une plaque sombre autour des liens du
   bureau. La couleur part du bloc, et c'est la feuille qui traite le tiroir :
   elle sait viser l'état OUVERT seul, ce que l'attribut ne sait pas faire. */
.sb-entete .sb-entete-nav{background:transparent;margin-inline-start:auto;flex:0 1 auto}
.sb-entete .wp-block-navigation__responsive-container:not(.is-menu-open){background:transparent}
.sb-entete-nav ul{flex-wrap:nowrap}

/* LA PAGE OÙ L'ON EST, DANS LE MENU. Demandé par Yan le 17.09.2026.
   `aria-current="page"` est posé par `js/site.js`, pas par WordPress : les
   entrées du menu sont des liens CUSTOM, et le cœur ne leur pose
   `current-menu-item` que pour des liens de type contenu. Les déclarer par
   identifiant de page les lierait à UN semis, et le menu se briserait sur une
   base recréée.

   Un filet, pas une couleur de fond : la barre est déjà sombre et le bouton
   d'appel y porte le seul aplat. Deux aplats dans la même barre, c'est deux
   choses qui se disputent le regard. */
.sb-entete-nav a[aria-current="page"]{color:var(--ivoire);position:relative}
.sb-entete-nav a[aria-current="page"]::after{content:"";position:absolute;
  left:0;right:0;bottom:-6px;height:1px;background:var(--accent-encre)}

/* LE MONOGRAMME, et le nom qui ne se coupe plus.
   Le titre de site de WordPress se repliait sur deux lignes dès que la barre
   manquait de place : « Brand / Studio ». Un nom de marque coupé en deux n'est
   plus un nom. Il est donc écrit ici, avec le monogramme de la maison, et il
   refuse le retour à la ligne. */
/* LE BLOC `wp:shortcode` REND UN PARAGRAPHE AUTOUR. Il porterait les marges de
   paragraphe du thème et casserait l'alignement de la barre : on le rend
   transparent, sans quoi le lockup descendrait de quelques pixels. */
.sb-entete-barre>p{margin:0;display:contents}
.sb-lockup{display:inline-flex;align-items:center;gap:13px;text-decoration:none;flex:none}
/* LE SIGNE, VERSION 2 (Yan, 18.09.2026) : un croissant de lune de côté,
   plein, à gauche de l'hexagone. Il déborde de 156 unités : le viewBox passe
   à -156 0 1528 1188, et la boîte s'élargit d'autant pour que l'hexagone
   garde exactement sa taille (48 px de haut). */
.sb-monogramme{width:calc(48px * 1528 / 1372);height:48px;flex:none;color:var(--ivoire)}
/* LE VERROU : « by Yan Haltey Brands » PREND EXACTEMENT LA LARGEUR DE SIDELUNE.
   La colonne de la grille se dimensionne sur le plus large de ses deux enfants.
   L'endossement est réglé assez petit pour rester le plus étroit des deux : la
   colonne est donc celle du nom, et `text-align-last: justify` répartit
   l'espace restant entre les mots jusqu'au bord. Aucun nombre magique, aucun
   JavaScript — si le nom change, la ligne du dessous se réajuste seule.
   Le seul cas qui casserait ce verrou est un endossement plus LARGE que le
   nom : il deviendrait alors la colonne, et rien ne se justifierait. */
.sb-lockup-nom{display:grid;grid-template-columns:max-content;line-height:1.12}
/* LES DEUX TAILLES SONT UN COUPLE, PAS DEUX RÉGLAGES. Mesuré : « Sidelune » à
   1,9 rem fait 122 px, l'endossement en chasse fixe à 0,6 rem en fait 115. Sept
   pixels à répartir sur trois espaces — la justification se voit sans disloquer.
   Le premier accord tenait la largeur mais pas la lisibilité : 0,46 rem fait
   7,4 px de haut, et Yan ne parvenait plus à lire la ligne. Toucher l'une des
   deux valeurs sans l'autre casse le verrou. */
.sb-lockup-nom b{font-weight:500;font-size:1.9rem;letter-spacing:-.012em;
  color:var(--ivoire);white-space:nowrap}
.sb-lockup-nom span{width:100%;text-align:left;
  font-family:var(--mono);font-size:.6rem;margin-top:5px;
  text-transform:uppercase;color:var(--ivoire-doux)}
.sb-entete .wp-block-site-title{display:none}

@media (max-width:860px){
  .sb-entete-barre{flex-wrap:wrap}
  .sb-entete-nav{order:3;width:100%;margin-inline-start:0}
  .sb-entete-nav ul{flex-wrap:wrap;gap:6px 18px}
  .sb-lockup-nom span{display:none}
}
.sb-entete-nom a,.sb-entete-nom{font-family:var(--manrope);font-weight:500;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--ivoire);text-decoration:none}
.sb-entete-nav a{color:var(--ivoire-doux);text-decoration:none;font-size:1.02rem}
@media (min-width:641px){
  .sb-entete-nav a{font-size:.98rem;white-space:nowrap}
}
.sb-entete-nav a:hover,.sb-entete-nav .current-menu-item a{color:var(--ivoire)}
.sb-entete-cta .wp-block-button__link{padding:10px 18px;font-size:.92rem}

.sb-pied{background:var(--encre-profonde);color:var(--ivoire-doux);
  padding:clamp(48px,6vw,72px) var(--gouttiere) 36px;display:grid;gap:10px}
.sb-pied-signature{color:var(--ivoire-doux);max-width:46ch;font-size:1rem}

/* LA TAGLINE AU PIED, SIGNATURE DE FIN DE CHAQUE PAGE (18.09.2026). En Forum,
   comme les titres : c'est une phrase de marque, la dernière chose lue avant
   de partir. La signature des quatre adjectifs la suit, plus petite. */
.sb-pied .sb-tagline{margin:0 0 14px;font-family:var(--forum);font-weight:400;
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.005em;color:var(--ivoire)}
.sb-pied-maison{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivoire-sourd);margin-top:6px}
.sb-pied-legal{gap:8px 22px;margin:0}
/* SUR TÉLÉPHONE, LA LIGNE LÉGALE DEVIENT UNE COLONNE. À quatre libellés dont
   « Données personnelles », elle se repliait en laissant « Cookies » seul sur
   une ligne — un orphelin qui se lit comme une catégorie à part. Relevé par Yan
   le 17.09.2026. Empilée, elle a le même rythme que les deux menus du pied,
   juste au-dessus, et la cible du doigt fait toute la largeur.
   ET ELLE S'ALIGNE À GAUCHE, comme eux. Empilée, elle restait poussée à droite
   par le space-between de la ligne du bas, et chaque libellé centré par
   l'align-items:center que WordPress donne à toute mise en page flex : une
   colonne flottante, sous deux menus justifiés à gauche. Relevé par Yan le
   18.09.2026. */
@media (max-width:640px){
  .sb-pied .sb-pied-bas{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .sb-pied .sb-pied-legal{flex-direction:column;gap:14px;align-items:flex-start}
  .sb-pied-legal p{font-size:.92rem}
}
.sb-pied-legal p{margin:0;font-size:.88rem}
.sb-pied-legal a{color:var(--ivoire);text-decoration:none}
.sb-pied-legal a:hover{color:var(--accent-encre)}
/* Le copyright est un LIEN depuis le 18.09.2026, vers la maison. Il hérite
   donc de la couleur du paragraphe plutôt que du bleu des liens, et se
   souligne au survol : dans un pied, un lien qui crie est un lien qui vole
   l'attention de ceux qui comptent. */
.sb-pied-copyright{font-size:.82rem;color:var(--ivoire-doux)}
.sb-pied-copyright a{color:inherit;text-decoration:none}
.sb-pied-copyright a:hover{color:var(--ivoire);text-decoration:underline;
  text-underline-offset:3px}

/* ── LES LOGOS DES CARNETS ───────────────────────────────────────────────────
   Monochromes, et par le CSS : un logo est du DÉCOR, pas un contenu que le
   client remplace. `brightness(0) invert(1)` aplatit n'importe quelle couleur
   d'origine en ivoire tout en gardant la transparence — les sept fichiers
   viennent de sept chartes différentes, et aucun n'a eu à être retouché.
   Le nom reste écrit sous le logo : il est le champ éditable, et il se lit
   quand les images sont coupées. */
.sb-s-realisations-carnets h3::before,
.sb-s-studio-collaborations h3::before{
  content:"";display:block;height:34px;margin-bottom:14px;
  background-position:left center;background-repeat:no-repeat;background-size:contain;
  filter:brightness(0) invert(1);opacity:.88}
.sb-s-realisations-carnets h3.sb-c-c1-nom::before{background-image:url('../assets/logos/kimblucas.svg')}
.sb-s-realisations-carnets h3.sb-c-c2-nom::before{background-image:url('../assets/logos/mentalsofa.png')}
.sb-s-realisations-carnets h3.sb-c-c3-nom::before{background-image:url('../assets/logos/tireapart.svg')}
.sb-s-realisations-carnets h3.sb-c-c4-nom::before{background-image:url('../assets/logos/realisons.svg')}
.sb-s-realisations-carnets h3.sb-c-c5-nom::before{background-image:url('../assets/logos/blackformance.svg')}
.sb-s-realisations-carnets h3.sb-c-c6-nom::before{background-image:url('../assets/logos/clairvidence.svg')}
.sb-s-realisations-carnets h3.sb-c-c7-nom::before{background-image:url('../assets/logos/neequist-lockup.svg')}
.sb-s-realisations-carnets h3.sb-c-c8-nom::before{background-image:url('../assets/logos/yanhaltey.svg')}
/* CHAQUE LOGO A SA HAUTEUR, et c'est un travail de typographe plus que de
   développeur : sept fichiers venus de sept chartes n'ont ni le même rapport de
   forme ni la même graisse. Une hauteur unique donnerait un mur de logos où
   Clairvidence écraserait Mental Sofa. Les valeurs ci-dessous égalisent le POIDS
   OPTIQUE, pas la hauteur de boîte. */
.sb-s-realisations-carnets h3.sb-c-c1-nom::before{height:26px;max-width:180px} /* Kim B Lucas */
.sb-s-realisations-carnets h3.sb-c-c2-nom::before{height:40px;max-width:90px} /* Mental Sofa · symbole */
.sb-s-realisations-carnets h3.sb-c-c3-nom::before{height:38px;max-width:150px} /* Tiré à Part · signature */
.sb-s-realisations-carnets h3.sb-c-c4-nom::before{height:44px;max-width:120px} /* Réalisons · empilé */
.sb-s-realisations-carnets h3.sb-c-c5-nom::before{height:24px;max-width:180px} /* Blackformance · large */
.sb-s-realisations-carnets h3.sb-c-c6-nom::before{height:22px;max-width:210px} /* Clairvidence · très large */
.sb-s-realisations-carnets h3.sb-c-c7-nom::before{height:30px;max-width:150px} /* Neequist · symbole et nom */
.sb-s-realisations-carnets h3.sb-c-c8-nom::before{height:30px;max-width:230px} /* Yan Haltey Brands */

/* LE NOM REVIENT SOUS LE SIGNE, ET C'EST UNE CORRECTION.
   On l'avait masqué en se disant « le logo dit déjà le nom ». C'était faux pour
   ces deux-là : les fichiers de Younifeel et de Neequist sont des SYMBOLES, pas
   des logotypes — aucun ne porte une lettre. Résultat : un rond turquoise et un
   signal, sans un mot pour dire qui c'est. Yan, le 16.09.2026 : « on n'arrive
   pas à le lire ». Le signe reste, plus petit, et le nom se lit dessous. */
.sb-s-studio-collaborations h3{font-family:var(--manrope);font-weight:500;
  font-size:1.05rem;line-height:1.2;letter-spacing:0;color:var(--ivoire)}
.sb-s-realisations-carnets h3{font-size:0;line-height:0;padding-bottom:0}
.sb-s-realisations-carnets h3::before{margin-bottom:4px}
.sb-s-studio-collaborations h3::before{margin-bottom:14px}
/* SAUF BLACKFORMANCE, DONT LE FICHIER EST UN LOGOTYPE. Les trois voisins n'ont
   pas la même nature de logo : deux symboles muets, un logotype qui porte déjà
   son nom en lettres. Écrire le nom sous celui-là le répétait à trois
   centimètres d'intervalle. Le sélecteur porte la section ET la balise — sans
   quoi la règle générique ci-dessus le rallume. */
.sb-s-studio-collaborations h3.sb-c-co1-nom{font-size:0;line-height:0}
.sb-s-studio-collaborations h3.sb-c-co1-nom::before{margin-bottom:4px}

/* ── LA PAGE LE STUDIO ──────────────────────────────────────────────────────
   Le récit se lit en une colonne, les studios voisins se rangent comme les
   carnets : quatre champs frères qui partagent une plaque. */
.sb-s-studio-recit{background:var(--encre);gap:0}
.sb-c-recit-titre{margin-block:var(--saut-sur) var(--saut-titre)}
.sb-c-recit-1,.sb-c-recit-2,.sb-c-recit-3,.sb-c-recit-4,.sb-c-recit-5{
  --mesure:68ch;font-size:1.12rem;line-height:1.66;margin-block:0 18px;color:var(--ivoire-doux)}
.sb-c-recit-5{color:var(--ivoire);font-family:var(--forum);font-size:1.5rem;line-height:1.3;
  margin-top:14px;padding-top:26px;border-top:1px solid var(--filet-encre)}

.sb-s-studio-collaborations{background:var(--encre-profonde);
  grid-template-columns:repeat(3,1fr);column-gap:18px;row-gap:0;align-content:start}
.sb-c-collab-surtitre{grid-column:1/-1;grid-row:1}
.sb-c-collab-titre{grid-column:1/-1;grid-row:2;margin-block:var(--saut-sur) var(--saut-titre)}
.sb-c-collab-chapo{grid-column:1/-1;grid-row:3;--mesure:62ch;
  margin-block:16px clamp(30px,4vw,52px);font-size:1.1rem}
.sb-s-studio-collaborations h3{margin-block:0;font-family:var(--forum);font-weight:400;
  padding:24px 20px 6px;background:var(--encre-plaque);border:1px solid var(--filet-encre);
  border-bottom:0;border-radius:var(--r) var(--r) 0 0}
.sb-s-studio-collaborations p[class*="-role"]{margin-block:0;padding:8px 20px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-encre);background:var(--encre-plaque);border-inline:1px solid var(--filet-encre)}
.sb-s-studio-collaborations p[class*="-texte"]{margin-block:0;padding:0 20px 14px;
  font-size:.96rem;background:var(--encre-plaque);border-inline:1px solid var(--filet-encre)}
.sb-s-studio-collaborations div[class*="-lien"],
.sb-s-studio-collaborations a[class*="-lien"]{margin-block:0;padding:0 20px 24px;
  background:var(--encre-plaque);border:1px solid var(--filet-encre);border-top:0;
  border-radius:0 0 var(--r) var(--r)}
.sb-s-studio-collaborations a[class*="-lien"],
.sb-s-studio-collaborations [class*="-lien"] a{background:transparent;border:0;box-shadow:none;
  padding:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--accent-encre);text-decoration:underline;text-underline-offset:4px}
.sb-s-studio-ciel{background:var(--encre);gap:16px}
.sb-c-atciel-texte{--mesure:62ch;font-size:1.1rem}
.sb-s-studio-echange{background:var(--papier);color:var(--texte);gap:0}
.sb-s-studio-echange [class*="-texte"]{color:var(--texte-doux);font-size:1.15rem;--mesure:56ch}
.sb-s-studio-echange h2{padding-inline-end:max(0px,calc(100% - 20ch))}
.sb-s-studio-echange [class*="-reassurance"]{color:var(--texte-doux)}
.sb-s-studio-ouverture{gap:0;background:radial-gradient(120% 100% at 26% 88%,rgba(27,79,216,.30),transparent 68%),
             radial-gradient(65% 55% at 80% 18%,rgba(240,96,58,.11),transparent 72%),var(--encre-profonde);
  gap:20px;align-content:start;min-block-size:var(--heros-hauteur);
  padding-block:var(--heros-haut) var(--heros-bas)}
.sb-s-studio-ouverture h1{font-family:var(--forum);font-weight:400;line-height:1.02;
  letter-spacing:-.015em;font-size:clamp(2.6rem,6.4vw,5rem);
  padding-inline-end:max(0px,calc(100% - 18ch));text-wrap:balance}
.sb-s-studio-ouverture [class*="-chapo"]{font-size:1.28rem;line-height:1.5;--mesure:58ch}

/* ── L'IMMERSION ─────────────────────────────────────────────────────────────
   Le grain argentique posé sur les fonds d'encre : il donne de la matière là où
   un aplat sonnerait numérique. 7 % d'opacité, relevé sur la charte de la
   maison. `pointer-events:none` pour que rien ne se mette entre le texte et la
   souris. */
.sb-s-accueil-miseaupoint::after,[class*="-ouverture"]::after,
.sb-s-accueil-manifeste::after,.sb-s-accueil-planche::after,
.sb-s-expertise-metiers::after,.sb-s-realisations-carnets::after,
.sb-s-studio-collaborations::after,.sb-s-studio-recit::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
[class*="-ouverture"]>*,.sb-s-accueil-manifeste>*,.sb-s-accueil-planche>*,
.sb-s-expertise-metiers>*,.sb-s-realisations-carnets>*,
.sb-s-studio-collaborations>*,.sb-s-studio-recit>*{position:relative;z-index:1}
[class*="-ouverture"]{overflow:hidden}
[class*="-ouverture"] .ciel,.sb-s-accueil-miseaupoint .ciel{
  position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* LE VOILE DE LISIBILITÉ. Le ciel passe parfois du magenta vif derrière le
   titre — sur la nébuleuse, mesuré à l'œil le 16.09.2026, l'ivoire n'y tient
   plus. Un dégradé sombre, dense du côté du texte et nul de l'autre, rend le
   contraste sans rien cacher de l'effet. Il se place ENTRE le canvas et le
   contenu : z-index 1 contre 0 pour le ciel, 2 pour les champs. */
[class*="-ouverture"]::before,.sb-s-accueil-miseaupoint::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(94deg,rgba(5,8,15,.86) 0%,rgba(5,8,15,.62) 38%,
             rgba(5,8,15,.12) 66%,transparent 84%)}
[class*="-ouverture"]>*,.sb-s-accueil-miseaupoint>*{z-index:2}

@media (max-width:980px){
  .sb-s-studio-collaborations{grid-template-columns:1fr}
  .sb-s-studio-collaborations h3[class*="sb-c-"],
  .sb-s-studio-collaborations p[class*="sb-c-"],
  .sb-s-studio-collaborations a[class*="-lien"],
  .sb-s-studio-collaborations div[class*="-lien"]{grid-column:1}
  /* LE LIEN EST UN `div` DANS WORDPRESS (le bloc bouton), UN `a` DANS LE
     PROTOTYPE. Viser `a.sb-c-co2-lien` laissait les liens de WordPress sur
     le rang de la première carte : sur iPhone, Blackformance portait
     « neequist.com », Younifeel n'avait plus de lien ni de bas de plaque, et
     les cartes se touchaient (Yan, 18.09.2026). Le sélecteur vise la classe. */
  .sb-s-studio-collaborations h3.sb-c-co2-nom{grid-row:8}
  .sb-s-studio-collaborations p.sb-c-co2-role{grid-row:9}
  .sb-s-studio-collaborations p.sb-c-co2-texte{grid-row:10}
  .sb-s-studio-collaborations .sb-c-co2-lien{grid-row:11}
  .sb-s-studio-collaborations h3.sb-c-co3-nom{grid-row:12}
  .sb-s-studio-collaborations p.sb-c-co3-role{grid-row:13}
  .sb-s-studio-collaborations p.sb-c-co3-texte{grid-row:14}
  .sb-s-studio-collaborations .sb-c-co3-lien{grid-row:15}
  /* L'ESPACE ENTRE LES CARTES, ICI AUSSI APRÈS LA PLAQUE. La règle qui dessine
     la plaque du lien remet `margin-block` à zéro, et elle est écrite après
     la marge de pile : les trois cartes se touchaient (Yan, Safari, 18.09.2026). */
  .sb-s-studio-collaborations div.sb-c-co1-lien,.sb-s-studio-collaborations a.sb-c-co1-lien,
  .sb-s-studio-collaborations div.sb-c-co2-lien,.sb-s-studio-collaborations a.sb-c-co2-lien{
    margin-block:0 var(--pile)}
  .sb-c-co4-nom{grid-row:16}
  .sb-c-co4-role{grid-row:17}
  .sb-c-co4-texte{grid-row:18}
  .sb-c-co4-lien{grid-row:19}
}

/* ── LA SUPERPOSITION DES SECTIONS ───────────────────────────────────────────
   L'ouverture reste en place et les sections lui passent dessus, bord arrondi
   et ombre portée : on voit une page se construire par couches plutôt que
   défiler d'un bloc. Deux conditions pour que ça tienne :
     · l'ouverture est `sticky` et posée AU FOND (z-index 0) ;
     · chaque section suivante porte un fond OPAQUE, sinon la précédente
       transparaît et l'effet devient une bouillie.
   Aucune animation ici : c'est de la mise en page, donc ça marche aussi quand
   le système refuse le mouvement. */
/* Le sélecteur ne suppose AUCUN emboîtement : le prototype pose ses sections
   dans `<main>`, WordPress les enferme dans `div.entry-content`. Une règle en
   `main > …` marchait donc d'un seul côté — et c'est exactement le genre
   d'écart que cette feuille existe pour éviter. Deux sections voisines
   suffisent à décrire la pile. */
.sb-s-accueil-miseaupoint,[class*="-ouverture"]{position:sticky;top:0;z-index:0}
/* UN SEUL MOMENT PAR PAGE. Répétée à chaque section, la superposition devient
   un tic : l'œil cesse de la voir au bout de trois, et ce qui reste est une
   page qui sautille. Elle ne joue donc qu'une fois, sur la section qui passe
   par-dessus l'ouverture — là où elle dit quelque chose : la page se construit
   par-dessus le ciel. Les suivantes s'enchaînent à plat.
   Les deux sélecteurs valent pour les deux formes d'ouverture : l'accueil a la
   sienne, les pages intérieures ont la leur. */
.sb-s-accueil-miseaupoint+[class*="sb-s-"],
[class*="-ouverture"]+[class*="sb-s-"]{
  position:relative;z-index:1;margin-top:-34px;
  border-radius:34px 34px 0 0;
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.65)}

/* ── POUR QUI · quatre portes, courtes ──────────────────────────────────────
   Pas de plaque ici : quatre colonnes séparées par un filet, pour que la
   section se lise d'un coup d'œil au lieu de se lire carte par carte. */
.sb-s-accueil-pourqui{background:var(--encre);
  /* 22 px entre quatre colonnes, c'était trop serré : les paragraphes se
     touchaient presque et se lisaient comme un seul bloc. Yan, le 17.09.2026. */
  grid-template-columns:repeat(4,1fr);column-gap:clamp(28px,3.4vw,48px);
  row-gap:0;align-content:start}
.sb-c-pourqui-surtitre{grid-column:1/-1;grid-row:1}
.sb-c-pourqui-titre{grid-column:1/-1;grid-row:2;margin-block:var(--saut-sur) var(--saut-titre)}
.sb-s-accueil-pourqui h3{grid-row:3;margin-block:0;font-family:var(--manrope);
  font-weight:500;font-size:1.22rem;letter-spacing:-.01em;padding:18px 0 6px;
  border-top:1px solid var(--filet-encre-fort)}
.sb-s-accueil-pourqui h3+p{grid-row:4;margin-block:0;font-size:.96rem;
  color:var(--ivoire-doux);padding-bottom:6px}
.sb-c-q1-nom,.sb-c-q1-texte{grid-column:1}
.sb-c-q2-nom,.sb-c-q2-texte{grid-column:2}
.sb-c-q3-nom,.sb-c-q3-texte{grid-column:3}
.sb-c-q4-nom,.sb-c-q4-texte{grid-column:4}

/* Les carnets de l'accueil n'ont plus de description : logo, métiers, c'est tout. */
.sb-s-accueil-carnets h3[class*="sb-c-carnet-"]{font-size:0;line-height:0;
  padding-bottom:0;background:var(--papier-surface);border-bottom:0}
.sb-s-accueil-carnets h3[class*="sb-c-carnet-"]::before{
  content:"";display:block;height:34px;margin-bottom:6px;
  background-position:left center;background-repeat:no-repeat;background-size:contain}
.sb-c-carnet-1-metiers,.sb-c-carnet-2-metiers,.sb-c-carnet-3-metiers{
  border-bottom:1px solid var(--filet-papier);border-radius:0 0 var(--r) var(--r);
  padding-bottom:22px}
.sb-c-carnets-lien{grid-column:1/-1;grid-row:7;margin-top:26px}
/* Un lien sans place assignée se pose dans la première case libre : celui de la
   planche remontait AVANT les six vues qu'il annonce. Dans une grille où tout
   est placé à la main, ce qui reste implicite atterrit n'importe où. */
.sb-c-planche-lien{grid-column:1/-1;grid-row:10;margin-top:28px}

/* Neequist rejoint les collaborations. */

@media (max-width:860px){
  .sb-s-accueil-pourqui{grid-template-columns:1fr 1fr}
  .sb-s-accueil-pourqui h3.sb-c-q1-nom,
  .sb-s-accueil-pourqui p.sb-c-q1-texte,
  .sb-s-accueil-pourqui h3.sb-c-q3-nom,
  .sb-s-accueil-pourqui p.sb-c-q3-texte{grid-column:1}
  .sb-s-accueil-pourqui h3.sb-c-q2-nom,
  .sb-s-accueil-pourqui p.sb-c-q2-texte,
  .sb-s-accueil-pourqui h3.sb-c-q4-nom,
  .sb-s-accueil-pourqui p.sb-c-q4-texte{grid-column:2}
  .sb-s-accueil-pourqui h3.sb-c-q3-nom,
  .sb-s-accueil-pourqui h3.sb-c-q4-nom{grid-row:5}
  /* La suite et son bouton descendent : les situations empilées réclament les
     rangées 5 et 6, et deux champs dans la même case se superposent. */
  .sb-s-accueil-pourqui p.sb-c-pourqui-suite{grid-row:11}
  .sb-s-accueil-pourqui div.sb-c-pourqui-lien,
  .sb-s-accueil-pourqui a.sb-c-pourqui-lien{grid-row:12}
  .sb-s-accueil-pourqui p.sb-c-q3-texte,
  .sb-s-accueil-pourqui p.sb-c-q4-texte{grid-row:6}
  .sb-s-accueil-miseaupoint+[class*="sb-s-"],
  [class*="-ouverture"]+[class*="sb-s-"]{margin-top:-22px;border-radius:24px 24px 0 0}
}
@media (max-width:560px){
  .sb-s-accueil-pourqui{grid-template-columns:1fr}
  .sb-s-accueil-pourqui h3[class*="sb-c-"],
  .sb-s-accueil-pourqui p[class*="sb-c-"]{grid-column:1}
  .sb-s-accueil-pourqui h3.sb-c-q2-nom{grid-row:5}
  .sb-s-accueil-pourqui p.sb-c-q2-texte{grid-row:6}
  .sb-s-accueil-pourqui h3.sb-c-q3-nom{grid-row:7}
  .sb-s-accueil-pourqui p.sb-c-q3-texte{grid-row:8}
  .sb-s-accueil-pourqui h3.sb-c-q4-nom{grid-row:9}
  .sb-s-accueil-pourqui p.sb-c-q4-texte{grid-row:10}
}

/* ── LES NEUF DOMAINES ───────────────────────────────────────────────────────
   Trois colonnes, trois rangs sur l'accueil ; deux colonnes sur la page
   expertise, où chaque carte porte un champ de plus. Les placements sont
   écrits un par un : dans une grille où tout est placé à la main, ce qui reste
   implicite atterrit n'importe où. */
.sb-s-accueil-planche h3.sb-c-metier-1-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect width='240' height='180' fill='%2305080F'/%3E%3Cg stroke='rgba(242,246,251,.22)'%3E%3Cline x1='120' y1='24' x2='120' y2='156'/%3E%3Cline x1='34' y1='90' x2='206' y2='90'/%3E%3C/g%3E%3Cg fill='rgba(242,246,251,.45)'%3E%3Ccircle cx='70' cy='124' r='5'/%3E%3Ccircle cx='92' cy='108' r='4'/%3E%3Ccircle cx='150' cy='126' r='4.5'/%3E%3Ccircle cx='104' cy='66' r='4'/%3E%3C/g%3E%3Ccircle cx='170' cy='56' r='9' fill='%23FF4B1F'/%3E%3Ccircle cx='170' cy='56' r='20' fill='none' stroke='rgba(255,75,31,.45)' stroke-dasharray='3 4'/%3E%3C/svg%3E")}
.sb-s-accueil-planche h3.sb-c-metier-2-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect width='240' height='180' fill='%2305080F'/%3E%3Crect x='34' y='108' width='52' height='44' rx='4' fill='%23131C2E' stroke='rgba(242,246,251,.28)'/%3E%3Crect x='94' y='74' width='52' height='78' rx='4' fill='%23102B63' stroke='%23FF4B1F'/%3E%3Crect x='154' y='48' width='52' height='104' rx='4' fill='%23131C2E' stroke='rgba(242,246,251,.28)'/%3E%3Ccircle cx='120' cy='60' r='6' fill='%23FF4B1F'/%3E%3Cg stroke='rgba(242,246,251,.30)'%3E%3Cline x1='42' y1='124' x2='72' y2='124'/%3E%3Cline x1='42' y1='134' x2='64' y2='134'/%3E%3Cline x1='102' y1='96' x2='132' y2='96'/%3E%3Cline x1='102' y1='106' x2='126' y2='106'/%3E%3Cline x1='162' y1='70' x2='192' y2='70'/%3E%3Cline x1='162' y1='80' x2='186' y2='80'/%3E%3C/g%3E%3C/svg%3E")}
.sb-s-accueil-planche h3.sb-c-metier-3-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect width='240' height='180' fill='%2305080F'/%3E%3Cg stroke='rgba(242,246,251,.1)'%3E%3Cline x1='80' y1='0' x2='80' y2='180'/%3E%3Cline x1='160' y1='0' x2='160' y2='180'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3C/g%3E%3Cpolygon fill='%23F2F6FB' points='126.5,79.2 126.5,88 115.5,88 115.5,79.2 104.5,71.5 104.5,82.5 104.5,88 104.5,89.1 104.5,99 104.5,104.5 115.5,104.5 115.5,99 126.5,99 126.5,104.5 137.5,104.5 137.5,99 137.5,89.1 137.5,88 137.5,82.5 137.5,71.5'/%3E%3Cg stroke='%23FF7A45'%3E%3Cpath d='M95 68v-6M95 68h-6M147 68v-6M147 68h6M95 110v6M95 110h-6M147 110v6M147 110h6'/%3E%3C/g%3E%3C/svg%3E")}
.sb-s-accueil-planche h3.sb-c-metier-4-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect width='240' height='180' fill='%2305080F'/%3E%3Ctext x='26' y='92' font-family='Georgia,serif' font-size='68' fill='%23FF7A45'%3E%C2%AB%3C/text%3E%3Ctext x='72' y='84' font-family='Georgia,serif' font-size='22' fill='%23F2F6FB'%3EDu flou%3C/text%3E%3Ctext x='72' y='110' font-family='Helvetica,Arial' font-size='22' fill='%23F2F6FB'%3E%C3%A0 l%27%C3%A9vidence.%3C/text%3E%3Cline x1='72' y1='124' x2='196' y2='124' stroke='%23FF4B1F'/%3E%3C/svg%3E")}
.sb-s-accueil-planche h3.sb-c-metier-5-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect width='240' height='180' fill='%2305080F'/%3E%3Crect x='30' y='28' width='88' height='124' fill='%23131C2E' stroke='rgba(242,246,251,.25)'/%3E%3Crect x='122' y='28' width='88' height='124' fill='%23131C2E' stroke='rgba(242,246,251,.25)'/%3E%3Cg stroke='rgba(242,246,251,.35)'%3E%3Cline x1='40' y1='72' x2='108' y2='72'/%3E%3Cline x1='40' y1='82' x2='102' y2='82'/%3E%3Cline x1='40' y1='92' x2='108' y2='92'/%3E%3C/g%3E%3Crect x='132' y='60' width='68' height='58' fill='%23102B63'/%3E%3Ccircle cx='166' cy='89' r='9' fill='%23FF4B1F'/%3E%3C/svg%3E")}
.sb-s-accueil-planche h3.sb-c-metier-6-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='l' cx='35%25' cy='35%25' r='70%25'%3E%3Cstop offset='0' stop-color='%231B4FD8'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23l)'/%3E%3Ccircle cx='120' cy='88' r='48' fill='%230B1220' stroke='rgba(242,246,251,.7)'/%3E%3Cg stroke='rgba(242,246,251,.5)' fill='none'%3E%3Cpath d='M120 40l28 34M170 88l-36 24M146 130l-40-8M76 106l22-38M86 52l42 8'/%3E%3C/g%3E%3Ccircle cx='120' cy='88' r='14' fill='%2305080F' stroke='%23FF4B1F'/%3E%3C/svg%3E")}
.sb-s-accueil-planche h3.sb-c-metier-7-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect width='240' height='180' fill='%2305080F'/%3E%3Crect x='92' y='16' width='56' height='100' rx='4' fill='%23131C2E' stroke='rgba(242,246,251,.35)'/%3E%3Crect x='98' y='28' width='44' height='76' fill='none' stroke='rgba(255,122,69,.6)' stroke-dasharray='2 3'/%3E%3Ccircle cx='120' cy='66' r='8' fill='%23FF4B1F'/%3E%3Crect x='20' y='136' width='200' height='10' fill='rgba(242,246,251,.18)'/%3E%3Crect x='20' y='136' width='44' height='10' fill='%231B4FD8'/%3E%3Crect x='104' y='136' width='60' height='10' fill='%23FF4B1F'/%3E%3Cline x1='138' y1='130' x2='138' y2='152' stroke='%23F2F6FB'/%3E%3C/svg%3E")}
.sb-s-accueil-planche h3.sb-c-metier-8-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect width='240' height='180' fill='%2305080F'/%3E%3Crect x='30' y='42' width='48' height='96' rx='4' fill='%23131C2E' stroke='rgba(242,246,251,.30)'/%3E%3Crect x='92' y='52' width='60' height='76' rx='4' fill='%23131C2E' stroke='rgba(242,246,251,.30)'/%3E%3Crect x='166' y='66' width='48' height='28' rx='4' fill='%23131C2E' stroke='rgba(242,246,251,.30)'/%3E%3Ccircle cx='54' cy='90' r='7' fill='%23FF4B1F'/%3E%3Cg fill='rgba(242,246,251,.35)'%3E%3Crect x='100' y='104' width='44' height='4' rx='2'/%3E%3Crect x='174' y='102' width='32' height='4' rx='2'/%3E%3C/g%3E%3C/svg%3E")}
.sb-s-accueil-planche h3.sb-c-metier-9-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect width='240' height='180' fill='%2305080F'/%3E%3Crect x='24' y='22' width='192' height='134' rx='6' fill='%23EDF1F6'/%3E%3Crect x='24' y='22' width='192' height='16' fill='%23E2E8F0'/%3E%3Cg fill='%23A9B8CC'%3E%3Ccircle cx='34' cy='30' r='2.5'/%3E%3Ccircle cx='42' cy='30' r='2.5'/%3E%3Ccircle cx='50' cy='30' r='2.5'/%3E%3C/g%3E%3Crect x='24' y='38' width='192' height='60' fill='%230B1220'/%3E%3Ctext x='36' y='74' font-family='Georgia,serif' font-size='16' fill='%23F2F6FB'%3EVotre marque, nette%3C/text%3E%3Ccircle cx='192' cy='68' r='4' fill='%23FF4B1F'/%3E%3Cg fill='%23E2E8F0'%3E%3Crect x='36' y='110' width='52' height='34' rx='3'/%3E%3Crect x='94' y='110' width='52' height='34' rx='3'/%3E%3Crect x='152' y='110' width='52' height='34' rx='3'/%3E%3C/g%3E%3C/svg%3E")}

.sb-c-metier-1-nom{grid-column:1;grid-row:4}
.sb-c-metier-1-focale{grid-column:1;grid-row:5}
.sb-c-metier-1-texte{grid-column:1;grid-row:6}
.sb-c-metier-2-nom{grid-column:2;grid-row:4}
.sb-c-metier-2-focale{grid-column:2;grid-row:5}
.sb-c-metier-2-texte{grid-column:2;grid-row:6}
.sb-c-metier-3-nom{grid-column:3;grid-row:4}
.sb-c-metier-3-focale{grid-column:3;grid-row:5}
.sb-c-metier-3-texte{grid-column:3;grid-row:6}
.sb-c-metier-4-nom{grid-column:1;grid-row:7}
.sb-c-metier-4-focale{grid-column:1;grid-row:8}
.sb-c-metier-4-texte{grid-column:1;grid-row:9}
.sb-c-metier-5-nom{grid-column:2;grid-row:7}
.sb-c-metier-5-focale{grid-column:2;grid-row:8}
.sb-c-metier-5-texte{grid-column:2;grid-row:9}
.sb-c-metier-6-nom{grid-column:3;grid-row:7}
.sb-c-metier-6-focale{grid-column:3;grid-row:8}
.sb-c-metier-6-texte{grid-column:3;grid-row:9}
.sb-c-metier-7-nom{grid-column:1;grid-row:10}
.sb-c-metier-7-focale{grid-column:1;grid-row:11}
.sb-c-metier-7-texte{grid-column:1;grid-row:12}
.sb-c-metier-8-nom{grid-column:2;grid-row:10}
.sb-c-metier-8-focale{grid-column:2;grid-row:11}
.sb-c-metier-8-texte{grid-column:2;grid-row:12}
.sb-c-metier-9-nom{grid-column:3;grid-row:10}
.sb-c-metier-9-focale{grid-column:3;grid-row:11}
.sb-c-metier-9-texte{grid-column:3;grid-row:12}
.sb-c-planche-lien{grid-column:1/-1;grid-row:13;margin-top:28px}

.sb-c-m1-nom{grid-column:1;grid-row:4}
.sb-c-m1-focale{grid-column:1;grid-row:5}
.sb-c-m1-texte{grid-column:1;grid-row:6}
.sb-c-m1-livrables{grid-column:1;grid-row:7}
.sb-c-m2-nom{grid-column:2;grid-row:4}
.sb-c-m2-focale{grid-column:2;grid-row:5}
.sb-c-m2-texte{grid-column:2;grid-row:6}
.sb-c-m2-livrables{grid-column:2;grid-row:7}
.sb-c-m3-nom{grid-column:1;grid-row:8}
.sb-c-m3-focale{grid-column:1;grid-row:9}
.sb-c-m3-texte{grid-column:1;grid-row:10}
.sb-c-m3-livrables{grid-column:1;grid-row:11}
.sb-c-m4-nom{grid-column:2;grid-row:8}
.sb-c-m4-focale{grid-column:2;grid-row:9}
.sb-c-m4-texte{grid-column:2;grid-row:10}
.sb-c-m4-livrables{grid-column:2;grid-row:11}
.sb-c-m5-nom{grid-column:1;grid-row:12}
.sb-c-m5-focale{grid-column:1;grid-row:13}
.sb-c-m5-texte{grid-column:1;grid-row:14}
.sb-c-m5-livrables{grid-column:1;grid-row:15}
.sb-c-m6-nom{grid-column:2;grid-row:12}
.sb-c-m6-focale{grid-column:2;grid-row:13}
.sb-c-m6-texte{grid-column:2;grid-row:14}
.sb-c-m6-livrables{grid-column:2;grid-row:15}
.sb-c-m7-nom{grid-column:1;grid-row:16}
.sb-c-m7-focale{grid-column:1;grid-row:17}
.sb-c-m7-texte{grid-column:1;grid-row:18}
.sb-c-m7-livrables{grid-column:1;grid-row:19}
.sb-c-m8-nom{grid-column:2;grid-row:16}
.sb-c-m8-focale{grid-column:2;grid-row:17}
.sb-c-m8-texte{grid-column:2;grid-row:18}
.sb-c-m8-livrables{grid-column:2;grid-row:19}
.sb-c-m9-nom{grid-column:1;grid-row:20}
.sb-c-m9-focale{grid-column:1;grid-row:21}
.sb-c-m9-texte{grid-column:1;grid-row:22}
.sb-c-m9-livrables{grid-column:1;grid-row:23}

@
  media (max-width:980px){
  .sb-c-metier-1-nom{grid-column:1;grid-row:4}
  .sb-c-metier-1-focale{grid-column:1;grid-row:5}
  .sb-c-metier-1-texte{grid-column:1;grid-row:6}
  .sb-c-metier-2-nom{grid-column:2;grid-row:4}
  .sb-c-metier-2-focale{grid-column:2;grid-row:5}
  .sb-c-metier-2-texte{grid-column:2;grid-row:6}
  .sb-c-metier-3-nom{grid-column:1;grid-row:7}
  .sb-c-metier-3-focale{grid-column:1;grid-row:8}
  .sb-c-metier-3-texte{grid-column:1;grid-row:9}
  .sb-c-metier-4-nom{grid-column:2;grid-row:7}
  .sb-c-metier-4-focale{grid-column:2;grid-row:8}
  .sb-c-metier-4-texte{grid-column:2;grid-row:9}
  .sb-c-metier-5-nom{grid-column:1;grid-row:10}
  .sb-c-metier-5-focale{grid-column:1;grid-row:11}
  .sb-c-metier-5-texte{grid-column:1;grid-row:12}
  .sb-c-metier-6-nom{grid-column:2;grid-row:10}
  .sb-c-metier-6-focale{grid-column:2;grid-row:11}
  .sb-c-metier-6-texte{grid-column:2;grid-row:12}
  .sb-c-metier-7-nom{grid-column:1;grid-row:13}
  .sb-c-metier-7-focale{grid-column:1;grid-row:14}
  .sb-c-metier-7-texte{grid-column:1;grid-row:15}
  .sb-c-metier-8-nom{grid-column:2;grid-row:13}
  .sb-c-metier-8-focale{grid-column:2;grid-row:14}
  .sb-c-metier-8-texte{grid-column:2;grid-row:15}
  .sb-c-metier-9-nom{grid-column:1;grid-row:16}
  .sb-c-metier-9-focale{grid-column:1;grid-row:17}
  .sb-c-metier-9-texte{grid-column:1;grid-row:18}
  .sb-c-planche-lien{grid-row:19}
  .sb-s-expertise-metiers h3.sb-c-m1-nom{grid-column:1;grid-row:4}
  .sb-c-m1-focale{grid-column:1;grid-row:5}
  .sb-s-expertise-metiers p.sb-c-m1-texte{grid-column:1;grid-row:6}
  .sb-c-m1-livrables{grid-column:1;grid-row:7}
  .sb-s-expertise-metiers h3.sb-c-m2-nom{grid-column:1;grid-row:8}
  .sb-c-m2-focale{grid-column:1;grid-row:9}
  .sb-s-expertise-metiers p.sb-c-m2-texte{grid-column:1;grid-row:10}
  .sb-c-m2-livrables{grid-column:1;grid-row:11}
  .sb-s-expertise-metiers h3.sb-c-m3-nom{grid-column:1;grid-row:12}
  .sb-c-m3-focale{grid-column:1;grid-row:13}
  .sb-s-expertise-metiers p.sb-c-m3-texte{grid-column:1;grid-row:14}
  .sb-c-m3-livrables{grid-column:1;grid-row:15}
  .sb-s-expertise-metiers h3.sb-c-m4-nom{grid-column:1;grid-row:16}
  .sb-c-m4-focale{grid-column:1;grid-row:17}
  .sb-s-expertise-metiers p.sb-c-m4-texte{grid-column:1;grid-row:18}
  .sb-c-m4-livrables{grid-column:1;grid-row:19}
  .sb-s-expertise-metiers h3.sb-c-m5-nom{grid-column:1;grid-row:20}
  .sb-c-m5-focale{grid-column:1;grid-row:21}
  .sb-s-expertise-metiers p.sb-c-m5-texte{grid-column:1;grid-row:22}
  .sb-c-m5-livrables{grid-column:1;grid-row:23}
  .sb-s-expertise-metiers h3.sb-c-m6-nom{grid-column:1;grid-row:24}
  .sb-c-m6-focale{grid-column:1;grid-row:25}
  .sb-s-expertise-metiers p.sb-c-m6-texte{grid-column:1;grid-row:26}
  .sb-c-m6-livrables{grid-column:1;grid-row:27}
  .sb-s-expertise-metiers h3.sb-c-m7-nom{grid-column:1;grid-row:28}
  .sb-c-m7-focale{grid-column:1;grid-row:29}
  .sb-s-expertise-metiers p.sb-c-m7-texte{grid-column:1;grid-row:30}
  .sb-c-m7-livrables{grid-column:1;grid-row:31}
  .sb-s-expertise-metiers h3.sb-c-m8-nom{grid-column:1;grid-row:32}
  .sb-c-m8-focale{grid-column:1;grid-row:33}
  .sb-s-expertise-metiers p.sb-c-m8-texte{grid-column:1;grid-row:34}
  .sb-c-m8-livrables{grid-column:1;grid-row:35}
  .sb-s-expertise-metiers h3.sb-c-m9-nom{grid-column:1;grid-row:36}
  .sb-c-m9-focale{grid-column:1;grid-row:37}
  .sb-s-expertise-metiers p.sb-c-m9-texte{grid-column:1;grid-row:38}
  .sb-c-m9-livrables{grid-column:1;grid-row:39}
}
@
  media (max-width:640px){
  .sb-c-metier-1-nom{grid-column:1;grid-row:4}
  .sb-c-metier-1-focale{grid-column:1;grid-row:5}
  .sb-c-metier-1-texte{grid-column:1;grid-row:6}
  .sb-c-metier-2-nom{grid-column:1;grid-row:7}
  .sb-c-metier-2-focale{grid-column:1;grid-row:8}
  .sb-c-metier-2-texte{grid-column:1;grid-row:9}
  .sb-c-metier-3-nom{grid-column:1;grid-row:10}
  .sb-c-metier-3-focale{grid-column:1;grid-row:11}
  .sb-c-metier-3-texte{grid-column:1;grid-row:12}
  .sb-c-metier-4-nom{grid-column:1;grid-row:13}
  .sb-c-metier-4-focale{grid-column:1;grid-row:14}
  .sb-c-metier-4-texte{grid-column:1;grid-row:15}
  .sb-c-metier-5-nom{grid-column:1;grid-row:16}
  .sb-c-metier-5-focale{grid-column:1;grid-row:17}
  .sb-c-metier-5-texte{grid-column:1;grid-row:18}
  .sb-c-metier-6-nom{grid-column:1;grid-row:19}
  .sb-c-metier-6-focale{grid-column:1;grid-row:20}
  .sb-c-metier-6-texte{grid-column:1;grid-row:21}
  .sb-c-metier-7-nom{grid-column:1;grid-row:22}
  .sb-c-metier-7-focale{grid-column:1;grid-row:23}
  .sb-c-metier-7-texte{grid-column:1;grid-row:24}
  .sb-c-metier-8-nom{grid-column:1;grid-row:25}
  .sb-c-metier-8-focale{grid-column:1;grid-row:26}
  .sb-c-metier-8-texte{grid-column:1;grid-row:27}
  .sb-c-metier-9-nom{grid-column:1;grid-row:28}
  .sb-c-metier-9-focale{grid-column:1;grid-row:29}
  .sb-c-metier-9-texte{grid-column:1;grid-row:30}
  .sb-c-planche-lien{grid-row:32}
}

/* ════════════════════════════════════════════════════════════════════════════
   LE SITE RESPIRE · encres, viseur, rail
   Trois ajouts qui répondent au même reproche : noir sur noir, ça s'éteint.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── LES ENCRES ──────────────────────────────────────────────────────────────
   Une seule encre pour tout le site donnait sept sections indiscernables. La
   maison n'a qu'une encre officielle, `#0B1220` : les variantes ci-dessous en
   descendent par une seule teinte à la fois — violet, prune, nuit — et aucune
   ne s'éloigne assez pour sortir de la charte. Le contraste du texte ivoire
   reste au-dessus de 15:1 sur les quatre. */
:root{
  --encre-bleue:#0A1524;   /* ivoire dessus : 16,4:1 */
  --encre-ardoise:#0E1826;    /* ivoire dessus : 15,9:1 */
  --encre-abysse:#070E1C;     /* ivoire dessus : 16,8:1 */
}
.sb-s-accueil-pourqui,.sb-s-offres-cadre{background:var(--encre-bleue)}
.sb-s-accueil-planche,.sb-s-expertise-metiers{background:var(--encre)}
.sb-s-studio-recit,.sb-s-realisations-carnets,.sb-s-contact-ecrire,
.sb-s-offres-formules{background:var(--encre-ardoise)}

/* ── LE VISEUR ───────────────────────────────────────────────────────────────
   Une lueur qui suit le pointeur sur les fonds d'encre, comme une lampe qu'on
   promène. Très basse, volontairement : l'effet doit se sentir et jamais se
   remarquer. Les deux variables viennent du JavaScript ; sans lui, la règle ne
   dessine rien du tout. */
[class*="sb-s-"]::after{--vx:50%; --vy:50%}
.sb-viseur::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--vx) var(--vy),
             rgba(27,79,216,.20), rgba(27,79,216,.07) 38%, transparent 68%);
  opacity:0;transition:opacity .6s var(--ease)}
.sb-viseur.sb-vu::before{opacity:1}

/* ── LE RAIL D'ORIENTATION, À GAUCHE ─────────────────────────────────────────
   Un tableau de bord, pas une décoration : le rang de la section, son nom, et
   la part de page parcourue. Les trois se lisent DANS la page — aucun chiffre
   n'est inventé. C'est la seule chose qui sépare un instrument d'un gadget, et
   c'est pour ça qu'on n'affiche ni fréquence ni année-lumière : on ne mesure
   rien de tel ici.

   Il vit à GAUCHE parce que le contenu du site est aligné à gauche : un repère
   posé du côté où l'œil revient à chaque ligne est un repère qu'on consulte,
   alors qu'à droite il faut aller le chercher. Il disparaît sous 1100 px, où il
   volerait la place du texte. */
.sb-rail-cadre{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:25;
  display:grid;gap:10px;justify-items:start;pointer-events:none}
.sb-rail-cadre>*{pointer-events:auto}
.sb-rail-compteur,.sb-rail-actuelle,.sb-rail-jauge{margin:0;font-family:var(--mono);
  letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.sb-rail-compteur{font-size:.62rem;color:var(--accent-encre)}
.sb-rail-actuelle{font-size:.58rem;color:var(--ivoire-doux);max-width:15ch;
  text-transform:none;letter-spacing:.06em;line-height:1.3}
/* La jauge est un chiffre ET un trait : le trait se lit d'un coup d'œil, le
   chiffre dit ce que le trait vaut. */
.sb-rail-jauge{position:relative;font-size:.56rem;color:var(--ivoire-sourd);
  padding-top:9px;width:56px}
.sb-rail-jauge::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:var(--filet-encre-fort)}
.sb-rail-jauge::after{content:"";position:absolute;left:0;top:0;width:var(--part,0%);height:1px;
  background:var(--accent-encre);transition:width .2s linear}
.sb-rail{display:grid;gap:13px;padding:0;margin:0;list-style:none}
.sb-rail li{margin:0}
.sb-rail button{display:block;width:30px;height:10px;padding:0;border:0;cursor:pointer;
  background:transparent;position:relative}
.sb-rail button::before{content:"";position:absolute;left:0;top:4px;width:14px;height:1px;
  background:var(--filet-encre-fort);transition:width .35s var(--ease),background .35s var(--ease)}
.sb-rail button:hover::before{width:30px;background:var(--ivoire-doux)}
.sb-rail [aria-current="true"]::before{width:30px;background:var(--accent-encre);
  box-shadow:0 0 10px rgba(255,122,69,.6)}
.sb-rail .sb-rail-nom{position:absolute;left:38px;top:-4px;white-space:nowrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivoire-doux);opacity:0;transition:opacity .25s var(--ease);
  background:rgba(5,8,15,.8);padding:3px 8px;border-radius:999px}
.sb-rail button:hover .sb-rail-nom,.sb-rail button:focus-visible .sb-rail-nom{opacity:1}
/* Sur les sections claires, tout le tableau s'inverse pour rester lisible. */
.sb-rail-cadre.sb-sur-papier .sb-rail-compteur{color:var(--accent-papier)}
.sb-rail-cadre.sb-sur-papier .sb-rail-actuelle{color:var(--texte-doux)}
.sb-rail-cadre.sb-sur-papier .sb-rail-jauge{color:var(--texte-sourd)}
.sb-rail-cadre.sb-sur-papier .sb-rail-jauge::before{background:var(--filet-papier-fort)}
.sb-rail-cadre.sb-sur-papier .sb-rail-jauge::after{background:var(--accent-papier)}
.sb-rail-cadre.sb-sur-papier .sb-rail button::before{background:var(--filet-papier-fort)}
.sb-rail-cadre.sb-sur-papier .sb-rail button:hover::before{background:var(--texte-doux)}
.sb-rail-cadre.sb-sur-papier .sb-rail [aria-current="true"]::before{
  background:var(--accent-papier);box-shadow:none}
.sb-rail-cadre.sb-sur-papier .sb-rail-nom{color:var(--texte-doux);background:rgba(247,249,252,.9)}
/* 🔴 LE RAIL A BESOIN DE SA GOUTTIÈRE, ET 1100 NE LA LUI DONNAIT PAS.
   Le contenu est large de 1180 au plus, la gouttière vaut donc (100% - 1180)/2.
   Le rail occupe 20 px de marge, 30 de graduation et jusqu'à 15ch de libellé —
   environ 130. Il lui faut 1180 + 260 = 1440 pour ne rien chevaucher.
   Relevé par Yan le 17.09.2026 sur iPad mini : 1133 de large, au-dessus de
   l'ancien seuil de 1100, et l'échelle se posait EN TRAVERS du paragraphe.
   Au-dessous, le rail disparaît entièrement. Un demi-rail — les graduations
   sans leurs libellés — aurait tenu à 1300, et aurait été le gadget qu'on
   voulait éviter : une échelle qui ne dit plus ce qu'elle mesure. */
@media (max-width:1439px){.sb-rail-cadre{display:none}}

/* Le ciel d'une section qui n'est pas une ouverture — le trou noir vit là. */
.sb-s-accueil-ciel,.sb-s-studio-ciel{gap:0;overflow:hidden}
.sb-s-accueil-ciel>[class*="-surtitre"],.sb-s-studio-ciel>[class*="-surtitre"]{
  margin-block:0 var(--saut-sur)}
.sb-s-accueil-ciel>h2,.sb-s-studio-ciel>h2{margin-block:0 var(--saut-titre)}
.sb-s-accueil-ciel>[class*="-texte"],.sb-s-studio-ciel>[class*="-texte"]{margin-block:0 26px}
.sb-s-accueil-ciel .ciel,.sb-s-studio-ciel .ciel{
  position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sb-s-accueil-ciel>*,.sb-s-studio-ciel>*{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){.sb-viseur::before{display:none}}

/* Les trois studios voisins, un par colonne.
   Les logos viennent de trois chartes différentes : chacun a SA hauteur,
   réglée au poids optique. Le symbole Neequist est un tracé fin à 32 %
   d'opacité — dans une boîte de 30 px il était présent et invisible. */
.sb-c-co1-nom{grid-column:1;grid-row:4}
.sb-c-co1-role{grid-column:1;grid-row:5}
.sb-c-co1-texte{grid-column:1;grid-row:6}
.sb-c-co1-lien{grid-column:1;grid-row:7}
.sb-c-co2-nom{grid-column:2;grid-row:4}
.sb-c-co2-role{grid-column:2;grid-row:5}
.sb-c-co2-texte{grid-column:2;grid-row:6}
.sb-c-co2-lien{grid-column:2;grid-row:7}
.sb-c-co3-nom{grid-column:3;grid-row:4}
.sb-c-co3-role{grid-column:3;grid-row:5}
.sb-c-co3-texte{grid-column:3;grid-row:6}
.sb-c-co3-lien{grid-column:3;grid-row:7}
/* L'ORDRE DES CARTES A CHANGÉ, ET LES LOGOS ONT DÛ SUIVRE : ils sont liés au
   NUMÉRO du champ, jamais au nom de la marque. Réordonner les textes sans
   toucher à ces trois règles aurait posé le logo de Younifeel sur
   Blackformance, en silence. Yan, le 17.09.2026 : Blackformance, Younifeel,
   Neequist. */
.sb-s-studio-collaborations h3.sb-c-co1-nom::before{background-image:url('../assets/logos/blackformance.svg');height:26px;max-width:190px}
.sb-s-studio-collaborations h3.sb-c-co2-nom::before{background-image:url('../assets/logos/younifeel.svg');height:84px;max-width:150px}
.sb-s-studio-collaborations h3.sb-c-co3-nom::before{background-image:url('../assets/logos/neequist.svg');height:64px;max-width:110px;
  filter:brightness(0) invert(1) contrast(1.6);opacity:1}
@media (max-width:980px){
  .sb-s-studio-collaborations{grid-template-columns:1fr}
  .sb-s-studio-collaborations h3.sb-c-co1-nom{grid-column:1;grid-row:4}
  .sb-s-studio-collaborations p.sb-c-co1-role{grid-column:1;grid-row:5}
  .sb-s-studio-collaborations p.sb-c-co1-texte{grid-column:1;grid-row:6}
  .sb-s-studio-collaborations a.sb-c-co1-lien{grid-column:1;grid-row:7}
  .sb-s-studio-collaborations h3.sb-c-co2-nom{grid-column:1;grid-row:8}
  .sb-s-studio-collaborations p.sb-c-co2-role{grid-column:1;grid-row:9}
  .sb-s-studio-collaborations p.sb-c-co2-texte{grid-column:1;grid-row:10}
  .sb-s-studio-collaborations a.sb-c-co2-lien{grid-column:1;grid-row:11}
  .sb-s-studio-collaborations h3.sb-c-co3-nom{grid-column:1;grid-row:12}
  .sb-s-studio-collaborations p.sb-c-co3-role{grid-column:1;grid-row:13}
  .sb-s-studio-collaborations p.sb-c-co3-texte{grid-column:1;grid-row:14}
  .sb-s-studio-collaborations a.sb-c-co3-lien{grid-column:1;grid-row:15}
}

/* ── LES CINQ TEMPS SE LISENT COMME UNE SUITE ────────────────────────────────
   Cinq boîtes côte à côte se lisent comme cinq choix, pas comme cinq étapes.
   Deux signes suffisent à dire la progression, et aucun ne déforme la boîte :
   le NUMÉRO, qui donne l'ordre, et le CHEVRON posé dans l'écart, qui donne le
   sens de lecture. Un vrai chevron découpé dans la carte aurait demandé de
   couper en deux une plaque faite de deux champs frères — et la forme se serait
   défaite au premier retour à la ligne. */
.sb-s-accueil-methode h3[class*="sb-c-temps-"],
.sb-s-expertise-temps h3[class*="sb-c-t"]{position:relative}
.sb-s-accueil-methode h3[class*="sb-c-temps-"]::before,
.sb-s-expertise-temps h3[class*="sb-c-t"]::before{
  /* Le numéro vient de la CLASSE, pas d'un attribut ni d'un compteur. Un
     attribut ne franchit pas la compilation — même piège que `target` sur les
     liens. Un compteur, lui, se décale dès qu'une carte bouge. La classe, elle,
     est l'identité du champ des deux côtés. */
  content:"";display:block;margin-bottom:11px;
  font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.16em;
  font-variant-numeric:tabular-nums;color:var(--accent-encre)}
/* Le chevron vit dans l'écart entre deux colonnes : il appartient à la grille,
   pas à la carte, donc il disparaît de lui-même quand les cartes s'empilent. */
.sb-s-accueil-methode p[class*="sb-c-temps-"]::after,
.sb-s-expertise-temps p[class*="sb-c-t"]::after{
  /* Posé sur le HAUT du champ de texte, donc à la jointure des deux champs,
     donc au milieu optique de la carte. À `top:50%` il tombait dans le bas de
     la carte, là où l'œil ne cherche pas la suite. */
  content:"";position:absolute;right:-20px;top:-14px;width:10px;height:10px;
  border-top:1.5px solid var(--ivoire-sourd);border-right:1.5px solid var(--ivoire-sourd);
  transform:rotate(45deg);pointer-events:none}
.sb-s-accueil-methode p[class*="sb-c-temps-"],
.sb-s-expertise-temps p[class*="sb-c-t"]{position:relative}
/* Le dernier n'annonce rien après lui. Le sélecteur porte la section et la
   balise, sans quoi la règle générique ci-dessus le rallume — c'est le même
   piège de spécificité que les numéros, deux règles plus haut. */
.sb-s-accueil-methode p.sb-c-temps-5-texte::after,
.sb-s-expertise-temps p.sb-c-t5-texte::after{display:none}
/* Les temps posés sur le papier prennent le chevron sombre. */
.sb-s-accueil-methode p.sb-c-temps-4-texte::after,
.sb-s-expertise-temps p.sb-c-t4-texte::after{border-color:var(--filet-papier-fort)}
/* LES NUMÉROS DES TEMPS POSÉS SUR LE PAPIER. L'accent d'encre y tombe à 2,4:1 —
   illisible. Le sélecteur porte la section ET la balise, sans quoi la règle
   générique des numéros, plus haut, le rallume : c'est le piège de spécificité
   déjà vu six fois. */
.sb-s-accueil-methode h3.sb-c-temps-4-nom::before,
.sb-s-accueil-methode h3.sb-c-temps-5-nom::before,
.sb-s-expertise-temps h3.sb-c-t4-nom::before,
.sb-s-expertise-temps h3.sb-c-t5-nom::before{color:var(--accent-papier)}
@media (max-width:980px){
  .sb-s-accueil-methode p[class*="sb-c-temps-"]::after,
  .sb-s-expertise-temps p[class*="sb-c-t"]::after{display:none}
}
/* SUR TÉLÉPHONE, LES CINQ TEMPS S'EMPILENT, UN PAR RANG. La section d'Expertise
   n'avait que la règle à deux colonnes (980 px) : à 390 px, chaque carte
   n'avait plus que onze caractères de ligne, et « 05 » restait seul dans sa
   rangée. Relevé par Yan le 18.09.2026 : « que les box soient l'une sous
   l'autre », sans chevron entre elles. Les chevrons sont déjà éteints sous
   980 px ; un écart de 12 px sépare les cartes, qui se touchaient. */
@media (max-width:640px){
  .sb-s-expertise-temps{grid-template-columns:1fr}
  .sb-s-expertise-temps h3[class*="sb-c-t"],
  .sb-s-expertise-temps p[class*="sb-c-t"]{grid-column:1}
  .sb-s-expertise-temps h3.sb-c-t1-nom{grid-row:3}
  .sb-s-expertise-temps p.sb-c-t1-texte{grid-row:4}
  .sb-s-expertise-temps h3.sb-c-t2-nom{grid-row:5}
  .sb-s-expertise-temps p.sb-c-t2-texte{grid-row:6}
  .sb-s-expertise-temps h3.sb-c-t3-nom{grid-row:7}
  .sb-s-expertise-temps p.sb-c-t3-texte{grid-row:8}
  .sb-s-expertise-temps h3.sb-c-t4-nom{grid-row:9}
  .sb-s-expertise-temps p.sb-c-t4-texte{grid-row:10}
  .sb-s-expertise-temps h3.sb-c-t5-nom{grid-row:11}
  .sb-s-expertise-temps p.sb-c-t5-texte{grid-row:12}
  .sb-s-expertise-temps h3.sb-c-t2-nom,
  .sb-s-expertise-temps h3.sb-c-t3-nom,
  .sb-s-expertise-temps h3.sb-c-t4-nom,
  .sb-s-expertise-temps h3.sb-c-t5-nom{margin-top:12px}
}

/* Les coordonnées au pied, sur toutes les pages : le Premier échange part chez
   la maison, mais quelqu'un qui veut écrire ou téléphoner ne doit pas avoir à
   traverser un autre site pour trouver une adresse. */
.sb-pied-colonnes{gap:34px 48px;align-items:flex-start}
/* DEUX NIVEAUX DE CONTRASTE DANS LE PIED, ET PAS TROIS.
   Yan, le 17.09.2026 : « le contraste est un petit peu trop faible, il faut le
   même contraste dans tous les éléments. »

   Mesuré avant de toucher : sur `--encre-profonde`, rien n'était sous le seuil
   — 18,46:1 pour l'ivoire, 9,94 pour le doux, 6,07 pour le sourd. Le défaut
   n'était donc pas un manquement, c'était une INCOHÉRENCE : le pied mélangeait
   trois niveaux, et les plus petits textes — les libellés en capitales à
   0,64 rem — portaient le plus faible. Exactement l'inverse de ce qu'il faut.

   Il n'en reste que deux, et ils disent quelque chose :
     `--ivoire`       18,46:1  ce qui se CLIQUE — menus, mentions, endossement
     `--ivoire-doux`   9,94:1  ce qui se LIT — signature, adresse, libellés

   Le survol des liens vire à la braise plutôt qu'à l'ivoire : au niveau haut,
   éclaircir encore ne dit plus rien.

   ── L'ENDOSSEMENT SIGNE LE BAS DE LA COLONNE, COMME ON SIGNE UNE LETTRE.
   Deux essais avant celui-là, et Yan a eu raison des deux : la ligne perdue au
   milieu du texte ne se voyait pas, et la colonne de gauche écrasait le
   monogramme à 34 px — « au moins trois fois plus gros, qu'il soit visible ».

   Il est donc SOUS le texte, détaché par un filet, et il fait 96 px : la même
   hauteur que les trois lignes qu'il vient clore, et presque trois fois
   l'ancien. Le nom se lit à côté — un monogramme seul demande au visiteur de
   reconnaître une lettre.

   « Une marque de » le coiffe et reste petit : c'est la RELATION, pas le nom,
   et elle n'a pas à peser autant que ce qu'elle relie. */
.sb-pied-maison-bloc{flex:1 1 340px;min-width:0}
/* PAS DE FILET AU-DESSUS. Il séparait l'adresse de l'endossement, et Yan a vu
   ce qu'il faisait vraiment : il coupait une colonne qui se lit d'un trait.
   L'écart suffit à marquer le changement de registre. */
.sb-pied-rattachement{margin:34px 0 14px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivoire-doux)}

/* LE BLOC `wp:shortcode` REND UN PARAGRAPHE AUTOUR : il porterait les marges du
   thème et décalerait le lockup. On le rend transparent, comme dans la barre. */
.sb-pied-maison-bloc>p:not([class]){margin:0;display:contents}

/* Discret au repos, franc au survol — c'est un endossement, pas une signature
   concurrente de celle de Sidelune. */
/* LE TRACÉ OFFICIEL PORTE SON PROPRE ESPACE DE RESPIRATION, et on ne le recadre
   pas : l'air autour d'un logo fait partie du logo. On retire donc l'aération
   de trop AUTOUR du tracé, pas dedans — d'où une marge basse négative, calée
   sur le vide que le fichier réserve sous le lettrage.
   Yan, le 17.09.2026 : « un tout petit peu trop d'aération en dessous ». */
.sb-pied-yhb{display:inline-flex;align-items:center;gap:16px;text-decoration:none;
  color:var(--ivoire);transition:color .3s var(--ease)}
.sb-pied-yhb:hover,.sb-pied-yhb:focus-visible{color:var(--accent-encre)}
.sb-pied-yhb svg{display:block;width:54px;height:auto;flex:none}
.sb-pied-yhb span{font-size:1.18rem;letter-spacing:-.01em;line-height:1.15}
@media (max-width:520px){
  .sb-pied-yhb{gap:13px}
  .sb-pied-yhb svg{width:44px}
  .sb-pied-yhb span{font-size:1.04rem}
}
.sb-pied-colonne{flex:0 1 200px;min-width:0}
.sb-pied-adresse{font-size:.86rem;color:var(--ivoire-doux);margin-top:14px}
.sb-pied p.sb-pied-titre{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivoire-doux);margin-bottom:14px}
/* LE MENU DU PIED EST UN BLOC `wp:navigation`, ET IL ARRIVE AVEC SES PROPRES
   MISES EN PAGE. On lui rend une colonne simple : sans ça, la liste se range
   selon la justification du bloc et se colle à droite, comme le tiroir du
   téléphone l'avait fait. */
.sb-pied .sb-pied-menu,.sb-pied .sb-pied-menu .wp-block-navigation__container{
  gap:11px;align-items:flex-start;justify-content:flex-start;flex-direction:column}
.sb-pied .sb-pied-menu a{color:var(--ivoire);text-decoration:none;font-size:.92rem}
.sb-pied .sb-pied-menu a:hover{color:var(--accent-encre)}
.sb-pied-bas{gap:12px 22px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--filet-encre);align-items:baseline}
.sb-pied-joindre{gap:8px 22px;margin-top:18px;font-size:.9rem}
.sb-pied-joindre p{margin:0;color:var(--ivoire-doux)}
.sb-pied-joindre a{color:var(--ivoire);text-decoration:none;
  border-bottom:1px solid var(--filet-encre-fort);padding-bottom:2px}
.sb-pied-joindre a:hover{color:var(--accent-encre);border-color:var(--accent-encre)}
.sb-s-accueil-methode h3.sb-c-temps-1-nom::before{content:"01"}
.sb-s-expertise-temps h3.sb-c-t1-nom::before{content:"01"}
.sb-s-accueil-methode h3.sb-c-temps-2-nom::before{content:"02"}
.sb-s-expertise-temps h3.sb-c-t2-nom::before{content:"02"}
.sb-s-accueil-methode h3.sb-c-temps-3-nom::before{content:"03"}
.sb-s-expertise-temps h3.sb-c-t3-nom::before{content:"03"}
.sb-s-accueil-methode h3.sb-c-temps-4-nom::before{content:"04"}
.sb-s-expertise-temps h3.sb-c-t4-nom::before{content:"04"}
.sb-s-accueil-methode h3.sb-c-temps-5-nom::before{content:"05"}
.sb-s-expertise-temps h3.sb-c-t5-nom::before{content:"05"}

/* ── LA PLANCHE DEVIENT UNE PORTE ────────────────────────────────────────────
   L'accueil ne répète plus la page expertise : il montre les neuf illustrations
   et leurs noms, et le reste se découvre au survol. Le texte RESTE dans la page
   — indexé, éditable, lu par un lecteur d'écran — il attend derrière
   l'illustration au lieu de s'étaler sous elle.

   La vue est un groupe posé par le JavaScript autour des trois champs : la
   structure servie est plate, et trois frères n'offrent aucune zone à survoler.
   Sans JavaScript, les placements de grille ci-dessous tiennent encore et la
   planche s'affiche en entier — c'est le repli, et il est lisible. */
.sb-planche-groupee{grid-template-columns:repeat(3,1fr);column-gap:18px;row-gap:0}
.sb-planche-groupee .sb-vue{margin-block:0 var(--pile)}
/* La page expertise porte des vues plus hautes : quatre champs au lieu de trois,
   et des phrases qui expliquent au lieu d'annoncer. */
.sb-s-expertise-metiers.sb-planche-groupee .sb-vue{height:368px}
.sb-s-expertise-metiers.sb-planche-groupee .sb-vue h3::before{height:252px}
.sb-s-expertise-metiers.sb-planche-groupee .sb-vue.sb-vu h3::before{height:78px}
.sb-s-expertise-metiers.sb-planche-groupee .sb-vue.sb-vu p[class*="-texte"]{max-height:7em}
.sb-s-expertise-metiers.sb-planche-groupee .sb-vue.sb-vu p[class*="-livrables"]{
  max-height:7em;margin-top:10px;padding-top:10px;border-top:1px solid var(--filet-encre);
  font-size:.86rem;color:var(--ivoire)}

/* LA VUE SE DÉPLIE, ELLE NE SE SUPERPOSE PAS. Premier essai : le texte posé en
   absolu par-dessus l'illustration. Trois défauts mesurés à l'écran — le voile
   se peignait par-dessus le texte, les deux champs se chevauchaient à trois
   pixels près, et le nom passait sous le voile. Tout ça parce qu'on empilait des
   plans dans une boîte dont l'illustration occupait déjà 320 des 336 pixels.

   Ici, rien ne se superpose : la vue garde une hauteur FIXE, l'illustration se
   rétracte, et le texte prend la place libérée. Le flux normal fait le travail,
   la grille ne bouge pas d'un pixel, et il n'y a plus d'ordre de plans à tenir. */
.sb-planche-groupee .sb-vue{
  grid-column:auto;display:flex;flex-direction:column;height:318px;overflow:hidden;
  background:var(--encre-plaque);border:1px solid var(--filet-encre);
  border-radius:8px;padding:14px;outline-offset:3px}
.sb-planche-groupee .sb-vue h3{background:none;border:0;border-radius:0;padding:0;
  font-size:1.25rem;line-height:1.2;margin:0}
.sb-planche-groupee .sb-vue h3::before{
  height:186px;margin-bottom:12px;aspect-ratio:auto;
  transition:height .45s var(--ease)}
.sb-planche-groupee .sb-vue.sb-vu h3::before{height:112px}
/* `min-height:0` N'EST PAS UNE PRÉCAUTION, C'EST LA CORRECTION D'UN DÉFAUT.
   La vue est une colonne flex, et un élément flex a `min-height:auto` : il ne
   descend donc pas sous la hauteur de son contenu, et le standard fait gagner
   `min-height` contre `max-height`. Le `max-height:0` du repli était ignoré, et
   une PREMIÈRE LIGNE de la phrase dépassait, coupée net par le débordement
   caché — « Ce que la marque promet, à qui, et contre quoi », sans la fin.
   Vu à l'écran le 16.09.2026. */
.sb-planche-groupee .sb-vue p,.sb-planche-groupee .sb-vue .sb-tags{min-height:0;flex:0 0 auto}
.sb-planche-groupee .sb-vue p{
  position:static;margin:0;padding:0;background:none;border:0;border-radius:0;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--ease),opacity .3s var(--ease),margin .45s var(--ease)}
.sb-planche-groupee .sb-vue.sb-vu p{opacity:1}
.sb-planche-groupee .sb-vue.sb-vu p[class*="-texte"]{max-height:5em;margin-top:6px;
  color:var(--ivoire-doux)}
.sb-planche-groupee .sb-vue h3::after{display:none}
/* Sur un écran sans survol, tout s'affiche : rien ne se cache derrière un geste
   que le doigt ne sait pas faire. */
@media (hover:none){
  /* LA HAUTEUR FIXE DOIT TOMBER ICI AUSSI, ET AVEC LA MÊME FORCE.
     `.sb-s-expertise-metiers.sb-planche-groupee .sb-vue` pèse plus lourd que
     `.sb-planche-groupee .sb-vue` : sans le répéter, les neuf vues gardaient
     leurs 368 px sur un écran tactile, et la phrase s'y coupait en plein milieu
     — le seul écran où elle ne peut pas se déplier au survol. */
  .sb-planche-groupee .sb-vue,
  .sb-s-expertise-metiers.sb-planche-groupee .sb-vue{height:auto}
  .sb-planche-groupee .sb-vue h3::before,
  .sb-s-expertise-metiers.sb-planche-groupee .sb-vue h3::before{height:auto;aspect-ratio:4/3}
  .sb-planche-groupee .sb-vue p{max-height:none;opacity:1;margin-top:8px}
  .sb-planche-groupee .sb-vue .sb-tags{max-height:none;opacity:1;margin-top:12px}
  .sb-s-expertise-metiers.sb-planche-groupee .sb-vue p[class*="-texte"]{max-height:none}
}

/* ── LES BOÎTES DE LOGO SONT TOUTES DE LA MÊME HAUTEUR ───────────────────────
   Trois logos de trois chartes n'ont ni le même rapport ni la même graisse :
   à hauteur libre, la rangée se déformait et un petit logo laissait un trou
   au-dessus de son texte. La BOÎTE fait désormais la même hauteur partout, le
   logo s'y pose en bas à gauche, et seule sa largeur maximale varie. */
.sb-s-studio-collaborations h3::before,
.sb-s-realisations-carnets h3::before{
  height:64px;background-position:left bottom;margin-bottom:12px}
.sb-s-studio-collaborations h3.sb-c-co1-nom::before{height:34px;max-width:180px}
.sb-s-studio-collaborations h3.sb-c-co2-nom::before{height:52px;max-width:52px}
.sb-s-studio-collaborations h3.sb-c-co3-nom::before{height:52px;max-width:52px}

/* Les mêmes neuf illustrations, du côté de la page expertise. */
.sb-s-expertise-metiers h3.sb-c-m1-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='62%' cy='34%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Cg stroke='rgba(242,246,251,.14)' stroke-width='.8'%3E%3Cline x1='34' y1='96' x2='206' y2='96'/%3E%3Cline x1='120' y1='26' x2='120' y2='158'/%3E%3C/g%3E%3Cg stroke='rgba(242,246,251,.14)' stroke-width='.7'%3E%3Cline x1='60' y1='93' x2='60' y2='99'/%3E%3Cline x1='90' y1='93' x2='90' y2='99'/%3E%3Cline x1='150' y1='93' x2='150' y2='99'/%3E%3Cline x1='180' y1='93' x2='180' y2='99'/%3E%3Cline x1='117' y1='48' x2='123' y2='48'/%3E%3Cline x1='117' y1='72' x2='123' y2='72'/%3E%3Cline x1='117' y1='120' x2='123' y2='120'/%3E%3Cline x1='117' y1='144' x2='123' y2='144'/%3E%3C/g%3E%3Cg fill='rgba(242,246,251,.55)'%3E%3Ccircle cx='72' cy='124' r='2.4'/%3E%3Ccircle cx='96' cy='110' r='2'/%3E%3Ccircle cx='148' cy='128' r='2.2'/%3E%3Ccircle cx='88' cy='62' r='1.8'/%3E%3C/g%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m1-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Ccircle cx='166' cy='58' r='4.4' fill='%23000'/%3E%3Ccircle cx='166' cy='58' r='13' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='.8' stroke-dasharray='2 3'/%3E%3Ccircle cx='166' cy='58' r='22' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Ccircle cx='166' cy='58' r='4.4' fill='%23000'/%3E%3Ccircle cx='166' cy='58' r='13' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='.8' stroke-dasharray='2 3'/%3E%3Ccircle cx='166' cy='58' r='22' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='.7'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m2-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='58%' cy='40%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Cg fill='%230A1424' stroke='rgba(242,246,251,.14)' stroke-width='.8'%3E%3Crect x='36' y='104' width='50' height='50' rx='3'/%3E%3Crect x='156' y='56' width='50' height='98' rx='3'/%3E%3C/g%3E%3Crect x='96' y='78' width='50' height='76' rx='3' fill='%230D1E3C'/%3E%3Cg stroke='rgba(242,246,251,.26)' stroke-width='.7'%3E%3Cline x1='44' y1='118' x2='70' y2='118'/%3E%3Cline x1='44' y1='126' x2='64' y2='126'/%3E%3Cline x1='104' y1='94' x2='130' y2='94'/%3E%3Cline x1='104' y1='102' x2='124' y2='102'/%3E%3Cline x1='104' y1='110' x2='134' y2='110'/%3E%3Cline x1='164' y1='72' x2='190' y2='72'/%3E%3Cline x1='164' y1='80' x2='184' y2='80'/%3E%3Cline x1='164' y1='88' x2='194' y2='88'/%3E%3C/g%3E%3Cline x1='36' y1='162' x2='206' y2='162' stroke='rgba(91,140,255,.35)' stroke-width='.7'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m2-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect x='96' y='78' width='50' height='76' rx='3' fill='none' stroke='%23000' stroke-width='1'/%3E%3Ccircle cx='121' cy='66' r='3.4' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect x='96' y='78' width='50' height='76' rx='3' fill='none' stroke='%23000' stroke-width='1'/%3E%3Ccircle cx='121' cy='66' r='3.4' fill='%23000'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m3-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%' cy='48%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Cg stroke='rgba(242,246,251,.14)' stroke-width='.7'%3E%3Cline x1='80' y1='20' x2='80' y2='160'/%3E%3Cline x1='160' y1='20' x2='160' y2='160'/%3E%3Cline x1='40' y1='60' x2='200' y2='60'/%3E%3Cline x1='40' y1='120' x2='200' y2='120'/%3E%3C/g%3E%3Cpolygon fill='%23F2F6FB' points='126.5,79.2 126.5,88 115.5,88 115.5,79.2 104.5,71.5 104.5,82.5 104.5,88 104.5,89.1 104.5,99 104.5,104.5 115.5,104.5 115.5,99 126.5,99 126.5,104.5 137.5,104.5 137.5,99 137.5,89.1 137.5,88 137.5,82.5 137.5,71.5'/%3E%3Crect x='88' y='59' width='66' height='58' fill='none' stroke='rgba(91,140,255,.35)' stroke-width='.7' stroke-dasharray='2 3'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m3-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cg stroke='%23000' stroke-width='.9'%3E%3Cpath d='M95 66v-7M95 66h-7M147 66v-7M147 66h7M95 110v7M95 110h-7M147 110v7M147 110h7'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cg stroke='%23000' stroke-width='.9'%3E%3Cpath d='M95 66v-7M95 66h-7M147 66v-7M147 66h7M95 110v7M95 110h-7M147 110v7M147 110h7'/%3E%3C/g%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m4-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='34%' cy='40%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Ctext x='86' y='86' fill='%23F2F6FB' font-family='Georgia,serif' font-size='19'%3EDire juste,%3C/text%3E%3Ctext x='86' y='110' fill='%23F2F6FB' font-family='Georgia,serif' font-size='19'%3Eet longtemps.%3C/text%3E%3Cg stroke='rgba(242,246,251,.14)' stroke-width='.7'%3E%3Cline x1='86' y1='134' x2='176' y2='134'/%3E%3Cline x1='86' y1='142' x2='156' y2='142'/%3E%3Cline x1='86' y1='150' x2='186' y2='150'/%3E%3C/g%3E%3Cline x1='86' y1='62' x2='86' y2='158' stroke='rgba(91,140,255,.35)' stroke-width='.6' stroke-dasharray='1 4'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m4-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cg fill='%23000'%3E%3Cpath d='M48 78l-14 12 14 12v-7l-6-5 6-5z'/%3E%3Cpath d='M64 78l-14 12 14 12v-7l-6-5 6-5z'/%3E%3C/g%3E%3Cline x1='86' y1='120' x2='196' y2='120' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cg fill='%23000'%3E%3Cpath d='M48 78l-14 12 14 12v-7l-6-5 6-5z'/%3E%3Cpath d='M64 78l-14 12 14 12v-7l-6-5 6-5z'/%3E%3C/g%3E%3Cline x1='86' y1='120' x2='196' y2='120' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m5-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='56%' cy='46%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Cg fill='%230A1424' stroke='rgba(242,246,251,.14)' stroke-width='.8'%3E%3Crect x='22' y='50' width='58' height='68' rx='1'/%3E%3Crect x='86' y='50' width='58' height='68' rx='1'/%3E%3Crect x='150' y='50' width='58' height='68' rx='1'/%3E%3C/g%3E%3Cg stroke='rgba(91,140,255,.35)' stroke-width='.7' stroke-dasharray='3 3'%3E%3Cline x1='83' y1='46' x2='83' y2='122'/%3E%3Cline x1='147' y1='46' x2='147' y2='122'/%3E%3C/g%3E%3Cg stroke='rgba(242,246,251,.26)' stroke-width='.7'%3E%3Cline x1='29' y1='64' x2='62' y2='64'/%3E%3Cline x1='29' y1='71' x2='72' y2='71'/%3E%3Cline x1='29' y1='78' x2='72' y2='78'/%3E%3Cline x1='29' y1='85' x2='72' y2='85'/%3E%3Cline x1='29' y1='92' x2='72' y2='92'/%3E%3Cline x1='29' y1='99' x2='72' y2='99'/%3E%3Cline x1='29' y1='106' x2='72' y2='106'/%3E%3Cline x1='157' y1='64' x2='190' y2='64'/%3E%3Cline x1='157' y1='71' x2='200' y2='71'/%3E%3Cline x1='157' y1='78' x2='200' y2='78'/%3E%3Cline x1='157' y1='85' x2='200' y2='85'/%3E%3Cline x1='157' y1='92' x2='200' y2='92'/%3E%3Cline x1='157' y1='99' x2='200' y2='99'/%3E%3Cline x1='157' y1='106' x2='200' y2='106'/%3E%3C/g%3E%3Crect x='93' y='60' width='44' height='28' fill='%230D1E3C'/%3E%3Cg fill='%230E1F3E' stroke='rgba(242,246,251,.55)' stroke-width='.7'%3E%3Crect x='150' y='96' width='58' height='34' rx='2'/%3E%3Crect x='186' y='104' width='44' height='26' rx='2' fill='%230A1730'/%3E%3C/g%3E%3Cg stroke='rgba(242,246,251,.55)' stroke-width='.7'%3E%3Cline x1='158' y1='110' x2='180' y2='110'/%3E%3Cline x1='158' y1='117' x2='172' y2='117'/%3E%3C/g%3E%3Cg font-family='monospace' font-size='5.5' fill='rgba(242,246,251,.55)'%3E%3Ctext x='22' y='130'%3E3 mm%3C/text%3E%3C/g%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m5-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Ccircle cx='115' cy='74' r='3.6' fill='%23000'/%3E%3Crect x='18' y='46' width='194' height='76' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='.7' stroke-dasharray='2 3'/%3E%3Ccircle cx='160' cy='103' r='2.2' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Ccircle cx='115' cy='74' r='3.6' fill='%23000'/%3E%3Crect x='18' y='46' width='194' height='76' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='.7' stroke-dasharray='2 3'/%3E%3Ccircle cx='160' cy='103' r='2.2' fill='%23000'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m6-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%' cy='50%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Ccircle cx='120' cy='90' r='45' fill='none' stroke='rgba(242,246,251,.26)' stroke-width='.8'/%3E%3Ccircle cx='120' cy='90' r='41' fill='%23060B14' stroke='rgba(242,246,251,.14)' stroke-width='.7'/%3E%3Cg fill='rgba(242,246,251,.07)' stroke='rgba(242,246,251,.42)' stroke-width='.7'%3E%3Cpath d='M120.0 77.0L120.0 50.0A40 40 0 0 1 154.6 110.0L141.4 102.3Z'/%3E%3Cpath d='M131.3 83.5L154.6 70.0A40 40 0 0 1 120.0 130.0L120.0 114.7Z'/%3E%3Cpath d='M131.3 96.5L154.6 110.0A40 40 0 0 1 85.4 110.0L98.6 102.3Z'/%3E%3Cpath d='M120.0 103.0L120.0 130.0A40 40 0 0 1 85.4 70.0L98.6 77.6Z'/%3E%3Cpath d='M108.7 96.5L85.4 110.0A40 40 0 0 1 120.0 50.0L120.0 65.3Z'/%3E%3Cpath d='M108.7 83.5L85.4 70.0A40 40 0 0 1 154.6 70.0L141.4 77.6Z'/%3E%3C/g%3E%3Cpolygon points='126.5,78.7 133.0,90.0 126.5,101.3 113.5,101.3 107.0,90.0 113.5,78.7' fill='%2304070E'/%3E%3Cg stroke='rgba(91,140,255,.35)' stroke-width='.7'%3E%3Cline x1='82.5' y1='58.5' x2='77.9' y2='54.6'/%3E%3Cline x1='103.2' y1='44.0' x2='101.2' y2='38.3'/%3E%3Cline x1='128.5' y1='41.7' x2='129.6' y2='35.8'/%3E%3Cline x1='151.5' y1='52.5' x2='155.4' y2='47.9'/%3E%3Cline x1='166.0' y1='73.2' x2='171.7' y2='71.2'/%3E%3Cline x1='168.3' y1='98.5' x2='174.2' y2='99.6'/%3E%3Cline x1='157.5' y1='121.5' x2='162.1' y2='125.4'/%3E%3C/g%3E%3Cg font-family='monospace' font-size='5.5' fill='rgba(242,246,251,.55)'%3E%3Ctext x='52' y='128'%3Ef/1.4%3C/text%3E%3Ctext x='180' y='128'%3Ef/16%3C/text%3E%3C/g%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m6-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cpolygon points='126.5,78.7 133.0,90.0 126.5,101.3 113.5,101.3 107.0,90.0 113.5,78.7' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Ccircle cx='120' cy='90' r='2.4' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cpolygon points='126.5,78.7 133.0,90.0 126.5,101.3 113.5,101.3 107.0,90.0 113.5,78.7' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Ccircle cx='120' cy='90' r='2.4' fill='%23000'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m7-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%' cy='47%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Crect x='94' y='48' width='52' height='74' rx='3' fill='%230A1424' stroke='rgba(242,246,251,.26)' stroke-width='.8'/%3E%3Cg fill='rgba(242,246,251,.22)'%3E%3Crect x='86' y='52' width='4.5' height='6' rx='1'/%3E%3Crect x='86' y='64' width='4.5' height='6' rx='1'/%3E%3Crect x='86' y='76' width='4.5' height='6' rx='1'/%3E%3Crect x='86' y='88' width='4.5' height='6' rx='1'/%3E%3Crect x='86' y='100' width='4.5' height='6' rx='1'/%3E%3Crect x='86' y='112' width='4.5' height='6' rx='1'/%3E%3Crect x='150' y='52' width='4.5' height='6' rx='1'/%3E%3Crect x='150' y='64' width='4.5' height='6' rx='1'/%3E%3Crect x='150' y='76' width='4.5' height='6' rx='1'/%3E%3Crect x='150' y='88' width='4.5' height='6' rx='1'/%3E%3Crect x='150' y='100' width='4.5' height='6' rx='1'/%3E%3Crect x='150' y='112' width='4.5' height='6' rx='1'/%3E%3C/g%3E%3Cg stroke='rgba(242,246,251,.55)' stroke-width='.9'%3E%3Cline x1='102' y1='68' x2='102' y2='102'/%3E%3Cline x1='107' y1='75' x2='107' y2='95'/%3E%3Cline x1='112' y1='80' x2='112' y2='90'/%3E%3Cline x1='117' y1='80' x2='117' y2='90'/%3E%3Cline x1='122' y1='68' x2='122' y2='102'/%3E%3Cline x1='127' y1='75' x2='127' y2='95'/%3E%3Cline x1='132' y1='80' x2='132' y2='90'/%3E%3Cline x1='137' y1='80' x2='137' y2='90'/%3E%3C/g%3E%3Crect x='28' y='128' width='184' height='6' fill='none' stroke='rgba(242,246,251,.14)' stroke-width='.7'/%3E%3Crect x='28' y='128' width='36' height='6' fill='%235B8CFF' opacity='.65'/%3E%3Cline x1='134' y1='123' x2='134' y2='139' stroke='%23F2F6FB' stroke-width='.9'/%3E%3Cg font-family='monospace' font-size='5.5' fill='rgba(242,246,251,.55)'%3E%3Ctext x='28' y='60'%3E25 i/s%3C/text%3E%3Ctext x='176' y='60'%3E-14 LUFS%3C/text%3E%3C/g%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m7-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect x='100' y='128' width='50' height='6' fill='%23000' opacity='.85'/%3E%3Ccircle cx='120' cy='85' r='2.8' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect x='100' y='128' width='50' height='6' fill='%23000' opacity='.85'/%3E%3Ccircle cx='120' cy='85' r='2.8' fill='%23000'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m8-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='44%' cy='40%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Cg fill='%230A1424' stroke='rgba(242,246,251,.14)' stroke-width='.8'%3E%3Crect x='30' y='40' width='46' height='96' rx='4'/%3E%3Crect x='90' y='52' width='58' height='74' rx='4'/%3E%3Crect x='162' y='64' width='48' height='30' rx='3'/%3E%3C/g%3E%3Cg stroke='rgba(242,246,251,.26)' stroke-width='.7'%3E%3Cline x1='38' y1='104' x2='68' y2='104'/%3E%3Cline x1='38' y1='112' x2='60' y2='112'/%3E%3Cline x1='98' y1='100' x2='140' y2='100'/%3E%3Cline x1='98' y1='108' x2='128' y2='108'/%3E%3Cline x1='170' y1='82' x2='202' y2='82'/%3E%3C/g%3E%3Cg stroke='rgba(91,140,255,.35)' stroke-width='.7' stroke-dasharray='2 3'%3E%3Cline x1='76' y1='88' x2='90' y2='88'/%3E%3Cline x1='148' y1='88' x2='162' y2='88'/%3E%3C/g%3E%3Cg font-family='monospace' font-size='6' fill='rgba(242,246,251,.55)'%3E%3Ctext x='30' y='150'%3E9:16%3C/text%3E%3Ctext x='90' y='150'%3E4:5%3C/text%3E%3Ctext x='162' y='150'%3E16:9%3C/text%3E%3C/g%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m8-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Ccircle cx='53' cy='80' r='4' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Ccircle cx='53' cy='80' r='4' fill='%23000'/%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m9-nom::before{content:"";display:block;background:var(--encre-profonde) center/contain no-repeat;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%' cy='30%' r='86%'%3E%3Cstop offset='0' stop-color='%230E2244'/%3E%3Cstop offset='.6' stop-color='%23081428'/%3E%3Cstop offset='1' stop-color='%2305080F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3Cg stroke='rgba(242,246,251,.045)' stroke-width='.6'%3E%3Cline x1='30' y1='0' x2='30' y2='180'/%3E%3Cline x1='60' y1='0' x2='60' y2='180'/%3E%3Cline x1='90' y1='0' x2='90' y2='180'/%3E%3Cline x1='120' y1='0' x2='120' y2='180'/%3E%3Cline x1='150' y1='0' x2='150' y2='180'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cline x1='210' y1='0' x2='210' y2='180'/%3E%3Cline x1='0' y1='30' x2='240' y2='30'/%3E%3Cline x1='0' y1='60' x2='240' y2='60'/%3E%3Cline x1='0' y1='90' x2='240' y2='90'/%3E%3Cline x1='0' y1='120' x2='240' y2='120'/%3E%3Cline x1='0' y1='150' x2='240' y2='150'/%3E%3C/g%3E%3Crect x='24' y='24' width='192' height='118' rx='4' fill='%23F2F6FB'/%3E%3Crect x='24' y='24' width='192' height='14' rx='4' fill='%23E2E8F0'/%3E%3Cg fill='%238A98AA'%3E%3Ccircle cx='34' cy='31' r='2'/%3E%3Ccircle cx='42' cy='31' r='2'/%3E%3Ccircle cx='50' cy='31' r='2'/%3E%3C/g%3E%3Crect x='24' y='38' width='192' height='52' fill='%230B1220'/%3E%3Ctext x='40' y='70' fill='%23F2F6FB' font-family='Georgia,serif' font-size='14'%3EVotre marque, nette%3C/text%3E%3Cg fill='%23E2E8F0'%3E%3Crect x='40' y='100' width='48' height='26' rx='2'/%3E%3Crect x='96' y='100' width='48' height='26' rx='2'/%3E%3Crect x='152' y='100' width='48' height='26' rx='2'/%3E%3C/g%3E%3Cline x1='24' y1='154' x2='216' y2='154' stroke='rgba(242,246,251,.14)' stroke-width='.7'/%3E%3Ctext x='150' y='158' font-family='monospace' font-size='6' fill='rgba(242,246,251,.55)'%3ELCP 2,5 s%3C/text%3E%3C/svg%3E")}
.sb-s-expertise-metiers h3.sb-c-m9-nom::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Ccircle cx='190' cy='65' r='3.4' fill='%23000'/%3E%3Cline x1='24' y1='154' x2='140' y2='154' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Ccircle cx='190' cy='65' r='3.4' fill='%23000'/%3E%3Cline x1='24' y1='154' x2='140' y2='154' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E")}

/* ── LE TÉLÉPHONE ────────────────────────────────────────────────────────────
   Deux défauts vus par Yan sur un iPhone, et aucun ne se voyait sur l'écran de
   travail : la planche restait à trois colonnes, et le menu déroulant de
   WordPress s'ouvrait avec son habillage par défaut, en blanc sur blanc. */

/* La planche groupée n'avait AUCUNE règle de largeur : les neuf vues tenaient
   en trois colonnes jusque sur un écran de 390 px, réduites à des bandes. Et
   les titres de section, qui ne sont pas des vues, tombaient dans la première
   colonne au lieu de tenir toute la largeur. */
.sb-planche-groupee>*:not(.sb-vue){grid-column:1/-1}
@media (max-width:980px){
  .sb-planche-groupee{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .sb-planche-groupee{grid-template-columns:1fr;row-gap:18px}
  /* Sur un écran sans survol, la vue est déjà dépliée : sa hauteur suit son
     contenu, sinon le texte se coupe au milieu d'une phrase. */
  .sb-planche-groupee .sb-vue,
  .sb-s-expertise-metiers.sb-planche-groupee .sb-vue{height:auto}
  /* L'illustration et sa couche d'accent prennent le format du dessin (4:3),
     ensemble : à 170 px pour l'une et 150 pour l'autre, l'hexagone rose du
     diaphragme tombait à côté (Yan, 18.09.2026). */
  .sb-planche-groupee .sb-vue h3::before,
  .sb-s-expertise-metiers.sb-planche-groupee .sb-vue h3::before,
  .sb-planche-groupee .sb-vue h3::after,
  .sb-s-expertise-metiers.sb-planche-groupee .sb-vue h3::after{height:auto;aspect-ratio:4/3}
}

/* L'EN-TÊTE SUR TÉLÉPHONE. Le nom, le bouton du menu, et un appel à l'action
   raccourci : à 390 px, les trois ne tiennent qu'en rendant le bouton compact. */
@media (max-width:640px){
  .sb-entete{padding:10px 14px}
  .sb-entete-barre{gap:10px}
  .sb-lockup-nom b{font-size:1.32rem}
  .sb-lockup-nom span{font-size:.5rem}
  .sb-monogramme{width:calc(36px * 1528 / 1372);height:36px}
  .sb-entete-cta .wp-block-button__link{padding:8px 14px;font-size:.82rem}
  .sb-entete-nav{order:0;width:auto;margin-inline-start:auto}
}

/* LE MENU DÉROULANT DE WORDPRESS, ET LA LEÇON CORRIGÉE.
   Sa règle blanche est `.wp-block-navigation:not(.has-background) …{background:#fff}`.
   On avait répondu en donnant `backgroundColor` AU BLOC : ça éteignait bien le
   `:not(.has-background)`, mais ça peignait AUSSI la barre du bureau — un cadre
   sombre autour des liens, que Yan a vu le 16.09.2026. La bonne réponse est
   plus fine : `overlayBackgroundColor` seul habille le TIROIR, et la feuille
   rend son fond transparent à la barre. Une couleur d'attribut ne sait pas
   distinguer deux états ; un sélecteur, si. */
/* La barre du haut aligne ses liens à DROITE ; WordPress propage cette
   justification dans le tiroir, où elle n'a aucun sens : les liens s'y collaient
   au bord, coupés. Le tiroir aligne donc au départ, et prend ses marges. */
/* 🔴 LA JUSTIFICATION VIT SUR LA LISTE, PAS SUR LE CONTENEUR.
   La barre du bureau aligne ses liens à droite, et WordPress recopie cette
   justification sur le `<ul>` LUI-MÊME — `items-justified-right` et
   `is-content-justification-right`. Viser le conteneur ne suffisait donc pas :
   les liens restaient collés au bord droit dans le tiroir, ce que Yan a vu le
   17.09.2026 sur iPhone. La règle vise la LISTE, avec le poids qu'il faut. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  gap:0;align-items:stretch;text-align:left;
  padding:clamp(52px,14vw,90px) clamp(22px,7vw,40px) clamp(28px,8vw,44px);
  display:flex;flex-direction:column;min-height:100%}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container{
  align-items:stretch;justify-content:flex-start;text-align:left;
  flex-direction:column;gap:0;width:100%}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  align-items:stretch;text-align:left;width:100%}

/* PAS DE FILETS ENTRE LES ENTRÉES, ET DE L'AIR À LA PLACE.
   Le premier essai en posait un sous chacune : ça donnait une cible large au
   doigt, mais ça faisait aussi un tableau de quatre lignes serrées, et Yan l'a
   dit — « graphiquement, c'est pas terrible ». Quatre mots dans du noir, bien
   espacés, se lisent comme une liste sans qu'on ait à la souligner.

   🔴 ET LE FILET DE LA BARRE DÉBORDAIT ICI. La règle qui souligne la page
   active dans la barre est ancrée sur `.sb-entete-nav` — or WordPress RECOPIE
   cette classe sur la liste du tiroir. Le trait de la page active s'ajoutait
   donc au filet de séparation, deux lignes l'une sur l'autre. Dans le tiroir,
   la page active se dit par la COULEUR seule.

   L'ESPACE EST SUR LE `li`, PAS SUR LE `a`. WordPress pose son propre
   remplissage sur `.wp-block-navigation-item__content` et l'emportait : la
   marge écrite sur le lien ne se voyait pas, ce que trois captures ont montré
   avant que la cause soit trouvée. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  padding-block:clamp(14px,3.4vw,22px)}
.wp-block-navigation__responsive-container.is-menu-open a{
  color:var(--ivoire);text-decoration:none;font-family:var(--forum);
  font-size:clamp(1.6rem,6.6vw,2.2rem);line-height:1.15;
  display:block;width:100%;border:0}
/* ⚠️ RESTREINT AUX ENTRÉES DE MENU. Écrite sur tous les liens du tiroir, cette
   neutralisation effaçait aussi les codes FR/DE/EN, qui sont précisément des
   `::before`. Le sélecteur nomme donc l'entrée de navigation. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a::after,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a::before{
  content:none}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"]{
  color:var(--accent-encre)}

/* LE PIED DU TIROIR — l'appel à l'action et les langues, copiés par
   `js/site.js`. Ils n'existent que tiroir ouvert : sur le bureau, ils sont dans
   la barre, et deux exemplaires visibles se disputeraient le même rôle. */
.sb-tiroir-pied{display:none}
.wp-block-navigation__responsive-container.is-menu-open .sb-tiroir-pied{
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  margin-top:auto;padding-top:32px}
.wp-block-navigation__responsive-container.is-menu-open a.sb-tiroir-appel{
  font-family:var(--manrope);font-size:1rem;font-weight:500;line-height:1;
  width:auto;padding:16px 26px;border:0;border-radius:999px;
  background:var(--fond-bouton);color:var(--encre-bouton);box-shadow:var(--lueur)}
/* LES TROIS CODES RESPIRENT, ET PERDENT LE FILET DE LA BARRE.
   Le `border-left` et le retrait viennent de `.sb-entete .sb-langues` : dans la
   barre ils séparent les langues du menu, ici ils ne séparent de rien et
   laissaient un trait orphelin devant « FR ». L'écart passe de 14 à 30 px —
   trois paires de lettres serrées se lisent comme un seul mot. */
.wp-block-navigation__responsive-container.is-menu-open .sb-tiroir-langues{
  display:flex;gap:30px;margin:0;padding:0;list-style:none;border-left:0}
.wp-block-navigation__responsive-container.is-menu-open .sb-tiroir-langues a{
  font-family:var(--mono);font-size:0;letter-spacing:.12em;
  padding:0;border:0;width:auto;display:inline-block;color:var(--ivoire-doux)}
.wp-block-navigation__responsive-container.is-menu-open .sb-tiroir-langues a::before{
  font-size:.86rem}
.wp-block-navigation__responsive-container.is-menu-open
  .sb-tiroir-langues .current-lang a{color:var(--ivoire)}

/* La barre cède ses langues et son appel au tiroir : la règle est écrite plus
   bas, APRÈS celles des langues — à poids égal, c'est l'ordre qui tranche. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open{color:var(--ivoire)}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg{fill:currentColor}
/* LA CROIX SE POSE SUR LE BURGER, ET LES DEUX SE TOUCHENT FACILEMENT.
   WordPress colle la croix au coin du tiroir (0 px du haut, 0 du bord) :
   « un peu trop collée en haut et difficilement accessible », Yan, iPhone,
   18.09.2026. Mesuré à 390 px : burger à 16 px du haut et 14 px du bord,
   croix à 0 et 0, et les deux icônes font 24 px, sous les 44 px d'une cible
   tactile. La croix prend donc la place EXACTE du burger (le pouce ferme là
   où il a ouvert), et chaque bouton gagne 12 px de zone de toucher tout
   autour : 48 px, sans que l'icône bouge d'un pixel. */
/* Le burger garde sa place : sa zone de toucher est un pseudo-élément qui
   déborde de 12 px. Une marge négative le déplaçait de 12 px dans la barre. */
.wp-block-navigation__responsive-container-open{position:relative;-webkit-tap-highlight-color:transparent}
.wp-block-navigation__responsive-container-open::after{content:"";position:absolute;inset:-12px}
/* La croix est posée en absolu par WordPress : elle prend le rembourrage et
   la place exacte de l'icône du burger (16 px du haut, 14 px du bord). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  padding:12px;margin:0;border-radius:999px;-webkit-tap-highlight-color:transparent;
  top:calc(4px + env(safe-area-inset-top,0px));right:calc(2px + env(safe-area-inset-right,0px))}
.wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible{outline:2px solid var(--accent-encre);outline-offset:-4px}

/* ── LES QUATRE POINTS DE DÉPART, ET LEUR SIGNE ──────────────────────────────
   Quatre colonnes séparées par un filet se lisaient comme un tableau. Chacune
   reçoit un petit signe cosmique, qui dit la situation avant qu'on la lise :
   une supernova pour ce qui se lance, une éclipse pour ce qui se refond, une
   étoile seule pour qui EST sa marque, une constellation pour ce qui
   s'ordonne. Décor, donc CSS — et le même vocabulaire que le ciel du héros. */
.sb-s-accueil-pourqui h3::before{
  content:"";display:block;width:30px;height:30px;margin-bottom:12px;
  background:left center/contain no-repeat}
/* LES SIGNES SUIVENT LA LUMIÈRE DU STUDIO (18.09.2026). Leurs couleurs étaient
   écrites dans des SVG en image, où une variable CSS n'entre pas : la roue de
   la lumière faisait tourner les boutons et le ciel, et les quatre signes
   restaient braise fixe. Yan l'a vu sur iPhone. Chaque signe se sépare donc en
   deux couches : ce qui est NEUTRE reste une image ; ce qui est BRAISE devient
   un masque, peint par `var(--braise)`, donc tourne avec la roue. `::before`
   et `::after` se superposent au même endroit : sous le filet (18 px). */
.sb-s-accueil-pourqui h3{position:relative}
.sb-s-accueil-pourqui h3::after{content:"";position:absolute;left:0;top:18px;width:30px;height:30px;
  background:var(--braise);pointer-events:none}
.sb-s-accueil-pourqui h3.sb-c-q1-nom::before{background:color-mix(in srgb,var(--braise) 70%,var(--braise-haute));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 4v8M20 28v8M4 20h8M28 20h8M9 9l5 5M26 26l5 5M31 9l-5 5M14 26l-5 5'/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 4v8M20 28v8M4 20h8M28 20h8M9 9l5 5M26 26l5 5M31 9l-5 5M14 26l-5 5'/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat}
.sb-s-accueil-pourqui h3.sb-c-q1-nom::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='5' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='5' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat}
.sb-s-accueil-pourqui h3.sb-c-q2-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='11' fill='none' stroke='rgba(242,246,251,.55)' stroke-width='1.4'/%3E%3C/svg%3E")}
.sb-s-accueil-pourqui h3.sb-c-q2-nom::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M26 11a11 11 0 0 1 0 18 13 13 0 0 0 0-18z' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M26 11a11 11 0 0 1 0 18 13 13 0 0 0 0-18z' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat}
.sb-s-accueil-pourqui h3.sb-c-q3-nom::before{background:color-mix(in srgb,color-mix(in srgb,var(--braise) 70%,var(--braise-haute)) 45%,transparent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='13' fill='none' stroke='%23000' stroke-width='1.2' stroke-dasharray='2 4'/%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='13' fill='none' stroke='%23000' stroke-width='1.2' stroke-dasharray='2 4'/%3E%3C/svg%3E") left center/contain no-repeat}
.sb-s-accueil-pourqui h3.sb-c-q3-nom::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='6' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='6' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat}
.sb-s-accueil-pourqui h3.sb-c-q4-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='rgba(242,246,251,.5)' stroke-width='1.2'%3E%3Cpath d='M8 28l9-14 8 6 7-11'/%3E%3C/g%3E%3Cg fill='rgba(242,246,251,.75)'%3E%3Ccircle cx='8' cy='28' r='2.4'/%3E%3Ccircle cx='17' cy='14' r='2.4'/%3E%3Ccircle cx='25' cy='20' r='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.sb-s-accueil-pourqui h3.sb-c-q4-nom::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='32' cy='9' r='3.4' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='32' cy='9' r='3.4' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat}

.sb-c-pourqui-suite{grid-column:1/-1;grid-row:5;--mesure:62ch;margin-top:26px;
  color:var(--ivoire-doux)}
.sb-c-pourqui-lien{grid-column:1/-1;grid-row:6;margin-top:18px}

/* ════════════════════════════════════════════════════════════════════════════
   LE DUO DE BOUTONS, LA PAGE OFFRES, LES PORTES DU CONTACT
   Écrit après le reste : ces règles passent devant celles qui les précèdent
   à spécificité égale, et c'est voulu. Chaque règle qui vise UN champ porte
   la SECTION et la BALISE — la leçon apprise six fois.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── DEUX BOUTONS CÔTE À CÔTE ────────────────────────────────────────────────
   Les champs d'une section sont des FRÈRES dans une grille : deux boutons s'y
   empilent l'un sous l'autre, faute de conteneur — et la compilation n'en
   transporterait aucun. `js/site.js` les regroupe donc au chargement dans un
   `.sb-duo`. Sans JavaScript, ils restent empilés : lisible, cliquable, juste
   moins joli. C'est le même geste que `.sb-vue` sur la planche contact. */
[class*="sb-s-"] .sb-duo{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  width:100%;justify-self:start;margin-block:0}
/* Le bouton PRIMAIRE est plein et à fort contraste : encre profonde sur braise,
   5,99:1 — de quoi porter du texte, ce que le magenta de la maison ne faisait
   pas. Le SECONDAIRE est un filet froid : il emmène ailleurs, il n'appelle pas. */
/* DANS LE DUO, LES EMBALLAGES NE PRENNENT PLUS TOUTE LA LARGEUR.
   La règle générale donne `width:100%` au conteneur `wp:buttons` — c'est ce qui
   l'empêche d'être centré quand il est seul. Dans le duo, c'est le flex qui
   aligne : deux conteneurs à 100 % se renvoyaient l'un sous l'autre. */
[class*="sb-s-"] .sb-duo>*{width:auto;flex:0 0 auto;margin-block:0}
[class*="sb-s-"] .sb-duo a[class*="-cta"]{color:var(--encre-bouton);font-weight:600}
[class*="sb-s-"] .sb-duo a[class*="-lien"]{border-color:var(--bleu-froid);color:var(--ivoire)}
a[class*="-cta"],[class*="-cta"] a{color:var(--encre-bouton);font-weight:600}

/* Le défilement doux n'existe QUE pour le bouton primaire, qui ramène en bas de
   la page. Il se tait si la machine demande moins de mouvement. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[class*="sb-s-"][id]{scroll-margin-top:84px}

/* ── LA PAGE OFFRES ──────────────────────────────────────────────────────────
   Trois formules, cinq champs frères chacune, une plaque commune : même
   grammaire que la planche contact et que les neuf domaines. */
.sb-s-offres-ouverture{
  background:radial-gradient(150% 85% at 52% -10%,rgba(27,79,216,.32),transparent 58%),
             radial-gradient(55% 50% at 86% 70%,rgba(240,96,58,.10),transparent 74%),var(--encre-profonde);
  gap:0;align-content:start;min-block-size:var(--heros-hauteur);
  padding-block:var(--heros-haut) var(--heros-bas)}
.sb-s-offres-ouverture h1{font-family:var(--forum);font-weight:400;line-height:1.02;
  letter-spacing:-.015em;font-size:clamp(2.6rem,6.4vw,5rem);
  padding-inline-end:max(0px,calc(100% - 18ch));text-wrap:balance}
.sb-s-offres-ouverture p[class*="-chapo"]{font-size:1.28rem;line-height:1.5;--mesure:58ch}

.sb-s-offres-formules{grid-template-columns:repeat(3,1fr);column-gap:18px;row-gap:0;
  align-content:start}
.sb-s-offres-formules>p[class*="-surtitre"]{grid-column:1/-1;grid-row:1}
.sb-s-offres-formules>h2{grid-column:1/-1;grid-row:2;margin-block:var(--saut-sur) var(--saut-titre)}
.sb-s-offres-formules h3{grid-row:3;margin-block:0;font-family:var(--forum);font-weight:400;
  font-size:1.9rem;line-height:1;padding:26px 22px 0;scroll-margin-top:90px;
  background:var(--encre-plaque);border:1px solid var(--filet-encre);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0}
.sb-s-offres-formules p[class*="-prix"]{grid-row:4;margin-block:0;padding:10px 22px 0;
  font-family:var(--mono);font-weight:500;font-size:1.05rem;letter-spacing:.02em;
  color:var(--accent-encre);font-variant-numeric:tabular-nums;
  background:var(--encre-plaque);border-inline:1px solid var(--filet-encre)}
.sb-s-offres-formules p[class*="-pour"]{grid-row:5;margin-block:0;padding:4px 22px 14px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivoire-sourd);background:var(--encre-plaque);
  border-inline:1px solid var(--filet-encre)}
.sb-s-offres-formules p[class*="-texte"]{grid-row:6;margin-block:0;padding:0 22px 16px;
  background:var(--encre-plaque);border-inline:1px solid var(--filet-encre)}
/* LES INCLUSIONS EN PASTILLES — même objet que les étiquettes d'Expertise, même
   vocabulaire. `js/site.js` découpe la ligne sur les points médians ; la feuille
   en fait une rangée qui se replie, et chaque bout prend la forme oblongue. */
/* LES PASTILLES NE S'ÉTIRENT PAS, ET LEURS RANGÉES NON PLUS.
   Mesuré le 17.09.2026, à la demande de Yan : 26,8 px dans la première
   colonne, 35 px dans les deux autres — à fontes, `padding` et `line-height`
   identiques. La cause n'est pas dans la pastille, elle est dans la boîte.

   Les trois cartes ont la MÊME hauteur, imposée par la grille. Ce paragraphe
   est un conteneur flexible qui enveloppe, et il reçoit donc une hauteur
   définie plus grande que son contenu. `align-content` valant `normal`, cette
   hauteur en trop se répartit entre les RANGÉES, et `align-items` normal étire
   chaque pastille à la hauteur de sa rangée. Cinq rangées dans la première
   colonne, quatre dans les autres : le même surplus divisé par cinq ou par
   quatre, d'où les 8 px d'écart.

   La vérification tient en une addition : 5×26,8 + 4×6 = 158, et
   4×35 + 3×6 = 158. Exactement la même boîte.

   Les deux déclarations ci-dessous disent donc « range en haut, et ne dilate
   rien » — le surplus reste au bas du paragraphe, où personne ne le voit. */
.sb-s-offres-formules p.sb-pastilles{display:flex;flex-wrap:wrap;gap:6px;
  align-content:flex-start;align-items:flex-start}
.sb-s-offres-formules p.sb-pastilles span{
  padding:4px 10px;border-radius:999px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.04em;line-height:1.5;color:var(--ivoire-doux);
  background:rgba(242,246,251,.06);border:1px solid var(--filet-encre)}
/* UN SEUL BLOC DE PASTILLES, ET L'INTITULÉ QUI DIT SA NATURE.
   Le périmètre a été coupé en deux le 17.09.2026 — un socle « Toujours » et un
   second bloc — pour que la carte cesse de poser un périmètre MAXIMUM à côté
   d'un prix MINIMUM. Yan a préféré revenir à un bloc unique le même jour :
   « comme c'était avant, selon le périmètre, et tu mets tous les trucs
   dedans ». L'intitulé reste, et c'est lui qui porte désormais toute la
   correction : il dit que la liste est un périmètre possible, pas une promesse.

   L'INTITULÉ EST DANS LA FEUILLE, ET C'EST UNE DETTE ASSUMÉE. « Selon le
   périmètre » se répète à l'identique sur les trois cartes : en faire un champ
   ajouterait trois entrées au document de contenu pour trois mots. Le jour où
   une deuxième langue sera traduite, il devra devenir un champ — une règle CSS
   ne se traduit pas. */
.sb-s-offres-formules p[class*="-inclus"]{grid-row:7;margin-block:0;padding:16px 22px 26px;
  font-size:.92rem;color:var(--ivoire);background:var(--encre-plaque);
  border:1px solid var(--filet-encre);border-top:0;border-radius:0 0 var(--r) var(--r);
  box-shadow:inset 0 1px 0 var(--filet-encre)}
.sb-s-offres-formules p[class*="-inclus"]::before{content:"Selon le périmètre";
  display:block;width:100%;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ivoire-sourd);
  margin-bottom:8px}
.sb-c-o1-nom,.sb-c-o1-prix,.sb-c-o1-pour,.sb-c-o1-texte,.sb-c-o1-inclus{grid-column:1}
.sb-c-o2-nom,.sb-c-o2-prix,.sb-c-o2-pour,.sb-c-o2-texte,.sb-c-o2-inclus{grid-column:2}
.sb-c-o3-nom,.sb-c-o3-prix,.sb-c-o3-pour,.sb-c-o3-texte,.sb-c-o3-inclus{grid-column:3}
/* SUR TABLETTE ET TÉLÉPHONE, UNE SEULE COLONNE — ET ICI, PAS PLUS HAUT.
   La règle à une colonne vivait dans le bloc « Largeurs » (980 px), écrit AVANT
   celui-ci : à poids égal, le `repeat(3,1fr)` ci-dessus la battait. Les cartes,
   elles, étaient bien placées en colonne 1 : sur iPhone, elles s'entassaient
   dans le premier tiers de l'écran (198 px sur 350), avec deux pistes vides à
   droite. Relevé par Yan le 18.09.2026 (« Bug affichage »). */
@media (max-width:980px){
  .sb-s-offres-formules{grid-template-columns:1fr}
}

.sb-s-offres-cadre{gap:0}
.sb-s-offres-cadre h2{margin-block:var(--saut-sur) var(--saut-titre)}
.sb-s-offres-cadre p[class*="sb-c-cadre-"]{--mesure:74ch;color:var(--ivoire-doux);
  padding-block:16px;border-top:1px solid var(--filet-encre)}
/* DES PUCES DISCRÈTES (Yan, 18.09.2026) : un point de braise au début de
   chaque engagement, aligné sur la première ligne. Il suit la lumière du
   studio, comme les signes de l'accueil. */
.sb-s-offres-cadre :is(.sb-c-cadre-1,.sb-c-cadre-2,.sb-c-cadre-3){position:relative;padding-left:22px}
.sb-s-offres-cadre :is(.sb-c-cadre-1,.sb-c-cadre-2,.sb-c-cadre-3)::before{content:"";position:absolute;left:2px;
  top:calc(16px + .75em - 3px);width:6px;height:6px;border-radius:50%;
  background:var(--braise);opacity:.85}
.sb-s-offres-echange{background:var(--papier);color:var(--texte);gap:0}
.sb-s-offres-echange p[class*="-texte"]{color:var(--texte-doux);font-size:1.15rem;--mesure:56ch}
.sb-s-offres-echange h2{padding-inline-end:max(0px,calc(100% - 20ch))}
.sb-s-offres-echange p[class*="-reassurance"]{color:var(--texte-doux)}


.sb-s-contact-formulaire{background:var(--encre);gap:14px}
.sb-s-contact-formulaire h2{margin-block:0}
.sb-s-contact-formulaire p[class*="-chapo"]{--mesure:58ch;font-size:1.1rem}
/* LE FORMULAIRE EST UN COURT-CODE DANS UN CHAMP DE TEXTE, ET C'EST VOULU.
   Le prototype affiche le court-code en clair — il dit où le formulaire va —
   et WordPress l'exécute. Une seule source, aucun bloc que la compilation
   perdrait, et le client peut changer le formulaire sans toucher au thème. */
.sb-s-contact-formulaire p[class*="-corps"]{margin-top:16px;--mesure:none;max-width:720px}
/* LE PARAGRAPHE DU COURT-CODE RESTE VIDE, ET C'EST NORMAL.
   Fluent Forms rend un `<div>` ; un `<div>` dans un `<p>` est interdit, et le
   navigateur le SORT du paragraphe. Il reste donc un `<p>` vide là où le
   court-code était écrit — qui affichait le cadre en pointillés de
   l'emplacement, sous le vrai formulaire. Vu à l'écran le 16.09.2026. */
.sb-s-contact-formulaire p[class*="-corps"]:empty{display:none}
.sb-s-contact-formulaire p[class*="-corps"]:not(:empty){padding:22px;
  border:1px dashed var(--filet-encre-fort);border-radius:var(--r);
  background:var(--encre-plaque);color:var(--ivoire-sourd);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}
.sb-s-contact-formulaire .fluentform,.sb-s-contact-formulaire .wp-block-fluentfom-guten-block{
  grid-column:1/-1;width:100%;max-width:min(100%,720px)}

@media (max-width:980px){
  /* Une colonne : les trois cartes s'empilent, et chaque champ reprend sa
     rangée à la suite. Cinq champs par carte — 3 à 7, 8 à 12, 13 à 17. Un
     décalage ici n'échoue pas : il superpose deux textes en silence, et c'est
     `tools/standards/grille.py` qui le voit. */
  .sb-s-offres-formules h3.sb-c-o2-nom,
  .sb-s-offres-formules p.sb-c-o2-prix,
  .sb-s-offres-formules p.sb-c-o2-pour,
  .sb-s-offres-formules p.sb-c-o2-texte,
  .sb-s-offres-formules p.sb-c-o2-inclus,
  .sb-s-offres-formules h3.sb-c-o3-nom,
  .sb-s-offres-formules p.sb-c-o3-prix,
  .sb-s-offres-formules p.sb-c-o3-pour,
  .sb-s-offres-formules p.sb-c-o3-texte,
  .sb-s-offres-formules p.sb-c-o3-inclus{grid-column:1}
  .sb-s-offres-formules h3.sb-c-o2-nom{grid-row:8}
  .sb-s-offres-formules p.sb-c-o2-prix{grid-row:9}
  .sb-s-offres-formules p.sb-c-o2-pour{grid-row:10}
  .sb-s-offres-formules p.sb-c-o2-texte{grid-row:11}
  .sb-s-offres-formules p.sb-c-o2-inclus{grid-row:12}
  .sb-s-offres-formules h3.sb-c-o3-nom{grid-row:13}
  .sb-s-offres-formules p.sb-c-o3-prix{grid-row:14}
  .sb-s-offres-formules p.sb-c-o3-pour{grid-row:15}
  .sb-s-offres-formules p.sb-c-o3-texte{grid-row:16}
  .sb-s-offres-formules p.sb-c-o3-inclus{grid-row:17}
}
@media (max-width:560px){
  [class*="sb-s-"] .sb-duo{flex-direction:column;align-items:stretch}
  [class*="sb-s-"] .sb-duo a{justify-content:center}
}

/* ── LES ÉTIQUETTES D'UN DOMAINE ─────────────────────────────────────────────
   Un tag, un champ : le client en ajoute ou en retire un sans toucher au reste,
   et la compilation n'a rien de particulier à transporter. `js/site.js` les
   réunit dans une rangée — sans lui, ils s'empilent, ce qui reste lisible. */
.sb-planche-groupee .sb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--ease),opacity .3s var(--ease),margin-top .45s var(--ease)}
.sb-planche-groupee .sb-vue.sb-vu .sb-tags{max-height:9em;opacity:1}
/* Les étiquettes ne suivent PAS le repli des paragraphes : c'est leur
   conteneur qui se replie. Sans ça, `max-height:0` les réduisait à une pastille
   de huit pixels — le remplissage seul — et le texte disparaissait dedans. */
.sb-planche-groupee .sb-vue .sb-tags p{max-height:none;opacity:1;overflow:visible}
.sb-planche-groupee .sb-tags p{margin:0;padding:4px 10px;border-radius:999px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--ivoire-doux);background:rgba(242,246,251,.06);
  border:1px solid var(--filet-encre);white-space:nowrap}
@media (max-width:620px){
  .sb-planche-groupee .sb-tags{max-height:none;opacity:1;margin-top:12px}
}

/* ── FLUENT FORMS, HABILLÉ PAR LA MAISON ─────────────────────────────────────
   Le plugin arrive avec sa propre feuille, faite pour un thème clair. On ne la
   désactive pas — elle porte la logique d'erreur et de validation — on repeint
   par-dessus, et uniquement dans notre section : un formulaire posé ailleurs
   garderait son apparence d'origine. */
.sb-s-contact-formulaire .frm-fluent-form{max-width:720px}
.sb-s-contact-formulaire .ff-el-group{margin-bottom:18px}
.sb-s-contact-formulaire .ff-el-input--label label{font-family:var(--manrope);
  font-weight:400;font-size:.94rem;color:var(--ivoire-doux);margin-bottom:8px}
.sb-s-contact-formulaire .ff-el-is-error .text-danger,
.sb-s-contact-formulaire .ff-el-input--label .ff-el-is-required{color:var(--accent-encre)}
.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{
  width:100%;background:var(--encre-plaque);color:var(--ivoire);
  border:1px solid var(--filet-encre-fort);border-radius:12px;
  padding:14px 16px;font-family:var(--manrope);font-weight:300;font-size:1rem;
  line-height:1.5;box-shadow:none;transition:border-color .2s var(--ease)}
.sb-s-contact-formulaire input::placeholder,.sb-s-contact-formulaire textarea::placeholder{
  color:var(--ivoire-sourd)}
.sb-s-contact-formulaire input:focus,.sb-s-contact-formulaire textarea:focus{
  border-color:var(--bleu-froid);outline:2px solid transparent;outline-offset:2px}
.sb-s-contact-formulaire .ff-btn-submit{display:inline-flex;align-items:center;
  padding:14px 26px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--manrope);font-weight:600;font-size:1rem;
  background:var(--fond-bouton);color:var(--encre-bouton);box-shadow:var(--lueur)}
.sb-s-contact-formulaire .ff-btn-submit:hover{transform:translateY(-2px)}
.sb-s-contact-formulaire .ff-message-success{background:rgba(242,246,251,.06);
  border:1px solid var(--filet-encre-fort);border-radius:var(--r);
  padding:18px 20px;color:var(--ivoire)}

/* ── LES OFFRES SUR L'ACCUEIL ────────────────────────────────────────────────
   Trois formules en trois champs frères chacune : le nom, le seuil, la phrase.
   La page Offres dit le reste — ici on donne l'ordre de grandeur, qui est la
   seule chose qu'on cherche sur un accueil. */
.sb-s-accueil-offres{background:var(--encre-plaque);
  grid-template-columns:repeat(3,1fr);column-gap:18px;row-gap:0;align-content:start}
.sb-s-accueil-offres>[class*="-surtitre"]{grid-column:1/-1;grid-row:1;
  margin-block:0 var(--saut-sur)}
.sb-s-accueil-offres>h2{grid-column:1/-1;grid-row:2;margin-block:0 var(--saut-titre)}
.sb-s-accueil-offres h3{grid-row:3;margin-block:0;font-family:var(--forum);font-weight:400;
  font-size:1.7rem;line-height:1.05;padding:24px 20px 0;
  background:var(--encre);border:1px solid var(--filet-encre);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0}
.sb-s-accueil-offres p[class*="-texte"]{grid-row:4;margin-block:0;padding:12px 20px 26px;
  font-size:.96rem;background:var(--encre);border:1px solid var(--filet-encre);border-top:0;
  border-radius:0 0 var(--r) var(--r)}
.sb-s-accueil-offres a[class*="-lien"],.sb-s-accueil-offres div[class*="-lien"]{
  grid-column:1/-1;grid-row:5;margin-block:var(--pile) 0}
.sb-c-f1-nom,.sb-c-f1-texte{grid-column:1}
.sb-c-f2-nom,.sb-c-f2-texte{grid-column:2}
.sb-c-f3-nom,.sb-c-f3-texte{grid-column:3}
/* LES SIGNES DES OFFRES (18.09.2026). « Rendre un petit peu moins monotone
   cette partie », Yan : trois cartes identiques, un nom et une ligne. Chaque
   offre reçoit un signe du même ciel que « D'où partez-vous ? », qui dit sa
   PROFONDEUR avant qu'on la lise : un astre seul pour Signature, un astre et
   son satellite pour Marque entière, un système à deux orbites pour
   Architecture de marque. Les orbites sont neutres (image) ; les astres sont
   en braise (masque), donc suivent la lumière du studio. */
.sb-s-accueil-offres h3{position:relative}
/* LE PARAGRAPHE SUIT SON TITRE AU-DESSUS DE LA LUEUR DU VISEUR. Positionné
   pour porter son signe, le titre passait devant `.sb-viseur::before`
   (absolu, z-index 0) ; le paragraphe, resté dessous, prenait la teinte de la
   lueur au toucher : deux tons dans une même carte, sur iPhone (Yan,
   18.09.2026). Les deux champs de la carte sont maintenant au même plan. */
.sb-s-accueil-offres p[class*="-texte"],.sb-s-accueil-pourqui h3+p{position:relative}
.sb-s-accueil-offres h3::before{content:"";display:block;width:34px;height:34px;margin-bottom:16px;
  background:left center/contain no-repeat}
.sb-s-accueil-offres h3::after{content:"";position:absolute;left:20px;top:24px;width:34px;height:34px;
  background:var(--braise);pointer-events:none}
.sb-s-accueil-offres h3.sb-c-f1-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='11' fill='none' stroke='rgba(242,246,251,.45)' stroke-width='1' stroke-dasharray='1.5 3.5'/%3E%3C/svg%3E")}
.sb-s-accueil-offres h3.sb-c-f1-nom::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat}
.sb-s-accueil-offres h3.sb-c-f2-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='13' fill='none' stroke='rgba(242,246,251,.45)' stroke-width='1.2'/%3E%3C/svg%3E")}
.sb-s-accueil-offres h3.sb-c-f2-nom::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='4.5' fill='%23000'/%3E%3Ccircle cx='30.0' cy='11.6' r='2.6' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='4.5' fill='%23000'/%3E%3Ccircle cx='30.0' cy='11.6' r='2.6' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat}
.sb-s-accueil-offres h3.sb-c-f3-nom::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='8.5' fill='none' stroke='rgba(242,246,251,.45)' stroke-width='1.1'/%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='rgba(242,246,251,.45)' stroke-width='1.1'/%3E%3C/svg%3E")}
.sb-s-accueil-offres h3.sb-c-f3-nom::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='3.6' fill='%23000'/%3E%3Ccircle cx='25.5' cy='13.5' r='2.2' fill='%23000'/%3E%3Ccircle cx='6.1' cy='28.0' r='2.2' fill='%23000'/%3E%3Ccircle cx='35.0' cy='25.5' r='2.2' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='3.6' fill='%23000'/%3E%3Ccircle cx='25.5' cy='13.5' r='2.2' fill='%23000'/%3E%3Ccircle cx='6.1' cy='28.0' r='2.2' fill='%23000'/%3E%3Ccircle cx='35.0' cy='25.5' r='2.2' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat}

/* ── LA DIRECTION DU STUDIO ──────────────────────────────────────────────────
   LE PORTRAIT EST POSÉ EN FOND, comme les logos des carnets. Un `wp:image`
   compilé arrive SANS fichier — le média vit dans la médiathèque — et une page
   faite de patterns ne se ré-édite pas sans la détacher : l'image serait donc
   restée vide sur le site servi. En décor, elle suit le thème, elle est la même
   des deux côtés, et le texte de la section dit qui c'est. */
.sb-s-studio-yan{background:var(--encre-abysse);
  grid-template-columns:minmax(0,250px) minmax(0,1fr);column-gap:clamp(28px,4vw,52px);
  row-gap:0;align-content:start}
/* LE PORTRAIT EST UN `::after`, ET C'EST UNE CORRECTION, PAS UN GOÛT.
   `js/site.js` pose la classe `sb-viseur` sur les sections d'encre — la lueur
   douce qui suit le pointeur — et cette lueur EST le `::before` de la section :
   `position:absolute; inset:0; opacity:0`. Le portrait posé au même endroit
   héritait de tout ça et ne se voyait jamais. Mesuré le 16.09.2026 : opacité 0,
   position absolue, alors que la règle du portrait n'écrit ni l'une ni l'autre.
   Le `::after` de cette section, lui, est libre : la trame de grain ne la vise
   pas. */
.sb-s-studio-yan::after{content:"";grid-column:1;grid-row:1/span 4;
  position:relative;z-index:1;
  aspect-ratio:1;width:100%;max-width:250px;border-radius:var(--r);
  background:var(--encre-plaque) center/cover no-repeat;
  background-image:url("../assets/images/yan-haltey.jpg");
  box-shadow:0 26px 60px -28px #000;
  /* Le filet froid le rattache à la palette : sans lui, le portrait est la
     seule chose chaude de la page et il crie. */
  outline:1px solid var(--filet-encre);outline-offset:-1px}
.sb-s-studio-yan>[class*="-surtitre"]{grid-column:2;grid-row:1;margin-block:0 var(--saut-sur)}
.sb-s-studio-yan>h2{grid-column:2;grid-row:2;margin-block:0 6px}
.sb-s-studio-yan p[class*="-role"]{grid-column:2;grid-row:3;margin-block:0 26px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-encre)}
.sb-s-studio-yan p[class*="sb-c-yan-1"]{grid-column:2;grid-row:4;--mesure:66ch;
  margin-block:0;color:var(--ivoire-doux);line-height:1.62}
.sb-s-studio-collaborations p[class*="-chapo"]{grid-column:1/-1;grid-row:3;
  --mesure:64ch;margin-block:0 var(--saut-titre);font-size:1.08rem}

@media (max-width:860px){
  .sb-s-accueil-offres{grid-template-columns:1fr}
  .sb-s-accueil-offres h3.sb-c-f1-nom,
  .sb-s-accueil-offres p.sb-c-f1-texte,
  .sb-s-accueil-offres h3.sb-c-f2-nom,
  .sb-s-accueil-offres p.sb-c-f2-texte,
  .sb-s-accueil-offres h3.sb-c-f3-nom,
  .sb-s-accueil-offres p.sb-c-f3-texte{grid-column:1}
  .sb-s-accueil-offres h3.sb-c-f2-nom{grid-row:5}
  .sb-s-accueil-offres p.sb-c-f2-texte{grid-row:6}
  .sb-s-accueil-offres h3.sb-c-f3-nom{grid-row:7}
  .sb-s-accueil-offres p.sb-c-f3-texte{grid-row:8}
  .sb-s-accueil-offres p[class*="sb-c-f1-texte"],
  .sb-s-accueil-offres p[class*="sb-c-f2-texte"]{margin-block:0 var(--pile)}
  .sb-s-accueil-offres a[class*="-lien"],
  .sb-s-accueil-offres div[class*="-lien"]{grid-row:9}
  .sb-s-studio-yan{grid-template-columns:1fr}
  .sb-s-studio-yan::after{grid-column:1;grid-row:1;max-width:260px;margin-bottom:28px}
  .sb-s-studio-yan>[class*="-surtitre"]{grid-column:1;grid-row:2}
  .sb-s-studio-yan>h2{grid-column:1;grid-row:3}
  .sb-s-studio-yan p[class*="-role"]{grid-column:1;grid-row:4}
  .sb-s-studio-yan p[class*="sb-c-yan-1"]{grid-column:1;grid-row:5}
}

/* ── LA DÉRIVE DES VIGNETTES ─────────────────────────────────────────────────
   Les illustrations sont des ORBITES, pas des schémas : rien d'orthogonal, que
   des arcs et des trajectoires. Et comme une orbite se déplace, le fond dérive
   de deux pour cent en vingt-huit secondes — assez pour être vivant, trop lent
   pour être regardé. Le décalage par vue évite que les neuf respirent ensemble. */
@keyframes derive{
  from{background-position:44% 48%}
  to{background-position:56% 52%}}
@media (prefers-reduced-motion:no-preference){
  .sb-s-expertise-metiers h3[class*="-nom"]::before{
    animation:derive 28s ease-in-out infinite alternate}
  .sb-c-m2-nom::before{animation-delay:-4s}.sb-c-m3-nom::before{animation-delay:-8s}
  .sb-c-m4-nom::before{animation-delay:-12s}.sb-c-m5-nom::before{animation-delay:-16s}
  .sb-c-m6-nom::before{animation-delay:-20s}.sb-c-m7-nom::before{animation-delay:-24s}
  .sb-c-m8-nom::before{animation-delay:-6s}.sb-c-m9-nom::before{animation-delay:-14s}
  /* LA COUCHE D'ACCENT DÉRIVE AVEC SON DESSIN. Elle restait fixe au centre
     pendant que le fond glissait de 44 à 56 % : l'hexagone du diaphragme,
     l'aiguille du son, le point du réseau se décollaient de leur illustration.
     Même course, même durée, mêmes décalages. */
  .sb-s-expertise-metiers h3[class*="-nom"]::after{
    animation:derive-accent 28s ease-in-out infinite alternate}
  .sb-c-m2-nom::after{animation-delay:-4s}.sb-c-m3-nom::after{animation-delay:-8s}
  .sb-c-m4-nom::after{animation-delay:-12s}.sb-c-m5-nom::after{animation-delay:-16s}
  .sb-c-m6-nom::after{animation-delay:-20s}.sb-c-m7-nom::after{animation-delay:-24s}
  .sb-c-m8-nom::after{animation-delay:-6s}.sb-c-m9-nom::after{animation-delay:-14s}
}
@keyframes derive-accent{
  from{-webkit-mask-position:44% 48%;mask-position:44% 48%}
  to{-webkit-mask-position:56% 52%;mask-position:56% 52%}}

/* ── LA PAGE PLAN D'ACCÈS ────────────────────────────────────────────────────
   La carte d'abord, l'adresse dessous, puis deux blocs d'indications. Elle
   emprunte la grammaire des autres pages : une section est une grille, un champ
   s'y place par sa classe. */
.sb-s-acces-ouverture{
  background:radial-gradient(110% 70% at 50% 108%,rgba(27,79,216,.20),transparent 68%),var(--encre-profonde);
  gap:0;align-content:start;min-block-size:var(--heros-hauteur);
  padding-block:var(--heros-haut) var(--heros-bas)}
.sb-s-acces-ouverture h1{font-family:var(--forum);font-weight:400;line-height:1.02;
  letter-spacing:-.015em;font-size:clamp(2.6rem,6.4vw,5rem);
  padding-inline-end:max(0px,calc(100% - 18ch));text-wrap:balance}
.sb-s-acces-ouverture p[class*="-chapo"]{font-size:1.28rem;line-height:1.5;--mesure:58ch}

.sb-s-acces-venir{background:var(--encre-ardoise);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(28px,4vw,56px);row-gap:0;align-content:start}
/* LA FIGURE SORT DU PARAGRAPHE, ET C'EST LE NAVIGATEUR QUI L'EN SORT.
   `gneiz-map` rend une `<figure>` ; une figure dans un `<p>` est interdite, donc
   le navigateur la remonte d'un cran — exactement le même piège que le
   formulaire. Le paragraphe reste vide à sa place, et la carte atterrit APRÈS
   lui, hors de la grille : elle débordait sous la colonne de texte. C'est donc
   la FIGURE qui porte le placement, et le paragraphe vide qui disparaît. */
.sb-s-acces-venir p[class*="-carte"]{grid-column:1;grid-row:1/span 5;margin:0;
  --mesure:none;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--filet-encre);background:var(--encre-plaque)}
.sb-s-acces-venir p[class*="-carte"]:empty{display:none}
.sb-s-acces-venir .sb-carte{grid-column:1;grid-row:1/span 5;margin:0;align-self:start;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--filet-encre);
  background:var(--encre-plaque)}
.sb-s-acces-venir .sb-carte img{display:block;width:100%;height:auto}
/* La carte est une image de jour posée sur de l'encre : on l'assombrit d'un
   cran pour qu'elle ne troue pas la page, sans la rendre illisible. */
.sb-s-acces-venir .sb-carte img{filter:saturate(.82) brightness(.9) contrast(1.04)}
/* TANT QUE LA CARTE N'EST PAS DÉCLARÉE, LE TROU SE VOIT. Depuis le 17.09.2026
   elle l'est — source OpenStreetMap, tuiles servies d'ici — mais la règle reste :
   elle reparlerait le jour où la source serait retirée.
   `gneiz-map` ne rend RIEN s'il n'a pas de source de tuiles — c'est voulu :
   publier une image dont on ne sait plus à qui on la doit, c'est publier ce
   qu'on n'a peut-être pas le droit de publier. Le paragraphe reste donc vide.
   On lui garde sa place et son cadre en pointillés : un emplacement vide qu'on
   ne voit pas est un emplacement oublié. */

/* Le crédit de la carte : la licence l'exige, donc il se voit — discret, jamais absent. */
.sb-s-acces-venir .sb-carte figcaption{font-family:var(--mono);font-size:.64rem;
  letter-spacing:.06em;color:var(--ivoire-sourd);padding:9px 12px;display:block}
.sb-s-acces-venir .sb-carte figcaption a{color:var(--ivoire-doux)}
.sb-s-acces-venir p[class*="-adresse"]{grid-column:2;grid-row:1;margin-block:0 var(--saut-titre);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--ivoire)}
.sb-s-acces-venir h2{grid-column:2;margin-block:0 14px;
  font-family:var(--manrope);font-weight:500;font-size:1.15rem;letter-spacing:0}
.sb-c-venir-t1{grid-row:2}
.sb-c-venir-p1,.sb-c-venir-p2,.sb-c-venir-p3{grid-column:2;grid-row:3;margin:0}
.sb-c-venir-p2{grid-row:4}.sb-c-venir-p3{grid-row:5}
.sb-s-acces-venir p[class*="sb-c-venir-p"]{--mesure:46ch;padding-block:9px;
  border-top:1px solid var(--filet-encre);color:var(--ivoire-doux);font-size:.96rem}
.sb-c-venir-t2{grid-row:6;margin-block:var(--saut-titre) 14px}
.sb-c-venir-p4{grid-column:2;grid-row:7}
.sb-s-acces-echange{background:var(--papier);color:var(--texte);gap:0}
.sb-s-acces-echange p[class*="-texte"]{color:var(--texte-doux);font-size:1.15rem;--mesure:56ch}
.sb-s-acces-echange h2{padding-inline-end:max(0px,calc(100% - 20ch))}

@media (max-width:860px){
  .sb-s-acces-venir{grid-template-columns:1fr}
  .sb-s-acces-venir p[class*="-carte"],
  .sb-s-acces-venir .sb-carte{
    grid-column:1;grid-row:1;margin-bottom:26px}
  .sb-s-acces-venir h2[class*="sb-c-"],
  .sb-s-acces-venir p[class*="sb-c-venir-p"],
  .sb-s-acces-venir p[class*="-adresse"]{grid-column:1}
  .sb-s-acces-venir p[class*="-adresse"]{grid-row:2}
  .sb-s-acces-venir h2.sb-c-venir-t1{grid-row:3}
  .sb-s-acces-venir p.sb-c-venir-p1{grid-row:4}
  .sb-s-acces-venir p.sb-c-venir-p2{grid-row:5}
  .sb-s-acces-venir p.sb-c-venir-p3{grid-row:6}
  .sb-s-acces-venir h2.sb-c-venir-t2{grid-row:7}
  .sb-s-acces-venir p.sb-c-venir-p4{grid-row:8}
}

/* ════════════════════════════════════════════════════════════════════════════
   LE CONSENTEMENT — bandeau et panneau
   Écrit dans le site, pas dans une extension : la famille gneiz n'a pas de
   module de consentement, et le converteur est hors jeu. Tout est de première
   partie : aucune requête sortante, aucune bibliothèque, un cookie qui ne
   contient que le choix.
   ════════════════════════════════════════════════════════════════════════════ */
.sb-cnst-bandeau{position:fixed;inset:auto 0 0 0;z-index:70;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:center;
  padding:20px max(20px,calc((100% - var(--maxw))/2));
  background:var(--encre-profonde);color:var(--ivoire);
  border-top:1px solid var(--braise);box-shadow:0 -24px 60px -28px #000}
.sb-cnst-bandeau-titre{grid-column:1;font-family:var(--forum);font-weight:400;
  font-size:1.2rem;margin:0 0 6px}
/* LA MESURE DE LECTURE GLOBALE MORD ICI, ET IL FAUT LA DÉSARMER.
   `[class*="-texte"]` vise TOUT champ dont la classe contient « -texte » — le
   texte du bandeau en fait partie sans l'avoir demandé — et lui pose un
   remplissage de fin qui l'étrangle : la phrase se cassait sur six lignes de
   deux cent trente pixels. Le bandeau n'est pas un champ de section : il reprend
   la main sur son propre remplissage. */
.sb-cnst-bandeau-texte,.sb-cnst-chapo,.sb-cnst-ligne span{padding-inline-end:0}
.sb-cnst-bandeau-texte{grid-column:1;grid-row:2;margin:0;max-width:78ch;
  font-size:.92rem;line-height:1.55;color:var(--ivoire-doux)}
.sb-cnst-bandeau .sb-cnst-actions{grid-column:2;grid-row:1/span 2}

/* `hidden` DOIT GAGNER, ET ICI IL PERDAIT.
   L'attribut `hidden` ne vaut qu'un `display:none` de feuille de style du
   navigateur : n'importe quelle règle d'auteur qui pose un `display` le bat.
   Le voile et le bandeau sont en `grid` — ils restaient donc à l'écran après
   « Annuler » et après « Enregistrer », et les deux boutons semblaient morts.
   Signalé par Yan le 16.09.2026, reproduit aussitôt. */
.sb-cnst-voile[hidden],.sb-cnst-bandeau[hidden]{display:none}
.sb-cnst-voile{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  padding:24px;background:rgba(5,8,15,.72);backdrop-filter:blur(3px)}
.sb-cnst-boite{width:min(560px,100%);max-height:86vh;overflow:auto;
  background:var(--encre-plaque);color:var(--ivoire);
  border:1px solid var(--filet-encre-fort);border-radius:18px;
  padding:26px;box-shadow:0 40px 90px -40px #000}
.sb-cnst-titre{font-family:var(--forum);font-weight:400;font-size:1.7rem;
  line-height:1.1;margin:0 0 10px}
.sb-cnst-chapo{margin:0 0 22px;font-size:.94rem;line-height:1.6;color:var(--ivoire-doux)}
.sb-cnst-chapo a{color:var(--accent-encre)}
.sb-cnst-ligne{display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:16px;margin-bottom:10px;border:1px solid var(--filet-encre);border-radius:12px;
  background:rgba(242,246,251,.03)}
.sb-cnst-ligne b{display:block;font-family:var(--manrope);font-weight:500;font-size:.98rem;
  margin-bottom:3px}
.sb-cnst-ligne span{display:block;font-size:.86rem;line-height:1.5;color:var(--ivoire-doux)}
/* La bascule verrouillée : allumée, mais sourde au clic. Le gris de la pastille
   dit l'impossibilité mieux qu'un mot, et `cursor:default` la confirme au
   survol avant même qu'on essaie. */
.sb-cnst-verrou{cursor:default;opacity:.75}
.sb-cnst-verrou[aria-checked="true"]{background:var(--ivoire-sourd);border-color:var(--ivoire-sourd)}
.sb-cnst-verrou[aria-checked="true"]::after{background:var(--encre-plaque)}
/* LA BASCULE EST UN BOUTON, PAS UNE CASE À COCHER PEINTE. `role="switch"` et
   `aria-checked` disent l'état à qui n'en voit pas la couleur, et le clavier
   l'actionne sans rien de plus. */
.sb-cnst-bascule{flex:0 0 auto;inline-size:52px;block-size:29px;padding:0;cursor:pointer;
  border:1px solid var(--filet-encre-fort);border-radius:999px;position:relative;
  background:rgba(242,246,251,.08);transition:background .22s var(--ease),border-color .22s var(--ease)}
.sb-cnst-bascule::after{content:"";position:absolute;top:3px;left:3px;
  inline-size:21px;block-size:21px;border-radius:50%;background:var(--ivoire-sourd);
  transition:transform .22s var(--ease),background .22s var(--ease)}
.sb-cnst-bascule[aria-checked="true"]{background:var(--braise);border-color:var(--braise)}
.sb-cnst-bascule[aria-checked="true"]::after{transform:translateX(23px);background:var(--encre-bouton)}
.sb-cnst-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
.sb-cnst-actions button{font-family:var(--manrope);font-size:.95rem;padding:12px 22px;
  border-radius:999px;cursor:pointer;white-space:nowrap}
.sb-cnst-second{background:transparent;color:var(--ivoire);font-weight:400;
  border:1px solid var(--filet-encre-fort)}
.sb-cnst-primaire{background:var(--fond-bouton);color:var(--encre-bouton);
  font-weight:600;border:0;box-shadow:var(--lueur)}
.sb-cnst-actions button:hover{transform:translateY(-1px)}
@media (max-width:760px){
  .sb-cnst-bandeau{grid-template-columns:1fr;gap:14px}
  .sb-cnst-bandeau .sb-cnst-actions{grid-column:1;grid-row:3;justify-content:flex-start;margin-top:0}
  /* LE PANNEAU SE CONDENSE SUR TÉLÉPHONE (Yan, 18.09.2026). La bascule passait
     sous le texte et doublait chaque bloc : elle reste à droite, le texte
     prend la place qui reste. Marges et écarts resserrés d'un tiers. */
  .sb-cnst-voile{padding:14px}
  .sb-cnst-boite{padding:20px 18px;border-radius:16px;max-height:90vh}
  .sb-cnst-titre{font-size:1.45rem;margin-bottom:8px}
  .sb-cnst-chapo{font-size:.88rem;line-height:1.5;margin-bottom:14px}
  .sb-cnst-ligne{flex-wrap:nowrap;gap:12px;padding:11px 12px;margin-bottom:8px;border-radius:10px}
  .sb-cnst-ligne>:first-child{flex:1 1 auto;min-width:0}
  .sb-cnst-ligne b{font-size:.92rem;margin-bottom:1px}
  .sb-cnst-ligne span{font-size:.8rem;line-height:1.4}
  .sb-cnst-actions{margin-top:12px}
  .sb-cnst-actions button{padding:10px 18px;font-size:.9rem}
}

/* Le bouton de réglage, sur la page Cookies : elle explique, le panneau décide. */
[class*="sb-s-legal"] a[class*="-reglage"],[class*="sb-s-legal"] div[class*="-reglage"]{
  margin-block:6px 30px}
[class*="sb-s-legal"] a[class*="-reglage"]{background:var(--fond-bouton);
  color:var(--encre-bouton);font-weight:600}

/* ════════════════════════════════════════════════════════════════════════════
   LE CURSEUR — trois états, et le curseur système sous lui
   La charte interdisait le curseur personnalisé ; Yan l'a levée le 16.09.2026,
   pour lui seul. Il s'AJOUTE au curseur du système, qui reste affiché : celui
   qui a réglé le sien en grand ou en fort contraste l'a fait pour une raison.
   Rien ici n'intercepte le pointeur — `pointer-events:none` sur toute la pièce.
   ════════════════════════════════════════════════════════════════════════════ */
.sb-curseur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;
  /* AU REPOS, RIEN. Un point qui double le curseur système est un ornement de
     plus à chaque geste, et Yan l'a trouvé de trop — à raison : il n'apporte
     aucune information que la flèche ne donne déjà. Le curseur maison ne se
     montre donc que lorsqu'il a QUELQUE CHOSE À DIRE : la page attend, ou ce
     qui est sous la main peut être actionné. */
  inline-size:10px;block-size:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:transparent;opacity:0;
  transition:inline-size .32s var(--ease),block-size .32s var(--ease),
             margin .32s var(--ease),opacity .25s var(--ease),
             background .32s var(--ease),border-color .32s var(--ease),
             box-shadow .32s var(--ease)}
/* `sb-curseur-vu` ne dit plus que « le pointeur est dans la page » : c'est aux
   deux états parlants de décider de l'opacité. */
.sb-curseur-vu{opacity:0}

/* AU REPOS DEPUIS DEUX SECONDES : l'orbite s'ouvre. Le point reste au centre,
   un anneau l'entoure — la page attend, et le dit sans un mot. */
.sb-curseur-vu.sb-curseur-pose{inline-size:30px;block-size:30px;margin:-15px 0 0 -15px;
  background:transparent;border:1px solid var(--braise);opacity:.75;
  box-shadow:0 0 18px -6px var(--braise)}

/* SUR UNE ACTION : UN ANNEAU, ET RIEN AU CENTRE.
   Le premier dessin avait un cœur NOIR OPAQUE — un vrai trou noir, donc — et il
   masquait exactement ce qu'on s'apprêtait à cliquer. Sur le sélecteur de
   langue, deux lettres sur trois disparaissaient sous le curseur. Yan l'a vu
   le 17.09.2026, et le défaut est de conception : un curseur qui cache sa cible
   se retourne contre le geste qu'il accompagne.
   L'horizon reste, mais il n'est plus qu'un anneau : la cible se lit à travers.
   C'est d'ailleurs plus juste optiquement — ce qu'on voit d'un trou noir, c'est
   son disque, jamais son centre. */
.sb-curseur-vu.sb-curseur-action{inline-size:40px;block-size:40px;margin:-20px 0 0 -20px;
  background:radial-gradient(circle at 50% 50%,
             transparent 0%,transparent 60%,
             color-mix(in srgb,var(--braise) 70%,transparent) 68%,
             var(--braise-haute) 78%,transparent 90%);
  border:0;box-shadow:0 0 22px -10px var(--braise-haute);opacity:1}
.sb-curseur-vu.sb-curseur-action.sb-curseur-appui{inline-size:30px;block-size:30px;
  margin:-15px 0 0 -15px}
/* Sur les fonds clairs, la braise seule manque de corps : on lui donne un
   cerne d'encre pour qu'elle ne se dissolve pas dans le papier. */
@media (prefers-reduced-motion:reduce){.sb-curseur{display:none}}

/* ── LE SÉLECTEUR DE LANGUE ──────────────────────────────────────────────────
   Trois codes de deux lettres, comme chez la maison. Le nom complet reste dans
   le document — il porte `lang` et `hreflang`, et les lecteurs d'écran le
   lisent — mais il ne s'affiche pas : « Français Deutsch English » dans une
   barre de menu prend la place du menu lui-même.

   LE CODE VIENT DE LA CLASSE, PAS D'UN ATTRIBUT. Polylang pose `lang-item-fr`
   sur chaque entrée ; c'est la seule prise stable, et elle traverse les mises à
   jour du plugin mieux qu'un sélecteur sur le contenu. */
.sb-entete .sb-langues{margin:0 0 0 clamp(18px,3vw,38px);padding:0 0 0 clamp(16px,2.4vw,26px);
  list-style:none;display:flex;gap:14px;align-items:center;flex:none;
  border-left:1px solid var(--filet-encre)}
.sb-entete .sb-langues li{margin:0}
.sb-entete .sb-langues a{display:block;font-family:var(--mono);font-size:0;
  letter-spacing:.1em;text-decoration:none;color:var(--ivoire-sourd);
  transition:color .2s var(--ease)}
.sb-entete .sb-langues a::before{font-size:.72rem}
.sb-entete .sb-langues .lang-item-fr a::before{content:"FR"}
.sb-entete .sb-langues .lang-item-de a::before{content:"DE"}
.sb-entete .sb-langues .lang-item-en a::before{content:"EN"}
.sb-entete .sb-langues a:hover{color:var(--ivoire)}
.sb-entete .sb-langues .current-lang a{color:var(--ivoire)}
@media (max-width:860px){
  /* 🔴 LA BARRE NE PORTE PLUS NI LANGUES NI APPEL À L'ACTION SUR TÉLÉPHONE.
     Ils sont dans le tiroir, où `js/site.js` en pose une copie. Les garder aussi
     dans la barre faisait deux fois le même rôle à l'écran, et poussait le
     bouton à la ligne sous le nom — vu par Yan le 17.09.2026.

     ⚠️ CETTE RÈGLE DOIT RESTER LA DERNIÈRE. Elle a d'abord été écrite près du
     tiroir, six cents lignes plus haut : à spécificité égale, les règles des
     langues, écrites ici, l'emportaient et les langues restaient visibles.
     Trois captures pour trouver que le défaut n'était pas le poids mais
     l'ordre.

     La copie du tiroir porte `.sb-tiroir-langues`, et la règle qui la montre
     est ancrée sur `.is-menu-open` — plus lourde, donc elle passe devant. */
  .sb-entete .sb-langues,
  .sb-entete .sb-entete-cta{display:none}
  .sb-entete .sb-langues{gap:9px}
  .sb-entete .sb-langues a::before{font-size:.68rem}
}

/* ── L'ACCENT DES VIGNETTES SUIT LA COULEUR VIVANTE ──────────────────────────
   L'illustration est peinte en deux couches : la STRUCTURE est une image
   (traits froids, gris, bleus, immuables), l'ACCENT est un MASQUE peint par la
   feuille. La couleur vient donc du thème, pas du fichier — et quand elle
   dérive, les neuf dérivent avec, sans qu'on regénère un seul octet.

   `--accent-decor` N'EST PAS `--braise`, ET C'EST DÉLIBÉRÉ. La braise porte du
   texte et des boutons : son contraste est mesuré, elle ne bouge pas. L'accent
   de décor ne porte aucun texte, donc il peut respirer. Le jour où la palette
   change, les deux changent ensemble puisque l'une dérive de l'autre. */
.sb-s-expertise-metiers h3[class*="-nom"]{position:relative}
.sb-s-expertise-metiers h3[class*="-nom"]::after{
  content:"";position:absolute;left:0;top:0;right:0;display:block;
  height:inherit;pointer-events:none;
  background:var(--accent-decor);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:background .9s linear}
/* La couche d'accent épouse exactement la hauteur de l'illustration, qui se
   rétracte au survol : sans ça, elle resterait à sa taille de repos et
   déborderait sur le texte. */
.sb-planche-groupee .sb-vue h3::after{display:block;height:186px;
  transition:height .45s var(--ease),background .9s linear}
.sb-planche-groupee .sb-vue.sb-vu h3::after{height:112px}
.sb-s-expertise-metiers.sb-planche-groupee .sb-vue h3::after{height:252px}
.sb-s-expertise-metiers.sb-planche-groupee .sb-vue.sb-vu h3::after{height:78px}
@media (hover:none){
  .sb-planche-groupee .sb-vue h3::after,
  .sb-s-expertise-metiers.sb-planche-groupee .sb-vue h3::after{height:auto;aspect-ratio:4/3}
}

/* ════════════════════════════════════════════════════════════════════════════
   LA LUMIÈRE DU STUDIO — une pastille, un curseur, rien d'autre
   La couleur du décor parcourt un cercle de teintes. La pastille montre où elle
   en est ; le curseur laisse la prendre en main, et la rend quand on lâche.
   Ce qu'elle ne touche pas : l'encre, le papier, le texte, les boutons — leur
   contraste est mesuré. Elle ne déplace que ce qui dérive déjà tout seul.
   ════════════════════════════════════════════════════════════════════════════ */
.sb-lumiere{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:60;
  display:flex;align-items:center;font-family:var(--mono);pointer-events:none}
.sb-lumiere>*{pointer-events:auto}
.sb-lumiere-poignee{inline-size:38px;block-size:38px;display:grid;place-items:center;
  border:1px solid var(--filet-encre-fort);border-right:0;border-radius:11px 0 0 11px;
  background:var(--encre-profonde);cursor:pointer;padding:0;
  box-shadow:-6px 0 20px -12px #000}
.sb-lumiere-poignee b{display:block;inline-size:15px;block-size:15px;border-radius:50%;
  background:var(--accent-decor);transition:background .9s linear}
.sb-lumiere-boite{width:min(236px,calc(100vw - 52px));background:var(--encre-profonde);
  color:var(--ivoire);border:1px solid var(--filet-encre-fort);border-radius:11px 0 0 11px;
  padding:16px 18px 14px;box-shadow:-10px 0 34px -18px #000}
.sb-lumiere[data-ouvert="non"] .sb-lumiere-boite{display:none}
.sb-lumiere-titre{margin:0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivoire)}
.sb-lumiere-dit{margin:6px 0 2px;font-size:.62rem;letter-spacing:.02em;line-height:1.5;
  color:var(--ivoire-sourd);padding-inline-end:0}
/* ── LA ROUE ─────────────────────────────────────────────────────────────────
   Un tour = deux minutes, et le compte à rebours dit ce qu'il en reste. Elle
   mesure LE TEMPS ; la couleur, elle, ne parcourt qu'un arc chaud de vingt-six
   degrés — c'est ce qui l'empêche de tomber sur un vert, qui ne s'accorde pas
   avec une braise. Le cercle complet, lui, y passait, et ça se voyait. */
.sb-lumiere-roue{position:relative;inline-size:126px;block-size:126px;margin:16px auto 4px;
  cursor:grab;touch-action:none;border-radius:50%}
.sb-lumiere-roue:active{cursor:grabbing}
.sb-lumiere-roue:focus-visible{outline:2px solid var(--accent-encre);outline-offset:6px}
.sb-lumiere-roue svg{display:block;inline-size:100%;block-size:100%;
  transform:rotate(-90deg)}
/* LA PISTE EST UNE ORBITE, PAS UN CADRAN. Pointillée, et un second anneau
   tourne à contresens à l'intérieur : deux mouvements de vitesses différentes
   se lisent comme de la mécanique céleste, un seul se lit comme une trotteuse. */
.sb-roue-piste{fill:none;stroke:var(--filet-encre-fort);stroke-width:1;
  stroke-dasharray:1 7;stroke-linecap:round}
.sb-roue-orbite{fill:none;stroke:var(--filet-encre);stroke-width:1;
  stroke-dasharray:22 12;transform-origin:60px 60px}
@media (prefers-reduced-motion:no-preference){
  .sb-roue-orbite{animation:sb-orbite 44s linear infinite}
}
@keyframes sb-orbite{to{transform:rotate(-360deg)}}

.sb-roue-arc{fill:none;stroke:var(--accent-decor);stroke-width:3;stroke-linecap:round;
  transition:stroke .9s linear;opacity:.92}

/* L'astre tourne AUTOUR du centre : son origine de transformation y est posée,
   et le groupe entier a déjà tourné d'un quart pour mettre zéro en haut.
   Le cœur porte sa couleur et sa lueur ; la couronne est le même ton, presque
   effacé — c'est elle qui fait un soleil plutôt qu'un point. */
.sb-roue-astre{transform-origin:60px 60px}
.sb-roue-coeur{transition:fill .9s linear,filter .9s linear}
.sb-roue-couronne{opacity:.17;transition:fill .9s linear}
/* Sept signes au lieu de quatre depuis que le compteur dit un angle
   — « 147.38° » contre « 1:03 » — d'où le corps réduit et l'interlettrage
   resserré. `tabular-nums` était déjà là et compte double ici : sans lui, les
   centièmes qui défilent feraient danser la largeur du nombre à chaque image. */
.sb-lumiere-reste{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.01em;
  color:var(--ivoire-doux);font-variant-numeric:tabular-nums;pointer-events:none}
.sb-lumiere-dit{padding-inline-end:0}
@media (max-width:620px){.sb-lumiere{top:auto;bottom:14px;transform:none}}

/* ── LE BANC D'ESSAI, OUVERT PAR ?reglage ───────────────────────────────────
   Douze pistes, neuf nuanciers, le code à recopier. Outil de travail, jamais
   servi au visiteur : il n'existe que si l'adresse le demande. */
.sb-reglage{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:61;
  display:flex;align-items:flex-start;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.04em;pointer-events:none}
.sb-reglage>*{pointer-events:auto}
.sb-reglage-poignee{inline-size:38px;block-size:38px;display:grid;place-items:center;
  border:1px solid var(--filet-encre-fort);border-right:0;border-radius:11px 0 0 11px;
  background:var(--encre-profonde);cursor:pointer;padding:0}
.sb-reglage-poignee b{display:block;inline-size:15px;block-size:15px;border-radius:4px;
  background:var(--braise)}
.sb-reglage-boite{width:min(330px,calc(100vw - 52px));max-height:min(80vh,720px);
  overflow:auto;background:var(--encre-profonde);color:var(--ivoire);
  border:1px solid var(--filet-encre-fort);border-radius:11px 0 0 11px;padding:16px}
.sb-reglage[data-ouvert="non"] .sb-reglage-boite{display:none}
.sb-reglage-titre{display:block;margin:0 0 14px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ivoire-sourd);font-size:.6rem;line-height:1.7;
  padding-inline-end:0}
.sb-reglage-titre b{display:block;color:var(--accent-encre);font-weight:500}
.sb-reglage-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:14px}
.sb-reglage-presets button{display:flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--filet-encre);border-radius:8px;padding:5px 7px;
  background:var(--encre-plaque);color:var(--ivoire);font-family:var(--mono);font-size:.64rem}
.sb-reglage-presets i{display:block;inline-size:13px;block-size:13px;border-radius:3px;flex:0 0 auto}
.sb-reglage-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.sb-reglage-grille label{display:flex;align-items:center;gap:7px;background:var(--encre-plaque);
  border:1px solid var(--filet-encre);border-radius:8px;padding:5px 7px;cursor:pointer;min-width:0}
.sb-reglage-grille input[type=color]{inline-size:22px;block-size:22px;padding:0;flex:0 0 auto;
  border:1px solid var(--filet-encre-fort);border-radius:5px;background:none;cursor:pointer}
.sb-reglage-grille span{display:block;min-width:0;font-size:.62rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sb-reglage-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sb-reglage-actions button{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--filet-encre-fort);background:transparent;color:var(--ivoire)}
.sb-reglage-actions .sb-reglage-primaire{background:var(--braise);border-color:var(--braise);
  color:var(--encre-bouton);font-weight:700}
.sb-reglage-code{margin-top:10px;width:100%;min-height:96px;resize:vertical;background:#04060C;
  color:var(--ivoire-doux);border:1px solid var(--filet-encre);border-radius:8px;padding:10px;
  font-family:var(--mono);font-size:.62rem;line-height:1.7;white-space:pre;overflow:auto}

/* ── L'ANCRE INTERNE, SOUS UN EN-TÊTE COLLANT ────────────────────────────────
   Deux boutons du héros de Contact visent une section de la même page. Sans
   `scroll-margin-top`, l'ancre amène le haut de la section EXACTEMENT sous le
   bord haut de la fenêtre — c'est-à-dire derrière l'en-tête, qui y est collé.
   Le titre visé disparaît, et le visiteur croit que le bouton a raté.
   La hauteur réelle de l'en-tête est posée par `site.js` : elle change avec la
   largeur, et une valeur écrite ici serait fausse la moitié du temps. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[class*="sb-s-"][id]{scroll-margin-top:calc(var(--entete-hauteur,84px) + 18px)}

/* ── LE RENDEZ-VOUS, DANS SON CADRE ──────────────────────────────────────────
   L'agenda est servi par `yanhaltey.com`. Le cadre le montre ici sans que le
   visiteur quitte Sidelune ; `site.js` écoute la hauteur que la page distante
   poste, pour qu'aucune barre de défilement ne vive à l'intérieur. */
.sb-s-contact-agenda{background:var(--encre);gap:14px;grid-template-columns:minmax(0,1fr)}
.sb-s-contact-agenda h2{margin-block:0}
.sb-s-contact-agenda p[class*="-chapo"]{--mesure:58ch;font-size:1.1rem}
/* LA LARGEUR SE PREND EN PADDING, PAS EN `max-width`, ET C'EST OBLIGÉ.
   WordPress pose `margin-left:auto !important` sur les enfants d'un groupe
   « contraint ». Un `max-width` ici laissait donc le cadre CENTRÉ pendant que
   le titre et le chapô restaient à gauche — mesuré le 17.09.2026 : titre à
   x=50, cadre à x=170. La boîte garde sa pleine largeur, et c'est son bord
   intérieur qu'on rentre : les marges automatiques n'ont plus rien à répartir.
   C'est l'idiome déjà employé pour `--mesure` ailleurs dans cette feuille. */
.sb-s-contact-agenda p[class*="-corps"]{margin-top:16px;--mesure:none;
  grid-column:1/-1;width:100%;max-width:none;
  /* 740 px et non 940 : le calendrier distant occupe environ 670 px et se
     centre dans ce qu'on lui donne. Un cadre trop large laisse deux bandes
     ivoire de part et d'autre, qui ressemblent à un défaut de chargement
     plutôt qu'à une marge. Mesuré à l'écran le 18.09.2026. */
  padding-inline-end:max(0px,calc(100% - 740px))}
.sb-s-contact-agenda .sb-rdv{display:block;width:100%}
/* LE PLANCHER EST BAS, ET C'EST OBLIGÉ. La page distante annonce sa hauteur
   en mesurant `documentElement` — qui, dans un cadre, REMPLIT le cadre. Un
   plancher haut se mesure donc lui-même : le cadre fait 760, la page annonce
   760, le parent garde 760, et l'agenda ne rétrécit jamais. Mesuré le
   18.09.2026, 760 px pour un calendrier qui en occupe 500.
   Le vrai remède est chez elle — mesurer le CONTENU et non le document — mais
   un plancher bas suffit ici et ne dépend de personne. */
.sb-s-contact-agenda .sb-rdv-cadre{display:block;width:100%;border:0;
  min-height:320px;border-radius:var(--r);background:#F4F1EB;
  color-scheme:light}
.sb-s-contact-agenda .sb-rdv-repli{display:inline-block;margin-top:12px;
  font-family:var(--manrope);font-size:.92rem;color:var(--ivoire-doux)}
.sb-s-contact-agenda .sb-rdv-repli:hover{color:var(--ivoire)}

/* ── /discover — LA PAGE D'UN CODE QR ────────────────────────────────────────
   On y arrive par un lien de biographie, un code au dos d'une carte, une
   signature de message. Le visiteur ne lit pas : il cherche UNE porte, sur un
   téléphone, en quelques secondes. La colonne est donc étroite et centrée, et
   chaque cible fait la largeur du pouce — 56 px de haut au minimum, qui est le
   seuil sous lequel une main qui marche rate sa cible. */
.sb-s-discover-ouverture{grid-template-columns:minmax(0,1fr);
  justify-items:center;text-align:center;row-gap:6px;
  padding-block:clamp(52px,9vw,88px) clamp(20px,4vw,32px)}
.sb-s-discover-ouverture>*{justify-self:center;text-align:center}
/* Le signe est un bloc pour que sa hauteur compte dans le flux ; un bloc se
   colle à gauche, d'où les marges automatiques. Sans elles, le monogramme
   s'alignait au bord pendant que le titre restait centré. */
.sb-s-discover-ouverture p[class*="-marque"] svg{width:clamp(56px,14vw,76px);
  height:auto;display:block;margin-inline:auto}
.sb-s-discover-ouverture p[class*="-marque"]{margin-bottom:14px;text-align:center}
.sb-c-discover-titre{font-size:clamp(2.2rem,7vw,3rem);margin-block:0}
/* Qualifié par la section ET la balise, sinon `[class*="sb-s-"]>*` reprend le
   `max-width` : une règle de champ à (0,1,0) ne bat pas une règle générique de
   même poids écrite plus haut. Le test `test_theme` refuse ces règles inertes,
   et il a refusé celle-ci. */
.sb-s-discover-ouverture p[class*="-chapo"]{--mesure:none;max-width:38ch;
  color:var(--texte-doux);font-size:1.05rem;line-height:1.55;margin-inline:auto}

.sb-s-discover-portes{grid-template-columns:minmax(0,1fr);row-gap:12px;
  padding-block:0 clamp(32px,6vw,52px);justify-items:stretch}
/* WordPress enveloppe chaque lien dans deux `div` de blocs. `display:contents`
   les efface de la mise en page sans toucher au balisage, et le prototype, où
   le lien est déjà un enfant direct, s'en trouve inchangé. */
.sb-s-discover-portes>div{display:contents}
.sb-s-discover-portes,
.sb-s-discover-ouverture,
.sb-s-discover-pied{padding-inline:max(var(--gouttiere),calc(50% - 260px))}
.sb-s-discover-portes a{display:flex;flex-direction:column;gap:3px;width:100%;
  min-block-size:56px;justify-content:center;
  padding:14px 52px 14px 20px;position:relative;
  background:var(--encre-plaque);border:1px solid var(--filet-encre-fort);
  border-radius:16px;text-decoration:none;color:var(--ivoire);
  font-family:var(--manrope);font-weight:600;font-size:1.04rem;
  transition:border-color .2s,transform .2s,background .2s}
.sb-s-discover-portes a:hover{border-color:var(--braise);
  background:var(--encre-plaque-haute,var(--encre-plaque));transform:translateY(-2px)}
/* La flèche est décorative : le nom de la porte dit déjà où elle mène, et un
   lecteur d'écran qui annonce « flèche vers la droite » n'apprend rien. */
.sb-s-discover-portes a::after{content:"→";position:absolute;right:20px;
  top:50%;transform:translateY(-50%);color:var(--ivoire-sourd);
  font-size:1.1rem;transition:color .2s,right .2s}
.sb-s-discover-portes a:hover::after{color:var(--braise);right:16px}
.sb-s-discover-portes .sb-porte-note{margin:0;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.07em;color:var(--ivoire-sourd);
  font-weight:400;text-transform:none}
/* Tant que `site.js` n'a pas rentré la note dans son lien — sans JavaScript,
   ou le temps du chargement — elle reste un paragraphe voisin. Elle doit rester
   lisible, et rattachée visuellement à la porte qui la précède. */
.sb-s-discover-portes>p{margin:-8px 0 0;padding-inline:20px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;
  color:var(--ivoire-sourd)}

.sb-s-discover-pied{grid-template-columns:minmax(0,1fr);justify-items:center;
  text-align:center;row-gap:4px;padding-block:0 clamp(40px,7vw,64px)}
.sb-s-discover-pied p{margin:0;font-size:.88rem;color:var(--ivoire-sourd);
  --mesure:none;text-align:center}

/* LA PAGE DES PORTES N'A NI MENU NI PIED DE SITE.
   On y arrive par un code QR ou un lien de biographie, avec une intention
   précise. Un menu y ajouterait huit destinations dont aucune n'est celle
   qu'on cherche, et repousserait les portes sous la ligne de flottaison.
   `:has()` porte la règle plutôt qu'une classe de corps : WordPress ne pose
   pas le slug d'une page sur le `<body>`, et une classe `page-id-61` serait
   fausse au premier remontage du site ailleurs. Les éléments restent dans le
   document — le JavaScript qui les interroge les trouve encore. */
body:has(.sb-s-discover-ouverture) header.wp-block-template-part,
body:has(.sb-s-discover-ouverture) footer.wp-block-template-part{display:none}
body:has(.sb-s-discover-ouverture) .sb-s-discover-ouverture{padding-block-start:clamp(64px,12vw,120px)}
/* Le nom de la porte se lit d'abord, la note ensuite : alignés à gauche, les
   deux commencent au même endroit et l'oeil n'a qu'un point d'entrée. */
.sb-s-discover-portes a{text-align:left;align-items:flex-start}
/* Pas de plaque entre l'ouverture et les portes : ailleurs sur le site, une
   section qui suit un héros remonte sur lui avec un arrondi et une ombre, pour
   dire « une nouvelle matière commence ». Ici il n'y a qu'une matière, et ce
   liseré coupait la colonne en deux au milieu de la lecture. */
.sb-s-discover-ouverture+.sb-s-discover-portes{
  margin-top:0;border-radius:0;box-shadow:none;background:transparent}

/* ── LA 404 ──────────────────────────────────────────────────────────────────
   Une seule section, centrée, et le trou noir derrière. C'est le seul endroit
   du site où quelque chose a réellement disparu : l'astre y dit la page au lieu
   de la décorer. Le titre reste court pour lui laisser la place — il dérive de
   la droite vers le centre, et un titre long finirait avalé.

   Hauteur : le pied doit rester visible sans défilement, sinon le visiteur se
   croit au fond d'un site vide. D'où une hauteur mesurée sur la fenêtre moins
   l'en-tête, plutôt que les 70 svh des autres héros. */
.sb-s-404-ouverture{grid-template-columns:minmax(0,1fr);justify-items:start;
  align-content:center;
  min-block-size:calc(100svh - var(--entete-hauteur,84px) - 220px);
  row-gap:8px}
/* LA MESURE SE PREND EN PADDING, PAS EN `max-width` — même piège que le cadre
   du rendez-vous. WordPress pose `margin-left:auto !important` sur les enfants
   d'un groupe, et un `max-width` laissait donc le chapô CENTRÉ pendant que le
   titre restait à gauche. Mesuré le 17.09.2026 : titre à x=260, chapô à x=467. */
.sb-s-404-ouverture p[class*="-chapo"]{--mesure:none;max-width:none;
  padding-inline-end:max(0px,calc(100% - 46ch));
  color:var(--texte-doux);font-size:1.12rem;line-height:1.55;margin-block:6px 22px}
/* Les trois portes sur une seule ligne, comme les quatre du héros de Contact :
   le visiteur choisit sans défiler. `site.js` les regroupe, la feuille les
   espace. */
.sb-s-404-ouverture div[class*="-cta"],
.sb-s-404-ouverture div[class*="-lien"]{width:auto}
/* Le lien de la bannière : lisible sur la plaque, et souligné — un lien qui ne
   se distingue que par sa couleur disparaît pour qui ne la voit pas. */
.sb-cnst-savoir{display:inline;border:0;border-radius:0;padding:0;background:none;
  font:inherit;color:var(--ivoire);text-decoration:underline;text-underline-offset:3px}
.sb-cnst-savoir:hover{color:var(--braise)}

/* L'AÉRATION DU TÉLÉPHONE, D'APRÈS L'AUDIT DU 18.09.2026. Mesuré à 390 px :
   64 px de marge de section, 34 sous les titres, 26 entre cartes, et 0 entre
   les cartes d'Offres, dont la plaque annulait la marge de pile. Passés à 80,
   40 et 32 (variables ci-dessus) : +3,2 % de hauteur sur les six pages,
   l'ordinateur bouge de 0 à 18 px. Validé par Yan le même jour. */
@media (max-width:980px){
  .sb-s-offres-formules p.sb-c-o1-inclus,.sb-s-offres-formules p.sb-c-o2-inclus{margin-block:0 var(--pile)}
}