/* FICHIER GÉNÉRÉ — ne pas éditer. Source : src/scss/main.scss — voir eleventy.config.js */ @charset "UTF-8"; /* Point d'entrée compilé en assets/css/main.css (voir eleventy.config.js). L'ordre des `@use` FAIT la cascade : chaque partial est émis une seule fois, à l'endroit de son premier `@use` — plus besoin de préfixe numérique sur un nom de fichier pour piloter l'ordre de sortie. Cet ordre doit rester en phase avec la liste des `{% include %}` de src/index.njk (pour les sections de l'accueil ; les autres partials habillent des blocs réutilisables ailleurs sur le site, voir src/_includes/blocs/). */ /* Points de rupture du site — une seule valeur par palier, quel que soit le nombre de fichiers qui la consultent. Avant Sass, chaque section recopiait le rem à la main : 60rem apparaissait dans dix-neuf fichiers différents, et rien ne garantissait qu'ils restent d'accord. */ /* ========================================================================= Design tokens — extraits des variables Figma (frame « Final Page »). Les valeurs de COULEUR sont reprises telles quelles depuis Figma. L'échelle TYPOGRAPHIQUE et l'échelle d'ESPACEMENT ont été normalisées : la maquette contient des tailles à la demi-décimale (14.5, 16.5, 15.5, 18.5…) héritées d'un kit importé. On les a ramenées sur une échelle entière cohérente — l'écart visuel est nul, la maintenance bien meilleure. ========================================================================= */ :root { /* ---------- Couleurs de marque ---------- */ --c-base-main: #f9f9f5; /* fond principal, off-white */ --c-base-surface: #e8e2d7; /* fond alternatif, sable */ --c-text-main: #2c2a2e; /* texte courant */ --c-blue-dark: #202b5c; /* sections sombres, eyebrow du hero */ --c-blue-zodiac: #0f1c3f; /* sombre profond */ /* Le bleu où la page s'éteint : le creux du dégradé bas de la section finale, et le fond du pied de page. Deux encres et non une seule, parce que le bleu nuit de section n'est pas assez profond pour marquer une fin. La maquette y descend à #0d153c, ce mélange y tombe à quelques points près. */ --c-blue-abysse: color-mix(in srgb, var(--c-blue-zodiac) 80%, #2c2a2e); /* ⚠️ LE BLEU DE MARQUE A DEUX NOMS, ET CE N'EST PAS UN DOUBLON. `--c-blue` est le RÔLE « accent de la page » : `.ton-page--*` le réassigne à la teinte d'un pilier, et c'est tout l'intérêt du dispositif. `--c-blue-biron` est la COULEUR, que rien ne réassigne jamais. Promu le 26/08/2026, quand la figure `composeur` de /plateforme/ a eu besoin du bleu de Biron sur une page dont l'accent est le rose : elle dessine l'interface du produit, où le bleu code les métriques. Sans ce nom il aurait fallu réécrire #3f58d7 en clair, donc tenir deux valeurs accordées. ⚠️ Ne pas s'en servir comme raccourci pour « le bleu » : partout où l'on veut l'accent de la page — formes, mises en valeur, boutons —, c'est `--c-blue` qu'il faut lire, sinon la page cesse de suivre son `tonPage`. */ --c-blue-biron: #3f58d7; --c-blue: var(--c-blue-biron); /* bleu des accents typographiques */ --c-blue-action: #2340ff; /* bleu des boutons — plus saturé */ --c-blue-400: #7885ce; --c-blue-100: #dde2f4; --c-blue-50: #eff1fa; --c-casper: #aab4d2; /* texte secondaire sur fond sombre */ --c-fiord: #4c5772; /* texte secondaire sur fond clair */ /* Le corail du logo. C'est la seule couleur vive de la palette qui ne soit pas déjà affectée à un pilier, d'où son emploi pour les trois chiffres qui se contredisent dans le lecteur du hero. ⚠️ Contraste 3,06 sur du BLANC : au-dessus du seuil de 3,0 exigé pour du grand texte, mais sans marge. Sur le crème il tombe à 2,90 et ne passe plus — à n'employer que sur des cartes blanches. */ --c-alerte: #ee6873; --c-fluo: #d1ff00; /* accent fluo */ --c-starship: #d4f24a; /* accent fluo adouci */ --c-melrose: #c4b5fd; --c-mustard: #fcd34d; --c-white: #ffffff; --c-black: #000000; /* ---------- Couleurs par pilier produit ---------- Chaque brique Biron a sa couleur d'identification. */ --c-pilier-dictionnaire: #00b3a4; --c-pilier-plateforme: #ff5d73; --c-pilier-connecteur: #8b5cff; --c-pilier-integrations: #f0a22e; /* ⚠️ LE VERT A UNE SECONDE VALEUR, POUR LES FONDS SOMBRES — même besoin que le rose et l'orange plus bas, et même règle : une bande que la maquette dit sombre reste sombre (règle 10 bis de MAQUETTE.md). Le vert du pilier ne porte le blanc qu'à 2,63 ; celui-ci le porte à 5,58. ⚠️ IL EST ARRIVÉ LE DERNIER DES TROIS, LE 25/08/2026, sur la question d'Hugo : « on peut les faire passer dans une teinte plus sombre pour en faire des blocs sur lesquels on écrit en blanc ? » Le dictionnaire était le seul pilier encore clair en aplat — les trois autres avaient basculé les 19 et 20/08. Le commentaire de _texte-panneau.scss qui justifiait de le laisser clair (« aucune maquette ne dit sombre cette bande-là ») est donc levé, et le périmètre est le pilier entier : les deux boîtes de /dictionnaire/ ET le pavé dictionnaire de /produit/. ⚠️ CE N'EST PAS LA MÊME OPÉRATION QUE POUR L'ORANGE, et c'est le seul point où ce jeton-ci est plus simple que les deux autres : l'aplat #00b3a4 est DÉJÀ à saturation 100 %. L'assombrir ne peut donc pas désaturer, et il n'y a pas de « maronasse » à craindre — le piège de l'orange était qu'un jaune-orange foncé devient brun, ce qui obligeait à faire tourner la teinte vers le rouge. Ici on tient la teinte ET la saturation, et on ne descend que la clarté : aplat #00b3a4 175° S 100 % L 35 % sombre #00756c 175° S 100 % L 23 % Un `color-mix` vers le bleu nuit reste malgré tout à éviter, pour l'autre raison : il ferait virer le vert au bleu-gris et la teinte ne se lirait plus comme celle du pilier posée sur la même page. ⚠️ IL Y A DEUX SEUILS À TENIR, PAS UN, exactement comme pour l'orange : sur un fond sombre `.on-dark` met --text-accent au fluo, et c'est lui qui porte la mise en valeur du titre. Il faut donc que le BLANC et le FLUO passent tous les deux — et c'est le fluo qui contraint, pas le blanc. Candidats mesurés le 25/08/2026 : #008f83 L 28 % blanc 4,00 fluo 3,44 ✗ même le blanc ne passe pas #00857a L 26 % blanc 4,55 fluo 3,91 ✗ le blanc passe, le fluo non #008075 L 25 % blanc 4,86 fluo 4,17 ✗ idem #007a70 L 24 % blanc 5,20 fluo 4,46 ✗ il manque 0,04 au fluo #00756c L 23 % blanc 5,58 fluo 4,79 RETENU — le premier qui tient les deux #007067 L 22 % blanc 5,96 fluo 5,13 tient, la boîte lit plus « sombre » que « verte » #00665e L 20 % blanc 6,86 fluo 5,89 tient, la vivacité du pilier part #00756c est donc le plus proche de l'aplat qui tienne les deux seuils, et ses marges sont à 0,1 près celles de l'orange sombre retenu (5,66 / 4,85) — c'est ce qui a décidé entre lui et #007067. Contrastes : blanc 5,58 ✓ · fluo 4,79 ✓ · casper 2,70 ✗ (à passer au blanc, règle 11) · --c-text-main 2,55 ✗ (l'ancienne encre de cette boîte) · sur blanc 5,58, donc utilisable telle quelle comme encre de badge. */ --c-pilier-dictionnaire-sombre: #00756c; /* ⚠️ LE VIOLET A UNE SECONDE VALEUR LUI AUSSI, ET C'EST LA SEULE DES QUATRE QUI SOIT DÉRIVÉE. Les trois autres sont des aplats choisis à la main, précisément parce qu'un mélange désature — mais celle-ci est un mélange assumé depuis le 19/08/2026, et son point d'arrêt a été arbitré sur des mesures : le violet du pilier est bancal des deux côtés (3,43 pour du texte foncé, 4,14 pour du blanc, il manque 0,36 au seuil de 4,5), et aucune encre ne passe dessus tel quel. 80 % vers le zodiac donne #724fd9, choisi le 25/08/2026 — « il est encore un peu clair » — parce qu'il aligne le poids de la boîte sur celui des trois autres : blanc 5,47, contre 5,58 pour le vert et 5,66 pour l'orange. À 90 % (#7f56ec) il n'était qu'à 4,72, le plus faible des quatre. Contrastes : blanc 5,47 ✓ · fluo 4,70 ✓ · casper 2,65 ✗ (à passer au blanc, règle 11) · --c-blue-zodiac 3,05 ✗ (l'encre de titre du site, à passer au blanc elle aussi) · sur blanc 5,47, donc utilisable telle quelle comme encre de badge. ⚠️ IL N'EST PAS L'APLAT DE BOUTON DE `.ton-page--connecteur`, resté à 90 %, et les deux NE DOIVENT PAS ÊTRE « RÉHARMONISÉS ». Ils ont partagé cette valeur sans partager le rôle : ici un FOND DE BOÎTE, là un aplat dont les 90 % sont calés sur le seuil de lisibilité de son libellé blanc. Assombrir un fond ne dit rien du bouton. ⚠️ CONSÉQUENCE DISPONIBLE MAIS NON PRISE : à 5,47 le fluo repasse le seuil du texte courant (4,70 contre 4,05 à 90 %), donc les boîtes qui avaient dû passer --text-accent au blanc pourraient lui rendre le fluo. Elles ne le font pas, faute que ça ait été demandé — c'est une décision d'Hugo, pas un effet de bord à ramasser au passage. */ --c-pilier-connecteur-sombre: color-mix( in srgb, var(--c-pilier-connecteur) 80%, var(--c-blue-zodiac) ); /* ⚠️ LE ROSE A UNE SECONDE VALEUR, POUR LES FONDS SOMBRES — même besoin que l'orange plus bas, et même règle : une bande que la maquette dit sombre reste sombre (règle 10 bis de MAQUETTE.md). Le rose du pilier ne porte le blanc qu'à 2,97 ; celui-ci le porte à 4,85. ⚠️ C'EST UNE COULEUR CHOISIE PAR HUGO LE 19/08/2026, PAS UN MÉLANGE CALCULÉ. Elle a remplacé le jour même un `color-mix` du rose vers le bleu nuit, écarté pour la raison qui vaut aussi pour l'orange : mélanger désature. Ne pas la « ramener » sur un `color-mix` de --c-pilier-plateforme en croyant réduire une valeur en dur — le rapprochement serait faux et la teinte changerait. ⚠️ ELLE A ÉTÉ PROMUE EN JETON LE 20/08/2026, quand un second bloc en a eu besoin. Elle vivait en clair dans `.onglets-metiers__boite--plateforme` ; la recopier dans `_texte-panneau.scss` aurait laissé deux valeurs à tenir accordées. Les deux la lisent maintenant ici. Contrastes : blanc 4,85 ✓ · casper 2,35 ✗ (à passer au blanc, règle 11) · fluo 4,16 ⚠️ (jamais du texte courant) · sur blanc 4,85, donc utilisable telle quelle comme encre de badge. */ --c-pilier-plateforme-sombre: #bc4b64; /* ⚠️ L'ORANGE DU PILIER A UNE SECONDE VALEUR, POUR L'ENCRE, et c'est le seul des quatre dans ce cas. En aplat #f0a22e tient très bien (texte sombre à 6,71) ; en ENCRE sur le crème il ne donne que 2,01 — un tiers de moins que le vert du dictionnaire (2,90) ou le rose de la plateforme (2,82), les deux niveaux déjà acceptés par Hugo pour des surtitres et des marqueurs. ⚠️ CE N'EST PAS UN MÉLANGE VERS LE BLEU NUIT, et c'est là qu'est tout le sujet : un `color-mix` de l'orange vers le zodiac garde sa TEINTE (38° environ) et ne baisse que sa clarté — or un orange jaune assombri est un BRUN. La maquette employait #c6820f (« Meteor », 38°, 3,01) et Hugo l'a écarté le 20/08/2026 : « maronasse ». La solution n'est pas de foncer davantage, c'est de FAIRE TOURNER LA TEINTE vers le rouge. À luminance égale, un orange à 28° garde sa saturation là où un orange à 38° la perd — et gagne du contraste au passage : #f0a22e 33° S 81 % 2,01 l'aplat du pilier, inutilisable en encre #c6820f 38° S 92 % 3,01 Meteor, écarté — trop jaune, donc brun une fois foncé #cc6207 28° S 97 % 3,74 RETENU — même famille que l'aplat, franchement plus vif On ne descend pas plus bas que 28° : à 17° (#d9480f) le contraste monte encore à 4,07, mais la teinte devient un rouge-orangé qui ne se lit plus comme la même couleur que l'aplat #f0a22e posé sur la même page. */ --c-pilier-integrations-encre: #cc6207; /* ⚠️ ET UNE TROISIÈME VALEUR, POUR LES FONDS SOMBRES. Règle d'Hugo, 20/08/2026 : « je veux que les parties dites sombres soient des parties sombres avec du texte blanc, quitte à assombrir le orange. » Le besoin : là où la maquette peint une bande BLEU NUIT et où la page reprend la couleur du pilier, la boîte doit rester un vrai fond sombre — donc porter du BLANC à 4,5. Ni l'aplat (2,12) ni l'encre (3,95) n'y arrivent. ⚠️ CE N'EST PAS DAVANTAGE UN MÉLANGE VERS LE BLEU NUIT que l'encre au-dessus, et la démonstration est chiffrée. Mélanger désature, et c'est LA DÉSATURATION qui fait le marron, pas l'assombrissement : #b55a0e encre mélangée à 88 % 27° S 86 % blanc 4,74 ← maronasse #974e17 encre mélangée à 72 % 26° S 74 % blanc 6,14 ← franchement marron #88491b encre mélangée à 64 % 25° S 67 % blanc 6,96 ← du brun, plus un orange La bonne opération est de DESCENDRE LA CLARTÉ À SATURATION PLEINE, et de laisser la teinte tourner vers le rouge — la même opération que pour l'encre, poussée d'un cran. Hugo est arrivé de son côté dans cette famille en proposant #E67A0D (30°, S 89 %) : même parenté, simplement trop clair pour du blanc (2,94). Candidats montés sur /labo/orange-sombre/ et comparés le 20/08/2026 : #e67300 30° S 100 % blanc 3,08 fluo 2,64 sa teinte saturée — trop clair #be5f00 30° S 100 % blanc 4,35 fluo 3,73 manque 0,15 au seuil #b45a00 30° S 100 % blanc 4,77 fluo 4,09 le blanc passe, LE FLUO NON #aa5500 30° S 100 % blanc 5,24 fluo 4,49 passe de justesse sur les deux #ab4a00 26° S 100 % blanc 5,66 fluo 4,85 RETENU par Hugo #964b00 30° S 100 % blanc 6,36 fluo 5,45 tient, mais la vivacité part ⚠️ IL Y A DEUX SEUILS À TENIR, PAS UN, et c'est ce qui a décidé. Sur un fond sombre, `.on-dark` met --text-accent au fluo, et c'est lui qui porte la mise en valeur du titre : il faut donc que le BLANC et le FLUO passent tous les deux. C'est ce qui écarte #b45a00, pourtant le plus proche de la teinte d'origine. ⚠️ LES TROIS VALEURS DU PILIER FORMENT UNE ÉCHELLE RÉGULIÈRE, et c'est ce qui les fait lire comme une même couleur plutôt que comme trois oranges : aplat #f0a22e 36° S 87 % L 56 % encre #cc6207 28° S 93 % L 41 % sombre #ab4a00 26° S 100 % L 34 % La clarté descend, la saturation monte, la teinte tourne vers le rouge. Toute nouvelle valeur de ce pilier doit rester sur cette pente : c'est elle qui remplace la règle « on assombrit », qui donnait du brun. */ --c-pilier-integrations-sombre: #ab4a00; /* ---------- Rôles sémantiques ---------- On passe par des rôles plutôt que d'appeler les couleurs brutes dans les composants : changer un rôle suffit à repeindre tout le site. */ /* ⚠️ LE FOND DE PAGE EST LE CRÈME, SAUF SUR TROIS FAMILLES DE PAGES. Il est passé au bleu très pâle le 21/08/2026 pour tout le site, puis remis au crème le 25/08/2026 : « il faudrait que les pages aient un fond crème, sauf les pages de cas client, blog et newsletter qui doivent un fond bleu ». Ces trois-là — les pages ÉDITORIALISÉES, celles qui racontent au lieu de présenter — gardent --c-blue-50, via `.fond-page--bleu` (voir plus bas). ⚠️ TROIS BLOCS ONT MESURÉ LEURS CONTRASTES CONTRE LE BLEU : les cartes de `cas-clients` et de `grille-articles` (blanches, 1,05 sur --c-blue-50, d'où leur filet obligatoire), l'encart de `article` (en --c-blue-100 pour ne pas disparaître) et la carte de `une`. Tous vivent sur les pages restées bleues, et rien n'est donc à reprendre — mais déplacer l'un d'eux sur une page crème demande de refaire ses mesures. ⚠️ --c-base-main NE SE CONFOND PAS AVEC --bg-page pour autant : il reste le CRÈME nommé, et quelques surfaces le posent en clair pour lui-même — les panneaux clairs dans une boîte sombre (`temoignages`, `connecteurs`, `onglets-metiers`). Ceux-là se mesurent contre le bleu nuit qui les entoure, pas contre le fond de la page. Un fond qui veut dire « le fond de la page » doit lire --bg-page, et lui seul — c'est ce qui fait que les trois familles ci-dessus basculent d'une seule ligne. */ --bg-page: var(--c-base-main); --bg-surface: var(--c-white); --bg-inverse: var(--c-blue-dark); /* Fond de la section courante. Chaque section sombre le redéfinit localement. Les boutons secondaires s'y adossent : ils prennent toujours la couleur du fond sur lequel ils sont posés. */ --section-bg: var(--bg-page); /* ⚠️ LE CORPS DE TEXTE PREND --text-strong, JAMAIS --text-muted. Règle du site depuis le 18/08/2026 : le texte courant est à pleine encre — blanc sur fond sombre, --c-text-main sur fond clair. Or c'est exactement ce que --text-strong vaut déjà dans les deux contextes, ici et sous `.on-dark`. Un chapeau ou un paragraphe n'a donc aucune raison de passer par --text-muted, et aucun override par contexte n'est nécessaire. --text-muted reste en service, mais pour ce qui n'est PAS du corps de texte : légendes, étiquettes mono, métas d'article, mentions légales, états vides. C'est la distinction à faire en migrant un bloc — pas « gris ou pas gris », mais « est-ce que ça se lit comme du texte courant ». */ --text-strong: var(--c-text-main); --text-muted: var(--c-fiord); --text-accent: var(--c-blue); --text-on-inverse: var(--c-white); --text-muted-on-inverse: var(--c-casper); --border-subtle: rgba(44, 42, 46, 0.12); --border-strong: rgba(44, 42, 46, 0.24); /* ---------- Typographie ---------- */ /* Police des titres. Essai en cours depuis le 13/08/2026 pour remplacer Recoleta : POUR CHANGER DE POLICE, une seule ligne à modifier — celle de --font-titre, en y mettant l'un des cinq jetons ci-dessous. Les quatre autres restent déclarés dans _base.scss et ne pèsent rien tant qu'ils ne sont pas appelés — un @font-face n'est téléchargé qu'une fois demandé. */ --f-recoleta: "Recoleta", "Fraunces", Georgia, "Times New Roman", serif; --f-rubik: "Rubik Variable", system-ui, sans-serif; --f-sora: "Sora Variable", system-ui, sans-serif; --f-space-grotesk: "Space Grotesk Variable", system-ui, sans-serif; --f-jakarta: "Plus Jakarta Sans Variable", system-ui, sans-serif; --font-titre: var(--f-sora); /* Reste nommé --font-serif parce que tout le CSS du site l'appelle ainsi, depuis l'époque où la police des titres était forcément une serif. */ --font-serif: var(--font-titre); /* ⚠️ LE NOM DOIT ÊTRE "Inter Variable", PAS "Inter". C'est le nom donné au @font-face dans _base.scss — convention @fontsource, qui suffixe les fontes variables — et il n'existe nulle part ailleurs : écrit "Inter", le navigateur ne trouve rien, ne signale rien, et tout le texte du site tombe silencieusement sur system-ui. Le même piège vaut pour les quatre jetons de titre ci-dessus. */ --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Chivo Mono Variable", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Échelle fluide. Chaque niveau atteint son plafond à 1920px et non entre 980 et 1280 comme auparavant — sinon la page est typographiquement figée sur tout le desktop : un écran 1920 affichait exactement le même texte qu'un 1280, avec seulement plus de vide autour. Lecture des formules : la borne haute est la valeur à 1920, la pente est calée pour que la borne basse tombe sur un mobile 375. */ --fs-mono: 0.6875rem; /* 11px — eyebrows mono */ --fs-xs: 0.875rem; /* 14px — légendes */ --fs-sm: 0.9375rem; /* 15px — nav */ --fs-btn: 0.9375rem; /* 15px — boutons */ --fs-base: clamp(1rem, 0.94rem + 0.2vw, 1.125rem); /* 16→18 */ --fs-md: 1.125rem; /* 18px */ --fs-h3: clamp(1.375rem, 1.05rem + 1vw, 2rem); /* 22→32 */ --fs-h2: clamp(1.75rem, 1.25rem + 1.6vw, 3rem); /* 28→48 */ --fs-quote: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); /* 24→40 — citations */ /* Bande mobile → desktop, jusqu'à 1280. La bande desktop est plus bas, dans une media query : un seul clamp de 360 à 1920 serait mou partout. Les deux bandes se raccordent exactement à 1280, sans saut. */ --fs-h1: clamp(2.0625rem, 1.7446rem + 1.413vw, 2.875rem); /* 33→46 */ --fs-eyebrow-lg: clamp(1.0625rem, 0.985rem + 0.3315vw, 1.25rem); /* 17→20 */ --fs-lead: clamp(1rem, 0.974rem + 0.1105vw, 1.0625rem); /* 16→17 */ --lh-tight: 1.08; /* titres — resserré, un 72px n'a pas besoin de 1.1 */ --lh-snug: 1.35; /* sous-titres */ --lh-normal: 1.6; /* texte courant */ /* Interlettrage optique : plus le corps est grand, plus il faut serrer. Un titre à 72px avec le serrage d'un 44px paraît lâche. */ --ls-display: -0.035em; /* h1 */ --ls-tight: -0.03em; /* h2, h3 */ --ls-wide: 0.14em; /* eyebrows mono en capitales */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Espacement (base 4px) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Respiration verticale entre sections, fluide. */ --sp-section: clamp(4rem, 2rem + 6vw, 7.5rem); /* ---------- L'exemption du chrome ---------- ⚠️ L'EN-TÊTE ET LE PIED DE PAGE NE SUIVENT PAS LES 85 % du site. Règle d'Hugo, 26/08/2026 : « 85 % uniforme, sauf sur le header et le footer ». La barre de navigation est la même sur toutes les pages et sa nav tombait à 12,75 px — elle reste donc à sa taille d'aujourd'hui. ⚠️ LE MÉCANISME EST UN CONTRE-ZOOM, ET C'EST LE SEUL QUI TIENNE. Un `rem` se résout TOUJOURS contre la racine, jamais contre un ancêtre : aucune déclaration posée sur l'en-tête ne peut « rebaser » les rem de ses descendants. Redonner sa taille au chrome autrement voudrait dire surcharger localement une dizaine de jetons (--fs-sm, --fs-btn, --fs-md, --fs-mono, --sp-*…) PLUS les seize valeurs en rem écrites en clair dans ses deux feuilles, toutes en nombres bâtards. `zoom` le fait en une déclaration et rattrape aussi les paddings, les gouttières et le logo. ⚠️ IL EST SANS DANGER ICI POUR UNE RAISON PRÉCISE : `zoom` établit un bloc conteneur pour les descendants en `position: fixed`. Le menu mobile est en `position: absolute; top: 100%` dans l'en-tête, pas en `fixed` — vérifié le 26/08/2026. Y introduire un descendant `fixed` (un panneau plein écran, une modale) le dimensionnerait sur l'en-tête et non sur la fenêtre. Si le contre-zoom pose un jour problème, le repli est de surcharger les jetons de police dans les deux feuilles : le texte retrouve sa taille, mais la barre reste 15 % plus serrée qu'aujourd'hui. */ --echelle-chrome: 1.176470588; /* 1 / 0.85 */ /* ---------- Layout ---------- */ --container-max: 80rem; /* 1280px — la grille de la maquette */ /* Hauteur de l'en-tête collant. DEUX VALEURS, parce que l'en-tête vit dans son propre repère : `--h-entete-brute` est la cote telle qu'on l'écrit DANS l'en-tête (déjà contre-zoomé), `--h-entete` est sa hauteur RÉELLE à l'écran, celle que doit lire tout ce qui se cale dessous. Elle était recopiée en clair (4.25rem) dans trois fichiers — `.site-header__inner`, `--article-colle` et `--coeur-colle`. C'est justement l'exemption ci-dessus qui les faisait diverger : sans jeton, les deux `scroll-margin-top` auraient rétréci de 15 % pendant que l'en-tête gardait sa hauteur, et un clic dans un sommaire aurait atterri une dizaine de pixels SOUS la barre. */ --h-entete-brute: 4.25rem; --h-entete: calc(var(--h-entete-brute) * var(--echelle-chrome)); --container-pad: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* Le hero dispose de sa propre largeur, plus généreuse que la grille du reste du site. Sans ça il est doublement figé : `--container-pad` plafonne à 1333px, donc la largeur de contenu se bloque à 1280px dès 1376px de viewport — entre 1376 et 1920, pas un pixel ne bouge, quelle que soit l'échelle typographique. */ --container-hero: 91rem; /* 1456px */ /* ---------- Panneaux ---------- Les grands cadres de la page — « Au cœur de Biron », « Une approche data unique » — partagent leur filet et les marges de leur bande de titre. Ces jetons existent pour que ce partage soit RÉEL : recopiés d'une feuille à l'autre, les deux valeurs divergent au premier réglage. Le filet est bleu depuis le 14/08/2026, et éclairci : à `--c-blue-400` pur il devient un trait franc qui se dispute la lecture avec le contenu du cadre. Dilué de blanc, il cadre sans parler. */ --filet-panneau-teinte: color-mix(in srgb, var(--c-blue-400) 65%, var(--c-white)); --filet-panneau: 1px solid var(--filet-panneau-teinte); /* La maquette donne 22px en haut comme en bas, ce qui étouffe le titre. On dégage nettement au-dessus et on garde le dessous plus court — la bande se lit alors comme un en-tête et non comme un bandeau serré. */ --pad-panneau-entete-haut: clamp(var(--sp-8), 3vw, 3.5rem); --pad-panneau-entete-bas: clamp(var(--sp-5), 1.7vw, 2rem); --pad-panneau-entete-inline: clamp(var(--sp-6), 3.1vw, 3.625rem); /* ---------- La séquence des piliers ---------- « Biron : ni un logiciel… » (sections/approche.njk) et « Au cœur de Biron » (sections/coeur.njk) se lisent comme une seule séquence depuis le 09/09/2026. Elles ont partagé leur grille entière le 16/09/2026 — mêmes fractions, même gouttière, le texte de la première tombant sur la largeur du sommaire « Les quatre piliers » et son trio sur les cartes de piliers. ⚠️ CE PARTAGE A ÉTÉ DÉFAIT LE JOUR MÊME, pour les COLONNES seulement : la paire texte/trio de la première a été resserrée puis recentrée sous son titre, et des fractions `fr` remplissent tout le conteneur par construction — elles ne savent pas laisser du blanc de chaque côté. Ses colonnes sont donc dimensionnées par leur contenu (voir `.approche__grille`), et `--colonnes-piliers` n'a plus qu'un consommateur, `.coeur__suite`. Il reste un jeton plutôt qu'une cote écrite sur place : c'est la grille de la maquette, et le jour où une troisième section la reprend, le partage doit être RÉEL — recopiées d'une feuille à l'autre, les deux cotes divergeraient au premier réglage et rien ne signalerait le décalage. LA GOUTTIÈRE, ELLE, EST TOUJOURS PARTAGÉE, et volontairement : les deux sections se suivent, elles doivent respirer pareil. Les fractions sont celles de la maquette (504 / 778). La gouttière garde son alias `--coeur-ecart-cartes` dans _coeur.scss, où elle borne aussi le débord des badges et se resserre sous `lg` : c'est l'alias qui est redéfini là-bas, jamais ce jeton-ci. */ --colonnes-piliers: minmax(0, 504fr) minmax(0, 778fr); --gouttiere-piliers: clamp(var(--sp-6), 2.4vw, 2.5rem); /* ---------- Formes ---------- */ --radius-sm: 0.375rem; --radius-md: 0.5625rem; /* 9px — le radius Figma, coin circulaire */ --radius-lg: 1rem; --radius-full: 62.4375rem; /* LE rayon des cadres du site : panneaux bordés, boîtes, captures. Il valait 12 px chez « Au cœur de Biron », 15 px sur les cartes de témoignage, --radius-lg (16 px) chez « approche » et rien du tout ailleurs. Un seul jeton pour tous : 12 px, la cote des captures de la maquette. Tranché le 13/08/2026. Il ne remplace pas --radius-sm ni --radius-btn-squircle, qui habillent des objets plus petits (menu, boutons) et suivent une autre échelle. */ --radius-cadre: 0.75rem; /* 12px */ /* Rayon des boutons quand le coin est une superellipse (squircle). Un coin adouci « mange » visuellement moins que l'arc de cercle : à rayon égal il paraît plus carré. On compense en montant la valeur. 14px est le seuil où l'effet devient lisible sur un bouton de 36px sans que la forme bascule vers la pilule (18px). */ --radius-btn-squircle: 0.875rem; /* 14px */ /* Ombres portées en sable chaud et non en bleu-noir. Sur un fond crème, une ombre froide se lit comme une salissure sous l'objet ; une ombre chaude se lit comme une retombée de lumière. Tranché le 12/08/2026. La teinte est stockée en composantes pour qu'un seul endroit suffise à repeindre toutes les ombres du site. Les alphas sont nettement plus hauts qu'avec l'ancienne teinte : #c6baa9 est clair, donc à opacité égale il assombrit environ deux fois moins. Ils restent volontairement sous la compensation complète — l'ombre doit rester douce, c'était tout l'objet du changement. */ --shadow-tint: 198 186 169; /* #c6baa9 */ --shadow-sm: 0 1px 2px rgb(var(--shadow-tint) / 0.18); --shadow-md: 0 4px 16px rgb(var(--shadow-tint) / 0.26); --shadow-lg: 0 24px 64px rgb(var(--shadow-tint) / 0.34); /* ---------- Mouvement ---------- Ces durées sont mises à 0.01ms plus bas quand l'utilisateur a demandé à réduire les animations (voir _base.scss). */ --dur-fast: 150ms; --dur-base: 280ms; /* Entrée au défilement (sections/_reveal.scss). Plus longue que --dur-base : c'est un mouvement qu'on regarde arriver, pas une réaction à un geste. */ --dur-reveal: 520ms; /* Équivalents CSS des courbes GSAP employées dans le hero, pour que les transitions de survol et les animations d'entrée parlent le même langage. Auparavant `power3.out` (JS) et cubic-bezier(0.22,1,0.36,1) (CSS) cohabitaient sur les mêmes boutons. */ --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* ≈ power3.out */ --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* ≈ power3.inOut */ --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1); /* entrées longues */ --z-header: 100; --z-overlay: 200; /* Au-dessus du menu mobile ouvert (--z-overlay) : la bannière de consentement doit rester joignable même si les deux se superposent un instant. Seul consommateur : --cc-z-index dans scss/sections/_consentement.scss. */ --z-consentement: 300; } /* ========================================================================= Contexte sombre. À poser sur n'importe quelle section au fond foncé. Les rôles sémantiques basculent en bloc et les composants suivent sans qu'on ait à écrire une seule règle spécifique — un bouton, un filet ou un texte secondaire posés là-dedans se repeignent tout seuls. ========================================================================= */ /* ========================================================================= Bande desktop de l'échelle typographique. Elle reprend exactement là où la bande basse plafonne, à 1280. Sans elle, la page était typographiquement figée sur tout le desktop : entre 1280 et 1920, seul le h1 changeait — de 0,03 px. ========================================================================= */ @media (min-width: 80rem) { :root { --fs-h1: clamp(2.875rem, -0.375rem + 4.0625vw, 4.5rem); /* 46→72 */ --fs-eyebrow-lg: clamp(1.25rem, 0.75rem + 0.625vw, 1.5rem); /* 20→24 */ --fs-lead: clamp(1.0625rem, 0.6875rem + 0.4688vw, 1.25rem); /* 17→20 */ } } /* ========================================================================= LE FOND DE PAGE BLEU — les pages éditorialisées. Posée sur `` par layouts/base.njk quand une page déclare `fondPage: bleu`, et non sur `
` comme `.ton-page--*` : ici c'est le FOND qui change, et l'en-tête translucide comme les bandes de transition halftone naissent dessus. Sur `
` la page se serait dédoublée en deux teintes au niveau de l'en-tête. Une seule variable à réaffecter, et tout suit : les sections lisent --bg-page pour leur fond, `--halftone-fond` en hérite, `.clients__frame` aussi. `.on-dark` continue de la redéfinir localement, plus bas dans l'arbre — une boîte sombre reste sombre sur les deux fonds. Qui la porte : /cas-clients/ et ses études (src/cas-clients/), /blog/ et ses articles (src/blog/blog.json), /newsletter/ et ses éditions (src/newsletter/newsletter.json). Les fichiers de données de dossier font qu'une nouvelle étude, un nouvel article ou une nouvelle édition l'héritent sans rien déclarer. ========================================================================= */ .fond-page--bleu { --bg-page: var(--c-blue-50); --section-bg: var(--bg-page); } .on-dark { --section-bg: var(--c-blue-dark); --bg-page: var(--c-blue-dark); --text-strong: var(--c-white); --text-muted: var(--c-casper); --text-accent: var(--c-fluo); --border-subtle: rgba(255, 255, 255, 0.25); --border-strong: rgba(255, 255, 255, 0.45); color: var(--text-strong); } /* ========================================================================= Ton de page — les accents d'une page entière à la couleur d'un pilier. Posée par layouts/base.njk sur `
` quand une page déclare `tonPage` dans sa fiche. Elle marche exactement comme `.on-dark` juste au-dessus : elle ne repeint pas des composants un par un, elle réaffecte les VARIABLES, et tout ce qui les lit suit sans qu'on écrive une règle de plus. ⚠️ SUR `
` ET NON SUR `` : l'en-tête et le pied de page en sont les frères, donc ils gardent le bleu du site. C'est voulu — la barre de navigation est la même sur toutes les pages. --------------------------------------------------------------------- CE QUE LA CLASSE REPEINT, en réaffectant deux variables seulement : --text-accent le surtitre d'un hero, les sous-titres en chasse fixe, les puces, le marqueur par défaut d'un `item`, et la mise en valeur `((accent))` du YAML (`.ton--accent`) --c-blue le bouton principal (`.btn--primary`), les FORMES de marque (`.forme--bleu`, qui lit --shape-color), et la mise en valeur `((bleu))` du YAML (`.ton--bleu`) CE QU'ELLE NE TOUCHE PAS, ET POURQUOI CHAQUE FOIS : --c-blue-zodiac c'est la couleur des TITRES (`.hero-page__titre`, `.cadre__titre`) — Hugo a tranché le 18/08/2026 qu'ils restent bleu nuit, comme dans la maquette. C'est aussi l'encre du bouton fluo de l'appel et la base de --c-blue-abysse, son dégradé de fond : la réaffecter verdirait un libellé sur aplat fluo et un décor. --c-blue-dark un FOND, pas un accent — les boîtes sombres et `.forme--bleu-nuit`. --c-blue-400/100/50 des filets et des dégradés, dont --filet-panneau. Un filet d'un cheveu n'est pas un accent. --c-fluo déjà l'accent des contextes sombres. `.on-dark` étant plus proche de l'élément, il l'emporte à l'intérieur d'une boîte sombre : les accents y restent donc fluo, et c'est la convention du site. --------------------------------------------------------------------- ⚠️ CHAQUE PILIER SE DÉCLARE À LA MAIN, ET CE N'EST PAS UN OUBLI. Les quatre --c-pilier-* n'ont pas la même luminance, et --c-blue sert de FOND au bouton principal avec un libellé blanc dessus. Les contrastes du blanc : dictionnaire #00b3a4 3,08 ← accepté par Hugo pour un libellé gras 15,5px plateforme #ff5d73 2,85 ← refusé, la teinte du bouton est ASSOMBRIE integrations #f0a22e 2,12 ← inutilisable, seul pilier encore non déclaré connecteur #8b5cff 4,14 ← refusé de peu, la teinte du bouton est ASSOMBRIE Les mettre dans une boucle Sass livrerait donc des boutons illisibles sans le moindre avertissement. Chacun demande son propre arbitrage — voir la table des contrastes en tête de sections/_texte-panneau.scss, qui a déjà dû trancher la même question pour les boîtes. ⚠️ LES TROIS PILIERS DÉCLARÉS POSENT LEUR TEINTE TELLE QUELLE sur --c-blue. Le dictionnaire s'en tient là (3,08 sous un libellé blanc, accepté). La plateforme et le connecteur ajoutent UNE seule surcharge, --btn-primary-bg, qui n'assombrit QUE l'aplat du bouton — le seul endroit du site où du blanc est posé sur --c-blue. Le reste de la page garde la teinte à pleine force. Ne pas généraliser ce fonçage à --c-blue en croyant simplifier : il éteindrait les formes de marque et les `((bleu))`. ========================================================================= */ .ton-page--dictionnaire { --text-accent: var(--c-pilier-dictionnaire); --c-blue: var(--c-pilier-dictionnaire); /* Le survol du bouton principal. Le couple d'origine va du bleu de marque au bleu d'action, plus saturé ; ici on assombrit vers le bleu nuit, ce qui remonte au passage le contraste du libellé blanc. */ --c-blue-action: color-mix( in srgb, var(--c-pilier-dictionnaire) 82%, var(--c-blue-zodiac) ); } /* ---------- Plateforme, ajouté le 19/08/2026 pour src/plateforme.md ---------- LE ROSE DU PILIER EST POSÉ TEL QUEL SUR TOUTE LA PAGE — accents, formes de marque, marqueurs, `((bleu))`. Exactement comme le dictionnaire pose son vert. ⚠️ UNE SEULE EXCEPTION, ET ELLE EST NOMMÉE : L'APLAT DU BOUTON PRINCIPAL. C'est le seul endroit du site où du blanc est posé sur --c-blue. Partout ailleurs cette variable est de l'ENCRE, mesurée contre le crème : en encre le rose donne 2,82 sur le crème — le même ordre de grandeur que le vert du dictionnaire (2,90), et le même arbitrage. Ces accents-là sont des surtitres en capitales, des puces et des numéros décoratifs (`aria-hidden`), jamais du texte qui porte de l'information. Le corps de texte reste sur --text-strong. en aplat le rose ne donne que 2,85 sous un libellé BLANC — illisible. Il est donc mélangé au bleu nuit jusqu'à 72 %, ce qui porte le blanc à 4,88. ⚠️ CE FONÇAGE PASSE PAR --btn-primary-bg ET NON PAR --c-blue. La première version réaffectait --c-blue lui-même : le bouton devenait lisible, mais les FORMES DE MARQUE et les mises en valeur `((bleu))` de toute la page fonçaient avec lui, sans aucune raison — elles ne portent pas de blanc. Hugo l'a corrigé le 19/08/2026 : « on ne met le rose foncé que si on écrit du texte sur le rose ». La variable de bouton est déclarée dans `.btn--primary` (_components.scss), qui explique aussi pourquoi son repli est dans le `var()`. Le mélange va vers --c-blue-zodiac et non vers le noir : c'est la couleur que le site emploie déjà pour assombrir une teinte de pilier sans la faire virer au gris (voir `--panneau-ton` dans sections/_texte-panneau.scss). ⚠️ NE PAS REMONTER LE 72 %. Chaque point de rose regagné retire du contraste au libellé : à 75 % on tombe à 4,59, à 78 % à 4,35 — sous le seuil. Si le rose du pilier change, c'est ce chiffre-là qu'il faut recalculer, pas ajuster à l'œil. */ .ton-page--plateforme { --text-accent: var(--c-pilier-plateforme); --c-blue: var(--c-pilier-plateforme); --btn-primary-bg: color-mix( in srgb, var(--c-pilier-plateforme) 72%, var(--c-blue-zodiac) ); /* Le survol assombrit encore : 55 % de rose, soit 6,71 pour le libellé blanc. Le sens du mouvement est le même que sur le dictionnaire — on va vers le bleu nuit, jamais vers le clair, sinon le libellé blanc s'efface au survol. */ --btn-primary-bg-hover: color-mix( in srgb, var(--c-pilier-plateforme) 55%, var(--c-blue-zodiac) ); } /* ---------- Connecteur IA, ajouté le 19/08/2026 pour src/connecteur-ia.md ---------- Même parti que la plateforme : LE VIOLET DU PILIER EST POSÉ TEL QUEL sur toute la page — accents, formes de marque, marqueurs, surtitres, `((bleu))` — et seul l'aplat du bouton principal est assombri. ⚠️ LE VIOLET EST LE CAS LE MOINS SÉVÈRE DES QUATRE, ET IL EST ASSOMBRI QUAND MÊME. Les contrastes mesurés : en encre 3,83 sur le crème. C'est le MEILLEUR des trois piliers déclarés (dictionnaire 2,90, plateforme 2,82), donc rien à arbitrer : ces accents sont des surtitres en capitales, des puces et des numéros décoratifs, jamais du texte qui porte de l'information. en aplat 4,14 sous un libellé BLANC. Il manque 0,36 au seuil de 4,5 — assez peu pour tenter de laisser passer, et c'est exactement pour ça que le chiffre est écrit ici. Un fonçage à 90 % de violet le porte à 4,72, et le violet reste parfaitement reconnaissable à ce taux. C'est LE MÊME calcul que `--panneau-ton` dans sections/_texte-panneau.scss, qui avait déjà dû trancher pour ce violet-là — la boîte « connecteur » de `texte-panneau` est le seul pilier des quatre à passer en `.on-dark`. Les deux endroits doivent rester d'accord : si le violet du pilier change, ce sont ces deux 90 % qu'il faut recalculer, pas ajuster à l'œil. ⚠️ LE FONÇAGE PASSE PAR --btn-primary-bg ET NON PAR --c-blue. La faute a déjà été commise sur la plateforme le 19/08/2026 : réaffecter --c-blue rend le bouton lisible mais éteint TOUTES les formes de marque et les mises en valeur `((bleu))` de la page, sans aucun signal. Règle d'Hugo : « on ne met le foncé que si on écrit du texte dessus. » */ .ton-page--connecteur { --text-accent: var(--c-pilier-connecteur); --c-blue: var(--c-pilier-connecteur); --btn-primary-bg: color-mix( in srgb, var(--c-pilier-connecteur) 90%, var(--c-blue-zodiac) ); /* Le survol assombrit encore : 70 % de violet, soit 6,32 pour le libellé blanc. Le sens du mouvement est celui des deux autres piliers — on va vers le bleu nuit, jamais vers le clair, sinon le libellé blanc s'efface au survol. */ --btn-primary-bg-hover: color-mix( in srgb, var(--c-pilier-connecteur) 70%, var(--c-blue-zodiac) ); } /* ---------- Intégrations, ajouté le 20/08/2026 pour src/excel-sheets.md ---------- ⚠️ C'EST LE SEUL PILIER DONT L'ENCRE ELLE-MÊME EST ASSOMBRIE, et c'est une EXCEPTION à la règle 10 de MAQUETTE.md — « une teinte de pilier est de l'encre, pas un aplat de bouton », qui veut que la teinte soit posée telle quelle et que seul l'aplat du bouton fonce. Les trois autres piliers la suivent. La règle ne tient pas ici, et c'est mesuré : #f0a22e ne donne que 2,01 sur le crème, contre 2,90 pour le vert du dictionnaire et 2,82 pour le rose de la plateforme — les deux niveaux qu'Hugo a acceptés. La poser telle quelle reviendrait à descendre d'un tiers sous ce qu'il a validé ailleurs. L'exception a été tranchée par Hugo le 20/08/2026. La maquette fonçait déjà l'orange de son côté (#c6820f pour tous ses accents), mais Hugo a écarté cette valeur le jour même — « maronasse » — et l'encre retenue fait tourner la teinte vers le rouge au lieu de seulement l'assombrir : #cc6207. Le raisonnement complet est sur --c-pilier-integrations-encre, en tête de fichier. ⚠️ L'ORANGE DU PILIER RESTE EMPLOYÉ TEL QUEL EN APLAT — c'est le cas du placeholder de la section 03, où le texte sombre donne 6,71. Les deux valeurs ne se remplacent pas l'une l'autre : la claire est un fond, la foncée est une encre. Contrastes de l'encre retenue : 3,74 sur le crème. Sous un libellé blanc elle ne donne que 3,95, donc l'aplat du bouton est foncé lui aussi. Les chiffres sont sur la règle elle-même. */ .ton-page--integrations { /* ⚠️ LES DEUX RÔLES NE PRENNENT PAS LA MÊME VALEUR ICI, contrairement aux trois autres piliers qui posent la même teinte sur les deux. C'est demandé par Hugo le 20/08/2026 — « les formes sur la page doivent être dans l'orange original » — et c'est cohérent avec ce que chaque rôle porte : --text-accent du TEXTE : surtitres, marqueurs, mentions en chasse fixe. Il lui faut du contraste, donc l'encre foncée (3,74 sur le crème). --c-blue de l'ORNEMENT : les formes de marque du décor de hero, les `((bleu))`. Rien n'y est à lire, donc l'orange du pilier à pleine force — le foncer n'apportait aucune lisibilité et éteignait le décor. ⚠️ CONSÉQUENCE À CONNAÎTRE : `((bleu))` et `((accent))` ne donnent plus la même couleur sur cette page. C'est voulu — le premier est une mise en valeur décorative, le second une encre — mais aucune autre page pilier ne fait ça. */ --text-accent: var(--c-pilier-integrations-encre); --c-blue: var(--c-pilier-integrations); /* ⚠️ L'APLAT DU BOUTON PART DE L'ENCRE, PAS DE --c-blue, et c'est la seule règle de ce fichier dans ce cas. Ailleurs les deux sont égaux, donc la question ne se pose pas. Ici --c-blue vaut l'orange clair : l'employer comme base donnerait un aplat à foncer de moitié, qui perdrait la teinte. On part donc de l'encre déjà tournée vers le rouge, et 88 % suffisent à porter le blanc de 3,95 à 4,74. Ne pas remonter ce chiffre : à 95 % on tombe à 4,26, sous le seuil de 4,5. */ --btn-primary-bg: color-mix( in srgb, var(--c-pilier-integrations-encre) 88%, var(--c-blue-zodiac) ); /* Le survol assombrit encore : 70 % de l'encre, soit 6,33 pour le libellé blanc. Même sens que les trois autres piliers — on va vers le bleu nuit, jamais vers le clair, sinon le libellé blanc s'efface au survol. */ --btn-primary-bg-hover: color-mix( in srgb, var(--c-pilier-integrations-encre) 70%, var(--c-blue-zodiac) ); } /* Un masque CSS et son équivalent -webkit- : Safari ne supporte encore que la version préfixée de `mask-*`. Sans ce mixin, chaque forme masquée à une seule image recopiait les six déclarations à la main. Ne couvre PAS les masques à plusieurs couches (`mask-composite`) : les mots-clés de composition ne sont pas les mêmes entre la version standard et la version -webkit-, les faire cohabiter casse la composition. Ces blocs-là restent écrits à la main — voir le commentaire de `.texte-illustre__grille` dans sections/_texte-illustre.scss. */ /* ========================================================================= Reset, polices et styles de base. ========================================================================= */ /* ---------- Polices ---------- */ /* Inter et Chivo Mono sont des polices libres, servies en local depuis node_modules (voir eleventy.config.js) plutôt que depuis un CDN, qui poserait un problème RGPD. Ce sont des fontes variables : un seul fichier couvre toutes les graisses. Inter a remplacé Figtree le 11/08/2026 : très grande hauteur d'x, ajustements optiques poussés, différenciation nette du l, du I et du 1 — ce qui manquait à Figtree. */ @font-face { font-family: "Inter Variable"; src: url("/assets/fonts/inter-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Chivo Mono a remplacé JetBrains Mono le 11/08/2026. Contrainte de marque : le zéro ne doit avoir ni point ni barre. JetBrains Mono a un zéro pointé — comme 16 des 19 polices monospace libres testées, le zéro marqué étant la norme du genre, hérité des besoins du code. */ @font-face { font-family: "Chivo Mono Variable"; src: url("/assets/fonts/chivo-mono-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Candidates pour les titres, en remplacement de Recoleta (13/08/2026). Toutes des fontes variables libres : un seul fichier par police couvre toutes les graisses. On bascule de l'une à l'autre en changeant --font-titre dans _tokens.scss ; les quatre restent déclarées ici, seule celle qui est appelée est téléchargée par le navigateur. */ @font-face { font-family: "Rubik Variable"; src: url("/assets/fonts/rubik-variable.woff2") format("woff2-variations"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Sora Variable"; src: url("/assets/fonts/sora-variable.woff2") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; } @font-face { font-family: "Space Grotesk Variable"; src: url("/assets/fonts/space-grotesk-variable.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans Variable"; src: url("/assets/fonts/plus-jakarta-sans-variable.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } /* Recoleta est une police commerciale (Latinotype). La licence webfont n'est pas encore acquise : les .woff2 sont donc absents du dépôt. `local()` est déclaré en premier — si la police est installée sur la machine (c'est le cas de tout poste qui ouvre la maquette Figma), le navigateur l'utilise directement et le rendu local est exact, sans requête réseau ni fichier à fournir. Le jour où la licence est acquise : déposer recoleta-semibold.woff2 et recoleta-bold.woff2 dans src/assets/fonts/ et il n'y a rien d'autre à faire. En attendant, les visiteurs voient le fallback (Georgia). */ @font-face { font-family: "Recoleta"; src: local("Recoleta SemiBold"), local("Recoleta-SemiBold"), url("/assets/fonts/recoleta-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Recoleta"; src: local("Recoleta Bold"), local("Recoleta-Bold"), url("/assets/fonts/recoleta-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* ⚠️ L'ÉCHELLE DU SITE EST À 85 %, ET C'EST CETTE LIGNE QUI LA PORTE. Demande d'Hugo, 26/08/2026 : « toutes les polices sont trop grosses, on voudrait qu'on ait le même aspect qu'en mode 80 % de zoom sur le navigateur » — tranché à 85 % pour ne pas descendre le texte courant sous le seuil des légendes (voir plus bas). ⚠️ CE N'EST PAS UNE RÉDUCTION DES POLICES, c'est une réduction de TOUT, et c'est là qu'est le raisonnement. Un zoom navigateur ne touche pas la typographie : il réduit polices, marges, gouttières, largeur de conteneur et rayons du même coup, et c'est ce qui fait que le résultat reste harmonieux. N'avoir baissé que l'échelle typographique aurait laissé les espacements calibrés pour l'ancienne taille — la page se creuse de trous, les boutons deviennent trop capitonnés autour de leur label, et surtout la MESURE s'allonge : le conteneur restant à 1280 px, les lignes passent d'environ 65 à 76 caractères et il faut reprendre à la main tous les `max-width` du site. Tout le CSS du site est écrit en `rem` (les `px` qu'on trouve dans les feuilles sont presque tous des commentaires qui annotent une valeur en rem), donc une seule déclaration ici déplace l'ensemble en conservant EXACTEMENT toutes les proportions et toutes les mesures. ⚠️ EN POURCENTAGE ET JAMAIS EN PX : `font-size: 13.6px` écraserait la taille par défaut d'un visiteur qui a agrandi sa police dans son navigateur ; un pourcentage la respecte, puisqu'il s'applique à elle. Trois conséquences à connaître : • L'EN-TÊTE ET LE PIED DE PAGE EN SONT EXEMPTÉS (Hugo, même jour), par un contre-zoom déclaré sur eux — voir `--echelle-chrome` dans _tokens.scss et `.site-header` dans _components.scss. • LES MÉDIA QUERIES NE BOUGENT PAS. Un `em`/`rem` dans une media query se résout toujours contre la taille INITIALE (16 px), jamais contre celle de la racine : les points de rupture restent donc à leur position actuelle en viewport. C'est une différence avec un vrai zoom navigateur, et elle joue dans le bon sens — la mise en page mobile ne se déclenche pas plus tard qu'avant. • LES PENTES DES `clamp()` NE SUIVENT PAS. L'échelle fluide mélange `rem` et `vw`, et la moitié `vw` est relative au viewport, pas à la racine : les plafonds sont donc atteints un peu plus tôt. Sur desktop tout est déjà au plafond, donc aucun effet ; entre ~700 et 1280 px le texte est proportionnellement un peu plus gros que la cible. Recalculer les pentes si ça se voit — ne pas croire à un bug. */ html { font-size: 85%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100svh; background-color: var(--bg-page); color: var(--text-strong); font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul[class], ol[class] { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } /* Un focus visible et cohérent partout. On ne le retire jamais : c'est le seul repère des personnes qui naviguent au clavier. */ :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---------- Typographie ---------- */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { text-wrap: pretty; } /* ---------- Primitives de layout ---------- */ .container { width: 100%; max-width: calc(var(--container-max) + var(--container-pad) * 2); margin-inline: auto; padding-inline: var(--container-pad); } /* Réservé aux lecteurs d'écran : invisible à l'œil, lu à la voix. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Lien d'évitement : première tabulation de la page, permet de sauter la navigation pour aller droit au contenu. */ .skip-link { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-overlay); padding: var(--sp-3) var(--sp-5); background-color: var(--c-blue); color: var(--c-white); font-size: var(--fs-sm); font-weight: var(--fw-semibold); border-radius: var(--radius-md); transform: translateY(-150%); transition: transform var(--dur-fast) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } /* ---------- Mouvement réduit ---------- Quand l'utilisateur a activé « réduire les animations » dans son OS, on neutralise durées et déplacements. Le contenu reste intégralement visible : les éléments animés à l'apparition sont remis à leur état final plutôt que masqués. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-reveal: 0.01ms; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; /* ⚠️ LE DÉLAI AUSSI, et il manquait — ajouté le 18/08/2026. Neutraliser la seule DURÉE ne suffit pas dès qu'une animation est échelonnée : chaque élément s'exécutait instantanément, mais toujours après son délai, et le contenu apparaissait donc encore en cascade. C'est exactement ce que ce bloc dit vouloir éviter. Le premier cas est le décalage des cartes de connecteurs (sections/_connecteurs.scss). */ animation-delay: 0s !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= Composants réutilisables : boutons, eyebrows, en-tête. ========================================================================= */ /* ---------- Boutons ---------- Cotes reprises de la maquette : 36px de haut, 26px de padding latéral, Figtree SemiBold 15.5px, rayon 9px. C'est ce rapport — bas et large — qui donne leur allure allongée. Le gabarit visuel reste à 36px, y compris sur mobile. La zone cliquable est étendue à 44px par un pseudo-élément (voir plus bas) : la cible est confortable au pouce sans que le bouton grossisse à l'écran. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 2.25rem; padding: 0 1.625rem; font-family: var(--font-sans); font-size: var(--fs-btn); font-weight: var(--fw-semibold); line-height: 1.5; text-align: center; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-md); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } /* Coin adouci — l'équivalent CSS du « corner smoothing » de Figma. Un border-radius classique dessine un arc de cercle ; Figma dessine une superellipse, dont la courbure démarre plus tôt et se raccorde au côté sans cassure. C'est ce raccord qui donne l'allure « squircle ». Supporté par Chrome et Edge aujourd'hui. Ailleurs, le bouton garde le coin arrondi de 9px de la maquette — la dégradation est invisible pour qui ne compare pas les deux côte à côte. ⚠️ NE PAS PASSER LES BOUTONS AUX COINS CARRÉS. Essayé le 18/08/2026 pour les aligner sur les panneaux (`.cadre`, border-radius: 0), et REFUSÉ par Hugo le jour même : le squircle est voulu. Ce bloc s'applique après `.btn` et l'écrase, donc quiconque met `border-radius: 0` plus haut sans toucher ici n'obtiendra un coin carré que sur Firefox et Safari — un écart entre navigateurs, jamais le changement visé. */ @supports (corner-shape: squircle) { .btn { border-radius: var(--radius-btn-squircle); corner-shape: squircle; } } /* Zone tactile de 44px, centrée sur le bouton et invisible. ⚠️ CE PSEUDO EST ÉCRASÉ PAR `.lien-couvrant`, juste en dessous. Qui le modifie doit y aller voir : c'est le seul endroit du site qui reprend ce `::after` à son compte. */ .btn::after { content: ""; position: absolute; inset: 50% 0 auto; height: 2.75rem; transform: translateY(-50%); } /* ---------- Le clic pleine carte ---------- Le couple `.carte-cliquable` (sur la carte) + `.lien-couvrant` (sur son CTA) étend la zone de clic du bouton à toute la carte. Demandé par Céline le 28/08/2026 — que le clic ouvre le cas « n'importe où sur l'encart » — d'abord pour /cas-clients/, puis pour la grille d'articles du blog le lendemain de la même demande. Deux hôtes : le couple est donc ici et non dans l'une des deux feuilles de section, comme `carte-etiquettes` et `.trio` avant lui. ⚠️ UN SEUL LIEN DANS LE DOM, ET C'EST TOUT L'ENJEU. La règle 4 de MAQUETTE.md a fait perdre leur clic pleine carte à ces deux grilles le 21/08/2026, quand leur CTA de pied est devenu un bouton : ce qu'elle bannit, ce sont DEUX liens vers la même page dans une même carte — c'est exactement le défaut que la grille du blog portait alors. On ne les remet pas. Le procédé est celui de la « rangée qui EST le lien » (`.edition__lien`, l'archive de la newsletter) appliqué à une carte : le lien reste unique, c'est sa SURFACE qui s'étend. Aucun arrêt de tabulation n'est ajouté, et le focus continue de tomber sur le bouton, qui porte son anneau. ⚠️ LE CALQUE ÉCRASE DÉLIBÉRÉMENT `.btn::after`, la zone tactile de 44px. Sans perte : il la remplace par une surface strictement plus grande. Le sélecteur est à (0,2,1) contre (0,1,1) — il gagne donc par la SPÉCIFICITÉ et non par l'ordre des règles, qui suffirait ici mais ne se verrait pas. C'est la leçon du piège de `carte-etiquettes` : quand on écrase la primitive d'un atome partagé, on l'écrase explicitement. ⚠️ D'OÙ `position: static` SUR LE LIEN. `.btn` est `position: relative`, donc son pseudo se résoudrait sur le bouton et ne couvrirait que lui. Le remettre en flux fait porter le calque par le premier ancêtre positionné, que `.carte-cliquable` garantit être la CARTE. Sans cette classe-là, l'ancêtre suivant est la section (`.cas-clients` et `.grille-articles` sont toutes deux `position: relative`) : le calque couvrirait la section entière et la première carte volerait le clic de toutes les autres. Les deux classes vont ensemble ; l'une sans l'autre ne fait rien de bon. ⚠️ `z-index: 1` N'EST PAS DÉCORATIF. Un élément positionné se peint au-dessus du contenu en flux, donc le calque passe déjà devant le texte et le cadre en attente — mais pas devant un descendant qui se positionnerait ou porterait un `transform`, lequel se peindrait par-dessus et avalerait le clic sans qu'aucun message ne le signale. C'est le piège documenté au long dans `.item__pastille` et retrouvé sur `orbite` : le symptôme ne désigne jamais la cause. Le rang le ferme d'avance. ⚠️ ET IL INTERDIT TOUT AUTRE ÉLÉMENT INTERACTIF DANS LA CARTE : un second lien y serait recouvert, donc inatteignable à la souris, en silence. C'est la condition à vérifier avant d'ajouter quoi que ce soit dedans. Ce que ça coûte, et c'est le prix connu du procédé : le texte de la carte n'est plus sélectionnable. Accepté comme sur les rangées de la newsletter — une carte de cas client ou d'article est une porte d'entrée, pas un texte qu'on cite. */ .carte-cliquable { position: relative; } .carte-cliquable .lien-couvrant { position: static; } .carte-cliquable .lien-couvrant::after { content: ""; position: absolute; inset: 0; z-index: 1; /* Les deux cotes de `.btn::after` sont remises à leur valeur initiale : sur `inset: 0`, une hauteur fixe et un décalage vertical ne veulent plus rien dire. */ height: auto; transform: none; } /* ⚠️ ET L'ENFONCEMENT DE `.btn:active` EST ANNULÉ SUR CE LIEN. C'EST LA LIGNE SANS LAQUELLE RIEN NE MARCHE, et le défaut qu'elle corrige mérite d'être connu : il a été livré le 28/08/2026 et rapporté le lendemain — « je vois bien le hover et en bas à gauche la détection du lien mais quand je clique, le lien ne s'ouvre pas ». LE MÉCANISME. `.btn:active` pose `transform: translateY(1px)`. Or **tout `transform` non nul fait de l'élément le BLOC CONTENEUR de ses descendants absolus**, son propre `::after` compris. Au moment où le bouton de la souris s'enfonce, le calque cesse donc de se résoudre sur la carte et se replie instantanément sur le BOUTON : le `mousedown` est parti sur le lien, le `mouseup` tombe sur le cadre visuel, et **aucun clic n'est jamais constitué**. Le survol, lui, n'engage pas `:active` : l'URL s'affiche dans la barre d'état, tout a l'air normal, et le lien ne s'ouvre pas. ⚠️ LE SYMPTÔME NE DÉSIGNE PAS LA CAUSE, une fois de plus — et il envoie droit vers le cache du navigateur ou vers un `preventDefault()` qui n'existe pas. Le test qui tranche en trois secondes, dans la console : relever `document.elementFromPoint(x, y)` au repos, puis avec `transform` posé à la main sur le lien. Si la cible change, c'est ça. ⚠️ ET AUCUN SUBSTITUT N'EST POSÉ : `translate`, `rotate`, `scale` et `perspective` créent EXACTEMENT le même bloc conteneur que `transform`. Un enfoncement de remplacement écrit avec l'un d'eux rouvrirait le défaut à l'identique. Si un retour d'appui est demandé un jour, il doit passer par une propriété qui ne crée pas de bloc conteneur — la couleur de fond, par exemple. Ce qu'on perd est mince et la carte le rend au centuple : l'enfoncement de 1px était calibré pour une cible de la taille d'un bouton, alors que c'est toute la carte qui répond ici, avec sa teinte, son filet, son soulèvement et son zoom. */ .carte-cliquable .lien-couvrant:active { transform: none; } .btn:active { transform: translateY(1px); } /* CTA principal : bleu de marque au repos, bleu d'action au survol. --------------------------------------------------------------------- ⚠️ L'APLAT PASSE PAR SES PROPRES VARIABLES, ET C'EST LE SEUL ENDROIT DU SITE OÙ DU BLANC EST POSÉ SUR --c-blue. Partout ailleurs --c-blue est de l'ENCRE (`.forme--bleu`, `.ton--bleu`, le survol de `.btn--ghost`) ou une teinte de marqueur : sa lisibilité s'y mesure contre le crème, pas contre du blanc. Ici c'est un FOND, avec un libellé blanc dessus — donc la contrainte de contraste est inverse, et elle est propre à ce bouton. `.ton-page--*` peut donc assombrir CE fond sans toucher à l'encre de la page : c'est ce que fait `.ton-page--plateforme`, dont le rose est parfait en encre (2,82 sur le crème, comme le vert du dictionnaire) et illisible en aplat sous du blanc (2,85). Hugo l'a tranché ainsi le 19/08/2026 : « on ne met le rose foncé que si on écrit du texte sur le rose ». ⚠️ NE PAS REVENIR À `var(--c-blue)` EN DUR ICI. C'était le cas avant, et la seule façon d'assombrir le bouton était alors de réaffecter --c-blue pour toute la page — ce qui fonçait du même coup les formes de marque et les mises en valeur `((bleu))`, qui n'ont aucune raison de l'être. ⚠️ LA VALEUR PAR DÉFAUT EST DANS LE `var()`, PAS DÉCLARÉE SUR `.btn--primary`. Ce n'est pas un raccourci d'écriture : une propriété personnalisée posée SUR l'élément l'emporte sur la même propriété héritée d'un ancêtre. Un `--btn-primary-bg: var(--c-blue)` écrit ici masquerait donc celui que `.ton-page--*` pose sur `
`, et le bouton resterait bleu sans que rien ne le signale. Le repli en second argument, lui, ne s'applique QUE si aucun ancêtre n'a défini la variable. */ .btn--primary { background-color: var(--btn-primary-bg, var(--c-blue)); border-color: var(--btn-primary-bg, var(--c-blue)); color: var(--c-white); } .btn--primary:hover { background-color: var(--btn-primary-bg-hover, var(--c-blue-action)); border-color: var(--btn-primary-bg-hover, var(--c-blue-action)); } /* CTA de navigation : fond de la section, contour de la couleur du texte. `currentColor` fait suivre le filet automatiquement — sur une section sombre où le texte passe en blanc, le contour passe en blanc aussi. */ .btn--secondary { /* Survol par défaut — contexte clair : aplat fluo, filet d'origine conservé. C'est le filet sombre qui redessine le bouton par-dessus le fluo, et c'est ce qui fait tenir la variante. */ --btn-hover-bg: var(--c-fluo); --btn-hover-border: currentColor; --btn-hover-color: var(--c-text-main); background-color: var(--section-bg); border-width: 2px; border-color: currentColor; color: var(--text-strong); } /* Contexte sombre : l'aplat fluo écraserait la section. On passe à un voile de 25% et c'est le filet qui prend le fluo. Le texte reste blanc. */ .on-dark .btn--secondary { --btn-hover-bg: color-mix(in srgb, var(--c-fluo) 25%, var(--section-bg)); --btn-hover-border: var(--c-fluo); --btn-hover-color: var(--text-strong); } .btn--secondary:hover { background-color: var(--btn-hover-bg); border-color: var(--btn-hover-border); color: var(--btn-hover-color); } /* ---------- Le bouton fluo ---------- ⚠️ IL AVAIT ÉTÉ RETIRÉ LE 13/08/2026, faute d'appelant : le seul bouton fluo du site était alors celui du bloc « appel », qui redéfinit ses couleurs lui-même. Il revient le 29/09/2026, demandé par Xavier pour le CTA du hero de /tarifs/ — et cette fois il a sa place dans les primitives plutôt que dans une feuille de section, parce qu'il y a maintenant TROIS boutons fluo sur le site : celui-ci, `.appel__cta` et le bouton d'envoi de `partials/inscription.njk`. ⚠️ LES DEUX AUTRES PORTENT ENCORE LEUR PROPRE COPIE de ce couple, chacun dans sa feuille. C'est le troisième exemplaire, donc le signal de les faire passer ici — pas fait aujourd'hui pour ne pas toucher `appel`, qui ferme presque toutes les pages du site, au milieu d'une revue. Les valeurs sont identiques au jeton près : si l'une des trois bouge, les trois doivent bouger. L'APLAT EST `--c-starship` ET NON `--c-fluo`, et la distinction est dans les jetons : `--c-fluo` (#d1ff00) est l'accent — encre, trames, formes, pastille de `.badge-section` — tandis que `--c-starship` (#d4f24a) est « l'accent fluo adouci », celui que le site pose en grand aplat sous un libellé. C'est lui que portent les deux boutons existants. ⚠️ LE SURVOL NE REPREND PAS CELUI DE `.appel__cta`, qui passe au BLANC : ce geste est calibré sur le bleu nuit, où le blanc est une vraie montée. Ici le bouton est posé sur le crème, où blanc sur crème ne se distingue presque pas (#ffffff contre #f9f9f5) — le bouton paraîtrait s'éteindre. Il monte donc vers `--c-fluo`, l'accent à pleine saturation : aucune valeur nouvelle, et la montée se lit sur les deux fonds. L'encre ne bouge pas, elle gagne même du contraste. `:hover` nu et non `mix.hover-hover`, comme `.btn--secondary` et `.btn--ghost` juste au-dessus : c'est la convention de la famille `.btn` dans ce fichier, et un survol qui reste collé après un appui tactile est ici sans conséquence — les deux états sont fluo. */ .btn--fluo { color: var(--c-blue-zodiac); background-color: var(--c-starship); border-color: var(--c-starship); } .btn--fluo:hover { background-color: var(--c-fluo); border-color: var(--c-fluo); } .btn--ghost { color: var(--text-strong); padding-inline: var(--sp-3); } .btn--ghost:hover { color: var(--c-blue); } /* La flèche des boutons « Découvrir » avance légèrement au survol. */ .btn__arrow { transition: transform var(--dur-fast) var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(3px); } /* ---------- Groupe de boutons ---------- Deux CTA qui vont ensemble. En ligne tant qu'il y a la place, empilés ensuite — et une fois empilés ils prennent tous la largeur du plus large. Deux boutons superposés de largeurs différentes donnent une arête irrégulière qui se voit immédiatement. `max-content` sur la colonne de grille la dimensionne sur le plus large des enfants ; `min(100%, …)` empêche le débordement sur écran étroit. */ .btn-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); } /* ⚠️ LE SÉLECTEUR EST DÉDOUBLÉ, ET C'EST STRUCTUREL. Un bloc hôte qui redéclare `display` sur le même élément — `.hero-page__actions` le fait, pour poser sa propre gouttière — est à spécificité égale (0,1,0) et écrit dans un partial `@use` APRÈS celui-ci : il reprenait donc le `display: flex`, la grille ne s'appliquait pas, et les deux boutons empilés gardaient chacun sa largeur. Une media query ne change pas la spécificité, donc rien ne le signalait — défaut constaté sur le hero de /produit/ le 27/08/2026. Le sélecteur composé passe à (0,2,0) et l'emporte où que la règle hôte soit écrite ; c'est le même remède que `.archi__fiche-valeur--ok` dans sections/_hero-page.scss. La règle reste entièrement dans le `mq-down` : au-dessus de `xs` la mise en ligne du desktop n'est pas touchée. */ @media (max-width: 30rem) { .btn-group.btn-group { display: grid; grid-template-columns: min(100%, max-content); justify-content: center; } } /* ---------- Eyebrow ---------- Le petit label au-dessus des titres. Deux déclinaisons dans la maquette : en mono capitales (labels de section) et en sans (accroche du hero). */ .eyebrow { display: block; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-regular); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); } /* Accroche du hero : Figtree Medium 20px, bleu profond. */ .eyebrow--sans { font-family: var(--font-sans); font-size: var(--fs-eyebrow-lg); font-weight: var(--fw-medium); line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--c-blue-dark); } /* ---------- Mise en valeur au fil du texte ---------- Posées par les marques `**gras**` et `((couleur))` des fichiers de contenu, converties par lib/typographie.js. Voir CONTENU.md pour l'usage. Le gras passe par , dont la graisse est réglée ici plutôt que laissée au navigateur : celui-ci applique 700, et Inter y devient trop lourd au milieu d'un texte courant. 600 suffit à détacher le mot. */ strong { font-weight: var(--fw-semibold); } /* `.ton` ne porte aucune couleur : c'est son modificateur qui colore. Un ton mal orthographié ne peut donc pas rendre un texte invisible — il laisse d'ailleurs ses marques en clair à l'écran, voir lib/typographie.js. */ /* Suit le fond : bleu sur clair, fluo sur sombre — c'est --text-accent qui bascule, dans le bloc `.on-dark` de _tokens.scss. */ .ton--accent { color: var(--text-accent); } .ton--bleu { color: var(--c-blue); } .ton--fluo { color: var(--c-fluo); } /* ---------- Lien au fil du texte ---------- La marque `[[texte|/chemin/]]` de lib/typographie.js. C'est le cas que la règle 4 de MAQUETTE.md laisse en lien plutôt qu'en bouton : une sortie posée DANS un corps de texte, pas un CTA au pied d'un panneau. Il suit le fond comme `.ton--accent` — bleu sur clair, fluo sur sombre — mais il porte son SOULIGNEMENT EN PERMANENCE, et pas seulement au survol : les mêmes phrases portent des mises en valeur `((…))` de cette teinte exacte, donc la couleur seule ne dirait pas ce qui se clique. Le survol épaissit le trait au lieu de le faire apparaître. */ .lien-texte { color: var(--text-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .lien-texte:hover { text-decoration-thickness: 2px; } /* ---------- Pastille ---------- La pilule en Recoleta qui coiffe un bloc : les trois badges de la séquence sombre, les pastilles de module de « Au cœur de Biron », l'intitulé des témoignages. Trois écritures identiques au détail près, réunies ici. Ce qui reste à la charge de l'appelant, parce que ça change à chaque fois : la couleur du fond et du texte, le corps, et les marges. */ .pastille { display: inline-block; margin: 0; padding: 0.625rem 1.5rem; font-family: var(--font-serif); font-weight: var(--fw-semibold); line-height: 1.18; letter-spacing: -0.02em; border-radius: var(--radius-full); } /* ---------- Pastille en chip teintée ---------- Reprise de la maquette (Figma 182:920) : le ton à 30 %, un filet du même ton, le libellé en Chivo Mono dans ce ton plein. Employée par les quatre modules de « Au cœur de Biron » et par les trois panneaux de la séquence sombre. L'intitulé des témoignages garde l'aplat plein en Recoleta. L'appelant fournit UNE seule chose, `--pastille-ton`. S'il l'oublie, les trois couleurs deviennent invalides et la chip se rend en noir sur transparent : la panne se voit, ce qui est le bon comportement. Le corps est plus petit que celui de la pastille pleine, et il le faut : à corps égal une mono occupe un tiers de largeur en plus, et la chip se mettait à concurrencer le titre de sa section. Le rembourrage suit dans la même proportion (7/18 contre 10/24) — gardé tel quel, il aurait donné une pilule bouffie autour d'un texte réduit. ⚠️ Le contraste dépend entièrement du fond, mesuré : sur le bleu nuit des sections sombres, le fluo sur son propre ton à 30 % donne 5,06:1, largement au-delà du seuil. Sur le blanc des blocs de « Au cœur de Biron », les tons de pilier tombent entre 1,70:1 et 2,82:1, sous le seuil de 3:1 — voir la note de sections/_coeur.scss, qui donne la retouche d'une ligne. */ .pastille--chip { padding: 0.4375rem 1.125rem; /* 7px 18px */ font-family: var(--font-mono); font-size: clamp(1rem, 0.86rem + 0.43vw, 1.375rem); /* 16 → 22px */ color: var(--pastille-ton); /* Alpha et non mélange avec du blanc : la chip garde son ton juste quel que soit le fond du bloc qui la porte — c'est ce qui lui permet de servir sur le blanc comme sur le bleu nuit. */ background-color: color-mix(in srgb, var(--pastille-ton) 30%, transparent); border: 1px solid var(--pastille-ton); } /* ---------- Le fil d'Ariane ---------- Le chemin qui situe une page terminale — partials/filAriane.njk. La grammaire des libellés de service du site : chasse fixe, capitales, interlettrage élargi, encre éteinte. La même que `.eyebrow`, et l'atome ne déclare que son APPARENCE — le bloc hôte garde le placement (ses marges). ⚠️ LES CHEVRONS SONT DES PSEUDO-ÉLÉMENTS, et il le faut : écrits dans le DOM ils seraient annoncés à la voix, alors que la structure de la liste dit déjà le chemin. Le raisonnement complet est en tête du partial. ⚠️ L'ENCRE VIENT DES RÔLES, jamais d'une couleur en dur : le fil sert aujourd'hui sur une bande SOMBRE (le hero d'étude de cas), où `.on-dark` passe --text-muted au casper — 6,4 sur le bleu nuit. Sur du crème il prendra le gris du site sans qu'on écrive une ligne. */ .fil-ariane { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); } .fil-ariane__liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; padding: 0; list-style: none; } .fil-ariane__entree { display: flex; align-items: center; gap: var(--sp-3); } .fil-ariane__entree + .fil-ariane__entree::before { content: "›"; /* L'interlettrage élargi ajoute une espace APRÈS le chevron, qui le pousse vers le libellé suivant. On la reprend ici plutôt qu'en annulant le letter-spacing, qui fait partie de la grammaire des capitales du site. */ margin-inline-end: calc(var(--ls-wide) * -1); } /* L'entrée courante prend l'accent — dans la maquette, « Hardloop » est le seul libellé coloré du fil. Sur la bande sombre, `.on-dark` a déjà mis ce rôle au fluo ; une couleur en dur serait fausse sur un fond clair. */ .fil-ariane__entree [aria-current] { color: var(--text-accent); } /* Le lien hérite l'encre éteinte du fil et ne se souligne qu'au survol : souligné en permanence, un chemin de trois entrées en capitales devient un tapis de traits. */ .fil-ariane__lien { color: inherit; text-decoration: none; } .fil-ariane__lien:hover, .fil-ariane__lien:focus-visible { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.25em; } /* ---------- Le badge de section ---------- La pastille FLUO à encre sombre qui annonce une section : « CAS MIS EN AVANT », « LE DÉFI », « LES RÉSULTATS ». ⚠️ EXTRAITE DE `sections/_cas-clients.scss` LE 21/08/2026, le jour où `texte-module` a eu besoin du même objet pour les six libellés de bande de /cas-clients/hardloop/ — demande d'Hugo : « on les garde et on les met dans des badges ». Recopier l'aplat, l'encre et les cinq déclarations de chasse aurait laissé deux jeux de valeurs à tenir accordés, sans que rien ne signale leur divergence. C'est la règle du site : l'atome ici, le placement dans le bloc hôte. ⚠️ UN APLAT FLUO À ENCRE SOMBRE, et c'est la troisième sortie de la règle 16 de MAQUETTE.md : le fluo n'est pas une teinte de pilier et porte --c-text-main à 15,3, donc l'aplat y est légitime sans recalcul par page. Mêmes valeurs que `.item--pastille .item__surtitre` et `.etapes--solo .etape__numero`, aux mêmes fins. Ces deux-là restent chez elles : ce sont des rangs d'un ATOME, pas des libellés de section — les réunir aurait demandé de leur retirer leur placement, qui n'est pas le même. ⚠️ IL PORTE SON PROPRE COUPLE FOND + ENCRE, écrit en clair, et il ne le tient d'aucun contexte : c'est ce qui le rend juste dans une boîte sombre, où --text-strong vaudrait le blanc — illisible sur le fluo. `width: fit-content` et non `align-self: start` : le badge sert dans une pile flex, où `justify-self` ne fait rien, comme dans une grille. La largeur intrinsèque vaut des deux côtés. */ .badge-section { width: fit-content; margin: 0; padding: 0.25rem var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-text-main); background-color: var(--c-fluo); border-radius: var(--radius-full); } /* ---------- La barre de filtres ---------- Une rangée de pilules qui restreint une liste — les secteurs de /cas-clients/ et les catégories du blog. Le moteur est src/assets/js/filtres.js. ⚠️ EXTRAITE DE `_cas-clients.scss` LE 21/08/2026, le jour où la grille d'articles du blog a eu besoin de la même barre. Recopier la pilule, son aplat d'actif et sa règle de masquage aurait laissé deux jeux de valeurs à tenir accordés, sans que rien ne signale leur divergence — c'est la raison qui avait déjà fait sortir `.carte-etiquettes`, `.quinconce` et `.badge-section` ici. ⚠️ LA RANGÉE N'EXISTE QU'À L'ÉTAT ENRICHI. Tant que filtres.js n'a pas posé `data-filtres-actif` sur la section, elle n'est pas rendue du tout : sans JS, personne ne voit un bouton qui ne fait rien. C'est le même mécanisme que `[data-onglets-actif]` et `[data-etapes-actif]` — la classe d'état enrichi ne style QUE l'état enrichi. ⚠️ ET C'EST L'INVERSE DU RÉFLEXE : on ne masque pas les entrées en CSS pour les révéler ensuite, on masque le CONTRÔLE. Une règle qui cacherait les cartes en laisserait la plupart invisibles le jour où le script tombe. ⚠️ CE NE SONT PAS DES `.btn` DU SITE, contrairement aux CTA des cartes : un `.btn` engage une action ou une navigation, un filtre ne fait que restreindre une liste et porte un état (`aria-pressed`). Les rendre en boutons pleins mettrait une rangée d'aplats bleus au-dessus d'une autre, et l'actif ne se distinguerait plus des autres. Le placement — où la rangée se pose dans son en-tête — reste au bloc hôte. */ .filtres { display: none; } [data-filtres-actif] .filtres { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .filtre { padding: 0.5rem 1.125rem; font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.2; color: var(--text-strong); background-color: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } /* ⚠️ APLAT QUI PORTE DU BLANC : IL LIT --btn-primary-bg, JAMAIS --c-blue EN DIRECT — règle 10 de MAQUETTE.md. Le défaut est dans le repli du `var()` et non dans une déclaration à part : une page pilier redéfinit --btn-primary-bg sur `
`, et une propriété posée ici battrait la valeur héritée. */ /* `aria-selected` : la même pastille sert d'ONGLET sur /irritants/ (01/10/2026), où elle bascule un panneau au lieu de filtrer une liste. */ .filtre[aria-pressed=true], .filtre[aria-selected=true] { color: var(--c-white); background-color: var(--btn-primary-bg, var(--c-blue)); border-color: transparent; } @media (hover: hover) { .filtre:not([aria-pressed=true]):not([aria-selected=true]):hover { color: var(--text-accent); border-color: var(--c-blue); } } /* ---------- L'inscription à la newsletter ---------- Le champ e-mail, son bouton et le lien de repli — partials/inscription.njk. Deux hôtes : l'encart de la une du blog et le bloc `newsletter` qui la ferme. ⚠️ PREMIER ET SEUL FORMULAIRE DU SITE À CE JOUR. Rien dans _base.scss ne prépare un champ de saisie : tout ce qu'il faut est ici, et il n'y a donc aucune règle générale sur `input` à aller chercher ailleurs. ⚠️ LES VALEURS SONT ÉCRITES EN RÔLES, ET LE 21/08/2026 A PROUVÉ QUE ÇA SERVAIT. Le voile du champ est un `color-mix` vers `currentColor` et non vers le blanc : sur du bleu nuit il donne le voile blanc de la maquette (7 %), sur un fond clair il donne un voile sombre de même force. Le filet est `--border-subtle`, le texte `--text-strong`, l'invite `--text-muted`, et le bouton d'envoi est fluo à encre sombre — qui tient sur les deux fonds. Les trois premiers emplois étaient sur fond sombre ; le quatrième, l'ouverture de /newsletter/, est sur fond CLAIR depuis qu'Hugo a retiré le bleu nuit de cette bande. Ce formulaire n'a pas bougé d'une ligne pour ça. Une valeur blanche écrite en dur aurait rendu le champ invisible ce jour-là. */ .inscription { display: grid; gap: var(--sp-3); width: 100%; } /* Tout empilé — l'encart étroit de la une. */ .inscription--empile { grid-template-columns: minmax(0, 1fr); } /* Tout sur UNE rangée — le pré-pied de page, large et centré : le champ, le bouton d'envoi et, quand il existe, le second CTA. ⚠️ C'EST UNE RANGÉE FLEX QUI PASSE À LA LIGNE, ET NON UNE GRILLE, DEPUIS LE 21/08/2026. Demande d'Hugo : « mettre les deux boutons l'un à côté de l'autre plutôt que l'un au-dessus de l'autre ». Avec trois objets sur la rangée, une grille aurait demandé un jeu de pistes par largeur — trois colonnes en large, deux en moyen, une en étroit, soit trois règles à tenir accordées. Le `wrap` fait les trois tout seul, dans cet ordre exact : le second CTA descend d'abord, le champ prend la ligne ensuite. Aucun point de rupture publié. ⚠️ ET C'EST `justify-content` QUI CENTRE, PAS `margin-inline: auto`. Les objets sont dimensionnés sur leur contenu, donc la rangée est plus étroite que sa boîte : c'est la distribution DANS la rangée qu'il faut centrer, pas la rangée dans son parent. Demande d'Hugo du même jour (« centrer le formulaire ») : elle était déjà centrée au sens strict, mais étirée en parts égales, et rien ne se lisait comme un objet posé au milieu. Le piège est le même que pour la rangée de chiffres de `hero-cas` — baisser une largeur ne rapproche rien tant qu'un `1fr` étire pour remplir. ⚠️ LA MESURE N'EST PLUS LES 620 px DE LA MAQUETTE. La planche ne dessine que deux objets sur la rangée ; à trois, 620 px renverraient le second CTA à la ligne — c'est-à-dire l'empilement qu'on vient de retirer. 50rem laisse la place aux trois avec de la marge pour un libellé plus long. */ .inscription--rangee { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4); max-width: 50rem; /* 800px — voir l'avertissement ci-dessus */ margin-inline: auto; } /* Le champ est le seul objet élastique de la rangée : les boutons gardent leur chasse (`.btn` est `nowrap` par principe). La base de 18rem est ce qui décide du moment où la rangée passe à la ligne. */ .inscription--rangee .inscription__saisie { flex: 1 1 18rem; } /* ⚠️ `min-width: 0` EST NÉCESSAIRE, ET IL NE SE VOIT QUE DANS UNE COLONNE ÉTROITE. Un `` porte une taille intrinsèque (l'attribut `size`, 20 caractères par défaut) qui lui sert de largeur minimale automatique quand il est enfant d'une grille ou d'un flex. Sans cette ligne, le champ refuse de descendre sous une vingtaine de caractères et pousse la piste — l'encart de la une, borné à 15 %, déborderait. */ /* Prénom + Nom, ajoutés le 23/09/2026 pour suivre le formulaire Brevo. Une rangée à part entière, toujours sur sa propre ligne au-dessus du champ e-mail — `flex: 1 1 100%` fait ce travail dans `.inscription--rangee` (même principe que `.inscription__consentement` plus bas) et ne gêne pas dans `.inscription--empile`, où le parent est une grille et ignore `flex`. */ .inscription__identite { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: var(--sp-3); } .inscription__champ { flex: 1 1 10rem; min-width: 0; } .inscription__saisie { width: 100%; min-width: 0; min-height: 2.8125rem; /* 45px — la cote de la maquette */ padding: 0 var(--sp-4); font-family: var(--font-sans); font-size: var(--fs-btn); color: var(--text-strong); background-color: color-mix(in srgb, currentColor 7%, transparent); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .inscription__saisie::placeholder { color: var(--text-muted); /* Firefox baisse l'opacité des placeholders : sans ça, la couleur mesurée n'est pas celle qui s'affiche. */ opacity: 1; } .inscription__saisie:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; border-color: var(--text-accent); } /* Le bouton fluo à encre sombre. Ce sont les deux seuls aplats fluo à libellé du site, avec `.appel__cta`, et ils partagent leurs valeurs — la troisième sortie de la règle 16 de MAQUETTE.md : le fluo n'est pas une teinte de pilier et porte --c-blue-zodiac à 14,4, donc l'aplat est légitime sans recalcul par page. */ .inscription__envoi { min-height: 2.8125rem; color: var(--c-blue-zodiac); background-color: var(--c-starship); border-color: var(--c-starship); } @media (hover: hover) { .inscription__envoi:hover { background-color: var(--c-white); border-color: var(--c-white); } } /* Le second CTA sous le formulaire — « Voir les éditions ». C'est un `.btn--secondary` depuis le 21/08/2026 et il ne déclare RIEN de sa forme : le bouton du site s'habille tout seul, y compris sur fond sombre. Cette règle ne pose que sa place, comme toute feuille hôte. */ /* ⚠️ AUCUNE MARGE PROPRE : le second CTA est maintenant un objet de la rangée (ou de la pile), et c'est la gouttière du conteneur qui l'espace. Une marge en plus s'ajouterait à elle, et se verrait doublement le jour où la rangée passe à la ligne. */ .inscription__pied { margin: 0; } /* Sauf empilé : là, la gouttière de la pile (--sp-3) est calée sur l'écart entre le champ et son bouton, qui vont ensemble. Le second CTA, lui, est un autre objet et demande un cran de plus. */ .inscription--empile .inscription__pied { margin-block-start: var(--sp-3); } /* Le champ piège anti-robots de Brevo (`email_address_check`) — voir l'avertissement en tête de partials/inscription.njk. Hors-écran plutôt que `display: none` : un robot simple qui ignore les éléments masqués par CSS le remplirait quand même, ce que Brevo utilise pour écarter l'envoi. */ .inscription__piege { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* La case de consentement RGPD exigée par Brevo (champ `OPT_IN`) — voir le même avertissement. Aucune planche ne la dessine, donc son habillage reprend les rôles du formulaire plutôt qu'une forme propre : texte atténué, lien souligné comme ailleurs sur le site. */ .inscription__consentement { /* `flex: 1 1 100%` et non `flex-basis` seul : un `max-width` sur cet objet aurait bridé la TAILLE HYPOTHÉTIQUE que l'algorithme de retour à la ligne utilise pour décider qui tient sur la ligne — avec un plafond, le bouton d'envoi revenait se glisser à côté de la case au lieu de descendre seul. */ flex: 1 1 100%; margin: 0; font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--text-muted); text-align: left; } .inscription__consentement label { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; } .inscription__consentement input[type=checkbox] { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-block-start: 0.125rem; accent-color: var(--text-accent); } .inscription__consentement a { color: inherit; text-decoration: underline; } /* ---------- Aperçu en attente ---------- Le cadre gris qui tient la place d'une capture pas encore livrée : le hero, « approche », les quatre visuels de « Au cœur de Biron ». ⚠️ Le jour où les vraies captures arrivent, ce composant disparaît — avec les classes `*__placeholder` des sections qui l'accompagnent. Ça a commencé le 25/08/2026 : `/produit/` a reçu ses cinq illustrations, et `hero-page` comme `texte-panneau` savent désormais rendre une image à la place du cadre (champ `image`, dimensions lues dans le fichier — voir lib/image.js). Le cadre reste le comportement par défaut partout où rien n'est déclaré. La mise en page est une grille à UNE colonne et non `place-content: center`. Ce dernier dimensionne le contenu en `max-content` : une légende longue débordait alors du cadre au lieu de s'enrouler. Le défaut avait été corrigé pour le seul visuel où il se voyait — il était présent sur les trois. */ .apercu { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: var(--sp-2); padding-inline: var(--sp-4); overflow: hidden; background: linear-gradient(180deg, var(--c-white), var(--c-blue-50)); border: 1px solid var(--border-subtle); border-radius: var(--radius-cadre); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: center; /* ⚠️ IL REMET LES DEUX RÔLES D'ENCRE EN CONTEXTE CLAIR, ET IL LE DOIT. Son fond est un dégradé BLANC écrit en clair : ce cadre est donc une carte claire quel que soit le fond sous lui. Posé dans un `.on-dark` — c'est le cas depuis le 19/08/2026, dans la boîte violette du connecteur IA — il héritait d'une légende blanche sur son propre blanc et d'un filet blanc translucide : invisibles tous les deux, et sans le moindre signal. C'est la règle 12 de MAQUETTE.md, branche « plusieurs encres ». Les deux valeurs sont celles que `:root` donne à ces rôles. Le doublon est assumé pour --border-subtle : sa valeur claire est une rgba littérale, il n'y a pas de jeton brut derrière elle. Les deux lignes doivent rester en phase avec `:root` dans _tokens.scss. */ --text-muted: var(--c-fiord); --border-subtle: rgba(44, 42, 46, 0.12); } /* Le visuel réel d'un article (`visuel.image`), quand il existe — il remplace le texte d'attente au-dessus, sans changer le cadre qui le porte : même ratio, même arrondi, posés par la carte hôte (`.carte-article__apercu`, `.une__apercu`). */ .apercu__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- Le cadre : LE panneau fermé du site ---------- RÈGLE, tranchée le 17/08/2026 : dès qu'un bloc est un panneau fermé, il a TOUJOURS les quatre mêmes caractères — coins CARRÉS border-radius: 0 filet BLEU éclairci var(--filet-panneau) fond BLANC var(--c-white) ← et non le crème de la page titre DEDANS dans sa propre bande, séparée d'un filet Elle vit ici, en primitive, et non recopiée dans chaque feuille de bloc. C'est ce qui a manqué : `rangees-illustrees` et `connecteurs` avaient le filet mais pas de fond, et le crème de la section les traversait. --------------------------------------------------------------------------- L'EXCEPTION AU « TITRE DEDANS », précisée le 18/08/2026. Le titre dans sa bande sert à donner au cadre sa charge : sans lui, un cadre n'est qu'un rectangle posé là, sans dire ce qu'il contient. Mais quand le cadre enferme un MODULE INTERACTIF — une liste d'onglets, un tableau qu'on manipule — le module porte déjà cette charge tout seul : il s'annonce par sa forme et par le fait qu'il répond. Le titre peut alors sortir et s'énoncer sur le crème, comme celui d'une section ordinaire. Les trois autres caractères ne bougent pas, eux : coins carrés, filet bleu, fond blanc restent obligatoires dans tous les cas. Le seul cas à ce jour est `connecteurs` (« Plus de 50 connecteurs »), dont le cadre n'encadre que le tablist des compartiments métier. `rangees-illustrees` garde son titre dedans : ses rangées sont du contenu, pas un module. Le nom est `.cadre` et non `.panneau` : ce dernier est déjà pris par les panneaux de la séquence sombre (partials/panneau.njk). Les rembourrages de l'en-tête viennent des jetons PARTAGÉS --pad-panneau-entete-*, les mêmes que « Au cœur de Biron ». */ .cadre { background-color: var(--c-white); border: var(--filet-panneau); border-radius: 0; /* Le cadre est BLANC, la page est crème. Sans cette ligne, un `.btn--secondary` posé dedans se remplit du crème de la page — il prend toujours la couleur de son fond, et son fond ici c'est le cadre. */ --section-bg: var(--c-white); } .cadre__entete { padding: var(--pad-panneau-entete-haut) var(--pad-panneau-entete-inline) var(--pad-panneau-entete-bas); border-bottom: var(--filet-panneau); } /* Le titre d'un cadre ne déclare RIEN de sa police : _base.scss pose déjà serif, gras et la taille du niveau. On ne touche qu'à la marge et à la mesure. */ .cadre__titre { margin: 0; max-width: 24ch; color: var(--c-blue-zodiac); text-wrap: balance; } /* ---------- Le quinconce ---------- Des entrées qui se répondent en alternance, une par rangée, chacune n'occupant qu'une moitié de la largeur. C'est le rythme des « 4 garanties » de la page produit (Figma 185:7105). ⚠️ EXTRAIT DE `_liste-glyphes.scss` LE 20/08/2026, quand le bloc `face-a-face` a eu besoin du même rythme pour sa liste (« les mettre comme les items des garanties »). C'est la raison qui avait déjà fait sortir `.carte-etiquettes` dans ce fichier : recopier la grille, l'alternance et son point de rupture aurait laissé deux jeux de valeurs à tenir accordés, et rien n'aurait signalé leur divergence. ⚠️ C'EST UNE EXCEPTION À « la disposition appartient au bloc hôte », et elle est bornée : ce qui est ici, c'est le RYTHME (grille, alternance, respiration), pas la place du bloc dans la page. Un bloc hôte garde son titre, son fond et ses marges de section. L'alternance est calculée sur le rang par le gabarit, jamais déclarée dans les données : une entrée insérée au milieu ne demande donc pas de reprendre les suivantes. Elle est purement décorative — elle ne porte aucun sens. */ .quinconce { margin: 0; padding: 0; list-style: none; } /* La grille est portée par l'ENTRÉE et non par la liste : le contenu n'occupe qu'une moitié, et c'est l'alternance de la moitié occupée qui donne le rythme. Sur la liste, il aurait fallu deux entrées par rangée. */ .quinconce__entree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* La respiration entre deux entrées, franche : c'est le seul signal de séparation. Posée ENTRE les entrées et non autour de chacune, pour que la première et la dernière ne décollent pas de ce qui les encadre. ⚠️ AUCUN FILET, et c'est la décision du 17/08/2026 : sans cadre autour, un filet qui court sur toute la largeur ne délimite plus rien, il barre la page. ⚠️ LE RYTHME EST UN BOUTON, ET SON DÉFAUT EST DANS LE REPLI DU `var()` — jamais dans une déclaration ici, sans quoi il serait insurchargeable depuis un ancêtre (une propriété personnalisée posée SUR l'élément bat celle qu'il hérite). Le défaut est calé sur du contenu NU : `liste-glyphes` et la liste de `face-a-face` posent des `item()` sans fond, et il faut cette respiration-là pour que deux entrées se détachent. Un hôte dont les entrées portent déjà une CARTE — fond, arête, rembourrage — n'a plus besoin d'autant : c'est la carte qui sépare, et `.quotidien` le resserre de moitié pour cette raison (voir _quotidien.scss). Les deux autres hôtes ne bougent pas d'un pixel, ne déclarant rien. */ .quinconce__entree + .quinconce__entree { margin-block-start: var(--quinconce-rythme, clamp(var(--sp-10), 4.5vw, var(--sp-20))); } .quinconce__entree--gauche > * { grid-column: 1; padding-inline-end: var(--sp-10); } .quinconce__entree--droite > * { grid-column: 2; padding-inline-start: var(--sp-10); } /* Une seule colonne. L'alternance disparaît : à cette largeur elle ne se lit plus comme un rythme, seulement comme des marges incohérentes d'une entrée à l'autre. */ @media (max-width: 60rem) { .quinconce__entree { grid-template-columns: minmax(0, 1fr); } .quinconce__entree--gauche > *, .quinconce__entree--droite > * { grid-column: 1; padding-inline: 0; } } /* ---------- Le chemin ---------- Le tracé en pointillé bouclé posé derrière une liste en quinconce, demandé par Hugo le 25/08/2026 pour « Nos 4 garanties qui s'appliquent en continu ». Voir partials/chemin.njk pour le balisage et assets/js/chemin.js pour la géométrie — le `d` du est calculé, jamais écrit à la main. Ce fichier ne porte que l'APPARENCE du trait et l'empilement. Le geste, lui, se règle en `data-chemin-*` sur l'enveloppe. ⚠️ TOUT EST EN BOUTON AVEC LE DÉFAUT DANS LE REPLI DU `var()`, et jamais en déclaration à part : une propriété personnalisée posée ICI battrait la même propriété héritée d'un ancêtre, et une page qui voudrait un tracé plus fin ou d'une autre teinte n'aurait aucun moyen de le dire. ⚠️ LE FLUO NE SE MESURE PAS ICI. C'est du décor pur : aucun texte ne se pose dessus, aucun contraste n'est en jeu. Ne pas l'assombrir « pour la lisibilité » — il n'y a rien à lire. */ .chemin { position: relative; } .chemin__trace { position: absolute; inset: 0; width: 100%; height: 100%; /* Les boucles débordent la boîte de la liste par construction : sans ça, elles seraient coupées net sur son bord. Le débordement horizontal est borné côté script (`amplitudeMax`) et arrêté côté section (`overflow-x: clip` sur le bloc hôte), pour qu'il ne puisse jamais créer de barre de défilement. */ overflow: visible; pointer-events: none; } /* ⚠️ RIEN À TRAVERSER SOUS `lg`, DONC PAS DE TRACÉ. À cette largeur l'alternance du quinconce s'effondre : chaque entrée prend toute la largeur, il n'y a plus de moitié vide. Or c'est exactement là que le trait passe — le laisser courir reviendrait à le faire passer sur le texte, faute de vide où passer. C'est la prémisse du décor qui disparaît, pas son rendu qui se dégrade. Le script n'en sait rien et n'a pas à le savoir : il calcule, le CSS décide si ça se montre. ⚠️ C'EST UN PLANCHER, PAS LE SEUIL DE TOUS LES EMPLOIS. Un hôte dont la prémisse tombe plus haut relève la borne chez lui : la boucle des « 4 garanties » disparaît dès `xl`, faute de place sur les flancs du bloc (voir sections/_liste-numerotee.scss). Ne pas remonter CE seuil pour autant — il n'a à répondre que du quinconce. */ @media (max-width: 60rem) { .chemin__trace { display: none; } } /* ⚠️ LE CONTENU PASSE AU-DESSUS PAR UN `z-index` EXPLICITE, ET NON EN RENVOYANT LE TRACÉ EN ARRIÈRE — les deux réflexes échouent ici. Sans `z-index` du tout, le l'emporterait : il est POSITIONNÉ, donc peint dans la couche des éléments positionnés, au-dessus du texte en flux normal quel que soit l'ordre du document. Et `z-index: -1` sur le l'enverrait derrière le fond de la section — `.liste-glyphes` peint `--bg-page` — où il serait purement invisible, parce que `.chemin` ne crée pas de contexte d'empilement. */ .chemin > :not(.chemin__trace) { position: relative; z-index: 1; } .chemin__trait { fill: none; stroke: var(--chemin-couleur, var(--c-fluo)); stroke-width: var(--chemin-epaisseur, 8px); stroke-dasharray: var(--chemin-tirets, 14 20); /* Bouts ronds : c'est ce qui donne au pointillé son grain souple plutôt qu'une suite de rectangles. Ils ajoutent une demi-épaisseur de chaque côté du tiret — le vide déclaré est donc plus grand que le vide vu. */ stroke-linecap: round; stroke-linejoin: round; } /* ---------- L'item ---------- Marqueur, intitulé, description. Ce trio revient dans six pages de la maquette sous des mises en page très différentes — fiche numérotée, rangées de produits, garanties, étapes de méthode. Ce qui varie est la DISPOSITION, posée par le bloc qui l'accueille ; l'atome, lui, ne change pas. Il est ici plutôt que dans une feuille de section pour une raison précise : deux blocs l'emploient — `rangees-illustrees` et `liste-glyphes` — et sans tronc commun un ajustement sur l'un laisserait l'autre derrière sans que rien ne le signale. Le bloc hôte ne pose que la disposition de `.item` (grille, colonne, alternance) et, s'il le veut, la teinte du marqueur via --item-ton. Voir partials/item.njk. */ /* Deux rangs empilés : la ligne d'intitulé (marqueur + titre + cartouche), puis le texte. Et non deux colonnes — voir le long commentaire de partials/item.njk, c'est ce changement qui rend le marqueur alignable. */ .item { display: flex; flex-direction: column; /* Bouton, défaut dans le repli du `var()` : c'est la gouttière ENTRE LES RANGS de l'atome — l'étiquette, la ligne d'intitulé, le texte. Un module à mi-largeur la resserre (voir `.texte-module__module--demi`), parce qu'à ce format une case ne porte plus qu'une étiquette et une valeur de deux mots : à 12px de gouttière, les deux se lisent comme un couple. Écrit en déclaration à part, il serait insurchargeable depuis un ancêtre. */ gap: var(--item-rangs-gap, var(--sp-3)); /* La cote du marqueur en forme de marque, et le retrait qui s'en déduit. Les deux vivent ici, ensemble, parce que le second est CALCULÉ à partir du premier : éparpillés, un changement de taille de forme aurait laissé le retrait à son ancienne valeur, et le texte se serait décalé d'un ou deux pixels sans que rien ne le signale. */ --item-marqueur-w: 1.75rem; --item-retrait: 0px; } /* ---------- Le texte aligné sur l'intitulé ---------- Demandé par Hugo le 19/08/2026 : « aligner le texte au début du titre et pas du point ». La description se renfonce donc de la largeur du marqueur plus sa gouttière, et son premier caractère tombe exactement sous celui de l'intitulé. ⚠️ CE N'EST PAS UN RETOUR AUX DEUX COLONNES, et c'est important : la version d'avant le 18/08/2026 mettait le MARQUEUR dans sa propre colonne, ce qui lui retirait toute ligne de base commune avec l'intitulé — le centrer verticalement demandait alors de deviner où tombe la première ligne du titre, ce que le CSS ne permet pas (voir le long commentaire de partials/item.njk). Ici le marqueur reste DANS la ligne de l'intitulé, leurs lignes de base s'alignent toujours, et c'est seulement le TEXTE qui se décale. ⚠️ IL FAUT DONC QUE LE MARQUEUR AIT UNE LARGEUR FIXE. C'est le cas de la forme de marque (--item-marqueur-w), et c'est pourquoi le retrait est une OPTION et non le défaut : un marqueur « 01 » en chasse fixe ou un badge « ÉTAPE 12 » n'ont pas de largeur connue à l'avance, et le retrait tomberait à côté. Les deux blocs qui l'emploient — `liste-glyphes` et la liste de `face-a-face` — sont tous les deux en forme de marque. */ .item--retrait { --item-retrait: calc(var(--item-marqueur-w) + var(--sp-3)); } /* ---------- L'escalier des items en mode mobile ---------- Demandé par Hugo le 27/08/2026 pour la section « Chacun construit la lecture dont il a besoin » de /plateforme/ — « un peu de rembourrage pour les titres des items et encore une indentation supplémentaire pour les textes de ces items » — puis étendu le même jour à TOUTES les listes d'items. Empilées à même la gouttière de page, les entrées se lisaient comme un seul pavé : le marqueur, l'intitulé et la description partaient tous du même bord. Deux marches, donc : l'item entier rentre d'un cran (le rembourrage de l'intitulé), et sa description d'un cran de plus. ⚠️ LA SECONDE MARCHE EST `--item-retrait`, celui de la règle juste au-dessus, et son long commentaire dit pourquoi il n'est valable QUE pour un marqueur de largeur connue d'avance — d'où le `:has()` sur la forme de marque. Un « 01 » en chasse fixe, un badge « ÉTAPE 12 », un glyphe de pilier ou un item sans marqueur du tout n'ont pas de largeur à laquelle aligner quoi que ce soit, et le retrait tomberait à côté : ceux-là ne reçoivent rien, faute de repère, pas par oubli. ⚠️ IL EST POSÉ SUR `.item` ET NON SUR UN ANCÊTRE : l'atome déclare `--item-retrait: 0px` sur lui-même, donc une valeur héritée serait masquée. Le sélecteur vise bien `.item`, et il est plus spécifique que celui de l'atome. Ce qu'il touche, relevé dans la sortie construite et non supposé : les piles de `texte-module` (/plateforme/, /cas-clients/hardloop/ ×2), ses entrées en `rangee` (/dictionnaire/, qui repassent en une seule colonne sous `lg` — c'est bien une pile à cette largeur), `liste-glyphes` (/produit/, /a-propos/), la suite de `face-a-face` (/connecteur-ia/) et l'agenda de `rendez-vous` (/parler-a-un-expert/). Les trois derniers portent déjà `.item--retrait` à toutes les largeurs : ils ne gagnent ici que la première marche, et la seconde se redéclare à l'identique. ⚠️ AUCUNE EXCLUSION POUR LA GRILLE ET LES CARTES DE `texte-module`, et ce n'est pas un oubli : aucune de leurs cellules ne porte de marqueur en forme de marque aujourd'hui (vérifié dans la sortie construite), donc le `:has()` les écarte tout seul. Le jour où l'une en portera, c'est le rembourrage propre de la cellule qu'il faudra regarder — une case en a déjà un, et l'escalier y rejouerait le même décalage deux fois. Rien ne bouge au-dessus de `lg`. */ @media (max-width: 60rem) { .item:has(.item__marqueur--marque) { padding-inline-start: var(--sp-3); --item-retrait: calc(var(--item-marqueur-w) + var(--sp-3)); } } /* Chasse fixe et capitales : c'est la grammaire des intitulés techniques du site — mêmes réglages que la date des articles et les étiquettes de figure. `font-variant-numeric: tabular-nums` n'est pas cosmétique : sans lui, les chiffres de Chivo Mono restent à chasse fixe mais le « 1 » de « 01 » et celui de « 11 » ne s'alignent pas verticalement d'une ligne à l'autre. */ .item__marqueur { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--item-encre, var(--item-ton, var(--text-accent))); } /* Il y avait ici `padding-block-start: 0.35em`, pour poser à la main la ligne de base du petit marqueur sur celle du titre. Retiré le 18/08/2026 : le rang aligne désormais les lignes de base lui-même, et ce décalage venait s'y ajouter au lieu de le corriger. */ /* ---------- Alignement des marqueurs en forme ---------- ⚠️ AUCUNE CONSTANTE ICI, ET C'EST LE POINT. Trois réglages successifs ont échoué avant celui-ci — hauteur de boîte de ligne, puis remontée en em — parce qu'ils essayaient tous de deviner où tombent les capitales dans la ligne. Le CSS n'expose pas les métriques de la fonte : `1cap` en donne la hauteur, mais jamais sa position. Toute valeur écrite à la main était condamnée à dériver. La solution est de laisser le navigateur faire le calcul, avec deux règles qui se combinent : `align-items: baseline` sur `.item__entete` accroche la ligne de base du marqueur à celle du titre ; `vertical-align: middle` sur la forme la centre sur la HAUTEUR D'X de la fonte — la définition typographique du milieu optique d'une ligne. Pour que la seconde soit juste, le marqueur doit porter la même fonte et le même corps que l'intitulé : c'est de SA fonte que le navigateur tire la hauteur d'x. D'où les deux déclarations de police ci-dessous, sur un élément qui ne contient pourtant aucun texte. Elles ne sont pas décoratives. */ .item__marqueur--glyphe, .item__marqueur--marque { padding-block-start: 0; /* Annule la fonte mono de `.item__marqueur` pour reprendre celle du rang. `font` en bloc plutôt que trois propriétés : il remet aussi le corps et l'interligne, dont dépend la hauteur d'x que lit `vertical-align`. */ font: inherit; } .item__marqueur--glyphe > *, .item__marqueur--marque > * { display: inline-block; vertical-align: middle; } /* La forme de marque en marqueur. Sa largeur est fixe et non fluide : c'est une pastille de repérage, pas un élément de décor — à taille variable elle se mettrait à concurrencer l'intitulé qu'elle annonce. */ .item__forme { /* La cote vient de l'atome, parce que le retrait du texte est calculé dessus — voir `--item-marqueur-w`. La changer ici seul décalerait le texte. */ --shape-w: var(--item-marqueur-w); --shape-color: var(--item-ton, var(--c-blue)); } /* ---------- La forme qui PORTE son numéro ---------- Demandée par Hugo le 21/08/2026 pour /parler-a-un-expert/ — « les numéros dans des Shapes ». Le pourquoi du balisage (le chiffre est un FRÈRE de la forme, pas son enfant, parce qu'un masque découperait le texte avec elle) est en tête de partials/item.njk. ⚠️ RIEN ICI NE REFAIT L'ALIGNEMENT SUR LE TITRE. Le gabarit émet aussi `--marque`, donc la pastille hérite déjà de la fonte du rang et du `vertical-align: middle` qui font tout le travail — voir le long commentaire juste au-dessus. Ces règles-ci ne s'occupent que de l'INTÉRIEUR de la forme. */ /* ⚠️ LA COTE VA SUR `.item` ET NON SUR LE MARQUEUR, et c'est structurel : `--item-retrait` la lit pour calculer le renfoncement du texte. Posée sur le marqueur seul, la forme grossirait et le texte resterait renfoncé de l'ancienne valeur — un décalage de 12 px sans le moindre signal. Une forme qui doit contenir « 01 » ne peut pas avoir la cote d'une forme qui ne contient rien : à 1,75rem, deux chiffres de 11 px débordent de l'aplat. 2,25rem les tient avec de l'air autour, et reste sous la hauteur de capitale d'un intitulé — au-delà, la pastille se met à concurrencer le titre qu'elle annonce, ce que la note de `.item__forme` dit déjà de la forme nue. Les trois formes sont mesurées au même endroit : le chiffre tombe au CENTRE vertical, qui est justement le point le plus large des trois (citron, losange, écu). C'est ce qui permet une cote unique pour la rotation. */ .item:has(.item__marqueur--marque-numero) { --item-marqueur-w: 2.25rem; } /* La pile forme + chiffre. Une grille à UNE cellule, les deux enfants dedans : c'est la case qui centre le chiffre sur la forme, donc aucune cote n'est écrite à la main et la cote de la forme peut changer sans rien recaler. `inline-grid` et non `inline-block` : la règle `.item__marqueur--marque > *` au-dessus pose `inline-block`, qui ferait de la pastille un simple conteneur en ligne où le chiffre suivrait la forme au lieu de se superposer à elle. Elle est surchargée ici, à spécificité supérieure, et `vertical-align` — qu'elle pose aussi — continue de s'appliquer : une grille en ligne le respecte. */ .item__marqueur--marque-numero > .item__pastille { display: inline-grid; place-items: center; } .item__marqueur--marque-numero .item__pastille > * { grid-area: 1/1; } /* ⚠️ LE CHIFFRE DOIT ÊTRE POSITIONNÉ, SINON LA FORME LUI PASSE DESSUS. Défaut vu au rendu le 21/08/2026 — « tu n'as pas mis de chiffre dans les formes » : le chiffre était bien dans le DOM, blanc, au bon endroit, et invisible. La cause n'est pas l'ordre du DOM, qui est le bon (la forme d'abord, le chiffre ensuite). C'est que `.forme` porte `transform: rotate(var(--shape-rot, 0deg))`, et qu'un `transform` autre que `none` — même une rotation de ZÉRO degré — fait de l'élément un contexte d'empilement, peint comme s'il était `position: relative; z-index: 0`. Il passe donc à l'étape 8 de l'ordre de peinture, après les blocs ordinaires du même parent. Un chiffre non positionné se retrouve DERRIÈRE la forme quelle que soit sa place dans le DOM. `z-index` seul n'y ferait rien : il n'a aucun effet sur un élément non positionné. D'où les deux déclarations de la règle plus bas, qui vont ensemble. */ /* ⚠️ APLAT QUI PORTE DU BLANC : IL LIT --btn-primary-bg, JAMAIS --c-blue EN DIRECT. Règle 10 de MAQUETTE.md — sur une page pilier, --c-blue prend la teinte du pilier telle quelle et le blanc y échoue sur trois des quatre. --btn-primary-bg porte déjà l'arbitrage fait pour `.btn--primary`, pilier par pilier : c'est la même variable, donc rien à recalculer ici. C'est le sixième aplat du site à porter du blanc. Le sélecteur a deux classes (0,2,0) et il le faut : `.forme--bleu`, que le gabarit pose aussi, vaut (0,1,0) mais est écrite PLUS BAS dans ce fichier — à spécificité égale elle l'emporterait et la forme reprendrait --c-blue en direct. C'est le piège que `texte-module` a déjà dû corriger le 21/08/2026. */ .item__marqueur--marque-numero .item__forme { --shape-color: var(--btn-primary-bg, var(--c-blue)); } /* Le chiffre. Chasse fixe et tabular-nums comme le marqueur « 01 » nu, dont il est le même objet à un autre endroit — mais SANS interlettrage : à 0,14em, deux chiffres se décentrent de la forme d'un demi-caractère vers la droite, l'espace final n'étant pas repris. `--fs-mono` (11 px) dans une forme de 40 px : c'est la seule cote de l'échelle qui laisse de l'air dans un citron, dont la largeur utile au centre vaut environ les deux tiers de la boîte. */ .item__pastille-numero { /* Voir l'avertissement ci-dessus : sans ces deux lignes, la forme — qui porte un `transform` — passe DEVANT le chiffre et le rend invisible. */ position: relative; z-index: 1; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; color: var(--c-white); } .item__marqueur--etape { /* Le seul marqueur qui n'est pas décoratif : les étapes se suivent, leur ordre porte du sens, il reste donc lisible à la voix. */ white-space: nowrap; } .item__texte { display: flex; flex-direction: column; /* Le même bouton que la gouttière des rangs de `.item`, pour que l'accroche, le corps et les puces se resserrent avec eux. */ gap: var(--item-rangs-gap, var(--sp-3)); /* Nul par défaut : le retrait est une option, voir `.item--retrait`. */ margin-inline-start: var(--item-retrait); } /* Le marqueur, l'intitulé et le cartouche partagent une ligne. `baseline` fait tout le travail d'alignement : les trois éléments accrochent leur ligne de base à celle de la première ligne du titre. C'est pour ça que le marqueur a rejoint ce rang — dans sa colonne d'avant, il n'avait aucune ligne de base commune avec le titre et il fallait deviner. Ne pas repasser en `center` : quand l'intitulé se replie sur deux lignes, tout descendrait au milieu du bloc de titre. */ /* ⚠️ LA FONTE DU RANG EST DÉCLARÉE ICI, UNE SEULE FOIS, et le titre comme le marqueur en héritent. Ce n'est pas une élégance : le marqueur tire sa hauteur d'x de SA PROPRE fonte, donc la moindre divergence avec le titre décale l'alignement. C'est exactement ce qui a fait échouer les premières tentatives — le titre était passé de --fs-md à --fs-h3 et le marqueur, qui recopiait --fs-md, calculait sur un corps qui n'existait plus. Deux déclarations séparées, c'est un décalage qui attend son heure. */ .item__entete { display: flex; align-items: baseline; gap: var(--sp-3); font-family: var(--font-serif); /* ⚠️ LE CORPS EST UN BOUTON, ET SON DÉFAUT EST DANS LE REPLI DU `var()`. Un module à mi-largeur (`module.demi` de `texte-module`) descend ses intitulés à --fs-base : à 22→32 px dans une case deux fois plus étroite, un intitulé se replie sur trois lignes. Écrire le défaut dans une déclaration à part l'aurait rendu insurchargeable — une propriété posée SUR l'élément bat toujours la même héritée d'un ancêtre. Même mécanique que --repere-taille. */ font-size: var(--item-entete-taille, var(--fs-h3)); line-height: var(--lh-snug); } /* ⚠️ AUCUNE `font-weight` ICI, ET C'EST VOLONTAIRE : c'est un

, il prend donc le gras des titres du site déclaré une seule fois dans _base.scss (h1 à h4). C'est exactement ce que font les autres intitulés du site — `.cadre__titre`, `.texte-module__titre`, `.cas__titre`, `.hero-page__titre` n'en déclarent aucune non plus. Une `--fw-semibold` traînait ici depuis l'époque où cet intitulé était figé à --fs-md (18 px), corps auquel un demi-gras est juste. Le jour où le corps est passé à --fs-h3 (22 → 32 px) en héritant de `.item__entete`, la graisse n'a pas été rejugée : à 32 px, le demi-gras ne se lit plus comme un titre à côté du

de section qui, lui, est en gras. Corrigé le 25/08/2026 sur signalement d'Hugo (« Créer vos dashboards » sur /plateforme/). Ne pas la remettre. */ .item__titre { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: var(--ls-tight); color: var(--text-strong); } /* ---------- Le cartouche ---------- ⚠️ POURQUOI LA TEINTE DU PILIER EST DILUÉE ET LE TEXTE SOMBRE : à pleine teinte, aucun pilier ne porte du texte de 11 px. En aplat franc, le blanc plafonne à 2,97 sur le rose et 2,12 sur l'orange ; --c-text-main y passe pour trois piliers sur quatre mais tombe à 3,43 sur le violet du connecteur. Diluée à 15 %, la teinte donne ~12 de contraste sur les quatre, et le filet reste à pleine force — un filet n'est pas du texte. */ .item__badge { /* Seul élément du rang à se ferrer à droite. Une marge auto plutôt qu'un `space-between` sur le rang : le marqueur et l'intitulé doivent rester collés, ce que `space-between` aurait dispersés. */ margin-inline-start: auto; flex: none; padding: 0.125rem var(--sp-2); border: 1px solid var(--item-ton, var(--text-accent)); border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--item-ton, var(--text-accent)) 100%, var(--c-white)); font-family: var(--font-mono); font-size: var(--fs-base); font-weight: var(--fw-medium); /* letter-spacing: var(--ls-display); */ text-transform: uppercase; white-space: nowrap; color: var(--c-white); } /* ---------- Le surtitre ---------- L'étiquette de rattachement, au-dessus de l'intitulé. Elle reprend EXACTEMENT la grammaire de `.item__marqueur` — chasse fixe, capitales, interlettrage élargi, teinte de l'item — parce que c'est le même registre : un libellé de service qui situe l'entrée, pas une phrase. ⚠️ ELLE N'EST PAS DANS `.item__entete`, contrairement au marqueur et au cartouche. Ce rang-là aligne ses enfants sur la ligne de base du titre et porte la fonte de titrage ; le surtitre est un rang à lui, au-dessus. C'est aussi ce qui permet à `subgrid` de l'aligner d'une carte à l'autre dans une grille — voir sections/_texte-module.scss. Pas de `font-variant-numeric` ici, contrairement au marqueur : ce sont des mots, pas des numéros à faire coïncider d'une ligne à l'autre. */ .item__surtitre { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--item-encre, var(--item-ton, var(--text-accent))); } /* ---------- Le rang du haut : l'étiquette et le logo ---------- Un rang flex plutôt qu'un logo posé en absolu dans le coin de la carte : le rang fait sa hauteur, donc rien ne peut se chevaucher quand la carte se resserre. Le pourquoi complet est dans partials/item.njk. `align-items: center` et non `start` : le logo est nettement plus haut que la pastille, et c'est lui qui donne la hauteur du rang. Ferrés en haut, les deux objets se décrocheraient l'un de l'autre sans que rien ne l'exige. ⚠️ `gap` MALGRÉ LE `space-between` : sans lui, un libellé de pastille assez long viendrait toucher le bloc du logo sur une carte étroite — `space-between` ne ménage rien quand il n'y a plus d'espace à répartir. */ /* ⚠️ SA GOUTTIÈRE EST HORIZONTALE — elle sépare l'étiquette du logo, pas deux rangs. Elle ne suit donc PAS le bouton `--item-rangs-gap` : un module resserré rapproche ses rangs, il n'a aucune raison de coller un logo à son étiquette. */ .item__rang-haut { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } /* ---------- Le bloc blanc du logo ---------- ⚠️ LE FOND EST --c-white EN DUR, et c'est l'un des rares endroits du site où une couleur est écrite plutôt qu'un rôle. La raison n'est pas graphique : un logo tiers porte sa propre couleur de marque, qu'on ne peut ni changer ni faire dialoguer avec un fond coloré. Passer par --section-bg le rendrait orange sur la carte du pilier, et les deux logos y perdraient leur lisibilité de marque. ⚠️ LA HAUTEUR EST FIXE, LA LARGEUR NON, et c'est ce qui rend le bloc juste pour des logos de proportions très différentes : la marque Zapier est carrée (256×256), le logotype n8n fait 2,5:1 (mot compris). Les deux blocs ont donc la même hauteur et des largeurs différentes — ce qui se lit comme deux logos, alors qu'un carré imposé aurait réduit le logotype n8n à un timbre illisible. `flex: none` parce que le bloc est un enfant de `.item__rang-haut` : sans lui, `space-between` le laisserait se comprimer avant la pastille. */ .item__logo { flex: none; display: flex; align-items: center; justify-content: center; height: 2.5rem; padding-inline: var(--sp-3); border-radius: var(--radius-md); background-color: var(--c-white); } /* La hauteur du bloc moins ses marges internes. `width: auto` laisse la largeur suivre le ratio du fichier — c'est ce qui demande un viewBox sur chaque logo, voir le commentaire ajouté en tête d'Assets/n8n_logo.svg. */ .item__logo img { display: block; height: 1.5rem; width: auto; max-width: 100%; } /* ---------- Le surtitre en pastille fluo ---------- Demandé par Hugo le 20/08/2026 pour les deux cartes de /integrations/ — « des badges fluo comme sur le scroll de la page Excel et Sheets ». ⚠️ C'EST LE MÊME OBJET QUE `.etapes--solo .etape__numero`, et les valeurs sont les mêmes des deux côtés : aplat fluo, encre courante, arrondi complet, même rembourrage. La chasse fixe en capitales, elle, vient déjà de `.item__surtitre` au-dessus — c'est la grammaire commune des deux étiquettes. ⚠️ CE N'EST PAS LE MÉCANISME DE PASTILLE RETIRÉ LE MÊME JOUR, et la différence est mesurée. Celui-là posait la TEINTE DU PILIER en aplat, ce qu'interdit la règle 16 de MAQUETTE.md : aucune encre ne passe sur les quatre teintes. Le fluo n'est pas une teinte de pilier — il porte --c-text-main à 15,3 — donc l'aplat y est légitime, et une seule règle sert les quatre pages sans recalcul. ⚠️ L'ENCRE EST ÉCRITE EN CLAIR, ET IL LE FAUT : la pastille sert justement dans les contextes où les rôles ont été remis à plat — sur l'aplat orange des cartes, --item-ton comme --text-accent valent déjà l'encre courante, et sur un fond sombre --text-strong vaudrait le blanc, illisible sur le fluo. La pastille porte son propre couple fond + encre, elle ne le tient d'aucun contexte. ⚠️ `width: fit-content` ET NON `align-self: start`. L'atome est une pile flex hors grille et une grille dedans : `align-self` y agit sur des axes différents, `justify-self` ne fait rien en flex. La largeur intrinsèque, elle, vaut des deux côtés. */ .item--pastille .item__surtitre { width: fit-content; padding: 0.25rem var(--sp-4); border-radius: var(--radius-full); background-color: var(--c-fluo); color: var(--c-text-main); } /* L'accroche reprend la chasse fixe des intitulés techniques du site, mais SANS capitales ni interlettrage élargi : c'est une phrase, pas une étiquette. En capitales, « Vos dashboards, configurés pour vos équipes » deviendrait illisible sur deux lignes. */ .item__accroche { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--item-encre, var(--item-ton, var(--text-accent))); } .item__corps { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); } .item__corps p { margin: 0; } /* ---------- La chute d'une entrée ---------- Une ligne qui referme l'entrée, sous les puces. Ajoutée le 20/08/2026 pour les deux cartes de rôles de /a-propos/, où la maquette écrit « Ce sont eux qui font **le gros du travail au contact des clients.** ». ⚠️ ELLE EST À L'ENCRE DISCRÈTE, ET C'EST SON ACCENT QUI PORTE. La phrase entière à la teinte de l'item aurait fait un second surtitre en bas de carte ; ici la ligne reste du corps de texte, et seul le `**gras**` de la fin s'allume — c'est lib/typographie.js qui le rend, et il prend --text-accent. Le partage est le même que partout : ce qui est à lire reste à l'encre courante. Le retrait haut la décolle des puces plus franchement que la gouttière de la pile, parce qu'elle change de nature — ce n'est plus un élément de la liste. ⚠️ `align-self: end`, ET C'EST LA DEMANDE ELLE-MÊME : « j'aimerais que les deux soient à la même distance du bas de leur boîte ». La chute occupe le DERNIER rang de la carte, donc son bas est à distance constante du bord — quel que soit le nombre de lignes de chaque chute. J'ai essayé `start` avant : ça aligne les PREMIÈRES lignes, ce qui n'est pas la même chose et laissait la chute la plus courte flotter loin du bas de sa carte. ⚠️ ET CETTE PROPRIÉTÉ NE SERT À RIEN TANT QUE LA CHUTE N'EST PAS AU BON NIVEAU D'IMBRICATION. C'est ce qui a fait perdre deux essais : rendue dans l'atome, elle était à deux niveaux de sous-grille et ne partageait pas son rang avec sa voisine. Elle est maintenant rendue par le bloc hôte, en enfant direct de la carte — voir `.texte-module__entrees--chute` et le champ `chute` de partials/item.njk. Hors grille, la propriété est simplement inerte. */ .item__chute { margin: var(--sp-3) 0 0; align-self: end; font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--text-muted); } /* ⚠️ LE GRAS PREND LA TEINTE D'ACCENT, demandé par Hugo le 20/08/2026. C'est le seul endroit du site où une mise en valeur passe par le `**gras**` de lib/typographie.js plutôt que par `((…))` — et c'est justifié ici : la phrase est une seule ligne dont la fin porte tout le sens (« Ce sont eux qui font **le gros du travail au contact des clients.** »), donc le gras ET la couleur vont ensemble. Le rôle et non une couleur en dur : dans une boîte sombre, `.on-dark` passe l'accent au fluo tout seul. */ .item__chute strong { color: var(--text-accent); } /* ⚠️ LA VARIANTE EN PASTILLE NE PORTE PLUS DE CORPS NI D'ENCRE : c'est la chip à l'intérieur qui les tient. Les déclarations de `.item__chute` qui restent utiles sont la marge et `align-self: end` — donc l'alignement des trois chutes au bas de leur carte, qui est tout l'intérêt du champ. La teinte est passée par `--pastille-ton` côté gabarit, pas ici : dans une boîte sombre, `.on-dark` a déjà fait passer --text-accent au fluo, et la chip suit sans qu'on ait deux couleurs à tenir accordées. */ .item__chute--pastille { font-size: inherit; color: inherit; } /* ⚠️ LA CHIP EST RAMENÉE À LA COTE DE LA MAQUETTE, comme `.offres__pastille` et pour la même raison : `.pastille--chip` se rend par défaut en `clamp(1rem … 1.375rem)`, soit 17,9 px ici, quand la maquette la pose à 12,75 px. Au bas d'une carte, elle y pesait autant que le titre. */ .item__chute--pastille .pastille--chip { padding: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); } /* ---------- Les puces ---------- Une liste de phrases courtes sous la description — les cas d'usage de la section 04 de /integrations/. ⚠️ LA PUCE EST UN `::before`, PAS UN `list-style-type`. La teinte de la puce doit être celle de l'item et celle du texte reste l'encre courante : un marqueur de liste native hérite de la couleur du texte, et les deux ne peuvent pas différer sans `::marker` — dont `color` n'est pas encore fiable partout. Elle prend --item-encre : c'est un point de 5px, donc de l'ENCRE et non de l'ornement. Sur l'orange du pilier, l'aplat clair y serait invisible. */ .item__puces { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); } .item__puces li { display: flex; gap: var(--sp-3); } /* ⚠️ LES PUCES À L'ENCRE D'ACCENT — `module.pucesEnAccent`, ajouté le 11/09/2026 pour /tarifs/, dont la maquette pose ces listes en couleur. ⚠️ C'EST UNE OPTION ET NON LE DÉFAUT, et il faut que ça le reste : sur /integrations/ et /dictionnaire/, ces mêmes puces énumèrent des cas d'usage au fil d'un texte, et les colorer les ferait lire comme des liens. Sur /tarifs/ elles énumèrent ce qui EST inclus — le contenu de l'offre, pas un commentaire. `--text-accent` et non une couleur en dur : dans la boîte sombre, `.on-dark` l'a déjà fait passer au fluo, donc la règle vaut des deux côtés sans qu'on ait deux teintes à tenir accordées. */ .texte-module__entrees--puces-accent .item__puces { color: var(--text-accent); } .item__puces li::before { content: ""; /* `flex: none` et une remontée d'un demi-cadratin : la puce doit tomber sur la première ligne du texte, pas se centrer sur un paragraphe de deux lignes. `0.55em` place son centre à peu près sur la hauteur d'x — la seule métrique de fonte qu'on puisse approcher sans la connaître. */ flex: none; width: 5px; height: 5px; margin-block-start: 0.55em; border-radius: var(--radius-full); background-color: var(--item-encre, var(--item-ton, var(--text-accent))); } /* Les CTA sont des boutons (voir partials/item.njk). En ligne tant qu'il y a la place, ferrés à gauche — et non centrés comme `.btn-group`, parce qu'ils s'alignent sur le texte de l'item, pas sur un axe de section. Il y avait ici un `.item__lien`, le CTA rendu en lien nu à la teinte du pilier. Retiré le 18/08/2026 avec le passage aux boutons. */ .item__liens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } /* ---------- L'invite ---------- L'exemple de question posée à l'IA, sous un filet tireté. C'est du TEXTE TECHNIQUE — ce qu'on tape dans un assistant — d'où la chasse fixe, mais sans capitales ni interlettrage : c'est une phrase entière. --text-muted et non --text-strong : c'est le seul endroit du site où cette encre porte du texte suivi, et c'est justifié — l'invite est un EXEMPLE, en retrait de l'affirmation qu'elle illustre. La règle « le corps de texte est toujours à l'encre forte » vaut pour le corps de texte, et la description juste au-dessus le reste. Le filet est en `--border-subtle`, qui bascule tout seul en blanc translucide dans `.on-dark` : rien à reprendre si l'invite se retrouve un jour dans une boîte sombre. */ .item__invite { display: flex; gap: var(--sp-2); margin: 0; padding-block-start: var(--sp-4); border-top: 1px dashed var(--border-subtle); font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-snug); color: var(--text-muted); } /* Le chevron prend la teinte de l'item : c'est le seul signe coloré de la carte, et il marque le passage de l'énoncé à l'exemple. */ .item__invite-chevron { flex: none; color: var(--item-ton, var(--text-accent)); } /* Teintes de pilier. Les jetons existent déjà dans _tokens.scss : on ne fait ici que les brancher sur --item-ton, que le marqueur et le lien lisent. */ /* ---------- La teinte de l'item ---------- ⚠️ DEUX VARIABLES ET NON UNE, ET C'EST LA RÈGLE 10 DE MAQUETTE.md descendue dans l'atome : --item-ton l'APLAT — ce qui n'est pas à lire : le masque du marqueur en forme de marque (`--shape-color`), le cartouche. --item-encre l'ENCRE — ce qui est à lire : le marqueur « 01 », le surtitre, l'accroche. Absente, elle retombe sur --item-ton. Sur trois piliers les deux valeurs sont égales, donc la distinction ne se voit pas. Sur `integrations` elle est indispensable : #f0a22e ne donne que 2,01 sur le crème et 2,12 sur le blanc du cadre — un tiers sous les niveaux acceptés (2,90 pour le vert, 2,82 pour le rose). C'est --c-pilier-integrations-encre (#cc6207, 3,74) qui porte le texte, et l'orange du pilier qui reste sur les formes : « les formes sur la page doivent être dans l'orange original » — Hugo, 20/08/2026. ⚠️ CORRECTIF DU 20/08/2026 : cette ligne posait l'orange clair sur les DEUX emplois. Les surtitres « FINANCE / RETAIL / DIRECTION » de la section 04 de /excel-sheets/ sortaient donc à 2,12 sur le blanc de leur carte, alors que l'en-tête de cette page annonce l'inverse (« ils prennent ici l'orange foncé du pilier »). Le code disait le contraire de son intention, sans le moindre signal — c'est exactement le piège que la règle 10 décrit. */ .item--dictionnaire { --item-ton: var(--c-pilier-dictionnaire); } .item--plateforme { --item-ton: var(--c-pilier-plateforme); } .item--connecteur { --item-ton: var(--c-pilier-connecteur); } .item--integrations { --item-ton: var(--c-pilier-integrations); --item-encre: var(--c-pilier-integrations-encre); } /* Sur écran étroit, seule la respiration entre les deux rangs se resserre. Cette requête faisait auparavant passer le marqueur AU-DESSUS de l'intitulé : il occupait sa propre colonne, et côte à côte un titre de quelques mots se replierait sur une colonne trop maigre. Ce n'est plus le cas — le marqueur partage la ligne du titre et n'y prend que sa largeur de forme, donc il n'y a plus de colonne à sacrifier. */ @media (max-width: 40rem) { .item { gap: var(--sp-2); } } /* ---------- Formes de marque ---------- Les trois exports Figma (citron, écu, losange). Règles de la marque : on n'utilise que ces trois formes, elles sont interchangeables, et on peut les faire tourner. Le SVG est posé en MASQUE et non en : la couleur vient alors du CSS, donc un seul fichier par forme sert toutes les teintes. C'est ce qui permet les losanges bleus de la section « approche » sans dupliquer les exports. Contrepartie : un masque n'a pas de taille intrinsèque, la hauteur ne se déduit plus de la largeur. C'est le rôle de --shape-ratio, posé par le partial partials/forme.njk qui connaît les viewBox des exports. La section appelante ne fournit que --shape-w, --shape-rot et un ancrage. La rotation reste en CSS même quand GSAP anime la forme : le script lit --shape-rot comme position de repos et oscille autour. */ .forme { display: block; width: var(--shape-w, 100%); aspect-ratio: var(--shape-ratio); background-color: var(--shape-color, var(--c-fluo)); transform: rotate(var(--shape-rot, 0deg)); mask-image: var(--shape-src); mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-image: var(--shape-src); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; } .forme--fluo { --shape-color: var(--c-fluo); } .forme--bleu { --shape-color: var(--c-blue); } /* Bleu profond, pour une forme posée sur un fond clair qui doit rester lisible sous un texte blanc — l'avatar des témoignages. */ .forme--bleu-nuit { --shape-color: var(--c-blue-dark); } /* Le miroir de la précédente : une forme posée sur un fond SOMBRE, où les quatre autres teintes s'effacent. Sur le violet du pilier connecteur, mesurés — le violet lui-même donne 1,14 (invisible comme couleur, visible seulement comme bord), le fluo 4,05, le bleu nuit 3,53 ; le blanc donne 4,72. C'est la seule qui détache franchement une forme de ce fond-là. Et elle porte de l'ENCRE, ce qui est sa raison d'être : les trois marques d'assistants de l'orbite de /connecteur-ia/ y sont posées en , chacune avec sa couleur de marque, ce qu'aucun aplat de pilier n'aurait accepté. C'est la règle de `.item__logo` — la couleur d'une marque tierce n'est pas à nous pour la faire dialoguer avec un fond teinté. */ .forme--blanc { --shape-color: var(--c-white); } /* L'ACCENT DE LA PAGE, ET C'EST UN RÔLE, PAS UNE COULEUR. Les trois teintes au-dessus nomment un ton du nuancier ; celle-ci lit --text-accent, que `.ton-page--*` réaffecte au ton du pilier et que `.on-dark` met au fluo. Une forme qui la porte suit donc sa page sans que la page ait à la nommer — c'est ce qui rend les formes de décor de /plateforme/ rouges et celles d'une page de dictionnaire vertes, avec la même donnée. ⚠️ ELLE NE DOUBLE PAS `.forme--bleu`, MÊME SI LES DEUX COÏNCIDENT SUR UNE PAGE SANS PILIER : `--c-blue` est un ton, --text-accent une intention. Écrire `teinte: bleu` dans une donnée pour obtenir une forme rouge serait exactement le nom qui ment. */ .forme--accent { --shape-color: var(--text-accent); } /* L'ORNEMENT DE LA PAGE — l'autre rôle, et il faut les deux. `.forme--accent` lit --text-accent, qui est de l'ENCRE ; celle-ci lit --c-blue, qui est de l'ORNEMENT. Les deux rôles sont documentés à cet endroit dans _tokens.scss, et sur trois des quatre piliers ils portent la même valeur — la distinction ne se voit donc que sur /excel-sheets/, le seul pilier qui les sépare : l'encre y est l'orange brûlé #cc6207, l'ornement l'orange original #f0a22e. ⚠️ C'EST UNE CONSIGNE D'HUGO DU 20/08/2026 — « les formes sur la page doivent être dans l'orange original ». Un grand aplat de décor posé en fond de section ne porte rien à lire : le foncer n'apporte aucune lisibilité et éteint le décor. C'est le raisonnement écrit dans `.ton-page--integrations`, appliqué. ⚠️ ELLE NE DOUBLE PAS `.forme--bleu`, POUR LA MÊME RAISON QUE `.forme--accent` : `--c-blue` est un ton, l'ornement une intention. Écrire `teinte: bleu` dans une donnée pour obtenir une forme orange serait le nom qui ment ; c'est la macro qui choisit la teinte, jamais le fichier de contenu. ⚠️ LE REPLI SUR FOND SOMBRE EST EXPLICITE, et c'est ce que `.forme--accent` obtenait gratuitement : --text-accent passe au fluo sous `.on-dark`, --c-blue non. Sans cette seconde règle, une forme d'ornement dans une boîte sombre y prendrait le bleu (ou le ton du pilier) et s'y éteindrait. Aucune page ne le fait aujourd'hui — la règle est là pour que la première ne le découvre pas. */ .forme--ornement { --shape-color: var(--c-blue); } .on-dark .forme--ornement { --shape-color: var(--c-fluo); } /* ---------- Forme remplie d'une trame ---------- La forme découpe l'extérieur, la trame de points découpe l'intérieur. Deux masques sur deux éléments imbriqués : un masque s'applique à tout le sous-arbre, donc l'imbrication donne l'intersection. Le grain porte deux couches de masque composées en intersection : les points, pavés à leur taille naturelle, et un dégradé qui module la densité. C'est ce partage qui permet à un seul fichier de servir toutes les formes — le motif généré est volontairement uniforme, la montée en densité appartient au CSS (voir buildHalftoneFond dans eleventy.config.js). `mask-size` du motif est en PIXELS et non en %, pour que le grain reste identique quelle que soit la taille de la forme. En %, la plus grande forme aurait des points deux fois plus gros que la plus petite. */ .forme-trame { position: relative; display: block; width: var(--shape-w); aspect-ratio: var(--shape-ratio); transform: rotate(var(--shape-rot, 0deg)); mask-image: var(--shape-src); mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-image: var(--shape-src); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; } /* Masque à deux couches composées (points + dégradé) : les mots-clés de `mask-composite` ne sont pas les mêmes entre la version standard et la version -webkit-, les faire cohabiter casse la composition. Reste donc écrit à la main — voir aussi sections/_texte-illustre.scss (.texte-illustre__grille) pour le même cas. */ .forme-trame__grain { position: absolute; inset: 0; background-color: var(--shape-color, var(--c-fluo)); /* Le dégradé s'éteint des DEUX côtés, avec un plateau au milieu. La maquette ne fait pas décroître la densité d'un bord à l'autre : elle culmine au cœur de la forme et se dilue vers ses deux bords, ce qui la fait naître du fond plutôt que d'y être posée. Une rampe simple donnait une forme dense collée à son arête. */ mask-image: url("/assets/img/halftone-fond.svg"), linear-gradient(var(--grain-angle, 90deg), transparent, black var(--grain-debut, 32%), black var(--grain-fin, 58%), transparent); mask-size: 504px 504px, 100% 100%; mask-repeat: repeat, no-repeat; mask-composite: intersect; } /* ========================================================================= DÉCOR-FORMES — jusqu'à trois formes de marque en trame dans les deux bandes que la composition d'une section laisse libres de part et d'autre du conteneur, deux à gauche et une à droite. Atome : partials/formesDecor.njk, qui porte le balisage et le pourquoi des deux rendus. Ici : la géométrie. Écrite d'abord dans sections/_texte-module.scss le 25/08/2026 — Hugo, en trois temps : « un chart matriciel halftone à droite de la section », puis, dessin en main, « les motifs remplissent à peu près les zones rouges », puis « remplace-les par des shapes halftone classiques en fait ». Les cotes ci-dessous sont relevées sur ce dessin, pris à 1950 px de fenêtre. Passée à TROIS le 26/08/2026 pour « Une infrastructure… » de /plateforme/ — « 3 formes de part et d'autre » — et EXTRAITE ICI le même jour quand `comparatif` a demandé le même décor. ⚠️ EXTRAITE PLUTÔT QUE RECOPIÉE : ce qui se partage n'est pas l'apparence — les atomes `formeTrame` et `forme` la portent — mais la GÉOMÉTRIE. Deux feuilles de section auraient tenu deux jeux de cotes en accord sans rien pour signaler leur divergence. C'est le parti de `.quinconce` et de `.chemin` : la primitive porte le rythme, le bloc hôte garde ses marges et son titre. Ce qui reste dans sections/_texte-module.scss est ce que la primitive ne peut pas savoir : la composition `rangee`, qui borne le côté gauche autrement, et l'ancrage `tableau`, où les formes enjambent les bords du PANNEAU et non ceux de la page. --------------------------------------------------------------------- ⚠️ CE SONT DES FORMES DE MARQUE, PAS LES GRAPHIQUES DE partials/motif.njk. Ceux-là sont l'objet spécial des boîtes sombres — le donut du dictionnaire, les quatre briques de /produit/. Le décor en trame du SITE, ce sont citron, écu et losange, et `coeur` les pose déjà exactement comme ici : en fluo, sur le crème, débordant de leur section. Les deux graphiques qui ont occupé ces deux zones quelques heures le 25/08/2026 sont partis avec l'arbitrage de teinte qui allait avec (le vert sombre du pilier, 5,29 sur le crème) : une forme en trame n'a pas de séries à distinguer, donc rien à mesurer les unes contre les autres. ⚠️ CE QUI LES COUPE EST LE BORD DE LA PAGE, d'où l'`overflow-x: clip` sur l'hôte — sans lui le débord ouvrirait une barre de défilement horizontale. `clip` et non `hidden` : il ne force pas l'autre axe, donc rien ne devient scrollable verticalement, et le débord vertical d'un décor voisin reste intact. --------------------------------------------------------------------- L'ARÊTE INTÉRIEURE, ET C'EST LA SEULE CHOSE QUI LES TIENT À L'ÉCART DU TEXTE. `--forme-arete` est la même expression des deux côtés : le bord EXTÉRIEUR du conteneur à sa largeur maximale, moins de combien la forme y entre. Un côté la consomme en `inset-inline-end`, l'autre en `inset-inline-start` — d'où deux règles courtes au lieu de deux géométries. Elle se mesure depuis le bord du conteneur et non depuis le texte, et ce n'est pas un détail : le rembourrage du conteneur est un `clamp()`, donc une cote prise sur le texte changerait à chaque largeur. Prise sur le conteneur, elle donne un DÉGAGEMENT CONSTANT à toute largeur — 32 px du bord de la boîte de contenu dans le cas général, 54 px du flanc du schéma sous `rangee`. ⚠️ L'AVANCÉE EST DONC DÉRIVÉE ET NON NOMMÉE : 1rem par défaut, relevée par l'hôte quand sa composition borne un côté par autre chose que le conteneur (voir `rangee` dans sections/_texte-module.scss). Recopier cette valeur-là dans la règle de base poserait la forme PAR-DESSUS le contenu de toute section sans visuel. ⚠️ LE DÉFAUT EST DANS LE REPLI DE `var()` ET NON DÉCLARÉ, pour qu'un réglage posé par l'hôte ne soit pas masqué — même règle que `--btn-primary-bg`. ⚠️ AUCUNE ROTATION, ET C'EST POUR CETTE RAISON. `coeur` fait tourner ses trois formes de 8 à 14 degrés, et c'est la conduite habituelle ; ici une rotation grossirait l'encombrement horizontal de la forme d'environ 7 % de sa largeur — soit 33 px pour celle de gauche, sur 54 px de dégagement. La règle « jamais deux fois la même forme dans la même orientation côte à côte » est de toute façon tenue par le choix de formes différentes — et avec trois clés déclarées, les trois formes du site y passent. ⚠️ LE DÉCOR PASSE SOUS LE TEXTE, ET C'EST UN ORDRE DE CALQUES DEPUIS LE 26/08/2026 — demande d'Hugo : « les shapes ne doivent pas passer devant le texte ». Avant, rien n'avait de `z-index` et c'était l'ÉPINGLAGE seul qui interdisait le recouvrement : chaque cote était calculée pour que la forme n'atteigne pas le texte, donc grossir une forme ou déplacer un contenu pouvait ramener le défaut sans que rien ne le signale. ⚠️ ET LA RAISON POUR LAQUELLE UN `z-index: -1` NE MARCHAIT PAS ÉTAIT INCOMPLÈTE. Ce qui l'envoyait sous l'aplat opaque de la section, ce n'est pas l'aplat : c'est que la section n'était PAS un contexte d'empilement (`position: relative` + `z-index: auto` n'en crée pas), donc la forme remontait jusqu'au contexte racine. Un `isolation: isolate` suffit à la retenir : dans ce contexte, un `z-index: -1` peint à l'ÉTAPE 2, après le fond de la section (étape 1) et avant tout son contenu. C'est la construction que l'ancrage `tableau` emploie sur `__corps`. Ce qui reste vrai de l'épinglage : il garde les formes hors du texte à l'œil, et c'est lui qui fait qu'on en voit quelque chose. Le calque n'est qu'un filet de sécurité — mais il rend le défaut impossible au lieu d'évitable. ⚠️ AUCUN POINT DE RUPTURE N'EST PUBLIÉ, et la formule s'en charge : sous la largeur maximale du conteneur, `50% + C / 2` dépasse la largeur de la section et la forme sort d'elle-même de l'écran, où le `clip` la mange. Elle s'efface au lieu de dégrader — le service que rendait un `mq-up("xl")` explicite, en une règle de moins. Quand les deux côtés avancent d'1rem, les trois formes s'en vont ENSEMBLE vers 1340 px ; une avancée inégale les fait partir à des largeurs différentes. Largeur de bande libre, en fonction de la gouttière (fenêtre − conteneur) / 2 : 1340 px 1440 px 1600 px 1950 px gauche/rangee 166 px 216 px 296 px 471 px gouttière 0 px 48 px 128 px 303 px --------------------------------------------------------------------- LA TAILLE EST UNE PART DE LA LARGEUR DE LA SECTION, comme dans `coeur`, et non une part de sa hauteur. Deux raisons. La forme doit ATTEINDRE le bord de la page, ce qui est une affaire de largeur ; et une part de hauteur la ferait grossir sur un écran étroit, où la section s'allonge par replis de texte — exactement quand la bande libre se rétrécit. Elle passe donc par `--shape-w`, le bouton de l'atome, et la HAUTEUR découle du rapport de la forme (`aspect-ratio`, posé en ligne par partials/forme.njk depuis le viewBox de l'export). Rien à déclarer pour elle. ⚠️ ET C'EST LA BANDE QUI PORTE LA COTE DE LARGEUR, pas la forme : `--shape-w` vaut 100 % dans la bande de droite, où la forme est seule. Ça évite d'avoir à battre le `position: relative` de l'atome par l'ordre du fichier, appui que l'ancienne règle prenait et dont la panne aurait été spectaculaire et muette. Tailles obtenues à 1950 px, en regard des zones du dessin du dictionnaire : gauche citron 468 × 454 px zone 471 × 362 droite écu 682 × 724 px zone 303 × 718 ⚠️ UNE FORME QUASI CARRÉE NE PEUT PAS REMPLIR LES DEUX AXES D'UNE ZONE EN 1,3. Celle de gauche déborde donc en HAUTEUR, et c'est le bon axe à laisser filer : rien ne se trouve à gauche du schéma bridé. Celle de droite tombe juste. ⚠️ LES DEUX FORMES DE GAUCHE SONT PLUS PETITES QUE CELLE DU DESSIN (19 % et 21 % contre 24 %), et ce n'est pas un réglage de goût : elles partagent une bande, donc la somme de leurs hauteurs doit tenir dans celle de la section. Les grossir, c'est les faire se rejoindre — et deux trames superposées fondent en une tache. --------------------------------------------------------------------- LE GRAIN. La trame de `formeTrame` culmine au coeur de la forme et se dilue vers ses deux bords (voir `.forme-trame__grain`). Ici une bonne part de la forme est hors écran : le plateau est donc décalé vers la moitié VISIBLE, sinon la densité tombe du côté qu'on ne voit pas et il ne reste qu'un bord dilué. L'axe reste à 90deg des deux côtés — 0 % est le bord gauche, 100 % le bord droit — et ce sont les bornes du plateau qui sont en miroir. Faire tourner l'axe à 270deg aurait marché aussi, au prix d'un sens de lecture inversé dans les pourcentages. ========================================================================= */ /* L'HÔTE SE CÂBLE TOUT SEUL, et c'est ce qui dispense les blocs de déclarer quoi que ce soit : `:has(> …)` ne remonte que d'un cran, donc cette règle ne peut attraper que la section qui contient effectivement les bandes. ⚠️ LE CROCHET EST LA BANDE ET NON LA FORME. Sur les formes, il attraperait aussi l'ancrage `tableau` de `texte-module`, dont les formes sont enfants directes de `__corps` : `__corps` y gagnerait un `overflow-x: clip` qui trancherait justement les moitiés extérieures qu'il doit montrer. L'arête contient `var(--forme-avancee)`, qui n'est PAS résolue ici : une propriété personnalisée est substituée là où elle est EMPLOYÉE, donc chaque bande lit sa propre avancée. D'où une seule expression pour deux géométries. `position: relative` et `overflow-x: clip` sont redéclarés ici même si les hôtes actuels les portent déjà pour leurs propres raisons : la primitive ne peut pas le supposer, et à valeur égale il n'y a pas de conflit. */ :has(> .decor-formes__bande) { --forme-arete: calc( 50% + (var(--container-max) + var(--container-pad) * 2) / 2 - var(--forme-avancee, 1rem) ); position: relative; overflow-x: clip; /* Le contexte d'empilement qui permet aux formes de passer DERRIÈRE le texte. Voir la note « le décor passe sous le texte » plus haut : sans lui, un `z-index: -1` remonte jusqu'au contexte racine et se range sous l'aplat opaque de la section, où il devient invisible. */ isolation: isolate; } /* Les deux bandes partagent tout sauf leur flanc et leur largeur. Le `flex` en colonne centrée est ce qui rend le recouvrement impossible à gauche — voir l'atome — et il ne coûte rien à droite, où la bande n'a qu'une forme. */ .decor-formes__bande { position: absolute; /* Sous le texte. Le contexte d'empilement est sur l'hôte — voir plus haut. */ z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); } .decor-formes__bande--gauche { inset-block: 0; inset-inline-end: var(--forme-arete); /* La largeur de la gouttière de page à 1950 px, à peu de chose près. Au-dessous, la bande sort d'elle-même de l'écran avec l'arête — aucun point de rupture. */ inline-size: 16%; } /* ⚠️ LES DEUX NE SONT PAS ALIGNÉES SUR LE MÊME FLANC, et c'est la conduite de `coeur` et de `temoignages` : à pas régulier, l'œil attrape l'alignement et la paire se lit comme une frise au lieu d'un décor. */ .decor-formes__bande--gauche > .decor-formes__forme { /* Le plateau de densité vers la droite : c'est la moitié visible. */ --grain-debut: 55%; --grain-fin: 92%; } .decor-formes__bande--gauche > .decor-formes__forme--haut-gauche { --shape-w: 88%; align-self: flex-start; } .decor-formes__bande--gauche > .decor-formes__forme--bas-gauche { --shape-w: 100%; align-self: flex-end; } /* La bande de droite : étroite, et haute de presque toute la section. Elle n'a qu'une forme, donc sa largeur EST la cote de la forme. */ .decor-formes__bande--droite { inset-block-start: 9%; inset-inline-start: var(--forme-arete); inline-size: 35%; } /* ⚠️ L'APLAT SE COTE AUTREMENT QUE LA TRAME. Le 35 % ci-dessus était justifié PAR la trame, et cette justification tombe avec elle : la forme débordait largement hors écran parce que sa moitié invisible était sa moitié DILUÉE — c'est tout le propos du plateau de grain décalé. Un APLAT n'a pas de moitié diluée : au même 35 % il donne une masse pleine coupée net par le bord de page. Il est donc ramené à la largeur de la bande, où les trois formes se lisent comme une famille dans les deux gouttières. Aucune page n'emploie l'aplat dans cet ancrage aujourd'hui — les deux qui le demandent passent par `ancrage: tableau`. La règle reste pour que la première ne redécouvre pas l'arbitrage. */ .decor-formes__bande--droite.decor-formes__bande--plein { inline-size: 15%; } .decor-formes__bande--droite > .decor-formes__forme { --shape-w: 100%; /* Le plateau vers la gauche, moitié visible de ce côté-ci. */ --grain-debut: 8%; --grain-fin: 45%; } /* ========================================================================= MOTIF — un graphique en halftone, décor d'une boîte sombre. Atome : partials/motif.njk, qui porte la géométrie et le pourquoi du procédé. L'atome possède l'APPARENCE — la trame et le calcul des trois séries. L'hôte possède le PLACEMENT et la teinte. Voir `.texte-panneau__motif` pour le premier hôte, et /labo/graphiques-halftone/ pour la planche des onze dessins. ⚠️ UNE SEULE COUCHE DE MASQUE, donc la paire `-webkit-` est ici sans danger. L'avertissement de `.forme-trame__grain` juste au-dessus ne porte que sur `mask-composite`, dont les mots-clés diffèrent entre les deux syntaxes ; il n'y a pas de composition ici, les tracés du SVG portent déjà la forme. La tuile est posée EN PIXELS, comme partout ailleurs sur le site : le grain ne change donc pas avec la taille du motif, et c'est ce qui le garde de la même famille que le donut et que le grain des formes de marque. ========================================================================= */ .motif { /* --------------------------------------------------------------- LES TROIS SÉRIES, à partir de DEUX variables que pose l'hôte. `--motif-base` est la série mise en avant, `--motif-fond` le fond de la boîte sur laquelle le motif est posé. Les deux séries qui reculent sont la base MÉLANGÉE AU FOND, et non la base éclaircie vers le blanc : mélangée au fond, une série recule au lieu de changer de couleur, et les trois restent de la même famille. C'est la formule du donut (_texte-module.scss), reprise telle quelle, y compris ses deux proportions. ⚠️ LES DÉFAUTS SONT DANS LE `var()`, JAMAIS DÉCLARÉS ICI. Une propriété posée SUR l'élément bat la même propriété héritée d'un ancêtre : écrite en déclaration, `--motif-base` masquerait la valeur que la boîte hôte pose, et le motif resterait fluo sans la moindre alerte. Même règle que `--btn-primary-bg`. Le repli fluo-sur-bleu-nuit n'est là que par principe : les cinq hôtes possibles du site posent tous leur propre paire. */ --motif-t2: color-mix( in srgb, var(--motif-base, var(--c-fluo)) 78%, var(--motif-fond, var(--c-blue-dark)) ); --motif-t3: color-mix( in srgb, var(--motif-base, var(--c-fluo)) 52%, var(--motif-fond, var(--c-blue-dark)) ); display: block; mask-image: url("/assets/img/halftone-fond.svg"); mask-size: 504px 504px; mask-repeat: repeat; -webkit-mask-image: url("/assets/img/halftone-fond.svg"); -webkit-mask-size: 504px 504px; -webkit-mask-repeat: repeat; } /* Remplissages et tracés en DEUX familles séparées, et non une classe qui poserait `fill` ET `stroke` : une règle CSS bat l'attribut de présentation `fill="none"`, donc une classe mixte remplirait le ruban de la courbe. */ .motif__s1 { fill: var(--motif-base, var(--c-fluo)); } .motif__s2 { fill: var(--motif-t2); } .motif__s3 { fill: var(--motif-t3); } .motif__l1 { fill: none; stroke: var(--motif-base, var(--c-fluo)); } .motif__l2 { fill: none; stroke: var(--motif-t2); } .motif__l3 { fill: none; stroke: var(--motif-t3); } /* --------------------------------------------------------------- LA DÉCOUPE — ce qui permet à deux tracés de SE SUPERPOSER sans fondre l'un dans l'autre. Demandée par Hugo le 25/08/2026 pour les bulles : « les bulles peuvent même se superposer. Dans ce cas là on affiche que les points d'une des bulles et on vient découper l'autre. » ⚠️ LE PROBLÈME N'EST PAS L'ORDRE DE PEINTURE, C'EST LA TRAME. Le masque est posé sur le ENTIER, donc tous les tracés partagent la MÊME grille de points : deux disques qui se chevauchent y posent exactement les mêmes points, et leur intersection ne se lit plus du tout — même teinte, ils fusionnent en une seule tache ; teintes différentes, la limite est une frontière de couleur sans arête. Empiler dans le bon ordre ne répare ni l'un ni l'autre. Le remède est donc un VIDE : le tracé porte un liseré de la couleur du FOND, peint SOUS son propre remplissage (`paint-order: stroke`). Il creuse ainsi une saignée dans tout ce qui a été peint avant lui, et n'entame jamais son propre remplissage. Sur le fond lui-même le liseré est invisible — du fond sur du fond. Trois conséquences à connaître : • ELLE REPOSE SUR L'INVARIANT `--motif-fond` = LE FOND RÉEL. C'est déjà la règle de l'atome (les séries qui reculent sont la base mélangée à ce fond), et les trois hôtes la tiennent — `texte-panneau` lit `--panneau-ton`, `onglets-metiers` le fond de sa boîte, l'atelier sa propre variable. Un hôte qui déclarerait autre chose verrait apparaître des anneaux. • L'ORDRE DU TABLEAU EST L'ORDRE DE PEINTURE, donc l'ordre de découpe : un tracé creuse ses PRÉDÉCESSEURS, jamais ses suivants. Les bulles sont rangées du plus grand au plus petit pour cette seule raison. • LA SAIGNÉE DOIT AVOIR DE LA SURFACE, comme tout le reste du motif : elle est faite de points manquants, donc plus fine qu'un pas de trame elle peut tomber entre deux points et ne rien montrer. 16 unités de liseré (8 de part et d'autre) valent environ un pas à l'échelle où le motif est rendu. */ .motif__decoupe { stroke: var(--motif-fond, var(--c-blue-dark)); stroke-width: var(--motif-decoupe, 16); paint-order: stroke; } /* ---------- En-tête ---------- */ .site-header { /* Le chrome est exempté des 85 % du site — voir `--echelle-chrome` dans _tokens.scss pour le mécanisme et ses limites. */ zoom: var(--echelle-chrome); position: sticky; top: 0; z-index: var(--z-header); background-color: color-mix(in srgb, var(--bg-page) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } /* Une fine bordure n'apparaît qu'une fois la page défilée, pour décoller l'en-tête du contenu sans l'alourdir en haut de page. */ .site-header[data-scrolled=true] { border-bottom-color: var(--border-subtle); } /* ⚠️ ET ELLE APPARAÎT AUSSI TANT QU'UN DÉROULANT EST OUVERT, même en haut de page. Le panneau ne porte plus de filet en haut (voir `.site-nav__menu`) : sans ce trait il resterait ouvert par le dessus. Il court sur toute la largeur, ce qui est le propos — c'est l'arête de l'en-tête, et le panneau s'accroche dessous. Toujours pas une ligne de JS : `:has()` fait le lien du panneau vers la barre, que ni `:focus-within` ni `:hover` posé sur l'en-tête ne pourraient distinguer d'un simple survol du logo. Le survol reste enfermé dans `hover-hover`, comme l'ouverture du panneau elle-même. */ .site-header:has(.site-nav__groupe:focus-within) { border-bottom-color: var(--border-subtle); } @media (hover: hover) { .site-header:has(.site-nav__groupe:hover) { border-bottom-color: var(--border-subtle); } } .site-header__inner { /* ⚠️ POSITIONNÉ DEPUIS LE 31/08/2026 : c'est lui qui sert de bloc conteneur au panneau pleine mesure de « Solution ». Il porte le `.container`, donc le panneau s'aligne exactement sur la mesure du reste de la page. Voir `.site-nav__menu--large`. */ position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); min-height: var(--h-entete-brute); } .site-logo { font-family: var(--font-serif); font-size: 1.375rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-strong); flex-shrink: 0; } /* ---------- Navigation ---------- */ .site-nav { display: flex; align-items: center; gap: var(--sp-1); } .site-nav__link { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-out); } .site-nav__link:hover { color: var(--c-blue); } /* ⚠️ « CONNEXION » N'EXISTE DANS LA NAV QU'AU DOIGT. Au-dessus de `lg` c'est le bouton fantôme de `.site-header__actions` qui la porte ; rendue ici aussi, l'entrée serait DOUBLÉE dans la barre. Sous `lg` le rapport s'inverse : c'est le bouton qui s'efface et cette rangée qui ouvre le menu déplié, comme dans la maquette. Exactement une des deux copies à chaque largeur. */ .site-nav__link--connexion { display: none; } .site-nav__chevron { width: 0.75rem; height: 0.75rem; transition: transform var(--dur-fast) var(--ease-out); } /* ---------- Le déroulant de « Solution » ---------- Aucun JS : le panneau s'ouvre au survol et au focus clavier. Le survol est enfermé dans `hover-hover` pour qu'un écran tactile ne le laisse pas ouvert après un appui ; `:focus-within` reste hors du garde, c'est lui qui sert au clavier sur toutes les machines. Sur mobile (voir la bascule en bas de fichier) rien de tout ceci ne s'applique : le panneau redescend dans le flux, déplié. */ /* ⚠️ LE GROUPE PREND TOUTE LA HAUTEUR DE LA BARRE, ET C'EST CE QUI DÉCOLLE LE PANNEAU. Il est le bloc conteneur du déroulant, qui s'ouvre à `top: 100%` ; à la hauteur de son seul lien, ce 100 % tombait au bas du LIEN — donc à l'intérieur de l'en-tête, et le panneau chevauchait la barre sur une dizaine de pixels. Étiré (`align-self: stretch` sur la nav puis sur le groupe), le 100 % tombe sur le bord bas de l'en-tête : le panneau commence là où la barre finit. Le lien, lui, reste centré — c'est le `align-items` du groupe qui s'en charge, aucune cote n'est écrite nulle part. La bascule mobile n'a rien à défaire : `.site-nav` y passe en `position: absolute`, où `align-self` n'a plus de prise. */ .site-nav { align-self: stretch; } .site-nav__groupe { position: relative; align-self: stretch; display: flex; align-items: center; } .site-nav__menu { position: absolute; /* Le pixel est celui de la bordure basse de l'en-tête, qui apparaît au défilement : sans lui, le filet du panneau se poserait juste dessus et les deux traits n'en feraient qu'un, épais de deux pixels. */ top: calc(100% + 1px); inset-inline-start: 0; z-index: 1; /* La maquette donne 331 px pour un texte de 24 px ; le panneau est ramené à l'échelle de la nav (voir .site-nav__sous-lien), donc sa largeur avec — 13rem, soit les mêmes proportions. C'est un PLANCHER, pas une largeur : le panneau s'élargit pour son contenu. ⚠️ MAIS IL LUI FAUT UNE LARGEUR ÉCRITE DEPUIS LE 31/08/2026, et un `max-width` n'y suffit PAS. Un élément en absolu se dimensionne à son contenu : avec les descriptions en phrases et un `white-space: normal`, il se rétractait à 208 px en cassant chaque phrase sur quatre lignes. Un plafond ne relève pas un plancher — seule une largeur le fait. 26rem est la cote de « Ressources » ; « Solution » s'en affranchit par `--large`, plus bas. Le `min-width` reste : il ne sert plus à personne aujourd'hui, mais il protège un futur déroulant sans description. */ min-width: 13rem; inline-size: 26rem; /* Aucune marge intérieure : les rangées vont d'un filet à l'autre, et c'est leur propre trait qui les sépare. */ padding: 0; /* ⚠️ LE PANNEAU PORTE LE TON DE L'EN-TÊTE, MAIS OPAQUE — demandé par Hugo le 27/08/2026. Il prolonge la barre au lieu de se poser devant elle : même crème, même filet discret. Le blanc et le bleu saturé #2340ff de la maquette (Figma 16:8) partent avec, c'est l'habillage de `.cadre` et il faisait du déroulant un objet étranger à la barre qui l'ouvre. Les coins restent droits et il n'y a toujours aucune ombre : sur ces deux points l'en-tête et l'ancien panneau disaient déjà la même chose. ⚠️ NE PAS Y REMETTRE LE `backdrop-filter` DE L'EN-TÊTE : IL NE PEUT PAS AGIR ICI. `.site-header` en porte un, ce qui fait de lui la RACINE D'ARRIÈRE-PLAN de tous ses descendants — sous la barre, là où le panneau s'ouvre, cette racine ne contient plus rien à flouter. Un fond translucide y laissait donc passer le texte de la page, NET, ce qui a été essayé et rejeté le jour même. La translucidité de la barre n'est pas reproductible dans ce qu'elle contient ; ce qui l'est, c'est sa teinte. */ background-color: var(--bg-page); border: 1px solid var(--border-subtle); /* ⚠️ AUCUN FILET EN HAUT : C'EST CELUI DE L'EN-TÊTE QUI SERT D'ARÊTE. Demandé par Hugo le 27/08/2026 — le panneau portait le sien juste sous celui de la barre, et les deux traits accolés se lisaient comme un seul, épais. Le panneau s'ouvre donc SOUS la bordure de l'en-tête (le pixel du `top`) et n'en redessine pas une seconde : une arête, partagée. Elle n'existe que si la barre porte la sienne, d'où la règle qui la fait apparaître pendant qu'un déroulant est ouvert, plus bas dans ce fichier. */ border-top: 0; border-radius: 0; /* Comme la nav mobile : masqué sans être retiré du flux pour pouvoir animer, `visibility` interdisant au clavier d'y entrer tant qu'il est fermé. */ visibility: hidden; opacity: 0; transform: translateY(-0.25rem); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); } /* ---------- Le panneau de « Solution » ---------- ⚠️ IL SE CALE SUR SON LIEN DEPUIS LE 07/09/2026, comme celui de « Ressources ». Il partait jusque-là du bord gauche du `.container` : le groupe passait en `position: static` et le panneau se positionnait sur `.site-header__inner`, ce qui lui donnait toute la mesure de la page. Aligné sur le mot « Solution », il se lit comme ouvert PAR lui, et non posé sous la barre entière. Il n'y a donc plus rien à faire de particulier : il se cale sur son groupe, exactement comme le panneau étroit, et ne se distingue que par sa largeur et sa grille interne. Les deux règles qui portaient l'ancien montage — le `position: static` sur le groupe et le `inset-inline: 0` — sont parties. ⚠️ 58rem TIENT DANS LA PAGE PARCE QUE « SOLUTION » EST LA PREMIÈRE ENTRÉE. Le lien commence à ~170 px du bord du container, qui fait 1376 px : le panneau finit vers 1100, il reste 275 px. Une entrée plus à droite qui voudrait ce gabarit déborderait — c'est la cote à vérifier avant d'en donner un second. */ .site-nav__menu--large { inline-size: 58rem; display: grid; grid-template-columns: 20.5rem 1fr; } .site-nav__menu--large .site-nav__briques { /* Le crème du panneau s'arrête au bord de la carte : les deux colonnes se touchent sans gouttière, comme dans la maquette. */ padding-inline: var(--sp-6); } /* ⚠️ IL RÉTRÉCIT ENTRE `lg` ET `xl`, ET C'EST UNE REQUÊTE MÉDIA — PAS UN `max-inline-size`. Le panneau se montre dès 960 px ; à 58rem il finissait alors à 1058 px pour un écran de 965, donc hors cadre. ⚠️ DEUX SORTIES ONT ÉTÉ ESSAYÉES ET ÉCARTÉES, toutes deux à cause du `zoom` de l'en-tête (`--echelle-chrome`, 1,176) : · `max-inline-size: calc(100vw - 13rem)` — les unités de fenêtre sont MULTIPLIÉES par le zoom comme le reste, si bien que le plafond calculé (944 px de rendu) dépassait la largeur qu'il devait borner (928). Il ne mordait jamais ; · le même plafond une fois la grille débloquée — même cause, même effet. Une requête média, elle, s'évalue sur la FENÊTRE et ignore le zoom des éléments. C'est la seule mesure fiable ici. 46rem tient à 960 px de fenêtre : le lien « Solution » commence vers 130 px, le panneau finit vers 865, l'écran en fait 945. */ @media (max-width: 80rem) { .site-nav__menu--large { inline-size: 46rem; } } /* ⚠️ LA CELLULE À ENFANTS COUVRE LES TROIS RANGS, et c'est ce qui supprime le vide entre « Le dictionnaire de données » et « La plateforme de pilotage ». Le défaut : une piste de grille se dimensionne sur sa cellule la PLUS HAUTE, et « Les intégrations » avec ses deux entrées mesure 145 px quand un pilier en fait 90. Les deux partageant le premier rang, celui-ci passait à 145 — donc 56 px de crème sous le dictionnaire, que rien n'expliquait. En couvrant `1 / -1`, cette cellule ne pèse plus sur un rang en particulier : les trois se dimensionnent sur les piliers seuls, et elle s'aligne en tête de sa colonne. Les colonnes deviennent indépendantes, ce qu'une grille ne fait pas d'elle-même — c'est justement ce qui la distingue de deux colonnes. */ .site-nav__grille > li:has(.site-nav__enfants) { grid-column: 2; grid-row: 1/-1; } /* La carte occupe la colonne de gauche, les briques le reste. ⚠️ `min-inline-size: 0` EST CE QUI REND LE PLAFOND OPÉRANT. Une piste de grille en `1fr` porte un plancher implicite — son contenu minimum — et ce plancher passe AVANT le `max-inline-size` du conteneur : le panneau restait à 928 px et débordait de l'écran alors que sa cote calculée disait 803. C'est le débordement classique des grilles, et il ne se signale nulle part. */ .site-nav__menu--large > .site-nav__briques { grid-column: 2; min-inline-size: 0; } .site-nav__groupe:focus-within .site-nav__menu { visibility: visible; opacity: 1; transform: translateY(0); } .site-nav__groupe:focus-within .site-nav__chevron { transform: rotate(180deg); } @media (hover: hover) { .site-nav__groupe:hover .site-nav__menu { visibility: visible; opacity: 1; transform: translateY(0); } .site-nav__groupe:hover .site-nav__chevron { transform: rotate(180deg); } } /* ⚠️ LE PANNEAU EST PLAT DEPUIS LE 27/08/2026, et ses styles de second niveau sont partis avec la rangée qui l'ouvrait. « La solution complète » menait à /produit/, exactement comme la tête « Solution » qui la surplombait ; elle a été retirée à la demande d'Hugo, et les cinq pages filles sont remontées d'un cran. Le retrait de second niveau et le gras de la tête (reconnue à ses enfants par `:has()`, jamais à son rang) n'avaient plus d'appelant : ils sont dans git au 27/08/2026, pas ici. */ /* ⚠️ AUCUN FILET ENTRE LES RANGÉES, alors que la maquette en dessine un. Retiré à la demande d'Hugo le 25/08/2026 : la marge intérieure sépare seule, comme dans les entrées empilées de `texte-module` et les garanties de `liste-glyphes`. Le seul trait qui reste est celui du panneau. */ .site-nav__sous-lien { /* ⚠️ EN BLOC DEPUIS LE 31/08/2026, et non plus en `flex` : la rangée porte maintenant DEUX lignes — son intitulé et sa description — là où elle n'avait qu'un libellé et sa flèche. Le `flex` les aurait mises côte à côte. C'est `.site-nav__rangee` qui garde le flex, un cran plus bas, pour la ligne d'intitulé seule. La bascule mobile, elle, rétablit le flex ici : là-bas la rangée redevient « libellé à gauche, flèche au bout ». */ display: block; /* La maquette compose la rangée à 24 px dans 16 / 20 px de marge. Elle est ramenée ici à l'échelle de l'en-tête : le texte prend --fs-sm, celui de l'entrée qui ouvre le panneau, et les marges suivent dans les mêmes proportions (12 / 16 px). La graisse a suivi le 25/08/2026 : le gras de la maquette est calibré pour 24 px, à 15 px il pesait plus lourd que l'entrée qui ouvre le panneau. Demi-gras, donc — un cran au-dessus du medium de la nav, ce qui laisse la hiérarchie dans le bon sens. */ padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); border-radius: var(--radius-sm, 0.375rem); /* ⚠️ PLUS DE `nowrap`. Les descriptions sont des phrases : elles doivent pouvoir passer à la ligne, sinon la rangée pousse le panneau à la largeur de sa plus longue phrase. */ white-space: normal; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } /* ⚠️ UNE RANGÉE INERTE N'EST PAS UN LIEN DÉSACTIVÉ : c'est un INTITULÉ DE GROUPE. « Les intégrations » annonce ses deux enfants et ne mène nulle part — d'où un `
` dans le gabarit, hors de l'ordre de tabulation. Le survol ne fait rien non plus : un fond qui s'allume sous le doigt promet un clic. */ .site-nav__sous-lien--inerte { cursor: default; } /* ⚠️ DEUX CLASSES, ET C'EST L'ORDRE QUI L'EXIGEAIT. À une seule, cette règle valait (0,2,0) comme `.site-nav__sous-lien:hover` — qui est écrite APRÈS et l'emportait donc. L'intitulé de groupe s'allumait au survol comme un lien, alors qu'il n'ouvre rien. */ .site-nav__sous-lien.site-nav__sous-lien--inerte:hover { color: var(--text-strong); background-color: transparent; } /* La ligne d'intitulé : le point, le libellé, le cartouche. */ .site-nav__rangee { display: flex; align-items: center; gap: var(--sp-2); } /* ⚠️ UN POINT, ET JAMAIS UNE PASTILLE PLEINE — règle 16 de MAQUETTE.md. Aucune encre ne passe sur les quatre teintes de pilier en aplat : le blanc échoue sur trois d'entre elles (2,63 / 2,97 / 2,12) et l'encre foncée sur le violet (3,43). Un point ne porte pas de texte : la teinte y reste à pleine force sans rien à mesurer, et une seule règle sert les quatre piliers. */ .site-nav__point { flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-full); background-color: var(--ton); } .site-nav__intitule { min-inline-size: 0; } /* Le cartouche « New ». ⚠️ IL DILUE SA TEINTE À 15 %, et c'est ce qui le rend lisible : c'est l'exception que la règle 16 prévoit pour `.item__badge`, la seule sortie qui garde un aplat de pilier. L'encre reste l'encre courante. */ .site-nav__cartouche { flex: none; padding: 0.0625rem var(--sp-2); border: 1px solid var(--ton); border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--ton) 15%, var(--bg-page)); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong); } /* La description. */ .site-nav__texte { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: 1.45; color: var(--text-muted); } /* ⚠️ LE RETRAIT SUIT LE POINT, ET RIEN D'AUTRE. Il aligne le premier mot de la description sur l'intitulé, par-dessus la gouttière du point. Posé sans condition — c'était le cas jusqu'au 31/08/2026 — il creusait un vide en tête de chaque description de « Ressources », dont les rangées n'ont pas de point : un alignement sur une colonne qui n'existe pas. */ .site-nav__sous-lien:has(.site-nav__point) .site-nav__texte { padding-inline-start: 1rem; } /* ---------- Le second niveau ---------- Remis le 07/09/2026 avec la branche qui l'appelle — « Les intégrations » et ses deux entrées. Il est HORS de la rangée dans le document : un lien dans un lien n'existe pas en HTML. Le retrait aligne les enfants sur l'intitulé du parent, par-dessus la gouttière de son point : c'est ce qui les rattache à lui sans qu'aucun trait ne le dise. */ /* ⚠️ `ul.` EST OBLIGATOIRE, ET C'EST UN RESET DU SITE QUI L'IMPOSE. `ul[class], ol[class] { padding: 0 }` vaut (0,1,1) et battait `.site-nav__enfants` à une seule classe : le retrait ne s'appliquait pas, et les deux entrées se calaient 32 px à gauche de « Votre donnée partout » au lieu de s'aligner dessus. Rien ne le signalait — la règle était bien dans la feuille. Le compte : la description commence au rembourrage de la rangée (--sp-4) plus son propre retrait de 1rem. Les enfants doivent donc partir de la somme des deux ; leur `` reprend ensuite son rembourrage et l'annule en marge négative, pour que le fond de survol déborde sans décaler le texte. */ ul.site-nav__enfants { list-style: none; margin: 0; padding: 0 0 0 calc(var(--sp-4) + 1rem); } .site-nav__enfant { display: flex; align-items: center; /* ⚠️ PLUS DE `space-between` : il servait à pousser la flèche de QUEUE au bout de la rangée. La flèche est passée en tête le 07/09/2026, et le libellé doit maintenant la suivre immédiatement. */ gap: 0; padding: var(--sp-2) var(--sp-4); margin-inline-start: calc(var(--sp-4) * -1); border-radius: var(--radius-sm, 0.375rem); font-size: var(--fs-xs); color: var(--text-strong); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .site-nav__enfant:hover, .site-nav__enfant:focus-visible { color: var(--c-blue); background-color: color-mix(in srgb, var(--c-blue) 8%, transparent); } /* La flèche de tête. Elle est plus pâle que le libellé au repos et prend son encre au survol : elle marque le rattachement sans peser autant que le mot. ⚠️ `flex: none` ET UN ÉCART FIXE : sans eux, un libellé long la comprimerait avant de passer à la ligne. */ .site-nav__enfant-fleche { flex: none; margin-inline-end: var(--sp-2); color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out); } .site-nav__enfant:hover .site-nav__enfant-fleche, .site-nav__enfant:focus-visible .site-nav__enfant-fleche { color: inherit; translate: 0.15rem 0; } /* ---------- La carte de famille ---------- ⚠️ ELLE REMET LE BLEU DANS LE DÉROULANT, retiré le 27/08/2026 parce qu'il « faisait du déroulant un objet étranger à la barre qui l'ouvre ». Deux choses ont changé depuis, et c'est ce qui a permis de le rouvrir le 31/08/2026 : · la teinte est `--c-blue` (#3f58d7), LE bleu de la charte, et non le `--c-blue-action` (#2340ff) saturé des boutons qui avait été retiré ; · le panneau reste CRÈME. C'est une carte bleue DANS le panneau, pas un panneau bleu — la barre et son déroulant portent toujours le même fond. ⚠️ AUCUNE OMBRE, AUCUN RAYON : règle 5, et les coins droits du panneau. */ .site-nav__carte { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background-color: var(--c-blue); color: var(--c-white); transition: background-color var(--dur-fast) var(--ease-out); } /* ⚠️ LA CARTE ENTIÈRE EST UNE PORTE depuis le 31/08/2026, par `.carte-cliquable` (voir en tête de ce fichier et le gabarit). Il lui faut donc un survol, sinon rien ne dit qu'elle s'ouvre : c'est le fond qui bouge, d'un cran vers le bleu des boutons. ⚠️ ET RIEN D'AUTRE. Pas d'ombre (règle 5), et surtout AUCUN `transform` : il ferait du lien couvrant le bloc conteneur de son propre `::after`, qui se replierait sur le texte — le clic n'ouvrirait plus rien. C'est le défaut du 28/08/2026, et il ne se voit pas au survol. */ /* ⚠️ LE VOILE DÉBORDE DE LA MARGE INTÉRIEURE, ET IL LE DOIT. `inset: 0` sur un élément en absolu se résout sur la BOÎTE DE REMBOURRAGE de son bloc conteneur, pas sur sa boîte de bordure : la carte portant ses 24 px de marge elle-même, le voile s'arrêtait à 291 px sur 343 — la bande de crème autour du texte n'ouvrait rien, alors qu'elle est visiblement dans le cadre bleu. Les cartes de cas clients n'ont pas ce défaut parce que leur marge est sur un enfant, pas sur l'élément positionné. Ici on la reprend en négatif, ce qui ramène le voile exactement sur la boîte de bordure. Si la marge change, cette cote change avec — c'est le même jeton des deux côtés. */ .site-nav__carte.carte-cliquable .lien-couvrant::after { inset: calc(var(--sp-6) * -1); } .site-nav__carte.carte-cliquable:hover { background-color: color-mix(in srgb, var(--c-blue) 88%, var(--c-blue-action)); } .site-nav__carte.carte-cliquable:hover .site-nav__carte-lien span { translate: 0.25rem 0; } /* ⚠️ LES ENCRES DE LA CARTE SONT MESURÉES SUR #3f58d7, pas choisies à l'œil. Le bleu de la charte est plus clair que celui des boutons : la marge y est courte, et toute nouvelle encre pâle posée ici est à remesurer. · blanc plein → 5,85 (le titre et le lien) · blanc à 88 % → 4,93 (le paragraphe) Le surtitre à 85 % (4,72) est parti avec le surtitre lui-même, le 31/08/2026 : il redisait le titre. */ .site-nav__carte-titre { margin: 0; font-size: var(--fs-lg, 1.375rem); line-height: 1.15; color: var(--c-white); } .site-nav__carte-texte { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: rgba(255, 255, 255, 0.88); } .site-nav__carte-lien { display: inline-flex; align-items: center; gap: var(--sp-2); margin-block-start: auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-white); } .site-nav__carte-lien span { transition: translate var(--dur-fast) var(--ease-out); } .site-nav__carte-lien:hover span { translate: 0.25rem 0; } /* ---------- Les briques et leur grille ---------- */ .site-nav__briques { padding: var(--sp-5) var(--sp-6) var(--sp-4); } .site-nav__surtitre { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .site-nav__grille { /* Les cellules ne s'étirent pas : sans ça, une rangée haute d'un côté grandit la piste et creuse un vide sous la cellule d'en face. */ align-items: start; list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); /* Le retrait négatif ramène le fond de survol des rangées au bord du texte : sans lui, la marge intérieure de la rangée décalerait la colonne. */ margin-inline: calc(var(--sp-4) * -1); } /* ⚠️ UNE SEULE COLONNE POUR « RESSOURCES », ET C'EST LE NOMBRE D'ENTRÉES QUI LE DICTE. À trois, une grille de deux laisse la troisième seule sur son rang — un trou que rien ne justifie — et leurs descriptions sont des phrases, qui casseraient toutes en colonnes étroites. Si une quatrième ressource arrive, la grille de « Solution » redevient le bon gabarit. */ .site-nav__grille--colonne { grid-template-columns: 1fr; } /* ⚠️ LA GRILLE SE REMPLIT COLONNE PAR COLONNE, ET NON RANG PAR RANG. C'est ce qui met les trois piliers à gauche — dictionnaire, plateforme, connecteur — et les deux faces des intégrations à droite, l'une sous l'autre. En remplissage par rangs, la cinquième entrée retombait à gauche d'un nouveau rang, en diagonale de sa jumelle ocre. Une classe posée sur elle l'avait d'abord ramenée en colonne 2 ; ce détour est parti le 31/08/2026 avec le `grid-auto-flow`, qui obtient le même résultat sans nommer de colonne — donc sans casser si l'ordre de nav.yaml change. ⚠️ TROIS RANGS ÉCRITS, ET C'EST LA SEULE COTE À SURVEILLER. Avec cinq entrées elle donne 3 + 2 ; à six elle donnerait 3 + 3, ce qui tient encore. À SEPT elle ouvrirait une TROISIÈME COLONNE, que le panneau n'a pas prévue. */ .site-nav__menu--large .site-nav__grille { grid-auto-flow: column; grid-template-rows: repeat(3, auto); } /* ⚠️ LE PIED DU PANNEAU EST PARTI LE 07/09/2026, avec le seul appel qui le remplissait. Ses règles ne sont pas laissées en place : un mécanisme sans appelant se lit comme s'il agissait, et « Ressources » n'en a jamais eu. Elles sont dans git à cette date si un panneau redemande un pied. /* La teinte de survol suit le filet : elle lisait le bleu saturé des boutons quand le panneau en portait le trait, elle lit maintenant le bleu de la nav — celui que `.site-nav__link` prend déjà au survol, un cran plus haut. */ .site-nav__sous-lien:hover, .site-nav__sous-lien:focus-visible { color: var(--c-blue); background-color: color-mix(in srgb, var(--c-blue) 8%, transparent); } /* La flèche avance au survol. `translate` et non `transform` : c'est la propriété autonome, elle se compose avec un `transform` venu d'ailleurs au lieu de vivre dedans. */ .site-nav__fleche { transition: translate var(--dur-fast) var(--ease-out); } /* ⚠️ MAIS PAS SUR LA BARRE DE BUREAU. Les entrées de premier niveau en portent une depuis le 27/08/2026 pour la maquette mobile, où chaque rangée qui mène quelque part se termine par une flèche. Alignées horizontalement dans la barre, ces mêmes flèches ne désignent plus rien — il n'y a pas de bord droit de rangée à conclure. Elle est donc rendue dans le document et masquée ici, puis rétablie dans la bascule mobile en bas de fichier. */ .site-nav__link .site-nav__fleche { display: none; } /* ⚠️ NI SUR LES RANGÉES DU PANNEAU, DEPUIS LE 31/08/2026. Même raison, un cran plus bas : la flèche conclut une rangée en désignant son bord droit, et le panneau n'en a plus. Ses rangées portent maintenant deux lignes dans une grille de deux colonnes — la flèche ne tombait au bout de rien, et sur la colonne de gauche elle pointait vers la colonne de droite. Elles restent dans le document et reviennent dans la bascule mobile, où la rangée redevient pleine largeur : c'est exactement le montage de `.site-nav__link` ci-dessus. */ .site-nav__sous-lien .site-nav__fleche { display: none; } .site-nav__sous-lien:hover .site-nav__fleche, .site-nav__sous-lien:focus-visible .site-nav__fleche { translate: 0.25rem 0; } .site-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } /* ---------- Bouton menu mobile ---------- La maquette ne couvre pas le mobile : ce menu est une proposition. Trois barres qui se transforment en croix à l'ouverture. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-right: calc(var(--sp-2) * -1); border-radius: var(--radius-sm); } .nav-toggle__bars { position: relative; display: block; width: 1.25rem; height: 2px; background-color: var(--text-strong); transition: background-color var(--dur-fast) var(--ease-out); } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--text-strong); transition: transform var(--dur-base) var(--ease-out); } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav-toggle[aria-expanded=true] .nav-toggle__bars { background-color: transparent; } .nav-toggle[aria-expanded=true] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded=true] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } /* ⚠️ LA PAGE EST VERROUILLÉE PENDANT QUE LE MENU MOBILE EST OUVERT — demandé par Hugo le 27/08/2026 : « le scroll scroll la page mais pas le menu ». Le panneau se borne maintenant à la hauteur disponible et défile tout seul (voir `.site-nav` dans la bascule ci-dessous), mais ça ne suffit pas : quand il tient à l'écran il n'a RIEN à consommer, et le geste trouve toujours la page dessous — le contenu glisse derrière un menu ouvert. La classe est posée sur `` par main.js, comme reveal.js pose la sienne. Sur `` elle n'aurait aucun effet : c'est l'élément racine qui est le conteneur de défilement. Elle ne vit que le temps de l'ouverture, et l'ouverture n'existe que sous `lg` — au retour en bureau le script ferme le menu et la retire. ⚠️ `scrollbar-gutter` VA AVEC LE VERROU, ce n'est pas une précaution : sur une fenêtre de bureau étroite (sous 960 px, ascenseur classique), le `overflow: hidden` escamote l'ascenseur et toute la page saute de sa largeur. Le gutter réserve la place qu'il occupait — zéro décalage. */ html.menu-ouvert { overflow: hidden; scrollbar-gutter: stable; } /* ---------- Bascule mobile ---------- ⚠️ LA MAQUETTE MOBILE DU 27/08/2026 GOUVERNE CE BLOC, et elle diffère de la barre de bureau sur trois points — voir aussi partials/header.njk : 1. LES SÉPARATEURS TRAVERSENT L'ÉCRAN d'un bord à l'autre. C'est la raison pour laquelle la marge latérale a QUITTÉ la nav pour passer sur chaque rangée : portés par des rangées rentrées dans une nav elle-même rentrée, les filets s'arrêtaient à `--container-pad` de chaque bord. Chaque rangée porte donc son propre retrait, et son filet court sur toute la largeur. ⚠️ Ne pas remettre de `padding-inline` sur `.site-nav` : ça les rognerait tous d'un coup, sans qu'aucune règle ne le dise. 2. UNE TÊTE DE DÉROULANT EST L'INTITULÉ DE SA SECTION, posé en haut à gauche au-dessus de sa liste et à la taille des autres entrées. Le groupe passe donc en colonne : il est une RANGÉE en `flex`, et le menu redevenant statique ici, l'intitulé et sa liste restaient CÔTE À CÔTE, tassés. 3. CHAQUE RANGÉE QUI MÈNE QUELQUE PART SE TERMINE PAR UNE FLÈCHE, au bord droit — y compris au premier niveau, où la barre de bureau n'en a pas. ⚠️ Y COMPRIS UNE TÊTE DE DÉROULANT QUI MÈNE QUELQUE PART, depuis que « Solution » est la seule route du menu vers /produit/ (27/08/2026, demande d'Hugo). C'est le gabarit qui tranche, sur l'ADRESSE de l'entrée et non sur son intitulé : « Ressources » n'a qu'une ancre morte et reste sans flèche. Un quatrième point a vécu deux jours et n'est plus : le déroulant avait un second niveau, rentré du même cran que le premier pour ne pas repousser les libellés hors du champ. La rangée qui l'ouvrait a été retirée le 27/08/2026, le panneau est redevenu plat, et ses deux règles sont parties avec elle. */ @media (max-width: 60rem) { .nav-toggle { display: inline-flex; } .site-nav { position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; /* Aucune marge latérale ni en haut : c'est chaque rangée qui porte son retrait (point 1 ci-dessus) et sa marge intérieure haute. Ne reste que l'air sous la dernière, avant le filet de fermeture du panneau. */ padding: 0 0 var(--sp-6); /* ⚠️ BORNÉ À LA HAUTEUR DISPONIBLE, ET DÉFILANT. Le panneau est en `position: absolute` DANS un en-tête collant : il ne défile jamais avec la page, donc plus haut que l'écran son bas est INATTEIGNABLE — et le geste emporte la page derrière. Le verrou qui va avec est `html.menu-ouvert`, juste au-dessus de ce bloc. ⚠️ LE `svh` EST DIVISÉ PAR L'ÉCHELLE DU CHROME, ET C'EST OBLIGATOIRE. `.site-header` porte `zoom: var(--echelle-chrome)` (voir _tokens.scss) : tout ce qui s'écrit ici est peint 17,6 % plus grand. Une unité de viewport se résout bien contre le viewport, puis se fait zoomer comme le reste — un `100svh` brut vaudrait 117,6 % de l'écran, et le panneau reprendrait exactement le débordement qu'on cherche à retirer. La hauteur de l'en-tête, elle, se retire en `--h-entete-brute` : cette cote est déjà écrite dans ce repère, c'est à ça que sert le couple des deux jetons. `svh` et non `vh` : sur mobile `vh` compte la barre d'adresse rétractée, donc une hauteur qu'on n'a pas à l'instant où le menu s'ouvre. */ max-block-size: calc(100svh / var(--echelle-chrome) - var(--h-entete-brute)); overflow-y: auto; /* Arrivé au bout du panneau, le geste ne se propage pas à la page. */ overscroll-behavior: contain; background-color: var(--bg-page); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); /* Fermé par défaut : on masque sans retirer du flux pour pouvoir animer, mais `visibility` empêche le focus clavier d'y entrer. */ visibility: hidden; opacity: 0; transform: translateY(-0.5rem); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); } .site-nav[data-open=true] { visibility: visible; opacity: 1; transform: translateY(0); } .site-nav__link { padding-block: var(--sp-4); padding-inline: var(--container-pad); font-size: var(--fs-md); border-bottom: 1px solid var(--border-subtle); border-radius: 0; justify-content: space-between; } /* La flèche du premier niveau, rétablie (point 4). */ .site-nav__link .site-nav__fleche { display: inline; } /* Et la rangée « Connexion » apparaît, en tête du menu. */ .site-nav__link--connexion { display: flex; } /* Le déroulant redescend dans le flux, déplié sous son entrée : au doigt, un panneau qui s'ouvre au survol n'existe pas. Toutes les propriétés posées plus haut sont donc annulées ici, y compris le chevron, qui n'annonce plus rien à ouvrir. */ .site-nav__groupe { /* ⚠️ EN COLONNE — voir le point 2 en tête de bloc. Sans cette ligne l'intitulé de section et sa liste se partagent une rangée. */ flex-direction: column; align-items: stretch; } .site-nav__menu { position: static; min-width: 0; /* Pas de retrait ici : il est passé sur les rangées, pour que le filet de fermeture du groupe traverse l'écran comme les autres. */ padding: 0 0 var(--sp-3); background-color: transparent; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; box-shadow: none; /* ⚠️ `inherit` ET SURTOUT PAS `visible`. `visibility` S'HÉRITE, et un enfant `visible` sous un parent `hidden` EST VISIBLE — donc cliquable et atteignable au clavier. Écrite `visible` (c'était le cas jusqu'au 27/08/2026), cette ligne ressortait les huit rangées de « Solution » et « Ressources » du panneau FERMÉ : l'œil ne les voyait pas — le panneau porte `opacity: 0` — mais `opacity` n'empêche ni le clic ni le focus, et le panneau couvre presque tout l'écran. Un appui n'importe où atterrissait donc sur un lien du menu, et la tabulation traversait un menu fermé. ⚠️ NE PAS « CORRIGER » ÇA EN `pointer-events: none` SUR LE PANNEAU FERMÉ : ça rattraperait le clic et laisserait le focus clavier entrer. C'est exactement pour ça que tout ce panneau se ferme en `visibility` et non en `opacity` seule — il suffit de le laisser hériter. Le `opacity: 1` reste nécessaire, lui : il défait le `0` de la règle de bureau, et c'est le panneau entier qui porte le fondu. Les deux règles `:focus-within` / `:hover` du déroulant de bureau battent celle-ci en spécificité (0,3,0 contre 0,1,0) et ne sont pas annulées ici : elles sont INATTEIGNABLES au doigt comme sur une fenêtre étroite, parce qu'un élément `visibility: hidden` ne reçoit pas le pointeur et n'est pas focusable — le panneau fermé ne peut donc être ni survolé ni focusé. Les neutraliser serait du code mort que rien ne signalerait. */ visibility: inherit; opacity: 1; transform: none; } .site-nav__groupe .site-nav__chevron { display: none; } /* Le trait passe sous le déroulant, pas entre « Solution » et ses cinq lignes : elles forment un seul bloc. */ .site-nav__groupe .site-nav__link { border-bottom: 0; } /* La rangée du déroulant, rentrée d'un cran sous l'intitulé de sa section. Le retrait est dans la marge intérieure de la rangée, pas dans celle de la liste : c'est ce qui laisse le filet de fermeture traverser. */ .site-nav__sous-lien { /* ⚠️ LE FLEX REVIENT ICI. La rangée est en bloc sur le bureau, où elle porte son intitulé PUIS sa description ; au doigt elle redevient « libellé à gauche, flèche au bout », qui est la maquette du 27/08/2026. */ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); padding-inline: calc(var(--container-pad) + var(--sp-4)) var(--container-pad); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: normal; border-radius: 0; } /* ---------- CE QUE LE PANNEAU LAISSE AU VESTIAIRE ---------- ⚠️ LA MAQUETTE MOBILE A ÉTÉ TRANCHÉE SÉPARÉMENT LE 27/08/2026, et le panneau de bureau ne doit pas déborder dessus. Trois choses ne se rendent donc pas au doigt : · LA CARTE de famille. Elle mène à /produit/, où l'entrée « Solution » mène déjà — au doigt cette entrée EST un lien, alors qu'elle n'ouvre rien sur le bureau. La carte y ferait donc le doublon qu'on a retiré le 27/08 en supprimant « La solution complète ». · LE SURTITRE. Sur mobile la tête de déroulant sert déjà d'intitulé de section, posé au-dessus de sa liste : deux intitulés pour une liste. · LE PIED. « Parler à un expert » est déjà dans la barre, et le menu déplié occupe presque tout l'écran — le bouton est à un pouce. Les descriptions partent avec : elles doublent la hauteur de chaque rangée dans un menu qui en empile déjà huit sur un écran de téléphone. Le point de pilier et le cartouche « New » RESTENT : ils tiennent sur la ligne d'intitulé sans la casser, et le cartouche porte une information que rien d'autre ne dit. */ .site-nav__carte, .site-nav__surtitre, .site-nav__texte { display: none; } /* ⚠️ LES FLÈCHES REVIENNENT, elles. Masquées sur le bureau — voir `.site-nav__sous-lien .site-nav__fleche` plus haut —, elles retrouvent ici leur emploi : la rangée redevient pleine largeur, et la maquette du 27/08/2026 en veut une au bout de chacune de celles qui mènent quelque part. Les rangées inertes n'en portent pas, le gabarit ne leur en met pas. */ .site-nav__sous-lien .site-nav__fleche { display: inline; } /* Les deux enfants des intégrations, rentrés d'un cran de plus que leur intitulé — comme les rangées le sont sous leur tête de section. */ /* ⚠️ `ul.` ICI AUSSI. La règle de bureau a dû monter à `ul.site-nav__enfants` pour battre le reset `ul[class]` du site ; à une seule classe, cette surcharge-ci ne la battait plus et le retrait de bureau restait en place, en s'ajoutant à celui des rangées mobiles. */ ul.site-nav__enfants { padding: 0; } .site-nav__enfant { padding-block: var(--sp-3); padding-inline: calc(var(--container-pad) + var(--sp-4) * 2) var(--container-pad); margin-inline-start: 0; border-radius: 0; font-size: var(--fs-sm); } /* Le panneau redescend dans le flux : la grille de deux colonnes et la largeur écrite plus haut n'ont plus de sens, il prend la mesure de l'écran. */ .site-nav__menu, .site-nav__menu--large { display: block; inline-size: auto; } .site-nav__grille, .site-nav__grille--colonne { grid-template-columns: 1fr; margin: 0; } /* ⚠️ LE REMPLISSAGE PAR COLONNES EST ANNULÉ, ET CE N'EST PAS UNE PRÉCAUTION. Laissé en place sur une grille ramenée à une colonne, il empilerait les cinq entrées sur les TROIS rangs déclarés puis en ouvrirait une seconde, implicite : deux rangées partiraient à droite d'un menu déplié qui, lui, fait toute la largeur de l'écran. */ .site-nav__menu--large .site-nav__grille { grid-auto-flow: row; grid-template-rows: auto; } .site-nav__briques { padding: 0; } /* Masquée : sa copie ouvre maintenant le menu déplié, en tête de la nav (voir partials/header.njk). Les deux ne se rendent jamais ensemble. */ .site-header__actions .btn--ghost { display: none; } } /* ========================================================================= LA CARTE D'ÉTIQUETTES — partials/carte-etiquettes.njk. Un intitulé en chasse fixe, puis des pilules. Origine : les deux cartes de l'anneau de « Pensé pour les entreprises qui pilotent par la donnée », sur l'accueil — Figma 185:7468. ⚠️ REMONTÉE ICI LE 18/08/2026, depuis sections/_texte-halftone.scss. Deux blocs l'emploient maintenant : `texte-halftone` la pose en absolu sur son anneau, `texte-module` la range dans le flux de sa boîte verte. Ce fichier ne porte donc que l'APPARENCE — fond, filet, rayon, typographie. Chaque bloc hôte garde SA mise en place, et c'est ce qui empêche les deux de diverger. Ne pas y remettre de `position`, de `top/left` ni d'ombre : ce sont trois choses qui appartiennent à l'endroit où la carte est posée, pas à la carte. ========================================================================= */ .carte-etiquettes { display: flex; flex-direction: column; gap: var(--sp-3); padding: clamp(var(--sp-3), 1.2vw, var(--sp-4)); border-radius: var(--radius-cadre); } .carte-etiquettes--clair { background-color: var(--c-base-main); border: 1px solid var(--border-subtle); } .carte-etiquettes--sombre { background-color: var(--c-blue-dark); border: 1px solid var(--c-blue-dark); } .carte-etiquettes__titre { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-wide); text-transform: uppercase; } .carte-etiquettes--clair .carte-etiquettes__titre { color: var(--text-muted); } .carte-etiquettes--sombre .carte-etiquettes__titre { color: var(--c-fluo); } .carte-etiquettes__liste { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; } /* Petite pilule. Ce n'est pas `.pastille` : celle-ci est un intitulé de bloc à 20-30 px, on est ici sur une étiquette de 13 px. Les deux partageraient une forme et rien d'autre. */ .carte-etiquettes__puce { padding: 0.25rem 0.8125rem; /* 4px 13px */ font-family: var(--font-mono); font-size: 0.8125rem; /* 13px */ line-height: 1.4; white-space: nowrap; border-radius: var(--radius-full); } .carte-etiquettes--clair .carte-etiquettes__puce { color: var(--c-blue-zodiac); border: 1px solid var(--border-subtle); } .carte-etiquettes--sombre .carte-etiquettes__puce { color: var(--c-white); border: 1px solid rgba(255, 255, 255, 0.35); } /* ---------- LA SORTIE : une flèche, puis LA pilule ---------- Demandée par Hugo le 16/09/2026 pour les deux cartes de l'accueil : la pile énumère le problème, la sortie donne la réponse — « CA vérifié 11,62 M€ » face à douze chiffres qui se contredisent, « Biron, source unifiée » face à douze outils dispersés. ⚠️ ELLE EST REMPLIE LÀ OÙ LES AUTRES SONT CONTOURNÉES. C'est ce qui en fait le seul objet lisible de la carte, et c'est tout son propos : à côté d'une pile où les étiquettes se masquent les unes les autres, l'aplat désigne la sortie sans qu'aucun mot n'ait à le dire. Deux aplats, un par ton : carte claire — l'aplat d'accent, libellé blanc. ⚠️ RÈGLE 10 : c'est un aplat de plus à porter du blanc, il lit donc --btn-primary-bg — le fonçage mesuré de la teinte — et JAMAIS --c-blue en direct, avec le défaut dans le repli du `var()`. Sur une page pilier, --c-blue vaut la teinte à pleine force, où le blanc tombe entre 2,12 et 4,14. carte sombre — le fluo, encre sombre. La règle 16 ne l'interdit pas : elle vise les teintes de PILIER, sur lesquelles aucune encre ne passe. Le fluo n'en est pas une, il porte --c-text-main à 15,3 — c'est déjà l'aplat de `.appel__cta` et du bouton de `partials/inscription.njk`. ⚠️ CE BLOC NE POSE QUE L'APPARENCE, jamais le placement. La sortie est rendue après la liste, donc EN DESSOUS par défaut, ce qui est le repli raisonnable pour un hôte qui n'en dit rien. Sur l'accueil elle est à DROITE de la pile, et c'est sections/_texte-halftone.scss qui le fait, en passant la carte en grille — comme il posait déjà le positionnement absolu et l'ombre. C'est lui aussi qui glisse l'origine de l'entonnoir SOUS la pile et découpe la pilule en deux lignes ; les deux tiennent à la place dont cet emploi-là dispose. */ .carte-etiquettes__sortie { display: flex; align-items: center; gap: var(--sp-2); margin: 0; } /* L'ENTONNOIR — le dessin donné par Hugo le 16/09/2026, en SVG en ligne. ⚠️ `non-scaling-stroke` EST STRUCTUREL, PAS COSMÉTIQUE. Le dessin est coté pour 923 px de large et se rend ici autour de 157 : sans lui, un filet de 1 unité arriverait à 0,17 px, c'est-à-dire un voile gris clair au lieu d'un trait. Avec lui, l'épaisseur est lue en pixels d'écran et ne dépend plus de la taille à laquelle on pose le dessin — c'est donc aussi ce qui rend l'entonnoir redimensionnable sans rien recalculer. ⚠️ LA POINTE, ELLE, EST PLEINE ET SE MET À L'ÉCHELLE : elle est redessinée à 38 unités là où le fichier d'origine en donnait 8, qui se seraient rendues à 1,4 px. Agrandir l'entonnoir la grandit avec lui, quand les filets, eux, ne bougent pas — c'est voulu, une pointe d'un pixel ne se verrait pas. La taille par défaut n'est là que pour qu'un hôte qui n'en dit rien obtienne un objet raisonnable ; sur l'accueil elle est reprise en cote (voir sections/_texte-halftone.scss). */ .carte-etiquettes__entonnoir { display: block; block-size: 3rem; inline-size: auto; aspect-ratio: 923/638; } .carte-etiquettes__entonnoir path { vector-effect: non-scaling-stroke; } .carte-etiquettes--clair .carte-etiquettes__entonnoir { color: var(--btn-primary-bg, var(--c-blue)); } .carte-etiquettes--sombre .carte-etiquettes__entonnoir { color: var(--c-fluo); } /* La pilule de sortie est un `` là où les autres sont des `
  • ` : il lui faut donc un bloc pour que son rembourrage compte. Le `flex` du parent le lui donne, mais on le dit ici pour que la règle tienne seule. */ .carte-etiquettes__puce--sortie { display: inline-block; } .carte-etiquettes--clair .carte-etiquettes__puce--sortie { color: var(--c-white); background-color: var(--btn-primary-bg, var(--c-blue)); border-color: var(--btn-primary-bg, var(--c-blue)); } .carte-etiquettes--sombre .carte-etiquettes__puce--sortie { color: var(--c-text-main); background-color: var(--c-fluo); border-color: var(--c-fluo); } /* ---------- Les pilules à l'aplat d'accent ---------- Demandées par Hugo le 21/08/2026 pour « En coulisses » de /cas-clients/hardloop/. La carte garde son fond clair ; seules les pilules se remplissent. ⚠️ LA RÈGLE 16 DE MAQUETTE.md NE COUVRE PAS CE CAS. Elle veut une pastille CONTOURNÉE quand la teinte est celle d'un pilier, parce qu'aucune encre ne passe sur les quatre teintes en aplat (le blanc échoue sur trois, le noir sur le violet). Le bleu du site n'est pas dans cette table : il porte du blanc à 5,84, puisque c'est l'aplat de `.btn--primary`. L'aplat est donc légitime ici. ⚠️ MAIS LA RÈGLE 10 S'APPLIQUE : c'est un aplat de plus à porter du blanc, après `.btn--primary`, `.hero-page__badge` et la carte du `comparatif`. Il lit donc --btn-primary-bg — le fonçage mesuré de la teinte — et JAMAIS --c-blue en direct. Sur une page pilier, --c-blue vaut la teinte du pilier à pleine force, où le blanc tombe entre 2,12 et 4,14. ⚠️ ET LE DÉFAUT VA DANS LE REPLI DU `var()`, jamais dans une déclaration à part : une propriété personnalisée posée SUR l'élément bat celle qu'un ancêtre hérite, donc `--btn-primary-bg: var(--c-blue)` écrit ici masquerait la valeur que `.ton-page--*` pose sur `
    `. C'est la convention du site, expliquée dans CLAUDE.md. ⚠️ SA PLACE DANS LE FICHIER EST LOAD-BEARING, comme celle de `puces: blanc` juste en dessous : à spécificité égale (deux classes), c'est l'ordre qui tranche. Les DEUX remplissages sont donc écrits APRÈS les deux tons — ce n'était pas le cas au départ, et `ton: sombre` + `puces: bleu` aurait rendu des pilules contournées sans que rien ne le signale. La règle à tenir : les tons de carte d'abord, les remplissages de pilule ensuite. ⚠️ `border-color: transparent` ET NON `border: none` : l'atome pose un filet d'1px, et le retirer ferait rétrécir la pilule de 2px en largeur comme en hauteur. On garde la géométrie et on éteint la couleur — même remède que les pilules du dictionnaire dans sections/_texte-module.scss. */ .carte-etiquettes--puces-bleu .carte-etiquettes__puce { background-color: var(--btn-primary-bg, var(--c-blue)); border-color: transparent; color: var(--c-white); } /* ---------- Les pilules en APLAT BLANC ---------- Ajouté le 21/08/2026 pour la fiche du client de /cas-clients/hardloop/, en deux temps. Hugo a d'abord demandé d'inverser la carte et ses pilules — « on peut inverser le fond du conteneur et le fond des badges ? » — puis de passer la carte au sombre : « tu peux le mettre en fond sombre finalement ». ⚠️ C'EST UN REMPLISSAGE DE PILULE, PAS UN TON DE CARTE, et le premier essai s'y était trompé : il avait ajouté un ton `bleu` qui portait les deux à la fois. Le fond sombre existait déjà — c'est `ton: sombre` — donc il n'y avait qu'à composer les deux champs, ce qu'ils savent faire depuis `puces: bleu`. Un ton de plus aurait fait deux objets là où un suffit, et il n'aurait plus eu d'utilisateur. ⚠️ CE QU'IL SURCHARGE : le ton `sombre` rend ses pilules CONTOURNÉES, libellé blanc sur le bleu nuit de la carte. Ici elles sont pleines, donc leur encre repasse au sombre. ⚠️ ET SA PLACE DANS LE FICHIER EST LOAD-BEARING : les deux règles ont la MÊME spécificité (deux classes), donc c'est l'ordre qui tranche, et celle-ci doit être écrite APRÈS celle du ton. Posée juste sous la déclaration de la CARTE sombre — ce que le premier essai faisait — elle tombait avant la règle de pilule du même ton et n'avait aucun effet : les pilules restaient contournées à libellé blanc. Défaut vu dans le CSS compilé le 21/08/2026. Ne pas la remonter. ⚠️ ET LES PILULES NE SONT PAS `.on-dark` POUR AUTANT, alors que la carte est sombre. Elles sont BLANCHES : leur contenu reste dans les rôles du contexte clair, et c'est ce qui permet à un libellé éteint et à une valeur forte de cohabiter dedans. `.on-dark` sur la carte aurait mis leurs deux encres au blanc, illisibles sur elles. `border-color: transparent` et non `border: none` : l'atome pose un filet d'1px, et le retirer ferait rétrécir la pilule de 2px en largeur comme en hauteur. On garde la géométrie et on éteint la couleur — même remède que les pilules du dictionnaire. */ .carte-etiquettes--puces-blanc .carte-etiquettes__puce { background-color: var(--c-white); border-color: transparent; color: var(--c-blue-zodiac); } /* ========================================================================= LA COMPOSITION DES TROIS FORMES — partials/trio.njk. ⚠️ DÉPLACÉE ICI DEPUIS `sections/_texte-illustre.scss` LE 20/08/2026, quand le hero de la page « Pourquoi Biron » a eu besoin du même diagramme. C'est la règle du site — l'atome vit dans `partials/`, son apparence dans ce fichier, et le bloc hôte ne garde que le placement. Les deux hôtes d'aujourd'hui la posent dans deux moitiés opposées : `.texte-illustre__visuel` à gauche, `.hero-page__visuel` à droite. ========================================================================= */ /* ========================================================================= La composition des trois formes — Figma 197:5924. Trois formes de marque qui se chevauchent en diagramme, chacune portant sa promesse, et la marque à leur intersection. La légende dessous nomme ce que l'image montre. TOUTES LES COTES SONT EN POURCENTAGE de la scène, relevées sur la maquette (cadre de 528 × 582, dont 528 × 510 pour la scène et le reste pour la légende). La composition est donc rigoureusement homothétique : elle tient à n'importe quelle largeur sans réglage. Les corps de texte suivent, eux aussi. Ils sont en `cqw` — pourcentage de la largeur du conteneur — et non en `rem` : un texte à taille fixe dans une image qui se redimensionne finit par déborder de sa forme d'un côté ou par s'y perdre de l'autre. Le plancher en `max()` évite qu'il devienne illisible sur les écrans les plus étroits. ⚠️ Les formes sont des MASQUES, pas des images. Les exports Figma portent des teintes voisines mais pas identiques à celles du site — #D6F224 contre le fluo #d1ff00, #3B4EE8 contre le bleu #3f58d7. Posées telles quelles, elles auraient introduit un second fluo à côté du vrai, sur la même page. En masque, la forme vient de l'export et la couleur des jetons. La marque du centre fait exception : c'est une image, parce qu'elle porte DEUX couleurs — ce qu'un masque ne sait pas faire — et que son export est déjà exactement aux couleurs du site. ========================================================================= */ .trio { container-type: inline-size; margin: 0; } .trio__scene { position: relative; /* 528 × 510 : le cadre de la maquette moins la bande de légende. */ aspect-ratio: 528/510; } /* Les trois formes ont exactement la même taille — 282 × 282 dans la maquette. Seuls leur ancrage, leur découpe et leur teinte changent. */ .trio__forme { position: absolute; width: 53.41%; /* 282 / 528 */ height: 55.29%; /* 282 / 510 */ background-color: var(--trio-ton); mask-image: var(--trio-src); mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-image: var(--trio-src); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; } .trio__forme--logiciel { --trio-ton: var(--c-fluo); --trio-src: url("/assets/shapes/Trio - Logiciel.svg"); top: 0; left: 0; /* Origine = le centre de la SCÈNE, exprimé dans les coordonnées de cette forme-ci. Voir le bloc « Le lent tour » plus bas. */ transform-origin: 93.6% 90.4%; animation-name: trio-orbite-a; animation-duration: 11.1s; } .trio__forme--equipe { --trio-ton: var(--c-blue); --trio-src: url("/assets/shapes/Trio - Equipe.svg"); top: 10.2%; /* 52 / 510 */ left: 46.59%; /* 246 / 528 */ transform-origin: 6.38% 71.98%; animation-name: trio-orbite-b; animation-duration: 12.3s; } .trio__forme--accompagnement { --trio-ton: var(--c-blue-dark); --trio-src: url("/assets/shapes/Trio - Accompagnement.svg"); top: 44.71%; /* 228 / 510 */ left: 20.45%; /* 108 / 528 */ transform-origin: 55.33% 9.57%; animation-name: trio-orbite-c; animation-duration: 12.9s; } /* ========================================================================= Le lent tour. Les quatre pièces tournent AUTOUR DU CENTRE DE LA SCÈNE, pas autour du leur : chacune porte donc son propre `transform-origin`, qui est ce même point unique exprimé dans ses coordonnées à elle. Le calcul est toujours le même — pour l'axe X, (50 % − left) / largeur ; pour l'axe Y, (50 % − top) / hauteur. C'est pour ça que ces nombres n'ont l'air de rien et qu'il ne faut surtout pas les arrondir « pour faire propre » : déplacer une pièce oblige à les recalculer. ⚠️ Les libellés, eux, NE BOUGENT PAS. C'est ce qui borne l'amplitude : à 9°, la forme la plus éloignée du centre décrit un arc d'environ 26 px, ce que son libellé encaisse sans sortir de la couleur — les formes font 282 px de large. Beaucoup plus ample, et les mots se décolleraient de leur forme. L'alternative aurait été de faire orbiter les libellés avec elles en les contre-tournant pour qu'ils restent droits ; ça demande une enveloppe par libellé et deux animations à tenir en phase, pour un gain discutable. LES CADENCES ONT ÉTÉ CHERCHÉES EN DEUX TEMPS, et l'écart entre les deux mérite d'être connu avant d'y retoucher. Un premier calage les avait posées pour qu'un aller-retour tienne dans les dix secondes que la section retient — l'animation étant en `alternate`, un cycle complet vaut DEUX FOIS la durée, ce qui donnait 3,7 à 4,9 s. Le mouvement s'y voyait, mais il s'y voyait trop. Elles ont été triplées le 14/08/2026 : 11,1 / 12,3 / 12,9 / 14,7 s, soit des cycles de 22 à 29 s. On ne voit donc plus qu'une fraction du balancement en passant, et c'est le parti pris — le mouvement se sent, il ne se suit pas. Les quatre durées restent sans diviseur commun : la composition respire au lieu de tourner, et les quatre mouvements ne retombent en phase qu'au bout de dizaines d'heures. Le coût est négligeable, contrairement à la trame animée essayée sur « Au cœur de Biron » : une rotation est composée par le GPU, qui réutilise une texture déjà peinte. Rien n'est repeint à chaque image. ========================================================================= */ .trio__forme, .trio__marque-fond { animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes trio-orbite-a { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } } @keyframes trio-orbite-b { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } } @keyframes trio-orbite-c { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } } /* Celle-ci n'est pas une orbite mais une rotation SUR PLACE, d'où l'amplitude plus franche : rien ne se déplace, donc rien ne peut se décoller de son libellé. */ @keyframes trio-tour-centre { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } } @media (prefers-reduced-motion: reduce) { .trio__forme, .trio__marque-fond { animation: none; } } /* Aucun `z-index` nulle part : formes, libellés et marque sont tous en position absolue, donc ils se peignent dans l'ordre du DOM. L'ordre du gabarit EST l'ordre des plans — fluo, bleu, bleu nuit, puis les libellés, puis la marque. */ .trio__label { position: absolute; margin: 0; font-family: var(--font-titre); font-weight: var(--fw-bold); font-size: max(0.75rem, 4.55cqw); /* 24px sur les 528px de la maquette */ line-height: 1.25; text-align: center; text-wrap: balance; } .trio__label--logiciel { top: 21.76%; /* 111 / 510 */ left: 12.5%; /* 66 / 528 */ width: 26.14%; /* 138 / 528 */ color: var(--c-blue-dark); } /* ⚠️ SEUL LIBELLÉ DES TROIS À NE PLUS PORTER LA COTE DE LA MAQUETTE, et c'est la longueur de son texte qui l'impose. Il disait « Une équipe data » et tenait sur DEUX lignes ; depuis le 20/08/2026 il dit « Une expertise data & technique » et en prend QUATRE. Or les libellés sont ancrés par le HAUT : les deux lignes de plus sont donc descendues, et « technique » sortait par le bas-droit de la forme bleue, là où elle s'incurve. Il remonte d'exactement UNE hauteur de ligne — 1,25 × 4,55cqw, soit 30 des 510 unités de la scène, soit 5,88 % — ce qui replace le CENTRE optique du libellé où était celui de l'ancien. 151 − 30 = 121, d'où les 23,73 %. ⚠️ Le compte de lignes ne dépend PAS de la largeur d'affichage, et c'est ce qui rend ce décalage fixe légitime : la boîte est en % de la scène et le corps en `cqw`, les deux suivent donc la même échelle et le point de repli ne bouge jamais. Un libellé qui déborde à une largeur déborde à toutes. ⚠️ Corollaire : TOUT CHANGEMENT DE CE TEXTE DEMANDE DE REVOIR CETTE COTE. C'est le prix de l'ancrage par le haut, et il est assumé — les trois libellés sont posés au pourcentage sur une composition homothétique, pas mis en page. --------------------------------------------------------------------- IL EST AUSSI DÉCALÉ VERS LA DROITE, et c'est le même texte plus long qui l'impose. La marque du centre occupe x 172,6 → 331,9 ; la boîte du libellé partait de 319,5, elle EMPIÉTAIT donc de 12,5 unités sur le losange blanc. Tant que le libellé tenait sur deux lignes centrées, le chevauchement tombait dans le blanc au-dessus et en dessous du losange ; à quatre lignes, il tombe en plein dessus. Décalé de 20 unités — 319,5 + 20 = 339,5, d'où les 64,3 %. C'est le minimum qui dégage la marque, avec 7,6 unités de reste. ⚠️ ON NE PEUT PAS ALLER BEAUCOUP PLUS LOIN. À la hauteur du libellé, la forme bleue s'étend jusqu'à x ≈ 508 ; la ligne la plus large (« expertise », ~119 unités) centrée dans la boîte va jusqu'à 470. Il reste donc une marge, mais elle se referme vite — la forme s'incurve. */ .trio__label--equipe { top: 23.73%; /* 121 / 510 — la cote de la maquette (151) moins une ligne */ left: 64.3%; /* 339.5 / 528 — 319,5 dans la maquette, décalé pour dégager la marque */ width: 26.89%; /* 142 / 528 */ color: var(--c-white); } .trio__label--accompagnement { top: 67.84%; /* 346 / 510 */ left: 25.66%; /* 135.5 / 528 */ width: 42.99%; /* 227 / 528 */ color: var(--bg-page); } /* ---------- La marque du centre ---------- Deux calques dans la même boîte : le losange, qui tourne, et le logo, qui ne bouge pas. Les deux exports partagent la zone de dessin de l'original, ils se superposent donc au pixel près — `inset: 0` suffit, rien à recaler. ⚠️ Le losange tourne sur LUI-MÊME, pas autour du centre de la scène comme les trois autres formes. C'est ce qui permet au logo de rester droit : une orbite l'aurait déplacé, et il aurait fallu le faire suivre. Une rotation en place ne déplace rien, le logo n'a qu'à ne pas tourner. */ .trio__marque { position: absolute; top: 29.61%; /* 151 / 510 */ left: 32.69%; /* 172.6 / 528 */ width: 30.19%; /* 159.4 / 528 */ aspect-ratio: 159.393/164.375; } .trio__marque-fond, .trio__marque-logo { position: absolute; inset: 0; mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; } .trio__marque-fond { background-color: var(--bg-page); mask-image: url("/assets/shapes/Trio - Marque fond.svg"); -webkit-mask-image: url("/assets/shapes/Trio - Marque fond.svg"); /* En place : l'origine est son propre centre, contrairement aux trois formes qui portent celui de la scène. L'amplitude peut donc être plus franche, une rotation en place ne décale aucun texte. */ transform-origin: 50% 50%; animation-name: trio-tour-centre; animation-duration: 14.7s; } .trio__marque-logo { background-color: var(--c-blue-dark); mask-image: url("/assets/shapes/Trio - Marque logo.svg"); -webkit-mask-image: url("/assets/shapes/Trio - Marque logo.svg"); } /* La légende, en chasse fixe comme tous les eyebrows du site. Les capitales viennent du style et non des données : le texte reste lisible dans le YAML, et une traduction n'a pas à les porter. Elle est posée dans un cartouche blanc, sans filet : le crème de la page passe derrière l'illustration, et une ligne de texte y flottait sans attache. Le blanc lui donne son assise — c'est le seul aplat blanc de la moitié qui la porte, ce qui suffit à la rattacher à l'image. `width: fit-content` plus les marges automatiques : le cartouche épouse son texte et se centre. Une `figcaption` est un bloc, elle prendrait sinon toute la largeur et le blanc s'étalerait d'un bord à l'autre. */ .trio__legende { width: fit-content; margin-block-start: 6%; /* un peu moins que les 45px de la maquette, le rembourrage du cartouche reprenant la différence */ margin-inline: auto; padding: 0.5em 1.1em; background-color: var(--c-white); font-family: var(--font-mono); font-size: max(0.625rem, 2.37cqw); /* 12,5px sur les 528px de la maquette */ letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: var(--c-blue-dark); } /* ========================================================================= LE REPÈRE — partials/repere.njk. Un chiffre et ce qu'il compte. Origine : les deux rangées de « À propos » (Figma 144:4980 et 144:5114). ⚠️ EXTRAIT DE `sections/_reperes.scss` LE 20/08/2026, le jour de sa création, quand les trois chiffres de la section 01 sont rentrés DANS la boîte du texte : deux hôtes, donc l'atome sort. C'est la règle du site — l'atome porte son apparence, le bloc hôte son placement (en rangée pour `reperes`, en colonne pour `texte-module`). ⚠️ AUCUN `order` : le gabarit écrit le `
    ` avant le `
    `, donc l'ordre du DOM est déjà l'ordre visuel. Le raisonnement sur qui est le terme et qui est la valeur est en tête du partial. ========================================================================= */ .repere { display: flex; flex-direction: column; gap: var(--sp-2); } /* ⚠️ LA TAILLE EST UN BOUTON, ET SON DÉFAUT EST DANS LE REPLI DU `var()`. Les chiffres d'une carte de cas client sont plus petits que ceux d'une rangée de section (demande d'Hugo, 21/08/2026 : « les chiffres clés sont un peu trop grands ») : l'hôte pose --repere-taille sur un ancêtre, et l'atome n'a rien à savoir de lui. Écrire le défaut dans une déclaration à part au lieu du repli l'aurait rendu insurchargeable — une propriété posée SUR l'élément bat toujours la même héritée d'un ancêtre. */ .repere__valeur { margin: 0; font-family: var(--font-titre); font-size: var(--repere-taille, var(--fs-h2)); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); /* La teinte d'accent : le bleu du site sur le crème, le fluo dans une boîte sombre — c'est `.on-dark` qui bascule, rien à déclarer ici. */ color: var(--text-accent); } .repere__libelle { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--text-muted); } /* ⚠️ --text-muted TIENT SUR LE BLEU NUIT, et cette note est là pour qu'on ne « corrige » pas ce qui va bien. `.on-dark` le passe au casper (#aab4d2), qui donne 6,4 sur #202b5c : c'est le cas pour lequel le rôle a été calé. C'est seulement sur une teinte de PILIER qu'il casse (2,29 sur le violet, 2,35 sur le rose) — voir la règle 11 de MAQUETTE.md. */ /* ---------- L'infobulle de /tarifs/ ---------- Une seule bulle, réutilisée par les quinze déclencheurs du grand tableau, et positionnée par assets/js/tarifs.js. ⚠️ ELLE VIT SUR ``, PAS DANS LE TABLEAU, et c'est ce qui l'empêche d'être rognée : le tableau est dans un conteneur qui défile latéralement. D'où `position: fixed` — ses coordonnées sont celles de la fenêtre, que le script relit à chaque ouverture. Elle n'existe que sur cette page : son balisage vient d'une maquette et non des blocs du site, où l'aide d'un critère se rend en CSS pur — voir `aide` dans blocs/comparatif.njk. */ .tarifs-bulle { position: fixed; z-index: 50; max-inline-size: 22rem; padding: var(--sp-3) var(--sp-4); font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--text-on-inverse); background-color: var(--c-blue-zodiac); border-radius: var(--radius-sm); pointer-events: none; } /* Le « i » du tableau : la maquette le pose sans état de focus, ce qui le rend invisible au clavier. On lui en donne un. */ [data-tip]:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; } /* ========================================================================= Ouverture — plan commun au hero et au bandeau clients. La trame et les formes fluo doivent traverser d'un bloc à l'autre sans césure. C'est ce conteneur qui porte le rognage : les formes ancrées au visuel produit peuvent donc déborder sous le hero et se poursuivre derrière les références clients, au lieu d'être coupées à la frontière. ========================================================================= */ .intro { position: relative; overflow: hidden; isolation: isolate; /* Respiration avant la trame halftone. Ce vide laisse les formes fluo finir leur course et la grille s'éteindre progressivement, au lieu que tout s'arrête net contre la transition. */ padding-bottom: clamp(4rem, 2rem + 6vw, 9rem); } .intro__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* La trame démarre à 28 % de la hauteur du groupe et descend jusqu'en bas, bandeau clients compris. Le fondu du haut la fait naître du fond plutôt que de la poser sur une arête. */ .intro__grid { position: absolute; inset-inline: 0; top: 28%; bottom: 0; } /* ⚠️ SURCHARGE LOCALE, PAS UNE MODIFICATION DU JETON. `--grid-opacity` vaut 0,55 sur `.grid-pattern` (sections/_hero.scss) et sert AUSSI à la FAQ, aux blocs texte-illustré et à « Recruter ou externaliser » de /pourquoi-biron/ : y toucher éclaircirait la trame partout. 0,30 est la valeur retenue le 31/08/2026, en même temps que l'illustration fixe du hero — son fond transparent laisse enfin voir la trame derrière l'image, et à 0,55 elle passait devant le sujet. ⚠️ LES DEUX CLASSES SONT INDISPENSABLES. `.intro__grid` seul ne suffit pas : il est à la même spécificité que `.grid-pattern`, et main.scss importe `sections/intro` AVANT `sections/hero` — c'est donc 0,55 qui l'emportait. Premier essai fait, et raté exactement là. */ .intro__grid.grid-pattern { --grid-opacity: 0.3; } /* ========================================================================= HERO ========================================================================= */ /* Pas de `overflow: hidden` ici : c'est .intro qui rogne, pour que les formes fluo ancrées au visuel puissent se poursuivre derrière le bandeau clients. `isolation` en revanche est nécessaire, et ne rogne rien — elle ne fait qu'enfermer les niveaux d'empilement du hero. Sans elle, le z-index 2 de .hero__inner remonte au niveau de .intro et fait passer les formes PAR-DESSUS le cadre clients, qui est à 1. */ .hero { position: relative; isolation: isolate; padding-top: clamp(3rem, 1rem + 6vw, 5.5rem); padding-bottom: 0; } /* Le hero déborde la grille de 80rem du reste du site : c'est le seul moyen qu'il gagne réellement en largeur au-delà de 1376px. */ .hero .container { max-width: calc(var(--container-hero) + var(--container-pad) * 2); } .hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero__eyebrow { margin-bottom: var(--sp-4); } /* 68rem et non 56rem comme la maquette : la phrase la plus longue du rotateur mesure 1047 px à 44 px, il lui faut ce dégagement pour tenir sur une ligne. La ligne 1 du titre (881 px) n'en profite pas — elle est plus courte et reste centrée. */ .hero__title { max-width: 100%; margin-bottom: var(--sp-6); line-height: 1.06; letter-spacing: -0.032em; /* Neutralise le `text-wrap: balance` hérité de la règle h1 de _base.scss, qui entre en conflit avec le `nowrap` du rotateur. `wrap` et surtout pas `nowrap` : ce dernier n'annule pas le balance, il interdit tout retour à la ligne — et le titre sort alors de l'écran en mobile. Le contrôle du retour à la ligne se fait sur le rotateur, pas ici. */ text-wrap: wrap; } /* Le crénage se resserre quand le corps grossit : à 72 px, le serrage d'un 44 px paraît lâche. */ @media (min-width: 100rem) { .hero__title { letter-spacing: -0.042em; } } /* ⚠️ `balance` ICI, alors que le titre parent l'annule expressément — et les deux ne se contredisent pas. Sur `.hero__title`, `balance` s'applique à un bloc qui contient AUSSI le rotateur, dont les phrases sont en `nowrap` ; le calcul entre alors en conflit avec elles. Sur cette ligne-ci, il n'a que le texte de la ligne 1 à équilibrer, le rotateur étant un autre bloc. Sans lui, « Vos équipes ont besoin de chiffres fiables pour » se coupe au dernier mot possible et laisse « pour » seul sur sa ligne. `balance` répartit les mots entre les deux lignes au lieu de remplir la première. */ .hero__title-line { display: block; text-wrap: balance; } /* ---------- Rotateur de phrases ---------- Les phrases sont empilées dans une seule cellule de grille : le conteneur prend la hauteur de la plus haute et ne bouge plus. Sans ça, passer d'une phrase d'une ligne à une phrase de deux ferait sauter tout le contenu situé en dessous à chaque bascule. */ .rotator { display: grid; justify-items: center; /* Le conteneur prend la hauteur de la phrase la plus haute. Une phrase courte est donc centrée dans cette hauteur plutôt que collée en haut, ce qui évite un trou visible sous les phrases d'une seule ligne. */ align-items: center; color: var(--c-blue); } /* Ligne unique tant qu'il y a la place. En dessous de 900 px, on rend le retour à la ligne au navigateur : le forcer plus bas obligerait à descendre le titre sous 32 px. */ .rotator__phrase { grid-area: 1/1; white-space: nowrap; } @media (max-width: 56.25rem) { .rotator__phrase { white-space: normal; } } /* Le masque de chaque mot. Il coupe dans les QUATRE directions — c'est ce qui permet au mot de monter depuis le bas sans déborder, mais c'est aussi ce qui rognait les lettres sur les côtés. Chaque marge intérieure est compensée par une marge négative de même valeur : le masque grandit, la position du mot ne bouge pas. - en bas : les jambages (g, p, q) descendent sous la ligne de base - sur les côtés : dans Recoleta, l'encre de certains glyphes déborde de leur chasse (le `r` notamment), et l'interlettrage négatif de −0,042 em resserre encore les boîtes. Invisible à 44 px, criant à 72 px. Brique commune à la ligne 1 du titre et aux phrases du rotateur : les deux doivent pouvoir être révélées de la même façon. */ .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; padding-inline: 0.09em; margin-inline: -0.09em; } .word > span { display: inline-block; } /* Les phrases occupent toutes la même cellule : si rien ne les masque, elles se superposent et le titre devient illisible. On les cache donc par défaut, et le JS ne révèle que ce qu'il pilote. Ce défaut couvre tous les cas de figure — JS désactivé, GSAP absent, script oublié dans un layout — et pas seulement `.no-js`. Dans le pire des cas on perd le défilement, jamais la lisibilité. */ .rotator__phrase:not(.is-active) { opacity: 0; } /* ---------- Entrée en scène ---------- L'état masqué n'existe QUE sous la classe `hero-anim`, posée en et retirée par un chien de garde si hero.js n'a jamais pris la main. L'ancienne logique reposait sur `.no-js`, que le script inline retirait inconditionnellement : une panne de hero.js laissait alors le hero entièrement invisible. Ici, toute défaillance rend le contenu visible. */ .hero-anim [data-hero-enter] { opacity: 0; } /* Chapô : même couleur que le titre, pas de gris atténué. La mesure est bornée à ~62 caractères — au-delà, l'œil perd la ligne en revenant à la marge. */ .hero__lead { /* En `em` et non en `rem` : la mesure est indexée sur la taille du texte lui-même, donc la justification reste à ~62 caractères que le chapô fasse 17 ou 22 px. En `rem`, grossir le texte réduit la justification et le bloc change de forme au lieu de grandir. */ max-width: 34em; margin-bottom: var(--sp-8); font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--text-strong); } /* La mise en ligne / empilement est portée par .btn-group. */ .hero__actions { margin-bottom: clamp(3rem, 1rem + 5vw, 5rem); } /* ---------- Visuel produit ---------- Capture de la plateforme. En attente du visuel définitif : le bloc affiche un cadre vide au bon ratio pour ne pas fausser la mise en page. Les formes fluo sont ancrées sur ce conteneur, pas sur la page : elles dépassent de derrière le visuel. C'est ce qui les rend solidaires du bloc — elles suivent sa taille à toutes les largeurs d'écran. */ .hero__visual-wrap { position: relative; width: 100%; /* ⚠️ LARGEUR CONTENUE DEPUIS LE 31/08/2026, à la place de `var(--container-hero)`. L'illustration fixe remplace le lecteur, et « contenue » est la largeur retenue à l'arbitrage : 896 px d'affichage. ⚠️ 65,9rem ET NON 56rem, ET C'EST TOUTE LA SUBTILITÉ. L'aperçu qui a servi à trancher tournait à la racine par défaut du navigateur (16 px), où 56rem fait bien 896 px. Le site rend à 85 % (`html { font-size: 85% }`, _base.scss), donc 13,6 px : les mêmes 56rem n'y valent que 762 px, soit 15 % de moins que ce qui a été validé. 896 / 13,6 = 65,9. Reste en rem, pas en px, pour suivre la préférence de taille du visiteur — c'est la convention du site. Ce n'est pas seulement la largeur de l'image : LES FORMES FLUO SONT ANCRÉES SUR CE CONTENEUR (`.hero__shapes` est en `inset: 0`), donc les contraindre ici est ce qui les garde solidaires de l'illustration. Le poser sur le seul `` laisserait les formes s'écarter à la largeur du container. Si le lecteur revient, remettre `var(--container-hero)`. Le jeton n'est déclaré que dans labo/_hero-variants.scss : sur l'accueil il était indéfini, donc `max-width` retombait sur `none`. */ /* ⚠️ 80rem DEPUIS LE 07/09/2026, contre 65,9 auparavant : 1088 px d'affichage au lieu de 896. Demandé avec la nouvelle illustration. ⚠️ ET CE N'EST PAS LE REMÈDE AU FLOU, C'EST SON AGGRAVANT. Le fichier livré fait 1379 px de large : à 896 px d'affichage il servait 1,54 pixel par pixel d'écran, à 1088 il n'en sert plus que 1,27. Sur un écran rétina, qui en demande deux, on passe de 0,77 à 0,63. Le texte de l'illustration est donc PLUS doux qu'avant, pas moins. La netteté ne se gagne qu'à l'export : il faut 2 176 px de large pour servir 1088 en rétina. Tant que la source n'y est pas, cette cote est un choix de composition, pas de qualité. */ max-width: 80rem; margin-inline: auto; /* Le visuel se redresse depuis une légère inclinaison à l'entrée : c'est ce qui porte la profondeur du parti pris « focus-pull ». */ perspective: 1600px; } /* ---------- L'illustration fixe ---------- Elle porte sa propre transparence (WebP à bloc alpha) : pas de fond, pas de filet, pas de rayon — la trame fluo et les formes passent derrière elle. ⚠️ AUCUNE OMBRE PORTÉE, et ce n'est pas un oubli : règle 5 de MAQUETTE.md. Le `box-shadow` de `.hero__visual` appartient au cadre du lecteur, qui est un panneau opaque ; ici il dessinerait un rectangle autour d'une image détourée. */ .hero__illustration { position: relative; z-index: 2; /* Les trois copies occupent la MÊME cellule : le conteneur prend leur hauteur commune et ne bouge plus. Même dispositif que `.rotator` ci-dessus — et c'est aussi ce qui préserve la réservation de place, la cellule étant dimensionnée par les `width`/`height` des images. */ display: grid; } /* ---------- Les trois panneaux ---------- Un seul fichier, trois copies, trois bandes verticales jointives. Le pourquoi est dans sections/hero.njk ; ici, seulement les cotes. ⚠️ LES POURCENTAGES VIENNENT DES COTES DES PANNEAUX, PAS DE L'ŒIL. Le SVG d'origine mesure 1486 unités de large (983 + 503, le panneau de droite étant le dernier), et le panneau central y occupe x = 451 → 1021 : bord gauche du central : 451 / 1486 = 30,3499 % bord droit du central : 1021 / 1486 = 68,7079 % Ces deux valeurs sont les seules coutures. Elles ne dépendent pas de la définition du fichier : si l'illustration est ré-exportée plus grande, elles restent justes — seules les cotes de _data/hero.yaml feraient bouger. ⚠️ LES DEUX BANDES LATÉRALES DÉBORDENT D'UN CHEVEU SOUS LA CENTRALE (0,15 %, soit ~3 px sur le fichier). C'est volontaire : la bande centrale est dessinée par-dessus, donc le recouvrement ne se voit pas, alors qu'une jointure exacte laisse passer un liseré de fond dès que l'arrondi tombe mal. */ .hero__panneau { grid-area: 1/1; display: block; inline-size: 100%; block-size: auto; } /* À droite du panneau central — la première à arriver. */ .hero__panneau--droite { clip-path: inset(0 0 0 68.56%); } /* À gauche du panneau central. */ .hero__panneau--gauche { clip-path: inset(0 69.5% 0 0); } /* Le panneau central lui-même — dernier arrivé, donc au-dessus. Ses deux bords sont les coutures exactes ; ce sont les bandes latérales qui débordent, pas lui. */ .hero__panneau--centre { clip-path: inset(0 31.2921% 0 30.3499%); } .hero__visual { position: relative; z-index: 2; border-radius: var(--radius-cadre) var(--radius-cadre) 0 0; overflow: hidden; box-shadow: var(--shadow-lg); } /* Le gabarit est celui de `.apercu` (_components.scss). Ne restent ici que le ratio de la maquette et la coupe basse : le visuel du hero est rogné par la section, il n'a donc ni filet ni rayon en bas. */ .hero__visual-placeholder { aspect-ratio: 1193/667; border-bottom: none; border-radius: inherit; } /* ---------- Formes fluo ---------- La forme elle-même — masque, teinte, ratio — est la primitive `.forme` de _components.scss, posée par partials/forme.njk. Ne restent ici que l'ancrage et les cotes propres au hero. Chaque forme est réglée par quatre variables : sa taille et sa rotation (--shape-w, --shape-rot) et son ancrage (top/left/right). Tout est en % de la largeur du conteneur : les formes restent solidaires du visuel à toutes les largeurs d'écran. Pour ajuster : ouvre l'inspecteur, sélectionne le .hero__shape et joue sur --shape-w / --shape-rot / top / left. Les valeurs se lisent en direct, il n'y a plus qu'à me les donner. */ .hero__shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero__shape { position: absolute; } /* Haut droite — le losange, posé de biais sur le coin. */ .hero__shape--top-right { --shape-w: 19%; --shape-rot: 18deg; top: -14%; right: -6%; } /* ⚠️ LES DEUX FORMES DU BAS ONT ÉTÉ DIVISÉES PAR DEUX le 31/08/2026 (« trop grosses »). LEURS ANCRAGES ONT CHANGÉ EN MÊME TEMPS, ET C'EST OBLIGATOIRE : `top`/`left` placent le COIN HAUT-GAUCHE, pas le centre. Réduire `--shape-w` seul fait donc rétrécir la forme VERS ce coin. Sur celle de gauche, ancrée à `left: -22%`, son bord droit serait passé de 778 px à 5 px : elle aurait quasiment disparu hors du cadre. Les ancrages ci-dessous sont recalculés pour que chaque forme garde le CENTRE qu'elle avait — même place, moitié moins grande. Tout étant en % du `.hero__visual-wrap`, dont le rapport est celui de l'illustration et donc constant, ces valeurs tiennent à toutes les largeurs. Pour rejouer l'exercice : réduire `--shape-w` de Δ, puis ajouter Δ/2 à `left` et la moitié de la hauteur retirée à `top`. ⚠️ ET NE PAS PRENDRE LES COTES DANS L'INSPECTEUR SANS Y REGARDER : ces formes sont tournées, et `getBoundingClientRect()` rend la boîte englobante APRÈS rotation, sensiblement plus grande que la boîte de mise en page. Le citron mesure 332 px de large mais s'y annonce à 429. Un premier calcul fait sur ces cotes-là a décalé les deux centres de 25 px. Le centre, lui, est juste : la rotation se fait autour de lui. */ /* Bas droite — le citron. */ .hero__shape--bottom-right { --shape-w: 19%; --shape-rot: -22deg; top: 87.25%; /* 74% + la moitié de la hauteur retirée (26,5%) */ left: 91.5%; /* 82% + 19%/2 */ } /* Bas gauche — l'écu, sort toujours par la gauche, moins loin. */ .hero__shape--bottom-left { --shape-w: 16.5%; --shape-rot: 26deg; top: 70.55%; /* 58% + la moitié de la hauteur retirée (25,1%) */ left: -13.75%; /* -22% + 16,5%/2 */ } /* ---------- Trame quadrillée ---------- Motif dessiné, pas d'image lourde à charger. Les dégradés répétés CSS donnaient des traits d'épaisseur inégale : sur un écran dont la mise à l'échelle n'est pas entière (Windows à 125%), une ligne sur deux tombe à cheval entre deux pixels physiques et le navigateur l'étale — elle paraît alors plus pâle et plus épaisse. D'où le passage à un motif SVG avec `shape-rendering: crispEdges`, qui désactive l'anticrénelage : chaque trait est forcé sur un pixel entier, donc tous strictement identiques. La taille intrinsèque du SVG porte le pas, ce qui évite tout redimensionnement du motif. */ .grid-pattern { --grid-opacity: 0.55; background-repeat: repeat; opacity: var(--grid-opacity); } /* Trait de 2px : il fallait l'épaissir, mais un entier — 1,5px ne tombe pas sur la grille de pixels et `crispEdges` l'arrondirait à 1 ou 2 selon le zoom, ce qui ramènerait l'irrégularité qu'on vient justement de corriger. Seul le pas de 16 px sert au site. Les pas de 12 et 24, essayés puis écartés, ne servent qu'à /labo/grille/ : ils sont dans labo/_labo.scss. */ .grid-pattern--16 { background-image: url("data:image/svg+xml,"); } /* ---------- Et la teinte FLUO n'a pas de variante ---------- C'est `--16` ci-dessus qui la porte, et c'est pour ça qu'elle n'est pas déclarée ici à côté des trois autres : une `.grid-pattern--fluo` qui redirait la même URI et la même opacité mettrait une couleur à deux endroits. L'hôte qui nomme ses teintes n'ajoute donc rien pour elle — voir le champ `trame` de blocs/texte-module.njk, et les `{% if b.trame == "bleu" %}` de blocs/clients.njk et de blocs/hero-page.njk, qui font pareil dans l'autre sens. Les 0,55 par défaut sont la bonne valeur sur le CRÈME, où elle sert partout (l'accueil, `.faq__grille`, `.texte-illustre__grille`, et depuis le 26/08/2026 la section « Recruter ou externaliser » de /pourquoi-biron/) : le calcul d'écart de clarté mené pour les trois autres variantes ne s'applique pas ici, le fluo étant à 4 points du crème (L* 94 contre 98) — aucune opacité ne lui ferait peser le trait d'une teinte sombre, et c'est ce trait discret qui est recherché. */ /* ---------- La même trame, en BLEU ---------- Demandée par Hugo le 21/08/2026 pour le hero de /cas-clients/ : « une grille comme dans la page à propos mais bleu ». La trame et son fondu sont donc ceux de `hero-page --centre` ; seule la couleur change. ⚠️ ELLE PORTE SA PROPRE OPACITÉ, ET PLUS BASSE QUE LE FLUO. C'est contre-intuitif et c'est mesuré : le fluo #d1ff00 est une couleur CLAIRE, donc son écart de luminance avec le fond de page est faible et 55 % y donnent un trait discret. Le --c-blue-400 #7885ce, lui, est nettement plus sombre que le --c-blue-50 du fond : à 55 % le quadrillage passait devant le titre. À 45 % il retrouve le poids de trait de la version fluo. ⚠️ LA DÉCLARATION DOIT RESTER APRÈS CELLE DE `.grid-pattern`, qui pose --grid-opacity à 0,55 : les deux sélecteurs ont la même spécificité, c'est donc l'ordre du fichier qui tranche. La couleur est écrite en dur dans l'URI, comme celle de la trame fluo : une data-URI ne peut pas lire une propriété personnalisée. */ .grid-pattern--bleu { --grid-opacity: 0.45; background-image: url("data:image/svg+xml,"); } /* ---------- La même trame, en VIOLET ---------- Demandée par Hugo le 26/08/2026 pour la section « Des cas d'usage concrets » de /connecteur-ia/ : « la grille est violette ». C'est la teinte du pilier connecteur, celle de l'accent de cette page. ⚠️ ELLE PORTE SA PROPRE OPACITÉ, PLUS BASSE ENCORE QUE LE BLEU, et c'est le même raisonnement que celui de la variante bleue poussé d'un cran. Le #8b5cff est plus sombre que le #7885ce (L* 52 contre 57) ET il se pose sur le CRÈME, plus clair que le --c-blue-50 sur lequel le bleu a été calé (L* 98 contre 95) : l'écart de clarté passe de 38 à 46 points, donc à opacité égale le trait pèserait un cinquième de plus. 0,45 × 38 / 46 ≈ 0,37, arrondi à 0,35 — la trame est ici posée dans une bande de crème vide où rien ne vient la contredire, alors que la bleue passe derrière le contenu d'un hero. La couleur est écrite en dur dans l'URI, comme celles des deux autres trames : une data-URI ne peut pas lire une propriété personnalisée. C'est aussi pourquoi elle ne suit PAS `--text-accent` — la trame ne changerait pas de teinte si un jour le bloc servait sur une page d'un autre pilier. */ .grid-pattern--violet { --grid-opacity: 0.35; background-image: url("data:image/svg+xml,"); } /* ---------- La même trame, en ORANGE ---------- Demandée par Hugo le 26/08/2026 pour la section « Un plugin utile pour toutes vos équipes » de /excel-sheets/ : « une grille orange ». C'est la teinte du pilier intégrations, celle des aplats de cette page. ⚠️ C'EST LE PILIER, PAS SON ENCRE. Le pilier intégrations est le seul à porter deux jetons — --c-pilier-integrations pour l'APLAT, --c-pilier-integrations-encre pour l'ENCRE (voir la règle 10 de MAQUETTE.md). Une trame quadrillée est un décor, pas un texte : elle prend l'aplat, comme le violet prend le pilier connecteur et non sa valeur sombre. ⚠️ ELLE NE PORTE PLUS LE MÊME POIDS DE TRAIT QUE LES TROIS AUTRES, ET C'EST VOULU. Le calcul de parité mené pour les variantes bleue et violette donnait 0,65 : le #f0a22e est une couleur CLAIRE — L* 73, contre 52 pour le violet — donc son écart de clarté avec le crème (L* 98) tombe à 25 points là où le violet en a 46, et à opacité égale le trait pèserait moitié moins ; 0,35 × 46 / 25 ≈ 0,64, arrondi à 0,65 — ce qui posait l'orange à L* 81, exactement le violet voilé à 0,35. Hugo l'a fait redescendre le 26/08/2026 (« on peut réduire l'opacité des grilles oranges ? »). À 0,45 l'orange donne un L* de 86, soit 12 points d'écart au fond au lieu de 17. La parité des quatre trames est donc rompue sur cette variante — délibérément, et pas par oubli du calcul : ne pas la « réharmoniser » sur les trois autres. Corollaire inchangé : si la trame devait un jour peser PLUS, c'est la couleur qu'il faudrait changer, pas l'opacité — l'encre du pilier (#cc6207, L* 54) est là pour ça, elle retomberait dans le régime du violet. Dans l'autre sens, en revanche, l'opacité a toute la marge voulue. La couleur est écrite en dur dans l'URI, comme celles des trois autres trames : une data-URI ne peut pas lire une propriété personnalisée. C'est aussi pourquoi elle ne suit PAS `--text-accent`. */ .grid-pattern--orange { --grid-opacity: 0.45; background-image: url("data:image/svg+xml,"); } /* Fondu vers le haut : la trame naît du fond au lieu de démarrer net. Le masque ne joue que sur l'opacité globale — il ne touche pas à l'épaisseur des traits, qui reste uniforme sur toute la hauteur. */ .grid-pattern--fade-top { mask-image: linear-gradient(to bottom, transparent, black 35%); } /* Fondu aux deux extrémités. La trame naît du fond en haut et s'y éteint en bas, au lieu de buter contre la transition halftone. */ .grid-pattern--fade-both { mask-image: linear-gradient(to bottom, transparent, black 30%, black 76%, transparent); } /* Le positionnement de la trame est porté par .intro (sections/_intro.scss) : elle traverse le hero ET le bandeau clients. Le bloc « texte-illustre » compose son propre masque, sur ses deux axes (voir sections/_texte-illustre.scss). */ /* ========================================================================= LE LECTEUR DU HERO — trois scènes cliquables. Il remplace le cadre gris qui tenait la place d'une capture. Le gabarit est dans partials/lecteur.njk, le comportement dans assets/js/lecteur.js. ⚠️ LA SCÈNE N'A PLUS DE DÉCOR. La trame quadrillée et les deux formes de marque qui flottaient derrière ont été retirées le 14/08/2026 : la scène est déjà chargée en cartes, en rails et en chiffres, et le fond se disputait la lecture avec eux. Le cadre est nu. ⚠️ ET LE CHIVO MONO N'Y EST JAMAIS EN GRAS. Une chasse fixe épaissit mal : les nombres y perdent en lisibilité au lieu d'en gagner. Les deux `` du gabarit portent donc un `font-weight` explicite, pour défaire celui que le navigateur applique par défaut. --------------------------------------------------------------------- UN SEUL REPÈRE DE COORDONNÉES, et c'est la clé de tout le fichier. La scène est dessinée dans un cadre de 1200 × 675 en pixels absolus, que le script met à l'échelle de la largeur disponible par un `scale()`. Les cotes ci-dessous ne sont donc PAS des cotes d'écran : ce sont des cotes de plan. Elles ne changent jamais, quelle que soit la fenêtre. C'est ce qui permet de poser un rail SVG et une carte HTML au même endroit sans qu'ils dérivent l'un par rapport à l'autre — les deux partagent le même système. En les exprimant en pourcentages, il aurait fallu recalculer chaque courbe de Bézier à chaque largeur. Conséquence à connaître : ne jamais mettre de `rem` ni de `vw` dans la scène. Un `rem` ne suit pas le `scale()` et casserait l'alignement dès que l'utilisateur change la taille de police de son navigateur. ========================================================================= */ .lecteur { /* Le filet des cartes de la scène. Franchement bleu, et non le `--filet-panneau` éclairci des grands panneaux du site : ces cartes-ci sont petites et nombreuses — jusqu'à quatre par scène — et un filet dilué s'y lisait comme un gris. Il leur faut de quoi tenir seul, l'ombre portée ayant été retirée. `--lecteur-filet-survol` est le bleu d'accent du site, celui des liens actifs et des questions ouvertes de la FAQ. Il ne sert qu'aux cartes CLIQUABLES : mettre une réaction de survol sur une carte inerte promet une action qui n'existe pas. */ --lecteur-filet: 1px solid var(--c-blue-400); --lecteur-filet-survol: 1px solid var(--c-blue); /* ⚠️ AUCUNE OMBRE PORTÉE dans le lecteur, et c'est un choix, pas un oubli. Trois traitements ont été essayés le 14/08/2026 puis abandonnés : l'ombre bleu nuit du prototype, un halo fluo, un voile crème destiné à dégager le pourtour des cartes. Les cartes portent leur filet, il suffit à les poser. Le gris des mentions secondaires de la scène — références, unités. Plus clair que --text-muted, qui reste lisible en texte courant : ici ce sont des indications qu'on ne lit que si on les cherche. */ --lecteur-gris: color-mix(in srgb, var(--text-muted) 62%, var(--bg-page)); position: relative; } /* ---------- Onglets ---------- Un seul bloc, et non trois pilules séparées : les trois étapes forment un parcours, la boîte commune le dit. C'est un pavé qui glisse de l'une à l'autre qui porte la sélection, plus un fond posé sur chaque onglet. `width: fit-content` et non `justify-content: center` : le bloc doit épouser ses onglets, sinon le curseur glisserait dans une boîte plus large qu'eux et le calcul de ses cotes n'aurait plus de sens. */ .lecteur__onglets { position: relative; display: flex; align-items: center; width: fit-content; padding: 4px; margin: 0 auto var(--sp-5); background-color: var(--c-white); /* Pas de contour : le bloc se signale par son aplat blanc, et un filet de plus autour d'un pavé déjà cerné faisait double bordure. */ /* Allure de BOUTON et non de panneau : le rayon des boutons du site, et non les coins vifs des blocs de texte. Ces onglets sont une commande, pas un cadre — c'est ce que le rayon doit dire. Demandé le 14/08/2026. */ border-radius: var(--radius-md); } /* La flèche d'évolution entre deux onglets. Elle dit que les trois étapes se suivent, là où trois onglets côte à côte les donnent pour interchangeables. */ .lecteur__onglets-fleche { padding-inline: 2px; font-size: var(--fs-sm); line-height: 1; color: var(--lecteur-gris); user-select: none; } /* Le pavé de sélection. Ses cotes sont posées par le script — voir `placerCurseur()` dans lecteur.js. Il est en `transform` et non en `left` : une translation est composée par le GPU, là où animer `left` déclencherait un calcul de mise en page à chaque image. La largeur, elle, doit bien être animée — les trois libellés n'ont pas la même — mais sur un élément en position absolue, elle ne repousse rien autour. */ .lecteur__onglets-curseur { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; background-color: var(--c-blue); /* ⚠️ RAYON INTÉRIEUR = RAYON EXTÉRIEUR − ÉCART. Le bloc porte 9 px de rayon et 4 px de rembourrage : à 9 px lui aussi, le pavé paraissait plus rond que la boîte qui le contient, et les deux courbes ne se suivaient pas. Deux arcs concentriques ne le sont que si leurs rayons diffèrent de la distance qui les sépare. */ border-radius: calc(var(--radius-md) - 4px); transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); } @media (prefers-reduced-motion: reduce) { .lecteur__onglets-curseur { transition: none; } } .lecteur__onglets[hidden] { display: none; } /* Les onglets sont NUS : ni fond ni filet, c'est le curseur qui les habille au passage. `position: relative` les fait peindre au-dessus de lui. */ .lecteur__onglet { position: relative; display: inline-flex; align-items: center; gap: 0.5625rem; padding: 0.5625rem 1.25rem; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-blue-dark); background-color: transparent; border: 0; cursor: pointer; transition: color var(--dur-base) var(--ease-out); } /* Le numéro d'étape, en chasse fixe : c'est un repère, pas un mot. ⚠️ `font-weight` explicite sur un : sans lui le navigateur applique son gras par défaut. Le Chivo Mono ne se met JAMAIS en gras dans ce lecteur — une chasse fixe épaissit mal et se met à peser. */ .lecteur__onglet b { font-weight: var(--fw-regular); font-family: var(--font-mono); font-size: 0.75rem; color: var(--lecteur-gris); transition: color var(--dur-base) var(--ease-out); } @media (hover: hover) { .lecteur__onglet:not([aria-selected=true]):hover { color: var(--c-blue); } } /* L'onglet courant n'a plus de fond à lui : le curseur le lui apporte. */ .lecteur__onglet[aria-selected=true] { color: var(--c-white); } /* Le fluo ne sert QUE sur l'onglet actif : c'est le seul endroit du lecteur où l'accent du site apparaisse, et il y désigne exactement une chose. */ .lecteur__onglet[aria-selected=true] b { color: var(--c-fluo); } .lecteur__onglet:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; } /* ---------- Légende ---------- Elle est SOUS les onglets et au-dessus du cadre : elle appartient au sommaire, pas à l'image. C'est elle qui PORTE LE PROPOS de chaque scène — l'image l'illustre, elle ne l'énonce pas. Elle est donc traitée en titre : police de display, corps de h3, avec sa partie saillante en bleu d'accent. Elle était en texte courant à 18 px jusqu'au 14/08/2026 et passait après l'animation. ⚠️ AUCUNE HAUTEUR RÉSERVÉE ICI. Les trois légendes n'ont pas la même longueur ; sans réservation, le cadre remonterait ou descendrait à chaque changement de scène. Mais une valeur écrite en dur serait soit trop courte — et ça sauterait — soit trop longue, et c'est le trou dont on ne veut pas. C'est donc le script qui MESURE la plus haute des trois et réserve exactement ce qu'il faut. Voir `mesurerLegende()` dans lecteur.js. */ .lecteur__legende { max-width: 52rem; margin: 0 auto var(--sp-4); text-align: center; font-family: var(--font-titre); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: -0.02em; color: var(--c-blue-dark); } .lecteur__legende em { font-style: normal; color: var(--c-blue); } /* La ligne de détail revient au texte courant : deux niveaux de titre dans une légende, et plus rien ne domine. */ .lecteur__legende small { display: block; max-width: 44rem; margin: var(--sp-2) auto 0; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); letter-spacing: 0; color: var(--text-muted); } /* ---------- Cadre et flèches ---------- La zone réserve la place des flèches de part et d'autre : elles vivent hors du cadre, pour ne jamais passer par-dessus la scène. */ .lecteur__zone { position: relative; padding-inline: 3.625rem; } /* ⚠️ NI FOND NI FILET — essai du 14/08/2026. La scène est posée à même la page : plus de cadre autour d'elle, plus de crème sous elle. Les cartes portent déjà chacune leur contour et leur ombre, un cadre de plus en faisait un cadre dans un cadre. `overflow: hidden` reste : c'est lui qui contient la scène mise à l'échelle, indépendamment de tout habillage. */ .lecteur__cadre { position: relative; overflow: hidden; } /* La hauteur du cadre et l'échelle de la scène sont posées par le script : elles dépendent de la largeur réellement disponible, que le CSS ne connaît pas. Voir `ajuster()` dans lecteur.js. */ .lecteur__scene-hote { position: relative; width: 1200px; height: 675px; overflow: hidden; transform-origin: top left; } .lecteur__fleche { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; display: grid; place-content: center; width: 2.75rem; height: 2.75rem; padding: 0; font-size: 1.1875rem; line-height: 1; color: var(--c-blue-dark); background-color: var(--c-white); border: var(--lecteur-filet); border-radius: var(--radius-full); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .lecteur__fleche[hidden] { display: none; } .lecteur__fleche--prec { left: 0; } .lecteur__fleche--suiv { right: 0; } @media (hover: hover) { .lecteur__fleche:hover:not(:disabled) { border-color: var(--c-blue-dark); } } .lecteur__fleche:disabled { opacity: 0.32; cursor: default; } .lecteur__fleche:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; } /* ========================================================================= LA SCÈNE — tout ce qui suit est en cotes de plan (1200 × 675). ========================================================================= */ /* ⚠️ `text-align: left` n'est pas une redite du défaut. Le hero centre son texte (`.hero__inner`) et la scène en héritait : les libellés des cartes se retrouvaient centrés sans que rien ne le demande ici. On reprend la main à la racine de la scène — ce qui doit être centré l'est ensuite explicitement, carte indicateur et valeurs convergentes. */ .lecteur__scene { position: absolute; inset: 0; text-align: left; opacity: 0; pointer-events: none; } .lecteur__scene.is-on { opacity: 1; pointer-events: auto; } /* L'horloge de référence : un élément sans dimension dont le script anime une propriété inerte, seulement pour disposer d'une base de temps qui se met en pause avec le reste. */ .lecteur__horloge { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; } /* ---------- Rails et flux ---------- Le rail est le trait au repos ; le flot est le pointillé qui le parcourt. Les deux suivent exactement le même tracé — c'est le même `d`, dupliqué dans le gabarit, ce qui garantit qu'ils ne peuvent pas diverger. */ .lecteur__flux { position: absolute; inset: 0; pointer-events: none; } .lecteur__rail { fill: none; stroke: var(--border-subtle); stroke-width: 1.5; } .lecteur__flot { fill: none; stroke: rgba(32, 43, 92, 0.42); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 13; /* Durée d'un tour de motif, en millisecondes. Lue par le script, qui en fait la cadence du défilement — voir `flotter()` dans lecteur.js. */ --flot-cadence: 820; opacity: 0; } /* ---------- Scène 1 : des pointillés irréguliers ---------- Les trois flux de la scène 1 ne défilent pas au même pas ni à la même allure. C'est le désaccord de la scène rendu jusque dans le trait : trois sources qui parlent, aucune qui parle comme l'autre. ⚠️ CHAQUE MOTIF DOIT AVOIR UN NOMBRE PAIR DE VALEURS. En nombre impair, SVG duplique la liste pour alterner trait et vide, et la période réelle vaut alors le double de la somme — le script décalerait d'une demi-période et la boucle sauterait à chaque tour. Les cadences aussi diffèrent, et pas seulement les motifs : à cadence égale sur des sommes voisines, les trois flux repartent presque ensemble et l'œil rattrape la régularité qu'on cherche à casser. */ [data-lecteur-scene="0"] [data-flot=s0] { stroke-dasharray: 2 11 7 16 4 9; /* somme 49 */ --flot-cadence: 820; } [data-lecteur-scene="0"] [data-flot=s1] { stroke-dasharray: 9 7 3 15 6 12; /* somme 52 */ --flot-cadence: 1040; } [data-lecteur-scene="0"] [data-flot=s2] { stroke-dasharray: 5 18 2 8 11 6; /* somme 50 */ --flot-cadence: 930; } /* Le flux des scènes 2 et 3, une fois la donnée certifiée. `--c-blue` est le bleu de survol du site — celui des liens actifs, des questions ouvertes de la FAQ, des cartes de témoignage au passage du curseur. Il dit ici la même chose : cette donnée-là est vivante. Un essai en blanc a précédé, le 14/08/2026 : sur le crème du fond il donnait un contraste de 1,02, autant dire des traits qu'on devine sans les lire. */ .lecteur__flot--vif { stroke: var(--c-blue); stroke-width: 3.5; } /* Le rail au repos suit son flux : bleu lui aussi sur les scènes 2 et 3, sombre sur la scène 1, où rien n'est encore certifié. */ [data-lecteur-scene="1"] .lecteur__rail, [data-lecteur-scene="2"] .lecteur__rail { stroke: var(--c-blue); } .lecteur__point { fill: var(--c-blue-dark); opacity: 0; transform-box: fill-box; transform-origin: center; } /* ---------- Scène 1 · le désaccord ---------- */ .lecteur__kpi { position: absolute; left: 120px; top: 232px; width: 460px; height: 211px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background-color: var(--c-white); border: var(--lecteur-filet); border-radius: 0; opacity: 0; /* Seule carte dont le contenu est centré, comme dans la maquette. */ text-align: center; } .lecteur__kpi-nom { margin: 0; font-family: var(--font-titre); font-size: 34px; font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.4px; text-align: center; color: var(--c-blue-dark); } .lecteur__kpi-tag { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.6px; color: var(--lecteur-gris); } .lecteur__service { position: absolute; left: 740px; width: 340px; height: 100px; display: flex; align-items: center; justify-content: space-between; padding-inline: 26px; background-color: var(--c-white); border: var(--lecteur-filet); border-radius: 0; opacity: 0; } .lecteur__service[data-service="0"] { top: 174px; } .lecteur__service[data-service="1"] { top: 288px; } .lecteur__service[data-service="2"] { top: 402px; } .lecteur__service-nom { font-size: 19px; font-weight: var(--fw-semibold); color: var(--text-muted); } /* Les trois chiffres qui se contredisent, dans le corail du logo — la seule couleur vive de la palette qui ne soit pas déjà prise par un pilier. ⚠️ `transform-origin: right` : la pulsation grandit vers la GAUCHE, donc le bord droit des trois nombres reste sur un axe commun. C'est ce qui permet de les comparer d'un coup d'œil, ce que toute la scène cherche à provoquer. Une pulsation centrée les ferait danser autour de leur milieu et l'axe disparaîtrait. */ .lecteur__service-num { min-width: 150px; text-align: right; font-family: var(--font-mono); font-size: 30px; font-variant-numeric: tabular-nums; color: var(--c-alerte); transform-origin: right center; } /* ---------- Scène 2 · la certification ---------- */ /* Le nœud Biron. C'était un rond bleu nuit portant le mot « Biron » ; c'est désormais un CITRON de marque portant le glyphe, comme au centre de la composition de « Une approche data unique ». Les deux calques sont empilés dans la même cellule de grille plutôt que positionnés en absolu : la hauteur se déduit alors du ratio de la forme, qu'on n'a pas à répéter ici. Le glyphe vient après dans le document, il se peint donc par-dessus. */ .lecteur__biron { position: absolute; left: 80px; top: 231px; width: 120px; aspect-ratio: 690/670; /* le ratio du citron */ display: grid; place-items: center; opacity: 0; } .lecteur__biron-forme, .lecteur__biron-glyphe { grid-area: 1/1; mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; } .lecteur__biron-forme { width: 100%; height: 100%; background-color: var(--c-blue-dark); mask-image: url("/assets/shapes/Citron.svg"); -webkit-mask-image: url("/assets/shapes/Citron.svg"); } /* Le glyphe est en CRÈME et non en blanc : c'est la couleur du fond de page, donc le « b » se lit comme découpé dans la forme plutôt que posé dessus — exactement ce que fait la marque au centre du trio. ⚠️ 90 % DE LA FORME NE VEUT PAS DIRE UN GLYPHE À 90 %. Le tracé n'occupe que le milieu de sa zone de dessin — 54 % en largeur, 34 % en hauteur — donc le « b » rendu fait environ la moitié de la largeur du citron. C'est cette marge intégrée au fichier qui explique qu'il ait fallu monter si haut. */ .lecteur__biron-glyphe { width: 90%; height: 90%; background-color: var(--bg-page); mask-image: url("/assets/shapes/Trio - Marque logo.svg"); -webkit-mask-image: url("/assets/shapes/Trio - Marque logo.svg"); } .lecteur__fiche { position: absolute; left: 330px; top: 83px; width: 490px; height: 420px; overflow: hidden; background-color: var(--c-white); border: var(--lecteur-filet); border-radius: 0; opacity: 0; } .lecteur__fiche-tete { height: 104px; padding-inline: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: var(--lecteur-filet); } .lecteur__ref { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.8px; color: var(--lecteur-gris); } .lecteur__fiche-nom { margin: 6px 0 0; font-family: var(--font-titre); font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -0.03em; color: var(--c-blue-dark); } /* La case du chiffre. Sa largeur est RÉSERVÉE : « à certifier » et le nombre certifié s'y succèdent au même endroit, et sans place fixe le titre de la fiche se déplacerait au moment du tampon. */ .lecteur__tete-droite { position: relative; flex: 0 0 auto; width: 176px; height: 78px; } .lecteur__attente { position: absolute; right: 0; top: 25px; display: inline-flex; align-items: center; padding: 5px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--lecteur-gris); border: 1px dashed var(--lecteur-gris); border-radius: var(--radius-full); opacity: 0; } .lecteur__certbloc { position: absolute; right: 0; top: 0; text-align: right; } .lecteur__anneau { position: absolute; right: -14px; top: -10px; width: 190px; height: 56px; border: 2px solid var(--c-blue); /* Coins vifs comme les cartes qu'il accompagne. */ border-radius: 0; opacity: 0; transform-origin: center; pointer-events: none; } .lecteur__certnum { display: block; text-align: right; font-family: var(--font-mono); font-size: 34px; font-variant-numeric: tabular-nums; color: var(--c-blue); opacity: 0; transform-origin: right center; /* ⚠️ INTERLIGNE SERRÉ, et ce n'est pas cosmétique. Le corps du site est à --lh-normal (1,6) : un nombre de 34 px y occupe 54 px de hauteur de ligne. Avec le badge dessous et son écart, le bloc dépassait les 78 px de sa case et le « Certifié » venait buter sur le filet de l'en-tête. À 1,05 l'ensemble retombe à 66 px et respire. */ line-height: 1.05; } .lecteur__badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--c-blue-dark); background-color: var(--c-fluo); border-radius: var(--radius-full); opacity: 0; } .lecteur__badge i { width: 6px; height: 6px; border-radius: 50%; background-color: var(--c-blue-dark); } .lecteur__ligne { height: 66px; padding-inline: 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: var(--lecteur-filet); opacity: 0; } .lecteur__etape { font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: -0.3px; color: var(--text-strong); } .lecteur__coche { flex: 0 0 auto; display: grid; place-content: center; width: 28px; height: 28px; font-size: 15px; font-weight: var(--fw-bold); color: var(--c-blue-dark); background-color: var(--c-fluo); border-radius: 50%; transform-origin: center; } .lecteur__fiche-pied { height: 50px; padding-inline: 26px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--lecteur-gris); opacity: 0; } /* Les trois services sous la fiche, avec le MÊME chiffre. Miroir exact de la scène 1 : mêmes noms, mêmes places, mais une seule valeur au lieu de trois. */ .lecteur__conv { position: absolute; left: 330px; top: 531px; width: 490px; display: flex; gap: 12px; } .lecteur__conv > div { flex: 1 1 0; padding-block: 9px; text-align: center; background-color: var(--c-white); border: var(--lecteur-filet); border-radius: 0; opacity: 0; } .lecteur__conv span { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-muted); } .lecteur__conv b { /* Voir la note sur les plus haut : le gras par défaut est à défaire. */ font-weight: var(--fw-regular); display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 20px; font-variant-numeric: tabular-nums; color: var(--c-blue); } /* ---------- Le nœud dictionnaire, scènes 2 et 3 ---------- */ .lecteur__dico { position: absolute; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; opacity: 0; pointer-events: none; } .lecteur__dico--2 { left: 950px; top: 216px; } .lecteur__dico--3 { left: 80px; top: 263px; } .lecteur__dico img { width: auto; height: 150px; } /* Un cartouche blanc sous le glyphe, à la manière de la légende du trio de « Une approche data unique » : le nom flottait sur le crème sans attache, alors que tout le reste de la scène est posé sur du blanc. */ .lecteur__dico-nom { padding: 8px 14px; background-color: var(--c-white); border: var(--lecteur-filet); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); font-size: 18px; font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: -0.2px; text-align: center; color: var(--c-blue-dark); } /* ---------- Scène 3 · les trois usages ---------- */ .lecteur__usage { position: absolute; left: 470px; width: 640px; height: 120px; display: flex; align-items: center; padding: 0 24px 0 75px; text-decoration: none; color: inherit; background-color: var(--c-white); border: var(--lecteur-filet); border-radius: 0; opacity: 0; pointer-events: none; transition: border-color var(--dur-base) var(--ease-out); } .lecteur__usage[data-usage="0"] { top: 112px; } .lecteur__usage[data-usage="1"] { top: 278px; } .lecteur__usage[data-usage="2"] { top: 444px; } /* L'icône déborde de la carte par la gauche, à cheval sur le rail qui l'alimente : c'est ce qui rattache visuellement l'usage à sa source. `--lecteur-ico-echelle` rattrape l'inégalité des exports — voir la note dans hero.yaml, où il est aussi dit qu'aucun usage ne l'emploie plus depuis le 25/08/2026, le viewBox du connecteur ayant été recadré sur son dessin. L'agrandissement se fait AUTOUR DU CENTRE du glyphe, ce qui le laisse à sa place : `scale` s'applique avant `translateY` dans une liste de transformations, et son origine par défaut est le centre. Corriger par la hauteur aurait au contraire décalé l'icône vers le bas et la gauche. */ .lecteur__usage-ico { position: absolute; left: -55px; top: 50%; width: auto; height: 110px; transform: translateY(-50%) scale(var(--lecteur-ico-echelle, 1)); } .lecteur__usage-txt { flex: 1 1 auto; min-width: 0; } .lecteur__usage-lab { display: block; font-size: 24px; font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: -0.3px; color: var(--text-strong); } .lecteur__usage-sous { display: block; margin-top: 4px; font-size: 18px; line-height: 1.32; color: var(--text-muted); } .lecteur__logos { display: flex; align-items: center; gap: 16px; } .lecteur__logo { display: block; width: auto; } /* Texte et non plus `` depuis le 16/09/2026 — voir partials/lecteur.njk. Le corps est calé pour occuper à l'œil la même hauteur que les 24px de l'ancien export, chasse d'un logotype comprise. */ .lecteur__logo--biron { font-family: var(--font-serif); font-size: 1.375rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1; color: var(--text-strong); } .lecteur__logo--claude { width: 34px; height: 34px; } .lecteur__logo--excel { height: 33px; } .lecteur__logo--zapier { width: 31px; height: 31px; } /* La flèche n'apparaît qu'une fois la scène posée : tant que l'animation court, le lien n'est pas cliquable et ne doit rien promettre. */ .lecteur__fleche-lien { flex: 0 0 auto; margin-left: 12px; font-size: 20px; color: var(--c-blue); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } /* ---------- Les liens deviennent vivants à la fin de la scène ---------- */ .lecteur__usage.is-actif, .lecteur__dico.is-actif { pointer-events: auto; cursor: pointer; } .lecteur__usage.is-actif .lecteur__fleche-lien { opacity: 1; transform: none; } @media (hover: hover) { .lecteur__usage.is-actif:hover { border: var(--lecteur-filet-survol); } .lecteur__usage.is-actif:hover .lecteur__fleche-lien { transform: translateX(5px); } /* Le cartouche du dictionnaire réagit comme une carte : son filet suit, pas seulement la couleur de son texte. */ .lecteur__dico.is-actif:hover .lecteur__dico-nom { color: var(--c-blue); border: var(--lecteur-filet-survol); } } .lecteur__usage.is-actif:focus-visible, .lecteur__dico.is-actif:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 4px; } /* ========================================================================= Écrans étroits. La scène garde ses cotes de plan et se contente de rétrécir : à 1200 px de large ramenés à 360, le texte de la fiche tomberait sous 7 px. On admet donc que le lecteur devienne illisible en dessous d'un certain point — et plutôt que de le laisser en l'état, les flèches se rapprochent pour rendre la place au cadre, seul remède qui ne demande pas de redessiner la scène. ⚠️ Une vraie version mobile demanderait une composition à part, verticale. C'est un chantier en soi, pas un réglage : à ouvrir si le trafic mobile le justifie. ========================================================================= */ @media (max-width: 60rem) { .lecteur__zone { padding-inline: var(--sp-8); } .lecteur__fleche { width: 2.25rem; height: 2.25rem; font-size: 1rem; } .lecteur__legende { min-height: 5.5rem; } } /* ========================================================================= Bandeau clients — blocs/clients.njk. ⚠️ C'EST UN BLOC DEPUIS LE 21/08/2026, plus une section de l'accueil : la page des cas clients le reprend sous son hero. Deux hôtes donc, et deux habillages — voir « le cadre fermé est le défaut » plus bas. ========================================================================= */ .clients { /* `position` obligatoire : sans elle, la section reste un bloc statique et son fond se peint AVANT le décor de .intro, qui est positionné. Le cadre laisserait alors la trame apparaître au travers. */ position: relative; z-index: 1; /* ⚠️ RESSERRÉ EN BAS LE 21/08/2026 (« supprimer un peu d'espace entre la boîte des clients et le cas mis en avant »). La grande respiration de l'accueil est rétablie plus bas, sous `.intro` : là-bas le bandeau ferme un plan de décor et a besoin de place ; ailleurs il est suivi d'une section qui pose déjà la sienne, et les deux s'additionnaient — jusqu'à 14rem de vide. */ padding-block: clamp(4rem, 2rem + 5vw, 7rem) clamp(var(--sp-8), 3vw, var(--sp-12)); } /* Un bandeau qui suit directement un hero n'ajoute pas sa propre respiration : celle du hero suffit, et la maquette de /cas-clients/ pose d'ailleurs les deux dans la même bande. Sans cette règle les deux rembourrages s'additionnaient, soit près de 12rem de vide entre le chapeau et la piste. */ .hero-page + .clients { padding-top: 0; } /* Cotes reprises de la maquette. Le fond est opaque dans les deux variantes : c'est lui qui découpe la trame derrière le cadre et donne l'impression d'une carte posée dessus. ⚠️ LES DEUX HÔTES N'ONT PAS LE MÊME HABILLAGE, et le partage suit celui du cadre ouvert / fermé déjà en place : hors accueil fond CRÈME, filet BLEU — une carte assumée, dans la grammaire des panneaux du site. Demande d'Hugo le 21/08/2026 pour /cas-clients/. sur l'accueil fond de la page, filet FLUO — le bandeau y est le prolongement du hero, pas un objet à part. ⚠️ LE CRÈME EST ÉCRIT EN CLAIR ICI, ET C'EST VOULU. Sur l'accueil ce fond doit suivre celui de la page (--bg-page), puisque son rôle est de la masquer ; ailleurs il ne masque plus rien, c'est une carte qui a sa couleur à elle. Les deux rôles ont été confondus le matin même, quand le fond de page est passé au bleu pâle et que la carte a suivi sans qu'on le veuille. */ .clients__frame { display: flex; flex-direction: column; gap: 1.25rem; /* 20px */ padding: 1.875rem 2.5625rem; /* 30px 41px */ background-color: var(--c-base-main); border: 1px solid var(--filet-panneau-teinte); } /* ---------- L'accueil : un cadre OUVERT par le bas ---------- Là-bas le bandeau se prolonge dans la bande de trame qui suit, et une arête en bas couperait ce prolongement. Ailleurs il n'y a rien à prolonger, et un cadre ouvert se lirait comme inachevé — d'où le cadre fermé par défaut. ⚠️ LA BASCULE PASSE PAR L'ANCÊTRE, PAS PAR UN CHAMP DU BLOC : la donnée de `_data/clients.yaml` est partagée par les deux hôtes, elle n'a pas à décrire la mise en page de l'un d'eux. Voir l'en-tête de blocs/clients.njk. */ .intro .clients { padding-bottom: 0; } /* Le bandeau qui suit un hero n'ajoute pas sa propre respiration en haut : celle du hero suffit. Voir la règle d'adjacence plus haut. */ /* ⚠️ HORS ACCUEIL, LA PISTE EST PLUS DENSE (« la grille du bloc client est trop large, elle peut être plus dense », 21/08/2026). Les cotes de la maquette — 30/41px de rembourrage, 60px entre deux noms — sont celles de l'accueil, où le bandeau est le prolongement du hero et a toute la place. Ailleurs c'est une carte parmi d'autres, et à cet écartement elle n'affichait que quatre ou cinq noms. Resserré des deux côtés : le rembourrage du cadre et l'écart entre les noms. La variante de l'accueil, elle, garde les cotes de la maquette — voir juste en dessous. */ .clients__frame { padding: var(--sp-5) var(--sp-6); } .clients__item { padding-inline: var(--sp-5); /* 20px, soit 40px entre deux noms au lieu de 60 */ } .intro .clients__frame { /* Sur l'accueil, le cadre reprend le filet fluo de la maquette, le fond de la page et ses cotes d'origine — voir le partage expliqué plus haut. */ padding: 1.875rem 2.5625rem; /* 30px 41px */ background-color: var(--bg-page); border-color: var(--c-fluo); border-bottom: none; } .intro .clients__item { padding-inline: 1.875rem; /* 30px de chaque côté, soit 60px entre deux noms */ } /* ========================================================================= LE QUADRILLAGE AUTOUR DU BANDEAU — variante `trame`. Demande d'Hugo le 21/08/2026 : « la grille uniquement autour de la section client ». Elle remplace un premier montage où la trame venait du HERO, dont le décor débordait sous sa propre section pour raccorder les deux bandes. ⚠️ CE PREMIER MONTAGE MARCHAIT, ET IL VAUT DE SAVOIR CE QU'IL COÛTAIT : il faisait peindre une section par sa voisine, il exigeait de celle-ci qu'elle reste TRANSPARENTE, et il imposait au hero un `overflow: visible` qui interdisait à ses formes de déborder sur les flancs — donc de se replier comme partout ailleurs. Trois contraintes croisées pour un décor. En donnant la trame à la section qui la montre, les trois tombent d'un coup. ⚠️ LE CADRE ÉTANT OPAQUE, LA TRAME N'APPARAÎT QU'AUTOUR DE LUI, et c'est tout l'effet : la carte se lit comme posée sur le quadrillage. Rien à découper à la main, c'est le fond du cadre qui s'en charge — exactement le procédé de l'accueil, où la trame vient du plan de décor de `.intro`. ⚠️ LA SECTION REPREND SA RESPIRATION EN HAUT. `.hero-page + .clients` la met à zéro pour coller le bandeau au hero ; sans marge, la trame n'aurait aucune place au-dessus du cadre et ne se verrait que dans les gouttières latérales. ========================================================================= */ .clients--trame { padding-block: clamp(var(--sp-8), 4vw, var(--sp-12)); } .hero-page + .clients--trame { padding-top: clamp(var(--sp-8), 4vw, var(--sp-12)); } /* ⚠️ LE DÉCOR MONTE AU-DESSUS DE LA SECTION, demandé par Hugo le 21/08/2026 : « faire grandir la grille vers le haut ». Il dépasse donc l'arête haute de --clients-trame-haut et vient mordre sur le bas du hero. ⚠️ C'EST SANS DANGER POUR LE TEXTE DU HERO, et c'est mesuré : le débord (48 → 96px) reste inférieur au rembourrage bas du hero (--sp-section, 64 → 120px), donc il ne monte que dans du vide. Une valeur plus grande passerait sous le chapeau. ⚠️ ET LE BANDEAU PEINT PAR-DESSUS LE HERO SANS RIEN À DÉCLARER : il porte déjà `z-index: 1` quand le hero est à zéro. C'est la même propriété qui, dans l'autre sens, empêchait le montage précédent — le décor du hero débordant vers le bas — de se voir dès que cette section peignait un fond. */ .clients--trame { --clients-trame-haut: clamp(3rem, 6vw, 6rem); --clients-trame-bas: clamp(2rem, 4vw, 4rem); } .clients__decor { position: absolute; inset: calc(-1 * var(--clients-trame-haut, 0px)) 0 0; /* Sous le cadre : un enfant à `z-index: 0` passe derrière un frère positionné plus loin dans le DOM au même niveau. */ z-index: 0; overflow: hidden; pointer-events: none; } /* Le fondu des deux bords : la trame naît du fond et y retourne, au lieu de buter sur les arêtes du décor. Sans lui on lirait deux traits horizontaux francs. ⚠️ LES ARRÊTS SONT EN LONGUEUR, PAS EN POURCENTAGE, et c'est ce qui rend les deux cotes indépendantes : un pourcentage se compte sur la hauteur du décor, or celle-ci contient désormais le débord — régler la hauteur du débord déplaçait alors aussi la naissance de la trame, et les deux réglages se poursuivaient. En longueur, le fondu du haut occupe exactement le débord : la trame naît à son sommet et atteint sa pleine force à l'arête de la section. */ .clients__grille { position: absolute; inset: 0; mask-image: linear-gradient(to bottom, transparent 0, black var(--clients-trame-haut, 22%), black calc(100% - var(--clients-trame-bas, 22%)), transparent 100%); } /* Le contenu passe devant la trame. `.clients` porte déjà `position: relative`. */ .clients > .container { position: relative; z-index: 1; } /* Mono capitales, interlettrage 0.14em — les cotes de la maquette (10,5 px / 1,47 px) correspondent exactement au token --ls-wide. */ .clients__label { text-align: center; color: var(--text-strong); } /* Le viewport masque la piste et estompe ses deux bords : sans ce fondu, les noms apparaissent et disparaissent d'un coup sur une arête franche, ce qui trahit immédiatement le procédé. */ .clients__viewport { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .clients__track { display: flex; width: max-content; /* Repli sans JS : la piste défile en CSS. GSAP reprend la main dès qu'il est chargé et remplace cette animation par la sienne, calée sur la largeur réelle pour une vitesse constante. */ animation: clients-defile 40s linear infinite; } @keyframes clients-defile { to { transform: translateX(-50%); } } .clients__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } /* Recoleta SemiBold 18px en Primary Blue — repris tel quel de la maquette. Les références ne sont pas en mono : c'est le serif qui porte le nom des marques, la mono ne sert qu'au label au-dessus. Ce traitement typographique est le REPLI d'une référence sans logo. Les 27px de la maquette deviennent donc un PLANCHER de hauteur de rang, et non plus une hauteur fixe — voir juste en dessous pourquoi les logos ne s'y calent plus. */ .clients__item { display: flex; align-items: center; min-height: 1.6875rem; /* 27px — la hauteur de rang de la maquette */ padding-inline: 1.875rem; /* 30px de chaque côté, soit 60px entre deux */ font-family: var(--font-serif); font-size: 1.125rem; font-weight: var(--fw-semibold); line-height: 1; color: var(--c-blue); white-space: nowrap; } /* ========================================================================= LA HAUTEUR D'UN LOGO VIENT DE SON FICHIER, PAS DE LA FEUILLE. ⚠️ TOUS LES LOGOS AVAIENT LA MÊME HAUTEUR DE RANG JUSQU'AU 28/08/2026, et c'était le défaut. Les huit exports sont déjà équilibrés les uns par rapport aux autres — le macaron carré de Cabaïa fait 66 px de haut, le logotype filiforme de Smallable 24 — et les ramener tous à 27 px écrasait cet équilibre : le macaron sortait à 23 px de large contre 227 pour Smallable, un dixième de sa place. Hugo a tranché sur capture de référence : ce sont les proportions d'export qui doivent se retrouver. `--clients-logo-h` porte la hauteur d'export EN PIXELS, posée sur l'élément par blocs/clients.njk et LUE DANS LE FICHIER (filtre `dimensions`). Rien n'est écrit à la main, donc un logo réexporté à une autre taille reprend sa place tout seul — et aucune table de huit valeurs n'est à tenir accordée avec le dossier de dépôt. ⚠️ `* 1rem / 16` CONVERTIT CES PIXELS D'EXPORT EN REM, et ce n'est pas une coquetterie : le site rend à 85 % de son échelle écrite (`html { font-size: 85% }`, voir CLAUDE.md), donc un logo exprimé en `px` serait le seul objet de la page à ne pas suivre ce facteur. Écrit ainsi, il le suit — 66 px d'export rendent 56 px à l'écran, comme un `1.6875rem` rend 23 px. ⚠️ L'ÉCHELLE COMMUNE A SON DÉFAUT DANS LE `var()`, jamais dans une déclaration sur l'élément : une propriété posée SUR le logo battrait celle qu'un ancêtre lui donne, et le réglage des écrans étroits plus bas serait silencieusement sans effet. Règle du site — voir CLAUDE.md « A component knob that an ancestor is meant to override ». `width: auto` laisse la largeur suivre le ratio intrinsèque : aucun logo n'est déformé, et aucune largeur n'est écrite nulle part. ========================================================================= */ .clients__logo { height: calc(var(--clients-logo-h, 27) * var(--clients-logo-echelle, 1) * 1rem / 16); width: auto; } /* Le survol suspend le défilement : on laisse le temps de lire un nom qui accroche l'œil. */ .clients__viewport:hover .clients__track { animation-play-state: paused; } /* ========================================================================= Écrans étroits. Les cotes de la maquette sont celles d'un écran large : 41 px de rembourrage de chaque côté, c'est 82 px pris sur les 390 d'un téléphone, et le fondu des deux bords en mange 16 % de plus. Il ne restait la place que de deux noms. On resserre tout. ========================================================================= */ @media (max-width: 48rem) { .clients__frame { padding: var(--sp-5) var(--sp-4); } /* 20 px de chaque côté, soit 40 px entre deux noms au lieu de 60. */ .clients__item { padding-inline: var(--sp-5); } /* ⚠️ LES LOGOS RETOMBENT D'UN QUART, et c'est une contrainte de HAUTEUR, pas de largeur : à l'échelle 1 le rang est commandé par le macaron de Cabaïa, soit 56 px, et le bandeau passait à une centaine de pixels de haut sur un téléphone — pour un objet qui n'est qu'un bandeau de références sous le hero. À 0,75 il retombe à 42 px, au-dessus du plancher de rang. Les proportions entre les huit sont intactes : c'est un facteur commun, ce que la hauteur unique d'avant ne savait justement pas faire. */ .clients { --clients-logo-echelle: 0.75; } .clients__viewport { mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); } } @media (prefers-reduced-motion: reduce) { .clients__track { animation: none; /* Sans mouvement, la piste doit rester lisible : on la ramène à une liste centrée qui passe à la ligne, et le second exemplaire est retiré. */ width: 100%; justify-content: center; } .clients__list[aria-hidden=true] { display: none; } .clients__list { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-3); } .clients__item { padding-inline: var(--sp-4); } .clients__viewport { mask-image: none; } } /* ========================================================================= Transition halftone Le motif est généré au build en SVG (voir eleventy.config.js), parce que trois exigences dépassent ce que le CSS sait faire : - la grille reste régulière mais la TAILLE des points est bruitée, ce qui demande une valeur différente par cellule ; - ce sont de vrais cercles, pas des dégradés radiaux tronqués ; - la montée en densité suit une ELLIPSE et non une ligne, ce qui enlève au procédé son caractère industriel et carré. Le SVG est un MASQUE : la couleur vient d'ici, donc un seul fichier sert les deux sens de transition — le sens sortie retourne simplement le motif. ========================================================================= */ .halftone { /* ⚠️ --bg-page ET NON LE CRÈME EN DUR. Une bande de transition naît sur le fond de la PAGE — c'est tout son métier. Écrite en dur, elle posait un liseré crème dès que le fond de page a changé (21/08/2026). */ --halftone-fond: var(--bg-page); --halftone-encre: var(--c-blue-dark); position: relative; /* La maquette donne 410 px pour 1904 de large, soit ~21 % de la largeur. On s'en approche sans aller jusqu'au bout : une bande de transition de 410 px coûte beaucoup de défilement pour du pur décor. */ height: clamp(8rem, 3rem + 13vw, 22rem); background-color: var(--halftone-fond); overflow: hidden; pointer-events: none; } /* Sens sortie : du bleu nuit vers le crème. Les couleurs ne changent PAS — ce sont toujours des points bleus sur un fond crème. C'est le MOTIF qu'on retourne : dense en haut pour raccorder la section sombre, clairsemé en bas pour rejoindre le crème. Le retournement inverse aussi la vague, crêtes et creux s'échangeant. */ .halftone--sortie .halftone__trame { transform: scaleY(-1); } /* Liseré de raccord. Le masque est mis à l'échelle de la hauteur de bande : sa dernière rangée tombe donc sur un pixel fractionnaire et ressort partiellement transparente. Le fond crème transparaît alors en un trait d'un pixel, juste à la jointure avec le bloc sombre. On couvre cette arête par un aplat de 2 px du côté saturé du motif — en bas à l'entrée, en haut à la sortie, puisque le motif y est retourné. */ .halftone::after { content: ""; position: absolute; inset: auto 0 -1px; height: 5px; background-color: var(--halftone-encre); } .halftone--sortie::after { inset: -1px 0 auto; } /* Ceinture et bretelles : le fond de la bande vire à l'encre sur ses derniers pour-cent, du côté saturé. Là où le masque est déjà plein, cela ne change rien ; si une arête ressort transparente, c'est de l'encre qu'on voit au travers et non du crème. */ .halftone { background-image: linear-gradient(to bottom, transparent 88%, var(--halftone-encre)); } .halftone--sortie { background-image: linear-gradient(to top, transparent 88%, var(--halftone-encre)); } /* Le motif est PAVÉ horizontalement. `auto 100%` le met à l'échelle de la hauteur de bande uniquement : l'échelle reste uniforme, donc les cercles restent ronds, et la répétition garantit une couverture pleine largeur quel que soit l'écran. C'est ce que permet la vague : périodique, elle se raccorde exactement d'une répétition à l'autre. Une ellipse unique aurait imposé d'étirer le masque à la largeur de l'écran, avec toutes les déformations que ça entraîne. */ .halftone__trame { position: absolute; inset: 0; background-color: var(--halftone-encre); mask-image: url("/assets/img/halftone-mask.svg"); mask-size: auto 100%; mask-repeat: repeat-x; mask-position: center bottom; -webkit-mask-image: url("/assets/img/halftone-mask.svg"); -webkit-mask-size: auto 100%; -webkit-mask-repeat: repeat-x; -webkit-mask-position: center bottom; } /* Le sens sortie est traité plus haut, par le `scaleY(-1)` posé sur la trame : il n'y a rien de plus à faire ici. Un commentaire décrivait à cet endroit une autre approche — garder le masque tel quel et échanger les deux couleurs. Elle a été abandonnée, et le commentaire est resté à décrire du code qui n'existe pas. Vérifié en capture le 12/08/2026 : c'est bien le retournement qui produit la sortie, et les couleurs ne changent jamais. */ /* ========================================================================= Séquence sombre — trois panneaux enchaînés au scroll ========================================================================= */ /* La section elle-même ne porte plus de fond : depuis le 13/08/2026 le sombre est tenu par une BOÎTE arrondie posée sur le crème de la page, et non plus par un aplat pleine largeur. C'est la section qui garde la hauteur d'écran, parce que c'est elle que ScrollTrigger épingle. */ .sequence { position: relative; /* Un écran plein, et il le faut : la section est épinglée en HAUT de la fenêtre (`start: "top top"` dans sequence.js). Toute hauteur inférieure décolle la boîte du centre de l'écran et laisse en dessous une bande de page nue que la trame ne couvre pas. Essayée à 78 % le 13/08/2026 pour alléger la section, puis remise à 100 : c'est la DURÉE de l'épinglage qui pesait, pas la hauteur du bloc. Elle se règle par `data-sequence-duree` sur la section. */ min-height: 100svh; display: grid; align-content: center; padding-block: var(--sp-12); padding-inline: var(--container-pad); } /* La règle qui peignait le `pin-spacer` en bleu nuit a disparu avec l'aplat. Elle existait parce que ce conteneur n'a aucun fond, et que le crème de la page transparaissait en liseré contre les bandes halftone. Ce fond nu est désormais exactement ce qu'on veut voir autour de la boîte. */ /* La boîte. 28 px de rayon et un fond `--c-blue-dark`, relevés sur la maquette. ⚠️ Ces 28 px ne passent pas par `--radius-cadre` (12 px), le jeton tranché le matin même comme rayon unique des cadres du site. La maquette est formelle, et à cette échelle — une boîte qui occupe presque tout l'écran — 12 px se lirait comme un angle droit. Le jeton reste juste pour les panneaux et les captures ; il ne couvre simplement pas cet objet-là. */ /* La trame de fond couvre toute la section, sous la boîte : ce qu'on en voit est donc la bande au-dessus, celle en dessous et les deux marges. Elle remplace les bandes halftone d'entrée et de sortie qui ont sauté avec l'aplat — même motif, mais continu et en mouvement au lieu de deux transitions posées bout à bout. Dessinée dans un canvas par trame-fond.js ; il ne reste ici que le cadrage. Sans JavaScript le canvas est vide, donc invisible. */ .sequence__trame { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; /* Le fondu haut et bas qui raccorde aux sections voisines n'est PAS ici. Il a d'abord été fait en `mask-image`, et c'était une erreur : un masque joue sur l'opacité, donc les points pâlissent sans disparaître et la grille reste lisible jusqu'au bord — on voit un rectangle grisé, pas une transition. Les anciennes bandes halftone marchaient parce que c'est le CALIBRE des points qui tombait à zéro. Le fondu est donc dans le canvas, réglé par `data-fondu`. */ } .sequence__boite { position: relative; z-index: 1; width: 100%; /* 1421 px dans la maquette, soit --container-hero à quelques pixels près. Élargie à 1536 le 13/08/2026 : la boîte est le seul objet plein cadre de la page, elle supporte de déborder de la grille. */ max-width: 96rem; margin-inline: auto; /* 78/178 dans la maquette, sur une boîte de 1421. Les bornes basses ramènent la boîte à une carte mobile plutôt qu'à un cadre vide. ⚠️ Le plancher du rembourrage horizontal a été RELEVÉ le 27/08/2026 (Hugo : « Observation, Problématique, Résolution est un peu trop serré en mobile, augmenter un peu les marges sur les bords quitte à réduire un peu les polices »). C'est le PLANCHER seul qui bouge, et la pente est inchangée : les 34 px tiennent donc jusqu'à ~510 px de large, largeur à laquelle la courbe d'origine les rejoint exactement — aucun saut à la jointure, et rien ne change au-dessus. C'est bien le rembourrage INTÉRIEUR qu'on ouvre, et non la bande de crème autour de la boîte : celle-là est `--container-pad`, partagée par toutes les sections du site, et l'élargir ici seul décalerait cette boîte de toutes les autres. */ padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.875rem); padding-inline: clamp(2.5rem, -0.5rem + 8vw, 11.125rem); background-color: var(--c-blue-dark); color: var(--c-white); /* Coins arrondis, et AUCUN contour — comme la boîte des témoignages, qui reprend ce même rayon. ⚠️ LES DEUX BOÎTES SOMBRES SE TRAITENT ENSEMBLE. Elles sont passées aux coins vifs le 14/08/2026 puis y ont renoncé : c'est le seul endroit du site où l'arrondi survit, les panneaux clairs restant carrés. Changer l'une sans l'autre est toujours une erreur. Sur l'absence de contour : un filet fluo a été essayé puis retiré. La raison n'est pas esthétique — sur bleu nuit posé sur crème, l'arête existe déjà par le contraste, un filet n'y ajoute rien qu'une couleur de plus. C'est l'inverse des panneaux CLAIRS, dont le blanc sur crème ne se distingue quasiment pas : là, le filet ne décore pas, il fait exister le bord. D'où deux traitements différents pour une même famille d'objets. */ border-radius: 1.75rem; /* 28px */ overflow: hidden; } /* Le gabarit horizontal est désormais celui de la boîte : le `.container` des panneaux ajouterait par-dessus sa propre marge et sa propre largeur maximale, et le contenu se retrouverait deux fois en retrait. */ .sequence__boite .container { max-width: none; padding-inline: 0; } .sequence__scene { position: relative; z-index: 1; display: grid; place-items: center; } /* ========================================================================= Effets de fond — signaler qu'on avance alors que le texte reste en place Trois principes à l'essai dans /labo/sequence/. Tous se pilotent par la progression du défilement (voir sequence.js) et restent sous le contenu. ========================================================================= */ .sequence__fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* --- Points qui dérivent --- Reprend le motif du halftone plutôt que d'introduire une forme nouvelle. Débordement volontaire en haut et en bas pour que la dérive ne découvre jamais de bord vide. */ .sequence__points { position: absolute; inset: -25% 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.11) 1.2px, transparent 1.4px); background-size: 26px 26px; will-change: transform; } /* --- Jauge de progression --- */ .sequence__jauge { position: absolute; left: clamp(1rem, 3vw, 3rem); top: 50%; translate: 0 -50%; width: 2px; height: min(38vh, 20rem); background-color: rgba(255, 255, 255, 0.16); border-radius: var(--radius-full); overflow: hidden; } .sequence__jauge > span { display: block; width: 100%; height: 0%; background-color: var(--c-fluo); border-radius: inherit; } /* --- Nuages --- Deux masses très floutées, plus sombres que le fond. Elles se déplacent à contre-sens du défilement : le mouvement se perçoit sans jamais attirer l'œil, parce qu'aucun contour n'est identifiable. */ .sequence__nuages { position: absolute; inset: -35%; background: radial-gradient(38% 30% at 28% 32%, rgba(11, 21, 48, 0.95), transparent 68%), radial-gradient(34% 26% at 72% 62%, rgba(11, 21, 48, 0.8), transparent 70%), radial-gradient(30% 24% at 52% 88%, rgba(63, 88, 215, 0.22), transparent 72%); filter: blur(30px); will-change: transform; } /* Les trois panneaux occupent la même cellule : ils se succèdent au même endroit, comme les trois instances empilées de la maquette. */ .panneau { grid-area: 1/1; width: 100%; } .panneau__grille { display: grid; grid-template-columns: minmax(0, 458fr) minmax(0, 494fr); gap: clamp(2rem, 1rem + 4vw, 5.75rem); align-items: start; } @media (max-width: 60rem) { .panneau__grille { grid-template-columns: 1fr; gap: var(--sp-8); } } /* Chip teintée fluo, le même traitement que les pastilles de « Au cœur de Biron » — demandé le 13/08/2026. Tout est dans `.pastille--chip` (_components.scss) ; il ne reste ici que le ton et la marge basse. Elle passe au passage de --fs-h2 (48 px) au corps de la chip (22 px). Le changement est net, et il est voulu : « Problématique » en mono à 48 px faisait 375 px de large et se lisait comme un second titre à côté du vrai. */ .panneau__badge { --pastille-ton: var(--c-fluo); margin-bottom: var(--sp-6); } .panneau__titre { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: 1.18; letter-spacing: -0.02em; color: var(--c-white); text-wrap: balance; } /* La partie mise en avant du titre passe en fluo adouci — le #d1ff00 pur serait trop violent sur une phrase entière. */ .panneau__accent { color: var(--c-starship); } .panneau__corps { font-size: var(--fs-base); line-height: 1.65; color: var(--c-blue-100); } .panneau__cta { margin-top: var(--sp-8); } /* ========================================================================= Composition « duo », celle que la page de production emploie (sections/sequence.njk passe la variante « duo » au partial). Les trois compositions comparées en atelier — « centre », « large » et « colonnes » — ne servent plus qu'à /labo/sequence-composition/ : elles vivent dans labo/_labo.scss, qui n'est chargé que par l'atelier. ========================================================================= */ /* Titre et corps côte à côte, le titre sur les deux tiers. Demandé le 13/08/2026, en même temps que la boîte. Ce n'est pas la variante C de l'atelier : celle-là donne les deux tiers au CORPS. Ici le rapport est inversé, le titre est la masse et le texte la colonne d'appoint. Les lignes de base sont alignées (`baseline`) : la pilule décale le haut de la colonne de titre, un `start` ferait démarrer les deux colonnes à des hauteurs visiblement différentes. */ .panneau--duo .panneau__grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: baseline; gap: clamp(2rem, 1rem + 3vw, 3.5rem); } .panneau--duo .panneau__titre { font-size: var(--fs-h1); } @media (max-width: 60rem) { .panneau--duo .panneau__grille { grid-template-columns: minmax(0, 1fr); } } /* Contrepartie du rembourrage relevé (voir `.sequence__boite`) : sur un téléphone la marge gagnée est prise sur la colonne de texte, et Hugo l'a accordée — « quitte à réduire un peu les polices ». Le titre redescend d'UN CRAN de l'échelle du site, du --fs-h1 de la composition « duo » au --fs-h2 commun : 24 px au lieu de 30 sur un écran de 375. C'est la seule réduction admissible sous la règle 3 de MAQUETTE.md — un `font-size` inventé pour l'occasion donnerait un titre qui ne ressemble à rien d'autre sur le site. Borné à `xs` et non à `lg` : à 700 px la colonne fait encore 546 px, le --fs-h1 y tient sans peine. Le resserrage est un fait de téléphone. */ @media (max-width: 30rem) { .panneau--duo .panneau__titre { font-size: var(--fs-h2); } /* ⚠️ `.btn` est en `white-space: nowrap` par construction, et « En savoir plus sur la fiabilisation » demande ~267 px de large. La colonne tombant à 273 px sur un écran de 375 — et à 218 sur un 320 —, le bouton débordait et la boîte, qui est en `overflow: hidden`, le rognait. Défaut préexistant sur les petits écrans, que le rembourrage relevé rendait visible plus tôt. Même traitement que les boutons de la colonne bornée de `inscription` : on rend la césure au libellé et on resserre le rembourrage, plutôt que de raccourcir un texte que la maquette donne. */ .panneau__cta .btn { width: 100%; padding-inline: var(--sp-4); white-space: normal; } } /* Sélecteur `ul.` et non `.` seul : le reset de _base.scss cible `ul[class]`, qui l'emporterait sur une simple classe. */ ul.panneau__liste { margin-top: var(--sp-4); padding-left: var(--sp-5); list-style: disc; } ul.panneau__liste li::marker { color: var(--c-fluo); } ul.panneau__liste li + li { margin-top: var(--sp-3); } /* ========================================================================= BLOC « texte-illustre » — blocs/texte-illustre.njk. Origine : « Une approche data unique », Figma 54:2323. Quatre colonnes de grille, dont deux vides : 1 la marge gauche du gabarit — vide, mais le décor la recouvre 2 la voie du visuel 3 la colonne de texte, encadrée de filets fluo 4 une marge de crème, dont la largeur cale le filet droit sur la marge de --container-max : le filet tombe exactement là où commence le contenu du reste du site. La maquette laissait ce filet flotter à 219 px du bord, sans rapport avec la grille de la page. Choix tranché le 12/08/2026 : on l'aligne. ⚠️ Les colonnes 1 et 2 n'en faisaient qu'une jusqu'au 14/08/2026, et le visuel s'y calait par une marge de 31 %. Il en résultait un visuel ni centré ni aligné : à 1904 px il commençait à 293 px du bord de page alors que la marge du gabarit tombe à 312 px — il sortait donc du gabarit par la gauche. En scindant la bande, le visuel a sa propre piste, qui va du bord du GABARIT au filet de la boîte, et il n'a plus qu'à s'y centrer. Le décor, lui, enjambe les deux pistes : la trame doit continuer de courir jusqu'au bord de la page. ⚠️ Les quatre formes flottantes du plan de décor ont été RETIRÉES le 14/08/2026, en même temps que le cadre gris cédait la place à la composition des trois formes. Le décor ne porte donc plus que sa trame. Aucune hauteur n'est fixée. Ce sont les paddings de la colonne de texte qui donnent à la section ses 957 px de maquette, et le visuel se centre sur ce qu'elle mesure. ========================================================================= */ .texte-illustre { /* Largeur exacte de la marge de contenu de `.container` (_base.scss) : à 1904 px de large, 312 px — le filet droit y tombe au pixel. En dessous de 1280 px la soustraction devient négative et c'est le padding de conteneur qui reprend la main. */ --texte-illustre-marge: max(var(--container-pad), (100% - var(--container-max)) / 2); /* 649 px dans la maquette, ramenés à 608. Le plancher évite que la colonne devienne illisible avant le passage en une seule colonne. ⚠️ Ce nombre EST le rapport entre la boîte et l'illustration : tout ce que la colonne de texte ne prend pas revient à la voie du visuel. Il a été resserré le 14/08/2026 parce que l'illustration paraissait petite — et c'est ici, plus que dans sa propre largeur, que se règle son échelle. À ne pas descendre beaucoup plus bas : sous 1280 px de fenêtre, la colonne de texte tombe alors sous 300 px de mesure utile. */ --texte-illustre-col: clamp(21rem, 32vw, 38rem); /* Marge crème autour de la boîte de texte : c'est elle qui la détache du bord de la section et fait lire les quatre filets comme un cadre. Les cotes intérieures de la maquette (155/44/136/77) sont conservées telles quelles — la boîte est simplement posée plus bas. */ --texte-illustre-marge-boite: clamp(var(--sp-8), 3.4vw, 4rem); /* Paddings du CORPS de la colonne de texte. Bornes hautes = les cotes de la maquette (136, 77) ; la pente est calée pour qu'elles soient atteintes vers 1900 px et se resserrent proprement en dessous. ⚠️ Ceux de la bande de titre ne sont plus ici : elle prend les jetons `--pad-panneau-entete-*`, partagés avec « Au cœur de Biron ». Elle avait 155 px au-dessus du titre, contre 56 pour le cadre voisin — l'écart se voyait d'une section à l'autre. Demandé le 14/08/2026. ⚠️ Le rembourrage vertical du corps est descendu de 136 à 84 px le même jour : 136 px entre le filet et la première ligne creusaient un trou en haut de la colonne. La cote de la maquette n'est donc plus tenue ici. */ --texte-illustre-pad-corps: clamp(var(--sp-8), 4.6vw, 5.25rem); --texte-illustre-pad-corps-inline: clamp(var(--sp-6), 4.2vw, 4.8125rem); position: relative; display: grid; /* ⚠️ `--texte-illustre-marge` contient un `100%`, qui se résout contre le conteneur de grille. Il n'est donc utilisable QU'ICI, sur la section : le même jeton posé en marge d'un enfant se résoudrait contre la cellule de cet enfant et donnerait une tout autre valeur. C'est la raison pour laquelle la marge est une PISTE DE GRILLE et non un rembourrage. */ grid-template-columns: var(--texte-illustre-marge) 1fr var(--texte-illustre-col) var(--texte-illustre-marge); background-color: var(--bg-page); /* Les formes débordent largement de la bande : la section les rogne à ses limites. Sans ça, une forme fluo empiéterait sur la séquence sombre voisine. */ overflow: hidden; } /* ---------- Plan de décor ---------- */ /* Le décor enjambe la marge du gabarit ET la voie du visuel : il occupe donc exactement la bande d'avant. Les positions des formes, qui sont en % de ce conteneur, n'ont pas bougé d'un pixel. */ .texte-illustre__decor { grid-column: 1/3; grid-row: 1; position: relative; z-index: 0; pointer-events: none; } /* La trame occupe toute la bande, bord de page compris. Elle n'a aucun bord à cadrer : ce sont ses dégradés qui la font naître du fond. Deux masques composés en intersection, un par axe — l'opacité finale est le produit des deux : axe X extinction vers la gauche sur le tiers, pleine densité à droite contre le filet de la boîte ; axe Y amorce courte en haut et en bas. Le fondu vertical n'est pas cosmétique. Sans lui, la première ligne horizontale du motif tombe pile sur le bord haut de la section et s'y lit comme un liseré — mesuré à #eafc97 sur 2 px, soit 35 niveaux plus sombre que le crème. Décaler le motif de 2 px l'aurait chassée du haut mais l'aurait fait réapparaître en bas dès que la hauteur du contenu change ; un fondu est insensible à la hauteur. `mask-composite` n'est pas doublé en -webkit- : les mots-clés des deux versions diffèrent et les faire cohabiter casse la composition. Tout navigateur qui comprend `mask-composite` comprend `mask-image` sans préfixe. Reste donc écrit à la main — voir aussi _components.scss (.forme-trame__grain) pour le même cas. */ .texte-illustre__grille { --grid-fade-x: 33%; --grid-fade-y: 7%; position: absolute; inset: 0; mask-image: linear-gradient(to right, transparent, black var(--grid-fade-x)), linear-gradient(to bottom, transparent, black var(--grid-fade-y), black calc(100% - var(--grid-fade-y)), transparent); mask-composite: intersect; } /* ---------- Visuel ---------- */ /* Centré dans sa voie, sur les deux axes. Plus de marge de calage : la piste commence là où commence le gabarit et finit sur le filet de la boîte, donc « au milieu » se dit simplement. Le plafond de 36 rem (576 px) est ce qui commande la taille sur grand écran : la voie est toujours plus large que ça, donc c'est lui qui gagne. Il est légèrement au-dessus des 528 px de la maquette, ce que l'on peut se permettre parce que l'illustration est vectorielle — un agrandissement ne lui coûte rien. Le pourcentage ne reprend la main qu'en dessous de 1100 px de fenêtre environ. */ .texte-illustre__visuel { grid-column: 2; grid-row: 1; z-index: 1; align-self: center; justify-self: center; width: min(88%, 36rem); } /* Gabarit dans `.apercu` (_components.scss). Ne restent ici que le ratio de la maquette (523 × 598, portrait) — la page ne bougera pas d'un pixel quand la vraie capture arrivera — et l'ombre. ⚠️ Ce cadre gris ne sert plus « Une approche data unique », qui porte désormais la composition des trois formes. Il reste pour tout autre usage du bloc, quand `visuel.illustration` n'est pas renseigné. */ .texte-illustre__placeholder { aspect-ratio: 523/598; box-shadow: var(--shadow-lg); } /* ---------- Colonne de texte ---------- */ .texte-illustre__texte { grid-column: 3; grid-row: 1; z-index: 2; display: flex; flex-direction: column; /* Cadre fermé sur les quatre côtés, détaché des bords de la section par sa marge. La maquette ne posait que les deux filets verticaux, sur toute la hauteur ; refermer la boîte était une demande explicite. */ /* Filet bleu, comme le cadre de « Au cœur de Biron ». Le jeton est partagé : les deux doivent rester identiques. */ border: var(--filet-panneau); /* Coins vifs, comme les panneaux de « Au cœur de Biron » et de la FAQ depuis le 14/08/2026. Le jeton `--radius-cadre` n'est pas remis à zéro pour autant : il habille aussi le cadre du visuel juste à côté, qui garde les siens. Ce sont les PANNEAUX qui se carrent, pas tout. */ border-radius: 0; margin-block: var(--texte-illustre-marge-boite); /* Blanc, et non plus le crème de la section. Il faut de toute façon un fond OPAQUE ici : c'est lui qui coupe les formes net sur le filet gauche, comme dans la maquette où le losange de droite disparaît exactement sur le filet. Sans fond, il continuerait derrière le texte. Le blanc y ajoute le détachement du cadre sur le crème de la page. */ background-color: var(--c-white); } /* ⚠️ La bande de titre prend les marges du cadre de « Au cœur de Biron », au jeton près. Le rembourrage latéral (58 px) reste plus court que celui du corps juste dessous (77 px) : les deux bords gauches ne s'alignent donc pas tout à fait. C'est déjà ce que faisait la maquette, en plus marqué — elle donnait 44 contre 77. À aligner si l'écart gêne. */ .texte-illustre__entete { padding: var(--pad-panneau-entete-haut) var(--pad-panneau-entete-inline) var(--pad-panneau-entete-bas); } .texte-illustre__titre { margin: 0; } /* Le filet horizontal de la maquette : il court sur toute la largeur intérieure de la colonne. Bleu comme le cadre qui l'entoure — il en est un séparateur interne, pas un accent : c'est le même jeton. */ .texte-illustre__corps { display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); padding: var(--texte-illustre-pad-corps) var(--texte-illustre-pad-corps-inline); border-top: var(--filet-panneau); } .texte-illustre__groupes { max-width: 40rem; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); } /* Un groupe = des lignes accolées ; l'écart entre groupes vaut exactement une ligne vide, comme dans la maquette. D'où le `em` : il suit le corps du texte, pas une échelle d'espacement. Ces deux classes se sont appelées `__blocs` / `__bloc` jusqu'au 13/08/2026. Renommées en même temps que le champ YAML : sur une page, « blocs » désigne la liste des blocs de la page. */ .texte-illustre__groupe + .texte-illustre__groupe { margin-block-start: 1.6em; } .texte-illustre__groupe p { margin: 0; } /* ---------- Groupe rendu en liste ---------- Un groupe de plusieurs lignes est une liste d'affirmations parallèles, et c'est ainsi qu'il se rend depuis le 14/08/2026. La grille, plutôt qu'un `list-style`, pour une raison précise : les lignes repliées s'alignent alors sous le TEXTE et non sous le tiret. C'est tout l'intérêt de l'opération — sans ça, une affirmation longue reproduit exactement le défaut qu'on corrige. Le tiret passe par `::before` et non par `::marker` : `content` sur `::marker` n'est arrivé qu'avec Safari 17, et le repli y aurait été une puce ronde. */ .texte-illustre__groupe--liste { margin: 0; padding: 0; list-style: none; } .texte-illustre__groupe--liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55em; } /* Une puce ronde, dessinée plutôt qu'écrite : un caractère « • » dépend du dessin de la police et de son alignement vertical, alors qu'une boîte ronde se cale exactement où on veut. Le `0.62em` de décalage la pose sur l'œil moyen de la ligne plutôt que sur sa base. */ .texte-illustre__groupe--liste li::before { content: ""; width: 0.4375em; aspect-ratio: 1; margin-block-start: 0.62em; border-radius: 50%; background-color: var(--c-blue); } /* Une demi-ligne entre les items : assez pour que les trois se détachent, pas assez pour qu'ils se lisent comme trois groupes distincts — l'écart entre groupes vaut 1,6 em. */ .texte-illustre__groupe--liste li + li { margin-block-start: 0.55em; } /* ========================================================================= Une seule colonne. La maquette ne couvre pas le mobile. Le décor reste derrière le visuel plutôt que de disparaître, et la boîte garde ses quatre filets. Le décor court d'un bord à l'autre de l'écran : la section ne porte donc PAS de `padding-inline` ici, ce sont la boîte et le visuel qui prennent chacun leur gouttière. Sans ça, la trame s'arrêtait 24 px avant le bord sur une arête franche, et les formes n'avaient pas de quoi déborder. Les paddings intérieurs de la boîte n'ont pas besoin d'être redéfinis : leurs clamps descendent déjà à 24 px de côté à cette largeur. ========================================================================= */ @media (max-width: 60rem) { .texte-illustre { grid-template-columns: 1fr; grid-template-rows: auto auto; } /* Décor et visuel se remettent dans la même cellule, empilés. */ .texte-illustre__decor, .texte-illustre__visuel { grid-column: 1; grid-row: 1; } /* Pleine densité d'un bord à l'autre. Le fondu horizontal n'avait de sens que pour dissoudre une arête intérieure — le filet gauche de la boîte, qui n'est plus à côté mais au-dessous. Au bord de l'écran, la coupe est naturelle et n'a pas besoin d'être adoucie. Le fondu vertical, lui, reste : c'est lui qui évite le liseré sur les bords haut et bas. */ .texte-illustre__grille { --grid-fade-x: 0%; } .texte-illustre__texte { grid-column: 1; grid-row: 2; margin: var(--sp-10) var(--container-pad) var(--sp-12); } /* Le visuel reprend sa place normale dans le flux : plus de décalage vers la droite, il se centre. La gouttière est portée ici puisque la section n'en a plus. */ .texte-illustre__visuel { width: min(100% - var(--container-pad) * 2, 26rem); margin-inline: auto; padding-block: var(--sp-12) 0; } /* Le bouton s'aligne sur le texte plutôt que de se centrer : centré dans une colonne étroite, il flotte. */ .texte-illustre__corps { align-items: flex-start; } } /* ========================================================================= BLOC « texte-halftone » — blocs/texte-halftone.njk. Origine : « Pensé pour les entreprises qui pilotent par la donnée », Figma 185:7468. Sur l'accueil, ce bloc s'insère entre « texte-illustre » et « Au cœur de Biron » — voir l'ordre des `@use "sections/..."` dans src/scss/main.scss, qui porte désormais la cascade (plus de préfixe numérique sur le nom de fichier, voir CLAUDE.md « CSS build »). L'ordre choisi n'engage QUE l'accueil : les classes sont préfixées, donc l'ordre de la cascade n'a aucune conséquence sur une page qui range ses blocs autrement. Deux écarts assumés avec la maquette — colonnes inversées, texte hors cadre. Le pourquoi est en tête de blocs/texte-halftone.njk. ========================================================================= */ .texte-halftone { --texte-halftone-gouttiere: clamp(var(--sp-8), 5vw, 6rem); position: relative; background-color: var(--bg-page); /* Le haut ET le bas passent chacun par une variable dont LA VALEUR PAR DÉFAUT EST DANS LE `var()`, jamais dans une déclaration : c'est ce qui permet à un voisin de la reprendre sans que la spécificité s'en mêle (voir l'accolement à `.intro` et à `.quotidien` plus bas). */ padding-block: var(--texte-halftone-haut, clamp(var(--sp-16), 10vw, 11rem)) var(--texte-halftone-bas, clamp(var(--sp-16), 10vw, 11rem)); /* L'anneau déborde à droite : on rogne ici, la section n'a rien de collant. */ overflow: clip; } /* ⚠️ RESSERRAGE DU RACCORD AVEC LE BANDEAU CLIENTS — accueil uniquement, demandé par Hugo le 16/09/2026 (« réduire l'espace entre la partie clients et la partie Vous n'avez pas besoin de plus de données »). Les deux vides s'ADDITIONNAIENT sans rien entre eux : les 114 px de bas de `.intro` (à 1440) plus les 144 px de haut d'ici, soit 258 px de crème nue. C'est un reliquat de composition — jusqu'au 350c10f, `.intro` était suivie de la section `sequence`, SOMBRE : sa respiration basse laissait la trame s'éteindre avant l'arête. Ce voisin est parti, la respiration est restée, et elle tombe désormais contre le vide d'une section de même fond. Ce qui est rogné est donc le vide PUR, pas le décor : la queue de trame et les formes fluo vivent dans le bas de `.intro`, qui ne bouge pas. Scopé à l'accolement, donc /exemple-blocs/ et toute autre page gardent la respiration pleine du bloc. Et c'est une PROPRIÉTÉ PERSONNALISÉE, pas une surcharge de `padding-block` : la règle étroite plus bas réécrit le raccourci sans lire la variable, donc le rendu mobile ne bouge pas d'un pixel — là où un sélecteur `.intro + .texte-halftone` (0,2,0) l'aurait emporté sur elle à toutes les largeurs. */ .intro + .texte-halftone { --texte-halftone-haut: clamp(var(--sp-8), 3vw, var(--sp-12)); } /* ⚠️ RESSERRAGE DU RACCORD AVEC « VOTRE QUOTIDIEN » — accueil uniquement, demandé par Céline le 16/09/2026 : le bas de `.texte-halftone` (jusqu'à 11rem) s'ajoutait au haut de `.quotidien` (jusqu'à 2rem seulement, déjà resserré pour son quinconce) et laissait un vide disproportionné entre les deux sections. `:has()` cible le voisin PRÉCÉDENT, ce que `+` ne sait pas faire dans l'autre sens. */ .texte-halftone:has(+ .quotidien) { --texte-halftone-bas: clamp(var(--sp-6), 3vw, var(--sp-10)); } .texte-halftone__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--texte-halftone-gouttiere); align-items: center; } /* ---------- Colonne de texte ---------- Hors cadre, et c'est tout l'intérêt : la mesure est bornée par le texte lui-même et non par une boîte. */ .texte-halftone__texte { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(var(--sp-6), 2.4vw, var(--sp-10)); } /* Corps par défaut du h2, soit --fs-h2 : 48 px en grand écran, comme « Au cœur de Biron », « Les 4 garanties Biron » ou « Une approche data unique ». La maquette le donne à 34 px, et il ne faut pas la suivre ici : elle enferme ce titre dans une boîte de 647 px, où 48 px aurait débordé. Le texte étant sorti de sa boîte, la contrainte a disparu — et un titre de section à 34 px au milieu de titres à 48 se lisait comme un sous-titre. Seule la mesure est bornée, pour que le titre se replie en trois lignes pleines plutôt qu'en une ligne longue suivie d'un mot seul. */ .texte-halftone__titre { margin: 0; max-width: 24ch; color: var(--c-blue-zodiac); } .texte-halftone__corps { display: flex; flex-direction: column; gap: var(--sp-5); /* 640 px dans la maquette, mais elle enferme le texte dans une boîte de 647 px. À l'air libre, la mesure doit être bornée pour rester lisible : 34em, la même que les autres textes courants du site. */ max-width: 34em; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); } /* ---------- Le graphique ---------- */ .texte-halftone__visuel { position: relative; /* Carré : c'est le disque qui commande. Il déborde largement à droite, comme la maquette le fait à gauche. */ aspect-ratio: 1; width: 128%; } .texte-halftone__anneau { position: absolute; inset: 0; } /* ---------- L'anneau ---------- Il est DESSINÉ, dans un canvas, par src/assets/js/cible.js (le script garde son nom d'origine : il cible l'attribut `data-cible-anneau`). Le pourquoi est en tête de ce fichier-là : garder des points entiers à la frontière demande de décider point par point, ce qu'un masque CSS — qui décide pixel par pixel — ne sait pas faire. Il ne reste donc ici que le cadrage. Les réglages d'allure (pas de la grille, bords, bruit, encre) sont posés en attributs `data-` sur le canvas, dans blocs/texte-halftone.njk. */ .texte-halftone__anneau { display: block; width: 100%; height: 100%; } /* ---------- Les deux cartes ---------- Posées sur l'anneau, dans son trou et sur son flanc gauche — là où elles ne couvrent pas la trame la plus dense. En pourcentages du visuel : elles restent solidaires du disque à toutes les largeurs. */ /* ⚠️ L'APPARENCE DE LA CARTE N'EST PLUS ICI depuis le 18/08/2026 : fond, filet, rayon, intitulé et pilules sont remontés dans `.carte-etiquettes` (_components.scss), parce que la page dictionnaire emploie la même carte. Les recopier aurait donné deux jeux de valeurs à maintenir. Ce fichier ne garde que ce qui appartient à CET emploi : le positionnement absolu sur l'anneau et l'ombre portée. Ne pas y ramener de couleur ni de typographie — elles se désaccorderaient de l'autre bloc en silence. */ .texte-halftone__carte { position: absolute; box-shadow: 0 4px 40px 4px rgb(var(--shadow-tint)/0.38); } /* ⚠️ REPOSITIONNÉES LE 09/09/2026, quand « Pensé pour les entreprises… » est devenue « La problématique » (voir _data/cible.yaml) : les deux nouvelles cartes portaient chacune 3 lignes de pilules contre 1 avant, et aux cotes d'origine le bord de la carte claire tombait pile sur le titre de la sombre. Écartées pour que seul un coin se touche — jamais une ligne de texte. ⚠️ PUIS ÉCARTÉES À NOUVEAU LE 16/09/2026, quand les cartes sont devenues des PILES à sortie : de 3 valeurs sur une colonne elles sont passées à 12 en pile, plus un entonnoir et une pilule de sortie à droite — une carte de 426 × 236 au lieu de 267 × 184. Mesuré à 1440 px, en pourcentages du visuel (666 px de côté) : 64 % de large, 36 % de haut. La claire va donc de 6 à 42 % en ordonnée, la sombre de 47 à 83 % — cinq points les séparent. ⚠️ LES DEUX CARTES N'ONT PAS TOUT À FAIT LA MÊME LARGEUR — 426 et 402 — et c'est normal : tout leur est commun sauf la pilule de sortie, qui se dimensionne sur son propre libellé. C'est la plus large qui commande les cotes ci-dessous. ⚠️ CES 426 PX SONT LE RÉSULTAT D'UN RÉGIME, pas d'un premier jet — Hugo, le même jour : « profite de ça pour un peu réduire la largeur des blocs en général ». Ils étaient à 476, et c'est d'abord LA LARGEUR ÉCRITE DU TAS qui les a ramenés : la piste valait 17rem de plafond pour 143 px d'étiquettes, donc quatre-vingt-huit pixels de vide (voir `.carte-etiquettes__liste`). Le reste est en pincées — les décalages du désordre resserrés, les cinq libellés les plus longs raccourcis à 18 caractères, le rembourrage de la pilule de sortie réduit. AUCUNE ne touche à ce qui fait la section : ni le nombre de valeurs, ni le recouvrement, ni la taille de la sortie. ⚠️ CE DÉGAGEMENT EST CALCULÉ, PAS CONSTATÉ, et rien ne le vérifie. Les deux cartes sont posées en absolu : elles ne se poussent pas, elles se recouvrent. Quatre choses le referment en silence — desserrer `--pile-recouvrement`, ajouter des valeurs dans _data/cible.yaml, allonger un libellé au point que la pile prenne deux étiquettes par rang, ou grossir `--entonnoir-h`. ⚠️ ET C'EST 1280 PX QUI COMMANDE L'ABSCISSE, PAS 1440. Le conteneur est à sa largeur maximale dès 1280 px, mais la fenêtre, elle, est plus étroite de 160 px : le visuel déborde alors du côté droit et la section le rogne. La marge disponible à droite y tombe à 620 px pour une carte de 426, ce qui plafonne le décalage de la claire à 29 % — d'où ces 26 %. Vérifier une cote d'abscisse à 1280 px, jamais seulement au large. */ .texte-halftone__carte--clair { top: 6%; left: 26%; } .texte-halftone__carte--sombre { top: 47%; left: 0%; } /* ---------- LA PILE DE PILULES, ET SA SORTIE ---------- ⚠️ DEMANDÉE PAR HUGO LE 16/09/2026 : « on multiplie le nombre de pilules, superposées, qu'on ne puisse pas toutes les lire, pour que ça fasse vraiment un côté overwhelming et pas cool ». Les deux cartes portaient trois valeurs bien rangées, c'est-à-dire l'exact contraire de ce que la section raconte — des sources dispersées et des chiffres contradictoires. ⚠️ PUIS REPRISE LE MÊME JOUR, sur deux points : « je veux pas d'effet de dégradé en bas, je veux que tout tienne dans la boîte », et une SORTIE à droite — une flèche et une dernière pilule qui répond à la pile. ⚠️ CE QUI A ÉTÉ RETIRÉ, ET POURQUOI NE PAS LE RÉTABLIR. La pile était d'abord écrêtée à une hauteur fixe et estompée par un masque : les douze valeurs y étaient, mais les dernières se dissolvaient. Ce qu'on y perdait, c'est que l'illisibilité devenait un EFFET posé par-dessus, au lieu de venir de l'encombrement lui-même. Elle ne vient plus que du recouvrement, et les douze pilules sont entières dans la boîte. ⚠️ C'EST DONC LE RECOUVREMENT QUI FIXE LA HAUTEUR DES CARTES, et non plus un plafond. Les deux sont posées en absolu sur l'anneau, elles ne peuvent pas se pousser l'une l'autre : desserrer `--pile-recouvrement` les fait grandir l'une DANS l'autre, sans que rien ne le signale. Les cotes mesurées sont au-dessus de leurs positions, plus bas dans ce fichier. ⚠️ TOUT CELA EST PROPRE À CET EMPLOI, et doit le rester. `.carte-etiquettes` est un atome partagé (page dictionnaire, /cas-clients/hardloop/) où la carte est une liste d'étiquettes qu'on doit pouvoir LIRE. Descendre le recouvrement dans _components.scss rendrait ces deux-là illisibles sans que rien ne le signale. L'atome ne porte que l'APPARENCE de la sortie ; sa mise en place à droite de la pile est ici. Trois pièces, et chacune répond à un mot de la demande : SUPERPOSÉES — des marges négatives, jamais du positionnement absolu. En flux, chaque pilule pousse encore la suivante, donc la pile fonctionne quel que soit le nombre de valeurs et sans qu'aucun compte ne soit publié nulle part. Les pilules prennent un FOND OPAQUE ici (elles sont contournées et transparentes dans l'atome) : c'est lui qui fait que celle du dessus MASQUE celle du dessous. Sans fond, les contours se croisent et donnent un enchevêtrement de filets, pas une pile. Le fond est celui de la carte pour la sombre, du blanc pour la claire — la pilule se détache alors du crème sans introduire de troisième couleur. ⚠️ L'ORDRE DE PEINTURE EST CELUI DU DOM, sans le moindre `z-index` : un élément flex se peint de façon atomique, donc la dernière pilule passe par-dessus la précédente. C'est ce qui donne le sens de la pile, du haut vers le bas — et c'est aussi ce qui laisse la DERNIÈRE entièrement lisible, juste en face de la sortie. QU'ON NE PUISSE PAS TOUTES LES LIRE — le recouvrement ne laisse voir qu'un peu plus de la moitié de chaque pilule. En dessous d'un tiers la pile devient une trame de filets où plus rien ne se lit ; au-dessus des trois quarts on retombe sur une liste aérée. PAS COOL — un désordre. Rotations et décalages alternés par `nth-child`, sur des pas premiers entre eux (3, 4, 5, 7) pour que la période ne se voie pas : à pas égaux, une pile régulière redevient une frise, ce que ce fichier évite déjà ailleurs. ⚠️ C'EST `rotate:` ET NON `transform:`, la règle du site — reveal.js pose un `transform: none` à (0,3,1) sur tout élément révélé, qui emporterait la rotation en silence. Les deux propriétés se composent au lieu de se remplacer. */ .texte-halftone__carte { /* Ce qui reste visible de chaque pilule = sa hauteur moins ce recouvrement. Une seule cote pour les deux cartes : elles doivent peser pareil. ⚠️ DESSERRÉ LE 16/09/2026 (Céline : « le texte est trop caché ») — de 0,8rem à 0,4rem. Toujours dans la fourchette lisible du gabarit (« en dessous d'un tiers la pile devient une trame de filets ») : à six étiquettes par carte (contre douze à l'origine), la carte a de la marge pour desserrer sans grandir démesurément. La bascule mobile garde sa propre valeur (1,25rem), tenue pour une autre raison — la hauteur de la carte empilée, voir plus bas. */ --pile-recouvrement: 0.4rem; /* LA CARTE PASSE EN GRILLE : l'intitulé sur toute la largeur, la pile à gauche, la sortie à droite, l'une centrée sur l'autre. ⚠️ C'EST UN PLACEMENT PAR LIGNES ET COLONNES, jamais par `grid-template-areas` : l'atome rend l'intitulé et la sortie de façon FACULTATIVE, et une zone nommée qui ne reçoit rien creuse quand même sa piste. Placé ainsi, un enfant absent ne laisse rien derrière lui. ⚠️ CETTE RÈGLE PÈSE LE MÊME POIDS QUE `.carte-etiquettes` (0,1,0) et ne l'emporte que par l'ordre des feuilles — _components.scss est chargée avant les sections dans main.scss. Ne pas y remonter ce fichier. */ display: grid; grid-template-columns: max-content max-content; align-items: center; /* ⚠️ PLUS D'AIR SUR TROIS CÔTÉS, demandé par Hugo le 16/09/2026 (« un peu plus de marge à gauche, à droite et en bas sur les deux blocs »). L'atome donne un rembourrage égal sur les quatre, calibré pour une carte de trois étiquettes ; à douze en pile plus un entonnoir et une sortie, la carte a grossi et ce rembourrage ne pesait plus rien en regard. ⚠️ LE HAUT NE BOUGE PAS, et c'est délibéré : c'est le seul côté qui n'a pas un objet au ras du bord mais un intitulé, dont l'interligne fait déjà une partie du travail. L'augmenter décollerait le titre de sa carte. ⚠️ ET C'EST DE LA MARGE INTÉRIEURE, pas de la marge : les deux cartes sont posées en absolu sur l'anneau, une marge extérieure ne les décollerait de rien — elle décalerait seulement leur bord par rapport à leurs cotes de position, sans que rien ne le signale. */ padding: clamp(var(--sp-3), 1.2vw, var(--sp-4)) var(--sp-6) var(--sp-6); /* ⚠️ GOUTTIÈRE NULLE, et c'est une pièce de l'entonnoir, pas une négligence : il entre dans la pile par une marge négative, et une gouttière entre les deux colonnes ne ferait que décaler d'autant le point où naissent ses courbes. Une seule cote commande ce point, `--entonnoir-sous`. Le titre, lui, enjambe les deux colonnes et ne voit pas cette gouttière. */ column-gap: 0; /* ⚠️ INDISPENSABLE, et c'est la pièce qui fait passer l'entonnoir SOUS la pile. Il porte un `z-index: -1` ; sans contexte d'empilement ici, ce -1 remonterait jusqu'au contexte racine et le dessin filerait sous le fond opaque de la section — c'est-à-dire invisible, sans que rien ne le signale. Avec le contexte, il se peint juste après le fond de la carte et juste avant les pilules, qui sont opaques et le masquent donc sur toute leur surface. */ isolation: isolate; } .texte-halftone__carte .carte-etiquettes__titre { grid-column: 1/-1; /* La grille n'a pas de `row-gap` : l'écart sous l'intitulé est porté ici, pour que la pile et la sortie restent, elles, centrées l'une sur l'autre. */ margin-block-end: var(--sp-3); } /* ---------- L'ENTONNOIR, ET LA PILULE SUR DEUX ÉTAGES ---------- Demandés par Hugo le 16/09/2026 : « l'origine de la flèche doit être sous les étiquettes de gauche » et « la pilule résultante peut être plus grosse : sur deux étages pour mieux optimiser la place du bloc ». ⚠️ SOUS LA PILE VEUT DIRE DERRIÈRE, ET LE MOT EST CHOISI. L'entonnoir démarre à l'intérieur de la pile, en marge négative ; ses quatre courbes sont donc masquées par les pilules, qui sont opaques, et n'apparaissent qu'en sortant d'elles. C'est ce qui donne l'impression qu'elles naissent des étiquettes. Deux pièces le rendent possible — la marge négative ici, et le contexte d'empilement posé sur la carte plus haut. ⚠️ LE RETRAIT SE MESURE DEPUIS LE BORD DROIT DU TAS, QUI DOIT DONC AVOIR UNE LARGEUR ÉCRITE. C'est ce qui a manqué aux deux premiers réglages — voir la règle de `.carte-etiquettes__liste` plus bas, qui explique pourquoi un `max-width` sur un conteneur flex repliable ne dimensionne pas ce qu'on croit. ⚠️ ET IL SE VÉRIFIE SUR LA PILULE LA PLUS COURTE, jamais sur la plus longue. Les douze n'ont pas la même largeur, et celles du haut et du bas du tas — là précisément où l'entonnoir s'ouvre — sont quelconques : une origine posée en deçà de la seule plus longue naîtrait dans le vide à côté des courtes. La plus courte des vingt-quatre s'arrête à 104 px, l'origine est à 95. ⚠️ RACCOURCIR UNE ÉTIQUETTE DE _data/cible.yaml SOUS CETTE COTE ROUVRE L'ÉCART, sans que rien ne le signale. ⚠️ CE QUE LE RETRAIT COÛTE, C'EST L'OUVERTURE. Les courbes convergent à 87 % de la largeur du dessin : entré de 42 % — la valeur d'ici — l'entonnoir montre encore la moitié de son ouverture ; entré de 60 %, il ne montre plus qu'un fuseau déjà refermé. Les deux cotes se règlent donc ensemble : enfoncer l'origine demande de grandir `--entonnoir-h`, ce qui élargit la carte. */ .texte-halftone__carte .carte-etiquettes__sortie { grid-column: 2; /* La pointe touche la pilule : l'axe doit se terminer DANS l'objet qu'il désigne, un écart le transformerait en trait qui s'arrête avant. */ gap: 0; } .texte-halftone__carte .carte-etiquettes__entonnoir { /* Une seule cote commande le dessin : la largeur en découle par le rapport du `viewBox`, écrit ici plutôt que laissé à `inline-size: auto` — dans une rangée flex, une largeur intrinsèque de remplacé se négocie, une largeur calculée ne se négocie pas. */ --entonnoir-h: 7.5rem; /* 4,5rem = 61 px, retranchés du bord droit d'un tas large de 11,5rem = 156 : l'origine tombe à 95 px du bord gauche des étiquettes. La plus courte des vingt-quatre s'arrête à 104 px, donc les quatre courbes naissent derrière toutes, y compris celles du haut et du bas du tas. */ --entonnoir-sous: 4.5rem; flex: 0 0 auto; block-size: var(--entonnoir-h); inline-size: calc(var(--entonnoir-h) * 923 / 638); margin-inline-start: calc(-1 * var(--entonnoir-sous)); z-index: -1; } /* ⚠️ LA PILULE DE SORTIE PREND UN RAYON FIXE, jamais `--radius-full`. C'est la règle posée par Hugo le 21/08/2026 : « il faut pas adapter le radius à la taille ». Un rayon plein plafonne à la moitié de la hauteur de la boîte, donc sur deux lignes la FORME changerait avec le contenu — une ligne de plus et le même objet se lirait comme un autre. Les deux étages sortent du `**gras**` déjà écrit dans les données : le `` passe en bloc, l'intitulé occupe la première ligne et la valeur la seconde. Rien à ajouter dans _data/cible.yaml, et les deux cartes suivent la même grammaire que leurs douze étiquettes. */ .texte-halftone__carte .carte-etiquettes__puce--sortie { padding: 0.55rem 0.9rem; /* La valeur monte d'un cran au-dessus des étiquettes de la pile (0,8125rem) : c'est ce qui la détache, au même titre que son aplat. */ font-size: var(--fs-base); line-height: 1.3; text-align: center; white-space: normal; border-radius: var(--radius-cadre); } .texte-halftone__carte .carte-etiquettes__puce--sortie strong { display: block; font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; } /* ⚠️ LA PILE A UNE LARGEUR DÉFINIE, ET C'EST LA PIÈCE QUI MANQUAIT. Elle portait un simple `max-width: 17rem`, et ça ne dimensionne PAS ce qu'on croit : la taille max-content d'un conteneur flex qui se replie, c'est la SOMME de ses enfants — la largeur à laquelle plus rien ne se replierait, soit ici douze pilules bout à bout, près de 1800 px. Écrêtée par le plafond, la piste de grille valait donc 17rem tout rond, 231 px, quand les pilules n'en occupaient que 143. Quatre-vingt-huit pixels de vide à leur droite, dans lesquels l'entonnoir naissait. ⚠️ C'EST AUSSI POURQUOI LES DEUX RÉGLAGES PRÉCÉDENTS N'ONT RIEN DONNÉ, et Hugo l'a décrit exactement : « les origines des flèches n'ont pas bougé, seules les étiquettes se sont déplacées ». L'origine se mesure depuis le bord droit de la PISTE ; la piste valait le plafond, une constante. Enfoncer l'entonnoir le déplaçait bien, mais de 33 px dans un vide qui en faisait 88 ; et raccourcir les libellés ne touchait que les pilules, la piste ne bougeant pas d'un pixel. Un plafond n'est pas une largeur. « Un tas de largeur contenue » : la pile a donc une largeur ÉCRITE, de laquelle `--entonnoir-sous` se déduit. ⚠️ ELLE DOIT RESTER SUPÉRIEURE À LA PLUS LONGUE ÉTIQUETTE (147 px aujourd'hui, décalage du désordre compris), sans quoi les pilules débordent de leur tas — elles sont en `nowrap`, elles ne se replient pas. */ .texte-halftone__carte .carte-etiquettes__liste { grid-column: 1; inline-size: 11.5rem; /* L'écart est porté par les marges des pilules, qui sont négatives. */ gap: 0; } .texte-halftone__carte .carte-etiquettes__liste > .carte-etiquettes__puce { /* Recouvrement horizontal : la marge de fin tire la pilule SUIVANTE sur celle-ci, elle est donc portée par toutes, la dernière d'un rang comprise (où elle ne fait rien de visible). */ margin-inline-end: -0.7rem; /* ⚠️ NI GRANDIR NI RÉTRÉCIR, et le second terme est indispensable depuis que la pile a une largeur définie : par défaut un enfant flex est compressible, donc une étiquette plus large que le tas verrait sa BOÎTE rétrécie sans que son texte suive — il est en `nowrap` — et le libellé sortirait de son propre fond. Elle garde ici sa largeur naturelle et déborderait franchement, ce qui se voit et se corrige, plutôt que de se déformer en silence. */ flex: none; } /* Recouvrement vertical. Sur la première pilule il remonterait toute la pile sous l'intitulé de la carte, d'où le `:not(:first-child)`. */ .texte-halftone__carte .carte-etiquettes__liste > .carte-etiquettes__puce:not(:first-child) { margin-block-start: calc(-1 * var(--pile-recouvrement)); } .texte-halftone__carte--clair .carte-etiquettes__liste > .carte-etiquettes__puce { background-color: var(--c-white); } .texte-halftone__carte--sombre .carte-etiquettes__liste > .carte-etiquettes__puce { background-color: var(--c-blue-dark); } /* Le désordre. Les pas se recouvrent volontairement : une pilule peut prendre une rotation d'un jeu et un décalage d'un autre. ⚠️ LE PLUS GRAND DÉCALAGE ÉLARGIT LA COLONNE D'AUTANT — une marge de début compte dans la contribution max-content de la pilule qui la porte. Ils sont passés de 1,6 / 1,1 / 0,5rem à 0,9 / 0,6 / 0,3 le 16/09/2026, quand Hugo a demandé de réduire la largeur des cartes : douze pixels de gagnés sans rien perdre du désordre, les rotations en faisant déjà l'essentiel. */ .texte-halftone__carte .carte-etiquettes__liste > .carte-etiquettes__puce:nth-child(3n) { rotate: -1.8deg; } .texte-halftone__carte .carte-etiquettes__liste > .carte-etiquettes__puce:nth-child(4n) { rotate: 1.4deg; margin-inline-start: 0.6rem; } .texte-halftone__carte .carte-etiquettes__liste > .carte-etiquettes__puce:nth-child(5n+2) { rotate: 2.4deg; margin-inline-start: 0.3rem; } .texte-halftone__carte .carte-etiquettes__liste > .carte-etiquettes__puce:nth-child(7n+3) { rotate: -2.6deg; margin-inline-start: 0.9rem; } /* ========================================================================= Une seule colonne. Le texte passe au-dessus, le graphique en dessous. Il reste large et déborde des deux côtés : rétréci à la largeur de l'écran, l'anneau devient un motif timbre-poste et les deux cartes n'ont plus de place où se poser. ========================================================================= */ @media (max-width: 60rem) { .texte-halftone { padding-block: var(--sp-section); } .texte-halftone__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); } .texte-halftone__visuel { width: 118%; /* Recentré sur la colonne : il déborde alors autant à gauche qu'à droite. */ margin-inline: -9%; } /* ⚠️ LA SORTIE REPASSE SOUS LA PILE, depuis le 16/09/2026. Côte à côte, la carte fait 426 px ; le visuel n'en fait que 416 à 390 px de fenêtre — elle le couvrirait donc bord à bord —, donc une seule carte couvrirait plus que le disque et sortirait de l'écran. En colonne elle retombe à 243, la rangée de sortie commandant alors la largeur à la place de la pile. ⚠️ L'ENTONNOIR NE TOURNE PAS D'UN QUART DE TOUR, et c'est délibéré : une rotation ne change pas la boîte de disposition, donc un dessin de 128 × 88 redressé occuperait 88 de large pour 128 de haut tout en n'en réservant que 88 — il dépasserait de sa rangée par les deux bouts, sans que rien ne le signale. Il reste horizontal, en tête de la rangée de sortie, et rétrécit : il ne désigne plus la pilule depuis la pile, seulement depuis sa gauche. ⚠️ ET IL NE S'ENFONCE PLUS SOUS LES ÉTIQUETTES : sa rangée est SOUS la pile, il n'y a donc plus rien au-dessus de lui pour en masquer l'origine. Un retrait ne le glisserait que dans le rembourrage de la carte. */ .texte-halftone__carte { grid-template-columns: max-content; /* La pile se resserre : 0,8rem laissait une carte de 273 px de haut, soit 66 % du visuel — deux ne tenaient pas l'une sous l'autre. À 1,25rem la carte fait 227 px, et il reste de quoi les décaler. C'est bien le recouvrement qu'on ouvre, jamais le nombre de valeurs : c'est lui le sujet de la pile. */ --pile-recouvrement: 1.25rem; } .texte-halftone__carte .carte-etiquettes__sortie { grid-column: 1; margin-block-start: var(--sp-3); } .texte-halftone__carte .carte-etiquettes__entonnoir { --entonnoir-h: 3rem; --entonnoir-sous: 0rem; } /* Les deux cartes se DÉCALENT EN DIAGONALE, et pas seulement vers le centre. Côte à côte elles ne tiennent pas : chacune fait ici 243 × 227 pour un visuel de 416 de côté, et la sombre recouvrirait la claire. ⚠️ LA SOMBRE DÉBORDE DU VISUEL PAR LE BAS, d'une quarantaine de pixels : à 55 % de haut pour 55 % d'ordonnée, il n'y a pas d'autre place. Elle tombe dans le rembourrage de la section (`--sp-section`, 54 px à cette largeur), qui ne rogne qu'à ses propres bords — c'est voulu, et c'est ce qui laisse les deux piles entières. */ .texte-halftone__carte--clair { top: 0%; left: 26%; } .texte-halftone__carte--sombre { top: 55%; /* 4 % et non 2 % : le visuel déborde de 9 % à gauche, donc une carte posée trop près de SON bord sortait de l'écran et son filet était rogné. */ left: 4%; } } /* ========================================================================= « Votre quotidien » — 4 cas concrets en grille 2×2, chacun dans une carte de sable posée sur le crème. Ajoutée le 09/09/2026 (Céline). Pastilles sans chiffre : de simples repères de forme (voir partials/forme.njk), pas un rang numéroté. Cartes de sable depuis le 15/09/2026 (Hugo) : les quatre cas étaient posés nus sur le crème jusque-là. ========================================================================= */ .quotidien { /* ⚠️ LE RYTHME DU QUINCONCE, RESSERRÉ EN TROIS FOIS — demandé par Hugo le 16/09/2026 : « tu peux limiter les écarts verticaux entre les items », puis « tu peux encore plus rapprocher », puis « tu peux le faire encore ». Le défaut de la primitive (34 → 68px) est passé à 17 → 27, puis à 10 → 14, puis à 8 → 10. Le défaut est calé sur du contenu NU : `liste-glyphes` et la liste de `face-a-face` posent des `item()` sans fond, et il faut cette respiration-là pour que deux entrées se détachent. Ici chaque entrée porte une CARTE, qui se sépare déjà de la suivante par son fond, son arête et son rembourrage — c'est ce qui laisse descendre si bas sans que deux cas se confondent. ⚠️ LE RYTHME EST À BOUT DE COURSE, ET LE LEVIER EST PASSÉ AU REMBOURRAGE. C'est la leçon de ce troisième pas, et elle vaut pour n'importe quelle liste de cartes : entre deux d'entre elles, l'intervalle VU vaut « rembourrage + écart + rembourrage », donc le rembourrage y compte DOUBLE et l'écart une seule fois. Au deuxième resserrage, diviser l'écart par deux ne resserrait déjà plus l'intervalle que d'un sixième. Le rembourrage BLOC descend donc avec lui (voir `.quotidien__carte`), et c'est ce qui rend ce pas-ci visible là où un quatrième sur le seul écart ne rendrait presque plus rien. ⚠️ POSÉ ICI ET NON DANS `.quinconce` : c'est une primitive partagée, et une valeur écrite là-bas atteindrait `liste-glyphes` et la liste de `face-a-face`, qui n'ont pas de carte et ont besoin du rythme large. La propriété s'hérite, donc la poser sur la section suffit à n'atteindre qu'elle. ⚠️ CHAQUE RESSERRAGE RÉTRÉCIT LE TRACÉ EN POINTILLÉ, qui se cale sur la HAUTEUR de la liste : ~41 % de la largeur à l'origine, ~36 % après le premier resserrage, ~34 % après le deuxième, ~30 % après celui-ci — le rembourrage pesant bien plus lourd que l'écart, c'est lui qui fait l'essentiel de la perte. Voir le gabarit : le remède est `data-chemin-*`, jamais de rouvrir le rythme. */ --quinconce-rythme: clamp(var(--sp-2), 0.7vw, var(--sp-3)); padding-block: clamp(1rem, 0.5rem + 1.5vw, 2rem); /* Les boucles du tracé (partials/chemin.njk) débordent la liste par construction : la section les arrête pour qu'elles ne puissent jamais créer de barre de défilement horizontale. Même règle que `.liste-glyphes`. */ overflow-x: clip; } .quotidien__inner { display: flex; flex-direction: column; gap: var(--sp-8); } /* Aucune taille, aucune police : un

    nu prend l'échelle du site (règle 3 de MAQUETTE.md). Seule l'encre est posée, comme le fait `.approche__titre` juste en dessous — les titres du site restent bleu nuit. */ .quotidien__titre { margin: 0; color: var(--c-blue-zodiac); } /* LA LISTE N'A PLUS DE RÈGLE ICI : c'est `.quinconce` (_components.scss) qui porte la grille, l'alternance, le rythme vertical et le point de rupture depuis le 16/09/2026. Le gabarit dit pourquoi, et pourquoi la carte est enveloppée d'une `.quotidien__cellule` — laquelle ne porte volontairement aucun style : elle n'existe que pour recevoir le retrait latéral de la primitive à la place de la carte. Une grille 2×2 à gouttière --sp-6 vivait ici, et _probleme-conclusion.scss en dérivait la largeur de sa carte « Notre réponse » pour qu'elle coïncide avec ces cases. Ce calcul à deux moitiés est retiré des deux côtés : la conclusion est désormais empilée et centrée sur sa propre mesure, il n'y a plus de case à rejoindre. */ /* ---------- La carte de sable ---------- Demandée par Hugo le 15/09/2026 : « mets les quatre éléments dans des boîtes grises comme on a fait la boîte IA sans gouvernance ». C'est le camp dépassé du face-à-face de /connecteur-ia/ (.face-a-face__colonne--moins), et les trois valeurs qui le font sont reprises telles quelles : le sable --c-base-surface, le rembourrage `clamp(--sp-6, 2.4vw, --sp-10)` et le rayon de 28px. ⚠️ AUCUN FILET, et c'est mesuré, pas un oubli : le sable se détache du crème à 1,22 — assez pour dessiner son arête seul, là où les cartes BLANCHES de `cas-clients` à 1,05 en réclament un. Même arbitrage que sur la carte d'en face, dont le commentaire porte les mêmes chiffres. ⚠️ 28px ET NON LES 20px DES CARTES DU SITE (`module.cartes`) : c'est le rayon de la boîte nommée en référence, et ces cartes ont la même largeur qu'elle (une demi-colonne). Elles sont en revanche bien plus basses ; si l'arrondi paraît lourd, c'est --carte-radius qu'il faut descendre à 1.25rem, et rien d'autre. --section-bg et --bg-page suivent le fond, comme sur la carte de référence : un objet posé dedans qui lirait « le fond de la page » recopierait le sable et non le crème. */ .quotidien__carte { --carte-radius: 1.75rem; /* La chasse du titre de carte, NOMMÉE parce que la croix la relit : les deux doivent avoir le même corps pour que leur alignement se voie, et deux littéraux auraient divergé au premier réglage sans que rien ne le signale. */ --carte-titre-taille: clamp(1.125rem, 0.87rem + 0.79vw, 1.625rem); --section-bg: var(--c-base-surface); --bg-page: var(--c-base-surface); display: grid; grid-template-columns: auto minmax(0, 1fr); /* ⚠️ `baseline` ET NON `start` : la croix se cale sur la LIGNE DE BASE du titre, pas sur le haut de sa boîte de ligne. C'est la leçon du long commentaire « Alignement des marqueurs en forme » de _components.scss — toute valeur écrite à la main pour deviner où tombent les capitales dans la ligne est condamnée à dériver, le navigateur est le seul à connaître les métriques de la fonte. La colonne de texte est un conteneur flex en colonne : sa première ligne de base est celle de son premier enfant, donc celle du titre. C'est ce qui rend l'alignement juste sans que la règle ait à savoir que la description existe. C'était `center`, qui centrait le repère sur la hauteur du couple titre + description — d'où la demande du 15/09/2026. */ align-items: baseline; gap: var(--sp-5); /* ⚠️ LE REMBOURRAGE EST DISSOCIÉ SUR LES DEUX AXES depuis le 16/09/2026, et c'est le vrai levier du troisième resserrage (« tu peux le faire encore »). Le rythme du quinconce ne pouvait plus rien donner : dans l'intervalle vu entre deux cartes, le rembourrage compte deux fois et l'écart une seule. Seul le BLOC descend (34 → 27px au large), l'INLINE ne bouge pas : c'est la hauteur qu'Hugo resserre, et rétrécir aussi les flancs aurait changé la mesure du texte dans la carte — donc son nombre de lignes, donc sa hauteur, ce qui travaille contre la demande. La dissymétrie qui en résulte est légère et va dans le sens de l'objet : une carte qui porte un titre et deux lignes n'a pas besoin d'autant de haut que de côté. ⚠️ CE N'EST PLUS LE REMBOURRAGE DE LA BOÎTE « IA SANS GOUVERNANCE » d'où la carte est venue. Le fond, l'arête et le rayon en viennent toujours ; le rembourrage, non — ne pas le « réaligner » dessus. */ padding-block: clamp(var(--sp-5), 1.9vw, var(--sp-8)); padding-inline: clamp(var(--sp-6), 2.4vw, var(--sp-10)); border-radius: var(--carte-radius); background-color: var(--c-base-surface); } /* ---------- La croix ---------- ⚠️ L'ENCRE DISCRÈTE EST REPRISE DU ✕ DU FACE-À-FACE, et son raisonnement tient ici tel quel : le camp sans Biron est ÉTEINT (--text-muted), celui avec Biron est ALLUMÉ. Ces quatre cartes sont le constat, donc le camp éteint. 5,58 sur le sable — mesuré sur ce même fond dans _face-a-face.scss. La maquette d'origine du face-à-face posait ce ✕ en rose ; le commentaire de ce fichier-là dit pourquoi le site ne le suit pas (le seul rose disponible est --c-pilier-plateforme, et il se lirait comme un renvoi vers la plateforme). Si la croix paraît trop discrète, c'est --c-blue qu'il faut lui donner, pas un rose. AUCUNE LARGEUR FIXE : les quatre cartes portent le même glyphe au même corps, il n'y a donc rien à faire coïncider de l'une à l'autre — même raison que dans _face-a-face.scss. */ .quotidien__croix { /* La MÊME fonte et le MÊME corps que le titre, sur un élément qui ne porte qu'un glyphe. Ce n'est pas décoratif : c'est de sa fonte que le navigateur tire la ligne de base sur laquelle `align-items: baseline` va l'accrocher, et deux métriques différentes décaleraient le calage — c'est la raison que donne déjà `.item__marqueur--glyphe` dans _components.scss. */ font-family: var(--font-serif); font-size: var(--carte-titre-taille); line-height: 1.3; font-weight: var(--fw-semibold); color: var(--text-muted); } .quotidien__texte { display: flex; flex-direction: column; gap: 0.375rem; } .quotidien__carte-titre { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--carte-titre-taille); line-height: 1.3; letter-spacing: -0.01em; color: var(--c-blue-zodiac); } .quotidien__carte-texte { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-muted); } /* Aucun point de rupture ici : c'est `.quinconce` qui s'effondre en une colonne sous `lg`, et pour sa raison — à cette largeur l'alternance ne se lit plus comme un rythme, seulement comme des marges incohérentes d'une entrée à l'autre. La grille d'avant tombait sous `sm` ; ce n'est pas un réglage perdu, c'est le seuil de l'objet qui a changé avec l'objet. */ /* ========================================================================= Conclusion de « La problématique » — sections/probleme-conclusion.njk. Le constat nu sur le crème, puis la réponse de Biron dans une carte bleu nuit : les deux empilés et centrés sur un même axe. Les deux moitiés ont été inverties le 15/09/2026 (Hugo) : la carte sombre portait le constat et la réponse était un exergue derrière une barre fluo. Le gabarit dit pourquoi. Cette feuille reprenait alors .texte-module__chute-rangee / __conclusion / __exergue ; elle ne le fait plus — la composition n'est plus celle-là, et les emprunter aurait couplé cette section aux réglages de /pourquoi-biron/. ========================================================================= */ /* ⚠️ LE RETRAIT DU HAUT EST OUVERT EN DEUX FOIS le 16/09/2026 (27 → 41 → 54px au large) : « un tout petit peu plus d'espace entre la fin des items, le Pourquoi en arrive-t-on là et Notre réponse », puis « mais un POIL plus d'espace entre le dernier item et le Pourquoi en arrive-t-on là ». C'EST LUI QUI PORTE L'ESPACE APRÈS LES ITEMS, et non le bas de `.quotidien` : les deux s'additionnent (l'une finit, l'autre commence), mais le retrait bas de `.quotidien` est écrit en raccourci avec son retrait HAUT, qui sépare la section de « La problématique » au-dessus. L'ouvrir là-bas aurait déplacé une respiration qu'on ne touchait pas. Total entre la dernière carte et le titre du constat : 54 → 68 → ~76px. ⚠️ LES DEUX RESPIRATIONS DE LA FIN DE SECTION NE SONT PLUS ÉGALES, et c'est voulu depuis ce second réglage : la première sépare deux SECTIONS (les cas, puis la conclusion), la seconde sépare deux objets D'UNE MÊME pensée (le constat et sa réponse). Elles étaient calées sur la même valeur au réglage précédent ; ne pas les « réaccorder » sans le demander. ⚠️ CET ESPACE EST LE CONTRECOUP DES TROIS RESSERRAGES du quinconce le même jour (voir --quinconce-rythme dans _quotidien.scss). Les cartes s'étant rapprochées de 135 à 64px les unes des autres, la fin de section devait suivre pour que la conclusion ne se lise pas comme une cinquième carte. Ne pas resserrer ceci sans regarder ce qu'il en est de cela. */ .conclusion-bloc { padding-block: clamp(var(--sp-6), 3.4vw, var(--sp-16)) clamp(5rem, 3rem + 5vw, 9rem); } /* ---------- La pile ---------- ⚠️ UNE PILE ET NON PLUS UNE RANGÉE, d'où le changement de nom : c'était `__rangee`, trois colonnes (constat | flèche | carte). Hugo, 16/09/2026 : « finir sur Pourquoi on en arrive là et notre réponse centrée et alignées verticalement ». Un nom qui aurait continué de dire « rangée » aurait menti. `align-items: center` centre les deux blocs sur un même axe vertical — et c'est ce qui les « aligne », leurs mesures étant différentes. ⚠️ LA FLÈCHE QUI LES SÉPARAIT A ÉTÉ RETIRÉE le 16/09/2026 (« enlève la flèche »), balise et règles comprises : un objet sans appelant se lit comme s'il agissait encore. Il ne reste donc que l'espacement de la pile pour marquer le passage du constat à la réponse, ce qui suffit — c'est le parti du site partout ailleurs (voir le quinconce, dont la respiration est « le seul signal de séparation »). Elle est dans git à cette date. ⚠️ CE QUI DISPARAÎT AVEC LA RANGÉE, et qu'il ne faut pas chercher à rétablir : la LARGEUR CALQUÉE sur les cases de « Votre quotidien » (demandée la veille) n'a plus de case à rejoindre — cette section est passée en quinconce le même jour. Le calcul à deux moitiés est retiré des deux côtés, avertissement croisé compris. la HAUTEUR ÉGALE des deux blocs (demandée la veille aussi) disait que deux objets CÔTE À CÔTE devaient descendre à la même ligne. Empilés, ils n'ont plus de hauteur à partager. Les deux `justify-content: center` qui la servaient sont partis avec elle. */ .conclusion-bloc__pile { /* ⚠️ DEUX MESURES DEPUIS LE 16/09/2026, ET PLUS UNE SEULE PARTAGÉE : Hugo a demandé la phrase de réponse « en plus gros dans une box plus large ». La carte sort donc de la mesure du constat — elles restent centrées sur le même axe, mais ne sont plus de même largeur. 45rem ≈ 612px pour le CONSTAT, où il compose à ~78 signes par ligne : un peu long pour de la prose suivie, acceptable pour deux points brefs ouverts par un gras. Inchangé. 64rem ≈ 870px pour la CARTE, et la valeur est calée sur sa phrase, passée à --fs-h2 : à cette mesure, rembourrage ôté, elle tient sur deux lignes. Le plafond réel reste le conteneur (80rem), donc la carte occupe ~80 % de la largeur de page — nettement plus large que le constat, ce qui est la demande, sans toucher les bords. */ --conclusion-mesure: 45rem; --conclusion-mesure-carte: 64rem; display: flex; flex-direction: column; align-items: center; /* ⚠️ OUVERT DEUX FOIS, et la seconde est la demande d'aération du 16/09/2026 (« un tout petit peu plus d'espace […] et Notre réponse ») : 34 → 54 → 68px au large. La première ouverture accompagnait le RETRAIT DE LA FLÈCHE, et ce n'était pas une décision à part : la flèche occupait 44px de haut entre deux écarts de 34, soit ~112px de séparation. La retirer sans toucher à l'espacement aurait ramené les deux blocs à 34px l'un de l'autre, un tiers de ce qu'Hugo avait validé. À 68px, l'écart revient près de ce que la flèche laissait — la différence étant qu'il n'y a plus d'objet au milieu pour l'occuper, ce qui est exactement l'effet cherché. C'est le seul espace ENTRE le constat et la carte : il n'y a plus rien entre eux, donc aucune autre valeur ne s'y ajoute — à la différence de l'espace après les items, qui est une somme de deux retraits (voir plus haut). */ gap: clamp(var(--sp-10), 5vw, var(--sp-20)); } /* Chacun remplit sa mesure : sans `inline-size`, un bloc flex en colonne se réduirait à son contenu, et la carte cesserait d'être « plus large » dès que sa phrase tiendrait sur une ligne. */ .conclusion-bloc__constat { inline-size: 100%; max-inline-size: var(--conclusion-mesure); } .conclusion-bloc__reponse { inline-size: 100%; max-inline-size: var(--conclusion-mesure-carte); } /* ---------- Le constat, nu sur le crème ---------- */ .conclusion-bloc__constat { display: flex; flex-direction: column; gap: var(--sp-5); } /* ⚠️ LE TITRE EST CENTRÉ, MAIS PAS SA LISTE, et c'est l'arbitrage d'Hugo du 16/09/2026 : le bloc entier est centré sur la page, les deux raisons gardent leurs puces et leur fer à gauche. L'alternative — deux phrases centrées sans disque — a été écartée par lui. Ce que ça évite : centré, un disque se retrouve loin de son texte dès que la raison passe sur deux lignes, et les deux en font trois. Le centrage s'arrête donc au titre, ce qui suffit à faire converger la fin de section après le zigzag du quinconce. Aucune taille en face, et c'est ce qui fait tout le travail : le titre est un

    depuis le 15/09/2026 (le constat est une SOUS-SECTION, pas une section de plein rang), et un

    nu prend --fs-h3. `text-wrap: balance` vient lui aussi de la règle de base des titres. Seule l'encre est posée : les titres du site restent bleu nuit. */ .conclusion-bloc__titre { text-align: center; color: var(--c-blue-zodiac); } /* ⚠️ Sélecteur `ul.` et non `.` seul : le reset de _base.scss cible `ul[class]` (élément + attribut, spécificité 0,1,1) et l'emporterait sur une simple classe (0,1,0), même chargée après lui. */ ul.conclusion-bloc__liste { margin: 0; padding-left: 0; list-style: none; } /* ⚠️ UN LOSANGE BLEU, PAS UN DISQUE, depuis le 16/09/2026 (Céline : « pour que ça ressorte mieux »). Le disque `::marker` ne peut pas devenir une forme de marque — un marqueur de liste ne peut porter ni masque CSS ni transform — d'où la puce en frère du texte plutôt qu'un pseudo-élément, exactement le raisonnement de « marque » dans partials/item.njk. */ .conclusion-bloc__liste li { display: flex; /* `flex-start` et non plus `baseline`, depuis que la forme est aussi grande que les deux lignes de texte (voir `.conclusion-bloc__forme`) : une forme de cette taille alignée sur la ligne de base flotterait bien au-dessus du texte, la baseline d'un gros aplat n'étant pas celle d'un caractère. Callée en haut, elle borne le bloc de texte comme une vraie icône plutôt que comme une puce de liste. */ align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); } .conclusion-bloc__liste li + li { margin-block-start: var(--sp-3); } .conclusion-bloc__puce { flex-shrink: 0; } /* ⚠️ TROIS RÉGLAGES DE SUITE le 16/09/2026 (Céline) — 0,6 → 1rem (« plus grosses »), puis « la taille des 2 lignes de paragraphe » (3,2em, deux fois --lh-normal), puis « trop grosses […] réduit par 2 » : 1,6em. Restée en `em` plutôt qu'en `rem` : elle se cale ainsi sur --lh-normal (1,6) du texte qui la suit — une ligne de ce corps — et resterait juste si le corps du texte changeait un jour, sans recalcul à la main. */ .conclusion-bloc__forme { --shape-w: 1.6em; } /* ---------- La carte de réponse ---------- ⚠️ ARRONDI 20px ET NON LES 28px DES BOÎTES DE SECTION : c'est le rayon des cartes du site, et la raison est celle que porte `.texte-module__conclusion` — une carte posée dans une page qui arrondit ses boîtes à 28 doit se lire comme une carte, pas comme une petite boîte de section. ⚠️ AUCUN LISERÉ : un anneau autour d'un aplat bleu nuit posé sur crème double une arête que le contraste fait déjà (règle 1 de MAQUETTE.md). `.on-dark` est sur la CARTE, jamais sur la section : posée sur la section, la classe redéfinirait --bg-page, dont la section se sert comme fond, et la carte s'y dissoudrait. ⚠️ SON CONTENU EST CENTRÉ, à la différence du constat au-dessus : Hugo écrit « notre réponse centrée », au singulier, et la carte n'a pas de liste à puces qui s'y opposerait. C'est la fin de la section, le point d'arrivée du zigzag du quinconce — un surtitre et une phrase, tous deux centrés. Son REMBOURRAGE s'ouvre d'un cran avec elle (34 → 54px au large) : calé sur une phrase au corps du texte, il paraissait serré sous une phrase de 41px. C'est une conséquence de l'agrandissement, pas une demande à part. */ .conclusion-bloc__reponse { /* Les deux variables du motif — voir `.conclusion-bloc__reponse-decor` plus bas. Postées ici et non sur le décor : c'est cette carte qui EST le fond réel, l'invariant que _components.scss demande (les séries qui reculent sont la base mélangée à ce fond). */ --motif-fond: var(--c-blue-dark); --motif-base: color-mix(in srgb, var(--c-blue) 40%, var(--c-white)); position: relative; overflow: hidden; border-radius: 1.25rem; /* 20px */ background-color: var(--c-blue-dark); padding: clamp(var(--sp-8), 3.5vw, var(--sp-16)); display: flex; flex-direction: column; gap: var(--sp-4); text-align: center; } /* ---------- Le décor ---------- Le motif « bulles » (partials/motif.njk), demandé par Céline le 16/09/2026 : même procédé que les briques de /produit/ — un dessin en demi-teinte DANS la boîte, rogné par son arrondi — mais « bulles » est le seul des dix dessins assez généreux en surface pour couvrir la largeur d'un rectangle horizontal sans se réduire à un coin (voir l'en-tête de partials/motif.njk). ⚠️ LARGEUR PLUTÔT QUE HAUTEUR, à l'inverse de /produit/ (`--motif-taille` en `block-size`) : cette carte est un rectangle large et bas quand les briques produit sont hautes et étroites. Caler sur la largeur laisse le dessin suivre le rapport de son propre viewBox (349 × 220, un peu plus large que haut) au lieu de le faire déborder par les côtés — et c'est ce qui le rend plus haut que la place qui lui reste sous le texte : il DOIT déborder quelque part, et lequel des deux bouts déborde est tout l'enjeu ci-dessous. ⚠️ LE TEXTE RESTE LISIBLE PAR EMPILEMENT, PAS PAR TRANSPARENCE — c'est le `z-index` qui fait le travail, jamais une opacité sur le motif : baisser son opacité aurait aussi éteint le contraste de ses propres points entre eux, qui est ce qui les rend lisibles comme des bulles plutôt que comme du bruit. `--motif-base` à 40 % de blanc (contre 55 % essayé puis écarté) tient le compromis : les pilules blanches et le texte gras restent le sujet, les bulles un fond qu'on remarque en second. ⚠️ ANCRÉ EN HAUT, PAS EN BAS — le REVIREMENT du 16/09/2026. Un premier essai ancrait le motif au bas de la carte et rognait son excédent PAR LE HAUT, à l'intérieur d'une bande : ça coupait des bulles en deux au ras de la bande, en plein milieu de leur disque. Céline : « il ne faut pas rogner en haut […] elles doivent être pleines vers le haut, il faut rogner en bas ». Le motif est donc ancré par le HAUT de `.conclusion-bloc__etiquettes-zone` — juste sous la phrase, jamais dessus — et c'est son BAS qui déborde. Rien ne le rogne à l'intérieur de la zone (elle n'a pas d'`overflow` à elle) : c'est la carte entière, `.conclusion-bloc__reponse`, qui absorbe ce débord à SON bord et à SON arrondi — le seul endroit où une coupe nette est déjà attendue, exactement comme la référence de Céline. */ .conclusion-bloc__etiquettes-zone { position: relative; } .conclusion-bloc__reponse-decor { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 0; pointer-events: none; } /* ⚠️ 138 %, PAS 100 % — les bulles s'arrêtaient avant le bord droit de la carte à 100 %, et ce n'est pas un souci de largeur mais de DESSIN : la composition de `motifBulles` (partials/motif.njk) est elle-même plus dense à gauche qu'à droite — quatre bulles seulement passé x=305, sur un viewBox qui va jusqu'à 381. Zoomer et centrer pousse cette partie clairsemée hors du cadre des deux côtés, et ne garde que le CŒUR dense de la composition, qui couvre alors toute la largeur de la carte. Toute valeur au-dessus de 100 % marche dans ce sens ; 138 % est la première qui ne laisse plus de bord visiblement plus clairsemé que le centre, jugé à l'écran. */ .conclusion-bloc__reponse-decor .motif { position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% 0; /* ⚠️ `max-width` EXPLICITEMENT LEVÉ, ET C'EST CE QUI A COÛTÉ LE PLUS DE TEMPS À TROUVER. Le reset global du site (_base.scss) pose `img, picture, svg, video, canvas { max-width: 100% }` : `inline-size` (la propriété juste en dessous) GAGNE le calcul de largeur par spécificité, mais `max-width` est une propriété À PART qui continue de plafonner le résultat à 100 % du conteneur — les deux ne se disputent pas la même déclaration, donc la spécificité plus forte d'ici ne suffit pas à l'emporter. Sans cette ligne, `inline-size: 138%` se voyait silencieusement ramené à 100 %, sans qu'aucun outil ne le signale. */ max-width: none; inline-size: 138%; block-size: auto; } /* Les étiquettes passent devant le décor — la seule raison pour laquelle il reste dans la même zone au lieu d'un calque à part. */ .conclusion-bloc__etiquettes { position: relative; z-index: 1; } /* Un

    et non un

    : « Notre réponse » étiquette la phrase qui suit, elle n'ouvre pas une sous-partie du document — le seul titre de cette section est celui du constat. C'est d'ailleurs ce que sa forme dit maintenant. ⚠️ LA FORME VIENT DE `.eyebrow` (_components.scss), POSÉE DANS LE GABARIT : mono, 11px, capitales, interlettrage large. Demandé par Hugo le 16/09/2026 — « mets le titre Notre réponse en mono et petite ». Il portait la chasse d'un

    jusque-là, et tout ce bloc de déclarations a disparu avec : c'est la primitive qui les porte, il n'y a plus de faux

    à tenir accordé avec _base.scss. ⚠️ SEULE L'ENCRE EST REPRISE, et le sélecteur est COMPOSÉ pour ça. `.eyebrow` met --text-muted, qui donnerait du casper sur ce fond ; le fluo est ce qui distingue l'étiquette de la phrase blanche en dessous, qu'Hugo a demandée blanche il y a deux jours. À classe simple, la règle pèserait le même poids que `.eyebrow` et ne l'emporterait que par l'ordre des feuilles — la leçon de `carte-etiquettes` : quand on surcharge un atome partagé, on le surcharge par la spécificité, pas par le hasard du chargement. Le fluo arrive par --text-accent et non écrit en clair : sur ce fond `.on-dark` a déjà mis ce rôle au fluo (11,54 sur le bleu nuit), et une couleur en dur serait fausse le jour où la carte changerait de fond — c'est ce qui est arrivé à `.etapes__boite` quand elle est devenue verte. */ .conclusion-bloc__reponse-titre.eyebrow { color: var(--text-accent); } /* ⚠️ --fs-h2, LE CRAN AU-DESSUS DE CELUI DU TITRE DU CONSTAT. Hugo l'a demandée deux fois le 16/09/2026, dans le même sens : d'abord « en même taille de police que Pourquoi en arrive-t-on là » (--fs-h3, la chasse d'un

    nu), puis « en plus gros dans une box plus large ». C'est donc le barreau suivant de l'échelle du site, jamais une valeur inventée (règle 3 de MAQUETTE.md) — 24→41px, contre 19→27 pour le titre au-dessus. Elle prend aussi la police et l'interlignage d'un titre : à cette chasse, le corps de texte du site et son --lh-normal de 1,6 laisseraient des lignes bien trop espacées. C'est une déclaration, plus du texte courant. --ls-tight est bien le crénage des h2 comme des h3 dans _base.scss : la valeur ne bouge donc pas avec la chasse. « Le texte qui suit en blanc » (14/09/2026) : c'est --text-strong, que `.on-dark` met au blanc — jamais --text-muted, qui donnerait du casper. */ /* ⚠️ TAILLE RÉDUITE ET INTERLIGNE OUVERT le 16/09/2026 (Céline : « un peu plus d'interligne » et « réduit un peu la taille »), une fois les deux cartes d'étiquettes ajoutées dessous : la phrase à --fs-h2 serrée à --lh-tight (1,08) pesait trop lourd au-dessus d'elles. `calc(... * 0.85)` garde le fluide du clamp (règle 3 de MAQUETTE.md — jamais une valeur bornée inventée à côté) plutôt que de redescendre à --fs-h3, un cran entier plus bas que ce qui a été demandé. --lh-snug (1,35) est le palier suivant après --lh-tight dans l'échelle du site — ni collé comme un titre, ni aéré comme du texte courant. */ .conclusion-bloc__reponse-texte { font-family: var(--font-titre); font-size: calc(var(--fs-h2) * 0.85); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-strong); text-wrap: balance; } /* ---------- Les deux cartes d'étiquettes ---------- Ajoutées le 16/09/2026 (Céline) : les cartes « Secteurs » et « Équipes » de l'ancienne section (_data/cible.yaml sur `master`), reprises via partials/carte-etiquettes.njk — pas la version en pile de sections/_texte-halftone.scss, qui ne s'applique qu'aux cartes de `.texte-halftone__carte`. Celles-ci gardent la mise en page simple de l'atome : un intitulé, des pilules qui se replient. ⚠️ TROIS RÉGLAGES DE SUITE SUR `ton`, ET C'EST LE DERNIER QUI COMPTE : d'abord les deux en `sombre` (lisibles sur le bleu nuit de cette carte), puis reprises à l'identique de `master` (« Secteurs » clair, « Équipes » sombre), puis Céline, en voyant ce second rendu empilé en quinconce vertical : « les 2 blanches ». Les deux cartes sont donc en `ton: clair` dans les données, sans surcharge de couleur ici. ⚠️ CÔTE À CÔTE, MÊME HAUTEUR, ALIGNÉES — dernier réglage du 16/09/2026. Le quinconce (décalage vertical d'une carte, `align-items: flex-start`) a été essayé puis écarté : Céline « ça ne va toujours pas […] je veux que les 2 cartes soient de la même hauteur […] et qu'elles soient alignées ». `align-items` repasse donc à son défaut `stretch` : les deux cartes prennent la hauteur de la plus grande (« Équipes », 6 valeurs sur trois rangs), et « Secteurs » (4 valeurs, deux rangs) hérite du même cadre avec un peu d'air sous ses pilules plutôt qu'une hauteur propre. */ .conclusion-bloc__etiquettes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); } /* ⚠️ UNE LARGEUR PLAFONNÉE, ET C'EST CE QUI PERMET LA RANGÉE. Sans elle, chaque carte s'étire à la largeur de tous ses libellés mis bout à bout — « Équipes » (6 valeurs) dépassait alors 490px, et les deux ensemble ne tenaient plus côte à côte dans la mesure de la carte de réponse : la rangée retombait en pile. Plafonnée, chaque carte replie ses pilules sur deux colonnes (comme sur `master`), les deux prennent alors une largeur proche l'une de l'autre, et la rangée tient. */ .conclusion-bloc__etiquette { max-width: 16rem; } /* ⚠️ LE FILET DES PILULES ÉTAIT INVISIBLE, ET C'ÉTAIT LE VRAI DÉFAUT derrière « il manque les étiquettes qui entourent les mots ». `.carte-etiquettes--clair` lit `--border-subtle` (_components.scss), une PROPRIÉTÉ PERSONNALISÉE — et `.on-dark`, posée sur `.conclusion-bloc__reponse` qui contient ces cartes, la redéfinit en blanc translucide pour les filets qui vivent DIRECTEMENT sur le bleu nuit (voir _components.scss, ~L.605). Une carte `clair` héritait donc d'un filet blanc à 25 % sur son propre fond crème — quasi invisible (contraste ≈ 1). Le filet clair d'origine (`rgba(44, 42, 46, 0.12)`, _tokens.scss) est redéclaré ici, sur le sélecteur le plus spécifique aux deux cartes, pour ne pas rouvrir `--border-subtle` au niveau de la carte entière — ce qui aurait aussi blanchi le rembourrage textuel de `.on-dark` ailleurs dans le bloc. */ .conclusion-bloc__etiquette.carte-etiquettes--clair { --border-subtle: rgba(44, 42, 46, 0.12); } /* AUCUN POINT DE RUPTURE : la pile est déjà la disposition étroite. La règle `md` d'avant ne faisait qu'effondrer la rangée de trois colonnes en une seule et redresser la flèche — les deux sont devenus la règle tout court. La mesure commune est bornée par `inline-size: 100%`, donc elle se resserre d'elle-même sous 45rem sans qu'un seuil soit publié nulle part. */ /* ========================================================================= « Biron : ni un logiciel… » — sections/approche.njk. Remplace le gabarit .texte-illustre pour cette section le 09/09/2026 (Céline) : plus de cadre ni de trame, un titre centré en pleine largeur, puis texte à gauche / trio à droite en dessous. ========================================================================= */ .approche { background-color: var(--bg-page); padding-block: var(--sp-section); } .approche__titre { margin: 0 auto clamp(var(--sp-10), 5vw, var(--sp-16)); max-width: 32ch; text-align: center; color: var(--c-blue-zodiac); } /* LA PAIRE EST CENTRÉE SOUS LE TITRE (16/09/2026), et c'est ce qui l'a détachée de la grille de « AU CŒUR DE BIRON ». Elle portait jusque-là les jetons partagés `--colonnes-piliers` / `--gouttiere-piliers`, pour que les deux sections — qui se lisent comme une seule séquence — tombent au même endroit : le texte sur la largeur du sommaire « Les quatre piliers », le trio sur celle des cartes de piliers. Deux gestes du même jour l'ont défaite, dans cet ordre : le trio ramené contre le texte (il flottait à 143px de lui, centré dans une colonne de 640px), puis le couple recentré, parce qu'à 802px sur 1088 il pendait à gauche sous un titre, lui, centré. ⚠️ LE SECOND GESTE EST CELUI QUI TRANCHE, et il n'avait pas d'autre issue : des fractions `fr` remplissent tout le conteneur par construction, donc elles ne savent pas laisser du blanc de chaque côté — `justify-content` reste sans effet tant qu'une piste mange la place. Les deux colonnes sont maintenant dimensionnées par leur CONTENU, et les deux sections ne s'alignent plus. Ce qui est conservé : la MESURE du texte, reprise à l'identique de l'ancienne colonne (30,5rem ≈ 414px, ce que valait le 504fr dans 1088), pour que la longueur de ligne du paragraphe ne bouge pas ; et la gouttière, toujours prise au jeton partagé, pour que les deux sections respirent pareil. La gouttière ne vaut que pour les COLONNES : en dessous de `lg` la grille tombe à une seule, et ce qui sépare alors le texte du trio est une respiration verticale, calibrée pour cet empilement-là et non sur l'écart entre deux colonnes. D'où les deux cotes séparées plutôt qu'un `gap` unique. `align-items: center` et non `start` (16/09/2026) : les deux moitiés se lisent comme un seul bloc, donc elles se centrent l'une sur l'autre. En `start` la plus courte des deux s'accrochait en haut et laissait son creux en bas, ce qui les séparait au lieu de les tenir ensemble. Sans effet sous `lg`, où chaque élément est seul sur sa rangée. */ .approche__grille { display: grid; grid-template-columns: minmax(0, 30.5rem) minmax(0, 26rem); justify-content: center; column-gap: var(--gouttiere-piliers); row-gap: clamp(var(--sp-10), 5vw, var(--sp-16)); align-items: center; } .approche__gauche { display: flex; flex-direction: column; gap: var(--sp-6); } /* ⚠️ `max-width` NE MORD QUE SOUS `lg`. À deux colonnes la cellule de gauche est bornée à 30,5rem par la grille elle-même, donc bien en deçà de ces 40rem : c'est la colonne qui donne la mesure. La borne reste pour la colonne unique, où le texte courrait sinon sur toute la largeur de la page. */ .approche__texte { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 40rem; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); } .approche__texte p { margin: 0; } .approche__visuel { width: 100%; } /* LE TRIO NE SE CENTRE PLUS DANS SA COLONNE (16/09/2026) : ce qui l'éloignait du texte n'était pas la gouttière (34px) mais les 143px de blanc que son centrage lui laissait à gauche. Sa taille, elle, ne bouge pas — c'est le parti choisi contre celui de l'élargir jusqu'à remplir la colonne. Sa piste vaut maintenant ses 26rem exactement (voir `.approche__grille`), donc il n'y a plus de blanc à distribuer et rien à écrire ici pour le caler : le `margin-inline: auto` retiré serait aujourd'hui sans effet de toute façon. ⚠️ Le centrage revient sous `lg`, où la grille tombe à une colonne : le trio y est seul sur toute la largeur de la page, et collé à gauche il pendrait dans le vide. C'est le `margin-inline` de la règle étroite qui le rattrape. */ .approche__visuel .trio { width: min(100%, 26rem); } @media (max-width: 60rem) { .approche__grille { grid-template-columns: minmax(0, 1fr); } .approche__visuel .trio { margin-inline: auto; } } /* La phrase facultative sous le titre (`approche.chapeau`, posée par /irritants/ seulement). Le titre garde sa marge basse : la phrase remonte pour s'y accrocher, et reprend la même marge sous elle. */ .approche__chapeau { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); max-width: 60ch; /* Un peu d'air sous le titre avant l'étiquette (Céline, 01/10/2026). */ margin: calc(-1 * clamp(var(--sp-2), 1.5vw, var(--sp-4))) auto clamp(var(--sp-10), 5vw, var(--sp-16)); font-size: var(--fs-lead); line-height: var(--lh-normal); text-align: center; } .approche__chapeau p:not(.badge-section) { margin: 0; } /* ========================================================================= Au cœur de Biron — Figma 194:5769. ⚠️ RECOMPOSÉE LE 27/08/2026, depuis la variante départagée sur /labo/coeur-cadres/. Ce qui suit décrit l'état actuel ; l'état précédent était UN panneau blanc opaque contenant tout — titre, sommaire et quatre blocs. Il n'en reste que la cellule de gauche, qui garde le panneau et ses coins vifs. Le titre est centré hors cadre, et les quatre blocs sont des CARTES détachées, chacune sur l'aplat sombre de son pilier. Conséquence à connaître : plus aucun aplat ne recouvre les trois formes de trame du décor. Elles se voient désormais entre les cartes et autour de l'en-tête, là où elles n'existaient que dans les marges — c'est pour ça que celle du haut à gauche est repositionnée plus bas dans ce fichier. ⚠️ AUCUN `overflow: hidden` NI `auto` SUR .coeur. Le sommaire de gauche tient par `position: sticky`, qui se règle sur le plus proche ancêtre à overflow non visible : l'un ou l'autre ferait de la section le conteneur de défilement et le sommaire ne collerait plus. C'est .coeur__decor qui porte le rognage du décor. Le `clip` posé sur l'axe horizontal est la seule exception, et il est sans danger — voir sa justification sur la règle `.coeur` elle-même. --------------------------------------------------------------------- La colonne de gauche a été un aparté — un paragraphe et un bouton — avant de devenir ce sommaire, le 14/08/2026. Les noms de classe `__aparte` et `__aparte-contenu` en sont restés : ils désignent la CELLULE et son contenu collant, ce qui reste juste quel qu'en soit le contenu. ========================================================================= */ .coeur { /* Le filet du cadre, ses séparateurs internes et les marges de la bande de titre viennent de jetons PARTAGÉS avec « Une approche data unique » (_tokens.scss) : les deux cadres doivent rester identiques, et recopier leurs valeurs ici les aurait fait diverger au premier réglage. */ --coeur-pad-module: clamp(var(--sp-8), 4.2vw, 5rem); /* Hauteur RÉELLE de l'en-tête collant du site (`--h-entete`, jeton) plus une respiration : c'est de là que le sommaire doit se décrocher, sinon il passe dessous. C'est aussi ce qui fixe `scroll-margin-top` sur les blocs, donc le point d'arrivée d'un clic dans le sommaire. */ --coeur-colle: calc(var(--h-entete) + var(--sp-8)); /* La gouttière qui a remplacé le filet vertical du panneau : elle sépare le panneau de la colonne de cartes ET les cartes entre elles. Ce sont les deux respirations de la même composition, donc une seule cote. ⚠️ Elle borne aussi le débord des badges (voir `.coeur__glyphe`) : la baisser rapproche les badges de la carte du dessus. Sa valeur vient du jeton PARTAGÉ avec « Biron : ni un logiciel… » (voir `--gouttiere-piliers` dans _tokens.scss) : les deux sections se suivent, elles respirent pareil. ⚠️ Ce partage-là est le seul qui reste — leurs COLONNES ne s'alignent plus depuis le 16/09/2026, la section du dessus ayant recentré sa paire texte/trio, ce que des fractions `fr` ne savent pas faire. L'alias reste, parce que c'est lui que le resserrement sous `lg` redéfinit — la section du dessus, elle, est déjà en une seule colonne à cette largeur-là. */ --coeur-ecart-cartes: var(--gouttiere-piliers); /* L'écart entre le texte d'une carte et son illustration. Cote À PART de la précédente, malgré des valeurs voisines : l'une sépare deux cartes, l'autre deux choses DANS une carte. */ --coeur-texte-visuel: clamp(var(--sp-8), 3.2vw, 3.25rem); /* LE RETRAIT DE L'ILLUSTRATION PAR RAPPORT AU TEXTE. La maquette pose le visuel un cran plus à l'intérieur que le titre — 89px contre 60 sur une carte de 740 — si bien que le titre part franchement à gauche pendant que la capture reste en réserve. Sans lui les deux bords coïncideraient et la carte se lirait comme un cadre. À 1440 la carte fait ~639px pour 519 de contenu, soit 81 % de sa largeur : ces 16px de chaque côté ramènent l'image aux 76 % de la maquette. */ --coeur-visuel-retrait: clamp(0px, 1.1vw, 1rem); /* LE FONDU DU BAS DE L'ILLUSTRATION, ET LE RECOUVREMENT QU'IL AUTORISE — Figma 471:2739, repris le 16/09/2026. La capture s'éteint vers l'aplat de la carte au lieu de s'arrêter sur un bord franc, et le texte vient se poser sur la queue devenue transparente. C'est ce qui remplace l'ancienne composition, où le texte précédait l'illustration. Les deux bornes sont des parts de la HAUTEUR de l'image : le fondu s'amorce à 55 % et s'achève à 82 %, il reste donc 18 % de vide sous l'encre — et c'est là-dedans que le titre vient se loger. ⚠️ UNE SEULE COTE DE RECOUVREMENT POUR TROIS HAUTEURS D'IMAGE DIFFÉRENTES, ET LA CONTRAINTE EST CHIFFRÉE : depuis que les quatre partagent une largeur (16/09/2026, voir `.coeur__illustration`), leurs hauteurs vont de 376 à 560px à 1440. Le recouvrement est une cote ABSOLUE, la queue transparente une PART — donc ce qui doit tenir, c'est que le recouvrement reste plus court que la plus courte des queues. Mesuré à 1440 : queues de 80 (intégrations), 85 (connecteur) et 101px (plateforme) contre un recouvrement plafonné à 4,9rem, soit 67px. Marge la plus étroite : 13px sur les intégrations. Le dictionnaire, plus court encore (376px), ne compte pas : il n'a ni fondu ni recouvrement. Mais la borne à surveiller est bien LA PLUS COURTE DES TROIS AUTRES — monter ce plafond, ou rapprocher `--coeur-fondu-fin` de 100 %, ferait passer le titre sur une capture encore visible, et rien ne l'annoncerait. */ --coeur-fondu-debut: 55%; --coeur-fondu-fin: 82%; --coeur-recouvrement: clamp(var(--sp-6), 5.5vw, 4.9rem); /* La mesure de la bande de palier. Nommée plutôt qu'écrite deux fois : en petit écran la plaque crème doit l'ÉLARGIR de son rembourrage au lieu de la rogner (`box-sizing: border-box`), et deux valeurs en clair auraient divergé au premier réglage. ⚠️ CE N'EST PLUS LES 380px DE LA MAQUETTE, et c'est la conséquence du changement d'objet du 16/09/2026 : la phrase est passée d'un paragraphe de 16px à une QUOTE au corps des titres (voir `.coeur__bande-texte`). À 24rem elle tombait sur cinq lignes de vingt caractères. Les 52ch sont ceux de `.intertitre--quote` — même objet, mêmes valeurs, rien de réinventé. En `ch` et non en `rem` : la mesure suit alors le corps qui la porte, donc un réglage de `--fs-h3` n'a pas à être reporté ici. ⚠️ L'unité se résout chez qui LIT la variable (le paragraphe), pas chez qui la déclare — c'est ce qui la rend juste, la section n'étant pas au corps des titres. */ --coeur-bande-mesure: 52ch; /* La cote du badge de pilier au coin de la carte. UNE SEULE COTE, ET TOUT EN DÉCOULE : son débord hors de la carte et la place que le titre lui réserve. Écrites en clair, ces trois valeurs auraient dérivé au premier ajustement, et c'est la réserve qui se serait taue — un badge qui recouvre un titre ne lève aucune erreur. Même dispositif que `--panneau-glyphe-taille` sur les briques produit. ⚠️ LE DÉBORD EST BORNÉ PAR LA GOUTTIÈRE, ET LA BORNE EST ÉCRITE PLUTÔT QUE VÉRIFIÉE. Le badge sort par le HAUT de sa carte, donc il entre dans l'écart qui la sépare de la précédente ; au-delà, il se pose dessus. Un simple facteur tenait la contrainte à la main, et un agrandissement l'a franchie sans bruit. Le `min()` la rend infranchissable : il reste toujours un demi-rem d'écart visible entre deux cartes. Conséquence : passé le point où le plafond mord, grossir le badge ne le fait plus sortir DAVANTAGE, il grossit vers l'intérieur. Pour qu'il déborde plus, c'est `--coeur-ecart-cartes` qu'il faut monter. */ --coeur-badge: clamp(5.5rem, 9vw, 10rem); --coeur-badge-debord: min( calc(var(--coeur-badge) * 0.28), calc(var(--coeur-ecart-cartes) - 0.5rem) ); position: relative; background-color: var(--bg-page); padding-block: var(--sp-section); /* ⚠️ PLUS DE RESPIRATION EN HAUT depuis le 09/09/2026 : cette section enchaîne directement sur « Biron : ni un logiciel… » (sections/approche.njk), son propre padding-top ferait double emploi avec le padding-bottom de celle-ci. */ padding-top: 0; /* ⚠️ `clip` ET SURTOUT PAS `hidden`, voir l'avertissement en tête de fichier. Le badge déborde aussi par le CÔTÉ : en petit écran la carte est à 5 % du bord de la fenêtre, soit 19px sur un mobile de 375, pour 18px de débord — le badge arrive au ras du bord et un pixel de plus ouvrirait une barre de défilement horizontale. `clip` rogne sans créer de conteneur de défilement, donc sans casser le collant du sommaire. L'axe vertical reste `visible`, sans quoi le débord vers le haut serait tranché — et c'est la seule paire mixte légale, `visible` avec autre chose que `clip` deviendrait `auto`. */ overflow-x: clip; overflow-y: visible; } /* ---------- Décor ---------- */ .coeur__decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; /* voir l'avertissement en tête de fichier */ pointer-events: none; } .coeur__forme { position: absolute; width: var(--shape-w); } /* Les trois positions viennent de la maquette, en % de la section. Les proportions des formes ont permis de les identifier sans ambiguïté : 1033×1004 = citron, 701×722 = losange, 1230×1307 = écu. */ /* ⚠️ ELLE S'ÉPINGLE SUR LA MESURE DU TEXTE, PAS SUR UN POURCENTAGE DE SECTION, et c'est le titre centré qui l'impose : le panneau ne la recouvre plus. `left: 2.4%` la plaçait par rapport à la FENÊTRE alors que le texte est centré sur le conteneur — deux rythmes différents, si bien qu'une valeur choisie pour dégager le texte à une largeur le laissait toucher à une autre. Épinglée par son arête DROITE à la mesure du chapeau (46rem, la plus large des deux — le titre est borné à 34ch), la garde est constante à toute largeur, et la forme sort par la gauche d'elle-même quand la fenêtre se resserre. C'est le dispositif de partials/formesDecor.njk, appliqué au texte au lieu du conteneur. ⚠️ `left: auto` EST OBLIGATOIRE, PAS UNE PRÉCAUTION. Avec une largeur définie et les deux arêtes contraintes, la spécification déclare `right` surcontraint et l'IGNORE : la forme resterait où elle est, sans la moindre alerte. ⚠️ LA GARDE EST UN POURCENTAGE ET NON UNE COTE FIXE, À CAUSE DE LA ROTATION. Les -8° élargissent l'emprise horizontale de `hauteur × sin 8°`, soit environ 6,5 % de la largeur de la forme de chaque côté — et la forme fait 54,3 % de la FENÊTRE, donc ce surplus grandit avec elle. Une garde en `rem` se fait manger : mesurée, 5rem laissait 33px de jeu à 1024 et plus que 3 à 1920, c'est-à-dire qu'elle touchait le texte exactement là où l'écran est le plus large. En pourcentage de la même référence, il reste 0,025 × la largeur de fenêtre, soit 26px à 1024 et 48 à 1920. C'est la seule cote à baisser si la forme part trop loin. */ .coeur__forme--haut-gauche { --shape-w: 54.3%; --shape-rot: -8deg; top: 4.6%; left: auto; right: calc(50% + 23rem + 6%); } .coeur__forme--droite { --shape-w: 36.8%; --shape-rot: 14deg; top: 38.2%; left: 72.6%; } .coeur__forme--bas-gauche { --shape-w: 64.6%; --shape-rot: 6deg; top: 57.1%; left: -21.8%; } /* La trame emplit la forme d'un bord à l'autre : pas de rampe de densité. Rien à regénérer pour autant. halftone-fond.svg est DÉJÀ de densité uniforme et pavable — un choix explicite du générateur, pour que le grain reste identique quelle que soit la taille de la forme et que l'orientation de la montée se règle en CSS (voir `buildHalftoneFond` dans eleventy.config.js). La rampe venait donc entièrement de _components.scss, en seconde couche de masque. On ne garde que l'image. Ce que ça change à l'œil : la forme ne naît plus du fond, elle y est posée. Son contour est net, dessiné par le masque de forme et non plus par l'extinction de la trame. Tranché le 14/08/2026. */ .coeur .forme-trame__grain { /* 504px : la taille du pavé, fixée par `cote` dans le générateur. En dur ici comme dans _components.scss — c'est la seule valeur des deux fichiers qui doive s'accorder, et elle ne bouge jamais. */ mask-image: url("/assets/img/halftone-fond.svg"); mask-size: 504px 504px; mask-repeat: repeat; /* ⚠️ `intersect` vient de la règle de _components.scss, qui compose deux couches. Avec une seule, il ne reste rien à intersecter et le masque s'annule : la remise à `add` n'est pas cosmétique. */ mask-composite: add; } /* ---------- Panneau ---------- */ /* Depuis le 27/08/2026 le panneau n'est plus qu'un CONTENEUR DE LARGEUR : il garde `--container-max` et son centrage, et c'est la cellule de gauche qui a repris son aplat et son filet (voir `.coeur__aparte`). Le panneau ne disparaît donc pas, il se resserre — même objet, mêmes coins vifs, il n'enferme plus que le sommaire. Le `z-index` reste : il place le contenu au-dessus du décor de formes, qu'aucun aplat ne recouvre plus. */ .coeur__panneau { position: relative; z-index: 1; width: 100%; /* LA MESURE DU `.container` DU SITE, gouttière comprise (16/09/2026). Elle était écrite `max-width: var(--container-max)` sans rembourrage, ce qui donne bien la même largeur utile que `.container` une fois la fenêtre assez large — mais pas en dessous : entre `lg` et ~1170px, `.container` se resserre de sa gouttière alors que le panneau, lui, touchait le bord de la fenêtre. Les deux colonnes de « Biron : ni un logiciel… » tombant maintenant sur celles d'ici, cet écart-là se serait vu comme un défaut d'alignement sur toute cette bande. Le rendu au-delà ne bouge pas d'un pixel : le contenu vaut `--container-max` de part et d'autre. Sous `lg` le panneau reprend ses 5 % de gouttière et remet ce rembourrage à zéro — voir la règle dans le bloc `mq-down` en bas de fichier. */ max-width: calc(var(--container-max) + var(--container-pad) * 2); padding-inline: var(--container-pad); margin-inline: auto; } /* ---------- En-tête : le titre et son chapeau ---------- */ /* L'en-tête est sorti du cadre et centré. Le rembourrage horizontal tombe à zéro — les jetons `--pad-panneau-entete-*` servaient à décoller le texte du filet du panneau, qui n'existe plus ici. Le bas garde le sien, augmenté : c'est lui qui sépare l'en-tête des deux colonnes, maintenant que le filet ne le fait plus. */ .coeur__entete { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding-block: var(--pad-panneau-entete-haut) clamp(var(--sp-10), 4vw, var(--sp-16)); text-align: center; } /* Une mesure sur le titre, jamais un corps (règle 3 de MAQUETTE.md) : centré et libre, il court sur toute la largeur du conteneur et son retour à la ligne tombe n'importe où. */ .coeur__titre { margin: 0; max-width: 34ch; color: var(--c-blue-zodiac); } /* La mesure est bornée à 46rem alors que la bande en fait plus de 80 : une ligne de texte courant qui court sur toute la largeur d'un panneau se lit mal, l'œil perd le retour à la ligne. */ .coeur__chapeau { margin: 0 auto; max-width: 46rem; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); } /* ---------- Le ton des piliers ---------- LES QUATRE PILIERS NE SONT NOMMÉS QU'ICI, et ces classes portent DEUX tons : --pastille-ton la teinte VIVE — la forme du sommaire et celle du badge ; --pastille-ton-sombre la valeur SOMBRE — l'aplat de la carte, et l'encre du titre de carte quand il n'est pas sur cet aplat. La classe est posée sur l'`
    ` d'un bloc ET sur l'entrée de sommaire qui lui répond : c'est ce qui garantit que les deux colonnes parlent la même couleur sans la redire nulle part. Sur l'article, les deux tons descendent jusqu'au titre de la carte et au motif, qui n'ont donc rien à déclarer. */ .coeur__pastille--dictionnaire { --pastille-ton: var(--c-pilier-dictionnaire); --pastille-ton-sombre: var(--c-pilier-dictionnaire-sombre); } .coeur__pastille--plateforme { --pastille-ton: var(--c-pilier-plateforme); --pastille-ton-sombre: var(--c-pilier-plateforme-sombre); } .coeur__pastille--connecteur { --pastille-ton: var(--c-pilier-connecteur); --pastille-ton-sombre: var(--c-pilier-connecteur-sombre); } .coeur__pastille--integrations { --pastille-ton: var(--c-pilier-integrations); --pastille-ton-sombre: var(--c-pilier-integrations-sombre); } /* ---------- La colonne de gauche : le sommaire ---------- Le rembourrage horizontal est de 2,75rem (44px) là où la maquette en donne 7,0625rem (113px). À 113px le sommaire flottait au milieu d'une colonne de 504px sans jamais s'accrocher à rien ; le rail a besoin d'un bord auquel se tenir. */ .coeur__suite { display: grid; grid-template-columns: var(--colonnes-piliers); gap: var(--coeur-ecart-cartes); } /* La cellule de gauche a repris le panneau : même aplat, même filet, mêmes coins vifs. Les coins ne passent pas par `--radius-cadre` remis à zéro : le jeton habille AUSSI les cadres des visuels (`.apercu`), qui gardent les leurs. */ .coeur__aparte { padding: var(--coeur-pad-module) clamp(var(--sp-5), 2.6vw, 2.75rem); background-color: var(--c-white); border: var(--filet-panneau); border-radius: 0; } .coeur__aparte-contenu { position: sticky; top: var(--coeur-colle); display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-8); } /* Le titre du sommaire est un vrai titre : police de display, corps de h3. Il assume de dominer les entrées à 20px au lieu de les annoncer en sourdine — un eyebrow en chasse fixe a été essayé, il s'effaçait devant sa propre liste. Il est aligné sur le RAIL et non sur les libellés : le titre coiffe la liste entière, rail compris, et un titre en retrait de sa propre barre donnait l'impression que le rail n'appartenait pas au bloc. */ .coeur__sommaire-titre { margin: 0 0 var(--sp-8) 0; font-family: var(--font-titre); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-tight); color: var(--c-blue-zodiac); } /* ---------- Le rail de progression ---------- Deux traits superposés sur le même axe : celui du dessous, pointillé, dit ce qui reste à lire ; celui du dessus, plein, ce qui l'est déjà. C'est le second qui grandit, sa hauteur venant de `--progression` (0 → 1), posé par coeur.js au fil du défilement. En continu et non par cran : un rail qui saute d'une entrée à l'autre ne dit rien de plus que le point actif, alors qu'un rail qui avance dit AUSSI où l'on en est à l'intérieur d'un bloc. C'est là tout son intérêt. Sans le script, `--progression` vaut 0 : le rail reste entièrement pointillé et ne ment pas. */ .coeur__sommaire { --rail-gouttiere: 1.625rem; --rail-epaisseur: 2px; position: relative; display: flex; flex-direction: column; padding-left: var(--rail-gouttiere); } .coeur__sommaire::before, .coeur__sommaire::after { content: ""; position: absolute; left: 0; top: 0; width: var(--rail-epaisseur); } /* LES DEUX TRAITS SONT AU FLUO depuis le 27/08/2026, donc ils n'ont plus que leur CONTINUITÉ pour se distinguer : la couleur ne les sépare plus. ⚠️ Le fluo ne pèse que 1,16 sur du blanc. Sur 2px d'épaisseur, ce qui lui manque est de la SURFACE et non une autre teinte — même règle que « la trame demande de la surface » de partials/motif.njk. `--rail-epaisseur` est la seule cote à toucher si le rail doit se voir davantage. Le pointillé est un dégradé répété et non une `border-left: dashed` : une bordure en pointillé ne laisse pas régler la longueur de ses tirets, qui varie alors d'un moteur à l'autre. C'est aussi pourquoi sa couleur se change dans `background-image` et non dans `background-color`, qu'il recouvrirait entièrement. */ .coeur__sommaire::before { bottom: 0; background-image: linear-gradient(var(--c-fluo) 50%, transparent 50%); background-size: var(--rail-epaisseur) 0.5rem; } .coeur__sommaire::after { height: calc(var(--progression, 0) * 100%); background-color: var(--c-fluo); } /* ---------- Les entrées du sommaire ---------- POLICE DE DISPLAY depuis le 27/08/2026. Elles ont longtemps été en Chivo Mono, « parce qu'un sommaire est un index, pas du texte courant » ; le passage au display a été demandé en même temps que celui des titres de carte, si bien que les deux colonnes continuent de se répondre au lieu de parler chacune sa langue. Le corps ne bouge pas. Le plafond de 20px avait été calculé sur une chasse FIXE, large : « Le dictionnaire de données » y faisait 26 signes pour environ 312px, plus la forme, l'écart et la gouttière du rail — 360px pour 416px utiles dans la colonne. En display la même chaîne est nettement plus courte, donc la contrainte se desserre ; le monter ramènerait le risque de casse sur deux lignes, qui désaligne le rail et fait changer de taille la forme active au défilement. */ .coeur__sommaire-lien { display: flex; align-items: center; gap: 0.8125rem; padding-block: 0.8125rem; font-family: var(--font-titre); font-size: clamp(0.9375rem, 1.4vw, 1.25rem); /* 15 → 20px */ line-height: 1.35; color: color-mix(in srgb, var(--text-strong) 60%, transparent); text-decoration: none; transition: color var(--dur-base) var(--ease-out); } .coeur__sommaire-lien:hover { color: var(--text-strong); } /* Pas de pavé teinté sous l'entrée active : le rail et la forme disent déjà la position, un troisième signal pour la même information rendait la colonne bavarde. Il ne reste que le contraste du libellé. */ .coeur__sommaire-lien[aria-current=true] { color: var(--c-blue-zodiac); font-weight: 500; } /* ---------- La forme d'une entrée ---------- Le rond a laissé place à une FORME DE MARQUE le 27/08/2026. Elle est rendue par la macro `forme()` de partials/forme.njk, donc son rapport et son masque viennent de la table de l'atome : rien n'est recopié ici, et il n'y a que la taille et la couleur à poser. ⚠️ `--shape-color` GAGNE CONTRE `.forme--fluo` PAR L'ORDRE DES FEUILLES, PAS PAR LA SPÉCIFICITÉ : les deux sélecteurs valent (0,1,0), et c'est parce que _components.scss est émis avant les sections que cette règle-ci l'emporte. C'est le même appui que `.item__forme`, documenté dans CLAUDE.md. La cote monte de 0,75 à 1,125rem : un rond de 12px se lit, une silhouette de 12px n'est plus qu'une tache. */ .coeur__sommaire-point { --shape-color: var(--pastille-ton); --shape-w: 1.125rem; flex: none; transition: scale var(--dur-base) var(--ease-out); } /* ⚠️ LE HALO DE L'ENTRÉE ACTIVE NE PEUT PAS SURVIVRE AU MASQUE, et aucun réglage ne le sauve. Un `box-shadow` est peint hors de la boîte du bord, que le masque découpe. Un `filter: drop-shadow()` non plus : l'ordre de rendu de CSS applique le filtre PUIS le masque, donc la lueur est rognée elle aussi. La seule voie du site est une seconde copie plus grande derrière la forme (`.chaine__forme-contour`), et elle demande du balisage. Il ne reste donc que l'agrandissement, et il suffit : le rail et le contraste du libellé portent déjà la position. `scale` et non `transform` : ce sont deux propriétés distinctes qui se COMPOSENT, donc l'agrandissement s'ajoute à la rotation que `.forme` pose en `transform` au lieu de l'effacer. C'est la règle du site pour tout déplacement sur une forme. */ .coeur__sommaire-lien[aria-current=true] .coeur__sommaire-point { scale: 1.25; } .coeur__sommaire-label { min-width: 0; } /* ---------- Le cartouche de nouveauté ---------- « New », sur l'entrée de sommaire ET sur la ligne de titre de la carte. Seul le connecteur IA en porte un, ici comme dans le menu de l'en-tête et sur /produit/. ⚠️ DEUX FONDS, DONC DEUX RECETTES, ET ELLES NE SONT PAS INTERCHANGEABLES. C'est la règle 10 de MAQUETTE.md appliquée à un même objet posé deux fois : ce qui se mesure n'est pas la pastille, c'est le contraste qu'elle tient contre le fond qui la reçoit. dans le sommaire fond BLANC (`.coeur__aparte`) — pastille CERCLÉE ET CREUSE : bord à la teinte vive, encre à la valeur sombre, aucun aplat. « Tout en nuances de violet, sur nul fond » (Hugo, 16/09/2026). C'est aussi la forme canonique de la règle 16 de MAQUETTE.md — une pastille teintée d'un pilier est cerclée et non remplie. ⚠️ ELLE S'ÉCARTE DONC DEUX FOIS DE SA SOURCE, le cartouche du menu de l'en-tête (`.site-nav__cartouche`), qui est rempli à 15 % et porte l'encre courante. L'encre est mesurée : la valeur sombre du connecteur tient 5,47 sur le blanc du panneau, quand la teinte VIVE n'y tiendrait que 3,45 — sous le seuil qu'un libellé de cette taille demande. ⚠️ ET CETTE MESURE NE VAUT QUE POUR LE CONNECTEUR, seul pilier à porter un cartouche aujourd'hui. Sur blanc les trois autres donnent 5,58 (dictionnaire), 5,66 (intégrations) et 4,85 (plateforme) : tous passent, mais un second pilier badgé se remesure, il ne s'ajoute pas. sur la carte fond SOMBRE au ton du pilier — la recette de `.texte-panneau__badge` : aplat blanc, libellé à la valeur sombre du pilier, qui y tient de 4,85 à 5,66. La recette du sommaire y disparaîtrait : la teinte vive du connecteur ne vaut que 1,32 sur son propre aplat sombre, autant pour le cerclage que pour la dilution. Le corps est `--fs-xs` et non `--fs-mono` : à la taille des eyebrows il se lisait comme une mention technique et non comme une annonce — c'est le même arbitrage que `.texte-panneau__badge`. `nowrap` parce que « New » replié sur deux lignes ne veut plus rien dire, et `flex: none` pour qu'un intitulé long ne le comprime pas. */ .coeur__cartouche { flex: none; padding: 0.0625rem var(--sp-2); border: 1px solid var(--pastille-ton); border-radius: var(--radius-full); background-color: transparent; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; white-space: nowrap; color: var(--pastille-ton-sombre); } /* Sur la carte, l'inverse du FOND : aplat blanc, et pas de bord — le blanc détache déjà franchement la pastille de l'aplat sombre. L'encre, elle, ne change pas : c'est la même valeur sombre du pilier, qui tient 5,47 sur blanc. Rien à redire ici, donc — une seule déclaration pour les deux emplois. */ .coeur__cartouche--carte { padding: 0.25rem var(--sp-3); border: 0; background-color: var(--c-white); } /* ---------- La colonne de droite : quatre cartes de même rang ---------- */ /* La colonne a cessé d'être une colonne de tableau le 27/08/2026 : plus d'aplat, plus de filet vertical, et les séparateurs internes ont laissé la place à la gouttière. C'est ce qui détache les cartes les unes des autres. */ .coeur__modules { display: flex; flex-direction: column; gap: var(--coeur-ecart-cartes); } /* La carte d'un outil : l'aplat SOMBRE de son pilier, 20px de rayon — le rayon des CARTES du site (`cas-clients`, `grille-articles`), et non les 28px réservés aux boîtes qui occupent toute une section. Chacune porte son visuel et sa couleur : c'est la quatrième branche de la règle 13 de MAQUETTE.md, une cellule qui devient une carte. Les quatre aplats sont ceux des briques de « La solution complète », par les mêmes jetons : le blanc y tient de 4,85 (plateforme) à 5,66 (intégrations). Les encres sont réaffectées ici plutôt que par `.on-dark`, comme le fait `texte-panneau` pour ses quatre boîtes — c'est le dispositif établi pour ces aplats-là. `--text-strong` suffit : c'est la seule encre que la carte emploie, son titre portant la sienne juste en dessous. ⚠️ L'ÉCART TEXTE / ILLUSTRATION PORTE UNE EXCEPTION, ET ELLE EST DANS LES FICHIERS. Les cinq exports sont détourés, donc chacun porte SA marge transparente au-dessus de son encre — mesurées au canvas le 27/08/2026, celle des intégrations vaut 104px là où les trois autres commencent à 0. La marge qui manquait aux autres, ce fichier-là l'avait déjà : il garde donc l'ancienne cote. Le CSS ne voit pas où commence l'encre d'une image, et recadrer un export livré est une autre affaire. */ .coeur__module { --text-strong: var(--c-white); position: relative; display: flex; flex-direction: column; gap: var(--coeur-texte-visuel); padding: var(--coeur-pad-module); background-color: var(--pastille-ton-sombre); border-radius: 1.25rem; /* L'ancre de défilement : sans elle, un clic amène le haut du bloc juste sous l'en-tête collant, au ras. Elle sert aussi de repli si le script ne tourne pas — le saut natif la respecte, et coeur.js la LIT plutôt que de redéfinir sa propre constante, pour que les deux trajets arrivent au même endroit. */ scroll-margin-top: var(--coeur-colle); } .coeur__module-tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); } /* LE TITRE DE LA CARTE. C'était un libellé en chasse fixe précédé d'un point, dans la grammaire du sommaire ; c'est devenu un petit titre en police de display, sans puce, le 27/08/2026 — en même temps que le passage du sommaire à la même police, si bien que les deux colonnes se répondent toujours. ⚠️ LE CORPS EST `--fs-h3`, ET LE CHEMIN POUR Y ARRIVER EST INSTRUCTIF. Une première version avait pris la cote de `.cas--carte .cas__titre` (20 → 22px), celle des cartes du site — « les titres ne sont pas assez mis en valeur ». Or cette cote-là est un PLAFOND : elle existe pour rabattre l'échelle du site dans une carte de grille étroite, à trois par rangée. Ici la carte fait toute la colonne et ne porte qu'un titre et une phrase, donc rien ne justifiait de rabattre. Le titre reprend le jeton du niveau, et l'écart à la règle 3 de MAQUETTE.md disparaît avec la cote écrite à la main : ne reste que ce qu'un `

    ` ne reçoit pas de _base.scss — la famille, la graisse, l'interligne. 1,2 d'interligne et non `--lh-tight` (1,08) : ce dernier est calé pour un titre de 72px, il écrase un 32px sur deux lignes. Même arbitrage que `.corps__titre` des articles. Le blanc et non le ton du pilier : sur l'aplat sombre de sa propre carte, la teinte vive tomberait de 1,32 (connecteur) à 2,67 (intégrations). Le blanc y tient de 4,85 à 5,66. */ /* La rangée du titre de carte : l'intitulé et, le cas échéant, son cartouche. ⚠️ ELLE NE S'APPELLE PAS `.coeur__entete`, ET C'EST UNE LEÇON PAYÉE. Ce nom-là est DÉJÀ celui de l'en-tête de section, plus haut dans ce fichier — une pile centrée avec son propre `flex-direction: column` et un rembourrage bas de 4vw. Posé sur cette rangée, il ne redéfinissait que ce que la nouvelle règle écrivait : la direction restait en colonne (le cartouche tombait SOUS le titre) et le rembourrage creusait un vide entre le titre et sa description. Rien ne le signalait. C'est la règle du site : avant de poser une classe, on grep le sélecteur nu. ⚠️ `center` ET NON `baseline`, ET LE CALCUL EXPLIQUE POURQUOI. `baseline` est l'alignement de `.item__entete`, et il a été essayé ici d'abord ; il pose la ligne de base du libellé sur celle du titre, ce qui n'aligne les deux objets que si leurs corps sont voisins. Ils ne le sont pas : le titre fait jusqu'à 32px et la pastille 12px, plus son rembourrage. La pastille se retrouve alors centrée 3px SOUS la ligne de base quand le centre optique du titre est 11px AU-DESSUS — huit pixels d'écart, et elle pend visiblement. Centrée sur la boîte de ligne du titre, elle tombe à 2px de ce centre optique. C'est l'arbitrage de `.texte-panneau__badge`, sur exactement ce couple-là (un titre de section et son cartouche). ⚠️ IL NE VAUT QUE TANT QUE LE TITRE TIENT SUR UNE LIGNE — sur un intitulé replié, `center` centrerait la pastille sur le pavé entier, à mi-hauteur. Les quatre titres de carte sont des syntagmes de deux ou trois mots (« Le connecteur IA », seize signes) et la carte fait toute la largeur de sa colonne en mobile, donc aucun ne se replie ; c'est le même avertissement que `texte-panneau`, qui repasse en `flex-start` là où le sien se replie. */ .coeur__etiquette-rangee { display: flex; align-items: center; gap: var(--sp-3); } .coeur__etiquette { margin: 0; font-family: var(--font-titre); font-size: var(--fs-h3); /* 22 → 32px */ font-weight: 600; line-height: 1.2; color: var(--c-white); } .coeur__module-texte { margin: 0; max-width: 22rem; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); } /* ---------- La bande de transition ---------- Elle dit le passage du socle à ce qu'il porte, d'où sa place après le seul dictionnaire. 173px de haut dans la maquette pour un texte de 380px, soit une bande qui respire nettement plus que les blocs : c'est ce qui la fait lire comme un palier et non comme un cinquième bloc. LE TEXTE EST CENTRÉ depuis le 27/08/2026, ce qui RÉTABLIT la maquette. Il avait été ferré à gauche parce que, centré, il était le seul bloc de la colonne à ne pas partir du même bord que les quatre autres. Cet argument est tombé avec la recomposition : la colonne n'est plus un tableau à cinq rangées mais quatre cartes détachées, et la bande n'est plus une rangée parmi elles — c'est une phrase POSÉE ENTRE deux cartes, sur le fond de la page, qui n'a donc plus de bord commun à tenir. Elle perd aussi son rembourrage vertical pour une bonne part, la gouttière des cartes en faisant déjà la moitié. C'est la BOÎTE qui se centre, pas seulement le texte : les deux vont ensemble, `text-align` seul laisserait le paragraphe centré dans une boîte ferrée à gauche. --------------------------------------------------------------------------- C'EST UNE QUOTE DEPUIS LE 16/09/2026 — demandé par Hugo, « on peut mettre plus en valeur ce texte avec les outils à notre disposition et ce qu'on a déjà fait ». D'où le fait que rien n'est inventé ici : c'est l'objet déjà en place sur la section 02 de /a-propos/ (`.intertitre--centre.intertitre--quote`) et sur l'`exergue` de `texte-module`, et les valeurs en sont reprises. ⚠️ C'EST LA BARRE QUI DÉTACHE LA PHRASE, pas sa taille : à 4px et non 1px, parce que ce n'est pas un filet de séparation mais une attache, et qu'à 1px sur le crème elle disparaîtrait à côté d'un corps de 32px. ⚠️ L'ENCRE EST CELLE DES TITRES (`--c-blue-zodiac`) ET NON LA TEINTE D'ACCENT. Tant que la phrase portait seule sa mise en valeur, l'accent était juste ; maintenant que la barre la porte, la phrase est du TITRAGE — et les titres du site restent bleu nuit. ⚠️ LE TEXTE RESTE CENTRÉ SOUS SA BARRE, ET C'EST VOULU. Le commentaire de l'`exergue` écarte ce couple — une barre devant un texte centré ne touche plus son premier caractère et redevient un ornement. Hugo a tranché l'inverse le 20/08/2026 sur /a-propos/ (« c'est une quote, c'est bien de le garder centré ») : la barre y devient un repère de gauche plutôt qu'une attache, et c'est cette lecture-là qui vaut ici, où la phrase est un palier posé au milieu d'une colonne. NE PAS « CORRIGER » VERS LE FER À GAUCHE. ⚠️ ET LA MESURE BRIDÉE EST STRUCTURELLE, pas cosmétique : sans elle la boîte prend toute la colonne, le centrage ne se voit plus et la barre se retrouve au bord du panneau. Voir `--coeur-bande-mesure`. */ .coeur__bande { padding-block: clamp(var(--sp-2), 1vw, var(--sp-6)); } .coeur__bande-texte { margin-inline: auto; max-width: var(--coeur-bande-mesure); /* La barre, et la gouttière qui l'écarte du texte. Cotes de `.intertitre--quote`. */ border-inline-start: 4px solid var(--c-fluo); padding-inline-start: clamp(var(--sp-4), 1.6vw, var(--sp-6)); text-align: center; font-family: var(--font-titre); font-size: var(--fs-h3); font-weight: var(--fw-bold); /* `--lh-snug` et non `--lh-tight` : sur plusieurs lignes de 32px, 1.08 colle les jambages d'une ligne aux capitales de la suivante. Les titres du site peuvent se resserrer parce qu'ils tiennent souvent sur une ligne. */ line-height: var(--lh-snug); letter-spacing: var(--ls-display); color: var(--c-blue-zodiac); text-wrap: balance; } /* ---------- Visuels ---------- */ /* ⚠️ `static` ET C'EST DÉLIBÉRÉ. Le `position: relative` d'origine n'avait qu'un rôle : servir de référence au badge de pilier, qui était posé au coin de l'IMAGE. Depuis le 27/08/2026 le badge est au coin de la CARTE ; rendu statique, le visuel cesse d'être cette référence et le badge remonte au premier ancêtre positionné, la carte. Rien n'a eu à être reparenté. ⚠️ Et le visuel ne porte PAS de `z-index`, contrairement à la tête : à valeur égale c'est le nœud le plus tardif du DOM qui gagne, et la tête, qui vient après, recouvrirait le badge. */ .coeur__visuel { position: static; /* Le retrait qui détache l'image du bord du titre — voir `--coeur-visuel-retrait`. En REMBOURRAGE et non en marge : c'est cette boîte qui donne aux quatre illustrations leur largeur commune, chacune valant simplement 100 % d'elle. */ padding-inline: var(--coeur-visuel-retrait); } /* Gabarit dans `.apercu` (_components.scss) — c'est de ce visuel-ci que vient sa mise en page en grille à une colonne. Le ratio est posé en ligne, il change d'un visuel à l'autre. La maquette donne 80px de flou et 10 d'étalement : un halo très large, qui fait flotter le visuel bien au-delà de son cadre. Ramené à 48 et 4 — il décolle encore l'image du blanc sans déborder sur le filet du bloc. */ .coeur__placeholder { box-shadow: 0 3px 48px 4px rgb(var(--shadow-tint)/0.38); } /* L'illustration définitive, quand la donnée en déclare une. Aucun cadre, aucun filet et SURTOUT PAS LE HALO du cadre ci-dessus : les quatre exports sont détourés, un `box-shadow` dessinerait donc un rectangle d'ombre autour d'une forme dont les coins sont vides. Elles se posent à même l'aplat de la carte. --------------------------------------------------------------------------- DEUX RÉGLAGES PAR IMAGE, tous deux mesurés et non choisis à l'œil. ⚠️ LES DÉFAUTS SONT DANS LES `var()`, JAMAIS DÉCLARÉS SUR L'IMAGE : une propriété posée SUR l'élément bat la même propriété héritée d'un ancêtre, et les réglages posés par carte n'auraient aucun effet. ① LA LARGEUR EST LA MÊME POUR LES QUATRE depuis le 16/09/2026, et c'est demandé (Hugo : « je veux bien que tu agrandisses les images de telle sorte à ce qu'elles fassent la même largeur […] la largeur de l'illustration de la carte "Les intégrations" est la cible »). Elles occupent donc toute la boîte du visuel, et les deux réductions par pilier — plateforme 70 %, connecteur 82 % — sont tombées avec la variable qui les portait. ⚠️ CE QU'ON ABANDONNE EN ÉCHANGE, ET C'EST ASSUMÉ : ces deux réductions servaient à ÉGALISER LES HAUTEURS RENDUES, les quatre rapports étant très différents. À largeur commune (489px de boîte à 1440) les hauteurs repartent de 376 (dictionnaire, 1,302) à 560 (plateforme, seul export en PORTRAIT à 0,874), en passant par 444 (intégrations) et 472 (connecteur). Les cartes n'ont donc plus la même hauteur, et les images les plus hautes descendent nettement plus bas — « c'est pas grave qu'elles dépassent en dessous grâce au dégradé ». ⚠️ C'EST BIEN LA LARGEUR QU'ON RÈGLE, ET SÛREMENT PAS `max-block-size`. Les attributs `width`/`height` de l'image — lus dans le fichier par lib/image.js — sont une largeur SPÉCIFIÉE : un plafond de hauteur rabattrait la seule hauteur et étirerait l'image, et le `inline-size: auto` qui rétablirait le rapport annulerait du même coup la réservation de place, donc l'image n'aurait plus aucune taille avant son chargement. Leçon des illustrations d'`etapes`, voir « Images » dans CLAUDE.md. C'est aussi pourquoi un `object-fit: cover` dans une zone de hauteur fixe n'est pas la sortie : au-delà de 376px de zone il rognerait le dictionnaire SUR LES CÔTÉS, son rapport étant le plus large des quatre. ② LE RECENTRAGE A ÉTÉ RETIRÉ LE 16/09/2026, ET C'EST UNE CORRECTION. Deux des exports portaient une colonne transparente à droite — connecteur 60px sur 1046, intégrations 120 sur 1237 — que le CSS ne voit pas : leur boîte était centrée, leur encre non. Un `translate` en rattrapait la moitié. ⚠️ LES DEUX EXPORTS ONT DEPUIS ÉTÉ RECADRÉS et le rattrapage était resté. Boîtes d'encre remesurées au canvas (seuil alpha 8) le 16/09/2026 — dictionnaire 677 × 520 encre x 23 → 652, y 0 → 495 (le seul détouré) plateforme 900 × 1030 encre pleine boîte connecteur 986 × 952 encre pleine boîte (était 1046 de large) intégrations 1117 × 1015 encre pleine boîte (était 1237 × 1149) Le `translate` décentrait donc de 30 et 60px des images déjà centrées, et l'écart texte/visuel des intégrations compensait un vide de 104px au-dessus de l'encre qui n'existe plus. Les trois règles sont tombées ensemble. ⚠️ LEÇON À GARDER : UNE COMPENSATION MESURÉE SUR UN FICHIER DOIT MOURIR AVEC LUI. Rien ne signale un rattrapage devenu faux, et son symptôme — une image qui pend d'un côté — est exactement celui qu'il prétend corriger. Son retrait sert aussi l'empilement : un `translate` autre que `none`, `0 0` compris, fait de l'image un contexte d'empilement peint AVEC LES ÉLÉMENTS POSITIONNÉS, donc au-dessus du texte en flux qui la suit. Depuis que le titre recouvre le bas de l'illustration, c'était le défaut prêt à partir — le `z-index` posé plus bas sur `.coeur__module-tete` en est la deuxième garde. */ .coeur__illustration { display: block; width: 100%; height: auto; } /* ---------- Le fondu du bas, et le texte qui vient s'y poser ---------- Figma 471:2739. La capture s'éteint vers l'aplat de la carte plutôt que de s'arrêter sur un bord franc, et le titre se pose sur la queue transparente. ⚠️ LE DICTIONNAIRE EN EST EXCLU, ET C'EST DEMANDÉ (Hugo, 16/09/2026) : son texte reste sous l'image, sans fondu ni recouvrement. C'est aussi la seule des quatre illustrations qui soit détourée — 24px de vide sous son encre — donc la seule dont le bas ne présente pas de bord franc à éteindre. UN MASQUE ET NON UN DÉGRADÉ POSÉ PAR-DESSUS : l'aplat de la carte se voit alors par transparence, sans qu'aucune règle n'ait à redire sa couleur — un calque opaque, lui, serait à tenir d'accord avec `--pastille-ton-sombre`. La paire `-webkit-` reste indispensable, Safari ne connaissant encore que celle-là ; le mixin `mask()` ne sert pas ici, il est fait pour une image de masque et sa taille, pas pour un dégradé. */ .coeur__module:not(.coeur__pastille--dictionnaire) .coeur__illustration { -webkit-mask-image: linear-gradient(to bottom, #000 var(--coeur-fondu-debut), transparent var(--coeur-fondu-fin)); mask-image: linear-gradient(to bottom, #000 var(--coeur-fondu-debut), transparent var(--coeur-fondu-fin)); } /* La marge est NÉGATIVE DE L'ÉCART PLUS DU RECOUVREMENT : la gouttière flex de la carte s'applique de toute façon entre le visuel et le texte, et s'ajoute à la marge. L'écrire ainsi rend le résultat lisible — le titre monte exactement de `--coeur-recouvrement` au-dessus du bas de l'image. ⚠️ GARDÉE PAR `:has()` : sans illustration, c'est le cadre en attente qui prend la place, avec son bord franc et son halo, et le titre lui passerait dessus. */ .coeur__module:not(.coeur__pastille--dictionnaire):has(.coeur__illustration) .coeur__module-tete { margin-block-start: calc(-1 * (var(--coeur-texte-visuel) + var(--coeur-recouvrement))); } /* ---------- Le badge de pilier, à cheval sur le coin de la CARTE ---------- Il était posé sur l'angle du VISUEL ; il est passé au coin de la carte le 27/08/2026, où il ne recouvre plus l'illustration. Ses deux retraits sont le débord en négatif, si bien qu'il sort du même montant vers le haut et vers la droite, et l'arrondi de la carte passe sous lui. ⚠️ LE TITRE DOIT RÉSERVER LA PLACE, un élément absolu n'en prend aucune. C'est la leçon de `.item__logo` : sans réserve, le texte passe SOUS le badge à mesure que la carte se resserre. La réserve est CALCULÉE et non écrite — l'arête gauche du badge est à `badge − débord` du bord de la carte, le texte s'arrête à `--coeur-pad-module`, donc ce qui empiète vaut `badge − débord − rembourrage`, et le `max()` l'annule quand le rembourrage suffit déjà. Il ne reste ainsi que 9 à 15px de réserve en grand écran : le titre garde presque toute sa mesure. */ .coeur__glyphe { position: absolute; top: calc(-1 * var(--coeur-badge-debord)); right: calc(-1 * var(--coeur-badge-debord)); width: var(--coeur-badge); height: auto; } .coeur__module-tete { padding-inline-end: max(0px, var(--coeur-badge) - var(--coeur-badge-debord) + var(--sp-4) - var(--coeur-pad-module)); } /* ⚠️ LE TEXTE PASSE AU-DESSUS DE L'ILLUSTRATION QU'IL RECOUVRE, et c'est écrit plutôt que laissé à l'ordre du DOM. En flux normal le texte du titre est bien peint après l'image, mais il suffirait d'un `transform`, d'un `translate` ou d'un `filter` sur l'image pour qu'elle passe au calque des éléments positionnés et repasse dessus — c'est précisément ce que faisait le rattrapage de recentrage retiré le 16/09/2026. ⚠️ `z-index` SEUL, SANS `position` : la tête est un ÉLÉMENT FLEX de la carte, pour lequel `z-index` s'applique quelle que soit sa position. Un `position: relative` ici ferait de la tête le bloc conteneur d'un éventuel descendant absolu, ce dont elle n'a pas besoin. ⚠️ NE PAS LE POSER AUSSI SUR `.coeur__visuel` : le badge de pilier y est absolu, et à `z-index` égal c'est le nœud le plus tardif du DOM qui gagne — la tête recouvrirait le badge. */ .coeur__module-tete { z-index: 1; } /* ---------- Le bouton du sommaire ---------- « Un bouton de la taille du texte, ferré à gauche » : la colonne est en `align-items: stretch`, donc `align-self` suffit — le bouton reprend la largeur de son libellé et se cale au bord gauche, sur le rail. ⚠️ BORNÉ À `lg`, ET C'EST VOULU. En dessous, une règle plus bas lui impose `width: 100%` avec sa raison : à sa largeur naturelle, dans une colonne étroite, il coupait son libellé. */ @media (min-width: 60rem) { .coeur__aparte-contenu .btn { align-self: flex-start; } } /* ========================================================================= Une seule colonne, panneau centré. La maquette ne couvre pas le mobile. Deux partis pris : Le sommaire cesse de coller. Sur un écran étroit il n'y a pas de colonne à côté de laquelle rester, et il ne surligne plus rien de visible. Il reprend sa place dans le flux, en tête de section, où il devient un menu de saut — les liens fonctionnent toujours, et le rail garde son sens : il dit où l'on en est. Le panneau est CENTRÉ, avec une gouttière égale de chaque côté — les formes de fond réapparaissent donc des deux bords, alors qu'un panneau pleine largeur les masquait entièrement. Les visuels rétrécissent d'autant : compromis assumé. ========================================================================= */ /* ---------- La plaque crème ---------- Un aplat au FOND DE PAGE, opaque, sous un texte posé hors carte. Il ne se voit pas — crème sur crème, aucun bord ne se dessine — sauf là où une forme de trame passe derrière : c'est exactement ce qu'il est là pour rattraper. `--bg-page` et surtout pas `--c-base-main` : ce fond DIT le fond de la page, c'est le cas de `.clients__frame`, et la règle du dépôt veut qu'on lise le rôle. Le rayon est celui des CARTES de la colonne (1,25rem), et pas un troisième : une plaque posée entre deux cartes qui porterait son propre arrondi se lirait comme un objet d'une autre nature. ⚠️ IL N'EST POSÉ QU'EN DESSOUS DE `lg`, et ce n'est pas un oubli. À l'écran large les trois formes sont épinglées pour DÉGAGER le texte — celle du haut à gauche l'est sur la mesure du chapeau, avec sa garde, précisément pour ça — donc la plaque n'y aurait rien à rattraper et ne ferait que recouvrir le décor que la recomposition du 27/08/2026 a rendu visible autour de l'en-tête. En dessous, les formes passent à 84–96 % de large et traversent le texte : la garde redevient nécessaire. */ @media (max-width: 60rem) { .coeur { /* 5 % de chaque côté, soit 10 % en tout. */ --coeur-gouttiere: 5%; /* Les blocs se resserrent aussi : 20px de côté au lieu de 32. */ --coeur-pad-module: var(--sp-5); /* PLUS D'AIR ENTRE LES CARTES qu'à l'écran large — demandé le 27/08/2026. ⚠️ LA COTE EST COUPLÉE AU DÉBORD DU BADGE, et sous un certain seuil l'augmenter NE SE VOIT PAS : le débord est plafonné à `--coeur-ecart-cartes - 0.5rem` (voir `--coeur-badge-debord`), donc tant que ce plafond mord, tout ce qu'on ajoute à la gouttière est repris par le badge et l'écart visible reste bloqué à son demi-rem. Le badge cesse de grandir à 0,28 × sa taille, soit ~21px sur un mobile de 375 ; il faut donc passer 21 + 6,8 ≈ 2,05rem pour que l'écart commence à s'ouvrir. À 3rem il vaut ~20px, contre 6,8 avant. C'est la première cote à revoir si les cartes se retrouvent trop espacées — jamais le débord, qui n'en est que la conséquence. */ --coeur-ecart-cartes: var(--sp-12); } /* LES DEUX TEXTES POSÉS HORS CARTE prennent la plaque : l'en-tête et la phrase de palier sont les seuls que rien ne recouvre, et les formes de trame leur passent dessous à cette largeur-là. L'en-tête gagne un rembourrage horizontal, qui était à zéro : il n'avait qu'un filet à fuir, et le voilà dans un cadre. Il prend la cote des cartes, si bien que la plaque et elles respirent au même rythme. */ .coeur__entete { padding: var(--coeur-pad-module); /* Ce que le rembourrage bas faisait — séparer l'en-tête des colonnes — passe en MARGE : resté en rembourrage il creuserait un vide au bas de la plaque, qui viendrait toucher le panneau du dessous. L'écart à l'œil ne bouge pas. */ margin-block-end: clamp(var(--sp-10), 4vw, var(--sp-16)); background-color: var(--bg-page); border-radius: 1.25rem; } .coeur__bande-texte { /* Le rembourrage de la plaque reprend celui de la barre sur le bord de départ : la gouttière de la quote passe de sa clamp à la cote des cartes, ce qui la met au même rythme qu'elles. */ padding: var(--coeur-pad-module); /* La mesure du texte ne bouge pas : le rembourrage s'AJOUTE à la boîte au lieu de la rogner, `box-sizing: border-box` obligeant à l'écrire. */ max-width: calc(var(--coeur-bande-mesure) + 2 * var(--coeur-pad-module)); background-color: var(--bg-page); border-radius: 1.25rem; /* ⚠️ LES DEUX COINS DE DÉPART REDEVIENNENT VIFS, ET CE N'EST PAS UN GOÛT : un `border-radius` arrondit AUSSI la bordure, si bien que la barre fluo se recourbait en crochet dans les deux coins de la plaque au lieu de rester droite. La plaque, elle, ne perd rien de visible — elle est du fond de page rendu opaque, et son seul office est de masquer les formes de trame qui lui passent dessous à cette largeur-là. */ border-start-start-radius: 0; border-end-start-radius: 0; } .coeur__panneau { /* `width: auto` et non 100% : avec une largeur imposée, les marges s'AJOUTENT au lieu de se soustraire et le panneau déborde. */ width: auto; max-width: none; /* La gouttière de cette largeur-là est la marge de 5 %, pas celle du `.container` : les deux s'ajouteraient. */ padding-inline: 0; margin-inline: var(--coeur-gouttiere); } /* Le panneau étant centré, il y a une gouttière de chaque côté : les formes se répartissent gauche / droite / gauche plutôt que de s'entasser à gauche. */ .coeur__forme--haut-gauche { --shape-w: 84%; top: 2%; left: -40%; } .coeur__forme--droite { --shape-w: 76%; top: 36%; left: 62%; } .coeur__forme--bas-gauche { --shape-w: 96%; top: 64%; left: -54%; } .coeur__suite { grid-template-columns: minmax(0, 1fr); } .coeur__aparte { padding: var(--coeur-pad-module); } .coeur__aparte-contenu { position: static; gap: var(--sp-6); } /* Le CTA prend toute la largeur de son bloc. C'est ce qui le fait tenir sur une ligne, et ce n'est pas un détail de réglage : laissé à son `fit-content`, il se calait sur une largeur plus étroite que la place disponible et coupait son libellé — élargir le bloc n'y changeait rien, la mesure l'a montré (le bouton RÉTRÉCISSAIT quand on lui donnait de l'air). Une largeur imposée supprime le problème, et donne au passage une cible tactile pleine largeur. */ .coeur__aparte-contenu .btn { width: 100%; white-space: normal; text-align: center; /* 12px et non 26 : la largeur du bouton ne dépend plus de son padding, celui-ci ne fait que rogner la place du libellé. */ padding-inline: var(--sp-3); } /* Rien à reprendre sur le badge : sa taille et son débord se replient d'eux- mêmes par leurs `clamp()` et par le plafond de la gouttière, et le `clip` horizontal de la section le coupe au bord de la fenêtre s'il en approche. */ } /* ========================================================================= BLOC « liste-numerotee » — blocs/liste-numerotee.njk. Origine : « Les 4 garanties Biron », Figma 116:22469. ⚠️ Écart assumé avec la maquette : ce bloc ne porte plus de panneau bordé. Le pourquoi est en tête de blocs/liste-numerotee.njk. ⚠️ Le citron rempli de trame qui occupait le flanc droit a été retiré le 14/08/2026, et sa troisième colonne réservée avec lui. Les formes de marque reviennent en petit : une par ligne, en aplat bleu, le numéro en blanc dedans. La respiration verticale (240 px de part et d'autre) est en revanche RESTÉE. Elle avait été calculée pour laisser voir la forme, qui n'est plus là — à revoir si la section paraît désormais trop vide. ========================================================================= */ .liste-numerotee { --liste-numerotee-gouttiere: clamp(var(--sp-8), 3.5vw, 4rem); position: relative; background-color: var(--bg-page); padding-block: clamp(var(--sp-16), 12.6vw, 15rem); /* Le contrat de la primitive `chemin` : c'est l'hôte qui borne l'horizontale, pour qu'un décor ne puisse jamais créer de barre de défilement. Ici la boucle est bornée à la largeur de son enveloppe et ne déborde donc pas — mais la règle vaut aussi le jour où l'on toucherait à `position` ou à la largeur ci-dessous, et c'est déjà ce que posent `liste-glyphes` et `face-a-face`. ⚠️ La verticale reste `visible`, et il le faut : la boucle est plus haute que le contenu et déborde dans le rembourrage de la section. Deux valeurs prises dans {visible, clip} ne se contraignent pas l'une l'autre — c'est `hidden` qui aurait forcé un conteneur de défilement sur les deux axes. */ overflow-x: clip; } /* ---------- Le tracé en pointillé fluo ---------- ⚠️ CE N'EST PLUS LA BOUCLE DEPUIS LE 31/08/2026. Elle entourait le bloc (`boucle.svg`, demandée par Hugo le 27/08/2026) ; le dessin est maintenant `ligne-jaune.svg`, un geste qui DESCEND LE LONG DU TEXTE, de la droite du titre jusque sous la quatrième garantie. Le réglage d'ajustement est au point d'appel, dans blocs/liste-numerotee.njk, et il a changé avec le dessin. Ce qui change ici tient en trois points, et chacun découle du même fait : un tracé qui ENTOURE et un tracé qui ACCOMPAGNE n'ont pas les mêmes besoins. 1. ⚠️ IL SE MONTRE DÈS `lg`, ET NON PLUS À PARTIR DE `xl`. Le seuil de 1280 px était celui de la boucle, et il avait une raison précise : il lui fallait du JEU SUR LES FLANCS du bloc, or le conteneur n'atteint sa largeur maximale qu'autour de 1170 px — en dessous elle serait venue épouser le contour du texte au lieu d'en faire le tour. Ce geste-ci ne borde rien : il vit DANS le bloc, dans la gouttière entre le titre et la liste. Sa prémisse est celle de la primitive, qui masque déjà le tracé sous `lg` — il n'y a donc plus de surcharge à écrire, et les deux lignes qui la portaient sont parties. 2. ⚠️ IL GARDE SON PROPRE POINTILLÉ, plus fin que celui du site. Le fichier livré dessine 4 px et des tirets de 8 8 ; `lib/chemin.js` ne retient que le `d` — « seul son `d` voyage » — et l'apparence vient des `--chemin-*`, qui valent 8 px et 14 20. Servi tel quel, le geste prenait donc un trait deux fois plus épais que dessiné, et des tirets presque doubles : sur un geste de 294 px de large, ça le rendait grossier. Les deux jetons sont donc reposés ici, aux valeurs du fichier. Le tracé est rendu à 0,945 de sa taille native (294 × 417 pour 312 × 441) : l'écart est assez faible pour que les cotes du dessin tiennent telles quelles, sans recalcul. 3. Les 96rem restent, mais plus pour la même raison. C'était la mesure des boîtes sombres du site, choisie pour que les flancs de la boucle passent au dehors de la colonne de texte. Ici l'enveloppe ne sert plus qu'à donner son REPÈRE au placement horizontal : `data-chemin-position="0.23"` se calcule sur elle. La changer déplacerait le geste — et déplacerait aussi le contenu, qui vit dans la même enveloppe. */ .liste-numerotee .chemin { inline-size: min(96rem, 100% - var(--container-pad) * 2); margin-inline: auto; --chemin-epaisseur: 4px; --chemin-tirets: 8 8; } /* ---------- Mise en page ---------- Deux colonnes : le titre, puis les garanties. Il y en avait une troisième, vide, qui réservait la voie du citron — sans elle la largeur des intitulés aurait dépendu du hasard du texte et fini par mordre sur la forme. La forme partie, la colonne n'avait plus d'objet. */ .liste-numerotee__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--liste-numerotee-gouttiere); align-items: start; } .liste-numerotee__titre { margin: 0; color: var(--c-blue-zodiac); text-wrap: balance; } /* ---------- Les quatre garanties ---------- */ .liste-numerotee__liste { counter-reset: garantie; margin: 0; padding: 0; list-style: none; } /* Recoleta SemiBold, comme dans la maquette : ces intitulés sont des titres courts et non du texte courant, le serif le dit. Le rembourrage latéral est repris en marge négative : le voile de survol s'étend alors au-delà du texte, sans que le texte quitte la grille. */ .liste-numerotee__ligne { counter-increment: garantie; display: grid; grid-template-columns: auto minmax(0, 1fr); /* Centré, et non plus sur la ligne de base. L'alignement par la base avait été demandé le 13/08/2026 quand le numéro était un chiffre nu : son point devait se poser exactement sur la ligne du texte. Le numéro est maintenant une pastille, une boîte sans ligne de base signifiante — c'est son centre qui doit répondre à celui de l'intitulé. */ align-items: center; gap: clamp(var(--sp-4), 1.6vw, var(--sp-6)); padding: clamp(var(--sp-4), 1.4vw, var(--sp-5)) var(--sp-4); margin-inline: calc(var(--sp-4) * -1); border-radius: var(--radius-cadre); font-family: var(--font-serif); font-weight: var(--fw-semibold); /* 26 px en grand écran : assez pour que les quatre intitulés tiennent chacun sur une seule ligne, ce que --fs-h3 (32 px) ne permettait pas — deux d'entre eux se repliaient et cassaient le rythme de la colonne. */ font-size: clamp(1.125rem, 0.87rem + 0.79vw, 1.625rem); /* 18 → 26px */ line-height: 1.3; letter-spacing: -0.01em; color: var(--c-blue-zodiac); transition: background-color var(--dur-fast) var(--ease-out); } /* ---------- Le numéro dans sa forme ---------- Forme et chiffre sont EMPILÉS EN GRILLE, tous deux en cellule 1/1, plutôt que positionnés en absolu : la hauteur de l'enveloppe se déduit alors du ratio de la forme, sans avoir à le connaître ici — chaque forme a le sien (690/670, 652/692, 650/670). `overflow` reste visible : la rotation agrandit la boîte englobante de la forme, qui déborde donc un peu de l'enveloppe. C'est voulu, et c'est sans conséquence — rien ne la jouxte à moins d'une gouttière. */ .liste-numerotee__numero { display: grid; place-items: center; /* La forme part de là : `.forme` prend `--shape-w` avec 100% pour défaut. */ width: clamp(3.25rem, 4.6vw, 4.75rem); } .liste-numerotee__pastille { grid-area: 1/1; } /* Le chiffre est le FRÈRE de la forme, pas son enfant : un masque s'applique à tout un sous-arbre, et le chiffre suivrait alors et la découpe et la rotation. Ici il reste droit quelle que soit l'inclinaison de la forme. ⚠️ CE `z-index` N'EST PAS DÉCORATIF — sans lui le chiffre est invisible. `.forme` porte un `transform: rotate()`, et un élément transformé est peint comme s'il créait un contexte d'empilement à z-index 0 : il passe donc à l'étape des éléments positionnés, APRÈS le contenu en ligne des descendants non positionnés — ce qu'est le chiffre. Être le frère suivant dans le DOM ne suffit pas, l'aplat bleu recouvre le blanc. Un `z-index` sur un élément de grille agit sans `position`, la spec Grid le prévoit ; `position: relative` est là par ceinture et bretelles, et parce qu'il rend l'intention lisible pour qui relit. Plus de point après le chiffre, ni l'interlettrage négatif qui le ramenait contre lui : le point servait à rattacher le numéro à son intitulé, ce dont la pastille se charge désormais. */ .liste-numerotee__chiffre { grid-area: 1/1; position: relative; z-index: 1; font-family: var(--font-mono); /* Un cran plus haut et plus gras que le premier jet : une chasse fixe sur un bleu moyen a besoin de matière pour tenir dans une pastille de 52 à 76 px. */ font-size: clamp(1.1875rem, 1.5vw, 1.625rem); /* 19 → 26px */ font-weight: var(--fw-semibold); line-height: 1; /* La couleur du FOND DE PAGE et non du blanc : le chiffre se lit alors comme découpé dans la forme, qui laisse voir le crème à travers, plutôt que posé dessus. La nuance est mince à l'œil — le crème est très clair — mais elle change ce que la pastille raconte. ⚠️ `--bg-page` bascule au bleu nuit dans les sections sombres (_tokens.scss). Ce bloc-ci pose son propre fond crème, il n'y a donc pas de piège ici ; mais un jour où on le poserait sur un fond sombre, le chiffre suivrait tout seul — ce qui est exactement ce qu'on veut. */ color: var(--bg-page); } .liste-numerotee__chiffre::before { content: counter(garantie); } /* ---------- Survol ---------- Un voile fluo très dilué. Le fluo plein est le survol des boutons du site ; à 10 % il devient une réaction et non une promesse d'action — ces lignes ne sont pas cliquables. Sous `hover: hover` uniquement : sur un écran tactile, le survol se déclenche au toucher et reste collé sur la dernière ligne touchée. La durée passe par --dur-fast, ramenée à 0,01 ms quand l'utilisateur demande moins d'animations (_base.scss) : le garde-fou est déjà en place. */ @media (hover: hover) { .liste-numerotee__ligne:hover { background-color: color-mix(in srgb, var(--c-fluo) 10%, transparent); } } /* ========================================================================= Une seule colonne. Le titre passe au-dessus, les garanties en dessous. ========================================================================= */ @media (max-width: 60rem) { /* ⚠️ La boucle en pointillé a déjà disparu bien avant ici — dès `xl`, voir plus haut. C'est là qu'on vient la chercher. */ .liste-numerotee { padding-block: var(--sp-section); } .liste-numerotee__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } .liste-numerotee__ligne { /* ⚠️ LA PASTILLE RESTE SUR LA LIGNE DE L'INTITULÉ, y compris ici — tranché par Hugo le 27/08/2026 : « les puces sur la même ligne que le texte en mode mobile. Si le texte est trop long, il peut revenir à la ligne. » Cette requête faisait passer la pastille AU-DESSUS du texte (grille à une seule colonne + `justify-items: start`, sans quoi une pastille de largeur fixe se serait étirée sur toute la ligne). Le motif invoqué était qu'un intitulé de quatre mots se replierait sur trois lignes étroites : c'est exactement ce qui est désormais accepté, le repli valant mieux qu'un marqueur décollé de ce qu'il numérote. Il n'y a donc plus rien à déclarer sur la grille — la ligne garde les deux colonnes `auto minmax(0, 1fr)` de la règle de base, et la seconde étant bornée par `minmax(0, …)`, le texte se replie au lieu de pousser la ligne. Ne pas y remettre `justify-items`, qui étirerait la pastille. Seul le corps du texte descend, comme avant. */ font-size: var(--fs-md); } } /* ========================================================================= Ils l'ont vécu — Figma 160:1778. Une boîte bleu nuit posée sur le crème, et dedans un carrousel : la carte courante centrée, ses voisines qui dépassent de part et d'autre. La section était un aplat pleine largeur encadré de deux bandes de trame jusqu'au 14/08/2026. Elle porte maintenant sa propre rupture sur l'arête de sa boîte, comme la séquence sombre. DERRIÈRE LA BOÎTE, trois formes de marque remplies de trame. C'est la grammaire de « Au cœur de Biron » : la boîte est opaque et les recouvre, elles n'existent que par ce qui dépasse. La section avait perdu toute texture en abandonnant ses bandes ; celle-ci ne coûte pas un pixel de défilement. Deux émergent par le bas, une coiffe la boîte — pas par les côtés, où elles se seraient disputé la place avec les flèches. Leur trame s'éteint aux deux extrémités : aucune ne peut donc se faire trancher net par la section voisine, ce qui est le défaut classique d'un décor rogné à ses bords. ⚠️ TROIS NIVEAUX, à ne pas confondre : .temoignages l'enveloppe pleine largeur, sur le crème .temoignages__decor le plan des formes, qui porte le rognage .temoignages__boite le bleu nuit, opaque, où vit tout le contenu La piste est une bande à DÉFILEMENT NATIF avec accrochage (scroll-snap), pas une translation pilotée en JavaScript. Trois raisons : le glissement au doigt fonctionne sans une ligne de code, la molette et le clavier aussi, et sans JS tout le contenu reste atteignable — seules les flèches disparaissent. ========================================================================= */ .temoignages { /* Largeur de la carte : 1280 dans la maquette. Le `100%` est résolu contre la boîte de contenu de la piste — qui n'a pas de rembourrage, justement pour que cette base soit la largeur de la section et rien d'autre. */ --temoignages-depassement: clamp(1.5rem, 10vw, 12.5rem); /* 112 px dans la maquette, montés à 140 : la carte ayant rétréci, la gouttière reprend une partie de la place libérée pour que les voisines ne se découvrent pas trop. */ --temoignages-gouttiere: clamp(var(--sp-6), 7.4vw, 8.75rem); /* Largeur d'une carte. Utilisée à deux endroits — la largeur de lame et la position des flèches — et c'est volontaire qu'ils partagent la variable : les deux résolvent leur `100%` contre la même boîte, la largeur de la section. C'est cette condition qui rend l'expression sûre ; c'est en la violant, avec un rembourrage sur la piste, qu'on avait obtenu une lame de 902 px au lieu de 1280. ⚠️ Le plafond n'est plus `--container-max` (1280 px) mais 62 rem, soit 992 px. À 1280, la citation courait sur près de 1200 px de mesure — une ligne de 90 signes, bien au-delà de ce qu'on lit confortablement. Ramenée à 992, la carte tient une soixantaine de signes par ligne. Demandé le 14/08/2026. */ --temoignages-carte: min( 62rem, 100% - 2 * var(--temoignages-depassement) ); /* Hauteur dont l'ombre de la carte a besoin au-dessus d'elle. Elle valait 120 px tant qu'une forme fluo dépassait aussi ; la forme partie, il ne reste que l'ombre à laisser passer — 67 px de flou pour −10 d'étalement, soit une cinquantaine de pixels utiles. */ --temoignages-debord: clamp(var(--sp-6), 3vw, var(--sp-12)); /* Écart titre → carte, revenu aux 58 px de la maquette. Il avait été poussé à 96 pour une raison qui n'existe plus : les formes fluo qui dépassaient des cartes montaient jusque dans la rangée du cartouche et, fluo sur fluo, en dissolvaient le contour. */ --temoignages-ecart-titre: clamp(var(--sp-8), 3.4vw, 3.625rem); position: relative; background-color: var(--bg-page); /* Le rembourrage bas est nettement plus généreux que le haut : c'est LUI la bande où les formes se voient. Tout le reste de leur silhouette passe derrière la boîte. */ padding-block: clamp(var(--sp-10), 4.6vw, var(--sp-16)) clamp(var(--sp-16), 8vw, 8.75rem); } /* ---------- Décor ---------- ⚠️ Le rognage est PORTÉ PAR CE PLAN et non par la section. Un `overflow` sur la section en ferait un conteneur de défilement, ce qui perturberait l'accrochage `scroll-snap` de la piste du carrousel. Il ne sert que de filet : les cotes ci-dessous font que rien ne devrait le toucher. ⚠️ UNE FORME TOURNÉE PEINT HORS DE SA BOÎTE, et c'est ce qui avait fait couper l'une d'elles. À −5° sur une forme de 419 px, le coin bas descend d'environ 18 px sous son bord ; il ne restait que 6 px de garde. Les dégagements ci-dessous sont donc calés bien au-delà de ce qu'une rotation peut coûter, et non au plus juste. */ .temoignages__decor { position: absolute; inset-block: 0; left: 50%; translate: -50% 0; width: 100%; /* Même boîte que `.temoignages__boite` — sinon les formes restent calées sur la pleine largeur de la section pendant que la boîte se centre au-delà de 96 rem, et la composition part visiblement vers la gauche. */ max-width: 96rem; z-index: 0; overflow: hidden; pointer-events: none; } /* En dessous de 96 rem, la boîte troque `margin-inline: auto` contre `var(--container-pad)` (voir plus bas) : le décor doit rétrécir pareil, sinon les formes débordent sous le rembourrage de la boîte. */ @media (max-width: 96rem) { .temoignages__decor { width: calc(100% - 2 * var(--container-pad)); } } /* Chaque forme s'ancre au bord dont elle dépasse — par le bas pour celles qui émergent sous la boîte, par le haut pour celle qui la coiffe — jamais aux deux. C'est ce qui rend leur position indépendante de la hauteur du carrousel. */ .temoignages__forme { position: absolute; width: var(--shape-w); /* ⚠️ Ceinture ET bretelles. `--grain-angle: 0deg` met la montée de densité sur l'axe VERTICAL : la trame s'éteint donc aux DEUX extrémités de chaque forme, en haut comme en bas. C'est exactement ce qu'il faut ici, où l'on ne voit jamais que l'une ou l'autre — le reste est sous la boîte. Même si une cote dérivait au point de faire toucher un bord, il n'y aurait rien à trancher : le motif y est déjà éteint. */ --grain-angle: 0deg; --grain-debut: 30%; --grain-fin: 62%; } /* Largeurs et positions dépareillées : à pas régulier, l'œil attrape l'alignement et la rangée se lit comme une frise. */ .temoignages__forme--gauche { --shape-w: 20%; --shape-rot: -8deg; bottom: 3.5rem; left: 5%; } .temoignages__forme--droite { --shape-w: 21%; --shape-rot: -5deg; bottom: 3rem; left: 70%; } /* Celle-ci coiffe la boîte au lieu d'en sortir : elle casse la rangée du bas, qui alignait ses trois formes sur un même bord. Elle est décalée vers la droite pour ne tomber au-dessus d'aucune des deux autres. */ .temoignages__forme--haut { --shape-w: 18%; --shape-rot: 11deg; top: 3rem; left: 46%; } /* ---------- La boîte ---------- Cotes de `.sequence__boite` : 96 rem et 28 px de rayon, pour que les deux sections sombres de la page se traitent pareil. Tranché le 14/08/2026 sur le banc /labo/temoignages-raccord/. Son opacité n'est pas un détail de teinte : c'est elle qui recouvre les formes et ne leur laisse que les marges. Sans elle, la composition perd son cadrage — exactement comme le panneau de « Au cœur de Biron ». ⚠️ Pas d'`overflow` malgré le rayon. Les cartes ne s'approchent jamais des angles — le rembourrage vertical les en écarte — et la piste rogne déjà son contenu horizontalement. Un `overflow` ici couperait en revanche l'ombre des cartes, que la piste s'échine justement à laisser passer. */ .temoignages__boite { position: relative; z-index: 1; max-width: 96rem; margin-inline: auto; background-color: var(--c-blue-dark); /* Coins arrondis et aucun contour — comme `.sequence__boite`, dont ce rayon est repris à l'identique. Le pourquoi de l'absence de contour est détaillé là-bas : sur du bleu nuit posé sur crème, le contraste fait déjà l'arête. */ border-radius: 1.75rem; /* 28px */ padding-block: clamp(var(--sp-12), 4.7vw, 5.5rem); } /* En dessous de 96 rem, `margin-inline: auto` ne ménage plus rien : la boîte toucherait les deux bords de l'écran et cesserait d'en être une. */ @media (max-width: 96rem) { .temoignages__boite { margin-inline: var(--container-pad); } } /* ---------- Titre ---------- Un vrai titre de section, comme partout ailleurs, et non plus un cartouche. Il reprend le gabarit de `.panneau__titre` (sections/_sequence.scss), l'autre titre sombre de la page : serif, --fs-h2, blanc. Demandé le 14/08/2026. `position: relative` et `z-index` ne sont plus nécessaires — ils tenaient le titre au-dessus des formes fluo qui dépassaient des cartes et venaient dans sa rangée. Ces formes n'existent plus. */ .temoignages__titre { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: 1.18; letter-spacing: -0.02em; color: var(--c-white); text-wrap: balance; } /* ---------- Carrousel ---------- */ .temoignages__carrousel { position: relative; } /* ---------- Les fondus de bord ---------- Deux voiles bleu nuit aux flancs du carrousel : la carte voisine s'y dilue au lieu de s'arrêter sur l'arête de la boîte. Ils marquent les côtés et disent qu'il y a une suite, sans la donner entièrement à lire. Ils sont SŒURS de la piste et non dedans : la piste rogne son contenu, elle les aurait emportés dans son défilement. La largeur est calée pour s'éteindre AVANT la carte courante. À 1904 px, la voisine dépasse de 132 px et le voile en fait 224 : il couvre donc tout ce qui dépasse, plus une partie de la gouttière, et il est déjà transparent quand il arrive sur la carte du milieu — qui reste intacte. `z-index: 1` les met au-dessus des cartes et SOUS les flèches, qui sont à 2. Elles tombent précisément dans cette bande : voilées, elles perdraient leur contraste. `pointer-events: none` laisse passer le glissement au doigt, que le voile intercepterait sinon. ⚠️ Rien à craindre pour les angles arrondis de la boîte, malgré l'absence de rognage : le carrousel est inséré dans le rembourrage vertical de celle-ci, les voiles n'approchent donc jamais ses coins. */ .temoignages__carrousel::before, .temoignages__carrousel::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(3rem, 12vw, 14rem); pointer-events: none; } .temoignages__carrousel::before { left: 0; background-image: linear-gradient(to right, var(--c-blue-dark), transparent); } .temoignages__carrousel::after { right: 0; background-image: linear-gradient(to left, var(--c-blue-dark), transparent); } .temoignages__piste { display: flex; gap: var(--temoignages-gouttiere); /* AUCUN rembourrage latéral, et c'est délibéré. On serait tenté d'en mettre pour que la première et la dernière lame puissent venir se centrer. Deux raisons de s'en passer : la boucle fait qu'on reste toujours dans la copie du milieu, donc aucune lame de bord n'a jamais besoin de se centrer ; et surtout un rembourrage en % créait une double résolution — la largeur de lame, elle aussi en %, se calculait alors contre une base déjà rétrécie par ce rembourrage. Mesuré : 902 px de lame au lieu de 1280. */ /* ⚠️ `overflow-x: auto` rogne AUSSI en vertical : la spécification force `overflow-y` à `auto` dès que l'un des deux axes n'est plus `visible`. Sans rembourrage vertical, l'ombre de la carte se faisait donc couper net — constaté à l'écran. On ménage la place DANS la boîte de défilement, puis on la reprend par une marge négative pour que la carte reste à la hauteur de la maquette. */ padding-block: var(--temoignages-debord) clamp(var(--sp-6), 2.5vw, var(--sp-12)); margin-block-start: calc(var(--temoignages-ecart-titre) - var(--temoignages-debord)); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; /* Pas de `scroll-behavior: smooth` ici : le recalage de boucle doit être INSTANTANÉ. Les flèches demandent l'animation au cas par cas, en JavaScript. */ /* La barre de défilement n'a rien à faire là : le carrousel a ses flèches, et sur un fond sombre elle ferait tache. */ scrollbar-width: none; } .temoignages__piste::-webkit-scrollbar { display: none; } /* Le focus clavier doit se voir : la piste est focalisable pour permettre le défilement aux flèches du clavier. */ .temoignages__piste:focus-visible { outline: 2px solid var(--c-fluo); outline-offset: 4px; } .temoignages__lame { position: relative; flex: 0 0 var(--temoignages-carte); /* La lame est elle-même une boîte flexible pour que la carte s'y étire en hauteur. Les lames, étant des éléments flexibles de la piste, prennent déjà toutes la hauteur de la plus haute ; c'est la CARTE qui restait à sa hauteur de contenu, d'où des cartes inégales. */ display: flex; /* Centrée dans la fenêtre de défilement, ce qui laisse les voisines dépasser symétriquement — 192 px à 1904, contre 200 dans la maquette. */ scroll-snap-align: center; } /* ---------- Deux citations : côte à côte, sans carrousel ---------- Rendu à la place de la piste quand la liste en compte moins de trois — c'est le gabarit qui tranche, sur le nombre de citations (voir son en-tête). TROIS CHOSES QUE CETTE GRILLE N'A PAS À REFAIRE, et c'est ce qui rend l'état si court à écrire : 1. `auto-fit` ne compte rien. Deux citations donnent deux colonnes égales, une seule en donne une pleine largeur, et l'écran étroit repasse à une colonne tout seul — aucun point de rupture à déclarer, aucun nombre à tenir en accord avec le gabarit. 2. Les `flex` de `.temoignages__lame` deviennent INERTES sans rien annuler. `flex: 0 0 var(--temoignages-carte)` ne s'applique qu'à l'enfant d'une boîte flexible ; dans une grille, la déclaration est simplement ignorée. Le `display: flex` de la lame, lui, sert encore : c'est lui qui étire la carte sur toute la hauteur de la rangée, donc qui met les deux filets d'auteur sur une même ligne de base. `scroll-snap-align` est sans effet hors conteneur de défilement. 3. Pas de rembourrage à ménager pour l'ombre des cartes. La piste devait le faire parce que son `overflow-x` rogne aussi en vertical ; ici rien ne rogne, l'ombre se peint librement. La gouttière ne reprend pas `--temoignages-gouttiere` (jusqu'à 140 px, calée pour éloigner des cartes qui se chevauchent presque) : deux cartes posées n'ont pas ce problème et 140 px les feraient lire comme deux sections. */ .temoignages__duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(var(--sp-6), 2.4vw, var(--sp-10)); margin-block-start: var(--temoignages-ecart-titre); } /* ---------- La carte ---------- */ .temoignages__carte { /* ⚠️ PAS DE `z-index` ICI, et ce n'est pas un oubli. La carte en portait un — `z-index: 1` — du temps où une forme fluo était posée derrière elle, à 0. La forme retirée, il est resté ; et comme les voiles de bord du carrousel sont eux aussi à 1, les trois se retrouvaient à égalité. À z-index égal, c'est l'ORDRE DU DOCUMENT qui tranche : le voile de gauche, premier enfant du carrousel, passait sous les cartes, tandis que celui de droite, dernier enfant, passait dessus. D'où un dégradé visible à droite et absent à gauche — une asymétrie parfaite produite par deux règles rigoureusement symétriques. `position: relative` reste : les initiales de l'avatar en dépendent. */ position: relative; /* Occupe toute la lame : c'est ce qui donne à toutes les cartes la même hauteur, celle imposée par le témoignage le plus long. */ /* Le rembourrage LATÉRAL est une variable parce qu'il est repris à l'identique par les deux moitiés de la carte. C'est ce qui les aligne de part et d'autre du filet qui les sépare. */ --temoignages-pad-inline: clamp(var(--sp-5), 1.9vw, 2.25rem); flex: 1; display: flex; flex-direction: column; margin: 0; /* ⚠️ AUCUN rembourrage sur la carte, et c'est ce qui rend le filet possible : ce sont ses deux moitiés qui portent le leur. Un rembourrage ici aurait laissé le trait s'arrêter à 44 px de chaque bord, flottant au lieu de séparer. */ padding: 0; background-color: var(--c-base-main); /* Le gabarit des CARTES CLAIRES DANS UNE BOÎTE SOMBRE, et non celui des panneaux de texte du site. Demandé par Hugo le 27/08/2026 ; la carte portait des coins vifs et un filet bleu depuis le 14/08/2026, qui étaient eux-mêmes un retour en arrière sur un état arrondi et sans contour. Deux choses, et chacune a sa raison ailleurs sur le site : ARRONDI DE 16px, PAS LES 28px DE LA BOÎTE. Deux arrondis concentriques de même rayon se concurrencent — l'écart et la cote sont ceux de la carte à la une du blog, de `module.cartes` et des cartes de /cas-clients/. AUCUN CONTOUR. C'est l'argument de la boîte elle-même, relu à l'envers : du crème posé sur du bleu nuit, le contraste fait déjà l'arête. Un filet n'est dû qu'aux cartes blanches posées sur le bleu clair des pages éditoriales, où il ne reste que 1,05 de contraste pour dessiner le bord. */ border-radius: var(--radius-lg); /* 16px */ /* Ombre discrète — 32 px de flou à 30 % d'opacité, contre 67 px à 50 % à l'origine. Elle a été resserrée le jour où un filet cernait la carte, et elle reste à cette valeur maintenant qu'il est parti : le contraste crème / bleu nuit suffit à l'arête, l'ombre ne fait plus que poser la carte. */ box-shadow: 0 2px 32px -8px rgba(44, 42, 46, 0.3); } /* La mesure est bornée sous la largeur de la carte : à 992 px de carte moins son rembourrage, il resterait 900 px de ligne. Le blanc qui reste à droite de la citation n'est pas une chute, c'est ce qui l'empêche de s'étirer. */ .temoignages__citation { margin: 0; max-width: 48rem; /* 768px */ /* Les rembourrages sont resserrés une seconde fois — 32 px en haut, 40 en bas, 36 sur les côtés, contre 70/44 à l'origine. La raison n'est pas esthétique : la carte doit pouvoir tenir QUATRE LIGNES de citation sans grandir, et comme toutes les cartes prennent la hauteur de la plus haute, chaque pixel rendu au texte est un pixel qui ne s'ajoute pas aux trois. */ padding: clamp(var(--sp-5), 1.8vw, var(--sp-8)) var(--temoignages-pad-inline) clamp(var(--sp-6), 2.2vw, var(--sp-10)); } .temoignages__citation p { margin: 0; font-family: var(--font-serif); font-weight: var(--fw-medium); /* 22 px à 1900, contre 32 dans la maquette et 40 pour --fs-quote. Le corps a été descendu trois fois : 40 faisait passer la citation sur trois lignes et rendait la carte massive, 32 restait trop présent, 28 l'était encore une fois la carte rétrécie. Une citation n'est pas un titre. */ font-size: clamp(1rem, 0.86rem + 0.45vw, 1.375rem); /* 16 → 22px */ line-height: 1.32; letter-spacing: -0.025em; color: var(--c-blue-dark); text-wrap: pretty; } /* ---------- L'auteur ---------- */ /* Repoussé en bas de la carte. Puisque toutes les cartes ont la même hauteur mais pas la même longueur de citation, un auteur collé à son texte flotterait à une hauteur différente d'une carte à l'autre. Aligné en bas, il donne une ligne de base commune au carrousel — et, depuis que le filet les sépare, une rangée de traits alignés d'une carte à l'autre. */ .temoignages__auteur { margin-block-start: auto; display: flex; align-items: center; /* L'écart avec le filet vaut le rembourrage du bord, et pas un cran d'espacement générique : c'est ce qui CENTRE optiquement la forme dans sa case. À 16 px elle se collait au trait alors qu'elle en avait 44 de l'autre côté, et l'ensemble penchait à droite. */ gap: var(--temoignages-pad-inline); /* En variable parce que l'identité doit pouvoir l'annuler — voir plus bas. Resserré en même temps que ceux de la citation : la forme étant passée de 46 à 60 px, le bloc auteur aurait sinon gagné 14 px de haut sur toutes les cartes, au détriment de la place laissée au texte. */ --temoignages-pad-auteur: clamp(var(--sp-4), 1.4vw, var(--sp-6)); padding: var(--temoignages-pad-auteur) var(--temoignages-pad-inline); border-top: var(--filet-panneau); } /* La forme masque la place de la photo ; les initiales se posent par-dessus. Deux éléments et non un seul : un masque rognerait le texte avec le reste. Elle est passée de 46 à 60 px : dans une case dont elle est le seul objet, 46 px la faisaient paraître posée là faute de mieux. Sa hauteur commande celle de toute la rangée — donc aussi la longueur du filet vertical, qui s'étire d'autant. */ .temoignages__avatar { position: relative; flex-shrink: 0; width: 3.75rem; /* 60px */ } .temoignages__avatar-forme { --shape-w: 100%; display: block; } /* ---------- Le portrait, depuis le 31/08/2026 ---------- Il remplace l'aplat bleu nuit et ses initiales, sans rien changer d'autre : même forme, même rotation citron → losange → écu, même masque. C'est la macro `formePhoto` de partials/forme.njk qui pose `--shape-src` et `--shape-ratio` en ligne, comme le fait `forme` pour l'aplat. ⚠️ `object-fit: cover` EST LA LIGNE QUI COMPTE. Les cinq portraits sont en 414 × 464, soit un rapport de 0,892, et les trois formes tournent entre 0,941 (écu) et 1,030 (citron). Sans lui, chaque visage serait étiré d'une valeur différente selon le rang qu'il occupe dans la rotation — un défaut qui ne se voit qu'en comparant deux cartes, donc presque jamais à la relecture. */ .temoignages__photo { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--shape-ratio); object-fit: cover; mask-image: var(--shape-src); mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-image: var(--shape-src); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; } .temoignages__initiales { position: absolute; inset: 0; display: grid; place-content: center; font-family: var(--font-mono); /* Suit l'agrandissement de la forme : à --fs-xs, les initiales flottaient au milieu des 60 px. */ font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-white); } /* Le filet vertical qui sépare la photo de l'identité, écho de celui qui sépare la citation de l'auteur. Il court sur TOUTE la hauteur du bloc auteur — du filet horizontal jusqu'au bas de la carte — et non sur la seule hauteur de l'avatar. Deux déclarations le font, et elles vont ensemble : align-self: stretch sans lui, l'identité ne fait que la hauteur de ses deux lignes de texte ; étirée, elle prend celle de la rangée, c'est-à-dire celle de l'avatar. marge négative `stretch` cale la boîte de MARGE sur la hauteur de la rangée. Une marge négative de la valeur du rembourrage pousse donc la boîte de BORDURE d'autant au-delà, en haut comme en bas — le trait rejoint ainsi les deux arêtes du bloc. Le rembourrage rendu à l'intérieur remet le texte là où il était. Le `justify-content: center` remet le texte à mi-hauteur, que `stretch` venait de lui retirer. */ .temoignages__identite { display: flex; flex-direction: column; justify-content: center; align-self: stretch; margin-block: calc(var(--temoignages-pad-auteur) * -1); padding-block: var(--temoignages-pad-auteur); padding-inline-start: var(--sp-4); border-inline-start: var(--filet-panneau); } .temoignages__nom { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-blue-dark); } .temoignages__role { font-size: var(--fs-xs); color: var(--c-blue-400); } /* ---------- Flèches ---------- Posées dans le dépassement, à cheval sur les voisines. `hidden` en HTML : elles n'apparaissent que si le script prend la main, sinon elles promettraient une commande qui ne répond pas. */ .temoignages__fleche { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: grid; place-content: center; width: 3rem; height: 3rem; padding: 0; font-size: var(--fs-md); color: var(--c-white); background-color: color-mix(in srgb, var(--c-blue-zodiac) 70%, transparent); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-full); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .temoignages__fleche[hidden] { display: none; } /* Centrées dans la gouttière qui sépare la carte courante de sa voisine : elles tombent ainsi sur le bleu nuit et non sur une carte crème, où leur halo sombre faisait tache. Le calcul : le bord de la carte, moins la moitié de la gouttière, moins la moitié du bouton. */ .temoignages__fleche--prec { left: calc(50% - (var(--temoignages-carte) + var(--temoignages-gouttiere)) / 2 - 1.5rem); } .temoignages__fleche--suiv { right: calc(50% - (var(--temoignages-carte) + var(--temoignages-gouttiere)) / 2 - 1.5rem); } @media (hover: hover) { .temoignages__fleche:hover { color: var(--c-blue-zodiac); background-color: var(--c-fluo); border-color: var(--c-fluo); } } .temoignages__fleche:focus-visible { outline: 2px solid var(--c-fluo); outline-offset: 3px; } /* ========================================================================= Écrans étroits. La carte prend presque toute la largeur : le dépassement des voisines, qui sert à faire comprendre qu'il y en a d'autres, se réduit à un indice. Les flèches se rapprochent du bas de la carte plutôt que de flotter par-dessus le texte. ========================================================================= */ @media (max-width: 60rem) { .temoignages { --temoignages-depassement: clamp(var(--sp-4), 6vw, var(--sp-10)); --temoignages-gouttiere: var(--sp-4); } /* Trois formes autour d'une boîte étroite, ce serait trois taches. On garde celle du haut, qui coiffe, et une seule en bas, toutes deux plus larges. */ .temoignages__forme--droite { display: none; } .temoignages__forme--gauche { --shape-w: 52%; left: 44%; } .temoignages__forme--haut { --shape-w: 44%; left: -8%; } .temoignages__citation p { line-height: 1.4; } /* La gouttière est trop étroite pour y loger un bouton : les flèches reviennent au ras des bords, par-dessus le bord des cartes voisines. */ .temoignages__fleche { width: 2.5rem; height: 2.5rem; } .temoignages__fleche--prec { left: var(--sp-2); } .temoignages__fleche--suiv { right: var(--sp-2); } } /* ========================================================================= Questions fréquentes — Figma 73:1448. Panneau blanc bordé de bleu, découpé 340 / 938. Décor : une trame sur le flanc gauche, deux formes bleues sur le flanc droit — le panneau est opaque et les recouvre là où ils se croisent. ⚠️ Les filets étaient FLUO, comme le veut la maquette. Ils passent au bleu le 14/08/2026, avec le jeton `--filet-panneau` partagé par « Au cœur de Biron » et « Une approche data unique » : trois panneaux voisins dans la page n'ont aucune raison de porter trois contours différents. ========================================================================= */ .faq { --faq-filet: var(--filet-panneau); --faq-pad-accroche: clamp(var(--sp-8), 3.6vw, 4.3125rem); /* 69px */ --faq-pad-accroche-inline: clamp(var(--sp-6), 2.3vw, 2.75rem); /* 44px */ --faq-pad-liste: clamp(var(--sp-6), 2.3vw, 2.75rem); /* 44px */ /* ---------- Repères pour caler la trame sur le filet du panneau ---------- Le panneau est centré et plafonné ; la trame, elle, part du bord de page. Pour que son bord droit tombe EXACTEMENT sur le filet vertical qui sépare les deux colonnes, il faut donc reconstituer la position de ce filet dans le repère de la section : la marge à gauche du panneau, plus la première colonne de sa grille. 340 / (340 + 938) = 0,26604 — la proportion de la grille du panneau. */ --faq-panneau-large: min(100%, var(--container-max)); --faq-panneau-marge: calc((100% - var(--faq-panneau-large)) / 2); --faq-axe-filet: calc( var(--faq-panneau-marge) + var(--faq-panneau-large) * 0.26604 ); position: relative; background-color: var(--bg-page); padding-block: clamp(var(--sp-16), 12.4vw, 14.75rem); } /* ---------- Décor ---------- */ .faq__decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* La trame court du bord de page jusqu'au FILET VERTICAL du panneau, sur lequel elle s'arrête au pixel. Elle tombait auparavant à 34,5 % de la section, une valeur qui n'avait de rapport avec rien et qui dérivait par rapport au filet à chaque changement de largeur. ⚠️ Les `100%` de `--faq-axe-filet` se résolvent ICI, contre le plan de décor. C'est valide parce que ce plan est en `inset: 0` sur la section : il a donc exactement la largeur contre laquelle le panneau se centre. Poser ce jeton sur un élément plus étroit donnerait une tout autre valeur. Le fondu est vertical seulement : la trame naît du fond en haut et s'y éteint en bas, mais s'arrête net sur ses côtés. */ .faq__grille { position: absolute; inset-block: 0; inset-inline: 0 auto; width: var(--faq-axe-filet); } .faq__formes { position: absolute; inset: 0; } .faq__forme { position: absolute; } /* Losange étiré. La maquette lui donne 300 × 397 alors que sa proportion naturelle est 0,97 : l'instance est déformée en hauteur. On reproduit l'étirement en forçant l'aspect-ratio — le masque suit, il est en `mask-size: 100% 100%`. */ .faq__forme--haut { --shape-w: 15.8%; --shape-rot: 0deg; aspect-ratio: 300/397; top: 8.7%; left: 75.7%; } /* Ancrée au BAS et non au haut. En pourcentage de la hauteur de section elle disparaissait derrière le panneau : la section est plus courte que dans la maquette (la réponse ouverte y occupe moins de place), donc le même pourcentage ne tombe pas au même endroit. Depuis le bas, la distance au bord inférieur du panneau est fixe — c'est le rembourrage de la section. */ .faq__forme--bas { --shape-w: 9.6%; --shape-rot: -10deg; bottom: 7%; left: 67.9%; } /* ---------- Panneau ---------- */ .faq__panneau { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 340fr) minmax(0, 938fr); width: 100%; max-width: var(--container-max); margin-inline: auto; /* Blanc, comme le panneau de « Au cœur de Biron » : c'est ce qui le détache du crème de la page, maintenant que son filet ne crie plus. */ background-color: var(--c-white); border: var(--faq-filet); /* Coins vifs, comme le panneau de « Au cœur de Biron » depuis le 14/08/2026. Le jeton `--radius-cadre` n'est pas remis à zéro pour autant : il habille aussi les cadres de visuels et les cartes d'articles, qui gardent les leurs. Ce sont les PANNEAUX qui se carrent, pas tout. */ border-radius: 0; } /* Le titre prend les marges de bande d'en-tête partagées par les autres panneaux — `--pad-panneau-entete-*` (_tokens.scss). Il ouvrait à 93 px du haut de la cellule, contre 56 pour ses voisins : l'écart se voyait d'une section à l'autre. Ces 93 px avaient une raison, disparue depuis : un surtitre en chasse fixe coiffait le titre, et sa hauteur avait été rendue au rembourrage quand on l'a retiré plutôt que perdue. Le titre n'en avait pas besoin. */ .faq__accroche { display: flex; flex-direction: column; padding: var(--pad-panneau-entete-haut) var(--faq-pad-accroche-inline) var(--faq-pad-accroche); border-right: var(--faq-filet); } /* ⚠️ --fs-h3 et non --fs-h2 comme les autres titres de section, et c'est un choix contraint : la colonne ne fait que 250 px de large en grand écran, où --fs-h2 monterait à 48 px et casserait le titre en quatre lignes d'un mot. 32 px est aussi la cote de la maquette. La couleur passe à --c-blue-zodiac, celle des titres de « Au cœur de Biron ». --text-strong tirait vers le gris du texte courant. */ .faq__titre { margin: 0; font-size: var(--fs-h3); line-height: 1.14; letter-spacing: -0.03em; color: var(--c-blue-zodiac); } /* ---------- Les questions ---------- */ /* ⚠️ AUCUN rembourrage latéral, et c'est ce qui rend les séparations pleine largeur : ce sont la question et la réponse qui portent le leur. Sur la liste, le filet de chaque question se serait arrêté à 44 px de chaque bord et aurait flotté au lieu de séparer. Même mécanique que les cartes de témoignages. */ .faq__liste { padding-block: clamp(var(--sp-5), 1.9vw, 2.25rem) var(--faq-pad-liste); } .faq__item { border-bottom: var(--faq-filet); } /* La dernière question n'a pas de filet : celui du panneau est juste en dessous, et les deux se doublaient en un trait épais. */ .faq__item:last-child { border-bottom: 0; } /* Le marqueur natif du

    n'a rien à faire là : le « + » le remplace. Il faut le neutraliser des deux façons — la standard et celle de WebKit. */ .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-block: clamp(var(--sp-4), 1vw, 1.25rem); padding-inline: var(--faq-pad-liste); font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-md); line-height: 1.35; letter-spacing: -0.01em; color: var(--text-strong); cursor: pointer; list-style: none; /* La transition est déclarée ICI et non dans l'état ouvert : sur l'état cible seulement, le retour à la fermeture ne s'animait pas. */ transition: color var(--dur-base) var(--ease-out); } .faq__question::-webkit-details-marker { display: none; } /* Le signe : un « + » qui devient croix par une rotation d'un quart de tour, comme dans la maquette. La rotation est le seul mouvement de l'accordéon — la hauteur, elle, ne s'animerait qu'au prix d'`interpolate-size`, dont on se passe ici. */ .faq__signe { flex-shrink: 0; font-family: var(--font-sans); font-weight: 300; font-size: 1.3125rem; /* 21px */ line-height: 1; /* `currentColor` et non une couleur à lui : le signe suit désormais le texte de sa question en toutes circonstances — au repos, au survol et à l'ouverture, où la question passe au bleu. Une couleur fixe le laissait bleu même quand le texte ne l'était pas, et il fallait alors penser à la tenir d'accord avec trois règles. */ color: currentColor; transition: rotate var(--dur-fast) var(--ease-out); } .faq__item[open] .faq__signe { rotate: 45deg; } @media (hover: hover) { .faq__question:hover { color: var(--c-blue); } .faq__question:hover .faq__signe { scale: 1.15; } } /* ---------- Ouverture animée ---------- La réponse apparaît en fondu et glisse de quelques pixels. On n'anime PAS la hauteur, et c'est un choix mesuré : la recette moderne (`::details-content` + `interpolate-size: allow-keywords`) figeait la hauteur de l'item — 220 px même refermé, constaté à la mesure. Elle aurait en outre rendu instable la correction de défilement ci-dessous, qui a besoin d'un changement de hauteur immédiat. Animer l'apparition du contenu suffit à donner le mouvement demandé, et ne dépend d'aucune propriété expérimentale. La durée passe par --dur-base, ramenée à 0,01 ms quand l'utilisateur demande moins d'animations (_base.scss) : le garde-fou est déjà en place. */ /* ---------- Deux chemins d'animation, un par moteur ---------- Chrome et Firefox ne dévoilent pas un
    de la même façon, et aucun des deux mécanismes ne marche partout. On pose donc les deux ; chaque navigateur prend celui qu'il sait faire. FIREFOX — l'animation par images clés sur la réponse (juste en dessous). Firefox joue les animations d'un contenu qui vient d'être rendu. CHROME — le dépliage de `::details-content` (bloc suivant). Chrome masque le contenu fermé par `content-visibility: hidden` et n'y RELANCE PAS les animations au dévoilement : l'animation par images clés y reste muette, c'est exactement l'écart constaté à l'usage. En revanche c'est Chrome qui sait animer une hauteur `auto`, ce que Firefox ne sait pas encore. La durée reste un multiple de --dur-base pour suivre la réduction de mouvement, et `--ease-editorial` est la courbe des entrées longues du site. */ .faq__item[open] .faq__reponse { animation: faq-reponse-apparait calc(var(--dur-base) * 1.6) var(--ease-editorial); } @keyframes faq-reponse-apparait { from { opacity: 0; translate: 0 -1rem; clip-path: inset(0 0 100% 0); } to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); } } /* Le dépliage, pour les moteurs qui savent interpoler une hauteur `auto`. `interpolate-size` s'hérite : on le pose sur l'item et non sur la racine, pas question d'ouvrir cette porte à tout le site pour une section. `content-visibility` doit être de la transition avec `allow-discrete`, sinon le contenu apparaît d'un bloc au lieu d'accompagner la hauteur. */ @supports (interpolate-size: allow-keywords) and (selector(::details-content)) { .faq__item { interpolate-size: allow-keywords; } .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size calc(var(--dur-base) * 1.6) var(--ease-editorial), content-visibility calc(var(--dur-base) * 1.6) allow-discrete; } .faq__item[open]::details-content { block-size: auto; } } /* Pendant que faq.js mesure les hauteurs, on force les états finaux et on coupe tout mouvement : sans ça il mesurerait le DÉBUT du dépliage — soit une hauteur nulle — et réserverait n'importe quoi. */ .faq--mesure .faq__item::details-content { transition: none !important; } .faq--mesure .faq__item[open]::details-content { block-size: auto !important; } .faq--mesure .faq__item:not([open])::details-content { block-size: 0 !important; } .faq--mesure .faq__reponse { animation: none !important; } /* La question ouverte prend la couleur d'accent. Ce repère-là ne dépend d'aucune animation : il reste visible même si l'utilisateur a demandé moins de mouvement. */ .faq__item[open] > .faq__question { color: var(--c-blue); } .faq__reponse { padding-block-end: clamp(var(--sp-4), 1.2vw, 1.375rem); /* 22px */ padding-inline-start: var(--faq-pad-liste); /* La réponse s'arrête plus tôt que la question sur le bord droit : une ligne de texte qui court jusqu'au filet se lit mal. D'où le supplément, qui s'ajoute au rembourrage commun au lieu de le remplacer. */ padding-inline-end: calc(var(--faq-pad-liste) + clamp(0px, 2vw, 2.5rem)); } .faq__reponse p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-strong); text-wrap: pretty; } /* ---------- La réponse manquante ---------- La maquette du connecteur IA pose cinq questions et n'en répond qu'à une : les quatre autres portent cette mention plutôt qu'une réponse inventée (règle 8 de MAQUETTE.md, et le pourquoi est en tête de blocs/faq.njk). Elle reprend EXACTEMENT l'habillage de `.onglets-metiers__vide`, qui remplit le même office sur la page plateforme : chasse fixe, capitales, encre discrète. C'est ce qui la fait lire comme un ÉTAT et non comme une affirmation — la même phrase en corps de texte se lirait comme la réponse elle-même. ⚠️ LE SÉLECTEUR EST DESCENDANT, ET C'EST OBLIGATOIRE. `.faq__reponse p` juste au-dessus pèse une classe ET un type, donc il l'emporterait sur un `.faq__reponse-vide` seul — la mention repartirait en corps de texte à l'encre forte, sans le moindre message. Deux classes suffisent à reprendre la main. */ .faq__reponse .faq__reponse-vide { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); } /* ========================================================================= Une seule colonne. L'accroche passe au-dessus des questions ; le filet vertical devient horizontal. La trame se réduit à une bande sur le bord gauche et les formes viennent chercher le bord droit — le panneau occupant presque toute la largeur, c'est tout ce qu'il leur reste. ========================================================================= */ @media (max-width: 60rem) { .faq { padding-block: var(--sp-section); padding-inline: var(--container-pad); } .faq__panneau { grid-template-columns: minmax(0, 1fr); } .faq__accroche { border-right: 0; border-bottom: var(--faq-filet); } .faq__grille { width: 22%; } .faq__forme--haut { --shape-w: 30%; top: 3%; left: 74%; } .faq__forme--bas { --shape-w: 20%; bottom: 4%; left: 80%; } } /* ========================================================================= BLOC « appel » — blocs/appel.njk. Origine : « Prochaine étape », Figma 73:1449. Section bleu nuit, précédée par défaut de la bande halftone d'entrée. Le bloc sait aussi poser une bande de sortie quand il n'est PAS en fin de page — voir le champ `transition` en tête de blocs/appel.njk. Deux couches de décor, comme dans la maquette : une COURBE de points qui dérive lentement en bas, et un dégradé qui creuse le bord inférieur. ========================================================================= */ .appel { /* Deux encres, et pas une seule : les points ont besoin de contraste pour se lire sur le bleu nuit, le dégradé du bas a besoin d'être doux pour ne pas trancher. Avec une valeur unique, l'un des deux était toujours sacrifié — les points se noyaient. Les deux restent dans la famille demandée, entre le bleu marine du fond et le noir du texte. */ --appel-encre-points: var(--c-blue-zodiac); /* L'encre du dégradé est passée en jeton (--c-blue-abysse) : le pied de page reprend exactement cette teinte, la fin de la page est d'un seul tenant. */ --appel-encre-fond: var(--c-blue-abysse); position: relative; background-color: var(--c-blue-dark); /* En haut, la place du surtitre mono retiré est rendue au rembourrage : le titre ne doit pas monter d'un cran vers la bande de trame. En bas, la maquette réserve 202 px sous le dernier lien, la place que réclame la courbe. */ padding-block: clamp(var(--sp-16), 5.6vw, 4.25rem) clamp(var(--sp-24), 12vw, 14.25rem); /* Le décor déborde volontairement : on le rogne ici. Pas de `sticky` dans cette section, donc aucun risque à poser un overflow. */ overflow: clip; } /* ---------- Décor ---------- */ .appel__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* La courbe de points, FIXE. Elle occupe la moitié basse de la section. Le masque est celui des bandes de transition : sa frontière haute suit une vague — c'est de là que vient la courbe — et il est pavable horizontalement, donc il couvre n'importe quelle largeur d'écran sans être étiré. Mêmes réglages que le partial halftone, pour que le grain soit le même d'un bout à l'autre du site. Une version qui dérivait lentement a été essayée puis écartée : Hugo préfère l'image fixe. La structure s'en trouve simplifiée — la dérive demandait une couche deux fois plus large pour que le raccord soit invisible. */ .appel__courbe { position: absolute; inset: auto 0 0; height: 62%; background-color: var(--appel-encre-points); mask-image: url("/assets/img/halftone-mask.svg"); mask-size: auto 100%; mask-repeat: repeat-x; mask-position: center bottom; -webkit-mask-image: url("/assets/img/halftone-mask.svg"); -webkit-mask-size: auto 100%; -webkit-mask-repeat: repeat-x; -webkit-mask-position: center bottom; } /* Le dégradé du bas, celui de la maquette : il creuse le bord inférieur et assoit la section. Volontairement bas et court — à 45 % de hauteur il noyait la zone où les points se lisent, et la courbe disparaissait dans son propre fond. */ .appel__fond-bas { position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(to top, var(--appel-encre-fond) 22%, transparent); } /* ---------- Contenu ---------- */ .appel__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); text-align: center; } /* Corps propre, plus grand que le --fs-h2 des autres titres de section : ce bloc est le second moment le plus important de la page, juste derrière le hero, et il n'avait qu'un rapport de 2,7 avec son sous-titre là où le hero atteint 3,6. C'est exactement le défaut qui rendait le hero « pas assez premium » avant qu'on l'y corrige. Défini en FRACTION DU h1 et non par un clamp indépendant. Un premier essai avec son propre clamp passait devant le hero à 1440 px — 54,8 contre 51,9 — parce que les deux pentes se croisaient. Ici la hiérarchie tient par construction, à toutes les largeurs. À noter : le gain est surtout sensible sur les grands écrans. À 1440 px, --fs-h2 plafonnait déjà à 43 px, tout près de ce que la place autorise ; c'était un défaut de large écran, où le titre stagnait à 48 px quand le hero montait à 72. */ .appel__titre { margin: 0; max-width: 54rem; /* 860px */ font-size: calc(var(--fs-h1) * 0.88); color: var(--c-white); text-wrap: balance; } .appel__sous-titre { margin: clamp(var(--sp-4), 1.4vw, var(--sp-5)) 0 0; max-width: 38rem; font-size: var(--fs-base); line-height: var(--lh-normal); /* Blanc et non plus casper : c'est du corps de texte sur fond sombre. Écrit en dur comme le titre, parce que ce bloc peint ses couleurs lui-même au lieu de passer par `.on-dark`. */ color: var(--c-white); } /* ---------- Boutons ---------- Le bouton est en starship et son survol part vers le BLANC — demandé. On garde la géométrie de `.btn` (hauteur, coin squircle, zone tactile) et on ne redéfinit que les couleurs. */ .appel__cta { margin-block-start: clamp(var(--sp-6), 2.2vw, var(--sp-8)); padding-inline: 1.875rem; /* 30px */ color: var(--c-blue-zodiac); background-color: var(--c-starship); border-color: var(--c-starship); } @media (hover: hover) { .appel__cta:hover { background-color: var(--c-white); border-color: var(--c-white); } } /* Le lien secondaire suit le même geste : starship au repos, blanc au survol. Deux appels à l'action qui ne réagiraient pas de la même façon donneraient l'impression que l'un des deux est inerte. */ /* `inline` et non `inline-flex` : en flex, la flèche restait seule à droite quand le libellé passait sur deux lignes. Dans le flux du texte, elle suit le dernier mot. */ .appel__lien { display: inline; margin-block-start: clamp(var(--sp-4), 1.4vw, 1.375rem); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-starship); transition: color var(--dur-fast) var(--ease-out); } .appel__lien-fleche { display: inline-block; margin-inline-start: var(--sp-2); transition: transform var(--dur-fast) var(--ease-out); } @media (hover: hover) { .appel__lien:hover { color: var(--c-white); } .appel__lien:hover .appel__lien-fleche { transform: translateX(3px); } } /* ========================================================================= Écrans étroits. La courbe monte plus haut : sur un écran étroit la section est plus haute que large, et une courbe cantonnée au tiers bas s'y perdrait. ========================================================================= */ @media (max-width: 60rem) { .appel { padding-block: var(--sp-10) clamp(var(--sp-16), 22vw, var(--sp-32)); } .appel__courbe { height: 46%; } .appel__titre { max-width: none; } } /* ========================================================================= Pied de page. Il est en --c-blue-zodiac (#0F1C3F) — demandé le 13/08/2026. Le bas de page descend ainsi d'un seul mouvement : le bleu nuit de la section finale, puis son dégradé, puis ce bleu-ci, sans couture ni palier. Le contraste est volontairement bas — un pied de page se consulte, il n'appelle pas le regard. Le seul élément vif est la mention « (à créer) », qui doit se voir. ========================================================================= */ .pied { /* Exempté des 85 % du site, comme l'en-tête — voir `--echelle-chrome` dans _tokens.scss pour le mécanisme et ses limites. */ zoom: var(--echelle-chrome); background-color: var(--c-blue-zodiac); padding-block: var(--sp-16) var(--sp-8); font-size: var(--fs-xs); } .pied__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-12) var(--sp-16); } /* ---------- Marque ---------- */ .pied__marque { /* La phrase de réassurance ne dépasse pas trois lignes en grand écran : au-delà elle se lit comme un paragraphe, pas comme une signature. ⚠️ 30rem DEPUIS LE 01/09/2026, ET C'EST LA PHRASE QUI A CHANGÉ, PAS LA RÈGLE. La nouvelle fait 174 signes contre 110 à l'ancienne : à 26rem elle passait à QUATRE lignes, donc hors de la règle qui précède. 30rem la ramène à trois — mesuré, et c'est le premier cran qui y arrive. Le pied fait 1376 px de large : les 54 px repris par cette colonne sont pris sur les colonnes de liens, qui les avaient. */ max-width: 30rem; } .pied__logo { display: block; font-family: var(--font-serif); font-size: 1.375rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-on-inverse); } .pied__reassurance { margin-block-start: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-normal); /* De la prose, donc à pleine encre. Les mentions légales et les titres de colonne du pied restent, eux, en casper : ce n'est pas du corps de texte. */ color: var(--text-on-inverse); } /* ---------- Colonnes de liens ---------- */ .pied__colonnes { display: flex; flex-wrap: wrap; gap: var(--sp-16); } .pied__colonne-titre { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-casper); } .pied__liste { display: flex; flex-direction: column; gap: var(--sp-3); margin-block-start: var(--sp-5); padding: 0; list-style: none; } .pied__lien { font-size: var(--fs-sm); color: var(--text-on-inverse); transition: color var(--dur-fast) var(--ease-out); } /* ---------- Les réseaux ---------- Sous la signature de marque, ajoutés le 01/09/2026. ⚠️ LA MARQUE PREND `currentColor`, C'EST TOUT L'INTÉRÊT DE L'INSCRIRE. Le pied est bleu nuit et son encre est `--text-on-inverse` ; une image posée en `` aurait gardé sa couleur d'origine et il aurait fallu la fournir en blanc, donc la refournir le jour où le pied change de fond. */ .pied__reseaux { display: flex; align-items: center; gap: var(--sp-4); margin-block-start: var(--sp-6); padding: 0; list-style: none; } .pied__reseau { display: inline-flex; align-items: center; /* ⚠️ LA MARGE EST LÀ POUR LA CIBLE, PAS POUR L'ESPACEMENT. La marque fait 22 px de côté ; nue, le lien offrait donc une cible de 22 px, sous les 24 exigés au doigt. Ce rembourrage la porte à 29 sans rien changer au dessin. L'écart entre les deux entrées est tenu par le `gap` de la liste, qui en tient compte. */ padding: var(--sp-1); margin: calc(var(--sp-1) * -1); color: var(--text-on-inverse); transition: color var(--dur-fast) var(--ease-out); } .pied__reseau-marque, .pied__reseau-masque { inline-size: 1.375rem; block-size: 1.375rem; } /* ⚠️ LA COULEUR EST UN FOND, LA FORME EST UN MASQUE. Le fichier de Welcome to the Jungle est une silhouette noire sur transparent : le masque n'en lit que le canal alpha, et c'est `currentColor` qui peint. La marque suit donc l'encre du pied — blanche au repos, fluo au survol — sans qu'un second fichier soit à fournir pour chaque état. ⚠️ `contain` ET NON `100% 100%`, contrairement à `mix.mask` : le fichier est un carré de 512 px dont le dessin ne remplit pas tout le cadre. Étiré, il perdrait sa marge propre et paraîtrait plus gros que la marque LinkedIn, qui la porte dans son viewBox. */ .pied__reseau-masque { display: block; background-color: currentColor; -webkit-mask: var(--marque) center/contain no-repeat; mask: var(--marque) center/contain no-repeat; } /* ⚠️ LE REPLI EN TEXTE PORTE LE CORPS DES LIENS DU PIED, et non celui d'un pictogramme : sans dessin, l'entrée EST un lien comme les autres. Welcome to the Jungle est dans ce cas tant que sa marque n'est pas fournie. */ .pied__reseau--texte { font-size: var(--fs-sm); } @media (hover: hover) { .pied__reseau:hover { color: var(--c-fluo); } } @media (hover: hover) { a.pied__lien:hover { color: var(--c-fluo); } } /* Une entrée dont la page n'existe pas encore. Le contraste tombe pour qu'on ne la confonde pas avec un lien, et la mention passe en fluo pour qu'elle ne puisse pas se glisser en production sans qu'on la voie. */ .pied__lien--absent { color: var(--c-casper); cursor: default; } .pied__a-creer { font-family: var(--font-mono); font-size: var(--fs-mono); font-style: normal; color: var(--c-fluo); } /* ---------- Ligne du bas ---------- */ .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-8); margin-block-start: var(--sp-16); padding-block-start: var(--sp-6); border-block-start: 1px solid rgba(255, 255, 255, 0.12); } .pied__mention { color: var(--text-muted-on-inverse); } /* Réinitialisation de bouton : `.pied__consentement` porte déjà `.pied__mention` pour la couleur et la taille, il ne lui manque que d'arrêter de ressembler à un