/* Mecenda — la feuille du site. * * ELLE EST ÉCRITE CONTRE LES CLASSES QUE LE COMPILATEUR POSE : `sb-s-
` * sur la section, `sb-c-` sur chaque champ. 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, et le banc du thème * refuse la moindre différence entre les deux copies. * * COROLLAIRE : aucune imbrication porteuse. La compilation aplatit les champs * en blocs frères ; chaque section est donc UNE GRILLE NOMMÉE, et chaque champ * s'y place par `grid-area`. Ce qui ressemble à une carte est quatre champs qui * partagent le même fond, posé par la grille. * * LA GRAMMAIRE VIENT DU DECK du 18.09.2026, qui fait foi pour le design : * fonds nuit prune et crème alternés, titres en Fraunces dont le second membre * passe en italique grenat ou rose, texte en DM Sans, un seul bouton plein par * section, les puces de couleur, les icônes en trait. * * LES VALEURS VIENNENT DE LA CHARTE, jamais d'ici. Les couleurs, les tailles et * les espaces sont les jetons repris par `bin/site design` : `--mec-*` dans le * prototype, `--wp--preset--*` côté WordPress, et `jetons.css` déclare les deux * noms pour la même valeur. */ /* ── POLICES ───────────────────────────────────────────────────────────────── Auto-hébergées, licences SIL OFL à côté des fichiers. Les quatre sont variables : un fichier par famille couvre toute la plage de graisses. LE THÈME REPRODUIT L'ARBORESCENCE DU PROTOTYPE — `css/` et `assets/` à la racine, l'un à côté de l'autre — pour que ces adresses tombent juste des deux côtés. Une profondeur de dossier est une dépendance silencieuse. */ @font-face{font-family:'Fraunces';src:url('../assets/fonts/Fraunces-Variable.woff2') format('woff2-variations'),url('../assets/fonts/Fraunces-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Fraunces';src:url('../assets/fonts/Fraunces-Italic-Variable.woff2') format('woff2-variations'),url('../assets/fonts/Fraunces-Italic-Variable.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap} @font-face{font-family:'Onest';src:url('../assets/fonts/Onest-Variable.woff2') format('woff2-variations'),url('../assets/fonts/Onest-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'DM Sans';src:url('../assets/fonts/DMSans-Variable.woff2') format('woff2-variations'),url('../assets/fonts/DMSans-Variable.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap} @font-face{font-family:'DM Sans';src:url('../assets/fonts/DMSans-Italic-Variable.woff2') format('woff2-variations'),url('../assets/fonts/DMSans-Italic-Variable.woff2') format('woff2');font-weight:100 1000;font-style:italic;font-display:swap} /* ── LES DEUX NOMS D'UN MÊME JETON ─────────────────────────────────────────── Côté prototype, `jetons.css` déclare les `--mec-*` ET les `--wp--preset--*`. Côté WordPress, seuls les `--wp--*` existent : c'est le thème qui les produit depuis `theme.json`. Cette table rétablit donc les noms de la charte, pour que la MÊME feuille serve les deux côtés sans une seule valeur en dur. */ :root{ --mec-nuit:var(--wp--preset--color--nuit); --mec-velours:var(--wp--preset--color--velours); --mec-velours-profond:var(--wp--preset--color--velours-profond); --mec-filet-nuit:var(--wp--preset--color--filet-nuit); --mec-bord-nuit:var(--wp--preset--color--bord-nuit); --mec-creme:var(--wp--preset--color--creme); --mec-velin:var(--wp--preset--color--velin); --mec-ecru:var(--wp--preset--color--ecru); --mec-sable:var(--wp--preset--color--sable); --mec-bord-creme:var(--wp--preset--color--bord-creme); --mec-tabac:var(--wp--preset--color--tabac); --mec-tabac-fonce:var(--wp--preset--color--tabac-fonce); --mec-grenat:var(--wp--preset--color--grenat); --mec-grenat-fonce:var(--wp--preset--color--grenat-fonce); --mec-grenat-clair:var(--wp--preset--color--grenat-clair); --mec-rose:var(--wp--preset--color--rose); --mec-lin:var(--wp--preset--color--lin); --mec-sauge:var(--wp--preset--color--sauge); --mec-sauge-fonce:var(--wp--preset--color--sauge-fonce); --mec-ambre:var(--wp--preset--color--ambre); --mec-ambre-fonce:var(--wp--preset--color--ambre-fonce); /* L'AFFICHAGE, REPRIS LE 26.09.2026. Yan : « la police […] difficilement lisible […] moderne, assez carré, mais en même temps assez humain ». Onest, choisie par Yan sur la deuxième planche, celle des polices qu'aucun site de la maison n'emploie : « on a fait plein de sites déjà avec manrope ça se répète ». Carrée et sobre, bonne tenue en gros titre. Fraunces reste chargée juste au-dessus : le retour en arrière tient en une ligne. */ --mec-font-display:'Onest',system-ui,sans-serif; --mec-font-texte:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mec-fontsize-display:clamp(2.5rem,1.2rem + 4.4vw,5rem); --mec-fontsize-h2:clamp(2rem,1.3rem + 2.4vw,3.25rem); --mec-fontsize-h3:clamp(1.375rem,1.2rem + .7vw,1.75rem); --mec-fontsize-chapo:clamp(1.0625rem,1rem + .45vw,1.375rem); --mec-gouttiere:clamp(20px,5vw,64px); --mec-largeur:1200px; --mec-espace-2:8px;--mec-espace-3:12px;--mec-espace-4:16px; --mec-espace-5:24px;--mec-espace-6:40px;--mec-espace-7:64px;--mec-espace-8:112px; --mec-rayon-carte:14px;--mec-rayon-bouton:999px; } /* ── BASE ────────────────────────────────────────────────────────────────── */ html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--mec-nuit); color:var(--mec-creme); font-family:var(--mec-font-texte); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{max-width:100%} /* LE CONTOUR DE FOCUS EST LA SEULE CHOSE QUI DISE, à qui navigue au clavier, où il se trouve. Il ne se voit jamais à la souris, donc il ne se corrige jamais par hasard : il est déclaré une fois, ici, pour toute la page. */ :focus-visible{outline:2px solid var(--mec-rose);outline-offset:3px} .mec-saut{position:absolute;left:-9999px} .mec-saut:focus{left:var(--mec-gouttiere);top:10px;z-index:99;background:var(--mec-grenat);color:var(--mec-lin);padding:10px 18px;border-radius:var(--mec-rayon-bouton)} /* ── LES SECTIONS : UNE GRILLE, DEUX FONDS ALTERNÉS ───────────────────────── */ [class*="sb-s-accueil-"], [class*="sb-s-porteur-"], [class*="sb-s-investir-"], [class*="sb-s-contact-"], [class*="sb-s-apropos-"], [class*="sb-s-legal-"]{ display:grid; gap:0 var(--mec-espace-6); max-width:none; margin:0; padding:var(--mec-espace-8) var(--mec-gouttiere); background:var(--mec-nuit); color:var(--mec-creme); } /* WordPress pose `:where(.is-layout-constrained) > *` avec une marge automatique et une largeur maximale. La spécificité de `:where()` vaut zéro : cette règle gagne, et la grille reprend la main sur le placement. */ [class*="sb-s-accueil-"] > *, [class*="sb-s-porteur-"] > *, [class*="sb-s-investir-"] > *, [class*="sb-s-contact-"] > *, [class*="sb-s-apropos-"] > *, [class*="sb-s-legal-"] > *{max-width:none;margin:0} /* WordPress pose AUSSI `margin-left:auto !important` et `margin-right:auto` sur les enfants d'un conteneur contraint, cette fois sans `:where()`. Sans ce rappel, chaque bloc se centrait dans sa colonne au lieu de la remplir : les trois valeurs paraissaient centrées, et rien ne le disait. */ [class*="sb-s-accueil-"] > *, [class*="sb-s-porteur-"] > *, [class*="sb-s-investir-"] > *, [class*="sb-s-contact-"] > *, [class*="sb-s-apropos-"] > *, [class*="sb-s-legal-"] > *{margin-inline:0 !important} /* Les sections crème : la deuxième et la quatrième planche du deck. */ .sb-s-legal-mentions,.sb-s-legal-donnees{background:var(--mec-creme);color:var(--mec-nuit)} /* ── TYPOGRAPHIE COMMUNE ─────────────────────────────────────────────────── */ [class*="sb-c-"][class*="-surtitre"]{ font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--mec-grenat-clair);margin:0 0 var(--mec-espace-5) !important; } h1[class*="sb-c-"],h2[class*="sb-c-"]{ font-family:var(--mec-font-display); font-weight:340; font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144; letter-spacing:-.015em;line-height:1.02; margin:0;text-wrap:balance; } h1[class*="sb-c-"]{font-size:var(--mec-fontsize-display)} h2[class*="sb-c-"]{font-size:var(--mec-fontsize-h2);line-height:1.05} /* LA SUITE DU TITRE, EN ITALIQUE. Le deck met son second membre en italique grenat sur crème, rose sur nuit. Un champ ne transporte que du texte : la suite est donc un paragraphe, que ces règles recollent au titre — même famille, même taille, même interligne, pas de marge entre les deux. */ [class*="sb-c-"][class*="-titre-suite"]{ font-family:var(--mec-font-display); font-style:normal;font-weight:600;letter-spacing:-.02em; font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144; letter-spacing:-.015em; color:var(--mec-rose); margin:0 !important; } h1[class*="-titre"] + [class*="-titre-suite"]{font-size:var(--mec-fontsize-display);line-height:1.02} h2[class*="-titre"] + [class*="-titre-suite"]{font-size:var(--mec-fontsize-h2);line-height:1.05} [class*="sb-c-"][class*="-chapo"]{ font-size:var(--mec-fontsize-chapo);line-height:1.45; color:var(--mec-tabac);max-width:56ch;margin:0 !important; } h3[class*="sb-c-"]{ font-family:var(--mec-font-display); font-weight:450;font-size:var(--mec-fontsize-h3); font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144; line-height:1.1;margin:0; } /* ── BOUTONS : un seul plein par section, les autres en contour ──────────── */ [class*="sb-c-"][class*="-cta"] a, [class*="sb-c-"][class*="-lien"] a, a[class*="sb-c-"][class*="-cta"], a[class*="sb-c-"][class*="-lien"]{ display:inline-flex;align-items:center;justify-content:center; /* Un bouton garde sa ligne : « Déposer mon projet » se coupait en deux dès que la colonne se resserrait, et la paire perdait son alignement. */ white-space:nowrap; min-height:48px;padding:0 1.7em; font:500 .9375rem/1 var(--mec-font-texte);letter-spacing:.01em; border-radius:var(--mec-rayon-bouton); border:1.5px solid var(--mec-grenat); background:var(--mec-grenat);color:var(--mec-lin); text-decoration:none; transition:background-color .18s ease,border-color .18s ease,color .18s ease; } [class*="sb-c-"][class*="-lien"] a, a[class*="sb-c-"][class*="-lien"]{ background:transparent;color:var(--mec-creme); border-color:color-mix(in srgb,var(--mec-creme) 55%,transparent); } [class*="sb-c-"][class*="-cta"] a:hover,a[class*="sb-c-"][class*="-cta"]:hover{ background:color-mix(in srgb,var(--mec-grenat) 84%,#000); border-color:color-mix(in srgb,var(--mec-grenat) 84%,#000); } [class*="sb-c-"][class*="-lien"] a:hover,a[class*="sb-c-"][class*="-lien"]:hover{ background:color-mix(in srgb,currentColor 10%,transparent); } .wp-block-buttons[class*="sb-c-"]{display:flex;gap:var(--mec-espace-4);flex-wrap:wrap} /* ══ 1 · L'OUVERTURE ═════════════════════════════════════════════════════════ Ce que c'est, et pour qui. Le titre sur trois lignes, le paragraphe d'introduction, les deux boutons, puis les trois valeurs sous un filet. La ligne d'état ferme la vue : le cercle se constitue, et le visiteur sait dans quel moment il arrive. */ /* Six colonnes et non trois : les valeurs en occupent deux chacune, donc on retrouve les tiers, mais la rangée des boutons se règle au sixième. Sur trois colonnes, le second bouton partait au tiers de la page et les deux ne se lisaient plus comme une paire. */ /* La règle générique des chapôs pose `margin:0 !important` avec deux sélecteurs d'attribut, donc une spécificité de (0,2,0) : une classe seule perdait, même en !important. On la double ici pour reprendre la main sur l'espacement. */ /* LES TROIS VALEURS SONT DES `h2`, dessinés petits. Le rang suit celui de la page, et la taille suit le deck : `bin/site standard` relevait un saut de `h1` à `h3`, qu'aucun lecteur d'écran ne sait franchir. */ /* ══ 2 · LE PARCOURS ═════════════════════════════════════════════════════════ Comment ça se passe, en six temps numérotés, puis la planche de l'écosystème en pleine largeur. Les numéros sont dessinés ici, jamais posés en balise : un chiffre écrit dans le prototype serait perdu à la compilation. */ /* QUI PAIE QUOI, ET QUAND. Yan, le 26.09.2026 : « il faut qu'on comprenne mieux ce mécanisme à travers le site ». Le prix se disait dans les questions, donc après le doute. Il se dit maintenant à l'endroit où le visiteur vient de comprendre l'ordre des choses, en trois cartes qui tiennent sur une ligne. */ /* La règle générique des surtitres pose `margin:0 0 …` avec deux sélecteurs d'attribut : une classe seule perd, même en !important. On la double. */ /* TROIS TEINTES POUR TROIS MOMENTS. Yan, le 26.09.2026 : « il faudrait peut-être trois couleurs ou teintes différentes pour ces trois groupes d'étapes. » Les trois cartes reprennent exactement celles de la planche : sauge pour ce qui est offert, ambre pour ce que le porteur confie, grenat pour ce qui suit le financement. Les teintes se calculent depuis les jetons de la charte, pour qu'un changement de palette les emporte avec lui. */ /* L'investisseur ferme la bande : il ne paie à aucun des trois moments, donc il tient sur une ligne plutôt que dans une quatrième carte. */ /* La planche porte déjà son propre fond : l'encadrer une seconde fois en CSS faisait deux bords concentriques. Et la mise en page contrainte de WordPress plafonnait la largeur des enfants, ce qui rendait le schéma minuscule — Yan, le 26.09.2026 : « ton schéma, il est microscopique ». */ /* La planche : deux fichiers, un par orientation, et un seul servi à la fois. Le mobile porte la version verticale, redessinée pour la lecture au pouce. */ .mec-schema{display:block;width:100%;height:auto} .mec-schema--mobile{display:none} @media (max-width:820px){ .mec-schema--desktop{display:none} .mec-schema--mobile{display:block} } /* ══ 3 · LES DEUX PORTES ═════════════════════════════════════════════════════ Le visiteur se reconnaît, et va au bon endroit. Deux surfaces velours côte à côte, chacune fermée par son bouton, posé sous la carte. */ /* ══ 4 · LE CADRE ════════════════════════════════════════════════════════════ Ce qui tient la relation, dit au visiteur et non au juriste : quatre cartes vélin, chacune avec son icône en trait, et le renvoi vers la page des risques. Le détail réglementaire vit dans le dossier, pas ici. */ /* Les quatre icônes : la signature, le versement, la loupe, la balance. Elles sont des données d'image, donc elles vivent dans la feuille et pas dans le contenu — le client ne peut ni les casser ni les effacer. LA SPÉCIFICITÉ EST DOUBLÉE EXPRÈS : la règle partagée ci-dessus pose le raccourci `background`, qui remet `background-image` à `none`, avec deux sélecteurs d'attribut. Une classe seule perdait, et les quatre cartes sortaient sans icône, sans que rien ne le signale. */ /* ══ 5 · L'ÉCOSYSTÈME ════════════════════════════════════════════════════════ Qui fait le travail. Les métiers, sans les noms des marques : le visiteur ignore ce qu'est chacune, et la voix demande de nommer l'expertise. */ /* ══ 6 · LES QUESTIONS ═══════════════════════════════════════════════════════ Les objections, posées et traitées. C'est ici que le prix, le rôle de l'analyse et le risque se disent en clair, dans les mots du visiteur. */ /* La question de la taille tient sur toute la largeur : c'est la réponse la plus longue, et celle qui doit se voir. */ /* ══ 7 · REJOINDRE ═══════════════════════════════════════════════════════════ Une seule porte à l'écran : le formulaire demande lui-même ce qui amène le visiteur. Yan, le 26.09.2026 : « tu mets ça sur le formulaire ID1 ». */ /* LE FORMULAIRE SORT DE SON PARAGRAPHE, ET C'EST LE NAVIGATEUR QUI LE DÉCIDE. Le prototype écrit `

[fluentform id=1]

`. Fluent Forms rend un `
`, qu'aucun navigateur n'accepte dans un `

` : l'analyseur ferme le paragraphe avant, et le formulaire devient un frère sans notre classe, placé au hasard dans la grille. On vise donc le formulaire lui-même, et le paragraphe vidé disparaît. */ /* Les champs, aux couleurs du deck. Fluent Forms sert sa propre feuille : la nôtre vient après, et gagne à spécificité égale. */ /* ══ L'ÉCART, EN VERSION D'ACCUEIL ══════════════════════════════════════════ Yan, le 28.09.2026 : « en version plus simple, épurée, style page d'accueil, et puis le détail serait [sur À propos]. » PAS DE TABLEAU ICI, ET C'EST TOUT LE POINT. La version d'À propos oppose deux colonnes sous une clé de lecture — elle se lit, elle ne se survole pas. L'accueil ne fait que raconter : quatre lignes, l'ailleurs en gris au-dessus, le nôtre en dessous et en couleur. On comprend sans lire les deux, et celui qui veut le détail suit le lien. */ .sb-s-accueil-ecart{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas: "sur sur" "tit tit" "sui sui" "e1 e2" "e3 e4" "lie lie"; column-gap:var(--mec-espace-7);row-gap:0; align-content:start; } .sb-s-accueil-ecart .sb-c-ec-surtitre{grid-area:sur} .sb-s-accueil-ecart .sb-c-ec-titre{grid-area:tit} .sb-s-accueil-ecart .sb-c-ec-titre-suite{grid-area:sui} .sb-s-accueil-ecart .sb-c-e1-gauche,.sb-s-accueil-ecart .sb-c-e1-droite{grid-area:e1} .sb-s-accueil-ecart .sb-c-e2-gauche,.sb-s-accueil-ecart .sb-c-e2-droite{grid-area:e2} .sb-s-accueil-ecart .sb-c-e3-gauche,.sb-s-accueil-ecart .sb-c-e3-droite{grid-area:e3} .sb-s-accueil-ecart .sb-c-e4-gauche,.sb-s-accueil-ecart .sb-c-e4-droite{grid-area:e4} .sb-s-accueil-ecart .sb-c-ec-lien{grid-area:lie} /* LES DEUX LIGNES D'UNE PAIRE PARTAGENT LEUR CASE. La compilation ne transporte aucune imbrication : impossible d'envelopper un « ailleurs » et un « ici » dans une même boîte. Elles sont donc empilées dans la même zone de grille, et c'est la marge du bas qui les sépare — le résultat est celui d'une paire, sans le balisage d'une paire. */ .sb-s-accueil-ecart [class*="-gauche"], .sb-s-accueil-ecart [class*="-droite"]{ margin:0 !important;align-self:start;max-width:42ch; } .sb-s-accueil-ecart [class*="-gauche"]{ padding-top:var(--mec-espace-6); border-top:1px solid var(--mec-sable); font-size:.9375rem;color:var(--mec-tabac); } .sb-s-accueil-ecart [class*="-droite"]{ padding-top:calc(var(--mec-espace-6) + 1.9em); padding-bottom:var(--mec-espace-6); font-size:1.0625rem;font-weight:500;color:inherit; } /* La flèche qui descend d'une ligne à l'autre : un angle, pas une courbe. */ .sb-s-accueil-ecart [class*="-droite"]{position:relative} .sb-s-accueil-ecart [class*="-droite"]::before{ content:"";position:absolute;left:0;top:calc(var(--mec-espace-6) + .45em); width:9px;height:9px;background:var(--mec-accent); } .sb-s-accueil-ecart [class*="-droite"]{padding-left:22px} .sb-s-accueil-ecart [class*="-gauche"]{padding-left:22px} /* La première rangée s'écarte du titre : sans ça, le filet de gauche passait sous la descente de « et ce qu'on y répond », et une paire sur deux paraissait commencer plus bas que l'autre. */ .sb-s-accueil-ecart .sb-c-e1-gauche, .sb-s-accueil-ecart .sb-c-e2-gauche{margin-top:var(--mec-espace-7) !important} .sb-s-accueil-ecart .sb-c-e1-droite, .sb-s-accueil-ecart .sb-c-e2-droite{margin-top:var(--mec-espace-7) !important} .sb-s-accueil-ecart .sb-c-ec-lien{margin-top:var(--mec-espace-6) !important;justify-self:start} @media (max-width:860px){ .sb-s-accueil-ecart{ grid-template-columns:1fr; grid-template-areas:"sur" "tit" "sui" "e1" "e2" "e3" "e4" "lie"; } } /* ══ LES PAGES LÉGALES ══════════════════════════════════════════════════════ Sans travail de design, et c'est voulu : une ouverture nuit centrée, un corps crème dans une colonne de lecture. */ [class*="sb-s-legal-ouverture-"]{justify-items:center;text-align:center;padding-bottom:var(--mec-espace-7)} [class*="sb-s-legal-"]:not([class*="-ouverture-"]){padding-top:var(--mec-espace-7)} /* LA COLONNE DE LECTURE EST PORTÉE PAR LA SECTION, PAS PAR CHAQUE ENFANT. Yan, le 28.09.2026 : « il y a un décalage entre les titres et les sections ». Chaque enfant recevait `width:min(100%,68ch)` puis se centrait. Or `ch` est la largeur du zéro DANS LA POLICE DE L'ÉLÉMENT : un titre à 1,5 rem avait donc une boîte de moitié plus large que ses paragraphes, et, centrée, elle débordait des deux côtés. Les titres commençaient visiblement plus à gauche que leur propre texte. Posée une seule fois sur la grille, la mesure est calculée dans la taille de la section — une seule valeur pour tout le monde, et les bords s'alignent. */ [class*="sb-s-legal-"]:not([class*="-ouverture-"]){ grid-template-columns:min(100%,74ch); justify-content:center; } [class*="sb-s-legal-"]:not([class*="-ouverture-"]) > *{ width:auto;margin-inline:0 !important; } [class*="sb-s-legal-"] h2[class*="sb-c-"]{ font-size:1.5rem;margin-top:var(--mec-espace-6) !important; margin-bottom:var(--mec-espace-3) !important; } /* LE TEXTE LÉGAL EST JUSTIFIÉ, et césuré avec. Yan, le 28.09.2026 : « faut justifier tout ça ». Justifier sans césure creuse des rivières de blanc au milieu du paragraphe, parce que le navigateur n'a que les espaces pour rattraper la ligne — surtout en français, où les mots sont longs. */ [class*="sb-s-legal-"] p[class*="sb-c-"]{ margin-bottom:var(--mec-espace-4) !important; text-align:justify;text-wrap:pretty; hyphens:auto;-webkit-hyphens:auto; } /* ══ L'EN-TÊTE, LA LIGNE DE RISQUE ET LE PIED ═══════════════════════════════ */ /* LE `sticky` VA SUR LE `header`, PAS SUR SON CONTENU. `.mec-entete` est seul dans son `

` : sa boîte parente fait exactement sa hauteur, donc il n'a aucune marge pour coller et il part au défilement comme un bloc normal. Yan, le 26.09.2026 : « sur mon mobile, le menu doit être sticky aussi actuellement ; il ne l'est pas. » */ header.wp-block-template-part{ position:sticky;z-index:30; /* Connecté, WordPress pose sa barre par-dessus : le menu s'accroche dessous plutôt qu'à zéro, sinon il disparaît derrière elle. C'est justement la vue depuis laquelle on juge le site. */ top:var(--wp-admin--admin-bar--height,0px); } .mec-entete{ display:flex;align-items:center;justify-content:space-between;gap:var(--mec-espace-5); padding:var(--mec-espace-5) var(--mec-gouttiere); background:var(--mec-nuit); border-bottom:1px solid var(--mec-filet-nuit); } /* LE LOGO PREND LA COULEUR DU TEXTE, et c'est tout ce qu'il y a à régler. Le kit du 27.09.2026 livre des SVG en `fill="currentColor"` : posés dans la page, ils suivent la couleur qui les entoure, sombre ou claire. C'est pour cela qu'ils sont intégrés et non servis en image — une image est un document isolé, qui ne voit pas la couleur du texte autour d'elle. Les règles qui réécrivaient `fill` et `stroke` un par un ont disparu avec l'ancien dessin : elles rattrapaient des teintes en dur — crème et rosé — qui rendaient le mot invisible sur fond clair. Le nouveau n'en porte aucune. */ .mec-lockup{display:flex;align-items:center;text-decoration:none;color:var(--mec-creme)} .mec-pied .mec-logo{color:var(--mec-creme)} /* 38 px : la hauteur de référence du kit, celle où le carré central du symbole reste franc et où le mot garde sa graisse. */ .mec-lockup .mec-marque{height:38px;width:auto;display:block} .mec-entete .wp-block-navigation{gap:var(--mec-espace-6);font-size:.9375rem} .mec-entete .wp-block-navigation a{color:var(--mec-creme);text-decoration:none} .mec-entete .wp-block-navigation a:hover{box-shadow:inset 0 -1px 0 var(--mec-rose)} .mec-entete .wp-block-button__link{ background:var(--mec-grenat);color:var(--mec-lin); border-radius:var(--mec-rayon-bouton);padding:12px 22px; font:500 .9375rem/1 var(--mec-font-texte);text-decoration:none; } /* LA LIGNE DE RISQUE, au-dessus du pied, sur toutes les pages. Elle est fixe, affirmative, et c'est une phrase de conformité : elle ne se reformule pas. */ .mec-risque{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px; padding:var(--mec-espace-4) var(--mec-gouttiere); background:var(--mec-velours);border-top:1px solid var(--mec-filet-nuit); font-size:.9375rem;color:var(--mec-creme); } .mec-risque::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mec-grenat);flex:none} .mec-risque p{margin:0;flex:1 1 30ch} .mec-risque a{color:var(--mec-rose);white-space:nowrap} .mec-pied{ background:var(--mec-nuit);color:var(--mec-creme); padding:var(--mec-espace-7) var(--mec-gouttiere) var(--mec-espace-6); display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--mec-espace-6); font-size:.9375rem; } /* Le pied porte la version verticale, qui inclut « BY YAN HALTEY BRANDS » : plus haute que large, elle demande une hauteur, pas une largeur. */ .mec-pied .mec-logo{height:86px;width:auto;display:block} .mec-pied p{color:var(--mec-tabac);max-width:40ch} .mec-pied a{color:var(--mec-creme);text-decoration:none} .mec-pied a:hover{text-decoration:underline} .mec-pied .wp-block-navigation{flex-direction:column;gap:var(--mec-espace-2);align-items:flex-start} .mec-pied__titre{ font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mec-grenat-clair);margin:0 0 var(--mec-espace-4) } .mec-pied__bas{ grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px; padding-top:var(--mec-espace-5);border-top:1px solid var(--mec-filet-nuit); font-size:.8125rem;color:var(--mec-tabac); } /* ══ LE TÉLÉPHONE ═══════════════════════════════════════════════════════════ Une seule colonne, et les grilles nommées rendent la main : les champs reprennent l'ordre du document, qui est déjà celui de la lecture. */ @media (max-width:900px){ [class*="sb-s-accueil-"], [class*="sb-s-porteur-"], [class*="sb-s-investir-"], [class*="sb-s-apropos-"], [class*="sb-s-contact-"]{ grid-template-columns:1fr !important; grid-template-areas:none !important; padding-top:var(--mec-espace-7);padding-bottom:var(--mec-espace-7); } [class*="sb-s-accueil-"] > *, [class*="sb-s-porteur-"] > *, [class*="sb-s-investir-"] > *, [class*="sb-s-apropos-"] > *, [class*="sb-s-contact-"] > *{grid-area:auto !important} .sb-s-accueil-portes h3[class*="sb-c-i"]{margin-top:var(--mec-espace-6) !important} .mec-entete{padding-top:var(--mec-espace-4);padding-bottom:var(--mec-espace-4)} .mec-pied{grid-template-columns:1fr} /* L'en-tête tient sur une ligne : le lockup rétrécit, le burger reste à droite. Sans `nowrap`, la navigation passait sous le logo et le bouton d'ouverture se retrouvait dans une bande vide, invisible. */ .mec-entete{gap:var(--mec-espace-3);flex-wrap:wrap;align-items:center} .mec-entete .mec-entete-cta{display:none !important} .mec-entete > p{margin:0;min-width:0;flex:1 1 auto} .mec-entete .mec-lockup .mec-marque{height:32px} .mec-entete .mec-entete-nav{margin-left:auto;flex:0 0 auto} /* Sous le seuil, la navigation du bloc laisse la place au menu `details`. */ .mec-entete .mec-entete-nav{display:none !important} } /* ══ LA CIBLE TACTILE ═══════════════════════════════════════════════════════ Mesuré le 28.09.2026 au doigt, à 393 px : les liens du pied faisaient 24 px de haut, les appels des cartes 34. Sous 44 px, on vise à côté — et sur un menu de pied, deux liens séparés de rien se touchent l'un pour l'autre. `pointer:coarse` ET RIEN D'AUTRE. La règle ne s'applique qu'à un pointeur grossier : un doigt, un stylet. À la souris, le dessin ne bouge pas d'un pixel — c'est ce qui permet d'agrandir la zone sans épaissir la page. C'est la hauteur de la ZONE qui grandit, pas le texte : le `padding` est vertical, la ligne reste à sa place, et le trait de soulignement suit le texte parce qu'il est posé en `box-shadow` sur la ligne, pas sur la boîte. */ @media (pointer:coarse){ .mec-pied-menu a, .mec-entete .wp-block-navigation a, .mec-burger__menu a{ padding-block:10px; } .sb-s-contact-chemins [class*="-lien"] a, .sb-s-contact-chemins a[class*="-lien"], .sb-s-accueil-portes [class*="-lien"] a, .sb-s-accueil-portes a[class*="-lien"], [class*="-appel"] a[class*="-lien"]{ padding-block:6px !important; } /* Les pastilles de palette : la surface visible reste à 22 px, la zone touchable passe à 44 par un pseudo-élément qui déborde sans se voir. */ .mec-palettes a::before{ content:"";position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:44px;height:44px; } } /* Une animation qui ne se coupe pas rend certaines personnes physiquement malades. Le réglage existe dans tous les systèmes : il suffit de le lire. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ══ LA PAGE DU JOURNAL, SUR L'ACCUEIL ══════════════════════════════════════ Un renvoi, pas un extrait. Yan, le 26.09.2026 : « en journal, non, pas en bas d'accueil ; oui, tu peux faire un lien vers le journal, mais tu fais une quatrième page. » */ .sb-s-accueil-journal{ grid-template-columns:1fr; grid-template-areas:"sur" "tit" "sui" "cha" "lnk"; align-content:start; padding-top:var(--mec-espace-7);padding-bottom:var(--mec-espace-7); } .sb-s-accueil-journal .sb-c-jou-surtitre{grid-area:sur} .sb-s-accueil-journal .sb-c-jou-titre{grid-area:tit} .sb-s-accueil-journal .sb-c-jou-titre-suite{grid-area:sui} .sb-s-accueil-journal .sb-c-jou-lien{grid-area:lnk;justify-self:start;margin-top:var(--mec-espace-6) !important} /* ══ PORTER UN PROJET ═══════════════════════════════════════════════════════ */ [class*="-ouverture"] [class*="-surtitre"]{grid-area:sur} /* Les deux ouvertures de page partagent le même gabarit : elles se déclarent ensemble, chacune avec sa section, pour qu'aucune ne reprenne le placement de l'autre — c'est ce croisement qui avait cassé la mise en page. */ /* ce que vous obtenez · trois cartes velours, puis le bandeau du fonds */ /* la grille de maturité · six critères, puis les cinq stades QUINZE COLONNES, ET C'EST CE QUI REND LA VUE POSSIBLE. Six critères se rangent par trois (cinq colonnes chacun) et cinq stades par cinq (trois colonnes chacun) : aucun découpage en trois ou en cinq ne tient les deux. Le placement est donc explicite, et non par `grid-template-areas`, qu'un pas de 15 rendrait illisible. */ /* LES CINQ STADES, en une barre qui va de l'idée à l'investissable. Cinq plutôt que trois, décidé par Yan le 26.09.2026 : « il n'y a pas besoin, peut-être, de trois niveaux ; faut peut-être faire cinq ». */ /* SUR TÉLÉPHONE, UNE ÉCHELLE, PAS CINQ BOÎTES. La grille passe en une colonne et la marge haute s'appliquait aux cinq étiquettes : cinq blocs isolés, un par écran. Elles se resserrent ici en une colonne continue, avec le filet qui monte de la teinte claire à la teinte pleine. */ @media (max-width:900px){ } /* ce que nous vous demandons · quatre lignes à puces */ /* ce à quoi vous vous engagez · quatre cartes vélin */ /* déposer · le formulaire, seul à l'écran */ /* ══ INVESTIR ═══════════════════════════════════════════════════════════════ */ /* deux façons de soutenir · deux cartes vélin sur fond crème */ /* la règle d'allocation · cinq lignes numérotées */ /* les risques · quatre cartes vélin, puis le renvoi */ /* ══ LE JOURNAL · articles WordPress ════════════════════════════════════════ Yan, le 26.09.2026 : « utilise bien des articles selon le système WordPress ». Ce sont de vrais `post`, donc le thème les habille par ses gabarits, et la feuille ne fait que les mettre en colonne de lecture. */ /* ── LE JOURNAL · LA MÊME LARGEUR, ET LE MÊME SYSTÈME DE CARTES ───────── Yan, le 27.09.2026 : « le journal, la page journal aussi. Regarde que ça rentre dans le bon viewport, là c'est pas assez de la pleine largeur. » La liste occupait 46 rem au milieu d'un écran de 1480 : elle prend maintenant la largeur de contenu commune, en trois cartes par rangée. */ .mec-journal{padding:var(--mec-espace-8) var(--mec-marge);background:var(--mec-nuit)} /* La largeur maximale de WordPress se pose à chaque niveau de la requête : il faut la lever sur le bloc `query` et sur la liste, pas seulement sur les enfants directs de la page, sinon les cartes s'arrêtent au milieu. */ .mec-journal > *,.mec-journal .wp-block-query, .mec-journal .wp-block-post-template{ width:100% !important;max-width:none !important;margin-inline:0 !important; } .mec-journal h1{font-family:var(--mec-font-display);font-weight:340; font-size:clamp(2rem,3.5vw,3.125rem);letter-spacing:-.02em;line-height:1.06} .mec-journal__chapo{font-size:1.1875rem;line-height:1.45;color:var(--mec-tabac); margin-top:var(--mec-espace-5);max-width:62ch} .mec-journal a{color:inherit;text-decoration:none} .mec-journal .wp-block-post-template{ list-style:none;display:grid;grid-template-columns:repeat(3,1fr); gap:var(--mec-espace-6);margin:var(--mec-espace-8) 0 0;padding:0; } /* LA CARTE DU JOURNAL. La vignette est posée DANS le cadre, avec la marge tout autour, comme les fiches du noyau : c'est le même objet. */ /* Les cartes s'alignent sur la plus haute, et la vignette reste DANS le cadre, avec la marge tout autour : sans `align-items`, chaque carte s'arrêtait à son propre texte et la rangée partait en escalier. */ .mec-journal .wp-block-post-template{align-items:stretch} .mec-journal .wp-block-post-template > li{ position:relative;display:flex;flex-direction:column; background:var(--mec-velin);border:1px solid var(--mec-sable); padding:var(--mec-espace-5) var(--mec-espace-5) var(--mec-espace-8); overflow:hidden;counter-increment:art; } .mec-journal .wp-block-post-template > li > *{max-width:none !important;margin-inline:0 !important} .mec-journal{counter-reset:art} .mec-journal .wp-block-post-template > li::before{ content:"";position:absolute;left:0;right:0;top:3px;height:1px; background:var(--mec-nuit);opacity:.14; } .mec-journal .wp-block-post-template > li::after{ content:counter(art,decimal-leading-zero);position:absolute;right:10px;bottom:-22px; font-size:5rem;font-weight:600;line-height:.82;letter-spacing:-.04em; color:var(--mec-grenat);opacity:.09;pointer-events:none; } .mec-journal .mec-vignette{margin:0 0 var(--mec-espace-5) !important} .mec-journal .mec-vignette{border:1px solid var(--mec-filet-nuit);line-height:0} .mec-journal .mec-vignette img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover} .mec-journal .wp-block-post-date{font-size:.75rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--mec-tabac)} .mec-journal .wp-block-post-title{margin-top:var(--mec-espace-3); font-family:var(--mec-font-display);font-weight:450;font-size:1.3125rem; letter-spacing:-.012em;line-height:1.2} .mec-journal .wp-block-post-title a:hover{color:var(--mec-rose)} .mec-journal .wp-block-post-excerpt{margin-top:var(--mec-espace-3);color:var(--mec-tabac); font-size:.9375rem;line-height:1.55;max-width:none} .mec-journal .wp-block-query-pagination{margin-top:var(--mec-espace-7); display:flex;gap:var(--mec-espace-4);font-size:.875rem;color:var(--mec-tabac)} /* ── L'ARTICLE · UNE COLONNE DE LECTURE, DANS LA LARGEUR COMMUNE ───────── */ .mec-article{padding:var(--mec-espace-8) var(--mec-marge);background:var(--mec-nuit)} .mec-article > *{width:100%;max-width:44rem;margin-inline:0 !important} .mec-article h1{font-family:var(--mec-font-display);font-weight:340;font-size:clamp(1.8rem,3vw,2.75rem); letter-spacing:-.02em;line-height:1.08;max-width:22ch} .mec-article h2{font-family:var(--mec-font-display);font-weight:450;font-size:1.75rem; letter-spacing:-.015em;margin-top:var(--mec-espace-7)} /* Yan, le 28.09.2026 : « pour les articles du blog, il faut que le texte soit justifié à gauche et à droite. » Avec césure, pour la même raison que les pages légales : justifier sans césurer creuse des rivières de blanc. */ .mec-article p{ margin-bottom:var(--mec-espace-4);color:var(--mec-tabac); text-align:justify;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto; } /* ══ LE GRAPHISME · SÉPARATIONS, NUMÉROS, CHEVRONS ══════════════════════════ Yan, le 26.09.2026 : « il manque un peu de séparations entre les sections, c'est pas encore assez fin. Quand on a des étapes, il faut mettre des numéros 1, 2, 3 ou utiliser des chevrons, qu'on comprenne ce que c'est, comme une machine d'état. » TROIS GESTES, ET AUCUNE BALISE EN PLUS. Un filet ferme chaque section, un compteur numérote les surtitres, et un chevron dessiné en `::after` relie les cartes d'une séquence. Tout vit dans la feuille : la compilation ne transporterait ni un trait ni un chiffre écrits dans le prototype. */ /* ── LE FILET DE SECTION ─────────────────────────────────────────────────── */ main{counter-reset:sect} [class*="sb-s-accueil-"],[class*="sb-s-porteur-"],[class*="sb-s-investir-"], [class*="sb-s-contact-"],[class*="sb-s-apropos-"]{ border-top:1px solid var(--mec-filet-nuit); } /* Le compteur avance sur le SURTITRE, pas sur la section : une bande sans surtitre — une reprise de la précédente — ne doit pas manger un numéro. Posé sur la section, le compteur affichait 01 puis 03 sur « Nous écrire ». */ [class*="sb-c-"][class*="-surtitre"]{counter-increment:sect} /* La première section n'a rien au-dessus d'elle : un filet sous l'en-tête ferait une double ligne, que l'œil lit comme un défaut. */ /* WordPress glisse une enveloppe `.entry-content` entre `main` et la première section : `main > …:first-child` ne trouvait donc rien, et le filet de la section doublait celui de l'en-tête. Yan l'a vu deux fois. */ main > [class*="sb-s-"]:first-child, .entry-content > [class*="sb-s-"]:first-child{border-top:0} /* ── LE NUMÉRO DE SECTION, DANS LE SURTITRE ──────────────────────────────── */ [class*="sb-c-"][class*="-surtitre"]::before{ content:counter(sect,decimal-leading-zero); margin-right:.9em; color:color-mix(in srgb,currentColor 55%,transparent); font-variant-numeric:tabular-nums; } [class*="sb-c-"][class*="-surtitre"]::after{ content:"";display:inline-block;vertical-align:middle; width:2.4em;height:1px;margin-left:1em; background:color-mix(in srgb,currentColor 45%,transparent); } /* ── LES CHEVRONS D'UNE SÉQUENCE ───────────────────────────────────────────── Trois cartes qui se suivent dans le temps ne se lisent pas comme trois cartes côte à côte. Le chevron se pose dans la gouttière, entre la carte et la suivante, et il dit le sens de lecture. */ /* PAS DE CHEVRON SUR TÉLÉPHONE. Pivoté d'un quart de tour, il s'accrochait au titre de la carte et tombait sous le numéro, À L'INTÉRIEUR de la carte, au lieu d'aller entre deux cartes. Empilées, les cartes se lisent déjà dans l'ordre, et les numéros disent la séquence. */ @media (max-width:900px){ } /* ── LES ÉTAPES DU PORTEUR, NUMÉROTÉES ───────────────────────────────────── */ /* ── LE JOURNAL · LA VIGNETTE ET LE RYTHME ───────────────────────────────── */ .mec-vignette a,.mec-vignette img{display:block;width:100%;height:auto} .mec-vignette__img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover} /* WordPress pose une marge de bloc sur les frères d'un conteneur contraint : elle s'ajoutait ici aux gouttières de la grille, et le titre tombait au milieu de la vignette. La grille gère l'espacement, pas les marges. */ .mec-journal li > *{margin-block:0 !important} .mec-journal .wp-block-post-title{margin:0} .mec-journal .wp-block-post-title a{font-size:1.75rem;line-height:1.12} .mec-journal .wp-block-post-excerpt{margin:0} .mec-journal .wp-block-post-excerpt__excerpt{color:var(--mec-tabac)} .mec-journal .wp-block-post-date{margin:0} .mec-article__image{margin:0 0 var(--mec-espace-7) !important} .mec-article__image img{width:100%;height:auto;border-radius:var(--mec-rayon-carte); border:1px solid var(--mec-filet-nuit);display:block} @media (min-width:901px){ .mec-journal > *{max-width:60rem} .mec-journal .mec-vignette{grid-area:vig;margin-bottom:0;align-self:start} .mec-journal .wp-block-post-date{grid-area:dat} .mec-journal .wp-block-post-title{grid-area:tit} .mec-journal .wp-block-post-excerpt{grid-area:exc} } /* ══ LE BURGER, ET LE PASSAGE D'UNE PAGE À L'AUTRE ══════════════════════════ Yan, le 26.09.2026 : « un burger en haut à droite, et puis tous les boutons à l'intérieur […] rajoute aussi un petit léger effet de fade in, fade out lors du changement de page, tout en donnant un aspect un petit peu classe, mais sans que ça soit gadget non plus. » */ /* ── LE BURGER, EN `details` ─────────────────────────────────────────────── */ /* NE JAMAIS CHANGER LE `display` D'UN `details`. Chrome rend son contenu dans un `::details-content` : un `display:flex` posé sur le `details` ouvrait bien l'élément — la croix s'affichait, `[open]` matchait — mais le panneau ne paraissait plus du tout. Trois essais pour le voir. Mesuré le 26.09.2026. */ .mec-burger{margin-left:auto} .mec-burger > summary{width:44px;margin-left:auto} .mec-burger > summary{ list-style:none;display:grid;place-items:center; width:44px;height:44px;border-radius:12px;cursor:pointer; color:var(--mec-creme);border:1px solid var(--mec-filet-nuit); } .mec-burger > summary::-webkit-details-marker{display:none} .mec-burger > summary svg{width:24px;height:24px;display:block} .mec-burger > summary svg path{transition:transform .22s ease,opacity .18s ease;transform-origin:center} .mec-burger[open] > summary{background:var(--mec-velours)} .mec-burger[open] .mec-burger__l1{transform:translateY(5px) rotate(45deg)} .mec-burger[open] .mec-burger__l2{opacity:0} .mec-burger[open] .mec-burger__l3{transform:translateY(-5px) rotate(-45deg)} /* LE PANNEAU RESTE DANS LE FLUX, et c'est un choix payé par trois essais. Posé en `absolute` puis en `fixed`, il ne s'affichait pas du tout : quelque chose dans le contexte de l'en-tête sticky le rognait, sans erreur et sans trace. Une sonde a montré que le même panneau en `static` s'affiche parfaitement. Il pousse donc la page vers le bas à l'ouverture — c'est le comportement habituel d'un menu de téléphone, et il ne casse jamais. */ .mec-burger__menu{ display:none;flex:0 0 100%;width:100%;max-width:22rem;margin:14px 0 0 auto;box-sizing:border-box; background:var(--mec-nuit);border:1px solid var(--mec-filet-nuit); border-radius:var(--mec-rayon-carte); padding:var(--mec-espace-5); box-shadow:0 24px 60px rgba(0,0,0,.45); } .mec-burger__menu ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--mec-espace-2)} .mec-burger__menu a{ display:block;padding:12px 10px;text-decoration:none; font-family:var(--mec-font-display);font-size:1.25rem;font-weight:500; color:var(--mec-creme);border-radius:10px; } .mec-burger__menu a:hover{background:var(--mec-velours)} .mec-burger__cta{margin-top:var(--mec-espace-3);border-top:1px solid var(--mec-filet-nuit);padding-top:var(--mec-espace-4)} .mec-burger__cta a{ background:var(--mec-grenat);color:var(--mec-lin);text-align:center; border-radius:var(--mec-rayon-bouton);font:500 1rem/1 var(--mec-font-texte); padding:16px 20px; } /* Au-dessus du seuil, la navigation du bloc suffit. */ /* Le panneau paraît quand le bouton est ouvert. `:has()` regarde le frère précédent, ce qu'aucun sélecteur ne savait faire avant lui. */ .mec-entete:has(.mec-burger[open]) .mec-burger__menu{display:block} @media (min-width:901px){.mec-burger,.mec-burger__menu{display:none !important}} /* ── LE PASSAGE D'UNE PAGE À L'AUTRE ───────────────────────────────────────── Les transitions de vue du navigateur : un fondu entre deux documents, sans une ligne de JavaScript et sans écran blanc. Là où elles manquent, la navigation reste exactement ce qu'elle était — rien à rattraper. */ @view-transition{navigation:auto} ::view-transition-old(root){animation:mec-sortie .22s ease both} ::view-transition-new(root){animation:mec-entree .32s ease both} @keyframes mec-sortie{to{opacity:0}} @keyframes mec-entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* PAS DE `view-transition-name` SUR L'EN-TÊTE, et ça s'est payé cher. Un nom de transition fait de l'élément un bloc conteneur et un contexte d'empilement : le panneau du burger, posé en `fixed`, s'y trouvait pris et ne s'affichait plus du tout — sans erreur, sans trace, et sans qu'aucune règle de la feuille ne l'explique. Le fondu porte donc sur la page entière, en-tête compris. Mesuré le 26.09.2026. */ /* Une animation qui ne se coupe pas rend certaines personnes malades : le réglage du système désactive le fondu, et la navigation redevient sèche. */ @media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none !important} } /* ══ LES VARIANTES DE PALETTE — TEMPORAIRE ══════════════════════════════════ Yan, le 26.09.2026 : « on est peut-être un petit peu trop dans du rose […] peut-être plus dans du bleu, du vert […] une combinaison qui reste un peu différenciatrice, humaine, chaleureuse, mais avec une bonne proportion. » CHAQUE VARIANTE NE REDÉFINIT QUE LES JETONS D'ACCENT. Les fonds nuit et crème ne bougent pas : c'est la quantité d'accent qui était en cause, pas le contraste, qui est mesuré et conforme. Une variante qui refait tout aurait demandé de tout remesurer. CE BLOC ET SON SÉLECTEUR SORTENT AVANT LA MISE EN LIGNE. */ /* EN BAS À DROITE, ET FLOTTANTE. Yan, le 26.09.2026 : « si tu fais un sélecteur de couleurs, tu fais une petite boîte flottante en bas à droite, pas un machin en haut qui prend de la place dans le menu. » Il avait raison au-delà de la place : un outil posé dans l'en-tête fausse le jugement sur l'en-tête, qui est justement ce qu'on regarde. */ /* ── B · BLEU ET CUIVRE ──────────────────────────────────────────────────── */ :root[data-palette="bleu"]{ --mec-nuit:#111827;--mec-velours:#1B2435;--mec-filet-nuit:#2E3A4E; --mec-creme:#EDE7DF;--mec-velin:#F8F4EE;--mec-sable:#D6CBBB; --mec-tabac:#AFA79C;--mec-tabac-fonce:#5E5A52; --mec-grenat:#B4703A;--mec-grenat-fonce:#8A5122;--mec-grenat-clair:#DDA877; --mec-rose:#E0B58A;--mec-lin:#FFF8F0; } /* ── C · VERT ET SABLE ───────────────────────────────────────────────────── */ :root[data-palette="vert"]{ --mec-nuit:#16201B;--mec-velours:#1F2C25;--mec-filet-nuit:#324237; --mec-creme:#EFE9DC;--mec-velin:#FAF6EC;--mec-sable:#D8CDB6; --mec-tabac:#AEA795;--mec-tabac-fonce:#5B5747; --mec-grenat:#A8763C;--mec-grenat-fonce:#7C5322;--mec-grenat-clair:#D6AC78; --mec-rose:#DCBC8C;--mec-lin:#FFFAF0; } /* ── D · SARCELLE ET ROSÉ ────────────────────────────────────────────────── */ :root[data-palette="sarcelle"]{ --mec-nuit:#12222A;--mec-velours:#1B2F39;--mec-filet-nuit:#2C4652; --mec-creme:#EFE6E2;--mec-velin:#FAF3F0;--mec-sable:#D9C7C0; --mec-tabac:#AEA09B;--mec-tabac-fonce:#5D5450; --mec-grenat:#1F7A78;--mec-grenat-fonce:#145B59;--mec-grenat-clair:#7FC0BD; --mec-rose:#E4AFA6;--mec-lin:#F6FDFC; } /* ══ L'AXE DE LUMIÈRE — TEMPORAIRE, AVEC LE SÉLECTEUR ═══════════════════════ Yan, le 26.09.2026 : « est-ce qu'on ne fait pas une version aussi jour, plus claire, plus lumineuse […] utiliser les contrastes avec parcimonie […] ça doit juste être des options, pour ajuster le niveau de darkitude. » QUATRE CRANS, PAS UN CURSEUR. Éclaircir un fond d'un pourcentage donné change tous les ratios de contraste et ternit les couleurs chaudes. Ce qui se pratique, c'est une échelle tonale où chaque cran choisit sa paire fond/texte pour rester au-dessus de 4,5:1 — trois ou quatre crans, jamais un réglage continu. L'AXE EST INDÉPENDANT DE LA COULEUR : il ne touche que les surfaces et les filets, jamais les jetons d'accent. On compare donc une couleur à luminosité égale, et une luminosité à couleur égale. CE BLOC SORT AVANT LA MISE EN LIGNE, avec le sélecteur. */ /* ── JOUR · l'inversion ────────────────────────────────────────────────────── Les sections sombres passent en crème et les crèmes en sombre. L'alternance tient, la page s'ouvre sur du clair. C'est la seule inversion possible sans refaire les jetons : `--mec-creme` sert à la fois de texte sur fond sombre et de fond de section, les deux rôles ne se séparent qu'en renommant. */ :root[data-lumiere="jour"]{ --mec-nuit:#FBF5EE;--mec-velours:#F3E7DA;--mec-filet-nuit:#DDCAB9;--mec-bord-nuit:#8F7B6E; --mec-creme:#1C1416;--mec-velin:#2A1F22;--mec-sable:#3E3033; --mec-tabac:#6B574D;--mec-tabac-fonce:#BCA99C; /* LE ROSE EST UNE COULEUR DE FOND SOMBRE. Sur une surface claire il tombe à 2:1 : illisible, et c'est lui qui porte le second membre de chaque titre, les puces et les numéros. Mesuré le 26.09.2026. Sur les crans clairs, le jeton d'accent bascule vers le grenat foncé. */ --mec-rose:#8E2F3A;--mec-grenat-clair:#8E2F3A; } /* ── DOUX · le sombre atténué ────────────────────────────────────────────── */ :root[data-lumiere="doux"]{ --mec-nuit:#33272B;--mec-velours:#3E3035;--mec-filet-nuit:#54444A; --mec-creme:#F6EEE6;--mec-velin:#FDF9F4;--mec-sable:#E3D6C9; --mec-tabac:#C9B9AC;--mec-tabac-fonce:#6B574D; } /* ── NUIT · le contraste maximal ─────────────────────────────────────────── */ :root[data-lumiere="nuit"]{ --mec-nuit:#0B0709;--mec-velours:#141013;--mec-filet-nuit:#2A2226; --mec-creme:#F7EFE5;--mec-velin:#FFFCF7;--mec-sable:#D5C6B6; --mec-tabac:#B5A399;--mec-tabac-fonce:#5F4C43; } .mec-palettes__titre--2{margin-top:6px} /* ══ LA SECTION D'APPEL, LA PAGE DE CONTACT, ET LE DÉROULÉ ═════════════════ */ [class*="-appel"]{ /* Six colonnes : la paire de boutons se règle au sixième, comme sur l'accueil. Sur deux colonnes, le second bouton partait à la moitié. */ grid-template-columns:repeat(6,1fr); grid-template-areas: "sur sur sur sur sur sur" "tit tit tit tit tit tit" "sui sui sui sui sui sui" "cha cha cha cha cha cha" "ct1 ct2 ct2 ct2 ct2 ct2"; align-content:start;align-items:start; } [class*="-appel"] .sb-c-app-surtitre{grid-area:sur}[class*="-appel"] .sb-c-app-titre{grid-area:tit}[class*="-appel"] .sb-c-app-titre-suite{grid-area:sui} [class*="-appel"] .sb-c-app-chapo{grid-area:cha;margin-top:var(--mec-espace-4) !important;max-width:62ch} [class*="-appel"] .sb-c-app-cta{grid-area:ct1;justify-self:start;margin-top:var(--mec-espace-6) !important} [class*="-appel"] .sb-c-app-lien{grid-area:ct2;justify-self:start;margin-top:var(--mec-espace-6) !important} /* ── LA PAGE DE CONTACT ──────────────────────────────────────────────────── */ .sb-s-contact-ouverture{ grid-template-columns:1fr;grid-template-areas:"sur" "tit" "sui" "cha"; align-content:start;padding-bottom:var(--mec-espace-7); } .sb-s-contact-ouverture .sb-c-cou-surtitre{grid-area:sur}.sb-s-contact-ouverture .sb-c-cou-titre{grid-area:tit} .sb-s-contact-ouverture .sb-c-cou-titre-suite{grid-area:sui}.sb-s-contact-ouverture .sb-c-cou-chapo{grid-area:cha} .sb-s-contact-ouverture p.sb-c-cou-chapo{margin-top:var(--mec-espace-6) !important;max-width:58ch} /* `padding-top:0` collait le filet de section au haut des cartes. La bande des chemins respire comme les autres sections. */ .sb-s-contact-chemins{ grid-template-columns:repeat(3,1fr); grid-template-areas:"c1n c2n c3n" "c1t c2t c3t" "c1l c2l c3l"; align-content:start;column-gap:var(--mec-espace-6);row-gap:0; } .sb-s-contact-chemins .sb-c-c1-nom{grid-area:c1n}.sb-s-contact-chemins .sb-c-c2-nom{grid-area:c2n}.sb-s-contact-chemins .sb-c-c3-nom{grid-area:c3n} .sb-s-contact-chemins .sb-c-c1-texte{grid-area:c1t}.sb-s-contact-chemins .sb-c-c2-texte{grid-area:c2t}.sb-s-contact-chemins .sb-c-c3-texte{grid-area:c3t} .sb-s-contact-chemins .sb-c-c1-lien{grid-area:c1l}.sb-s-contact-chemins .sb-c-c2-lien{grid-area:c2l}.sb-s-contact-chemins .sb-c-c3-lien{grid-area:c3l} /* Yan, le 27.09.2026 : « toutes ces icônes ne sont pas belles, c'est pas beau, la mise en page. » Les trois chemins deviennent trois cartes du système : l'angle droit, le filet double, et plus une seule icône. */ .sb-s-contact-chemins h3[class*="sb-c-c"]{ position:relative;background:var(--mec-velin); border:1px solid var(--mec-sable);border-bottom:0; padding:var(--mec-espace-6) var(--mec-espace-6) 0; margin-top:0 !important;font-size:1.25rem;font-weight:450;letter-spacing:-.01em; color:inherit; } .sb-s-contact-chemins h3[class*="sb-c-c"]::before{ content:"";position:absolute;left:0;right:0;top:3px;height:1px; background:var(--mec-nuit);opacity:.14; } /* ── LES TROIS ICÔNES DES CHEMINS ───────────────────────────────────────── Yan, le 28.09.2026 : « on pourrait mettre un peu d'icônes, illustrer un tout petit peu plus, que ce soit un peu plus sexy. » DESSINÉES À L'ANGLE DROIT, et pas prises dans une fonte d'icônes. C'est ce qui avait fait échouer la première tentative, le 27.09 : « toutes ces icônes ne sont pas belles ». Des glyphes arrondis dans une charte qui n'a que des angles droits se voient comme une pièce rapportée. POSÉES EN MASQUE, ET NON EN IMAGE DE FOND. Un SVG servi dans un `url(data:)` est un document isolé : il n'hérite pas de `currentColor`, et il aurait fallu réécrire sa teinte à chaque cran et à chaque palette. Un masque ne porte aucune couleur — c'est le `background-color` qui la donne, et celui-là hérite. Une seule déclaration pour les cinq palettes. */ .sb-s-contact-chemins h3[class*="sb-c-c"]{ padding-top:calc(var(--mec-espace-6) + 38px); } .sb-s-contact-chemins h3[class*="sb-c-c"]::after{ content:"";position:absolute;left:var(--mec-espace-6); top:var(--mec-espace-6);width:26px;height:26px; background-color:var(--mec-accent); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; } /* L'enveloppe : un rectangle et son pli, deux droites qui se rejoignent. */ .sb-s-contact-chemins .sb-c-c1-nom::after{ --i:url('data:image/svg+xml;utf8,'); -webkit-mask-image:var(--i);mask-image:var(--i); } /* Le combiné : un appareil, pas une courbe. */ .sb-s-contact-chemins .sb-c-c2-nom::after{ --i:url('data:image/svg+xml;utf8,'); -webkit-mask-image:var(--i);mask-image:var(--i); } /* La bulle : carrée, avec sa pointe — le seul endroit où le dessin sort du rectangle, et c'est ce qui la fait lire comme une bulle. */ .sb-s-contact-chemins .sb-c-c3-nom::after{ --i:url('data:image/svg+xml;utf8,'); -webkit-mask-image:var(--i);mask-image:var(--i); } .sb-s-contact-chemins p[class*="sb-c-c"][class*="-texte"]{ background:var(--mec-velin); border-left:1px solid var(--mec-sable);border-right:1px solid var(--mec-sable); padding:var(--mec-espace-4) var(--mec-espace-6) 0;margin:0 !important; color:var(--mec-tabac);font-size:.9375rem;line-height:1.5; } .sb-s-contact-chemins [class*="-lien"]{ background:var(--mec-velin); border:1px solid var(--mec-sable);border-top:0; padding:var(--mec-espace-5) var(--mec-espace-6) var(--mec-espace-6) !important; margin:0 !important; } .sb-s-contact-chemins [class*="-lien"] a, .sb-s-contact-chemins a[class*="-lien"]{ background:none !important;border:0 !important;border-radius:0 !important; padding:0 !important;min-height:0 !important;justify-content:flex-start; font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--mec-grenat-fonce) !important; } .sb-s-contact-formulaire{ grid-template-columns:1fr;grid-template-areas:"sur" "tit" "sui" "frm" "rea"; align-content:start; } .sb-s-contact-formulaire .sb-c-frm-surtitre{grid-area:sur}.sb-s-contact-formulaire .sb-c-frm-titre{grid-area:tit}.sb-s-contact-formulaire .sb-c-frm-titre-suite{grid-area:sui} .sb-s-contact-formulaire .sb-c-frm-form{grid-area:frm;margin:0 !important} .sb-c-frm-form:empty{display:none} .sb-s-contact-formulaire .fluentform{ grid-area:frm;margin-top:var(--mec-espace-7);max-width:46rem; background:var(--mec-velours);border:1px solid var(--mec-filet-nuit); border-radius:var(--mec-rayon-carte);padding:var(--mec-espace-6) var(--mec-espace-5); } .sb-s-contact-formulaire .ff-el-input--label label{color:var(--mec-creme);font-weight:500;font-size:.9375rem} .sb-s-contact-formulaire .ff-el-form-check-label, .sb-s-contact-formulaire .ff-el-form-check-label span{color:var(--mec-tabac)} .sb-s-contact-formulaire .ff-el-group{margin-bottom:var(--mec-espace-5)} .sb-s-contact-formulaire input[type="text"], .sb-s-contact-formulaire input[type="email"], .sb-s-contact-formulaire textarea{ background:var(--mec-nuit);border:1px solid var(--mec-filet-nuit); color:var(--mec-creme);border-radius:10px;padding:12px 14px; } .sb-s-contact-formulaire .ff-btn-submit{ background:var(--mec-grenat) !important;color:var(--mec-lin) !important; border-radius:var(--mec-rayon-bouton);border:0;padding:14px 26px;font-weight:500; } /* L'infobulle de FluentForm arrive en bleu système : elle prend la couleur du texte, sinon elle est la seule tache froide de la page. */ .sb-s-contact-formulaire .ff-el-tooltip, .sb-s-contact-formulaire .ff-el-tooltip svg{color:var(--mec-tabac);fill:currentColor} .sb-s-contact-formulaire .sb-c-frm-reassurance{grid-area:rea;margin-top:var(--mec-espace-4) !important;font-size:.9375rem;color:var(--mec-tabac)} /* ── LE CHEMIN SE DÉROULE AU DÉFILEMENT ────────────────────────────────────── Yan, le 26.09.2026 : « quand on est sur le chemin, il faudrait peut-être qu'il se déroule aussi, puis que les éléments apparaissent au fil du scroll ». PAS UNE LIGNE DE JAVASCRIPT. Les animations liées au défilement sont natives : `animation-timeline: view()` lie la progression à l'entrée de l'élément dans la fenêtre. Là où elles manquent, rien n'est animé et tout s'affiche — c'est le comportement d'avant, pas une page cassée. UNIQUEMENT SUR LE CHEMIN. Un site où tout apparaît devient fatigant. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { } } @keyframes mec-paraitre{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } /* ── CLAIR · aucune section inversée ───────────────────────────────────────── Yan, le 26.09.2026 : « essayons peut-être quelque chose de totalement clair, avec aucune section inverse ». CE CRAN NE SE FAIT PAS PAR LES SEULS JETONS, et c'est ce qui le distingue de Jour. `--mec-nuit` et `--mec-creme` portent deux rôles chacun — surface ET couleur de texte de l'autre surface — donc les inverser retourne l'alternance sans jamais l'éteindre. Les sections crème reçoivent ici une surface propre, en plus des jetons. L'ALTERNANCE DISPARAÎT, ET C'EST LE POINT : la hiérarchie ne tient plus que par la typographie et les filets. C'est exactement ce qu'il faut juger. */ :root[data-lumiere="clair"]{ --mec-nuit:#FDFAF6;--mec-velours:#F6EFE6;--mec-filet-nuit:#D3C0AC;--mec-bord-nuit:#8F7B6E; --mec-creme:#241A1D;--mec-velin:#FFFFFF;--mec-sable:#D3C0AC; --mec-tabac:#6B574D;--mec-tabac-fonce:#6B574D; --mec-rose:#8E2F3A;--mec-grenat-clair:#8E2F3A; } /* PAR LES JETONS, ET NON PAR LEURS VALEURS. Ces deux teintes étaient écrites en dur — celles du cran clair de la palette grenat. Sur sarcelle, les pages légales gardaient donc un fond beige quand tout le reste virait au vert pâle, et rien ne le disait. Relevé le 28.09.2026. */ :root[data-lumiere="clair"] .sb-s-legal-mentions,:root[data-lumiere="clair"] .sb-s-legal-donnees{ background:var(--mec-velours);color:var(--mec-creme); } :root[data-lumiere="clair"] .mec-entete, :root[data-lumiere="clair"] .mec-pied, :root[data-lumiere="clair"] .mec-journal, :root[data-lumiere="clair"] .mec-article{background:#FDFAF6;color:#241A1D} :root[data-lumiere="clair"] .mec-risque{background:#F6EFE6;color:#241A1D} :root[data-lumiere="clair"] .mec-entete .wp-block-navigation a, :root[data-lumiere="clair"] .mec-pied a, :root[data-lumiere="clair"] .mec-journal a{color:#241A1D} /* ── LES ICÔNES, EN TRAIT FIN ──────────────────────────────────────────────── Yan, le 26.09.2026 : « utiliser en plus les icônes de manière originale, mais toujours en restant sobre. » DESSINÉES DANS LA FEUILLE, jamais posées en balise : la compilation ne transporte pas un SVG écrit dans le prototype. Un seul trait, une seule graisse, la couleur d'accent courante — et rien sur les cartes qui portent déjà un numéro, sinon deux signaux se disputent la même place. */ /* `currentColor` dans un `data:` d'image N'HÉRITE PAS : une image est un document isolé, elle ne voit pas la couleur du texte qui l'entoure. Le trait est donc réécrit par cran, et non hérité — c'est la même leçon que les SVG du lockup, intégrés à la page pour cette raison. */ [class*="sb-c-"]{--mec-trait:%23D9A3A9} /* Les icônes suivent le cran : le trait rose s'assombrit plutôt que de multiplier les fichiers. */ /* ══ LA PHILOSOPHIE ET LA DIFFÉRENCIATION ══════════════════════════════════ Yan, le 26.09.2026 : « ça me paraît beaucoup plus clair que ce qui est actuellement sur le site ». Le deck donne la colonne vertébrale, le site garde la profondeur dessous : chaque section est une slide, suivie de son détail. */ /* ══ NOTRE PHILOSOPHIE · LES TROIS MÉDAILLONS ═══════════════════════════════ Yan, le 27.09.2026, après la maquette : « je ne suis pas sûr qu'un Venn, ça soit la bonne chose, parce que c'est trois choses différentes et qu'il n'y a pas d'intersection. […] Le C, je trouve assez intéressant. On va essayer de partir sur le C. […] Au lieu de mettre "faire le projet", je mettrais "réaliser le projet". » Le dessin n'est plus un fichier : c'est du texte, placé par la grille, et les ronds comme le rail sont tracés dans la feuille. Trois conséquences — le texte est lu par les lecteurs d'écran, il se traduit, et il se replie tout seul au téléphone. La planche SVG et ses couleurs pastel disparaissent. */ /* LE MÉDAILLON. Le rond est le ::before du nom du geste : il n'existe donc pas dans le prototype, et la compilation ne peut pas le perdre. */ /* LE RAIL. Il part du bord d'un rond et s'arrête au bord du suivant : la distance vaut une colonne plus la gouttière, moins deux rayons. */ /* LE SOCLE, en couleur inversée comme le bloc d'appel : c'est le même geste de ponctuation, et il se fait par les jetons, pas par une couleur fixe. */ @media (max-width:900px){ } /* ce qui nous différencie · cinq lignes, une par différence */ /* ══ MÉCÉNAT ET INVESTISSEMENT, SUR LA PAGE INVESTIR ═══════════════════════ */ /* ── E · GRENAT ET ROSÉ ────────────────────────────────────────────────────── Yan, le 26.09.2026 : « le sarcelle et rosé, je trouve assez intéressant ; en fait j'aimais bien le grenat. Est-ce qu'on peut faire grenat et rosé ? » Oui, et c'est même la seule des cinq qui emploie DEUX accents : le grenat porte ce qui appelle — boutons, second membre des titres — et le rosé porte le second plan — puces, numéros, filets. La palette de départ les confondait : tout était rosé, donc rien ne ressortait. */ :root[data-palette="grenat-rose"]{ --mec-grenat:#A8323F;--mec-grenat-fonce:#7E2430;--mec-grenat-clair:#C9737E; --mec-rose:#B9636E; } :root[data-palette="grenat-rose"] [class*="sb-c-"][class*="-titre-suite"]{color:var(--mec-grenat-fonce)} /* ══ LES CINQ GABARITS DE SECTION ═══════════════════════════════════════════ Yan, le 26.09.2026 : « ce que tu me proposes, c'est tout un petit peu disparate […] redéfinis-moi des templates par section cohérents qu'on puisse reprendre un petit peu à travers le site. » Il avait raison : chaque section avait sa grille et ses réglages, donc rien ne se ressemblait d'une page à l'autre. Cinq gabarits suffisent, et toute section neuve doit en emprunter un plutôt qu'en inventer un sixième. LES SÉLECTEURS SONT GROUPÉS, PAS HÉRITÉS. La compilation ne transporte que la classe `sb-s-
` : impossible de poser une classe de gabarit dans le prototype. Un gabarit est donc UNE RÈGLE QUI LISTE SES SECTIONS. Ajouter une section à un gabarit, c'est ajouter son nom à la liste ci-dessous. T1 · OUVERTURE surtitre, titre, suite, chapo, deux boutons T2 · CARTES n colonnes de nom + texte, sur un fond de carte T3 · LISTE des lignes à puce ou numérotées, pleine largeur T4 · PLANCHE un dessin, sa légende, rien d'autre T5 · APPEL la couleur inversée, deux boutons ── T5 · L'APPEL, EN COULEUR INVERSÉE ────────────────────────────────────── Yan : « le site clair, et le call to action en bas, tu le fais en couleur inversée, donc en dark. » L'inversion se fait PAR LES JETONS et non par une couleur fixe : sur un thème clair, `--mec-creme` est la teinte du texte et `--mec-nuit` celle du fond, donc les échanger suffit. Le bloc reste inversé quel que soit le thème, sans qu'on ait à écrire un sombre à la main. */ :root[data-lumiere="clair"] [class*="-appel"], [class*="-appel"]{ background:var(--mec-creme) !important; color:var(--mec-nuit) !important; border-top:0; } /* Les jetons de texte du cran sont calculés pour le fond de la page. Sur un bloc inversé ils pointent dans le mauvais sens : le surtitre et le chapô sortaient en brun sombre sur nuit, sous le seuil de lisibilité. On les recalcule ici à partir du couple que le bloc porte lui-même — ce qui tient sur les cinq palettes, sans écrire une seule couleur en dur. */ [class*="-appel"] [class*="-surtitre"]{ color:color-mix(in srgb,var(--mec-rose) 62%,var(--mec-nuit)) !important; } [class*="-appel"] [class*="-titre-suite"]{color:var(--mec-rose) !important} [class*="-appel"] [class*="-chapo"]{ color:color-mix(in srgb,var(--mec-nuit) 86%,var(--mec-creme)) !important; } [class*="-appel"] [class*="-surtitre"]::before, [class*="-appel"] [class*="-surtitre"]::after{opacity:.7} /* Le bouton plein garde l'accent ; le bouton en contour prend la couleur du bloc inversé, sinon il disparaît sur son propre fond. */ [class*="-appel"] a[class*="-lien"]{ color:var(--mec-nuit) !important; border-color:color-mix(in srgb,var(--mec-nuit) 45%,transparent) !important; background:transparent !important; } /* ── LE JOURNAL RESPIRE MOINS ──────────────────────────────────────────────── Yan : « c'est très sympathique, mais ça prend beaucoup trop de place en hauteur. Il y a des espaces beaucoup trop gros. » */ .mec-journal{padding-top:var(--mec-espace-7);padding-bottom:var(--mec-espace-7)} .mec-journal__chapo{margin-bottom:var(--mec-espace-7) !important} .mec-journal .wp-block-post-title a{font-size:1.5rem;line-height:1.15} @media (min-width:901px){ .mec-journal .wp-block-post-excerpt__excerpt{font-size:.9375rem;line-height:1.5} } /* ══ LE REGISTRE INSTITUTIONNEL ═════════════════════════════════════════════ Yan, le 26.09.2026 : « redonne-lui un aspect un tout petit peu plus private banking […] des ornements, des choses qui pourraient fonctionner, peut-être au niveau des chevrons aussi, tout en gardant cette touche un petit peu fraîche. Je veux quelque chose d'hyper structuré, d'hyper carré, pas surchargé. » QUATRE GESTES, ET PAS UN DE PLUS. L'angle droit, le filet double, le chevron et l'alignement. La banque privée ne se signale pas par ce qu'elle ajoute, mais par ce qu'elle aligne — un ornement de trop et le registre bascule vers le décoratif. La fraîcheur reste dans la palette et dans la grotesque. */ /* ── ① L'ANGLE DROIT ────────────────────────────────────────────────────── Le geste le plus fort, et le moins cher : un coin arrondi dit l'application mobile, un angle droit dit le document. */ :root{--mec-rayon-carte:0px;--mec-rayon-bouton:2px} .mec-vignette,.mec-article__image img,.mec-burger__menu,.mec-burger > summary{border-radius:0} [class*="-lab"]{border-radius:0 !important} .mec-palettes,.mec-palettes a{border-radius:0} /* ── ② LE FILET DE SECTION, SIMPLE ──────────────────────────────────────── Yan, le 27.09.2026 : « il y a toujours des sortes de doubles lignes pour les séparateurs. » L'ornement doublait le filet de section à trois pixels : de loin, on lisait un défaut d'impression, pas une intention. Un seul trait. */ [class*="sb-s-accueil-"],[class*="sb-s-porteur-"], [class*="sb-s-investir-"],[class*="sb-s-contact-"], [class*="sb-s-apropos-"]{position:relative} /* ── ③ LE CHEVRON ───────────────────────────────────────────────────────── Sur les liens en contour seulement. Un chevron sur le bouton plein ferait redondance : il appelle déjà par sa couleur. */ /* LA CLASSE EST SUR L'ENVELOPPE, PAS SUR LE LIEN. La compilation rend `
` : viser `a[class*="-lien"]` ne trouvait rien, et le chevron n'apparaissait nulle part. Mesuré le 26.09.2026. */ [class*="sb-c-"][class*="-lien"] a::after, a[class*="sb-c-"][class*="-lien"]::after{ content:"\203A";margin-left:.65em;font-size:1.2em; /* PAS DE `line-height:0` : sur un bouton en `inline-flex`, il écrase la boîte du pseudo-élément et le chevron disparaît sans rien signaler. */ opacity:.75; } .sb-s-contact-chemins a[class*="-lien"]::after{content:"›";margin-left:.6em} /* ── ④ L'ALIGNEMENT ─────────────────────────────────────────────────────── Les surtitres portent leur numéro en chiffres à chasse fixe, déjà. On aligne ici ce qui traînait : même graisse de filet partout, même gouttière sous les titres, et les colonnes de lecture au même pas. */ [class*="sb-c-"][class*="-surtitre"]{font-variant-numeric:tabular-nums} [class*="sb-s-"] h3[class*="sb-c-"]{letter-spacing:-.005em} .sb-c-cou-chapo{ max-width:74ch !important; } /* ═══════════════════════════════════════════════════════════════════════════ L'ACCUEIL EN RÉCIT · CINQ TEMPS ET UNE PLANCHE QUI SE CONSTRUIT ═══════════════════════════════════════════════════════════════════════════ Yan, le 27.09.2026 : « la page d'accueil, c'est vraiment une entrée simple. […] Un truc ultra light, ultra épuré. […] Quand on scrolle, il faut que ce soit le texte à gauche qui bouge, et que les blocs s'ajoutent. » Le fond traverse l'écran, le contenu non : quatre repères — marge, colonne de texte, colonne de planche, marge — et le vélours part du bord gauche de la planche jusqu'au bord de la fenêtre. Sur un écran très large, le texte et le dessin restent à portée de regard l'un de l'autre. La planche est une SECTION À PART, posée en couche fixe. La compilation ne transporte pas l'imbrication : elle ne pouvait donc pas vivre dans un temps, et `position:sticky` ne tient que dans son parent. Fixe, elle traverse les cinq. */ :root{ --mec-contenu:1480px; --mec-marge:max(var(--mec-gouttiere),calc((100vw - var(--mec-contenu)) / 2)); --mec-col-texte:calc(min(100vw - 2 * var(--mec-marge),var(--mec-contenu)) * .55); /* Yan, le 27.09.2026 : « il manque un peu de marge sur la colonne de gauche, le trait se superpose sur le trait de séparation verticale. » Les filets du texte s'arrêtent donc une respiration avant la ligne. */ --mec-respir:clamp(28px,3.6vw,76px); /* Yan, le 27.09.2026 : « la largeur du texte, ça prend toute la largeur. Il faut vraiment que tu respectes la largeur du viewport. » Sans la colonne de droite, Investir et Entreprendre étalaient leur texte sur 1280 px là où l'accueil le tient dans 740. Une colonne de lecture commune les remet d'aplomb, calée sur la même marge gauche que le reste du site. */ --mec-lecture:1040px; } /* ── LA COUCHE FIXE ──────────────────────────────────────────────────────── */ body.home #planche{ position:fixed;top:0;right:0;bottom:0; left:calc(var(--mec-marge) + var(--mec-col-texte)); display:grid !important;place-items:center; padding:0 clamp(20px,2.4vw,44px) !important; margin:0 !important; background:var(--mec-velours);border-left:1px solid var(--mec-filet-nuit); border-top:0;z-index:0; opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease; } :root[data-mec-story] body.home #planche{opacity:1;visibility:visible} /* Le CHAMP, pas la section : `[class*="-planche"]` seul attrapait aussi `sb-s-investir-planche`, et la couche fixe prenait toute la fenêtre. */ [class*="sb-c-"][class*="-planche"]{margin:0 !important;max-width:none !important;width:100% !important} .mec-story{display:block;width:min(100%,620px);height:auto;margin:0 auto;overflow:visible} .mec-story g[data-pas]{opacity:0;transform:translateY(10px); transition:opacity .55s ease,transform .55s ease} .mec-story g[data-pas].vu{opacity:1;transform:none} /* Les traits se dessinent : chaque chemin porte `pathLength="1"`, donc un seul réglage suffit quelle que soit sa longueur réelle. */ .mec-story g[data-pas] path{stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset .9s ease .2s} .mec-story g[data-pas].vu path{stroke-dashoffset:0} /* ── LES CINQ TEMPS ──────────────────────────────────────────────────────── */ body.home [id^="temps-"]{ counter-increment:sect; position:relative;z-index:1; min-height:100svh; display:grid;grid-template-columns:1fr;align-content:center; background:none !important;border-top:0 !important; padding:var(--mec-espace-8) 0 var(--mec-espace-7) !important; margin-left:var(--mec-marge) !important; margin-right:calc(100vw - var(--mec-marge) - var(--mec-col-texte) + var(--mec-respir)) !important; max-width:none !important; } body.home [id^="temps-"]::before{content:none} /* LE NUMÉRO DU TEMPS. Il n'y a pas de surtitre dans un récit : le chiffre est le seul repère, et il se pose au-dessus du titre. */ [id^="temps-"] > h1[class*="-titre"]:not([class*="-suite"])::before, [id^="temps-"] > h2[class*="-titre"]:not([class*="-suite"])::before{ content:counter(sect,decimal-leading-zero);display:block; font-family:var(--mec-font-texte);font-size:.75rem;font-weight:600; letter-spacing:.2em;color:var(--mec-grenat-fonce); margin-bottom:var(--mec-espace-6); } /* Le titre du récit tient sur deux lignes : la colonne a perdu sa respiration au profit du filet, il rend donc un peu de corps. */ [id^="temps-"] > h1[class*="sb-c-"],[id^="temps-"] > h2[class*="sb-c-"], [id^="temps-"] > [class*="-titre-suite"]{ font-size:clamp(2rem,3.5vw,3.125rem);line-height:1.07;max-width:21ch; } .sb-c-vou-titre,.sb-c-rep-titre,.sb-c-fon-titre,.sb-c-dec-titre,.sb-c-rea-titre{grid-area:tit} .sb-c-vou-titre-suite,.sb-c-rep-titre-suite,.sb-c-fon-titre-suite, .sb-c-dec-titre-suite,.sb-c-rea-titre-suite{grid-area:sui} /* temps 01 · les trois exigences, en trois lignes sous un filet */ .sb-s-accueil-vouloir{grid-template-areas:"tit" "sui" "l1" "l2" "l3"} .sb-s-accueil-vouloir .sb-c-vou-l1{grid-area:l1;margin-top:var(--mec-espace-7) !important} .sb-s-accueil-vouloir .sb-c-vou-l2{grid-area:l2} .sb-s-accueil-vouloir .sb-c-vou-l3{grid-area:l3} .sb-s-accueil-vouloir p[class*="sb-c-vou-l"]{ position:relative; border-top:1px solid var(--mec-sable); padding:var(--mec-espace-4) 0 var(--mec-espace-4) 46px; margin:0 !important;font-size:1.0625rem;max-width:50ch;color:inherit; } /* UNE PUCE, ET NON UN NUMÉRO. Yan, le 27.09.2026 : « je sais pas s'il faut numéroter ou alors une puce. […] ça fait un petit peu moins nu ». Ce sont trois EXIGENCES, pas trois étapes : les numéroter annoncerait un ordre qui n'existe pas, et ferait doublon avec le temps 03, qui lui compte vraiment. La puce est le jeton carré de la charte, réduit — même retrait de 46 px que les numéros du temps 03, pour que les deux listes partagent une marge. */ .sb-s-accueil-vouloir p[class*="sb-c-vou-l"]::before{ content:"";position:absolute;left:0;top:calc(var(--mec-espace-4) + .55em); width:9px;height:9px;background:var(--mec-grenat); } .sb-s-accueil-vouloir .sb-c-vou-l3{border-bottom:1px solid var(--mec-sable)} /* temps 02 · l'adage, en deux volets */ .sb-s-accueil-reponse{ grid-template-columns:1fr 1fr; grid-template-areas:"tit tit" "sui sui" "cha cha" "a1n a2n" "a1t a2t" "a1q a2q"; column-gap:var(--mec-espace-6); } /* LES DEUX VOLETS SONT À PARTS ÉGALES, et il faut le redire ici. Yan, le 27.09.2026 : « faut que ça soit équilibré, gauche-droite ». `body.home [id^="temps-"]` pose `grid-template-columns:1fr` pour les cinq temps, qui sont tous en une colonne sauf celui-ci — et il est PLUS SPÉCIFIQUE que la classe de la section. Le second volet prenait alors toute la place restante et le premier se serrait sur son mot le plus long : 70 px contre 545, mesurés dans le navigateur. Même spécificité, plus bas dans la feuille : celle-ci l'emporte. */ body.home .sb-s-accueil-reponse{grid-template-columns:1fr 1fr} .sb-s-accueil-reponse .sb-c-rep-chapo{grid-area:cha} .sb-s-accueil-reponse .sb-c-ad1-nom{grid-area:a1n}.sb-s-accueil-reponse .sb-c-ad2-nom{grid-area:a2n} .sb-s-accueil-reponse .sb-c-ad1-texte{grid-area:a1t}.sb-s-accueil-reponse .sb-c-ad2-texte{grid-area:a2t} .sb-s-accueil-reponse .sb-c-ad1-qui{grid-area:a1q}.sb-s-accueil-reponse .sb-c-ad2-qui{grid-area:a2q} .sb-s-accueil-reponse h3[class*="sb-c-ad"]{ border-top:2px solid currentColor;padding-top:var(--mec-espace-4); margin-top:var(--mec-espace-7) !important; font-family:var(--mec-font-display);font-style:italic;font-weight:400; font-size:1.125rem;letter-spacing:0;color:var(--mec-grenat-fonce); } .sb-s-accueil-reponse p[class*="sb-c-ad"][class*="-texte"]{ margin-top:var(--mec-espace-3) !important;font-size:.9375rem;line-height:1.5; color:var(--mec-tabac); } .sb-s-accueil-reponse p[class*="sb-c-ad"][class*="-qui"]{ margin-top:var(--mec-espace-4) !important;font-size:.75rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:inherit; } /* temps 03 · les trois temps du fonds, numérotés */ .sb-s-accueil-fonds{ grid-template-areas:"tit" "sui" "cha" "l1" "l2" "l3"; counter-reset:fon; } .sb-s-accueil-fonds .sb-c-fon-chapo{grid-area:cha} .sb-s-accueil-fonds .sb-c-fon-l1{grid-area:l1;margin-top:var(--mec-espace-7) !important} .sb-s-accueil-fonds .sb-c-fon-l2{grid-area:l2} .sb-s-accueil-fonds .sb-c-fon-l3{grid-area:l3} .sb-s-accueil-fonds p[class*="sb-c-fon-l"]{ position:relative;counter-increment:fon; border-top:1px solid var(--mec-sable);padding:var(--mec-espace-4) 0 var(--mec-espace-4) 46px; margin:0 !important;max-width:52ch;color:inherit; } .sb-s-accueil-fonds p[class*="sb-c-fon-l"]::before{ content:counter(fon,decimal-leading-zero);position:absolute;left:0; top:calc(var(--mec-espace-4) + .1em); font-size:.8125rem;font-weight:600;color:var(--mec-grenat); font-variant-numeric:tabular-nums; } .sb-s-accueil-fonds .sb-c-fon-l3{border-bottom:1px solid var(--mec-sable)} /* temps 04 et 05 · un chapô, et rien d'autre. La ligne des quatre marques de l'écosystème vivait sous le temps 05. Yan, le 27.09.2026 : « supprime les marques ici en bas, y a pas besoin ». Elles sont déjà nommées dans le chapô — « nos équipes et l'écosystème » — et la page À propos leur donne une planche entière. */ .sb-s-accueil-decider{grid-template-areas:"tit" "sui" "cha"} .sb-s-accueil-decider .sb-c-dec-chapo{grid-area:cha} .sb-s-accueil-realiser{grid-template-areas:"tit" "sui" "cha"} .sb-s-accueil-realiser .sb-c-rea-chapo{grid-area:cha} [class*="sb-s-accueil-"] p[class*="-chapo"]{max-width:46ch} /* ── LES DEUX PORTES, LE JOURNAL, L'APPEL ────────────────────────────────── */ .sb-s-accueil-portes,.sb-s-accueil-journal{ position:relative;z-index:1;background:var(--mec-nuit) !important; padding-left:var(--mec-marge) !important;padding-right:var(--mec-marge) !important; } /* Yan, le 27.09.2026 : « cette partie-là peut faire une plus grande partie du viewport, peut-être 80 %. » Les deux portes sont le moment où le visiteur choisit : elles méritent l'écran presque entier, et le blanc autour. */ .sb-s-accueil-portes{ min-height:80svh; grid-template-columns:1fr 1fr; grid-template-areas:"sur sur" "tit tit" "sui sui" "pan pbn" "pat pbt" "pad pbd" "pal pbl"; align-content:center;column-gap:var(--mec-espace-6); } .sb-s-accueil-portes .sb-c-por-surtitre{grid-area:sur} .sb-s-accueil-portes .sb-c-por-titre{grid-area:tit} .sb-s-accueil-portes .sb-c-por-titre-suite{grid-area:sui} .sb-s-accueil-portes .sb-c-pa-nom{grid-area:pan}.sb-s-accueil-portes .sb-c-pb-nom{grid-area:pbn} .sb-s-accueil-portes .sb-c-pa-texte{grid-area:pat}.sb-s-accueil-portes .sb-c-pb-texte{grid-area:pbt} .sb-s-accueil-portes .sb-c-pa-detail{grid-area:pad}.sb-s-accueil-portes .sb-c-pb-detail{grid-area:pbd} .sb-s-accueil-portes .sb-c-pa-lien{grid-area:pal}.sb-s-accueil-portes .sb-c-pb-lien{grid-area:pbl} /* La porte est une carte : le titre en porte le haut, le lien en porte le bas, et le fond est posé par la grille puisque aucune enveloppe ne survit. */ .sb-s-accueil-portes h3[class*="sb-c-p"]{ background:var(--mec-velin);border:1px solid var(--mec-sable);border-bottom:0; padding:var(--mec-espace-7) var(--mec-espace-6) var(--mec-espace-4); margin-top:var(--mec-espace-7) !important; font-size:clamp(1.5rem,2.4vw,2.125rem);font-weight:340;letter-spacing:-.015em; color:inherit; } .sb-s-accueil-portes p[class*="sb-c-p"][class*="-texte"]{ background:var(--mec-velin); border-left:1px solid var(--mec-sable);border-right:1px solid var(--mec-sable); padding:0 var(--mec-espace-6) var(--mec-espace-5);margin:0 !important; font-size:.9375rem;line-height:1.5;color:var(--mec-tabac); } /* LA CARTE SE FERME SUR SON TEXTE, ET LE LIEN VIT DESSOUS. J'ai d'abord voulu que le lien soit la dernière bande de la carte : il refusait de prendre la largeur de son aire, la mise en page contrainte de WordPress plafonnant chaque enfant. Deux essais pour rien. Le lien sort donc de la carte, sans habillage de bouton, et c'est plus juste : la carte dit, le lien emmène. */ .sb-s-accueil-portes p[class*="sb-c-p"][class*="-detail"]{ background:var(--mec-velin); border-left:1px solid var(--mec-sable);border-right:1px solid var(--mec-sable); border-bottom:1px solid var(--mec-sable); padding:var(--mec-espace-5) var(--mec-espace-6) var(--mec-espace-7); margin:0 !important;font-size:.9375rem;line-height:1.5;color:inherit; } .sb-s-accueil-portes p[class*="sb-c-p"][class*="-detail"]::before{ content:"";display:block;width:2.4em;height:1px; background:var(--mec-sable);margin-bottom:var(--mec-espace-5); } /* LA CLASSE EST SUR L'ENVELOPPE, PAS SUR LE LIEN : le compilateur rend un bouton `wp:buttons`, et c'est le `a` intérieur qui porte l'habillage. Il faut donc viser les deux formes, comme le fait la règle générique. */ .sb-s-accueil-portes [class*="sb-c-p"][class*="-lien"] a, .sb-s-accueil-portes a[class*="sb-c-p"][class*="-lien"]{ background:none !important;border:0 !important;border-radius:0 !important; padding:0 !important;min-height:0 !important; margin-top:var(--mec-espace-5) !important;justify-self:start;align-self:start; font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--mec-grenat-fonce) !important; } .sb-s-accueil-portes [class*="sb-c-p"][class*="-lien"] a:hover, .sb-s-accueil-portes a[class*="sb-c-p"][class*="-lien"]:hover{color:var(--mec-grenat) !important} .sb-s-accueil-portes{row-gap:0} /* le journal, en page de une : une tête d'affiche et deux brèves */ .sb-s-accueil-journal{ grid-template-columns:1fr; grid-template-areas:"sur" "tit" "sui" "lis" "lnk"; align-content:start; } .sb-s-accueil-journal .sb-c-jou-surtitre{grid-area:sur} .sb-s-accueil-journal .sb-c-jou-titre{grid-area:tit} .sb-s-accueil-journal .sb-c-jou-titre-suite{grid-area:sui} .sb-s-accueil-journal .sb-c-jou-liste{grid-area:lis;margin:0 !important;max-width:none !important} .sb-s-accueil-journal .sb-c-jou-lien{grid-area:lnk;justify-self:start;margin-top:var(--mec-espace-6) !important} .mec-une{ display:grid;grid-template-columns:1.25fr 1fr;gap:var(--mec-espace-7) var(--mec-espace-8); margin-top:var(--mec-espace-7);border-top:1px solid currentColor;padding-top:var(--mec-espace-6); } .mec-une a{text-decoration:none;color:inherit;display:block} .mec-une time{display:block;font-size:.75rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--mec-tabac)} .mec-une__tete b{display:block;margin-top:12px;font-family:var(--mec-font-display); font-size:clamp(1.5rem,2.4vw,2rem);font-weight:340;letter-spacing:-.015em;line-height:1.14} .mec-une__tete .mec-une__chapo{margin-top:14px;font-size:1.0625rem;color:var(--mec-tabac);line-height:1.5;max-width:42ch} .mec-une__breves{display:grid;align-content:start} .mec-une__chapo{display:block} .mec-une__breves a{border-top:1px solid var(--mec-sable);padding:var(--mec-espace-5) 0} .mec-une__breves a:first-child{border-top:0;padding-top:0} .mec-une__breves b{display:block;margin-top:8px;font-size:1.125rem;font-weight:450;line-height:1.3} .mec-une__breves .mec-une__chapo{margin-top:8px;font-size:.9375rem;color:var(--mec-tabac);line-height:1.45} .mec-une a:hover b{color:var(--mec-rose)} /* L'appel garde son gabarit, mais reprend la marge commune. */ .sb-s-accueil-appel,.sb-s-investir-appel,.sb-s-porteur-appel{ padding-left:var(--mec-marge) !important;padding-right:var(--mec-marge) !important; } /* ── LE BOUTON, MOINS PLAT ───────────────────────────────────────────────── */ /* Yan, le 27.09.2026 : « les boutons call to action ne sont pas très beaux, un petit peu trop sobres. » Ils gardent l'angle droit, et gagnent un chevron dans son propre jeton, qui avance au survol. */ [class*="sb-c-"][class*="-cta"] a,a[class*="sb-c-"][class*="-cta"], [class*="sb-c-"][class*="-lien"] a,a[class*="sb-c-"][class*="-lien"]{ gap:1.1em;min-height:58px;padding-right:1.4em;letter-spacing:.04em; } [class*="sb-c-"][class*="-cta"] a::after,a[class*="sb-c-"][class*="-cta"]::after, [class*="sb-c-"][class*="-lien"] a::after,a[class*="sb-c-"][class*="-lien"]::after{ content:"\203A";display:grid;place-items:center;width:30px;height:30px; border:1px solid currentColor;border-radius:50%; font-size:1.15em;line-height:1;padding-bottom:.12em;margin-left:0;opacity:.85; transition:transform .2s ease,opacity .2s ease; } [class*="sb-c-"][class*="-cta"] a:hover::after,a[class*="sb-c-"][class*="-cta"]:hover::after, [class*="sb-c-"][class*="-lien"] a:hover::after,a[class*="sb-c-"][class*="-lien"]:hover::after{ transform:translateX(3px);opacity:1; } /* ── LE TÉLÉPHONE ────────────────────────────────────────────────────────── */ @media (max-width:900px){ /* La couche fixe redevient une bande collée en haut, au-dessus du texte. */ body.home #planche{ position:sticky;top:var(--wp-admin--admin-bar--height,0px);left:auto;right:auto;bottom:auto; opacity:1;visibility:visible;height:auto; padding:var(--mec-espace-3) var(--mec-gouttiere) var(--mec-espace-4) !important; border-left:0;border-bottom:1px solid var(--mec-filet-nuit);z-index:5; } /* Sous le seuil, la planche est un bandeau collé AU-DESSUS du texte : elle coûte donc sa hauteur avant qu'on ait lu un mot. Mesuré le 28.09.2026 sur iPhone : 419 px, soit la moitié de l'écran, dont une grande part vide — le dessin réserve la place des cinq temps mais n'en montre qu'un. 22 svh rend une centaine de pixels au texte sans rien casser du mécanisme. */ .mec-story{width:min(100%,340px);max-height:22svh} body.home [id^="temps-"]{ min-height:0;margin-left:0 !important;margin-right:0 !important; padding:var(--mec-espace-7) var(--mec-gouttiere) !important; } .sb-s-accueil-reponse,.sb-s-accueil-portes{grid-template-columns:1fr} .sb-s-accueil-portes,.sb-s-accueil-journal, .sb-s-accueil-appel,.sb-s-investir-appel,.sb-s-porteur-appel{ padding-left:var(--mec-gouttiere) !important;padding-right:var(--mec-gouttiere) !important; } .mec-une{grid-template-columns:1fr} } /* La règle générique des chapôs pose `margin:0 !important` avec deux sélecteurs d'attribut : une classe seule perd, même en !important. On la double pour rendre au récit sa respiration. */ [id^="temps-"] > p[class*="-chapo"]{margin-top:var(--mec-espace-6) !important} /* ═══════════════════════════════════════════════════════════════════════════ INVESTIR ET ENTREPRENDRE, RACONTÉS COMME L'ACCUEIL ═══════════════════════════════════════════════════════════════════════════ Yan, le 27.09.2026 : « reprends la page Investir, Entreprendre, selon la même philosophie que l'accueil. […] Aussi épuré, simple à comprendre, largeur de viewport comme sur la page d'accueil. » Le gabarit du temps est déjà posé par `[id^="temps-"]` : il ne reste ici que le placement des champs, et les deux façons de dessiner une liste. */ /* ── LES DEUX LISTES DU RÉCIT ────────────────────────────────────────────── */ /* À FILETS : des exigences, sans ordre. */ .sb-s-investir-financer p[class*="-l"], .sb-s-porteur-chances p[class*="-l"]{ border-top:1px solid var(--mec-sable);padding:var(--mec-espace-4) 0; margin:0 !important;font-size:1.0625rem;max-width:52ch;color:inherit; } .sb-s-investir-financer .sb-c-fin-l3, .sb-s-porteur-chances .sb-c-cha-l3{border-bottom:1px solid var(--mec-sable)} /* La liste numérotée d'origine a laissé la place aux cartes à jeton : sa règle restait pourtant là, et son `counter-increment` s'ajoutait à celui du jeton. Les cartes portaient donc 02, 04, 06. */ .sb-s-investir-etude,.sb-s-porteur-echange{counter-reset:pas} .sb-s-porteur-echange .sb-c-ech-l3{border-bottom:1px solid var(--mec-sable)} /* ── INVESTIR ────────────────────────────────────────────────────────────── */ .sb-s-investir-financer{grid-template-areas:"tit" "sui" "cha" "l1" "l2" "l3" "cta"} .sb-s-investir-financer .sb-c-fin-cta{grid-area:cta} .sb-s-investir-financer .sb-c-fin-titre{grid-area:tit} .sb-s-investir-financer .sb-c-fin-titre-suite{grid-area:sui} .sb-s-investir-financer .sb-c-fin-chapo{grid-area:cha} .sb-s-investir-financer .sb-c-fin-l1{grid-area:l1;margin-top:var(--mec-espace-7) !important} .sb-s-investir-financer .sb-c-fin-l2{grid-area:l2} .sb-s-investir-financer .sb-c-fin-l3{grid-area:l3} .sb-s-investir-etude{grid-template-areas:"tit" "sui" "cha" "l1" "l2" "l3"} .sb-s-investir-etude .sb-c-etu-titre{grid-area:tit} .sb-s-investir-etude .sb-c-etu-titre-suite{grid-area:sui} .sb-s-investir-etude .sb-c-etu-chapo{grid-area:cha} .sb-s-investir-etude .sb-c-etu-l1{grid-area:l1;margin-top:var(--mec-espace-7) !important} .sb-s-investir-etude .sb-c-etu-l2{grid-area:l2} .sb-s-investir-etude .sb-c-etu-l3{grid-area:l3} .sb-s-investir-dossier{grid-template-areas:"tit" "sui" "cha"} .sb-s-investir-dossier .sb-c-dos-titre{grid-area:tit} .sb-s-investir-dossier .sb-c-dos-titre-suite{grid-area:sui} .sb-s-investir-dossier .sb-c-dos-chapo{grid-area:cha} .sb-s-investir-direct{grid-template-areas:"tit" "sui" "cha"} .sb-s-investir-direct .sb-c-dir-titre{grid-area:tit} .sb-s-investir-direct .sb-c-dir-titre-suite{grid-area:sui} .sb-s-investir-direct .sb-c-dir-chapo{grid-area:cha} .sb-s-investir-suivi{grid-template-areas:"tit" "sui" "cha"} .sb-s-investir-suivi .sb-c-sui-titre{grid-area:tit} .sb-s-investir-suivi .sb-c-sui-titre-suite{grid-area:sui} .sb-s-investir-suivi .sb-c-sui-chapo{grid-area:cha;max-width:52ch} /* ── ENTREPRENDRE ────────────────────────────────────────────────────────── */ .sb-s-porteur-chances{grid-template-areas:"tit" "sui" "cha" "l1" "l2" "l3" "cta"} .sb-s-porteur-chances .sb-c-cha-cta{grid-area:cta} .sb-s-porteur-chances .sb-c-cha-titre{grid-area:tit} .sb-s-porteur-chances .sb-c-cha-titre-suite{grid-area:sui} .sb-s-porteur-chances .sb-c-cha-chapo{grid-area:cha} .sb-s-porteur-chances .sb-c-cha-l1{grid-area:l1;margin-top:var(--mec-espace-7) !important} .sb-s-porteur-chances .sb-c-cha-l2{grid-area:l2} .sb-s-porteur-chances .sb-c-cha-l3{grid-area:l3} .sb-s-porteur-echange{grid-template-areas:"tit" "sui" "cha" "l1" "l2" "l3"} .sb-s-porteur-echange .sb-c-ech-titre{grid-area:tit} .sb-s-porteur-echange .sb-c-ech-titre-suite{grid-area:sui} .sb-s-porteur-echange .sb-c-ech-chapo{grid-area:cha} .sb-s-porteur-echange .sb-c-ech-l1{grid-area:l1;margin-top:var(--mec-espace-7) !important} .sb-s-porteur-echange .sb-c-ech-l2{grid-area:l2} .sb-s-porteur-echange .sb-c-ech-l3{grid-area:l3} .sb-s-porteur-placer{grid-template-areas:"tit" "sui" "cha" "not"} .sb-s-porteur-placer .sb-c-pla-titre{grid-area:tit} .sb-s-porteur-placer .sb-c-pla-titre-suite{grid-area:sui} .sb-s-porteur-placer .sb-c-pla-chapo{grid-area:cha} .sb-s-porteur-placer .sb-c-pla-note{ grid-area:not;position:relative; margin-top:var(--mec-espace-7) !important;padding-left:var(--mec-espace-5); border-left:2px solid var(--mec-grenat); font-size:.9375rem;line-height:1.5;color:var(--mec-tabac);max-width:48ch; } /* LA GRILLE DE MATURITÉ, RÉDUITE À SES SIX POINTS. Le barème complet vit dans le manuel interne : ici, le porteur a besoin de savoir ce qu'on regarde. */ .sb-s-porteur-etude{ grid-template-columns:1fr 1fr; grid-template-areas:"tit tit" "sui sui" "cha cha" "gri gri" "l1 l4" "l2 l5" "l3 l6"; column-gap:var(--mec-espace-6); } .sb-s-porteur-etude .sb-c-eta-titre{grid-area:tit} .sb-s-porteur-etude .sb-c-eta-titre-suite{grid-area:sui} .sb-s-porteur-etude .sb-c-eta-chapo{grid-area:cha} .sb-s-porteur-etude .sb-c-eta-grille{ grid-area:gri;margin-top:var(--mec-espace-7) !important; font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--mec-grenat-fonce); } .sb-s-porteur-etude .sb-c-eta-l1{grid-area:l1}.sb-s-porteur-etude .sb-c-eta-l2{grid-area:l2} .sb-s-porteur-etude .sb-c-eta-l3{grid-area:l3}.sb-s-porteur-etude .sb-c-eta-l4{grid-area:l4} .sb-s-porteur-etude .sb-c-eta-l5{grid-area:l5}.sb-s-porteur-etude .sb-c-eta-l6{grid-area:l6} .sb-s-porteur-etude p[class*="sb-c-eta-l"]{ position:relative;border-top:1px solid var(--mec-sable); padding:var(--mec-espace-4) 0 var(--mec-espace-4) 22px; margin:0 !important;font-size:.9375rem;color:inherit; } .sb-s-porteur-etude p[class*="sb-c-eta-l"]::before{ content:"";position:absolute;left:0;top:calc(var(--mec-espace-4) + .62em); width:7px;height:7px;border-radius:50%;background:var(--mec-grenat); } .sb-s-porteur-etude .sb-c-eta-l3,.sb-s-porteur-etude .sb-c-eta-l6{ border-bottom:1px solid var(--mec-sable); } .sb-s-porteur-levee{grid-template-areas:"tit" "sui" "cha"} .sb-s-porteur-levee .sb-c-lev-titre{grid-area:tit} .sb-s-porteur-levee .sb-c-lev-titre-suite{grid-area:sui} .sb-s-porteur-levee .sb-c-lev-chapo{grid-area:cha;max-width:52ch} .sb-s-porteur-realiser{grid-template-areas:"tit" "sui" "cha" "mar"} .sb-s-porteur-realiser .sb-c-rel-titre{grid-area:tit} .sb-s-porteur-realiser .sb-c-rel-titre-suite{grid-area:sui} .sb-s-porteur-realiser .sb-c-rel-chapo{grid-area:cha;max-width:52ch} .sb-s-porteur-realiser .sb-c-rel-marques{ grid-area:mar;margin-top:var(--mec-espace-7) !important; font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--mec-tabac); } /* La planche verticale des deux pages : un rail, des stations. */ .mec-story--investir,.mec-story--entreprendre{width:min(100%,600px)} /* ═══════════════════════════════════════════════════════════════════════════ LE SYSTÈME DE CARTES · A POUR TOUT, LA FRAPPE UNE FOIS PAR PAGE ═══════════════════════════════════════════════════════════════════════════ Yan, le 27.09.2026, après trois planches : « partons sur la variante A […] j'aime bien les numéros 1, 2, 3 en filigrane […] je préfère cette version-là » — la carte où la photo est POSÉE DANS le cadre, avec la marge tout autour, et non collée à ses bords. Trois signes tiennent la carte, et rien d'autre : l'angle droit, le filet double en tête, et le chiffre en filigrane quand l'ordre compte. Le fond sombre ne sert qu'une fois par page, sur la phrase qui porte. Aucune enveloppe ne survit à la compilation : la carte est donc peinte par ses champs, chacun posant sa part du cadre. Le premier champ porte le haut, le dernier porte le bas. */ [class*="sb-s-apropos-"]{ padding-left:var(--mec-marge) !important;padding-right:var(--mec-marge) !important; align-content:start; } .sb-s-apropos-mission,.sb-s-apropos-noyau{background:var(--mec-velours) !important} /* ── LE CONSTAT ──────────────────────────────────────────────────────────── */ .sb-s-apropos-constat{grid-template-areas:"sur" "tit" "sui" "cha" "l1" "l2" "l3"} .sb-s-apropos-constat .sb-c-cst-surtitre{grid-area:sur} .sb-s-apropos-constat .sb-c-cst-titre{grid-area:tit} .sb-s-apropos-constat .sb-c-cst-titre-suite{grid-area:sui} .sb-s-apropos-constat .sb-c-cst-chapo{grid-area:cha;max-width:62ch} .sb-s-apropos-constat p.sb-c-cst-chapo{margin-top:var(--mec-espace-6) !important} .sb-s-apropos-constat .sb-c-cst-l1{grid-area:l1;margin-top:var(--mec-espace-7) !important} .sb-s-apropos-constat .sb-c-cst-l2{grid-area:l2} .sb-s-apropos-constat .sb-c-cst-l3{grid-area:l3} .sb-s-apropos-constat p[class*="sb-c-cst-l"]{ border-top:1px solid var(--mec-sable);padding:var(--mec-espace-4) 0; margin:0 !important;font-size:1.0625rem;max-width:56ch;color:inherit; } .sb-s-apropos-constat .sb-c-cst-l3{border-bottom:1px solid var(--mec-sable)} /* ── LA MISSION · DEUX CARTES ────────────────────────────────────────────── */ .sb-s-apropos-mission{ grid-template-columns:1fr 1fr; grid-template-areas:"sur sur" "tit tit" "sui sui" "cha cha" "m1s m2s" "m1n m2n" "m1t m2t"; column-gap:var(--mec-espace-6);row-gap:0; } .sb-s-apropos-mission .sb-c-mis-surtitre{grid-area:sur} .sb-s-apropos-mission .sb-c-mis-titre{grid-area:tit} .sb-s-apropos-mission .sb-c-mis-titre-suite{grid-area:sui} .sb-s-apropos-mission .sb-c-mis-chapo{grid-area:cha;max-width:62ch} .sb-s-apropos-mission p.sb-c-mis-chapo{margin-top:var(--mec-espace-6) !important} .sb-s-apropos-mission .sb-c-m1-sur{grid-area:m1s}.sb-s-apropos-mission .sb-c-m2-sur{grid-area:m2s} .sb-s-apropos-mission .sb-c-m1-nom{grid-area:m1n}.sb-s-apropos-mission .sb-c-m2-nom{grid-area:m2n} .sb-s-apropos-mission .sb-c-m1-texte{grid-area:m1t}.sb-s-apropos-mission .sb-c-m2-texte{grid-area:m2t} /* le haut de la carte : le surtitre, avec le filet double */ /* `[class*="sb-c-m"][class*="-sur"]` attrapait aussi `sb-c-mis-surtitre` : le surtitre de la section prenait le fond et le cadre d'une carte, et une bande blanche traversait la page. On nomme les deux champs. */ .sb-s-apropos-mission .sb-c-m1-sur, .sb-s-apropos-mission .sb-c-m2-sur{ position:relative;background:var(--mec-velin); border:1px solid var(--mec-sable);border-bottom:0; padding:var(--mec-espace-6) var(--mec-espace-6) 0; margin-top:var(--mec-espace-7) !important;margin-bottom:0 !important; font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--mec-grenat-fonce); } .sb-s-apropos-mission .sb-c-m1-sur::before, .sb-s-apropos-mission .sb-c-m2-sur::before{ content:"";position:absolute;left:0;right:0;top:3px;height:1px; background:var(--mec-nuit);opacity:.14; } .sb-s-apropos-mission h3.sb-c-m1-nom, .sb-s-apropos-mission h3.sb-c-m2-nom{ background:var(--mec-velin); border-left:1px solid var(--mec-sable);border-right:1px solid var(--mec-sable); padding:var(--mec-espace-4) var(--mec-espace-6) 0;margin:0 !important; font-size:1.375rem;font-weight:450;letter-spacing:-.012em;line-height:1.16;color:inherit; } .sb-s-apropos-mission .sb-c-m1-texte, .sb-s-apropos-mission .sb-c-m2-texte{ background:var(--mec-velin); border:1px solid var(--mec-sable);border-top:0; padding:var(--mec-espace-4) var(--mec-espace-6) var(--mec-espace-6); margin:0 !important;font-size:.9375rem;line-height:1.58;color:var(--mec-tabac); } /* ── L'ORIGINE ───────────────────────────────────────────────────────────── */ .sb-s-apropos-origine{grid-template-areas:"sur" "tit" "sui" "cha" "txt" "lnk"} .sb-s-apropos-origine .sb-c-ori-surtitre{grid-area:sur} .sb-s-apropos-origine .sb-c-ori-titre{grid-area:tit} .sb-s-apropos-origine .sb-c-ori-titre-suite{grid-area:sui} .sb-s-apropos-origine .sb-c-ori-chapo{grid-area:cha;max-width:62ch} .sb-s-apropos-origine p.sb-c-ori-chapo{margin-top:var(--mec-espace-6) !important} .sb-s-apropos-origine .sb-c-ori-texte{ grid-area:txt;margin-top:var(--mec-espace-5) !important;max-width:62ch;color:var(--mec-tabac); } .sb-s-apropos-origine .sb-c-ori-lien{grid-area:lnk;justify-self:start;margin-top:var(--mec-espace-6) !important} /* ── LE NOYAU · TROIS CARTES, LA PHOTO POSÉE DEDANS ──────────────────────── */ .sb-s-apropos-noyau{ grid-template-columns:repeat(3,1fr); grid-template-areas:"sur sur sur" "tit tit tit" "sui sui sui" "n1r n2r n3r" "n1n n2n n3n" "n1t n2t n3t" "lnk lnk lnk"; column-gap:var(--mec-espace-6);row-gap:0; } .sb-s-apropos-noyau .sb-c-noy-surtitre{grid-area:sur} .sb-s-apropos-noyau .sb-c-noy-titre{grid-area:tit} .sb-s-apropos-noyau .sb-c-noy-titre-suite{grid-area:sui} .sb-s-apropos-noyau .sb-c-n1-role{grid-area:n1r}.sb-s-apropos-noyau .sb-c-n2-role{grid-area:n2r} .sb-s-apropos-noyau .sb-c-n3-role{grid-area:n3r} .sb-s-apropos-noyau .sb-c-n1-nom{grid-area:n1n}.sb-s-apropos-noyau .sb-c-n2-nom{grid-area:n2n} .sb-s-apropos-noyau .sb-c-n3-nom{grid-area:n3n} .sb-s-apropos-noyau .sb-c-n1-texte{grid-area:n1t}.sb-s-apropos-noyau .sb-c-n2-texte{grid-area:n2t} .sb-s-apropos-noyau .sb-c-n3-texte{grid-area:n3t} .sb-s-apropos-noyau .sb-c-noy-lien{grid-area:lnk;justify-self:start;margin-top:var(--mec-espace-7) !important} /* LA PHOTO EST LE ::before DU RÔLE : elle n'existe pas dans le prototype, donc la compilation ne peut pas la perdre, et le texte reste modifiable. */ .sb-s-apropos-noyau p[class*="sb-c-n"][class*="-role"]{ position:relative;background:var(--mec-velin); border:1px solid var(--mec-sable);border-bottom:0; padding:var(--mec-espace-6) var(--mec-espace-6) 0; margin-top:var(--mec-espace-7) !important;margin-bottom:0 !important; font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--mec-grenat-fonce); } .sb-s-apropos-noyau p[class*="sb-c-n"][class*="-role"]::after{ content:"";position:absolute;left:0;right:0;top:3px;height:1px; background:var(--mec-nuit);opacity:.14; } .sb-s-apropos-noyau p[class*="sb-c-n"][class*="-role"]::before{ content:"";display:block;width:100%;aspect-ratio:4/5;margin-bottom:var(--mec-espace-5); /* L'image passe par un jeton : posée dans une règle à part, la forme courte `background:` de cette règle-ci la remettait à `none`, étant plus spécifique. Le visage sortait alors en aplat sombre. */ background:var(--mec-velours) var(--mec-photo,none) center/cover no-repeat; filter:grayscale(1) contrast(1.05); } .sb-s-apropos-noyau .sb-c-n1-role{--mec-photo:url("../assets/images/noyau-yan.jpg")} .sb-s-apropos-noyau .sb-c-n2-role{--mec-photo:url("../assets/images/noyau-lina.jpg")} /* Le siège ouvert n'a pas de visage : un cadre en pointillé le dit. */ .sb-s-apropos-noyau .sb-c-n3-role::before{ border:1px dashed var(--mec-sable);background:var(--mec-velours);filter:none; } .sb-s-apropos-noyau h3[class*="sb-c-n"]{ background:var(--mec-velin); border-left:1px solid var(--mec-sable);border-right:1px solid var(--mec-sable); padding:var(--mec-espace-3) var(--mec-espace-6) 0;margin:0 !important; font-size:1.375rem;font-weight:450;letter-spacing:-.012em;color:inherit; } .sb-s-apropos-noyau p[class*="sb-c-n"][class*="-texte"]{ position:relative;background:var(--mec-velin); border:1px solid var(--mec-sable);border-top:0; padding:var(--mec-espace-4) var(--mec-espace-6) var(--mec-espace-8); margin:0 !important;font-size:.9375rem;line-height:1.58;color:var(--mec-tabac); overflow:hidden;counter-increment:fiche; } /* LE CHIFFRE EN FILIGRANE, dans sa propre bande sous le texte. */ .sb-s-apropos-noyau{counter-reset:fiche} .sb-s-apropos-noyau p[class*="sb-c-n"][class*="-texte"]::after{ content:counter(fiche,decimal-leading-zero);position:absolute;right:10px;bottom:-22px; font-size:5.5rem;font-weight:600;line-height:.82;letter-spacing:-.04em; color:var(--mec-grenat);opacity:.1;pointer-events:none; } /* ── L'ÉCOSYSTÈME · SIX TUILES, LA PLACE DU LOGO TENUE ───────────────────── */ .sb-s-apropos-ecosysteme{ grid-template-columns:repeat(3,1fr); grid-template-areas:"sur sur sur" "tit tit tit" "sui sui sui" "cha cha cha" "e1n e2n e3n" "e1t e2t e3t" "e4n e5n e6n" "e4t e5t e6t"; column-gap:var(--mec-espace-6);row-gap:0; } .sb-s-apropos-ecosysteme .sb-c-eco-surtitre{grid-area:sur} .sb-s-apropos-ecosysteme .sb-c-eco-titre{grid-area:tit} .sb-s-apropos-ecosysteme .sb-c-eco-titre-suite{grid-area:sui} .sb-s-apropos-ecosysteme .sb-c-eco-chapo{grid-area:cha;max-width:70ch} .sb-s-apropos-ecosysteme p.sb-c-eco-chapo{margin-top:var(--mec-espace-6) !important} .sb-s-apropos-ecosysteme .sb-c-e1-nom{grid-area:e1n}.sb-s-apropos-ecosysteme .sb-c-e2-nom{grid-area:e2n} .sb-s-apropos-ecosysteme .sb-c-e3-nom{grid-area:e3n}.sb-s-apropos-ecosysteme .sb-c-e4-nom{grid-area:e4n} .sb-s-apropos-ecosysteme .sb-c-e5-nom{grid-area:e5n}.sb-s-apropos-ecosysteme .sb-c-e6-nom{grid-area:e6n} .sb-s-apropos-ecosysteme .sb-c-e1-texte{grid-area:e1t}.sb-s-apropos-ecosysteme .sb-c-e2-texte{grid-area:e2t} .sb-s-apropos-ecosysteme .sb-c-e3-texte{grid-area:e3t}.sb-s-apropos-ecosysteme .sb-c-e4-texte{grid-area:e4t} .sb-s-apropos-ecosysteme .sb-c-e5-texte{grid-area:e5t}.sb-s-apropos-ecosysteme .sb-c-e6-texte{grid-area:e6t} .sb-s-apropos-ecosysteme h3[class*="sb-c-e"]{ position:relative;background:var(--mec-velin); border:1px solid var(--mec-sable);border-bottom:0; padding:var(--mec-espace-6) var(--mec-espace-5) var(--mec-espace-4); margin-top:var(--mec-espace-6) !important; font-size:.8125rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:inherit; } .sb-s-apropos-ecosysteme h3[class*="sb-c-e"]::before{ content:"";position:absolute;left:0;right:0;top:3px;height:1px; background:var(--mec-nuit);opacity:.14; } .sb-s-apropos-ecosysteme p[class*="sb-c-e"][class*="-texte"]{ background:var(--mec-velin); border:1px solid var(--mec-sable);border-top:1px solid var(--mec-filet-nuit); padding:var(--mec-espace-5) var(--mec-espace-5) var(--mec-espace-6); margin:0 !important;font-size:.9375rem;line-height:1.55;color:var(--mec-tabac); } /* La page de contact reprend la largeur commune, comme les autres. */ [class*="sb-s-contact-"]{ padding-left:var(--mec-marge) !important;padding-right:var(--mec-marge) !important; } @media (max-width:900px){ [class*="sb-s-apropos-"]{ padding-left:var(--mec-gouttiere) !important;padding-right:var(--mec-gouttiere) !important; grid-template-columns:1fr; } [class*="sb-s-contact-"]{ padding-left:var(--mec-gouttiere) !important;padding-right:var(--mec-gouttiere) !important; } } /* ── LES DEUX PLANCHES D'ORIGINE, REMISES DANS LES PAGES ───────────────── Yan, le 27.09.2026 : « tu remets les infographies qu'on avait au départ. Ils étaient bien, ces schémas, et puis ça aussi c'était bien. Je t'ai juste dit de le refaire, donc on a perdu pas mal de matière en cours de route. Veille à ce que ces schémas puissent figurer dans les pages Investir ou dans les pages Entreprendre. » Les deux fichiers existaient toujours ; ils sont recolorés dans la charte (le menthe, l'ambre et le rose ont disparu) et reposés là où ils servent : les trois gestes sur Investir, le chemin d'un projet sur Entreprendre. */ .sb-s-investir-trio,.sb-s-porteur-chemin{ grid-template-columns:1fr; grid-template-areas:"sur" "tit" "sui" "cha" "pla"; align-content:start; padding-left:var(--mec-marge) !important;padding-right:var(--mec-marge) !important; background:var(--mec-velours) !important; } .sb-s-investir-trio .sb-c-tri-surtitre{grid-area:sur} .sb-s-investir-trio .sb-c-tri-titre{grid-area:tit} .sb-s-investir-trio .sb-c-tri-titre-suite{grid-area:sui} .sb-s-investir-trio .sb-c-tri-chapo{grid-area:cha;max-width:66ch} .sb-s-investir-trio p.sb-c-tri-chapo{margin-top:var(--mec-espace-6) !important} .sb-s-investir-trio .sb-c-tri-planche{grid-area:pla} .sb-s-porteur-chemin .sb-c-chm-surtitre{grid-area:sur} .sb-s-porteur-chemin .sb-c-chm-titre{grid-area:tit} .sb-s-porteur-chemin .sb-c-chm-titre-suite{grid-area:sui} .sb-s-porteur-chemin .sb-c-chm-chapo{grid-area:cha;max-width:66ch} .sb-s-porteur-chemin p.sb-c-chm-chapo{margin-top:var(--mec-espace-6) !important} .sb-s-porteur-chemin .sb-c-chm-planche{grid-area:pla} /* La planche prend la colonne : sans cela la mise en page contrainte de WordPress la plafonnait à la taille d'un paragraphe. */ [class*="sb-c-"][class*="-planche"]{ margin:var(--mec-espace-7) 0 0 !important;max-width:none !important;width:100% !important; } /* Surtout pas de `display` ici : la planche existe en deux fichiers, et `.mec-schema--mobile{display:none}` est moins spécifique que cette règle. En le posant, on affichait les deux versions l'une sous l'autre. */ .sb-s-investir-trio .mec-schema,.sb-s-porteur-chemin .mec-schema{ width:100%;height:auto;background:none;border:0;padding:0;margin:0; } /* ── HORS ACCUEIL, LE RÉCIT N'A PAS DE COLONNE DE DROITE ───────────────── Yan, le 27.09.2026 : « pour Investir et Entreprendre, il ne faut pas les deux colonnes gauche-droite. C'est que sur la page d'accueil. » Les temps redeviennent des sections ordinaires : pleine largeur de contenu, pas de hauteur d'écran imposée, et le numéro reste. */ body:not(.home) [id^="temps-"]{ counter-increment:sect; min-height:0; display:grid;align-content:start; padding:var(--mec-espace-8) var(--mec-marge) !important; margin:0 !important;max-width:none !important; } body:not(.home) [id^="temps-"]::before{content:none} body:not(.home) [id^="temps-"] > h1[class*="-titre"]:not([class*="-suite"])::before, body:not(.home) [id^="temps-"] > h2[class*="-titre"]:not([class*="-suite"])::before{ content:counter(sect,decimal-leading-zero);display:block; font-family:var(--mec-font-texte);font-size:.75rem;font-weight:600; letter-spacing:.2em;color:var(--mec-grenat-fonce);margin-bottom:var(--mec-espace-6); } /* Une section sur deux prend le vélours : sans la colonne de droite, c'est l'alternance des fonds qui donne le rythme. */ body:not(.home) [id="temps-2"],body:not(.home) [id="temps-4"],body:not(.home) [id="temps-6"]{ background:var(--mec-velours) !important; } /* ── LES PLANCHES DU THÈME ───────────────────────────────────────────────── */ .mec-planche{display:block;width:100%;height:auto;margin:0} /* La règle de liste pose `margin:0 !important` avec un sélecteur d'attribut : elle est plus spécifique que le placement, donc l'espace au-dessus de la première ligne disparaissait et le filet venait toucher le chapô. On la double, tag compris, pour reprendre la main. */ .sb-s-investir-financer p.sb-c-fin-l1, .sb-s-investir-etude p.sb-c-etu-l1, .sb-s-porteur-chances p.sb-c-cha-l1, .sb-s-porteur-echange p.sb-c-ech-l1, .sb-s-accueil-vouloir p.sb-c-vou-l1, .sb-s-accueil-fonds p.sb-c-fon-l1, .sb-s-apropos-constat p.sb-c-cst-l1{margin-top:var(--mec-espace-7) !important} /* ═══════════════════════════════════════════════════════════════════════════ LE HÉROS DES PAGES INVESTIR ET ENTREPRENDRE ═══════════════════════════════════════════════════════════════════════════ Yan, le 27.09.2026 : « sur la page Investir, on va mettre la première section Hero. On va mettre le graphique en deuxième position. » Le premier temps devient donc une ouverture : il perd son numéro, gagne de la hauteur et un appel, et la planche prend la place juste après. */ /* Le héros prend la MÊME marge gauche que les sections qui le suivent : il gardait la gouttière du socle, les autres prenaient `--mec-marge`, et la page avait deux largeurs. Yan, le 27.09.2026 : « le viewport n'a qu'une seule largeur. Là, il en a deux. Ça joue pas. » */ body:not(.home) #hero{ min-height:min(72svh,760px);align-content:center; padding-top:var(--mec-espace-8) !important;padding-bottom:var(--mec-espace-8) !important; padding-left:var(--mec-marge) !important; } body:not(.home) #hero > h1[class*="-titre"], body:not(.home) #hero > [class*="-titre-suite"]{ font-size:clamp(2.4rem,5vw,4rem);line-height:1.03;letter-spacing:-.025em;max-width:18ch; } body:not(.home) #hero > h1[class*="-titre"]::before{content:none} body:not(.home) #hero [class*="-cta"]{justify-self:start;margin-top:var(--mec-espace-7) !important} /* Le chapô du héros ne passe plus par la règle des temps : il redit son air. */ body:not(.home) #hero > p[class*="-chapo"]{margin-top:var(--mec-espace-6) !important;max-width:58ch} /* ── LES ÉTAPES, EN CARTES NUMÉROTÉES ──────────────────────────────────── Yan : « pour expliquer chaque étape, je trouve qu'on devrait revoir un peu le design avec les numéros. » La ligne à filet devient une carte du système, avec son chiffre en filigrane dans l'angle. */ .sb-s-investir-etude,.sb-s-porteur-echange{ grid-template-columns:repeat(3,1fr); grid-template-areas:"tit tit tit" "sui sui sui" "cha cha cha" "l1 l2 l3"; column-gap:var(--mec-espace-6); } /* Yan, le 27.09.2026 : « les trois boîtes sont mal : pas assez de marge en haut, trop de padding en bas, trop de blanc. » Le chiffre en filigrane occupait une bande vide au pied de chaque carte ; il redevient le JETON du design system, posé en tête, et la carte se referme sur son texte. */ .sb-s-investir-etude p[class*="-l"], .sb-s-porteur-echange p[class*="-l"]{ position:relative; background:var(--mec-velin);border:1px solid var(--mec-sable); padding:var(--mec-espace-5); margin:0 !important;max-width:none;color:inherit; font-size:1rem;line-height:1.5; } /* ── PAS DEUX NUMÉROTATIONS SUR LA MÊME PAGE ───────────────────────────── Yan, le 28.09.2026 : « comme on a déjà une numérotation 1, 2, 3 en haut, peut-être qu'ici on pourrait mettre des icônes ou autre chose, parce que sinon ça fait deux numérotations sur la même page. » Le chiffre part, la PROGRESSION reste. Trois carrés côte à côte, dont un de plus se remplit à chaque carte : on lit où l'on en est sans compter, et sans répéter le numéro que la section annonce déjà. C'est le jeton carré de la charte, décliné — pas une icône empruntée ailleurs. LE DEGRÉ DE REMPLISSAGE PASSE PAR L'ALPHA DU MASQUE. Un masque ne porte aucune couleur : c'est le `background-color` qui la donne, et sa transparence suit celle du masque. Les carrés à venir sont dessinés à 22 % d'opacité dans le SVG, les carrés franchis à 100 % — une seule couleur déclarée, deux poids à l'écran, et rien à réécrire par palette. */ .sb-s-investir-etude p[class*="-l"]::before, .sb-s-porteur-echange p[class*="-l"]::before{ content:"";counter-increment:pas; /* `position:static` explicitement : la règle des listes numérotées, plus haut dans la feuille, pose le chiffre en absolu à gauche du texte. Sans cette reprise, le jeton se superposait à la première ligne. */ position:static;display:block;width:44px;height:44px; margin-bottom:var(--mec-espace-4); border:1.5px solid var(--mec-grenat); } /* UN MASQUE DÉCOUPE AUSSI LA BORDURE. Posé sur le jeton lui-même, il emportait son cadre avec le reste : la boîte disparaissait et il ne restait que trois petits carrés en l'air. La boîte et la marque sont donc deux pseudo-éléments : `::before` tient le cadre, `::after` porte le dessin. */ .sb-s-investir-etude p[class*="-l"]::after, .sb-s-porteur-echange p[class*="-l"]::after{ content:"";position:absolute;left:calc(var(--mec-espace-5) + 7px); top:calc(var(--mec-espace-5) + 18px); width:30px;height:9px; background-color:var(--mec-grenat-fonce); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; } .sb-s-investir-etude p[class*="-l1"]::after, .sb-s-porteur-echange p[class*="-l1"]::after{ --i:url('data:image/svg+xml;utf8,'); -webkit-mask-image:var(--i);mask-image:var(--i); } .sb-s-investir-etude p[class*="-l2"]::after, .sb-s-porteur-echange p[class*="-l2"]::after{ --i:url('data:image/svg+xml;utf8,'); -webkit-mask-image:var(--i);mask-image:var(--i); } .sb-s-investir-etude p[class*="-l3"]::after, .sb-s-porteur-echange p[class*="-l3"]::after{ --i:url('data:image/svg+xml;utf8,'); -webkit-mask-image:var(--i);mask-image:var(--i); } /* La rangée respire au-dessus, et les trois cartes tiennent la même hauteur. */ .sb-s-investir-etude,.sb-s-porteur-echange{align-items:stretch} .sb-s-investir-etude p.sb-c-etu-l1, .sb-s-investir-etude p.sb-c-etu-l2, .sb-s-investir-etude p.sb-c-etu-l3, .sb-s-porteur-echange p.sb-c-ech-l1, .sb-s-porteur-echange p.sb-c-ech-l2, .sb-s-porteur-echange p.sb-c-ech-l3{margin-top:var(--mec-espace-7) !important} /* ── LA COLONNE DE LECTURE, HORS ACCUEIL ───────────────────────────────── Le fond traverse toujours l'écran ; c'est la marge de droite qui se calcule pour que le contenu s'arrête. `100%` vaut ici la largeur de la section, donc la règle tient à toutes les tailles d'écran. */ body:not(.home) [id^="temps-"], body:not(.home) #hero, .sb-s-investir-trio,.sb-s-porteur-chemin, .sb-s-porteur-processus{ padding-right:max(var(--mec-marge), calc(100% - var(--mec-marge) - var(--mec-lecture))) !important; } @media (max-width:900px){ body:not(.home) [id^="temps-"], body:not(.home) #hero, .sb-s-investir-trio,.sb-s-porteur-chemin, .sb-s-porteur-processus{padding-right:var(--mec-gouttiere) !important} } /* ── LA PAGE COURANTE, DANS LE MENU ────────────────────────────────────── Yan : « les pages actives doivent être soulignées dans le menu en haut. » WordPress pose `aria-current="page"` sur le lien de la page servie ; la classe `current-menu-item` la double pour les liens écrits à la main. */ /* WordPress écrit `aria-current="true"` et non `"page"` sur le lien de la page servie. Le sélecteur reste borné à la navigation : le sélecteur de palette emploie le même attribut, et il se serait souligné aussi. */ .mec-entete .wp-block-navigation a[aria-current], .mec-entete .wp-block-navigation .current-menu-item > a, .mec-burger__menu a[aria-current], .mec-burger__menu .current-menu-item > a{ /* Un soulignement vrai, et non une ombre intérieure : sur un lien en ligne, l'ombre se fait rogner par la boîte du texte. */ text-decoration:underline;text-decoration-thickness:2px; text-underline-offset:7px;text-decoration-color:var(--mec-grenat); color:var(--mec-grenat-fonce) !important; } /* ── LE JOURNAL, REMIS D'APLOMB ────────────────────────────────────────── Yan : « tu n'as pas réparé la page Journal. » Trois défauts : les vignettes ne faisaient pas la même hauteur, le texte ne s'alignait donc pas d'une carte à l'autre, et le chiffre en filigrane sortait coupé par le bas. */ /* WordPress pose `is-layout-flow` sur la liste : chaque frère reçoit une marge haute, donc les deuxième et troisième cartes descendaient de treize pixels par rapport à la première. */ .mec-journal .wp-block-post-template > li{ padding-bottom:var(--mec-espace-6) !important; margin:0 !important; } .mec-journal .wp-block-post-template > li::after{content:none} /* Le rapport est posé sur la FIGURE, pas sur l'image : WordPress écrit `style="aspect-ratio:16/9"` sur la figure, et les deux se disputaient la hauteur — les vignettes ne faisaient pas la même. */ .mec-journal .mec-vignette{margin:0 0 var(--mec-espace-5) !important; border:1px solid var(--mec-filet-nuit);line-height:0;overflow:hidden; aspect-ratio:16/10 !important;display:block} .mec-journal .mec-vignette a{display:block;height:100%} .mec-journal .mec-vignette img{display:block;width:100%;height:100%;object-fit:cover} /* ── LA PLANCHE DE LA TABLE COMMUNE SE RESSERRE ────────────────────────── Yan : « le schéma sur la page Investir est un petit peu trop grand. » */ /* Yan, le 27.09.2026 : « ce schéma pourrait être environ 20 % plus grand, et le cadre autour n'est pas nécessaire. » Le cadre était le fond pleine planche du fichier : il est retiré du SVG, la section porte sa couleur. */ .mec-planche--table-commune{width:min(100%,1040px)} /* ═══════════════════════════════════════════════════════════════════════════ LE CHEMIN D'UN PROJET · L'ESCALIER, EN TEXTE ═══════════════════════════════════════════════════════════════════════════ Yan, le 27.09.2026 : « tu n'as toujours pas refait ce schéma-là. Je veux que tu le refasses. » La planche dessinée devient le composant du design system : chaque marche descend d'un cran, le jeton tient dans sa boîte à gauche, et le coude relie une marche à la suivante. C'est du TEXTE, pas une image : il se traduit, il se lit à voix haute, et il se remet d'aplomb au téléphone. Aucune enveloppe ne survit à la compilation, donc la marche est peinte par ses trois champs — le nom porte le haut, la mention porte le bas. */ .sb-s-porteur-chemin{ /* Yan, le 28.09.2026 : « les traits qui les relient sont un petit peu en l'air. On peut les resserrer un petit peu en hauteur, un peu moins de marge. » L'écart tombe de 26 à 16 px au plus large : le coude devient une jointure entre deux marches au lieu d'un trait qui flotte entre elles. Le pas horizontal ne bouge pas — c'est lui qui fait l'escalier. */ --mec-pas:clamp(14px,2.8vw,46px); --mec-ecart:clamp(10px,1.1vw,16px); --mec-jeton:clamp(48px,4vw,56px); --mec-axe:calc(var(--mec-espace-5) + var(--mec-jeton) / 2); grid-template-columns:1fr; grid-template-areas:"sur" "tit" "sui" "cha" "po1n" "et1n" "et1t" "et1m" "et2n" "et2t" "et2m" "po2n" "et3n" "et3t" "et3m" "et4n" "et4t" "et4m" "et5n" "et5t" "et5m" "po3n" "et6n" "et6t" "et6m"; align-content:start;row-gap:0; counter-reset:marche; } .sb-s-porteur-chemin .sb-c-po1-nom{grid-area:po1n} .sb-s-porteur-chemin .sb-c-et1-nom{grid-area:et1n} .sb-s-porteur-chemin .sb-c-et1-texte{grid-area:et1t} .sb-s-porteur-chemin .sb-c-et1-mention{grid-area:et1m} .sb-s-porteur-chemin .sb-c-et2-nom{grid-area:et2n} .sb-s-porteur-chemin .sb-c-et2-texte{grid-area:et2t} .sb-s-porteur-chemin .sb-c-et2-mention{grid-area:et2m} .sb-s-porteur-chemin .sb-c-po2-nom{grid-area:po2n} .sb-s-porteur-chemin .sb-c-et3-nom{grid-area:et3n} .sb-s-porteur-chemin .sb-c-et3-texte{grid-area:et3t} .sb-s-porteur-chemin .sb-c-et3-mention{grid-area:et3m} .sb-s-porteur-chemin .sb-c-et4-nom{grid-area:et4n} .sb-s-porteur-chemin .sb-c-et4-texte{grid-area:et4t} .sb-s-porteur-chemin .sb-c-et4-mention{grid-area:et4m} .sb-s-porteur-chemin .sb-c-et5-nom{grid-area:et5n} .sb-s-porteur-chemin .sb-c-et5-texte{grid-area:et5t} .sb-s-porteur-chemin .sb-c-et5-mention{grid-area:et5m} .sb-s-porteur-chemin .sb-c-po3-nom{grid-area:po3n} .sb-s-porteur-chemin .sb-c-et6-nom{grid-area:et6n} .sb-s-porteur-chemin .sb-c-et6-texte{grid-area:et6t} .sb-s-porteur-chemin .sb-c-et6-mention{grid-area:et6m} .sb-s-porteur-chemin [class*="sb-c-et1-"]{--mec-decal:calc(var(--mec-pas) * 0)} .sb-s-porteur-chemin [class*="sb-c-et2-"]{--mec-decal:calc(var(--mec-pas) * 1)} .sb-s-porteur-chemin [class*="sb-c-et3-"]{--mec-decal:calc(var(--mec-pas) * 2)} .sb-s-porteur-chemin [class*="sb-c-et4-"]{--mec-decal:calc(var(--mec-pas) * 3)} .sb-s-porteur-chemin [class*="sb-c-et5-"]{--mec-decal:calc(var(--mec-pas) * 4)} .sb-s-porteur-chemin [class*="sb-c-et6-"]{--mec-decal:calc(var(--mec-pas) * 5)} /* LA MARCHE — trois champs, un seul cadre. */ .sb-s-porteur-chemin h3[class*="sb-c-et"], .sb-s-porteur-chemin p[class*="sb-c-et"]{ margin:0 !important;background:var(--mec-velin); border-left:1px solid var(--mec-sable);border-right:1px solid var(--mec-sable); padding-left:calc(var(--mec-espace-5) + var(--mec-jeton) + var(--mec-espace-5)); padding-right:var(--mec-espace-6); margin-left:var(--mec-decal) !important; max-width:min(800px,100%); } /* LE TITRE S'ALIGNE SUR LE JETON, au lieu de le surplomber : le jeton était ancré en haut et le titre juste sous lui, ce qui creusait un vide de cent pixels avant le texte. Ils sont maintenant sur la même ligne, et la carte perd un tiers de sa hauteur. */ .sb-s-porteur-chemin h3[class*="sb-c-et"]{ position:relative;z-index:1;border-top:1px solid var(--mec-sable); display:flex;align-items:center; min-height:calc(var(--mec-jeton) + 2 * var(--mec-espace-4)); padding-top:0; font-size:1.1875rem;font-weight:500;letter-spacing:-.008em;color:inherit; } /* LE JETON, dans sa boîte, jamais hors du cadre. */ .sb-s-porteur-chemin h3[class*="sb-c-et"]::before{ content:counter(marche,decimal-leading-zero);counter-increment:marche; position:absolute;left:var(--mec-espace-5);top:50%;transform:translateY(-50%); width:var(--mec-jeton);height:var(--mec-jeton);display:grid;place-items:center; border:1.5px solid var(--mec-grenat);color:var(--mec-grenat-fonce); font-size:1.375rem;font-weight:700;letter-spacing:-.02em;z-index:2; } .sb-s-porteur-chemin p[class*="sb-c-et"][class*="-texte"]{ padding-top:0; font-size:.9375rem;line-height:1.5;color:var(--mec-tabac); } .sb-s-porteur-chemin p[class*="sb-c-et"][class*="-mention"]{ position:relative; border-bottom:1px solid var(--mec-sable); padding-top:var(--mec-espace-3);padding-bottom:var(--mec-espace-4); margin-bottom:var(--mec-ecart) !important; font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--mec-grenat-fonce); } /* LE COUDE — il part de l'axe du jeton, descend la moitié de l'écart, puis file vers l'axe de la marche suivante. */ .sb-s-porteur-chemin p[class*="sb-c-et"][class*="-mention"]::before, .sb-s-porteur-chemin p[class*="sb-c-et"][class*="-mention"]::after{ content:"";position:absolute;background:var(--mec-grenat); } .sb-s-porteur-chemin p[class*="sb-c-et"][class*="-mention"]::before{ width:2px;height:calc(var(--mec-ecart) / 2); left:var(--mec-axe);bottom:calc(var(--mec-ecart) / -2); } .sb-s-porteur-chemin p[class*="sb-c-et"][class*="-mention"]::after{ height:2px;width:calc(var(--mec-pas) + 2px); left:var(--mec-axe);bottom:calc(var(--mec-ecart) / -2); } /* La dernière marche ne mène nulle part, et la porte suivante coupe le fil. */ .sb-s-porteur-chemin .sb-c-et6-mention::before, .sb-s-porteur-chemin .sb-c-et6-mention::after, .sb-s-porteur-chemin .sb-c-et2-mention::after, .sb-s-porteur-chemin .sb-c-et5-mention::after{display:none} /* La marche d'arrivée passe en nuit. */ /* L'ARRIVÉE, EN COULEUR INVERSÉE — par la PAIRE de jetons, comme partout ailleurs : sur un cran clair, `--mec-creme` porte le sombre et `--mec-nuit` le clair. Écrit à l'envers, la dernière marche sortait blanche sur blanc. */ .sb-s-porteur-chemin .sb-c-et6-nom, .sb-s-porteur-chemin .sb-c-et6-texte, .sb-s-porteur-chemin .sb-c-et6-mention{ background:var(--mec-creme) !important;border-color:var(--mec-creme) !important; color:var(--mec-nuit) !important; } .sb-s-porteur-chemin .sb-c-et6-texte{ color:color-mix(in srgb,var(--mec-nuit) 84%,var(--mec-creme)) !important; } .sb-s-porteur-chemin .sb-c-et6-mention{ color:color-mix(in srgb,var(--mec-rose) 62%,var(--mec-nuit)) !important; } .sb-s-porteur-chemin .sb-c-et6-nom::before{ border-color:color-mix(in srgb,var(--mec-rose) 62%,var(--mec-nuit)); color:color-mix(in srgb,var(--mec-rose) 62%,var(--mec-nuit)); } @media (max-width:900px){ .sb-s-porteur-chemin{--mec-pas:0px} .sb-s-porteur-chemin p[class*="sb-c-et"][class*="-mention"]::after{display:none} } /* ── LE FORMULAIRE, AU SYSTÈME ─────────────────────────────────────────── Yan, le 27.09.2026 : « t'as mis en bouton radio, il y a peut-être un autre moyen. Pays de résidence : en sélecteur. J'ai lu les risques de l'investissement : on ne fait pas ça, tu enlèves. » Les deux portes et le pays passent en sélecteurs, la case sur les risques est retirée, et l'entreprise devient facultative. */ .sb-s-contact-formulaire .fluentform{ max-width:min(100%,var(--mec-lecture)) !important; background:var(--mec-velin);border:1px solid var(--mec-sable); padding:var(--mec-espace-7) var(--mec-espace-6); } .sb-s-contact-formulaire select{ font:inherit;font-size:.9375rem;padding:13px 14px;border-radius:0; background:var(--mec-velin);border:1px solid var(--mec-sable);color:inherit; width:100%;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--mec-grenat) 50%), linear-gradient(135deg,var(--mec-grenat) 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 14px) center; background-size:6px 6px,6px 6px;background-repeat:no-repeat; } .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{ background:var(--mec-velin);border:1px solid var(--mec-sable); color:inherit;border-radius:0;padding:13px 14px; } /* `--mec-nuit` est le jeton du FOND sur les crans clairs, pas celui du texte : posé sur une étiquette, il la rendait blanche sur blanc. Le même piège que sur les titres, en septembre. */ .sb-s-contact-formulaire .ff-el-input--label label, .sb-s-contact-formulaire label{color:inherit !important} .sb-s-contact-formulaire .ff-btn-submit{ border-radius:0 !important;min-height:58px;padding:0 1.9em !important; letter-spacing:.04em; } .sb-s-contact-formulaire :is(input,select,textarea):focus-visible{ outline:2px solid var(--mec-grenat);outline-offset:2px;border-color:var(--mec-grenat); } /* ── L'ÉCART · UN VIS-À-VIS, LIGNE À LIGNE ────────────────────────────── Yan, le 27.09.2026 : « j'aimerais que ce soit de la même largeur, et trouve un moyen plus original de présenter ça. » Deux cartes côte à côte juxtaposaient ; le vis-à-vis compare. Les deux colonnes sont égales par construction, et la colonne Mecenda porte le fond inversé de bout en bout. */ .sb-s-apropos-ecart{ grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr); grid-template-areas:"sur sur sur" "tit tit tit" "sui sui sui" ". c1 c2" "w1k w1a w1b" "w2k w2a w2b" "w3k w3a w3b" "w4k w4a w4b"; column-gap:0;row-gap:0; padding-left:var(--mec-marge) !important;padding-right:var(--mec-marge) !important; align-content:start; } .sb-s-apropos-ecart .sb-c-ecr-surtitre{grid-area:sur} .sb-s-apropos-ecart .sb-c-ecr-titre{grid-area:tit} .sb-s-apropos-ecart .sb-c-ecr-titre-suite{grid-area:sui} .sb-s-apropos-ecart .sb-c-ecr-col1{grid-area:c1} .sb-s-apropos-ecart .sb-c-ecr-col2{grid-area:c2} .sb-s-apropos-ecart .sb-c-w1-cle{grid-area:w1k}.sb-s-apropos-ecart .sb-c-w1-gauche{grid-area:w1a}.sb-s-apropos-ecart .sb-c-w1-droite{grid-area:w1b} .sb-s-apropos-ecart .sb-c-w2-cle{grid-area:w2k}.sb-s-apropos-ecart .sb-c-w2-gauche{grid-area:w2a}.sb-s-apropos-ecart .sb-c-w2-droite{grid-area:w2b} .sb-s-apropos-ecart .sb-c-w3-cle{grid-area:w3k}.sb-s-apropos-ecart .sb-c-w3-gauche{grid-area:w3a}.sb-s-apropos-ecart .sb-c-w3-droite{grid-area:w3b} .sb-s-apropos-ecart .sb-c-w4-cle{grid-area:w4k}.sb-s-apropos-ecart .sb-c-w4-gauche{grid-area:w4a}.sb-s-apropos-ecart .sb-c-w4-droite{grid-area:w4b} /* les deux en-têtes de colonne */ .sb-s-apropos-ecart .sb-c-ecr-col1, .sb-s-apropos-ecart .sb-c-ecr-col2{ margin-top:var(--mec-espace-8) !important; padding:0 var(--mec-espace-5) var(--mec-espace-4); font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--mec-grenat-fonce); } /* la clé de ligne, à gauche */ .sb-s-apropos-ecart p[class*="-cle"]{ border-top:1px solid var(--mec-sable); padding:var(--mec-espace-5) var(--mec-espace-5) var(--mec-espace-5) 0; margin:0 !important;font-size:.9375rem;color:var(--mec-tabac); } /* les deux réponses */ /* LES SUFFIXES SONT LONGS À DESSEIN : WordPress ajoute `wp-block-paragraph` à chaque champ, et `[class*="-b"]` attrapait donc la section entière, qui passait en couleur inversée d'un bloc. */ .sb-s-apropos-ecart p[class*="-gauche"], .sb-s-apropos-ecart p[class*="-droite"]{ border-top:1px solid var(--mec-sable); padding:var(--mec-espace-5); margin:0 !important;font-size:1.0625rem;line-height:1.45;color:inherit; } /* LA COLONNE MECENDA, inversée par la PAIRE de jetons, de l'en-tête au pied. */ .sb-s-apropos-ecart .sb-c-ecr-col2, .sb-s-apropos-ecart p[class*="-droite"]{ background:var(--mec-creme) !important;color:var(--mec-nuit) !important; border-top-color:color-mix(in srgb,var(--mec-nuit) 26%,var(--mec-creme)) !important; } /* Les deux intitulés de colonne partagent la même ligne de base : la bande inversée commence plus haut, mais le mot, lui, s'aligne. */ .sb-s-apropos-ecart .sb-c-ecr-col1, .sb-s-apropos-ecart .sb-c-ecr-col2{ display:flex;align-items:flex-end;min-height:56px; padding-top:var(--mec-espace-4); } .sb-s-apropos-ecart .sb-c-ecr-col2{ color:color-mix(in srgb,var(--mec-rose) 62%,var(--mec-nuit)) !important; } .sb-s-apropos-ecart .sb-c-w4-droite{padding-bottom:var(--mec-espace-6)} .sb-s-apropos-ecart .sb-c-w4-cle, .sb-s-apropos-ecart .sb-c-w4-gauche{border-bottom:1px solid var(--mec-sable)} @media (max-width:900px){ .sb-s-apropos-ecart{grid-template-columns:1fr;grid-template-areas:none} .sb-s-apropos-ecart > *{grid-area:auto !important} .sb-s-apropos-ecart p[class*="-cle"]{padding-left:0;font-weight:600;color:var(--mec-grenat-fonce)} } /* ═══════════════════════════════════════════════════════════════════════════ LES PALETTES, SUR LE CRAN CLAIR ═══════════════════════════════════════════════════════════════════════════ Yan, le 27.09.2026 : « j'aimerais qu'on puisse quand même faire un petit choix de couleurs […] mais ça ne fonctionne pas actuellement. » Et pour cause : les cinq palettes étaient écrites pour le registre SOMBRE, et le cran clair — défini plus bas dans la feuille — reposait ensuite ses propres jetons par-dessus. La palette changeait donc les variables, et le cran les rechangeait aussitôt. Chaque palette reçoit ici sa déclinaison claire, qui vient APRÈS le cran et gagne. */ :root[data-palette="grenat-rose"][data-lumiere="clair"]{ --mec-grenat:#B23F4B;--mec-grenat-fonce:#8E2F3A; --mec-rose:#8E2F3A;--mec-grenat-clair:#8E2F3A; --mec-velours:#F7EBEA;--mec-filet-nuit:#DEC4C4;--mec-sable:#DEC4C4; } :root[data-palette="bleu"][data-lumiere="clair"]{ --mec-grenat:#A2612B;--mec-grenat-fonce:#7C4718; --mec-rose:#7C4718;--mec-grenat-clair:#7C4718; --mec-nuit:#FBFAF8;--mec-velours:#EFEDE8;--mec-creme:#17202E;--mec-velin:#FFFFFF; --mec-sable:#C9C3B6;--mec-filet-nuit:#DDD8CE;--mec-tabac:#5C5A52;--mec-tabac-fonce:#5C5A52; } :root[data-palette="vert"][data-lumiere="clair"]{ --mec-grenat:#3F6B4A;--mec-grenat-fonce:#2C5136; --mec-rose:#2C5136;--mec-grenat-clair:#2C5136; --mec-nuit:#FCFAF4;--mec-velours:#F1ECDF;--mec-creme:#1D2A20;--mec-velin:#FFFFFF; --mec-sable:#CFC5AC;--mec-filet-nuit:#E0D8C4;--mec-tabac:#5D5A48;--mec-tabac-fonce:#5D5A48; } :root[data-palette="sarcelle"][data-lumiere="clair"]{ --mec-grenat:#1F7A78;--mec-grenat-fonce:#145B59; --mec-rose:#145B59;--mec-grenat-clair:#145B59; --mec-nuit:#FBFAFA;--mec-velours:#EDF2F1;--mec-creme:#16302F;--mec-velin:#FFFFFF; --mec-sable:#BFD2CF;--mec-filet-nuit:#D6E3E1;--mec-tabac:#4E605E;--mec-tabac-fonce:#4E605E; } /* ══ LA COULEUR D'ACCENT ════════════════════════════════════════════════════ Yan, le 28.09.2026 : « il pourrait être intéressant d'avoir une couleur d'accent. Ça rajouterait un tout petit peu de contraste, mais vraiment une couleur d'accent hyper légère, qu'on utilise peut-être à 5-10 %. » UN CUIVRE SOURD CONTRE LE SARCELLE. Le complémentaire du bleu-vert est l'orangé : c'est la seule teinte qui gagne en présence sans en voler à la couleur principale. Sourde plutôt que vive, parce qu'un accent qui crie cesse d'être un accent au deuxième emploi. TROIS EMPLOIS, ET PAS UN DE PLUS — les trois plus petites surfaces de la page, celles qui signalent sans structurer : le numéro d'un temps, le filet qui suit un surtitre, et la mention d'une marche de l'escalier. Le titre, les boutons et les jetons restent à la couleur principale. Chaque palette porte son accent, sinon le cuivre jurerait sur le grenat. */ :root{--mec-accent:#B5703F} :root[data-palette="grenat"],:root[data-palette="grenat-rose"]{--mec-accent:#A8763C} :root[data-palette="bleu"]{--mec-accent:#9A6B33} :root[data-palette="vert"]{--mec-accent:#A56A38} :root[data-palette="sarcelle"]{--mec-accent:#B5703F} [id^="temps-"] > h1[class*="-titre"]:not([class*="-suite"])::before, [id^="temps-"] > h2[class*="-titre"]:not([class*="-suite"])::before{ color:var(--mec-accent); } [class*="sb-c-"][class*="-surtitre"]::after{background:var(--mec-accent)} .sb-s-porteur-chemin p[class*="sb-c-et"][class*="-mention"]{color:var(--mec-accent)} /* ── LES JALONS DU RÉCIT · CINQ JETONS CLIQUABLES ──────────────────────── Yan, le 27.09.2026 : « il faudrait qu'on puisse aussi passer d'une étape à l'autre en cliquant sur des boutons, de manière un peu sobre. » Ce sont les jetons du design system, posés sous la planche : creux au repos, pleins pour le temps qu'on lit. */ .mec-jalons{display:flex;gap:var(--mec-espace-3);justify-content:center; margin-top:var(--mec-espace-7)} .mec-jalons__n{ display:grid;place-items:center;width:38px;height:38px;text-decoration:none; border:1.5px solid var(--mec-grenat);color:var(--mec-grenat-fonce); font-size:.75rem;font-weight:700;letter-spacing:-.01em; transition:background-color .2s ease,color .2s ease; } .mec-jalons__n:hover{background:color-mix(in srgb,var(--mec-grenat) 14%,transparent)} .mec-jalons__n[aria-current="step"]{ background:var(--mec-grenat);border-color:var(--mec-grenat);color:var(--mec-lin); } /* Les deux flèches encadrent la série, sans cadre : ce sont des gestes, pas des jalons. Au bout de la série, elles s'éteignent sans disparaître. */ .mec-jalons__fleche{ display:grid;place-items:center;width:30px;height:38px;text-decoration:none; color:var(--mec-grenat-fonce);font-size:1.5rem;line-height:1;padding-bottom:.14em; transition:opacity .2s ease,transform .2s ease; } .mec-jalons__fleche:hover{transform:translateY(-1px)} .mec-jalons__fleche[aria-disabled="true"]{opacity:.28;pointer-events:none} @media (max-width:900px){.mec-jalons{margin-top:var(--mec-espace-5);gap:8px} .mec-jalons a{width:32px;height:32px;font-size:.6875rem}} /* ── LE CHOIX DE PALETTE · CINQ PASTILLES ──────────────────────────────── Provisoire, et dit comme tel. Cinq points de couleur, l'intitulé au survol, et rien d'autre : ce n'est pas un réglage du site, c'est un essai. */ .mec-palettes{ position:fixed;right:18px;bottom:18px;z-index:60; display:flex;gap:8px;align-items:center; background:color-mix(in srgb,var(--mec-nuit) 92%,transparent); border:1px solid var(--mec-filet-nuit); padding:10px 12px;backdrop-filter:blur(6px); } .mec-palettes a{ width:20px;height:20px;display:block;text-decoration:none; background:var(--pastille); border:1px solid color-mix(in srgb,var(--mec-creme) 22%,transparent); transition:transform .15s ease,box-shadow .15s ease; } .mec-palettes a:hover{transform:scale(1.12)} /* Yan, le 28.09.2026 : « il faut qu'on voie laquelle est active. » L'anneau d'avant était posé en `--mec-nuit` — le jeton du FOND sur un cran clair. Il dessinait donc du clair sur du clair, et ne se voyait pas. Deux marques au lieu d'une : la pastille grandit, et une encoche se pose dessous. */ .mec-palettes a[aria-current="true"]{ transform:scale(1.25); border-color:var(--mec-creme); box-shadow:0 0 0 2px var(--mec-velin),0 0 0 3.5px var(--pastille); } .mec-palettes a[aria-current="true"]::after{ content:"";position:absolute;left:50%;transform:translateX(-50%); bottom:-7px;width:10px;height:2px;background:var(--pastille); } .mec-palettes a{position:relative} .mec-palettes a span{ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); white-space:nowrap; } @media (max-width:600px){.mec-palettes{right:10px;bottom:10px;padding:8px 10px}} /* ── L'ENTRÉE D'UN TEMPS APPELÉ ────────────────────────────────────────── Yan, le 27.09.2026 : « quand on clique sur 1, 2, 3, il faut qu'il y ait un léger fade in sur la partie gauche ; sinon, pas de fade in, un effet de défilement, comme ça on voit que ça vient du défilement. » Le fondu ne marque donc QUE l'appel : au défilement naturel, le mouvement se voit déjà, et un fondu de plus le brouillerait. */ @keyframes mec-entre{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } :root[data-mec-appel] .mec-entre > *{ animation:mec-entre .45s cubic-bezier(.2,.7,.3,1) both; } @media (prefers-reduced-motion:reduce){ :root[data-mec-appel] .mec-entre > *{animation:none} } /* ── LE DÉFILEMENT SE VOIT ─────────────────────────────────────────────── Yan, le 27.09.2026 : « j'aimerais qu'il y ait plus d'effet de défilement encore. » Le fondu ne marque que l'appel, comme demandé plus tôt ; le défilement, lui, gagne son propre mouvement — qui n'est PAS un fondu. Chaque temps monte légèrement en entrant dans l'écran et s'assoit au milieu. C'est une animation pilotée par la position, pas par le temps : elle suit le doigt ou la molette, donc elle dit le défilement au lieu de le décorer. Là où le navigateur ne sait pas la jouer, il ne se passe rien et la page reste juste. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion:no-preference){ body.home [id^="temps-"] > *{ animation:mec-monte linear both; animation-timeline:view(); animation-range:entry 12% cover 42%; } /* La planche épinglée ne bouge pas : c'est elle le point fixe. */ body.home #planche > *{animation:none} } } @keyframes mec-monte{ from{opacity:.55;transform:translateY(26px)} to{opacity:1;transform:none} }