/* Theme Name: Sophie Brun Theme URI: https://sophrologie-aulnay.com Description: Thème enfant de Twenty Twenty-Five pour le cabinet de Sophie Brun, sophrologue à Aulnay-sous-Bois. Direction artistique « Le mur clair », posée le 23/08/2026 (succède à « La clairière », 21/08/2026 — mêmes slugs, huit hex et huit `name` réécrits, une seule famille de caractères). Aucune requête vers un service tiers : polices servies par le site lui-même. Author: AETERNA Template: twentytwentyfive Version: 1.0.0 Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sophie-brun Tags: block-styles, full-site-editing, one-column, accessibility-ready */ /* * ───────────────────────────────────────────────────────────────────────── * CE FICHIER NE PORTE QUE CE QUE theme.json NE SAIT PAS FAIRE. * * Toute couleur, tout pas de typographie, toute valeur d'espacement vit dans * `theme.json` et devient une variable `--wp--preset--*`. On ne réécrit pas * ici une valeur qui existe là-bas : c'est la dérive qui trahit une main * générée. Les tokens sont ceux, GELÉS, de `DIRECTION_RETENUE_ET_TOKENS.md`. * * Table de correspondance avec l'ancien `tokens.css` (site Astro) : * --papier → --wp--preset--color--papier * --craie → --wp--preset--color--craie * --pastel → --wp--preset--color--pastel * --encre → --wp--preset--color--encre * --encre-douce → --wp--preset--color--encre-douce * --devanture → --wp--preset--color--devanture * --filet → --wp--preset--color--filet * --filet-bande → --wp--preset--color--filet-bande * * ⛔ INTERDIT CALCULÉ, repris tel quel : --filet ne porte JAMAIS de texte * (4,23:1 — il passe 1.4.11 non-textuel, pas 1.4.3). * ⛔ Quand un FOND bouge, les filets et les étiquettes bougent avec lui. * Toute demande d'éclaircissement exige de TOUT recalculer : * node INFRA/scripts/livraison/contraste_wcag.mjs * ───────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────── * LA TABLE DE CONTRASTE — les 15 paires que le site EMPLOIE. * * `theme.json` renvoie ici : c'est le contrat qui rend l'édition libre ET * sûre. Sophie choisit dans huit couleurs, jamais à la pipette, et aucune * combinaison qu'elle peut produire ne descend sous son seuil. * * ⚠️ Le renvoi de theme.json annonçait « 14 paires » et pointait vers une * table qui N'EXISTAIT PAS dans ce fichier. Renvoi mort ET compte faux : * il y en a 15 (3 fonds clairs × 4 avant-plans, plus `filet-bande` comme * fond × 3). Les deux sont corrigés le 23/08. * * Recalculer après TOUTE retouche d'un hex — jamais à la main : * node INFRA/scripts/livraison/contraste_wcag.mjs * * craie / encre 13,65:1 AAA * papier / encre 12,27:1 AAA * pastel / encre 10,30:1 AAA * craie / devanture 9,91:1 AAA ← le texte de TOUS les boutons * encre / filet-bande 9,19:1 AAA ← texte par-dessus la forme 3 * papier / devanture 8,91:1 AAA * pastel / devanture 7,48:1 AAA * craie / encre-douce 6,95:1 AA * devanture / filet-bande 6,67:1 AA ← étiquettes de la bande * papier / encre-douce 6,25:1 AA * pastel / encre-douce 5,25:1 AA * craie / filet 4,71:1 non-texte (1.4.11) * encre-douce / filet-bande 4,68:1 AA ← la plus serrée, marge 0,18 * papier / filet 4,23:1 non-texte (1.4.11) * pastel / filet 3,55:1 non-texte (1.4.11) * * `filet` a été ASSOMBRI volontairement (#6E7C8A → #64717E) : avec le pastel * plus profond, la paire pastel/filet tombait à 3,04:1 — 0,04 de marge sur le * seuil 1.4.11, exactement le piège déjà payé au dossier. Elle est à 3,55:1. * La marge se paie à la conception, pas au gate. * * ⛔ CE QUE CETTE TABLE NE PROUVE PAS : elle liste le POSSIBLE, pas * l'EMPLOYÉ. Une paire née d'une correction (le nom de la praticienne à * 2,01:1 le 31/07) n'y figure par construction pas. Le contrôle qui l'attrape * est au navigateur, sur la page servie — c'est ce que fait le gate. * ───────────────────────────────────────────────────────────────────────── */ /* ---- Polices : déclarées dans theme.json, PAS ici ---------------------- L'UNIQUE `@font-face` vit dans `theme.json` › settings.typography. Une seule source : WordPress les sert alors AUSSI dans l'iframe de l'éditeur, donc Sophie voit à l'écriture exactement ce que sa visiteuse verra. Le redéclarer ici créerait deux vérités qui divergeraient. Aucune requête vers fonts.googleapis.com : une police appelée sur un CDN américain transmet l'IP de la visiteuse à un tiers hors UE. C'est un transfert de donnée personnelle, et c'est le motif exact des mises en demeure CNIL sur Google Fonts. Montserrat Variable est sous licence SIL OFL, donc redistribuable avec le thème — et c'est UN fichier, pas trois : montserrat-latin-wght-normal.woff2, 37 956 octets, tous les grammages de 100 à 900 dans un seul axe `wght`. Avenir Next, qu'elle cite en premier, est propriétaire Linotype : on ne l'embarque pas, mais `-apple-system` la rend de fait sur son Mac et son iPhone. ---------------------------------------------------------------------- */ /* ---- Le grain de la mise en page --------------------------------------- Ce que theme.json ne sait pas exprimer : un rapport d'espacement qui ne se lisse pas, une enseigne en bas-de-casse, un filet qui n'est pas une bordure de composant. --------------------------------------------------------- */ /* L'enseigne. Revue le 31/07 AVEC Sophie : « SOPHIE BRUN en plus petit », « écriture moins brute ». Bas-de-casse, jamais de capitales. */ .sb-enseigne { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--enseigne); line-height: 1.1; font-weight: 300; text-transform: none; letter-spacing: 0; margin: 0; } /* Surtitre : la ligne qui dit « c'est bien ici le site officiel ». Six annuaires portent des adresses périmées d'elle et se placent devant elle sur son propre nom — cette ligne n'est pas un ornement. */ .sb-surtitre { font-size: var(--wp--preset--font-size--surtitre); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--encre-douce); margin: 0 0 var(--wp--preset--spacing--e-4) 0; } .sb-mention { font-size: var(--wp--preset--font-size--mention); color: var(--wp--preset--color--encre-douce); } /* Les chiffres : un prix, une heure, un téléphone se lisent en chiffres alignés, jamais en chiffres elzéviriens. */ .sb-chiffres { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* Ce qui manque et qu'on ASSUME d'afficher. Un site qui affiche une mauvaise adresse est pire qu'un site qui dit qu'il l'attend. Bordure en pointillés + fond craie : le contraste du texte reste celui de --encre sur --craie (13,65:1). */ .sb-a-confirmer { display: inline-block; border: 1px dashed var(--wp--preset--color--filet); background: var(--wp--preset--color--craie); color: var(--wp--preset--color--encre); padding: var(--wp--preset--spacing--e-2) var(--wp--preset--spacing--e-3); font-size: var(--wp--preset--font-size--mention); } /* 🔴 Sur la bande bleu ardoise, ces encadrés étaient les éléments les PLUS contrastés de la section — plus voyants que le numéro de téléphone et que le prix. Trois items sur cinq en pointillés qui crient : la bande lisait « on ne sait pas où est ce cabinet » au lieu de « voici comment me joindre ». Relevé au QA du 19/08, invisible à toute mesure de contraste : chaque paire était conforme, c'est leur HIÉRARCHIE qui était fausse. Sur la seule surface inversée du site, l'encadré se fait donc discret à son tour : plus de plaque claire, un filet et un texte qui appartiennent à la bande. --craie sur --devanture = 9,91:1 · --filet-bande = 6,67:1. */ .has-devanture-background-color .sb-a-confirmer { background: transparent; border-color: var(--wp--preset--color--filet-bande); color: var(--wp--preset--color--craie); } /* Le bouton du menu mobile faisait 24×24 px — exactement le minimum de WCAG 2.5.8, donc conforme, donc muet au gate. Mais c'est le seuil pile, sans marge, et la clientèle de Sophie arrive au téléphone : le minimum strict n'est pas un objectif quand c'est le seul chemin de navigation. ⚠️ `min-width`/`min-height` seuls ne suffisent pas sur ces boutons : le cœur leur pose des dimensions explicites. D'où le `width`/`height` en dur. */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ---- Les deux tableaux --------------------------------------------------- Le balisage est un `core/table` du cœur, PAS une liste de définitions faite main. C'est un arbitrage en faveur de Sophie : un tableau du cœur s'édite dans une grille, cellule par cellule, sans toucher à du HTML — donc elle peut changer un prix seule. Le prix de cette autonomie est qu'on habille un bloc du cœur au lieu de dessiner sa propre structure. Le filet de séparation est --filet sur --papier : 4,23:1. Il ne porte jamais de texte, il ne délimite jamais un composant interactif — il reste donc dans le champ de 1.4.11 (non-textuel), et hors de 1.4.3. -------------------------------------------------------------------------- */ .sb-tableau-tarifs table, .sb-tableau-diplomes table { width: 100%; border-collapse: collapse; } .sb-tableau-tarifs td, .sb-tableau-tarifs th, .sb-tableau-diplomes td, .sb-tableau-diplomes th { border: 0; border-bottom: 1px solid var(--wp--preset--color--filet); padding: var(--wp--preset--spacing--e-3) 0; vertical-align: baseline; /* 2026-09-12 (audit FORGE #10) : la première cellule de chaque ligne devient un — « Sophrologie », « 2007 » sont des en-têtes de ligne, pas des données. Le navigateur met un th en gras et centré : on lui rend exactement le rendu du td, la sémantique change, pas la page. */ font-weight: inherit; text-align: start; } /* Tarifs : le prix est à droite, en chiffres de titre, et ne se coupe jamais de son symbole — « majorée de 20 € » se coupait entre « 20 » et « € » en fin de ligne sur mobile, constaté au QA du site précédent. */ .sb-tableau-tarifs td:last-child { width: 1%; text-align: right; white-space: nowrap; padding-left: var(--wp--preset--spacing--e-4); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--prix); font-weight: 500; } /* Diplômes : l'année à gauche, insécable ; l'intitulé à droite, et il DOIT pouvoir revenir à la ligne — certains font trois lignes sur un téléphone. */ .sb-tableau-diplomes th:first-child { width: 1%; white-space: nowrap; padding-right: var(--wp--preset--spacing--e-4); } .sb-tableau-diplomes td:last-child { text-align: right; } /* Le portrait. Daté en légende : une photo de huit ans affichée grande et muette dit « site négligé » ; la même, petite et datée, dit « document ». */ .sb-portrait img { display: block; width: 100%; height: auto; /* La bichromie encre/papier, appliquée ICI et non en attribut `style` sur l'image : Gutenberg compare le balisage enregistré à celui qu'il aurait produit, et un `style` qu'il n'attend pas fait afficher « ce bloc contient un contenu inattendu » — un avertissement rouge sur la première page que Sophie ouvrirait. Le filtre lui-même est défini dans parts/header.html. Il remappe le noir sur un brun chaud et le blanc sur --papier, comme le ferait une presse deux couleurs : le soleil tacheté qui brûle son épaule devient de la texture, et la haie de laurier cesse d'attirer l'œil. */ /* 2026-09-02 — LA BICHROMIE EST RETIREE, A LA DEMANDE DE SOPHIE. Elle l a ecrit le 01/09 a 22h14 : « Je prefere la photo d accueil en couleur STP ». Le raisonnement du commentaire ci-dessus reste vrai (la bichromie calmait l arriere-plan) — mais c est SA photo et SON site : sa preference tranche, pas l argument graphique. Le filtre #bichromie reste defini dans parts/header.html : remettre cette seule ligne suffit a revenir en arriere. filter: url(#bichromie); */ } .sb-portrait figcaption { font-size: var(--wp--preset--font-size--mention); color: var(--wp--preset--color--encre-douce); margin-top: var(--wp--preset--spacing--e-2); } /* ---- Le formulaire ------------------------------------------------------ Il n'y a pas de serveur de messagerie derrière ce site. Le formulaire compose le message et ouvre le logiciel de la visiteuse. Ce qui compte, c'est qu'il le DISE : `action="mailto:"` échoue en SILENCE (prouvé au QA du 10/08 — aucune navigation, aucun retour, les champs restent remplis). ------------------------------------------------------------------------ */ .sb-champ { display: block; margin-top: var(--wp--preset--spacing--e-4); max-width: var(--wp--style--global--content-size); } .sb-champ__libelle { display: block; font-size: var(--wp--preset--font-size--mention); color: var(--wp--preset--color--encre-douce); margin-bottom: var(--wp--preset--spacing--e-1); } .sb-champ input, .sb-champ textarea { box-sizing: border-box; /* sinon width:100% + padding deborde la colonne (barre horizontale a 375 px) */ width: 100%; min-height: 48px; /* --cible : une cible tactile ne se négocie pas */ padding: var(--wp--preset--spacing--e-2) var(--wp--preset--spacing--e-3); border: 1px solid var(--wp--preset--color--encre-douce); border-radius: 0; background: var(--wp--preset--color--craie); color: var(--wp--preset--color--encre); font-family: var(--wp--preset--font-family--texte); font-size: var(--wp--preset--font-size--corps); } .sb-champ textarea { min-height: 160px; line-height: 1.7; } /* La bordure du champ actif est --encre (12,27:1) et fait 2 px : le focus doit se voir sans dépendre de la couleur seule (1.4.11 + 2.4.7). */ .sb-champ input:focus-visible, .sb-champ textarea:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 2px; } .sb-etat-envoi { margin-top: var(--wp--preset--spacing--e-4); font-size: var(--wp--preset--font-size--mention); color: var(--wp--preset--color--encre); } .sb-etat-envoi:empty { margin: 0; } /* ---- Boutons et liens --------------------------------------------------- border-radius: 0 partout, SANS exception. Aucune box-shadow : la seule ombre du site est celle, réelle, contenue dans la photo. ---------------- */ .sb-action { display: inline-flex; align-items: center; min-height: 48px; padding: var(--wp--preset--spacing--e-3) var(--wp--preset--spacing--e-5); border-radius: 0; border: 1px solid var(--wp--preset--color--devanture); background: var(--wp--preset--color--devanture); color: var(--wp--preset--color--craie); /* 9,91:1 — AAA */ text-decoration: none; font-family: var(--wp--preset--font-family--texte); font-size: var(--wp--preset--font-size--corps); font-weight: 500; letter-spacing: 0.02em; cursor: pointer; } .sb-action:hover, .sb-action:focus-visible { text-decoration: underline; } .sb-action:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 2px; } /* ⛔ LE DÉFAUT QUI A DÉJÀ ÉTÉ LIVRÉ UNE FOIS — ne pas le refaire. theme.json impose --encre à tous les liens. Sur la bande bleu ardoise, cela donne --encre sur --devanture = 1,38:1 : le numéro de téléphone du cabinet, illisible, sur la seule bande que la visiteuse cherche. C'est EXACTEMENT le mécanisme du défaut de la pancarte OUVERT/FERMÉ relevé au dossier le 09/08 — même paire, même cause : une couleur de texte posée globalement, sur une surface inversée qu'on a oubliée. `inherit` rend au lien la couleur de sa bande : --craie sur --devanture, 9,91:1, AAA. La bande bleu ardoise est la SEULE surface inversée du site ; toute nouvelle surface inversée devra être ajoutée ici. */ .has-devanture-background-color a:where(:not(.wp-element-button)) { color: inherit; } /* Un lien de corps de texte reste souligné. Retirer le soulignement d'un lien dans un paragraphe, c'est retirer le seul indice non-coloré qu'il existe. 🔴 `:not(.wp-element-button)` N'EST PAS DÉCORATIF — sans lui, cette règle a fait ÉCHOUER le gate de livraison le 19/08, sur 6 bloquants. Mécanisme, parce qu'il se reproduira : un bouton du cœur est un `` qui vit DANS le contenu de la page. Cette règle-ci pèse (0,2,1) ; celle de theme.json qui donne au bouton son texte craie est `:root :where(.wp-element-button, .wp-block-button__link)`, et `:where()` ne compte pour rien — soit (0,1,0). La règle générique gagnait donc, le bouton perdait sa couleur de texte et héritait de --encre, posé sur son fond --devanture : **1,38:1** avec le bleu ardoise (1,57:1 du temps du vert forêt), sur « Appeler — 06 19 78 09 58 ». Le numéro de téléphone du cabinet, illisible, sur le bouton principal. ⚠️ C'est la TROISIÈME fois que la même paire tombe (1,61:1 avec la terre cuite, 1,57:1 avec le vert forêt) dans ce dossier — la pancarte (09/08), les liens de la bande (18/08), ce bouton (19/08). Trois causes différentes, une seule constante : une couleur de texte posée largement, sur une surface inversée qu'on n'a pas listée. La leçon n'est pas « faire attention », c'est que TOUTE règle de couleur de texte doit exclure ce qui porte déjà sa propre couleur de fond. */ .wp-block-post-content a:not(.sb-action):not(.wp-element-button), .sb-mention a:not(.wp-element-button) { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; } /* ---- Cibles tactiles de la navigation ----------------------------------- Le gate de livraison a mesuré les 8 liens de la barre haute à **23 px** de haut en 320 et 375 px. Le critère WCAG 2.5.8 (Target Size Minimum, AA en WCAG 2.2) en demande 24. Il manquait UN pixel. Ce n'est pas un détail de conformité : la clientèle de Sophie arrive au téléphone, et un lien de 23 px se rate au pouce. Le gate ne bloquait pas dessus — il a raison, ce n'est pas un contraste illisible — mais un point mesuré qu'on laisse traîner parce qu'il ne bloque pas finit par ne jamais être corrigé. `padding-block` plutôt qu'une hauteur fixe : la cible grandit avec le texte si Sophie zoome ou si sa visiteuse a agrandi la police de son téléphone. */ .wp-block-navigation-item__content { padding-block: 4px; } /* ---- Accessibilité ------------------------------------------------------ */ /* Le lien d'évitement vient du CŒUR, pas d'ici : tout thème de blocs en reçoit un automatiquement. Le thème en posait un second, qui arrivait APRÈS celui du cœur au clavier — deux liens d'évitement d'affilée, dont le premier en anglais. Retiré le 19/08 : on garde celui du cœur, qui est localisé. */ /* ───────────────────────────────────────────────────────────────────────── * LES TROIS FORMES ORGANIQUES — direction « Le mur clair » (23/08). * * Décoration pure : posées en ::before/::after sur des pseudo-éléments, * jamais un bloc. Sophie ne peut ni les déplacer ni les supprimer en * écrivant — c'est la ligne de partage entre décoration (ici) et contenu * (les blocs de la page, jamais touchés). * * CIBLAGE PAR CLASSE EXPLICITE — corrigé le 23/08, et la raison mérite d'être * écrite. La version du 21/08 ciblait par POSITION : un sélecteur * `main#contenu > .entry-content > div.wp-block-group:nth-of-type` numéroté * 1, 4 et 7. Il a tenu deux jours. Le carrousel du 23/08 enveloppe la galerie * dans un `
` qu'il insère À L'EXÉCUTION en enfant * direct de `.entry-content` (assets/carrousel.js) : un div de plus en * position 2, et le comptage par type décale d'un cran tout ce qui suit. La * courbe basse est partie sur « En quoi je peux vous accompagner », le galet * sur « Ce que la sophrologie apporte » au lieu des tarifs. Renuméroter en * 1, 5 et 8 aurait recassé au bloc suivant — c'est le mode de ciblage qui * était faux, pas ses numéros. Les classes `sb-forme-1|2|3` sont posées sur * les trois sections elles-mêmes (attribut « classes CSS additionnelles » du * bloc Groupe, donc visible et réversible depuis l'éditeur) : elles voyagent * avec la section, et aucun bloc ajouté ailleurs dans la page ne peut plus * les déplacer. * * RÈGLE DURE, tenue par construction : une forme n'est peinte que dans * `papier`, `craie`, `pastel` ou `filet-bande`. Ces quatre tons portent * `encre` à ≥ 9,19:1 et `encre-douce` à ≥ 4,68:1 (table des 15 paires en tête * de ce fichier) : tout texte qui chevauche une forme * reste AA par construction, sans vérification au cas par cas. Corollaire : * jamais d'opacité fractionnaire sur une forme — la teinte est posée pleine, * une opacité < 1 fabriquerait une couleur non prouvée. * ───────────────────────────────────────────────────────────────────────── */ .sb-forme-1, .sb-forme-2, .sb-forme-3 { position: relative; overflow: hidden; } .sb-forme-1::before, .sb-forme-2::after, .sb-forme-3::before { content: ""; position: absolute; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: contain; } /* Les enfants directs des sections décorées repassent devant la forme : elle est un fond, jamais une superposition sur le texte. */ .sb-forme-1 > *, .sb-forme-2 > *, .sb-forme-3 > * { position: relative; z-index: 1; } /* Forme 1 — le lobe du hero, sur la section « L’enseigne ». Immobile depuis le 23/08 : le souffle qui l'animait a été retiré, le carrousel du bandeau étant désormais la seule interaction signature de la page. */ .sb-forme-1::before { top: -14%; right: -16%; width: 62%; height: 128%; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 480 520%22%3E%3Cpath fill=%22%23FAF8F4%22 d=%22M418,166C452,232,447,314,404,378C361,442,281,489,206,477C131,465,61,417,32,347C3,277,15,185,66,131C117,77,207,61,278,79C349,97,384,100,418,166Z%22/%3E%3C/svg%3E"); background-position: center; } /* Forme 2 — la longue courbe basse entre « Comment ça se passe » (papier) et « Qui je suis » (pastel, la section suivante) : elle annonce le changement de fond avant qu'il n'arrive. Immobile. */ .sb-forme-2::after { left: -18%; bottom: -1px; width: 136%; height: 34%; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 900 220%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23CFDBE7%22 d=%22M0,140C90,80,180,190,290,120C400,50,470,160,580,110C670,70,740,150,820,95C860,68,880,90,900,80L900,220L0,220Z%22/%3E%3C/svg%3E"); background-position: bottom center; } /* Forme 3 — le galet derrière « Les tarifs », plus petit, immobile. */ .sb-forme-3::before { top: -10%; left: -12%; width: 34%; height: 58%; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 340 340%22%3E%3Cpath fill=%22%23E9C9A0%22 d=%22M182,24C224,17,266,49,283,93C300,137,291,190,255,222C219,254,163,264,120,244C77,224,45,182,49,133C53,84,79,49,120,33C140,29,161,27,182,24Z%22/%3E%3C/svg%3E"); background-position: top left; } /* ───────────────────────────────────────────────────────────────────────── * LE STYLE DE BLOC « GALET » — seule liberté offerte à l'édition côté * formes organiques. Sophie le CHOISIT dans la liste des styles de l'image * (functions.php §5), elle ne saisit aucune valeur : elle ne peut donc pas * produire une forme incohérente avec le reste de la direction. * ───────────────────────────────────────────────────────────────────────── */ .is-style-galet img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 340 340%22%3E%3Cpath d=%22M182,24C224,17,266,49,283,93C300,137,291,190,255,222C219,254,163,264,120,244C77,224,45,182,49,133C53,84,79,49,120,33C140,29,161,27,182,24Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 340 340%22%3E%3Cpath d=%22M182,24C224,17,266,49,283,93C300,137,291,190,255,222C219,254,163,264,120,244C77,224,45,182,49,133C53,84,79,49,120,33C140,29,161,27,182,24Z%22/%3E%3C/svg%3E"); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } } /* ───────────────────────────────────────────────────────────────────────── * LE BANDEAU D'ACCUEIL — le carrousel. * * Il n'existe AUCUN bloc « carrousel » dans WordPress : le cœur n'expose * qu'une galerie (vérifié sur ce site, registre des blocs — seul * `core/gallery` correspond). Plutôt qu'ajouter une extension ou coder les * images en dur dans le thème, le carrousel est un STYLE du bloc galerie * (functions.php §7). Conséquence, et c'est la demande de Sophie du 23/08 : * elle ouvre la page Accueil, clique sur la galerie, ajoute ou retire une * image dans sa médiathèque, la réordonne au glissé, écrit son texte * alternatif — tout dans l'éditeur, sans nous appeler, sans toucher au code. * * Les commandes sont posées SOUS la bande, jamais par-dessus : deux de ses * quatre images portent du texte incrusté dans les pixels (« La sophrologie, * une passerelle vers tous les possibles »), et une flèche posée dessus le * masquerait. C'est aussi le seul moyen de garantir le contraste, une flèche * sur photo claire n'en ayant aucun. * * MOUVEMENT : rien n'est animé que le `scrollLeft` natif. Aucune propriété * de mise en page (`width`, `top`, `margin`) n'est touchée — donc aucun * recalcul, aucun décalage. Le rapport de forme est réservé dès le HTML : * CLS nul même avant le chargement des images. * ───────────────────────────────────────────────────────────────────────── */ .sb-carrousel { position: relative; } /* La piste. `position: relative` n'est pas décoratif : il fait de la piste l'`offsetParent` des diapositives, ce qui rend `offsetLeft` stable quel que soit le défilement en cours — c'est ce que lit le script pour viser. */ .wp-block-gallery.is-style-carrousel { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; } /* Une fois le script en place, l'ascenseur natif ne sert plus à rien : les flèches et les points le remplacent. Tant qu'il n'est PAS là, on le laisse — c'est la seule affordance de défilement au clavier et à la souris. */ .wp-block-gallery.is-style-carrousel.sb-carrousel__piste--pret { scrollbar-width: none; } .wp-block-gallery.is-style-carrousel.sb-carrousel__piste--pret::-webkit-scrollbar { display: none; } /* `:not(#individual-image)` reproduit la ruse de spécificité du cœur de WordPress, qui l'emploie sur ses propres règles de galerie. Sans elle, il faudrait des `!important` — qui casseraient les réglages que Sophie pourrait poser depuis l'éditeur. */ .wp-block-gallery.is-style-carrousel figure.wp-block-image:not(#individual-image) { flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; } .wp-block-gallery.is-style-carrousel figure.wp-block-image:not(#individual-image) img { display: block; width: 100%; height: auto; /* Le cadrage d'origine de ses bandeaux, au pixel : 2000 × 719. Le rapport est imposé ici pour que la bande ne saute JAMAIS de hauteur — y compris le jour où Sophie glisse une photo verticale dans la galerie : elle sera recadrée, la mise en page ne bougera pas. */ aspect-ratio: 2000 / 719; object-fit: cover; object-position: center; } /* La piste est une zone défilante : elle doit être atteignable au clavier (WCAG 2.1.1), donc son focus doit se voir. AVANT le 12/09 (audit FORGE, item #11) : `outline-offset: -2px`, l'anneau était dessiné DANS la photo — sur 75 % des pixels de bord échantillonnés, encre sur photo sombre passait sous 3:1 (WCAG 1.4.11). Le fond des photos n'est pas une couleur du thème : on ne peut rien lui promettre. DEPUIS : l'anneau SORT de l'image (offset 3 px, il occupe 3 à 5 px hors bord) et repose sur un halo craie de 6 px (box-shadow, peint SOUS l'outline) : 1 px de plus que l'anneau, pour que l'encre ait la craie des DEUX côtés — 13,65:1 mesuré par contraste_wcag.mjs, quel que soit le voisin. Car le voisin extérieur varie : papier (fond de page de theme.json, 12,27:1) en haut et en bas, mais dès 1240 px les gouttières `.sb-carrousel::before/::after` (plus bas) posent une photo floutée à gauche et à droite — couleur non prouvable (relevé au navigateur le 12/09 : 2,86:1 sur un vert sombre de SA photo du jour, à 5 px de halo). Aucun ancêtre de la galerie n'a `overflow: hidden` (vérifié le 12/09 : .entry-content, main#contenu, .wp-site-blocks, et le `.sb-carrousel` posé par carrousel.js) — un anneau extérieur n'est donc pas coupé ; celui de la piste elle-même (`overflow-x: auto`) ne rogne jamais son PROPRE outline ni sa propre ombre. */ .wp-block-gallery.is-style-carrousel:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 3px; box-shadow: 0 0 0 6px var(--wp--preset--color--craie); } /* ---- les commandes ---- */ .sb-carrousel__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--e-2); margin-top: var(--wp--preset--spacing--e-3); } .sb-carrousel__fleche, .sb-carrousel__point, .sb-carrousel__pause { /* WCAG 2.5.8 : aucune cible sous 24 px. On tient 44 px, le confort réel d'un pouce sur téléphone — c'est là qu'elle regardera son site. */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--wp--preset--spacing--e-2); background-color: var(--wp--preset--color--craie); color: var(--wp--preset--color--encre); border: 1px solid var(--wp--preset--color--filet); border-radius: 0; font-family: var(--wp--preset--font-family--texte); line-height: 1; cursor: pointer; } .sb-carrousel__fleche { font-size: 1.5rem; } .sb-carrousel__pause { font-size: var(--wp--preset--font-size--mention); color: var(--wp--preset--color--encre-douce); } .sb-carrousel__fleche:hover, .sb-carrousel__pause:hover { color: var(--wp--preset--color--encre); border-color: var(--wp--preset--color--devanture); } .sb-carrousel__fleche:focus-visible, .sb-carrousel__point:focus-visible, .sb-carrousel__pause:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 2px; } /* Les points. La cible fait 44 px, la pastille visible 10 px : la zone cliquable est grande, le dessin reste discret. */ .sb-carrousel__points { display: flex; align-items: center; gap: 0; } .sb-carrousel__point { min-width: 44px; padding: 0; background: none; border: 0; position: relative; } .sb-carrousel__point::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--wp--preset--color--filet); background-color: transparent; } .sb-carrousel__point[aria-current="true"]::after { background-color: var(--wp--preset--color--devanture); border-color: var(--wp--preset--color--devanture); } .sb-carrousel__point:hover::after { border-color: var(--wp--preset--color--devanture); } /* Sur un petit écran, le bouton de pause passe à la ligne, sous les flèches : il reste lisible en entier plutôt que de comprimer les points. */ @media (max-width: 480px) { .sb-carrousel__pause { flex-basis: 100%; } /* Mesuré au live le 11/09 sur 375×812 (audit webdesign, B6) : le carrousel finit à 406 px, puis 136 px de vide (padding-top e-8, posé INLINE par Gutenberg sur le bloc), et le bouton « Appeler » tombe entre 847 et 900 px — sous le pli du premier écran. On ne touche pas au contenu : l'inline dit `var(--wp--preset--spacing--e-8)`, on redéfinit cette variable SUR le bloc, en mobile seulement, et l'inline se résout tout seul. Aucun !important. */ .sb-forme-1 { --wp--preset--spacing--e-8: var(--wp--preset--spacing--e-5); } } /* MOUVEMENT RÉDUIT — reduce n'est pas remove. Le défilement automatique ne démarre pas (script), le glissement devient instantané (le déplacement horizontal ample est le déclencheur vestibulaire), et TOUT le reste demeure : flèches, points, clavier, glissé au doigt. La visiteuse voit les quatre images, elle les demande. */ @media (prefers-reduced-motion: reduce) { .wp-block-gallery.is-style-carrousel { scroll-behavior: auto; } } /* DANS L'ÉDITEUR, la bande redevient une grille. Sophie doit VOIR ses quatre images en même temps pour les réordonner au glissé ; un carrousel se regarde sur le site, il ne s'édite pas en défilant. L'éditeur doit dire la vérité sur le RENDU, pas imposer son ergonomie à la SAISIE. */ .editor-styles-wrapper .wp-block-gallery.is-style-carrousel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--e-2); overflow: visible; scroll-snap-type: none; } .editor-styles-wrapper .wp-block-gallery.is-style-carrousel figure.wp-block-image:not(#individual-image) { flex: initial; width: 100%; scroll-snap-align: none; } /* ───────────────────────────────────────────────────────────────────────── * LES TÉMOIGNAGES — page demandée le 19/08, matière collectée par Sophie * à partir du 23/08. * * Ce qu'on NE fait pas, et c'est le sujet : pas de guillemet géant en * pseudo-élément, pas de photo d'avatar, pas d'étoiles. Ce trio est la * signature visuelle du bloc « témoignages » de gabarit — on le reconnaît * avant de l'avoir lu, et il fait douter du texte qu'il encadre. Ici la * carte ne porte que le texte et le prénom, sur le fond ciel déjà * utilisé partout ailleurs. * * Contrastes (calculés, pas estimés) : --encre sur --papier = 12,27:1 · * --encre-douce sur --papier = 6,25:1. Les deux passent AAA / AA. * ───────────────────────────────────────────────────────────────────────── */ /* La grille vient du cœur (`layout: grid`, minimumColumnWidth 19rem) : elle retombe seule à une colonne sous ~304 px de conteneur, soit dès le mobile. Rien à écrire ici pour le responsive — c'est voulu, une media query de plus serait une divergence de plus à tenir. */ .sb-temoignage { background: var(--wp--preset--color--papier); border-left: 2px solid var(--wp--preset--color--filet); padding: var(--wp--preset--spacing--e-5); } .sb-temoignage > *:first-child { margin-block-start: 0; } /* Le texte « aucun témoignage publié pour l'instant » (bloc query-no-results de la page Témoignages). Latent aujourd'hui : 5 témoignages sont publiés, donc il ne se rend jamais. Stylé quand même, le 11/09 : le jour où Sophie dépublie le dernier, ce paragraphe ne doit pas surgir en corps de texte plein, comme si c'était un contenu. --encre-douce sur --craie reste AA. */ .sb-vide { color: var(--wp--preset--color--encre-douce); font-size: var(--wp--preset--font-size--mention); } /* Le texte du témoignage est le contenu de l'article, rendu par le cœur dans son enveloppe habituelle : on neutralise ses marges extrêmes pour que la carte respire de son propre padding. */ .sb-temoignage .wp-block-post-content > *:first-child { margin-block-start: 0; } .sb-temoignage .wp-block-post-content > *:last-child { margin-block-end: 0; } /* Le prénom. Rendu par `core/post-title` en `level: 0`, donc un

: un prénom n'est pas un titre de section, et le mettre en

fabriquerait un plan de page où chaque personne devient un chapitre. */ /* ⚠️ NE PAS passer cette carte en `display: flex` pour coller le prénom en bas. Essayé et mesuré au live le 23/08 : le cœur pose `margin-inline: auto` sur les enfants d'un groupe en disposition « contrainte » ; sur un ITEM FLEX, ces marges automatiques centrent au lieu de justifier — le prénom se retrouvait à 83 px du bord, centré sous son témoignage, et ni `align-self: stretch` ni `margin-inline: 0` ne le ramenaient (largeur mesurée : 62 px au lieu de 229). En disposition bloc, il est à 74 px, soit exactement le bord intérieur de la carte. Le prénom flotte donc un peu haut dans les cartes courtes d'une grille — c'est le prix, il est invisible sur un fond uni, et il ne vaut pas ce défaut-là. */ .sb-temoignage__nom { padding-block-start: var(--wp--preset--spacing--e-4); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--mention); font-weight: 500; color: var(--wp--preset--color--encre-douce); } .sb-temoignage__nom::before { content: "— "; } /* ───────────────────────────────────────────────────────────────────────── * LES ILLUSTRATIONS REPRISES DE SON SITE (23/08). * * Il n'y a volontairement AUCUNE largeur ici, ni en CSS ni en attribut de * bloc : une image de blocs sans `width` s'affiche à sa taille NATURELLE, * plafonnée par le `max-width:100%` du cœur. Conséquence voulue — rien * n'est jamais agrandi. Son fonds plafonne à 940 px et la plupart de ses * fichiers font moins de 400 px : les étirer les rendrait flous sur un * téléphone, c'est-à-dire exactement le reproche qu'elle nous fait * aujourd'hui, mais à l'envers. Le jour où elle remplace une image par une * plus grande depuis wp-admin, l'affichage grandit tout seul jusqu'à la * largeur du texte : il n'y a rien à retoucher ici. * ───────────────────────────────────────────────────────────────────────── */ /* Le portrait en encart sur « Qui suis-je ? ». Même bichromie que sur l'accueil (règle .sb-portrait plus haut), mais borné à 250 px : la règle du dossier tient — « une photo de huit ans affichée grande et muette dit site négligé ; la même, petite et datée, dit document ». Le plafond est posé sur la FIGURE et non sur l'image, parce que `.sb-portrait img` porte déjà `width:100%` ; le borner ici évite d'écrire deux largeurs qui se contredisent. */ .sb-portrait.sb-encart { max-width: 250px; margin-left: auto; margin-right: auto; } /* Les trois vignettes de son accueil, reprises de sophrologie-aulnay.com. Sur son site actuel elles font 250 à 276 px de large dans une colonne de 960 px. Ici, la colonne de contenu fait 576 px sur un écran de bureau (`contentSize: 32em`, et `em` se résout sur la taille du corps de texte, pas sur la racine). Trois colonnes forcées y donnent 144 px par image, MESURÉ au navigateur le 23/08 : plus petit que sur son site actuel, donc une régression déguisée en modernisation. La grille se compte donc elle-même : une vignette par rangée sur un téléphone, deux dans la colonne de 576 px, trois le jour où cette colonne s'élargira. Aucune image n'est jamais agrandie au-delà de sa taille réelle — l'écart de netteté se voit sur un écran de téléphone, et c'est précisément ce qu'elle nous reproche aujourd'hui. Sélecteur en (0,2,0) et non (0,1,0) : `.wp-block-columns{display:flex}` du cœur pèse (0,1,0), et l'ordre d'impression des feuilles n'est pas une garantie sur laquelle on parie. */ .wp-block-columns.sb-vignettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } /* ───────────────────────────────────────────────────────────────────────── * LE FOND REPRIS — la moitié manquante du bandeau qu'elle aime. * * Sa demande du 23/08, mot pour mot : « j'aime bien le déroulement des photos * en page d'accueil, cela plaît beaucoup AVEC UN FOND OÙ L'IMAGE EST REPRISE. * Penses-tu pouvoir le transposer facilement ? » * * CE QU'ELLE DÉCRIT A ÉTÉ RELEVÉ SUR SON SITE, PAS DEVINÉ. Le de * sophrologie-aulnay.com porte, par le réglage « Arrière-plan » de WordPress * (bloc `custom-background-css`, lu dans la source servie) : * * background-image : 2016/08/wooden_path_900x400-e1471181979551.jpg (776x345) * background-size : cover ; background-attachment : fixed ; position : left top * background-color : #016262 * * et son `#container` fait 1028 px, opaque. Mesuré au navigateur à 1440 px : * une gouttière de 206 px de chaque côté, dans laquelle la photo apparaît. * * 🔑 CETTE PHOTO EST LE CHEMIN DE PLANCHES — la même que la première * diapositive de son bandeau. C'est ça, « l'image est reprise » : pas une * texture décorative, SA photo de bandeau, reprise derrière la page. * * TRANSPOSITION — les contraintes tenues, et comment : * * (a) ZÉRO OCTET AJOUTÉ. Le fond ne pointe sur aucun fichier nouveau : le * script lit `currentSrc` de la diapositive affichée, c'est-à-dire le * fichier que le navigateur A DÉJÀ téléchargé — et la variante exacte que * son `srcset` a choisie pour cet écran-là. Vérifié au journal réseau à * 1920 px : `01-chemin-de-planches-1536x552.jpg` y apparaît UNE fois. * Poser une image de fond aurait coûté 60 à 250 Ko sur un accueil mesuré * à 333 Ko ce matin. Ici : 0. Corollaire non négligeable : aucune image * de plus n'est publiée, donc aucune surface de droits nouvelle * (cf. INTERDIT_DROITS.md). * * (b) RIEN NE PASSE SOUS UN TEXTE, NI SOUS UNE COMMANDE. La photo n'est peinte * QUE dans les deux gouttières, à gauche et à droite du bandeau — jamais * dans les 1160 px du milieu, où vivent les flèches, les points et le * bouton de pause. Ce n'est pas de la prudence de principe : les points de * pagination sont un cercle de 10 px bordé de `--filet`, qui tomberait * sous le seuil non textuel (WCAG 1.4.11) sur une photo de sous-bois. * Aucun texte du site ne repose sur ce fond : les 15 paires de contraste * prouvées de la direction « Le mur clair » ne sont pas touchées. * * (c) RIEN SUR TÉLÉPHONE. Sous 1240 px il n'y a pas de gouttière à remplir : * la règle ne s'applique pas du tout (`content` reste à `none`, vérifié au * navigateur à 1200 et 375 px). C'est aussi ce que fait son site — son * conteneur de 1028 px recouvre tout en dessous. * * ⛔ DEUX MONTAGES ONT ÉTÉ ESSAYÉS PUIS ÉCARTÉS SUR CAPTURE. Les garder * écrits évite de les refaire. * * 1. `background-attachment: fixed` — le réglage de SON site, donc le choix * évident. Il fabrique un parallaxe (la fenêtre défile, l'image non) : * du mouvement que personne n'a demandé et qu'il aurait fallu * neutraliser sous `prefers-reduced-motion`. * * 2. `background-size: auto 100%` ancré au bord intérieur — la photo calée * sur la HAUTEUR de la bande, si bien que les lignes du paysage se * rejoignent au pixel à la couture. C'était très beau sur la diapositive * 1. 🔴 Et faux sur les deux autres : DEUX DE SES TROIS IMAGES PORTENT * DU TEXTE CUIT DANS LES PIXELS (« La sophrologie, une passerelle vers * tous les possibles », et son filigrane `www.sophrologie-aulnay.com`). * Un cadrage qui montre le bord de l'image montre donc le bord du texte : * la capture rendait « …ay.com » dans la gouttière gauche et « La sophr » * dans la droite. Un bout de phrase répété au bord de l'écran, c'est un * site cassé. * * 3. `cover` + `center` + flou fort — le cœur de l'image agrandi, aucun * texte possible. Robuste, et laid : à 1920 px le recadrage tombe sur le * ciel clair du chemin, le flou l'aplatit, et la gouttière rend un * barbouillage pâle qu'on prend pour un défaut d'affichage. Écarté sur * capture, pas sur principe. * * MONTAGE RETENU : `auto 100%` ancré au bord intérieur — le cadrage qui * raccorde — PLUS un flou de 10 px, qui est la garantie que le montage 2 * n'avait pas. Le flou ne se voit pas comme un effet : il enlève juste au * fond ce qui appartient à l'image encadrée, le détail net et le texte. * C'est aussi ce que fait son site sans l'avoir cherché : son fond est un * fichier de 776 px étiré en `cover` sur tout l'écran, donc adouci. * * MISE EN PAGE : le fond n'occupe aucune place. Deux pseudo-éléments absolus, * hauteur exacte de la bande, largeur exacte de la gouttière. Aucune hauteur, * aucune marge, aucun bloc ajouté : CLS strictement nul, avant comme après. * * ⚠️ `50vw` compte la barre de défilement, pas l'espace visible. Sans * correction, chaque gouttière dépassait de la moitié de la barre et * fabriquait un défilement horizontal — le défaut que le gate mesure à 320 et * 375 px. Le script mesure la barre au chargement et la publie dans * `--sb-barre` ; le calcul la retranche. Relevé au navigateur réel : 15 px, * `scrollWidth` = `clientWidth`, aucun débordement. * * LE FOND NE SUIT PAS LE DÉFILEMENT, et c'est délibéré : il est pris sur la * PREMIÈRE image de sa galerie et n'en bouge plus, comme sur son site où le * bandeau tourne pendant que le fond, lui, reste. Le faire changer toutes les * six secondes aurait ajouté un second mouvement en vision périphérique, sur * une page dont la seule interaction signature est le bandeau. * * CE QUE SOPHIE GARDE EN MAIN : rien à régler, et rien de nouveau à * apprendre. Le fond EST la première image de sa galerie. Elle la remplace * depuis wp-admin, ou en glisse une autre en tête : le fond suit. Elle retire * le style « Carrousel », tout disparaît ensemble. Aucune URL n'est écrite en * dur dans le thème — donc rien à corriger ici le jour où elle change ses * photos. * ───────────────────────────────────────────────────────────────────────── */ @media (min-width: 1240px) { .sb-carrousel::before, .sb-carrousel::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; pointer-events: none; background-image: var(--sb-fond, none); background-repeat: no-repeat; /* Calée sur la HAUTEUR de la bande — la même que l'image encadrée. C'est ce qui fait que les lignes du paysage se rejoignent à la couture. */ background-size: auto 100%; /* Le CŒUR de la photo, pas son bord. Un bord, c'est là que vivent le filigrane `www.sophrologie-aulnay.com` et les fins de phrase incrustées. Essayé, capturé, écarté : voir le point 2 ci-dessus. */ background-position: center; /* Le flou n'est pas un effet, c'est une GARANTIE. Voir le bloc ci-dessus : deux de ses trois photos portent du texte cuit dans les pixels. 10 px de rayon sur des lettres de ~24 px : plus rien n'est lisible, alors que les lignes du paysage, elles, font 100 px et plus et survivent. La règle tient donc AUSSI pour la photo qu'elle mettra en tête demain, sans nous prévenir. Peint une fois, jamais réanimé. */ filter: blur(8px); /* `filter` échantillonne hors de la boîte, où il n'y a rien : sans ça, le flou déborde en dégradé sur la bande du dessus et celle du dessous. `clip-path` s'applique APRÈS le filtre : il rend un rectangle net, exactement aligné sur la bande. */ clip-path: inset(0); } /* Les deux gouttières s'arrêtent exactement au bord du cadre. C'est `clip-path` qui rend cette arête nette possible : sans lui, le flou s'éteindrait en dégradé sur les 8 derniers pixels et creuserait un liseré pâle entre la photo et l'image encadrée. */ .sb-carrousel::before { left: calc(50% - 50vw + (var(--sb-barre, 0px) / 2)); right: 100%; } .sb-carrousel::after { left: 100%; right: calc(50% - 50vw + (var(--sb-barre, 0px) / 2)); } /* La bande et ses commandes repassent devant le fond — même règle que pour les trois formes organiques : une décoration est un fond, jamais une superposition. */ .sb-carrousel > * { position: relative; z-index: 1; } } /* ───────────────────────────────────────────────────────────────────────── * `` à 600, jamais 700. Montserrat Variable donne tous les grammages * intermédiaires : le 700 sur une page dont les titres sont en 300 fabrique * un contraste de graisse plus fort dans le CORPS que dans les titres — la * hiérarchie s'inverse là où on ne la regarde pas. Marqueur : sb-strong-600. * ───────────────────────────────────────────────────────────────────────── */ strong, b { font-weight: 600; }